/* ===================================================================== TT2S — фирменный стиль (brand.css) Основа для всех страниц сайта. Лендинг (index.html) — эталон: новые и переделываемые страницы берут токены и компоненты отсюда, а не переопределяют цвета и шрифты у себя. Шрифты: Unbounded (заголовки и «крупные» подписи) и Golos Text (текст). Подключаются на странице через Google Fonts. ===================================================================== */ :root { /* цвета */ --tt-bg: #0c0c0e; --tt-bg-2: #111114; --tt-surface: #16161a; --tt-surface-2: #1c1c21; --tt-line: rgba(255, 255, 255, 0.09); --tt-line-strong: rgba(255, 255, 255, 0.18); --tt-ink: #f4f2f6; --tt-ink-soft: #cfc9d6; --tt-ink-muted: #a29cac; --tt-ink-faint: #958f9f; --tt-accent: #ff7ab8; /* фирменный розовый */ --tt-accent-deep: #e2559a; --tt-accent-ink: #0c0c0e; /* текст на розовом */ --tt-violet: #8b6cff; /* второй акцент — фокус, редкие акценты */ --tt-mint: #7be0ae; --tt-sky: #7ab8ff; --tt-sun: #e0c97a; /* шрифты */ --tt-font-display: 'Unbounded', system-ui, sans-serif; --tt-font-text: 'Golos Text', system-ui, sans-serif; --tt-font-mono: 'TT2S Mono', ui-monospace, Consolas, monospace; /* скругления и отступы */ --tt-r-sm: 12px; --tt-r-md: 18px; --tt-r-lg: 28px; --tt-r-xl: 40px; --tt-gutter: clamp(20px, 4vw, 48px); --tt-max: 1240px; /* тени */ --tt-shadow-card: 0 24px 60px rgba(0, 0, 0, 0.35); --tt-shadow-accent: 0 20px 60px color-mix(in srgb, var(--tt-accent) 35%, transparent); /* одна тень для окон и выпадающих панелей (окно подтверждения, тосты, каталог, меню «⋯», панели акцента и громкости в кабинете) */ --tt-shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.4); /* служебные оттенки, которые различаются в светлой и тёмной темах */ --tt-accent-text: var(--tt-accent); /* акцент, которым пишут текст */ --tt-dot: rgba(255, 255, 255, 0.07); /* точки фоновой сетки */ --tt-glass: rgba(12, 12, 14, 0.72); /* полупрозрачная шапка */ --tt-fill: rgba(255, 255, 255, 0.05); /* лёгкая подложка (чипы) */ --tt-fill-strong: rgba(255, 255, 255, 0.16); /* выключенный переключатель */ --tt-line-input: var(--tt-line-strong); /* рамка кнопки и поля: в светлой теме темнее, контраст ≥ 3:1 */ --tt-line-field: rgba(255, 255, 255, 0.36); /* рамка поля ввода и select: ≥ 3:1 к фону и поверхностям (задача 23) */ --tt-ok: #7be0ae; --tt-warn: #e0c97a; --tt-bad: #ff9a9a; /* --- токены v2 (план 2809): инструмент — кабинет, доки, /youtube, админка --- Значения обеих тем живут только здесь; кабинет (dashboard.css) держит на них алиасы со своими старыми именами. */ --tt-surface-3: #27272e; /* третья ступень поверхности (наведение) */ --tt-field: #0e0e11; /* фон поля ввода */ --tt-glass-chip: rgba(22, 22, 26, 0.94); /* плавающие чипы и плашки поверх контента */ --tt-line-faint: rgba(255, 255, 255, 0.06); --tt-line-bold: rgba(255, 255, 255, 0.42); /* наведение, выбранное, чекбоксы; ≥ 3:1 (задача 23) */ --tt-line-dash: rgba(255, 255, 255, 0.16); /* пунктир пустых мест */ --tt-scrim: rgba(6, 6, 8, 0.74); /* затемнение под окном */ --tt-code-bg: rgba(255, 255, 255, 0.08); --tt-ok-bg: #12261c; --tt-warn-bg: #2a2414; --tt-bad-bg: #2a1418; --tt-live: #ff4d5e; /* только индикатор «в эфире» */ --tt-live-bg: #2e1519; --tt-focus: var(--tt-violet); /* стекло плиток пульта (план 2909): заливка, обводка, блик, кромка, тень; -off — выключенная плитка (темнее, без блика и тени). --tt-glass выше — другое, это шапка. --tt-glow-* — яркость мотива функции под стеклом */ --tt-pane: rgba(255, 255, 255, 0.055); --tt-pane-hover: rgba(255, 255, 255, 0.085); --tt-pane-off: rgba(0, 0, 0, 0.28); --tt-pane-edge: rgba(255, 255, 255, 0.14); --tt-pane-edge-off: rgba(255, 255, 255, 0.10); --tt-pane-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 55%); --tt-pane-hi: inset 0 1px 0 rgba(255, 255, 255, 0.10); --tt-pane-drop: 0 10px 32px rgba(0, 0, 0, 0.30); --tt-glow-on: 0.42; --tt-glow-off: 0.08; --tt-off-opacity: 0.72; --tt-pane-cap: rgba(255, 255, 255, 0.12); /* подложка значка на стекле */ --tt-pane-inset: rgba(255, 255, 255, 0.045); /* ряд или вложенный блок на стекле (план 3009) */ --tt-screen: rgba(0, 0, 0, 0.30); /* тёмная вставка «монитор», текст в ней всегда светлый */ --tt-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a29cac' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); /* отступы */ --tt-sp-1: 4px; --tt-sp-2: 8px; --tt-sp-3: 12px; --tt-sp-4: 16px; --tt-sp-5: 20px; --tt-sp-6: 24px; --tt-sp-7: 32px; --tt-sp-8: 40px; --tt-sp-9: 56px; --tt-sp-10: 80px; /* кегль: инструмент */ --tt-fs-xs: 12px; --tt-fs-sm: 13.5px; --tt-fs-base: 15px; --tt-fs-md: 17px; --tt-fs-lg: 20px; --tt-fs-xl: 28px; /* кегль: витрина (display — как h1 лендинга; h1/h2/h3 — как .tt-h1/.tt-h2/.tt-h3) */ --tt-fs-display: clamp(40px, 7.4vw, 104px); --tt-fs-h1: clamp(32px, 4.6vw, 60px); --tt-fs-h2: clamp(34px, 5vw, 64px); --tt-fs-h3: clamp(19px, 2vw, 23px); /* скругления инструмента (--tt-r-sm/md/lg/xl — витрина) */ --tt-r-ctl: 10px; --tt-r-box: 14px; --tt-r-panel: 20px; /* высоты кнопок и полей */ --tt-h-sm: 32px; --tt-h-md: 40px; --tt-h-lg: 48px; /* движение */ --tt-dur-1: 120ms; --tt-dur-2: 180ms; --tt-dur-3: 320ms; --tt-ease: cubic-bezier(.2, .7, .2, 1); /* слои */ --tt-z-topbar: 50; --tt-z-drawer: 60; --tt-z-scrim: 70; --tt-z-toast: 1100; color-scheme: dark; --accent: var(--tt-accent); /* совместимость со старыми страницами */ } /* Светлая тема. Включается атрибутом , который ставит /theme-site.js (в кабинете — theme-early.js): выбор кнопкой «солнце/луна» в шапке, без выбора — тема системы. */ html[data-theme="light"] { color-scheme: light; --tt-bg: #f3f1f6; --tt-bg-2: #ebe8f0; --tt-surface: #ffffff; --tt-surface-2: #efedf2; --tt-line: rgba(22, 18, 30, 0.10); --tt-line-strong: rgba(22, 18, 30, 0.20); --tt-ink: #1c1a20; --tt-ink-soft: #3f3a47; --tt-ink-muted: #57525f; --tt-ink-faint: #5f5a68; --tt-accent-text: color-mix(in oklab, var(--tt-accent) 42%, #1b0f18); --tt-sky: #2f6fbf; --tt-mint: #197a4a; --tt-sun: #8a6a12; --tt-dot: rgba(22, 18, 30, 0.07); --tt-glass: rgba(243, 241, 246, 0.78); --tt-fill: rgba(22, 18, 30, 0.04); --tt-fill-strong: rgba(22, 18, 30, 0.16); --tt-ok: #156636; --tt-warn: #6b5312; --tt-bad: #a02828; --tt-shadow-card: 0 18px 44px rgba(40, 28, 60, 0.10); --tt-shadow-pop: 0 16px 44px rgba(40, 28, 60, 0.18); --tt-line-input: rgba(22, 18, 30, 0.5); --tt-line-field: var(--tt-line-input); /* токены v2 */ --tt-surface-3: #e7e4ec; --tt-field: #faf9fc; --tt-glass-chip: rgba(255, 255, 255, 0.96); --tt-line-faint: rgba(22, 18, 30, 0.07); --tt-line-bold: rgba(22, 18, 30, 0.62); --tt-line-dash: rgba(22, 18, 30, 0.18); --tt-scrim: rgba(20, 18, 24, 0.45); --tt-code-bg: rgba(22, 18, 30, 0.06); --tt-ok-bg: #d9f5e4; --tt-warn-bg: #fbeecb; --tt-bad-bg: #ffe3e3; --tt-live: #d0283a; --tt-live-bg: #ffeef0; --tt-pane: rgba(255, 255, 255, 0.55); --tt-pane-hover: rgba(255, 255, 255, 0.72); --tt-pane-off: rgba(255, 255, 255, 0.22); --tt-pane-edge: rgba(255, 255, 255, 0.85); --tt-pane-edge-off: rgba(255, 255, 255, 0.70); --tt-pane-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 50%); --tt-pane-hi: inset 0 1px 0 rgba(255, 255, 255, 1); --tt-pane-drop: 0 10px 30px rgba(60, 40, 90, 0.12); --tt-glow-on: 0.36; --tt-glow-off: 0.08; --tt-off-opacity: 0.66; --tt-pane-cap: rgba(255, 255, 255, 0.70); --tt-pane-inset: rgba(60, 40, 90, 0.05); --tt-screen: rgba(28, 24, 40, 0.78); --tt-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357525f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); } /* --- база --- */ /* Атрибут hidden прячет всегда: иначе display у класса (.action, flex-строки) перебивает его и «скрытая» кнопка остаётся на экране */ [hidden] { display: none !important; } .tt-page, .tt-page *, .tt-page *::before, .tt-page *::after { box-sizing: border-box; } .tt-page { margin: 0; background-color: var(--tt-bg); background-image: radial-gradient(var(--tt-dot) 1.1px, transparent 1.4px); background-size: 24px 24px; color: var(--tt-ink); font-family: var(--tt-font-text); -webkit-font-smoothing: antialiased; overflow-x: clip; } :where(.tt-page) a { color: inherit; text-decoration: none; } .tt-wrap { max-width: calc(var(--tt-max) + var(--tt-gutter) * 2); margin: 0 auto; padding: 0 var(--tt-gutter); position: relative; } /* --- типографика --- */ .tt-display { font-family: var(--tt-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.98; text-wrap: balance; } .tt-h2 { font-family: var(--tt-font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.02; font-size: clamp(34px, 5vw, 64px); margin: 0; text-wrap: balance; } .tt-h3 { font-family: var(--tt-font-display); font-weight: 700; font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.005em; line-height: 1.2; margin: 0; } .tt-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--tt-accent-text); } .tt-eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; } .tt-lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--tt-ink-soft); margin: 0; } .tt-text { font-size: 15.5px; line-height: 1.6; color: var(--tt-ink-muted); margin: 0; } /* Розовая «плашка» внутри заголовка — главный фирменный приём */ .tt-mark { display: inline-block; background: var(--tt-accent); color: var(--tt-accent-ink); padding: 0 0.16em 0.04em; border-radius: 0.18em; transform: rotate(-2deg); white-space: nowrap; box-shadow: var(--tt-shadow-accent); } /* Акцентное слово в заголовке без плашки — там, где .tt-mark уже есть на экране или неуместна */ .tt-hl { color: var(--tt-accent-text); } /* Контурный текст (водяные знаки, крупные цифры) */ .tt-outline { color: transparent; -webkit-text-stroke: 1.5px var(--tt-line-strong); } /* --- логотип --- */ .tt-logo { display: inline-block; line-height: 0; } .tt-logo img { display: block; height: 30px; width: auto; } /* Файлы логотипа (/img): logo.svg — для тёмного фона, logo-dark.svg — для светлого, logo-black.svg / logo-white.svg — одноцветные (на розовом и т. п.). Иконка — favicon.svg / icon-512.png. Буквы логотипа — отрисованные контуры шрифта Titan One, текстом его не набирать. */ /* Логотип под тему — две картинки рядом, показывается одна: подмена src скриптом давала мигание при загрузке. Так же в кабинете (dashboard.css). */ .logo-on-light { display: none !important; } html[data-theme="light"] .logo-on-dark { display: none !important; } html[data-theme="light"] img.logo-on-light { display: block !important; } /* Кнопка «солнце/луна» в шапке — её добавляет /theme-site.js */ .tt-theme-btn { width: 40px; height: 40px; flex-shrink: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--tt-fill); border: 1px solid var(--tt-line-strong); border-radius: 50%; color: var(--tt-ink-soft); cursor: pointer; transition: border-color var(--tt-dur-1) var(--tt-ease), color var(--tt-dur-1) var(--tt-ease); } .tt-theme-btn:hover { border-color: var(--tt-ink-faint); color: var(--tt-ink); } .tt-theme-btn svg { display: block; } /* --- иконки --- Эмодзи и символы-картинки (✕ ▶ ⚙ ★ и т. п.) на сайте не используем: они по-разному выглядят на разных системах и плохо центрируются. Вместо них — inline SVG со stroke="currentColor", 16–20px, внутри .tt-ico. */ .tt-ico { display: inline-block; flex-shrink: 0; width: 1.1em; height: 1.1em; vertical-align: -0.18em; } .tt-ico svg, svg.tt-ico { display: block; width: 100%; height: 100%; } /* --- кнопки --- */ .tt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--tt-font-text); font-weight: 800; font-size: 16px; letter-spacing: 0.01em; padding: 17px 28px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: transform var(--tt-dur-2) var(--tt-ease), box-shadow var(--tt-dur-2) var(--tt-ease), background-color var(--tt-dur-2) var(--tt-ease), border-color var(--tt-dur-2) var(--tt-ease); } .tt-btn svg { display: block; flex-shrink: 0; transition: transform var(--tt-dur-2) var(--tt-ease); } .tt-btn { line-height: 1.1; } .tt-btn:hover { transform: translateY(-3px); } .tt-btn:hover svg.tt-arrow { transform: translateX(4px); } .tt-btn:active { transform: translateY(-1px); } .tt-btn--primary { background: var(--tt-accent); color: var(--tt-accent-ink); box-shadow: var(--tt-shadow-accent); } .tt-btn--primary:hover { box-shadow: 0 26px 70px color-mix(in srgb, var(--tt-accent) 50%, transparent); } .tt-btn--light { background: var(--tt-ink); color: var(--tt-bg); } .tt-btn--ghost { background: transparent; color: var(--tt-ink); border-color: var(--tt-line-strong); } .tt-btn--ghost:hover { border-color: var(--tt-ink-soft); } .tt-btn--sm { font-size: 13px; padding: 11px 18px; letter-spacing: 0.06em; text-transform: uppercase; } /* --- кнопки инструмента (план 2809, задача 3) --- Одна система для кабинета (.action), док-панелей и /youtube (.btn — часть разметки генерирует JS, класс остаётся). Витрина — .tt-btn выше. Три высоты: .action--sm (и старые .small, .t-act, .cat-btn), обычная, .action--lg. Варианты: .primary, .danger, .ghost, .is-icon (квадрат). Списки селекторов, а не :is(): старый Chromium в OBS его не знает и выбросил бы правило целиком. */ .action, .btn { --btn-h: var(--tt-h-md); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 0 16px; border-radius: var(--tt-r-ctl); background: var(--tt-surface-2); border: 1px solid var(--tt-line-input); color: var(--tt-ink); font-family: var(--tt-font-text); font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: 0; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--tt-dur-1) var(--tt-ease), border-color var(--tt-dur-1) var(--tt-ease), color var(--tt-dur-1) var(--tt-ease), transform var(--tt-dur-1) var(--tt-ease); } .action svg, .btn svg { display: block; flex-shrink: 0; pointer-events: none; } .action:hover, .btn:hover { background: var(--tt-surface-3); border-color: var(--tt-line-bold); } .action:active, .btn:active { transform: scale(.98); } .action:focus-visible, .btn:focus-visible { outline: 2px solid var(--tt-focus); outline-offset: 2px; } .action.action--sm, .btn.action--sm, .btn.small, .action.t-act, .action.cat-btn { --btn-h: var(--tt-h-sm); padding: 0 12px; font-size: 12.5px; gap: 6px; } .action.action--lg, .btn.action--lg { --btn-h: var(--tt-h-lg); padding: 0 20px; font-size: 15px; } .action.is-icon, .btn.is-icon, .btn.icon { width: var(--btn-h); min-width: var(--btn-h); flex-shrink: 0; padding: 0; } .action.primary, .btn.primary { background: var(--tt-accent); border-color: var(--tt-accent); color: var(--tt-accent-ink); } .action.primary:hover:not(:disabled), .btn.primary:hover:not(:disabled) { background: var(--tt-accent); border-color: var(--tt-accent); filter: brightness(1.07); } .action.danger, .btn.danger { color: var(--tt-bad); border-color: color-mix(in srgb, var(--tt-bad) 40%, transparent); } .action.danger:hover:not(:disabled), .btn.danger:hover:not(:disabled) { border-color: var(--tt-bad); background: var(--tt-bad-bg); } .action.ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--tt-ink-soft); } .action.ghost:hover:not(:disabled), .btn.ghost:hover:not(:disabled) { background: var(--tt-surface-3); border-color: transparent; color: var(--tt-ink); } /* Выключенная: без наведения и нажатия; основная — как вторичная, иначе приглушённый акцент выглядит нажатым (аудит 2026-09-28, U36) */ .action:disabled, .btn:disabled, .action[aria-disabled="true"], .action.is-disabled { opacity: .5; cursor: default; transform: none; filter: none; background: var(--tt-surface-2); border-color: var(--tt-line-input); color: var(--tt-ink); } .action.danger:disabled, .btn.danger:disabled { color: var(--tt-bad); border-color: color-mix(in srgb, var(--tt-bad) 40%, transparent); } .action.ghost:disabled, .btn.ghost:disabled { background: transparent; border-color: transparent; } @media (prefers-reduced-motion: reduce) { .action, .btn { transition: none; } .action:active, .btn:active { transform: none; } } /* --- чипы и бейджи --- */ .tt-chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 14px; background: var(--tt-fill); border: 1.5px solid var(--tt-line-strong); font-family: var(--tt-font-display); font-weight: 700; font-size: 14px; } .tt-chip svg { color: var(--tt-accent-text); flex-shrink: 0; } .tt-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; border: 1.5px solid currentColor; } /* --- карточки --- */ /* Карточки и панели — матовое стекло плиток пульта (план 3009, задача 2): заливка --tt-pane с бликом, светлая кромка, тень. Без backdrop-filter — фон под ними неподвижный */ .tt-card { position: relative; overflow: hidden; background: var(--tt-pane-sheen), var(--tt-pane); border: 1.5px solid var(--tt-pane-edge); border-radius: var(--tt-r-lg); box-shadow: var(--tt-pane-hi), var(--tt-pane-drop); transition: border-color var(--tt-dur-2) var(--tt-ease), transform var(--tt-dur-2) var(--tt-ease); } .tt-card:hover { border-color: var(--tt-line-strong); } /* --- пузыри чата (иллюстрации) --- */ .tt-bubble { display: inline-block; max-width: 100%; background: color-mix(in srgb, var(--tt-surface) 94%, transparent); border: 1.5px solid var(--tt-line); border-radius: 20px 20px 20px 6px; padding: 12px 16px; font-size: 16px; line-height: 1.4; box-shadow: var(--tt-shadow-card); } .tt-bubble b { font-weight: 800; margin-right: 6px; } .tt-bubble--bot { border-radius: 20px 20px 6px 20px; background: color-mix(in srgb, var(--tt-accent) 13%, var(--tt-surface)); border-color: color-mix(in srgb, var(--tt-accent) 45%, transparent); } /* --- фокус с клавиатуры (дублирует a11y.css для страниц без него) --- */ .tt-page :focus-visible { outline: 2px solid var(--tt-focus); outline-offset: 3px; } /* --- появление при скролле --- */ .tt-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--tt-dur-3) var(--tt-ease), transform var(--tt-dur-3) var(--tt-ease); } .tt-reveal.in-view { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .tt-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .tt-btn, .tt-btn svg, .tt-card { transition: none !important; } .tt-btn:hover, .tt-btn:active, .tt-btn:hover svg.tt-arrow { transform: none; } } /* «Уменьшить движение» на всех страницах с brand.css (план 2809, задача 22): переходы и анимации мгновенно доходят до конца — ленты, пятно, волны, «в эфире», маскот, спиннеры и появления стоят, смена состояний остаётся. Виджеты OBS brand.css не подключают */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ===================================================================== Компоненты внутренних страниц (кабинет, бета, заявки, статистика и т. д.) ===================================================================== */ /* --- шапка сайта: логотип слева, ссылки, справа — пользователь/кнопки --- */ .tt-topbar { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: var(--tt-glass); border-bottom: 1px solid var(--tt-line); } .tt-topbar-inner { max-width: calc(var(--tt-max) + var(--tt-gutter) * 2); margin: 0 auto; padding: 0 var(--tt-gutter); min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .tt-topbar .tt-logo img { height: 34px; } .tt-topbar-links { display: flex; align-items: center; gap: 26px; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tt-ink-soft); } .tt-topbar-links a:hover, .tt-topbar-links a[aria-current="page"] { color: var(--tt-ink); } .tt-topbar-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--tt-accent); padding-bottom: 4px; } .tt-topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tt-user { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--tt-ink-soft); } .tt-user img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--tt-accent-text); object-fit: cover; } /* Шапка с несколькими ссылками (служебные /admin*): на телефоне ссылки уходят второй строкой в ленту с прокруткой, а логотип и кнопка темы остаются в первой. Разметка:
и ссылки в