/* ========================================================================== tokens.css — единственный источник значений для всего проекта. Ни в base.css, ни в components.css, ни в sections.css не должно быть цветовых и размерных литералов: только var(--…). Исключение — медиазапросы: CSS не позволяет использовать в них переменные. Тема: тёмная. Светлый объект на странице ровно один — карточка свидетельства в hero (--paper / --paper-ink / --paper-line). ========================================================================== */ :root { /* ---------- Цвет: фон ---------- */ --bg: #0A0F0D; /* почти чёрный с зелёным подтоном */ --bg-2: #0E1512; /* чередующиеся секции */ --surface: #131C18; /* карточки */ --surface-2: #18231E; /* карточка при ховере */ --bg-deep: #070B09; /* футер — самый тёмный блок */ /* ---------- Цвет: текст ---------- */ --text: #F4EFE2; /* тёплая слоновая кость, основной */ --text-soft: #A8B3AC; /* вторичный */ --text-mute: #6B7A72; /* подписи, сноски — только 11–13px */ /* ---------- Цвет: акценты ---------- */ --gold: #C9A227; /* главный акцент: кнопки, подсветка слов */ --gold-lt: #E8D49A; /* ховер, тонкие линии */ --gold-dim: rgba(201, 162, 39, .12); /* фон бейджей и подсветок */ --green: #3FD07E; /* ТОЛЬКО галочки в тарифах и статус «легально» */ --rose: #C97B85; /* один-два эмоциональных акцента, не больше */ /* производные акцентов */ --gold-glow: rgba(201, 162, 39, .16); /* мягкое свечение карточки тарифа */ --green-dim: rgba(63, 208, 126, .12); --on-gold: #0A0F0D; /* текст поверх золотой заливки */ /* ---------- Линии и стекло ---------- */ --line: rgba(244, 239, 226, .10); --line-2: rgba(244, 239, 226, .18); --glass: rgba(244, 239, 226, .04); /* ---------- Светлая карточка свидетельства ---------- */ --paper: #FBF7EC; --paper-ink: #12211B; --paper-line: rgba(18, 33, 27, .16); --paper-soft: rgba(18, 33, 27, .62); /* вторичный текст на бумаге: .56 давало 3.84:1 */ --paper-line-2: rgba(18, 33, 27, .28); /* Золото на светлом: --gold даёт на бумаге всего 2.26:1 и выцветает. Тот же тон, притемнённый до 4.55:1. */ --gold-ink: #896E1B; /* ---------- Фото-подложка первого экрана ---------- Фотография не должна спорить с текстом: гасим прозрачностью и накрываем затемнением, сильнее слева, где стоит заголовок. */ --hero-photo-opacity: .3; --hero-scrim-a: rgba(10, 15, 13, .94); --hero-scrim-b: rgba(10, 15, 13, .62); --hero-scrim-v: rgba(10, 15, 13, .55); /* ---------- Зерно поверх фона ---------- */ --grain-opacity: .03; --grain-size: 180px; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); /* ---------- Шрифты ---------- */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- Модульная шкала размеров ---------- На тёмном фоне тонкие штрихи серифа теряются: заголовки только 600. */ --fs-display: clamp(3rem, 7vw, 6rem); --fs-h1: clamp(2.6rem, 6vw, 5.2rem); --fs-h2: clamp(2rem, 4.4vw, 3.5rem); --fs-h3: clamp(1.35rem, 1.9vw, 1.75rem); --fs-h4: clamp(1.1rem, 1.3vw, 1.25rem); --fs-lead: clamp(1.0625rem, 1.1vw, 1.25rem); --fs-cta-lead: 1.125rem; /* 18px — подзаголовок финального CTA */ --fs-body: clamp(1rem, .4vw + .9rem, 1.0625rem); --fs-sm: .9375rem; --fs-xs: .8125rem; /* 13px — нижняя граница для --text-mute */ --fs-caption: .6875rem; /* 11px — эйбрау и подписи заглушек */ /* цифры тарифов */ --fs-price: clamp(2.6rem, 5vw, 3.75rem); /* номера шагов таймлайна */ --fs-step: clamp(1.5rem, 3vw, 2.25rem); /* ---------- Интерлиньяж и трекинг ---------- */ --lh-display: 1.02; /* только H1: на 5.2rem плотность уместна */ --lh-title: 1.1; /* H2: на 2–3.5rem 1.02 зажимает выносные */ --lh-heading: 1.06; --lh-snug: 1.34; --lh-body: 1.62; --lh-loose: 1.78; --ls-tight: -.015em; --ls-normal: 0; --ls-wide: .04em; --ls-caps: .12em; --ls-seal: .18em; /* текст по окружности печати */ --underline-offset: .2em; /* ---------- Размеры отдельных объектов ---------- */ --cert-w: 360px; /* карточка свидетельства, ~5:7 */ --autograph-w: clamp(118px, 46%, 168px); /* росчерк регистратора */ --fs-cert-title: clamp(1.25rem, 6vw, 1.45rem); --fs-cert-value: clamp(1.05rem, 2.2vw, 1.3rem); /* крупнее подписей полей */ --engrave-step: 5px; /* шаг гравюрной штриховки */ --seal-size: clamp(92px, 24vw, 130px); --seal-out: calc(var(--seal-size) / 3); /* насколько печать выходит за рамку */ --seal-tilt: -8deg; --fs-seal: 7px; /* в координатах viewBox печати */ --step-col: clamp(56px, 9vw, 88px); /* колонка номеров таймлайна */ --portrait-w: 200px; --legal-photo-w: 440px; /* фотокарточка в блоке легальности */ --legal-photo-h-sm: 320px; /* её высота, когда колонки сложились */ --legal-photo-focus: 50% 26%; /* при сильном кропе держим кадр по лицам */ /* Приглушение фотографии под палитру сайта */ --photo-tone: saturate(.82) contrast(1.03) brightness(.95); --photo-scrim-opacity: .35; --perk-ph-sm: 88px; /* картинка преимущества на узком экране */ --fs-quote: clamp(1.6rem, 3.2vw, 2.4rem); --burger-gap: 5px; --burger-shift: 6px; --blur: 12px; --glow-r: 48px; /* ---------- Шкала отступов ---------- */ --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 8rem; /* воздуха не жалеем — это половина эффекта */ --section-y: clamp(96px, 12vw, 180px); --section-y-sm: clamp(64px, 8vw, 120px); --gutter: clamp(1.25rem, .6rem + 2.6vw, 2.5rem); --stack-gap: var(--space-md); /* ---------- Раскладка ---------- */ --container: 1440px; --container-narrow: 940px; /* FAQ */ --container-wide: 1600px; --container-price: 1180px; /* тарифы */ --container-steps: 1000px; /* таймлайн процесса */ --container-cta: 1200px; /* светлая плашка финального CTA */ --header-h: 72px; --anchor-offset: 96px; /* scroll-margin-top у секций */ --header-bg: rgba(10, 15, 13, .85); --overlay-bg: rgba(10, 15, 13, .97); /* ---------- Радиусы ---------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; /* базовый радиус карточек */ --radius-xl: 28px; --radius-pill: 999px; /* ---------- Линии и обводки ---------- */ --border-hair: 1px; --border-thick: 2px; --stroke-icon: 1.5px; /* обводка всех линейных SVG-иконок */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --rule-w: 24px; /* золотая черта перед эйбрау */ --btn-xl-y: 20px; /* крупная кнопка финального CTA */ --btn-xl-x: 40px; /* ---------- Тени ---------- На тёмном фоне тени не читаются: работает граница. Тень нужна ровно в одном месте — отделить светлую бумагу от фона. */ --shadow-paper: 0 18px 40px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3); /* Мягкое золотое свечение под светлой плашкой CTA — без резких границ */ --shadow-cta: 0 0 120px rgba(201, 162, 39, .18), 0 24px 60px rgba(0, 0, 0, .45); --shadow-photo: 0 12px 32px rgba(0, 0, 0, .35); /* ---------- Анимации ---------- */ --dur-fast: .16s; --dur-base: .28s; --dur-slow: .48s; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.22, .61, .36, 1); --lift: 2px; /* подъём карточки при ховере */ --marquee-dur: 42s; --seal-dur: 36s; /* ---------- Слои ---------- */ --z-grain: 0; --z-base: 1; --z-menu: 90; /* ниже шапки: бургер остаётся видимым и кликабельным */ --z-header: 100; --z-skip: 200; --focus-ring: var(--gold); }