/* Дизайн-система g-engine gifts по UI-киту из docs/ui-kit. Токены и компоненты перенесены оттуда: имена переменных, значения, радиусы и типографика — как в ките. Тема переключается атрибутом data-theme на . Пока его нет, берётся системная. */ :root { /* ── Surfaces ─────────────────────────────── */ --bg: #eef0f3; --surface: #ffffff; --surface-muted: #f0f1f3; --surface-muted-h: #e8e9ec; --overlay: rgba(20, 22, 26, 0.42); /* ── Text ─────────────────────────────────── */ --text: #131316; --text-2: #2a2c30; --text-muted: #9aa0a8; --text-subtle: #b6bac1; --text-on-primary: #ffffff; /* ── Borders ──────────────────────────────── */ --border: rgba(19, 19, 22, 0.06); --border-strong: rgba(19, 19, 22, 0.12); /* ── Brand / accents ──────────────────────── */ --primary: #131316; --primary-hover: #2a2c30; --like: #ef3b3b; --like-soft: rgba(239, 59, 59, 0.08); --bookmark: #ff8a1f; --bookmark-soft: rgba(255, 138, 31, 0.10); --success: #1f9d5b; --success-soft: rgba(31, 157, 91, 0.10); /* Четвёртый акцент сверх кита: «идёт работа». Три семантических цвета кита заняты успехом, вниманием и сбоем, а промежуточному состоянию нужен свой — иначе оно либо сливается с покоем, либо врёт про результат */ --info: #2f6fed; --info-soft: rgba(47, 111, 237, 0.10); --avatar-from: #cfcfcb; --avatar-to: #b6b6b1; /* ── Typography ───────────────────────────── */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; /* Написание бренда — часть самого бренда, поэтому шрифт логотипа свой, не из кита */ --font-brand: 'Unbounded', 'Inter', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fs-xs: 13px; --fs-sm: 14px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 17px; --fs-xl: 22px; --fs-2xl: 30px; --fs-display-sm: 40px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-tight: 1.05; --lh-snug: 1.18; --lh-base: 1.45; --tracking-tight: -0.025em; --tracking-tighter: -0.035em; --tracking-brand: -0.04em; /* ── Radii ────────────────────────────────── */ --radius-sm: 11px; --radius-md: 20px; --radius-lg: 28px; --radius-pill: 999px; /* ── Spacing ──────────────────────────────── */ --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 14px; --space-7: 16px; --space-8: 18px; --space-9: 20px; --space-10: 22px; --space-11: 24px; --space-12: 26px; --space-13: 28px; --space-14: 32px; --space-15: 36px; --space-16: 40px; --space-17: 56px; --space-18: 80px; /* ── Controls ─────────────────────────────── */ --control-sm: 38px; --control-md: 44px; --control-lg: 48px; --control-xl: 56px; --gutter: 56px; --gutter-sm: 20px; --t-fast: 0.12s ease; --t-med: 0.22s cubic-bezier(.4, 0, .2, 1); --shadow-pop: 0 12px 32px -16px rgba(19, 19, 22, 0.18); } /* Тёмная тема кита: расходятся ровно те значения, что перечислены в docs/UI Kit Dark.html. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #121316; --surface: #1c1e22; --surface-muted: #24262b; --surface-muted-h: #2c2f35; --overlay: rgba(0, 0, 0, 0.55); --text: #f3f4f6; --text-2: #d3d5da; --text-muted: #83878f; --text-subtle: #55585f; --text-on-primary: #121316; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); --primary: #f3f4f6; --primary-hover: #d3d5da; --like: #ff5c5c; --like-soft: rgba(255, 92, 92, 0.14); --bookmark: #ffa64d; --bookmark-soft: rgba(255, 166, 77, 0.14); --success: #35c17c; --success-soft: rgba(53, 193, 124, 0.14); --info: #6f9bff; --info-soft: rgba(111, 155, 255, 0.16); --avatar-from: #4b4d52; --avatar-to: #34363b; --shadow-pop: 0 12px 32px -16px rgba(0, 0, 0, 0.55); } } :root[data-theme='dark'] { --bg: #121316; --surface: #1c1e22; --surface-muted: #24262b; --surface-muted-h: #2c2f35; --overlay: rgba(0, 0, 0, 0.55); --text: #f3f4f6; --text-2: #d3d5da; --text-muted: #83878f; --text-subtle: #55585f; --text-on-primary: #121316; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); --primary: #f3f4f6; --primary-hover: #d3d5da; --like: #ff5c5c; --like-soft: rgba(255, 92, 92, 0.14); --bookmark: #ffa64d; --bookmark-soft: rgba(255, 166, 77, 0.14); --success: #35c17c; --success-soft: rgba(53, 193, 124, 0.14); --info: #6f9bff; --info-soft: rgba(111, 155, 255, 0.16); --avatar-from: #4b4d52; --avatar-to: #34363b; --shadow-pop: 0 12px 32px -16px rgba(0, 0, 0, 0.55); } /* ============================================================ БАЗА ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); letter-spacing: var(--tracking-tight); -webkit-font-smoothing: antialiased; transition: background var(--t-fast), color var(--t-fast); } h1, h2, h3 { margin: 0; letter-spacing: var(--tracking-tight); } a { color: inherit; text-decoration: none; } /* hidden в разметке должен побеждать display у класса: скрытые элементы здесь — это флекс- и грид-элементы, и без этого правила атрибут на них не действует вовсе. */ [hidden] { display: none !important; } .mono { font-family: var(--font-mono); letter-spacing: 0; } .brand-type { font-family: var(--font-brand); font-weight: var(--fw-bold); letter-spacing: var(--tracking-brand); } /* ============================================================ КНОПКИ ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); height: var(--control-lg); padding: 0 var(--space-12); border: 0; border-radius: var(--radius-pill); background: var(--surface-muted); color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); white-space: nowrap; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); } .btn:hover:not(:disabled) { background: var(--surface-muted-h); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { background: var(--surface-muted); color: var(--text-subtle); cursor: not-allowed; } .btn-primary { background: var(--primary); color: var(--text-on-primary); } .btn-primary:hover:not(:disabled) { background: var(--primary-hover); } .btn-ghost { background: transparent; color: var(--text-2); } .btn-ghost:hover:not(:disabled) { background: var(--surface-muted); } .btn-danger { background: var(--like); color: #fff; } .btn-danger:hover:not(:disabled) { filter: brightness(1.08); } .btn.sm { height: var(--control-sm); padding: 0 var(--space-7); font-size: var(--fs-xs); } .btn.xs { height: 32px; padding: 0 var(--space-6); font-size: 12.5px; font-weight: var(--fw-semibold); } .btn.lg { height: var(--control-lg); padding: 0 var(--space-11); font-size: var(--fs-base); } .btn.block { width: 100%; justify-content: center; } .btn .ms { font-size: 18px; margin-left: -2px; } .btn.xs .ms { font-size: 17px; } /* Кнопка-иконка в строке таблицы: квадратная, без подписи, подпись — в title. */ .btn.only-icon { width: 34px; height: 34px; padding: 0; } .btn.only-icon .ms { margin: 0; font-size: 19px; } .icon-btn { width: var(--control-md); height: var(--control-md); border: 0; border-radius: var(--radius-pill); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-md); text-decoration: none; cursor: pointer; transition: background var(--t-fast); } .icon-btn:hover { background: var(--surface-muted-h); } .icon-btn.sm { width: var(--control-sm); height: var(--control-sm); } .icon-btn .ms { font-size: 20px; } /* ============================================================ ПОЛЯ ============================================================ */ .field { width: 100%; height: var(--control-lg); background: var(--surface-muted); border: 0; border-radius: var(--radius-md); padding: 0 var(--space-9); font: inherit; font-size: var(--fs-sm); color: var(--text); outline: none; transition: background var(--t-fast), box-shadow var(--t-fast); } .field::placeholder { color: var(--text-muted); } .field:focus { background: var(--surface-muted-h); } .field:disabled { color: var(--text-subtle); cursor: not-allowed; } select.field { appearance: none; padding-right: var(--space-14); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; cursor: pointer; } .field.sm { height: var(--control-sm); padding: 0 var(--space-7); font-size: var(--fs-xs); } select.field.sm { padding-right: var(--space-13); background-position: calc(100% - 16px) 17px, calc(100% - 10px) 17px; } /* Кастомный селект из кита вместо нативного