/* * Базовый слой: токены, сброс, типографика, утилиты. * Токены взяты из прототипов v1/v3 без изменений — они у обеих схем общие. */ /* ---------------------------------------------------------------- Токены */ :root, [data-theme='light'] { --bg: #EFEAE0; --panel: #E4DCCC; --card: #FBF8F2; --ink: #16150F; --dim: #6C6656; --line: rgba(22, 21, 15, .16); --hard: rgba(22, 21, 15, .5); --acc: #FF4A1C; --accink: #FFF8F4; --sec: #14453B; --secink: #EFEAE0; --shot: #D8D0C0; } [data-theme='dark'] { --bg: #0A0B0D; --panel: #14171C; --card: #101318; --ink: #F1F2EE; --dim: #868D97; --line: rgba(255, 255, 255, .14); --hard: rgba(255, 255, 255, .45); --acc: #FF4A1C; --accink: #FFF8F4; --sec: #CBFF44; --secink: #0A0B0D; --shot: #1B1F26; } :root { /* Холст прототипа — 1920. Отступы и кегли пересчитаны от него во vw. */ --w-max: 1920px; --pad-x: clamp(16px, 2.92vw, 56px); /* 56px на 1920 — шапка/подвал */ --pad-x-lg: clamp(20px, 3.23vw, 62px); /* 62px на 1920 — контентные блоки */ --font-display: 'Unbounded', system-ui, sans-serif; --font-text: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; --fs-mono: 13px; --fs-mono-sm: 12.4px; --ls-mono: .1em; --header-h: 80px; } /* ------------------------------------------------------------ Сброс/база */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* * Плавная смена темы. Переходы включаются только на время переключения — * классом на , который снимает ui.js. Постоянный переход на всех * элементах тормозил наведение и перебивал собственные анимации * (шторка тумблера переставала ездить и прыгала скачком). */ html.is-theme-switching, html.is-theme-switching *, html.is-theme-switching *::before, html.is-theme-switching *::after { transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--acc); text-decoration: none; transition: color .18s ease; } a:hover { color: var(--ink); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } button { font: inherit; color: inherit; } input[type='range'] { accent-color: var(--acc); } :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } /* -------------------------------------------------------------- Утилиты */ .shell { width: 100%; max-width: var(--w-max); margin: 0 auto; } /* Технические подписи — моноширинный капслок, основной приём схемы v1. */ .mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--dim); } /* Каркас страницы: пока блоки не свёрстаны, контент хотя бы не липнет к краям. */ .site-main { width: 100%; max-width: var(--w-max); margin: 0 auto; padding: clamp(32px, 3.7vw, 72px) var(--pad-x-lg); } .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; } .skip-link { position: absolute; top: -100px; left: var(--pad-x); z-index: 100; background: var(--acc); color: var(--accink); padding: 12px 20px; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; } .skip-link:focus { top: 12px; color: var(--accink); } @media (prefers-reduced-motion: reduce) { html.is-theme-switching, html.is-theme-switching *, html.is-theme-switching *::before, html.is-theme-switching *::after { transition: none; } }