/* ============================================================================ RP2 · ТОКЕНИ · ОДНА СВІТЛА ТЕМА Знято з generatorpro.co.uk (рішення 27.08 — копіюємо один в один). Джерело правди для компонентів — ці --rp-* властивості; theme.json дзеркалить палітру/типографіку/шкалу ЛИШЕ для редактора блоків: фронт preset-змінних не читає. Тем більше немає. Темна поверхня — властивість БЛОКУ (.on-dark у кінці файлу), а не режим сторінки: у референсі Ніч працює саме як контраст до білої сторінки, і темна сторінка вбила б цей прийом. ========================================================================== */ /* --------------------------------------------------------------------------- ШРИФТ · один, самохостинг підмножини (перезібрано 27.08) DM Sans із референсу кирилиці не має, тому лишається Commissioner — але підмножину перезібрано на wght 400..800 (заголовки й ціни 700, бейдж 800). IBM Plex Mono прибрано з інтерфейсу цілком: числа тепер Commissioner 700 з tabular-nums (фіча tnum лишена в підмножині). Команда перезбирання — assets/fonts/README.md. -------------------------------------------------------------------------- */ @font-face{ font-family:"Commissioner"; src:url("../fonts/rp2-commissioner-var.woff2?v=2") format("woff2-variations"), url("../fonts/rp2-commissioner-var.woff2?v=2") format("woff2"); font-weight:400 800; /* ← без цього рядка 700 і 800 МОВЧКИ затискаються до 600: заголовки виглядають напівжирними, і це найважча для помічання помилка всього переходу. Мітка ?v=2 потрібна, бо preload у functions.php іде без версії — інакше лишиться старий файл. */ font-style:normal; font-display:swap; } :root{ color-scheme: light; /* лишається обов'язково: без неї темна ОС дає темні системні поля, автозаповнення і смуги прокрутки на білій сторінці */ /* ---- акцент (один на всю сторінку) ---- */ --rp-flame: #FF6900; /* Вогонь — єдиний акцент. 2,9:1 на аркуші: свідомий компроміс рішення 27.08 */ --rp-flame-hi: #D95800; /* наведення — темніше, не світліше. 3,93:1 */ --rp-flame-soft: #FFF4EC; /* Присок — блідий підклад під акцент */ --rp-on-flame: #FFFFFF; /* ---- темні поверхні (властивість блоку, не тема) ---- */ --rp-navy: #0D1B2A; /* Ніч — панель героя, блок «чому ми», смуга */ --rp-navy-mid: #1B2838; /* Досвіток — друга темна поверхня */ /* ---- світлі поверхні ---- */ --rp-air: #FAFBFC; /* Побілка — тло сторінки */ --rp-paper: #FFFFFF; /* Аркуш — картки, панелі, рядки */ --rp-tint: #FFF4EC; /* тиха кнопка, смуга юрособи */ --rp-hover: #F5F6F8; /* підсвітка рядка складу */ --rp-sunk: #F3F4F6; /* заглиблене поле значень */ --rp-photo: #FFFFFF; /* підкладка фото: contain на білому */ /* ---- текст ---- */ --rp-ink: #1A1A1A; /* Графіт — основний текст, 17,4:1 */ --rp-muted: #6B7280; /* Туман — другорядний текст, 4,84:1 */ /* ---- лінії ---- */ --rp-line: #E8EAED; /* Волосінь — єдина лінія системи */ --rp-rule: #D3D6DB; /* важча рубрикація: шапка таблиці */ --rp-edge: #767C86; /* край поля вводу, 4,21:1. Референс краю не задає, а Волосінь дає 1,2:1 — поля вводу було б не видно (WCAG 1.4.11) */ /* ---- тло закріпленої шапки ---- Окремий токен, а не var(--rp-flame): утиліта .on-flame висить на самій шапці й перекидає --rp-flame на білий (щоб наведення й активний пункт не зникали в тлі). Тло мусить лишитись Вогнем, тому значення тут своє. */ --rp-head-bg: #FF6900; /* ---- службова смуга шапки (правка 28.08: біла, текст Ніч) ---- Була темна, симетрично підвалу. Тепер шапка під нею помаранчева й закріплена, і темна смуга над помаранчем давала три важкі поверхні поспіль. Біла смуга віддає верх сторінки помаранчу. */ --rp-strip-bg: var(--rp-paper); --rp-strip-ink: var(--rp-navy); --rp-strip-mut: var(--rp-muted); --rp-strip-line: var(--rp-line); /* ---- робота на темному: пігулки, метрики, привид-кнопка ---- */ --rp-on-dark: #FFFFFF; --rp-on-dark-2: rgb(255 255 255 / .72); /* лід героя */ --rp-on-dark-3: rgb(255 255 255 / .55); /* підпис метрики */ --rp-dark-fill: rgb(255 255 255 / .07); /* пігулка */ --rp-dark-fill-2: rgb(255 255 255 / .05); /* плитка метрики */ --rp-dark-line: rgb(255 255 255 / .12); /* межа пігулки */ --rp-dark-line-2: rgb(255 255 255 / .08); /* межа метрики */ --rp-ghost-fill: rgb(255 255 255 / .08); /* привид-кнопка */ --rp-ghost-line: rgb(255 255 255 / .25); /* ---- накладки на фото ---- */ /* Накладка бенто трохи глибша за референсну: наші кадри світліші знизу, і на них підпис на .22 просто не читався. */ --rp-scrim: linear-gradient(to top, rgb(0 0 0 / .92) 0%, rgb(0 0 0 / .72) 34%, rgb(0 0 0 / .38) 64%, rgb(0 0 0 / .22) 100%); /* бенто-плитка */ --rp-scrim-cap: linear-gradient(transparent, rgb(0 0 0 / .75)); /* підпис слайда */ --rp-cta-grad: linear-gradient(120deg, #FF6900 0%, #FF8C33 50%, #FF6900 100%); /* ---- стани наявності (лишаються: це зміст, а не бренд) ---- */ --rp-signal: #2A7A4E; /* є на складі — 5,26:1 на аркуші */ --rp-signal-wash: #E7F1EB; --rp-stop: #B3261E; /* немає — 6,54:1. Відсунуто від #FF6900, щоб «немає» не читалось другим помаранчем */ --rp-stop-wash: #FBE9E7; /* ---- вимірювання (прилад підбору переживає ребренд цілим) ---- */ --rp-tick: var(--rp-line); --rp-tick-major: var(--rp-muted); --rp-span: var(--rp-flame-soft); /* обраний проміжок шкали */ --rp-index: var(--rp-flame); /* покажчик */ /* ---- фокус ---- Помаранч на білому 2,9:1, а обвідка фокуса вимагає 3:1. Тому обвідка — Ніч (17,4:1 на аркуші), а всередині .on-dark вона перекидається в помаранч (6,0:1 на Ночі). Пара працює в обидва боки. */ --rp-focus: var(--rp-navy); --rp-focus-halo: var(--rp-flame-soft); /* ---- розряд у кнопці (лишається, переїхав на помаранч) ---- */ --rp-arc: #FFFFFF; /* нитка */ --rp-arc-wash: rgb(13 27 42 / .28); /* хвиля ТЕМНА, не світла: біла нитка на помаранчі дає 2,9:1, тому плашка під ниткою на мить темнішає — і нитка знов читається локально приблизно як 6:1 */ --rp-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 H8 L13 7 L19 31 L25 11 L31 29 L37 13 L42 20 H52 M25 11 L28 4 M19 31 L16 37' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* ---- хвиля героя (canvas у темному блоці) ---- */ --rp-wave: var(--rp-flame); /* ---- типографіка ---- */ --rp-font-text: "Commissioner", "Helvetica Neue", Arial, sans-serif; --rp-font-head: var(--rp-font-text); /* --rp-font-data ВИДАЛЕНО разом з IBM Plex Mono */ --rp-w-text: 400; --rp-w-med: 500; --rp-w-semi: 600; /* кнопка, назва товару, посилання плитки */ --rp-w-bold: 700; /* заголовки, ціни, числа метрик, надзаголовки */ --rp-w-black: 800; /* бейдж, знижена ціна */ --rp-fs-badge: .65625rem; /* 10,5 — бейдж */ --rp-fs-micro: .75rem; /* 12 — надзаголовок, стара ціна, поділки */ --rp-fs-data: .8125rem; /* 13 — пігулки, підписи метрик, лічильники */ --rp-fs-card: .84375rem; /* 13,5 — назва товару в картці */ --rp-fs-small: .875rem; /* 14 */ --rp-fs-ui: .9375rem; /* 15 — кнопка, заголовок смуги довіри */ --rp-fs-body: 1rem; /* 16 — текст, лід секції */ --rp-fs-lead: 1.0625rem; /* 17 — лід героя */ --rp-fs-price: 1.05rem; /* ціна в картці */ --rp-fs-h3: 1.2rem; /* H3 бенто-плитки */ --rp-fs-price-l: clamp(1.5rem, 1.15rem + 1.1vw, 2rem); --rp-fs-metric: 2.2rem; /* число в темному блоці */ --rp-fs-h2: clamp(1.6rem, 1.35rem + 1.05vw, 2.1rem); --rp-fs-display: clamp(2rem, 1.45rem + 2.1vw, 2.85rem); --rp-ls-tight: -.02em; /* H1, H2 */ --rp-ls-wide: .12em; /* надзаголовок великими літерами */ /* ---- простір ---- Шкала s1..s8 лишається БЕЗ ПЕРЕНУМЕРАЦІЇ: змінити значення --rp-s3 з 16 на 12 означало б тихо зсунути півсотні вже написаних правил. */ --rp-s1: 4px; --rp-s2: 8px; --rp-s3: 16px; --rp-s4: 24px; --rp-s5: 40px; --rp-s6: 64px; --rp-s7: 96px; --rp-s8: 144px; --rp-sec: clamp(48px, 6vw, 80px); /* секція: 80 у референсі */ --rp-sec-tight: clamp(32px, 4vw, 56px); /* щільна секція: 56 */ --rp-pad-block: clamp(24px, 4vw, 56px); /* темний блок, фінальний CTA */ --rp-pad: clamp(20px, 4vw, 56px); /* поле сторінки */ --rp-max: 1320px; --rp-label-col: 178px; /* ---- форма ---- */ --rp-hair: 1px; --rp-hair-2: 1.5px; /* межа привид-кнопки */ --rp-r-lg: 16px; /* бенто, темний блок, CTA, панель героя, двері */ --rp-r: 10px; /* картка, панель, таблиця, плашка, рядок гіда */ --rp-r-sm: 8px; /* кнопка в картці, поле вводу, мініатюра, сегмент */ --rp-r-pill: 999px; /* кнопка, чип, пігулка, лічильник, бейдж, штамп */ /* --rp-radius: 2px ВИДАЛЕНО, а не перевизначено: хто його ще шукає, дістане гострий кут і сам себе покаже на першому ж перегляді. */ /* ---- тіні (у старій системі не було ЖОДНОЇ) ---- */ --rp-sh-1: 0 2px 10px rgb(0 0 0 / .05); /* картка у спокої */ --rp-sh-2: 0 8px 30px rgb(13 27 42 / .08); /* підняте: рядок гіда */ --rp-sh-3: 0 16px 34px rgb(0 0 0 / .14); /* картка під курсором */ --rp-sh-4: 0 20px 50px rgb(13 27 42 / .14); /* плаваюче над вмістом */ --rp-sh-flame: 0 4px 20px rgb(255 105 0 / .35); /* помаранчева кнопка */ --rp-sh-flame-sm: 0 3px 8px rgb(255 105 0 / .35); /* бейдж */ /* ---- рух ---- */ --rp-dur: .16s; /* колір, межа, підйом кнопки */ --rp-dur-2: .28s; /* картка: підйом + тінь + межа */ --rp-dur-slow: .5s; /* фото в бенто-плитці */ --rp-dur-slide: .7s; /* карусель героя */ --rp-ease: cubic-bezier(.22, 1, .36, 1); --rp-arc-ease: cubic-bezier(.18, .62, .28, 1); --rp-arc-dur: 7s; /* спокій: розряд раз на сім секунд */ } /* --------------------------------------------------------------------------- .on-dark — темна поверхня як властивість блоку, а не сторінки. Спадкоємець зниклої rp2-dark.css: одна утиліта перекидає токени всередині темного блоку, і кожен компонент усередині працює без жодного власного правила «на темному». Вішається на .hero__panel, .why, .site__strip, .foot. -------------------------------------------------------------------------- */ .on-dark{ --rp-air: var(--rp-navy); --rp-paper: var(--rp-dark-fill-2); --rp-ink: var(--rp-on-dark); --rp-muted: var(--rp-on-dark-2); --rp-line: var(--rp-dark-line); --rp-rule: var(--rp-dark-line); --rp-edge: var(--rp-ghost-line); --rp-hover: var(--rp-dark-fill); --rp-sunk: var(--rp-dark-fill-2); --rp-focus: var(--rp-flame); --rp-focus-halo: rgb(255 105 0 / .25); --rp-wave: var(--rp-flame); color: var(--rp-ink); } /* --------------------------------------------------------------------------- .on-flame — помаранчева поверхня як властивість блоку (правка 28.08). Той самий прийом, що .on-dark: одна утиліта перекидає токени всередині помаранчевого блоку, і кожен складник працює без власного правила «на помаранчі». Висить на закріпленій шапці. Контраст білого на #FF6900 — 2,9:1, нижче за AA для дрібного тексту. Влад обрав свідомо: варіант «Ніч» давав 5,1:1 і був показаний. Це розширення вже записаного боргу з помаранчем — див. BUILD-LOG. -------------------------------------------------------------------------- */ .on-flame{ --rp-ink: #FFFFFF; --rp-muted: rgb(255 255 255 / .82); --rp-line: rgb(255 255 255 / .32); --rp-rule: rgb(255 255 255 / .32); --rp-edge: rgb(255 255 255 / .55); --rp-paper: rgb(255 255 255 / .12); --rp-hover: rgb(255 255 255 / .14); --rp-tint: rgb(255 255 255 / .14); /* акцент усередині помаранчевого блоку не може лишатись помаранчевим: наведення й активний пункт меню просто зникли б у тлі */ --rp-flame: #FFFFFF; --rp-flame-hi: #FFFFFF; --rp-on-flame: var(--rp-navy); --rp-focus: #FFFFFF; --rp-focus-halo: rgb(255 255 255 / .3); color: var(--rp-ink); } /* --------------------------------------------------------------------------- .on-paper — світлий острівець усередині темного чи помаранчевого блоку. Потрібен там, де .on-dark або .on-flame уже перекинули токени, а всередині стоїть біла поверхня: панель меню в шапці. Значення ті самі, що в :root — успадкувати їх назад не можна, довільні властивості не відкочуються. -------------------------------------------------------------------------- */ .on-paper{ --rp-ink: #1A1A1A; --rp-muted: #6B7280; --rp-line: #E8EAED; --rp-rule: #D3D6DB; --rp-edge: #767C86; --rp-paper: #FFFFFF; --rp-hover: #F5F6F8; --rp-tint: #FFF4EC; --rp-flame: #FF6900; --rp-flame-hi: #D95800; --rp-on-flame: #FFFFFF; --rp-focus: #0D1B2A; --rp-focus-halo: #FFF4EC; color: var(--rp-ink); }