/* Токены темы dg2026. * * Цвета — ровно те, что отдаёт коллекция Color в Figma (get_variable_defs). * Остальное — из README макета, раздел 2 и 3: там радиусы, сетка и шкала * типографики заданы текстом, переменными в Figma они не описаны. * * ВАЖНО: это единственный файл темы, где допустимы литералы. В theme.css * не должно быть ни одного хардкодного цвета, радиуса или отступа. */ :root { /* --- Color (из переменных Figma) --- */ --dg-bg-base: #eff4f4; --dg-bg-surface: #ffffff; --dg-bg-header: #0e4c52; --dg-bg-accent: #f64a00; --dg-bg-muted: #dce8e9; --dg-text-primary: #072f33; --dg-text-secondary: #0e4c52; --dg-text-muted: #1e7a82; --dg-text-accent: #dc4200; /* Тот же оранжевый, но затемнённый до контраста 4.5 — для МЕЛКОГО текста. #dc4200 даёт 4.35 на белом и 3.92 на #eff4f4: крупным заголовкам и ценам этого хватает (порог 3.0), мелкому тексту и ссылкам — нет. */ --dg-text-accent-sm: #c93c00; --dg-text-on-accent: #ffffff; --dg-border-default: #b3cdcf; /* Граница полей и переключателей — отдельно от декоративных разделителей. * #b3cdcf на белом даёт контраст 1.67, а WCAG 1.4.11 требует 3.0 для * границ элементов управления. Разделители под это правило не подпадают, * поэтому они остаются такими, как в макете. */ --dg-border-field: #1e7a82; /* README называет bg/accent как #DC4200, но переменная отдаёт #F64A00. * Оставлено значение переменной — она источник правды для вёрстки. * Если правильным окажется README, менять здесь, в одном месте. */ --dg-status-danger: #c8341c; /* --- Оверлеи на тёмном петроле --- * В макете карточки, пилюли и пунктирные слоты на тёмном фоне — это белый * с прозрачностью поверх bg/header (пипетка: карточка #1c575c ≈ 7 %, * пилюля #275e64 ≈ 12 %). Верхняя полоса шапки темнее фона героя. */ --dg-bg-header-deep: #0b3e43; /* Плями «аврори» в герої. Насиченість навмисно низька: рух має читатись краєм ока, а не перетягувати увагу з заголовка. */ --dg-aurora-warm: rgba(246, 74, 0, .34); /* акцент; білий заголовок на ньому — контраст 8.3 */ --dg-aurora-teal: rgba(30, 122, 130, .54); /* бірюза, дає «живість»; контраст 6.7 */ --dg-aurora-deep: rgba(11, 62, 67, .55); /* глибина знизу */ --dg-overlay-soft: rgba(255, 255, 255, .07); --dg-overlay-strong: rgba(255, 255, 255, .12); --dg-overlay-line: rgba(255, 255, 255, .2); --dg-scrim: rgba(7, 47, 51, .55); /* --- Градиенты мессенджеров (README §4) --- * Официальные фирменные цвета, все под 45°. Глиф внутри белого круглого * чипа; на светлом фоне чип получает обводку --dg-border-default, иначе * он не виден. Минимальный размер чипа 26px — ниже градиенты Viber и * Instagram превращаются в кашу. */ --dg-grad-telegram: linear-gradient(45deg, #2aabee, #229ed9); --dg-grad-messenger: linear-gradient(45deg, #00b2ff, #006aff); --dg-grad-viber: linear-gradient(45deg, #8b7bff, #6a55e8); --dg-grad-instagram: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); /* --- Радиусы (README §2) --- */ --dg-radius-card: 24px; --dg-radius-card-sm: 20px; --dg-radius-field: 12px; --dg-radius-card-xs: 16px; /* мелкие карточки на мобилке, сегменты */ --dg-radius-pill: 999px; /* --- Сетка и отступы (README §2, §7) --- */ --dg-container: 1200px; --dg-container-text: 820px; /* колонка текстовой страницы без содержания */ --dg-toc-w: 300px; /* T4: липкое содержание (164:32) */ --dg-article-w: 680px; /* T4: колонка статьи (164:62) */ --dg-legal-gap: 96px; /* T4: зазор между содержанием и статьёй */ --dg-legal-title-w: 900px; /* T4: ширина заголовка (164:29) */ --dg-text-w: 720px; /* SEO-текст на сторінках послуг (231:87) */ --dg-gutter: 20px; /* поля на мобилке */ --dg-gutter-lg: 32px; /* поля на ширинах < 1440 */ --dg-section-y: 48px; /* вертикали секции, мобилка */ --dg-gap: 20px; --dg-gap-lg: 24px; --dg-card-pad: 20px; /* внутренние поля карточек: 20 → 28 → 40 */ --dg-card-pad-sm: 16px; /* малые карточки: 16 → 24 → 28 */ --dg-hero-media-w: 420px; /* фото в герое, десктоп (README §7) */ --dg-chip: 26px; /* чип мессенджера, минимум из README §4 */ --dg-opt-min-h: 88px; /* строка услуги в калькуляторе: короткие подтягиваются к общей высоте */ --dg-chip-lg: 34px; /* --- Типографика (README §3) --- */ --dg-font-display: "Unbounded", "Manrope", system-ui, sans-serif; --dg-font-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Шкала 390 → 1440 одной формулой: между брейкпоинтами тянется линейно. * Значения краёв — из таблицы README. */ --dg-fs-h1: clamp(31px, 1.264rem + 2.762vw, 60px); --dg-fs-h1-sub: clamp(31px, 1.45rem + 1.62vw, 48px); /* H1 сторінок послуг (230:57) */ --dg-fs-h2: clamp(26px, 1.207rem + 1.714vw, 44px); --dg-fs-card-title: clamp(19px, 1.071rem + 0.476vw, 24px); --dg-fs-price: clamp(27px, 1.525rem + 0.667vw, 34px); --dg-fs-h3: clamp(22px, 1.24rem + 0.57vw, 28px); /* заголовок картки формату, плашки (233:10) */ --dg-fs-lead: clamp(15px, 0.83rem + 0.38vw, 19px); --dg-fs-body: clamp(14px, 0.81rem + 0.19vw, 16px); --dg-fs-small: clamp(13px, 0.78rem + 0.10vw, 14px); --dg-fs-eyebrow: clamp(10px, 0.53rem + 0.19vw, 12px); --dg-lh-h1: 1.08; --dg-lh-h2: 1.18; --dg-lh-text: 1.55; /* Unbounded без отрицательного трекинга выглядит слишком широко (README §3) */ --dg-ls-display: -0.025em; --dg-ls-eyebrow: 0.12em; /* --- Прочее --- */ --dg-sticky-h: 68px; /* схлопнутая шапка, десктоп */ --dg-sticky-h-mob: 48px; /* схлопнутая шапка, мобилка */ --dg-bottombar-h: 78px; /* липкая плашка на мобилке */ --dg-anim: 200ms; /* длительность перехода шапки (README §6) */ } @media (min-width: 768px) { :root { --dg-gutter: var(--dg-gutter-lg); --dg-section-y: 72px; --dg-card-pad: 28px; --dg-card-pad-sm: 24px; } } @media (min-width: 1024px) { :root { --dg-section-y: 110px; --dg-card-pad: 40px; --dg-card-pad-sm: 28px; --dg-opt-min-h: 96px; } }