/* ========================================================================== Громова.дизайн — дизайн-токены -------------------------------------------------------------------------- Адаптация WordPress Design Kit под существующий Astro/React-проект. Сохраняет тёмную эстетику сайта (#050505 + #ffffff + Manrope/Unbounded). Spacing — сетка 8dp по Material Design (как было в ките). -------------------------------------------------------------------------- Применение: 1. Положить рядом с public/global.css. 2. В Layout.astro добавить ПЕРЕД — токены должны грузиться раньше, чтобы global.css мог их использовать. 3. По мере правок заменять хардкод-значения на var(--*) из этого файла. Менять всё сразу не нужно — токены работают как справочник. ========================================================================== */ :root { /* ──────────────────────────────────────────────────────────── SPACING — 8dp grid (Material Design) Все секционные отступы, gap'ы и paddings — кратны 8. Шкала покрывает диапазон, который уже фактически используется в global.css: от 4px (text-shadow) до 176px (cta-final bottom). ──────────────────────────────────────────────────────────── */ --space-2: 2px; /* hairline gap (используется в .avito-stars) */ --space-4: 4px; /* micro: review-role margin, plan-badge padding */ --space-6: 6px; /* avito-rating gap, skill chip icon gap */ --space-8: 8px; /* base unit */ --space-10: 10px; /* skill gap, button-row inner */ --space-12: 12px; /* tag gap, hero-stat gap */ --space-14: 14px; /* review-card head gap */ --space-16: 16px; /* mobile padding, process num margin */ --space-18: 18px; /* skill chip horiz padding */ --space-20: 20px; /* avito-badge padding, pricing-grid gap */ --space-24: 24px; /* sect padding mobile, tag margin */ --space-28: 28px; /* stat-box padding, review-card padding, cta-sub margin */ --space-32: 32px; /* sect inner spacing, h2 margin, plan padding */ --space-40: 40px; /* sect padding tablet horiz, hero-stat shifts */ --space-48: 48px; /* cta-buttons margin, about-grid gap */ --space-56: 56px; /* stats-grid margin */ --space-64: 64px; /* services-grid margin, seo-grid gap */ --space-80: 80px; /* foot padding top, hero-stat-2 bottom */ --space-96: 96px; /* sect padding mobile, hero-stat right */ --space-112: 112px; /* hero-stat-2 bottom tablet */ --space-128: 128px; /* sect padding tablet, cta-final top */ --space-176: 176px; /* cta-final bottom */ /* ──────────────────────────────────────────────────────────── LAYOUT ──────────────────────────────────────────────────────────── */ --container-max: 1200px; /* .container, .foot-inner */ --container-wide: 1440px; /* .nav-wrap */ --content-narrow: 880px; /* .cta-inner, .lib-h1 */ --content-text: 760px; /* .avito-badge, .lib-lead, .skills */ --content-prose: 640px; /* .lead, .sect-sub */ /* ──────────────────────────────────────────────────────────── TYPOGRAPHY — семейства ──────────────────────────────────────────────────────────── */ --font-display: 'Unbounded', 'Manrope', sans-serif; --font-body: 'Manrope', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* ──────────────────────────────────────────────────────────── ШКАЛА ЗАГОЛОВКОВ (fluid) — унифицированная -------------------------------------------------------------- Раньше в global.css было 6 разрозненных clamp() «на глазок», где соседние размеры отличались на 4–8px без системы. Здесь они сведены к единой шкале с шагом ≈1.25 (Major Third). Каждая ступень спроектирована так, чтобы попасть в текущие значения сайта со сдвигом не более 2–4px на максимуме — визуально незаметно, но теперь это система, а не набор. Соответствие старым значениям: --fs-display ← hero h1 clamp(64,13vw,220) → clamp(56,13vw,200) --fs-cta ← cta-h2 clamp(56,6.5vw,130)→ clamp(48,7vw,128) --fs-h1 ← lib-h1 clamp(40,5vw,80) → без изменений --fs-h2 ← h2-big clamp(36,4.5vw,72) → clamp(36,4.5vw,72) --fs-h3 ← h2-mid clamp(28,3.4vw,56) → clamp(28,3.4vw,56) --fs-h4 ← about h2 clamp(36,4vw,64) → clamp(24,2.6vw,40) Применение в global.css (Вариант 2 рефакторинг): .hero h1 { font-size: var(--fs-display); } .cta-h2 { font-size: var(--fs-cta); } .lib-h1 { font-size: var(--fs-h1); } .h2-big { font-size: var(--fs-h2); } .h2-mid { font-size: var(--fs-h3); } .about-text h2 { font-size: var(--fs-h4); } Хочешь нулевой сдвиг на hero — оставь его clamp инлайном, остальное переведи на шкалу. Это допустимо: hero — «именованное исключение», задокументировано в CLAUDE.md. ──────────────────────────────────────────────────────────── */ --fs-display: clamp(56px, 13vw, 200px); /* hero h1 — самый крупный экран */ --fs-cta: clamp(48px, 7vw, 128px); /* финальный CTA-заголовок */ --fs-h1: clamp(40px, 5vw, 80px); /* H1 страницы (каталог, лендинги) */ --fs-h2: clamp(36px, 4.5vw, 72px); /* крупный заголовок секции */ --fs-h3: clamp(28px, 3.4vw, 56px); /* средний заголовок секции */ --fs-h4: clamp(24px, 2.6vw, 40px); /* малый заголовок / подсекция */ --fs-h5: clamp(20px, 2vw, 28px); /* заголовок карточки */ /* Размеры — фиксированные (нерезиновые) значения из global.css. Используются для интерфейсных подписей, кнопок, мета-текста. */ --fs-micro: 10px; /* .about-cap, .plan-badge, .hero-scroll */ --fs-eyebrow: 11px; /* .tag, .foot-title, .reviews-screens-label */ --fs-tiny: 12px; /* .hero-stat p, .skills-hint, .nav links labels */ --fs-sm: 13px; /* .stat-lab, .plan-name, .avito-sub */ --fs-base: 14px; /* .nav-links, .foot-desc, .skill, .review-name */ --fs-md: 15px; /* .hero-desc, .plan-features, .review-text, .cta-primary */ --fs-lg: 16px; /* .sect-sub, .seo-grid p, .cta-primary */ --fs-xl: 17px; /* .adv-card h3, .lib-lead */ --fs-2xl: 18px; /* .lead, .service-title, .avito-count, .cta-sub */ --fs-3xl: 28px; /* .service-num, .plan-price, .adv-num */ --fs-4xl: 36px; /* .process-num */ --fs-5xl: 44px; /* .avito-rating */ /* Веса */ --fw-normal: 400; --fw-medium: 500; /* основной для заголовков и кнопок */ --fw-semibold: 600; /* инициалы в .review-avatar */ --fw-bold: 700; /* .plan-name */ /* Line-height */ --lh-tight: 0.9; /* hero h1 */ --lh-snug: 1.05; /* h2-big, h2-mid, lib-h1 */ --lh-heading: 1.2; --lh-body: 1.6; /* .lead, .review-text, .seo-grid p */ --lh-loose: 1.7; /* Letter-spacing — система иерархии */ --letter-spacing-display: -0.04em; /* крупные заголовки (64px+) */ --letter-spacing-base: -0.02em; /* средние заголовки (28-56px) */ --letter-spacing-light: -0.01em; /* body + мелкие (14-18px) */ /* Legacy tracking (совместимость с global.css) */ --tracking-tight: -0.04em; /* hero h1, cta-h2 */ --tracking-snug: -0.03em; /* h2-big, h2-mid, lib-h1 */ --tracking-normal: -0.01em; /* nav-logo, plan-name, .display */ --tracking-wide: 0.18em; /* .plan-name */ --tracking-wider: 0.2em; /* .foot-title, .plan-badge */ --tracking-widest: 0.25em; /* .tag eyebrow, .reviews-screens-label */ --tracking-mono: 0.3em; /* .hero-scroll, .about-cap */ /* ──────────────────────────────────────────────────────────── COLORS — основа Тёмная палитра, осознанно нарушает Material «no pure black». ──────────────────────────────────────────────────────────── */ --bg: #050505; /* основной фон (html) */ --bg-fallback: #050505; /* фолбэк до загрузки видео */ --surface-0: #000000; /* контрастный тёмный (.plan-dark) */ --surface-1: #0a0a0a; /* scrollbar-track */ --surface-2: rgba(15, 15, 15, 0.65); /* .review-card, .avito-badge */ --surface-3: rgba(20, 20, 20, 0.85); /* .nav-logo, .nav-links, .service-card:hover */ --surface-glass: rgba(20, 20, 20, 0.6); /* .about-photo */ --surface-tint: rgba(15, 15, 15, 0.4); /* .skill */ --surface-card: rgba(0, 0, 0, 0.55); /* .stat-box, .service-card, .adv-card */ --surface-process: rgba(255, 255, 255, 0.02); /* .process-card */ --surface-light: #ffffff; /* .plan (светлые тарифы) */ --surface-light-2: #f3f3f3; /* .plan-highlight gradient start */ --surface-light-3: #e5e5e5; /* hover для светлых кнопок */ /* ──────────────────────────────────────────────────────────── COLORS — текст / контент (ink scale) Сохранены реальные значения, которые встречаются в global.css. Не округляем, чтобы не сдвинуть существующую визуальную иерархию. ──────────────────────────────────────────────────────────── */ --ink: #ffffff; /* 100% — заголовки, имена, цены */ --ink-85: rgba(255, 255, 255, 0.85); /* hero-desc, plan-features */ --ink-78: rgba(255, 255, 255, 0.78); /* review-text */ --ink-75: rgba(255, 255, 255, 0.75); /* nav-links, skill, ink-75 */ --ink-70: rgba(255, 255, 255, 0.70); /* hero-stat p, lead */ --ink-65: rgba(255, 255, 255, 0.65); /* lib-lead, foot-col a, avito-badge-right */ --ink-62: rgba(255, 255, 255, 0.62); /* — наследие старой --ink-60 */ --ink-60: rgba(255, 255, 255, 0.60); /* tag eyebrow, cta-sub */ --ink-55: rgba(255, 255, 255, 0.55); /* sect-sub, stat-lab, service-desc, adv-card p */ --ink-50: rgba(255, 255, 255, 0.50); /* review-role, foot-desc */ --ink-45: rgba(255, 255, 255, 0.45); /* plan-features svg dark */ --ink-40: rgba(255, 255, 255, 0.40); /* tag line, hero-scroll, skills-hint */ --ink-30: rgba(255, 255, 255, 0.30); /* service-arrow, hero-scroll .bar */ --ink-20: rgba(255, 255, 255, 0.20); /* process-num, cta-secondary border */ --ink-15: rgba(255, 255, 255, 0.15); /* skill border, about-photo border, plan-dark border, service-num */ --ink-12: rgba(255, 255, 255, 0.12); /* review-card border, avito-badge border */ --ink-10: rgba(255, 255, 255, 0.10); /* nav border, stats-grid gap & border, reviews-grid */ --ink-08: rgba(255, 255, 255, 0.08); /* nav-links hover, process-card border, foot-bot border */ /* ──────────────────────────────────────────────────────────── COLORS — тёмные оверлеи (на видео и для теней) ──────────────────────────────────────────────────────────── */ --shade-85: rgba(0, 0, 0, 0.85); --shade-70: rgba(0, 0, 0, 0.70); --shade-65: rgba(0, 0, 0, 0.65); --shade-55: rgba(0, 0, 0, 0.55); --shade-50: rgba(0, 0, 0, 0.50); --shade-40: rgba(0, 0, 0, 0.40); --shade-35: rgba(0, 0, 0, 0.35); --shade-30: rgba(0, 0, 0, 0.30); --shade-25: rgba(0, 0, 0, 0.25); --shade-18: rgba(0, 0, 0, 0.18); --shade-15: rgba(0, 0, 0, 0.15); /* Видео-оверлей фона сайта (радиальный) */ --overlay-video: radial-gradient( ellipse 120% 90% at 50% 35%, rgba(5, 5, 5, 0.85) 0%, rgba(5, 5, 5, 1) 100% ); /* ──────────────────────────────────────────────────────────── COLORS — акцент Бренд-акцент = Dusty Rose (#C4889C). Единственное «цветное» семейство на сайте, кроме звёзд Авито. Для белого текста на заливке — --accent-cta (затемнённая роза, WCAG AA ≥4.5:1). ──────────────────────────────────────────────────────────── */ --accent: #C4889C; /* Dusty Rose */ --accent-deep: #9B6275; /* конец градиента skill hover */ --accent-warm: #A87084; /* .plan-highlight badge */ --accent-gradient: linear-gradient(135deg, #C4889C 0%, #9B6275 100%); --accent-glow: rgba(196, 136, 156, 0.45); /* Заливка кнопок с БЕЛЫМ текстом — accent (#C4889C) даёт лишь 2.86:1. Эти затемнённые оттенки держат WCAG AA: white ≥4.5:1. */ --accent-cta: #9B6275; /* white text = 4.77:1 */ --accent-cta-hover: #84505F; /* white text = 6.37:1 */ /* ──────────────────────────────────────────────────────────── COLORS — новая палитра (премиум, постельные) Добавлены для премиум-элементов, secondary actions, dividers. ──────────────────────────────────────────────────────────── */ --premium-rose: #C4889C; /* Rose Strong — для buttons, borders, accents на затемнении */ --premium-mauve: #B898B8; /* Mauve Strong — для secondary, dividers, secondary badges */ --premium-gold: #E8D4B8; /* Soft Gold — для hero блока, light accents */ --premium-blush: #E8C4D0; /* Soft Blush — для hero блока, tender accents */ /* Утилитарные */ --rating-star: #ffb800; /* звёзды Авито и review */ /* Светлые карточки тарифов (текст на светлом фоне) */ --on-light: rgba(0, 0, 0, 0.85); /* plan-features li */ --on-light-70: rgba(0, 0, 0, 0.70); --on-light-60: rgba(0, 0, 0, 0.60); --on-light-55: rgba(0, 0, 0, 0.55); --on-light-45: rgba(0, 0, 0, 0.45); /* ──────────────────────────────────────────────────────────── BORDER RADIUS На сайте круглые «pills» и крупные карточки — Material 16+ ──────────────────────────────────────────────────────────── */ --radius-sm: 4px; /* scrollbar-thumb */ --radius-md: 12px; --radius-lg: 20px; /* .process-card, .review-card, .avito-badge */ --radius-xl: 24px; /* .plan, .about-photo */ --radius-pill: 999px; /* nav, buttons, skill, plan-cta */ /* ──────────────────────────────────────────────────────────── SHADOWS Сохранены реальные значения из global.css. ──────────────────────────────────────────────────────────── */ --shadow-card: 0 4px 12px -2px rgba(0, 0, 0, 0.4); /* review-avatar */ --shadow-photo: 0 30px 60px -20px rgba(0, 0, 0, 0.7); /* about-photo */ --shadow-plan: 0 40px 80px -30px rgba(0, 0, 0, 0.5); /* plan-highlight */ --shadow-skill-hover: 0 8px 20px -6px rgba(196, 136, 156, 0.5); /* skill:hover — rose glow */ --shadow-line: 0 0 8px rgba(0, 0, 0, 0.5); /* hero .line */ --shadow-text: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 24px rgba(0, 0, 0, 0.5); /* ──────────────────────────────────────────────────────────── MOTION Material: ≤2 значимых анимации на страницу. У сайта их намеренно больше (видео-фон, параллакс, 3D-карусель) — это ядро продукта, не декор. Здесь — только утилитарные timings. ──────────────────────────────────────────────────────────── */ --ease-out-expressive: cubic-bezier(0.22, 1, 0.36, 1); /* основной для скилов и reveal */ --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1); /* видео-оверлей при скролле */ --duration-instant: 0.12s; /* video overlay opacity (соответствует JS) */ --duration-fast: 0.2s; /* hover-стейты кнопок и ссылок */ --duration-base: 0.3s; /* skill chips, avito-badge hover */ --duration-slow: 0.9s; /* reveal-on-scroll */ /* ──────────────────────────────────────────────────────────── BLUR (glass-эффекты) ──────────────────────────────────────────────────────────── */ --blur-glass: blur(8px); /* nav, avito-badge, about-date */ /* ──────────────────────────────────────────────────────────── Z-INDEX scale ──────────────────────────────────────────────────────────── */ --z-bg: 0; --z-overlay: 1; --z-content: 10; --z-nav: 50; --z-floating: 80; --z-modal: 100; } /* ────────────────────────────────────────────────────────────── PREFERS-REDUCED-MOTION На сайте уже учтено в global.css для .reveal. Здесь — на случай если кто-то начнёт использовать токены --duration-* в новых местах. ────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0.01s; --duration-fast: 0.01s; --duration-base: 0.01s; --duration-slow: 0.01s; } }