/* ============================================================================ TOKENS-PV — словарь серии «Грани гексагона» (Принт Вижн / Hi-TechAMG) ============================================================================ Выбор владельца 23.07.2026: концепт В «Грани гексагона» («вообще пушка») — design/concepts-pv/koncept-v-grani-geksagona.html. Этот файл = извлечённый из концепта ПОЛНЫЙ токен-слой по контракту серии v5: направление = ОДИН файл tokens*.css; шрифты подключает сам файл токенов; партиалы и шаблоны серии не содержат цветовых литералов — только var(). Правка канона ПВ = правка ЭТОГО файла (single-writer: designer). ХАРАКТЕР (не менять без владельца): светлая tech-студия, НЕ завод и НЕ перекраска СтальПро — жёлтый #FFD600 / чёрный индастриал ЗАПРЕЩЕНЫ. Идентичность выращена из логотипа Hi-TechAMG: гексагон с градиентом зелёный #33E633 → циан #0CC1ED. Три фирменных приёма: 1) «Объёмный гексагон» — CSS-экструзия с фаской (объёмные буквы); 2) «Соты» — гексагональная сетка: фон, маски фото-слотов, буллеты, FAB; 3) «Грань-шов» — скошенная градиентная кромка между секциями; срезанные углы (--chamfer) у кнопок/карточек = фаска торца акриловой буквы. Группы: 1 поверхности · 2 текст · 3 линии · 4 акцент-градиент бренда · 5 тёмная зона (футер/тёмные секции) + контраст-двойники · 6 WOW-группа гексагона · 7 тени · 8 типошкала (целые кегли) · 9 layout · 10 motion. КОНТРАСТ (посчитано кодом 23.07, python check-contrast-pv.py): — текст на акцент-градиенте: --ink на худшем (циановом) конце = 7.21:1 AAA; --muted 6.04/5.60, --link 5.39/5.00, --on-dark-mut 7.43, --link-on-dark 7.56. — не-текстовые UI-границы (WCAG 1.4.11): несущие рамки (поля формы) — ТОЛЬКО --field-border (≥3:1); --line — декор/разделители, границей смысловых UI-элементов не является. — правило large-text AA: если акцентная пара опускается в коридор 3.0–4.5 (например, текст на --grad-deep 0A97BA = 4.49) — ТОЛЬКО кегль ≥19px/700 или декоративное применение без текста. Сейчас таких текстовых пар нет. — зелёный/циан ТЕКСТ на белом ЗАПРЕЩЁН (2.1:1-класс); цвет несут заливки, грани и знак-гексагон. Ссылки на светлом — только --link (петроль). MOTION (канон Ковальского): UI < 300ms, scale от 0.95+, ease-in ЗАПРЕЩЁН; ничего вертикально-бегущего; парение гексагонов (--float-*) — медленное alternate-дыхание декора, reduced-motion гасит. ============================================================================ */ /* Шрифт-канон ПВ (концепт В): Geologica (дисплей, 500/600/700) + Onest (набор, 400/500/600/700). Отстройка от Unbounded СтальПро — осознанная (второй бизнес холдинга, своя идентичность). В проде — self-host woff2. */ @import url('https://fonts.googleapis.com/css2?family=Geologica:wght@500;600;700&family=Onest:wght@400;500;600;700&display=swap'); :root{ /* ---- 1. Поверхности светлые (база: белый воздух tech-студии) ------------ */ --bg: #FFFFFF; /* фон страницы и светлых секций */ --bg-alt: #F3F7F8; /* холодный светло-серый: чёт-секции */ --grad-soft: linear-gradient(140deg,#EDFBEF 0%,#E7F6FD 100%); /* тинт-секция (портфолио) */ --card-bg: #FFFFFF; /* карточки/форма на --bg-alt */ --hex-well: linear-gradient(160deg,#F1FCF2 0%,#EAF7FD 100%); /* колодец фото-слота в гексагоне */ --header-bg: rgba(255,255,255,.92); /* шапка: белый 92% + blur(8px) */ /* ---- 2. Текст ------------------------------------------------------------ */ --ink: #12282E; /* заголовки, сильный текст (тил-графит; текст, НЕ фон) */ --text: #2C4046; /* наборный текст (10.9:1) */ --muted: #52666C; /* вторичный: 6.0 на белом, 5.6 на --bg-alt */ --link: #087395; /* ссылки: тёмный петроль, 5.4:1; НЕ циан бренда! */ /* ---- 3. Линии ------------------------------------------------------------ */ --line: #DFE9EB; /* разделители, декор-рамки (НЕ несущие UI-границы) */ --field-border: #74888E; /* рамки полей формы и несущих UI-границ: WCAG 1.4.11 не-текст ≥3:1 (3.71 на белом, 3.44 на --bg-alt; QA 23.07 п.4) */ /* ---- 4. Акцент бренда (градиент логотипа; заливки/грани, НЕ текст) ------- */ --g1: #33E633; /* зелёный логотипа */ --g2: #0CC1ED; /* циан логотипа */ --grad: linear-gradient(135deg,var(--g1) 0%,#19D48F 46%,var(--g2) 100%); /* лицевая грань: кнопки, кромки, чипы */ --grad-deep: linear-gradient(135deg,#22B92F 0%,#0A97BA 100%); /* боковая грань экструзии (декор, не под текст) */ --grad-line: linear-gradient(90deg,rgba(51,230,51,.55),rgba(25,212,143,.55),rgba(12,193,237,.55)); /* линия-связка этапов */ --on-accent: var(--ink); /* текст на градиенте: 7.2:1+ AAA */ --sel-bg: rgba(12,193,237,.24); /* ::selection */ --accent-ui: #0A97BA; /* насыщенный UI-циан: accent-color чекбокса */ /* ---- 5. Тёмная зона (футер и тёмные секции) + контраст-двойники ---------- */ --dark: #0F2429; /* глубокий тил: футер, тёмные блоки */ --on-dark: #E8F1F2; /* наборный на тёмном (14.0:1) */ --on-dark-mut: #9FB4B8; /* подписи/колонтитулы (7.4:1) */ --on-dark-head: #FFFFFF; /* заголовки на тёмном */ --link-on-dark: var(--g2); /* циан-ссылки/hover ТОЛЬКО на тёмном (7.6:1) */ --focus-on-dark: #7FE0F7; /* кольцо фокуса на тёмном (10.7:1) */ --dark-line: rgba(255,255,255,.12);/* разделители на тёмном */ /* ---- 6. WOW-группа гексагона (фирменные приёмы 1–3) ---------------------- */ --hex: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); /* маска-гексагон (aspect-ratio .866) */ --cut: 12px; /* размер фаски; локально переопределяется (--cut:9/16/18px) */ --chamfer: polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut)); /* соты-фон: тёмный штрих на светлом / белый на тёмном (тайл 56×100 → фон 42px 75px) */ --hexbg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%2312282E' stroke-opacity='.055'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%2312282E' stroke-opacity='.055'/%3E%3C/svg%3E"); --hexbg-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23FFFFFF' stroke-opacity='.05'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23FFFFFF' stroke-opacity='.05'/%3E%3C/svg%3E"); --hexbg-size: 42px 75px; /* свечение hero (статичное пятно, мотив градиента логотипа) */ --hero-glow: radial-gradient(680px 480px at 86% 12%,rgba(51,230,51,.10),rgba(12,193,237,.08) 55%,transparent 78%); --blob-glow: radial-gradient(closest-side,rgba(51,230,51,.14),rgba(12,193,237,.10) 58%,transparent 74%); /* hover-глоу сот портфолио (единственный интерактивный WOW) */ --comb-glow: drop-shadow(0 6px 14px rgba(51,230,51,.28)) drop-shadow(0 18px 34px rgba(12,193,237,.30)); /* многослойная «экструзия» текста объёмной буквы */ --letter-3d: 1px 1px 0 rgba(8,86,104,.34),2px 2px 0 rgba(8,86,104,.28),3px 3px 0 rgba(8,86,104,.22),4px 4px 0 rgba(8,86,104,.16),5px 5px 0 rgba(8,86,104,.11),6px 6px 0 rgba(8,86,104,.07); /* ---- 7. Тени (мягкие, светлая студия — без чёрных плит) ------------------ */ --shadow-1: drop-shadow(0 1px 2px rgba(18,40,46,.07)) drop-shadow(0 14px 28px rgba(18,40,46,.08)); /* filter: карточки/форма */ --shadow-hex: drop-shadow(0 22px 34px rgba(18,40,46,.16)); /* filter: крупные 3D-гексагоны */ --shadow-hex-s:drop-shadow(0 10px 18px rgba(18,40,46,.12)); /* filter: мелкие гексагоны/соты */ --shadow-fab: drop-shadow(0 8px 20px rgba(18,40,46,.28)); /* filter: WhatsApp-FAB */ --shadow-nav: 0 18px 30px rgba(18,40,46,.08); /* box-shadow: мобильное меню */ /* ---- 8. Типошкала (целые px через rem; №59-канон) ------------------------ */ --ff-d: 'Geologica',system-ui,sans-serif; /* дисплей: заголовки, цифры, бренд */ --ff-t: 'Onest',system-ui,sans-serif; /* набор: текст, кнопки, формы */ --fs-11: .6875rem; /* brand-sub, микрометки */ --fs-12: .75rem; /* подписи слотов, крошки */ --fs-13: .8125rem; /* overline, consent, футер-низ */ --fs-14: .875rem; /* примечания, вторичные строки */ --fs-15: .9375rem; /* текст карточек, меню, btn-sm */ --fs-16: 1rem; /* базовый body, кнопки */ --fs-17: 1.0625rem; /* h3 карточек/шагов */ --fs-18: 1.125rem; /* акцент-строки, соты-имена */ --fs-19: 1.1875rem; /* brand-name; порог large-text */ --fs-23: 1.4375rem; /* цена в карточке каталога */ --fs-h1: clamp(2rem,4.2vw + .55rem,3.4rem); /* H1 hero 32→54 */ --fs-h2: clamp(1.625rem,2.6vw + .5rem,2.375rem); /* H2 секций 26→38 */ --fs-lead: clamp(1.0625rem,.55vw + .9rem,1.1875rem); /* лид 17→19 */ --fs-num: clamp(2.9rem,4.6vw,4rem); /* цифры-герои 46→64 (крупнее слов ×2.5) */ --lh-body: 1.6; --lh-head: 1.16; --ls-head: -.01em; /* ---- 9. Layout ----------------------------------------------------------- */ --container: 1160px; --pad-inline: clamp(20px,5vw,40px); --section-pad: clamp(56px,9vw,104px); --radius-ui: 8px; /* скругления мелкого UI (пункты меню, поля) — крупные плоскости режутся фаской, не радиусом */ --radius-field: 10px; --header-h: 64px; --edge-h: 3px; /* верхняя градиент-кромка страницы и футера */ --seam-h: 64px; /* высота грань-шва между секциями */ --fab-w: 58px; --fab-h: 66px; /* гексагон-FAB (tap ≥48) */ --tap-min: 48px; /* ---- 10. Motion (UI <300ms; scale ≥.95; БЕЗ ease-in) --------------------- */ --ease-out: ease-out; --ease-lift: cubic-bezier(.22,.61,.36,1); --dur-1: .15s; /* кнопки: hover/active */ --dur-2: .18s; /* подъём карточек/сот */ --dur-3: .2s; /* бургер, мелкий UI */ --dur-reveal: .55s; /* появление секций при скролле */ --float-a: 8s; --float-b: 10s; --float-c: 7s; /* парение гексагонов hero (alternate) */ }