/* ═══════════════════════════════════════════════════════════════════════════ «Оконщик» — ремонт и остекление окон, Барнаул (мастер Эдуард) Дизайн-токены бренда v1.0 · HW Studio · 18.09.2026 Источник истины для сайта, баннеров, Авито и печати. Меняется только здесь. Подключение: Шрифты лежат рядом в ./fonts (локально, без Google CDN). Если tokens.css копируется в другой проект — поправьте пути url(../fonts/...) или скопируйте папку fonts. Логика цвета · navy — «рама и ночь за окном»: основной, текст, тёмные фоны. Преемственность с баннером прицепа (тёмно-синий + оранжевый), который Эдуард уже заказывал. · orange — «тепло в доме» и ручка окна на логотипе. Акцент: кнопки, маркеры, цифры. ⚠️ Оранжевый текст на белом — ТОЛЬКО --accent-text (5,18:1), не --accent (3,05:1). · Контраст WCAG посчитан числом (формула WCAG 2.x), таблица — в brandbook.html. ═══════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap; src:url(../fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Unbounded";font-style:normal;font-weight:200 900;font-display:swap; src:url(../fonts/unbounded-latin-wght-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap; src:url(../fonts/onest-cyrillic-wght-normal.woff2) format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap; src:url(../fonts/onest-latin-wght-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ /* ── Основной: navy ─────────────────────────────── контраст с #FFF */ --navy-950:#081A2E; /* 17,5 — подвал, оклейка прицепа */ --navy-900:#0E2A47; /* 14,6 — ОСНОВНОЙ ЦВЕТ БРЕНДА, заголовки, логотип */ --navy-800:#16406B; /* 10,6 — hover тёмных кнопок */ --navy-700:#1D5A96; /* 7,1 — ссылки, info */ --navy-500:#4C84BF; /* 3,9 — только графика/иконки ≥24 px, не текст */ --navy-300:#8FB3DA; /* на navy-900: 6,7 — вторичный текст на тёмном */ --navy-100:#DCE8F5; /* подложки, выделения */ --navy-50:#F0F5FB; /* светлые секции */ /* ── Акцент: тёплый оранжевый ───────────────────────────────────────── */ --orange-600:#C2410C; /* 5,2 на белом — оранжевый ТЕКСТ и ссылки */ --orange-500:#F26B1D; /* 3,05 на белом — ТОЛЬКО заливки и крупная графика; с navy-900 текстом: 4,8 (AA) */ --orange-400:#F79A5B; /* на navy-900: 6,75 — акцентный текст на тёмном */ --orange-100:#FDE6D6; /* подложка «тепло», бейджи */ --orange-50:#FFF5EE; /* ── Нейтрали (холодный графит, в тон navy) ─────────────────────────── */ --ink:#101828; /* 17,8 — основной текст */ --ink-2:#344054; /* 10,4 — подзаголовки */ --ink-3:#475467; /* 7,7 — вторичный текст */ --ink-4:#667085; /* 5,0 — подписи, плейсхолдеры (AA на белом) */ --line:#E4E7EC; /* границы */ --line-soft:#EEF1F5; --bg:#FFFFFF; --bg-soft:#F5F7FA; /* чередование секций */ --bg-dark:var(--navy-900); /* ── Семантика (все ≥ 4,5 на белом) ─────────────────────────────────── */ --success:#177345; --success-bg:#E7F5EE; /* 5,9 на белом, 5,2 на подложке */ --warning:#A15C07; --warning-bg:#FEF3E2; /* 5,2 */ --danger:#B42318; --danger-bg:#FDECEA; /* 6,6 */ --info:#1D5A96; --info-bg:#EAF2FB; /* 7,1 */ /* ── Роли (использовать в вёрстке их, а не палитру напрямую) ─────────── */ --brand:var(--navy-900); --brand-hover:var(--navy-800); --accent:var(--orange-500); --accent-hover:#F58240; /* светлее, а не темнее: navy-текст на нём 5,7 */ --accent-text:var(--orange-600); --on-accent:#FFFFFF; /* 18.09 решение Саши: белый текст и иконки на оранжевых кнопках */ --accent-fill:#EA580C; /* заливка кнопок под белый текст: 3,56:1 — AA для крупного жирного (кнопки 16px/600+) */ --accent-fill-hover:#C2410C; /* hover темнее: белый 5,18:1 */ --on-brand:#FFFFFF; --text:var(--ink); --muted:var(--ink-3); --focus:var(--navy-700); /* ── Типографика ────────────────────────────────────────────────────── */ --font-display:"Unbounded","Onest",system-ui,sans-serif; /* логотип, H1–H2, цифры, носители */ --font-body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* всё остальное */ --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-display:600; /* Unbounded не жирнее 700: шире 700 «кричит» */ /* Шкала 1,25 от 16 px; H1/H2 резиновые */ --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-h4:22px; --fs-h3:clamp(22px,2.2vw,28px); --fs-h2:clamp(26px,3.2vw,40px); --fs-h1:clamp(32px,4.6vw,56px); --lh-tight:1.1; --lh-head:1.2; --lh-body:1.6; --ls-display:-.02em; --ls-caps:.08em; /* ── Сетка и отступы (шаг 4) ─────────────────────────────────────────── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --container:1200px; --gutter:24px; --pad:clamp(16px,4vw,32px); --cols:12; --section-y:clamp(56px,8vw,112px); /* много воздуха между секциями */ /* ── Радиусы: мягкие, «как скруглённый профиль ПВХ» ─────────────────── */ --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; /* ── Тени: холодные, от navy ─────────────────────────────────────────── */ --shadow-xs:0 1px 2px rgba(14,42,71,.06); --shadow-sm:0 4px 12px rgba(14,42,71,.07); --shadow-md:0 12px 32px rgba(14,42,71,.10); --shadow-lg:0 24px 60px rgba(14,42,71,.14); --shadow-accent:0 10px 24px rgba(242,107,29,.30); /* ── Движение ────────────────────────────────────────────────────────── */ --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.15s; --t:.25s; /* ── Графический элемент бренда: «переплёт» (сетка рамы) ─────────────── */ --pattern-frame:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M0 .75H96M.75 0V96M48 0V96' fill='none' stroke='%230E2A47' stroke-opacity='.06' stroke-width='1.5'/%3E%3C/svg%3E"); --pattern-frame-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cpath d='M0 .75H96M.75 0V96M48 0V96' fill='none' stroke='%23FFFFFF' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/svg%3E"); }