/* ============================================================ DESIGN TOKENS — єдине джерело правди для всієї платформи. Усі інші CSS-файли беруть значення ТІЛЬКИ звідси (var(--...)). Естетика: сучасний travel-journal. Світла тема. ============================================================ */ /* Шрифти: Fixel (самохостинг, нижче) для head+body — повна кирилиця; JetBrains Mono — квитки/лейбли/числа (тепер із вагами 700/800 — раніше синтезувались faux-bold); Fraunces — ЛИШЕ italic 500, для курсивних прикладів-речень (--font-example). Inter прибрано (не вживається). */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,500&family=JetBrains+Mono:wght@400;600;700;800&display=swap'); /* Fixel (самохостинг, ОПТИЧНІ варіанти — заміна Satoshi 2026-07-18): повна кирилиця. Text — для тексту/дрібного (більший x-height, відкриті апертури → читабельність); Display — для заголовків (тісніше, елегантніші деталі → гарно на великому кеглі). Статичні ваги woff2, лише реально вживані (400/500/600/700/800 + 400-курсив). */ /* — Fixel Text (--font-body) — */ @font-face { font-family: 'Fixel Text'; src: url('fonts/fixel/FixelText-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fixel Text'; src: url('fonts/fixel/FixelText-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Fixel Text'; src: url('fonts/fixel/FixelText-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Fixel Text'; src: url('fonts/fixel/FixelText-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Fixel Text'; src: url('fonts/fixel/FixelText-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Fixel Text'; src: url('fonts/fixel/FixelText-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* — Fixel Display (--font-head) — */ @font-face { font-family: 'Fixel Display'; src: url('fonts/fixel/FixelDisplay-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Fixel Display'; src: url('fonts/fixel/FixelDisplay-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Fixel Display'; src: url('fonts/fixel/FixelDisplay-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Fixel Display'; src: url('fonts/fixel/FixelDisplay-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } :root { /* === Кольори: поверхні й текст === */ --color-bg: #f8f1e9; /* теплий cream — як папір нотатника (палітра «пастель+індиго» 16.07) */ --color-bg-warm: #ead7b8; /* помітно тепліший cream для «зошитових» секцій (був #f5ecdc — різниця з --color-bg була ледь помітна) */ --color-lavender: #e4d5e8; /* лавандова поверхня палітри (тон-у-тон із плямою фону); тепер токен, а не хардкод */ --color-mint: #eef4f3; /* мʼятна поверхня палітри (той самий гекс, що --map-water, але без прив'язки до карти) */ --color-surface: #ffffff; /* картки */ --color-text: #363242; /* графіт-слива (не чорний) */ --color-text-muted:#6f6b73; /* приглушений; 4.6:1 на кремі (AA) */ --color-border: #e1ddce; /* теплі межі */ --color-border-strong: #d2ccbc; /* === Акценти === */ --color-primary: #5875dc; /* перивінкл — дія; білий на ньому 4.21 (межа AA, рішення Юлі) */ --color-primary-600: #4860b4; --color-primary-700: #3c5096; --color-primary-100: #e1e6f9; /* світлий тінт */ --color-primary-050: #eef1fc; --color-secondary: #ffb38a; /* персик — reward; ТІЛЬКИ заливка, білий на ньому 1.74 — ЗАБОРОНЕНО */ --color-secondary-600: #c78c6c; --color-secondary-700: #5d3319; /* темно-персиковий тон-у-тон (вибір Юлі 16.07): 6.18 на персику, 9.67 на тінті — AA всюди */ /* темний — для тексту на світлому тинті (контраст AA) */ --color-secondary-100: #fff0e8; /* Ink-регістр — індиго (темний якір: футер, hero розділів, таб-бар). Контраст (перевірено числом, WCAG): білий на ink 6.37:1, on-ink-muted 4.6:1 (обидва ≥ AA). */ --color-ink: #5158a6; /* фон футера, hero-блоків розділів, таб-бара */ --color-ink-soft: #666cb1; /* картки/ховери на ink */ --color-on-ink: #ffffff; /* БІЛИЙ текст на ink — правило Юлі */ --color-on-ink-muted: #d8daeb; /* приглушений текст/лінки на ink */ --color-success: #65c986; /* мʼякий зелений; білий на ньому 2.05 — ЗАБОРОНЕНО, текст графіт/700 */ --color-success-700: #356946; /* темний — для тексту на світлому тинті (контраст AA) */ --color-success-100: #e9f7ee; --color-error: #e44e51; /* сигнальний; як ТЕКСТ на кремі 3.36 — для тексту брати #a4383a (ex-no-ink) */ --color-error-100: #fceaea; /* === Карта === */ --map-water: #eef4f3; /* фон-вода */ --map-land: #ead7b8; /* суша — теплий пісок (не сірий!) */ --map-land-stroke:var(--color-bg); /* був #fbf6ec = ще старіший bg; А.11 17.07 — синхронізовано з живим кремом */ --map-active: var(--color-primary); --map-active-glow:rgba(88, 117, 220, 0.45); --map-hover: var(--color-secondary); --map-selected: var(--color-primary-700); /* Атмосфера карти (кожен ефект можна вимкнути окремо) */ --map-texture-opacity: 0.08; /* текстура паперу: 0 = вимк. */ --map-continent-shadow: 0 0 0 transparent; /* тінь під сушею вимкнено; напр. 0 4px 12px rgba(80,50,30,.12) щоб увімкнути */ --map-decor-opacity: 0.4; /* компас/маршрути: 0 = вимк. */ --map-decor-color: #8a7650; /* темно-бежевий, як старі мапи */ /* Зум-кнопки карти (імена brass-* історичні): «папір + графіт» — вердикт Юлі V1 з brass-lab.html (17.07). Чорнило на градієнті 10.65…9.21 (AA+). */ --brass-hi: #ffffff; --brass-mid: #f3ede2; --brass-deep: #e6ddcd; --brass-hi-hover: #ffffff; --brass-mid-hover: #f8f3ea; --brass-deep-hover: #ece4d6; --brass-edge: var(--color-border-strong); --brass-ink: var(--color-text); /* «Рейс дня» (імена gold-* історичні): персик, вердикт Юлі D2 — пін = чистий персик, рамка чипа темніша (#eba57f, як vmap-ховер), увесь текст secondary-700 (на mission-папері 9.26, AA+). Персик — тільки заливка, текст на ньому заборонено. */ --gold-daily: var(--color-secondary); --gold-daily-edge: #eba57f; --gold-daily-ink: var(--color-secondary-700); --gold-daily-ink-strong:var(--color-secondary-700); /* === Типографіка === */ /* Fixel (2026-07-18): оптичне розділення — заголовки на Fixel Display (тісніше, елегантніше на великому кеглі), текст на Fixel Text (читабельний на дрібному). Повна кирилиця. Заголовки h1–h3 вагою 700. */ --font-head: 'Fixel Display', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Fixel Text', -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; --font-example: 'Fraunces', Georgia, 'Times New Roman', serif; /* курсивні приклади-речення — серифна «цитата» на сансовому тлі */ --fs-h1: clamp(1.8rem, 1.3rem + 2.2vw, 2.7rem); --fs-h2: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem); --fs-h3: clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem); --fs-body: clamp(1rem, 0.97rem + 0.18vw, 1.075rem); --fs-small: 0.875rem; --fs-xs: 0.78rem; --lh-tight: 1.18; --lh-body: 1.7; /* === Простір === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* === Контентні ширини === */ --w-article: 720px; --w-wide: 1200px; /* === Радіуси (шкала: 4 · 8 · 12 · 16 · 24 · pill; 2–3px = мікродеталі поза шкалою) === */ --radius-sm: 8px; --radius-btn: 12px; /* кнопки, чипи, поля — контролі */ --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; /* === Тіні (мʼякі, «папір на столі»). Похідні від живих кольорів через color-mix — зміна палітри автоматично перетонує всі тіні. Консолідація 2026-07-16: 6 рецептів на весь сайт (поза системними: печаткові грані кнопок, жолоби книжки). === */ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-text) 6%, transparent), 0 1px 3px color-mix(in srgb, var(--color-text) 7%, transparent); --shadow-card: 0 2px 8px color-mix(in srgb, var(--color-text) 6%, transparent), 0 10px 24px -8px color-mix(in srgb, var(--color-text) 12%, transparent); --shadow-lg: 0 24px 48px -16px color-mix(in srgb, var(--color-text) 24%, transparent); --shadow-hover: 0 14px 28px -12px color-mix(in srgb, var(--color-text) 38%, transparent); /* піднята картка/обʼєкт */ --shadow-modal: 0 20px 55px -10px color-mix(in srgb, var(--color-text) 40%, transparent); /* модалки, лайтбокс, тости */ --shadow-glow: 0 0 0 4px var(--color-primary-100); --shadow-glow-accent: 0 12px 26px color-mix(in srgb, var(--color-primary) 30%, transparent); /* teal-сяйво обраного/CTA */ /* === Іконки (шкала 17.07 = живі кластери коду: 14 / 18 / 22) === */ --icon-sm: 14px; /* інлайн у тексті, бейджі, дрібні кнопки */ --icon-md: 18px; /* стандарт: нава, меню, списки (= дефолт etgw_icon) */ --icon-lg: 22px; /* акценти: таб-бар, великі кнопки, ранги */ /* === Z-шари (глобальні; 0–9 = локальні всередині компонентів, 110–120 = панелі карти) === */ --z-nav: 100; /* sticky-шапка */ --z-float: 250; /* дропдаун профілю, спливні панелі сторінки */ --z-bar: 300; /* мобільний таб-бар, sticky-бари */ --z-map-bar: 900; /* нижня панель мобільної карти */ --z-modal: 1000; /* модалки, лайтбокс, тости */ --z-ceremony: 1050; /* повноекранні оверлеї (онбординг, фініш, переліт) */ --z-confetti: 1100; /* конфеті — понад усім */ /* === Рух === */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 240ms; --dur-fast: 150ms; /* прес кнопок, дрібні ховери (злито з колишнім .15s) */ --transition: all var(--dur) var(--ease); /* ======================================================== КОНСОЛІДАЦІЯ 3.2 (Сесія 7): токени нижче = колишні хардкоди зі style.css / exercises.css. Значення НЕ мінялись — лише структура. Пілот палітри (Сесія 8) правитиме ТІЛЬКИ цей файл. ======================================================== */ /* Текст/гліфи на кольорових заливках (кнопки, бейджі, чати) */ --color-on-accent: #fff; /* Темніший зелений — заливки/ховери успіху (текст успіху = success-700) */ --color-success-600: #478d5e; --color-success-600-hover: #3d7850; /* похідний від нового 600 */ /* Прохолодні сіро-сині відтінки підписів (словник, колажі, лічильники) */ --color-muted-cool: #6a7280; --color-caption: #5b6470; /* Медалі лідерборда/досягнень — «охолоджені» під палітру (вердикт Юлі М1 17.07): золото = персик-мед (= gold-daily-edge), срібло = перивінкл-сірий, бронза = терракот (= amber-ico). Іконки-гліфи, не текст. */ --medal-bronze: #b0765a; --medal-silver: #a9b0cd; --medal-gold: #eba57f; /* Темний hero-градієнт (паспорт, фініш гри): from → primary → to */ --hero-grad-from: #5b62ab; --hero-grad-to: #464c8f; --color-on-hero: #ffffff; /* кремовий текст на hero-градієнті */ /* Словниковий блок уроку (А.10 17.07): приклад — лавандо-сірий gloss-soft (4.95 на білому, AA; старий олив #8a8170 давав 3.85), лінія — пісочна ex-hairline */ --vocab-example: var(--gloss-soft); --vocab-divider: var(--ex-hairline); /* Маркер-виділювач слів словника в тексті для читання — жовтий (вердикт Юлі 17.07 «лишити жовтий»: універсальний highlighter). Виніс із голого rgba. */ --vocab-hl-mark: rgba(246, 210, 118, 0.38); /* Глосарій / discovery-плитки / тултіпи — «чорнило» родини лаванда-індиго. Перетон 16.07 (рішення Юлі): був плюм #3a2230/#8a7080/#ece2ea зі School-ери; у палітрі «пастель+індиго» плюму нема — тон-у-тон із лавандою #e4d5e8 та --ex-sel #414685. Ролі збережено: gloss-ink лишається темним (і як текст, і як фон тултіпа); companion-рамки тепер color-mix від gloss-ink (плюм-хекс прибрано). */ --gloss-ink: #3a3552; /* темне графіт-індиго; на білому 11.5:1, білий на ньому 11.5:1 (AA) */ --gloss-soft: #736c8a; /* приглушена лаванда-сірий; 4.95:1 на білому (AA) */ --gloss-chip: #eae4f1; /* бліда лаванда — пін/чип */ /* Сувеніри паспорта — «персик-подих» (вердикт Юлі П2 17.07); срібна рамка ледь злавандовіла (сталевого синьо-сірого в палітрі нема), ink = теплий персик-графіт #75523f (на паперах 6.06/5.39, AA). */ --souvenir-silver-1: #efeef5; --souvenir-silver-2: #e5e3ee; --souvenir-silver-border: #d8d5e2; --souvenir-paper-1: #fffdf9; --souvenir-paper-2: #faeee1; --souvenir-paper-3: #f3e0cd; --souvenir-ink: #75523f; --souvenir-locked-1: #f6f2ec; --souvenir-locked-2: #eae4da; --souvenir-locked-ico: #ada294; /* Паперові заливки компонентів — «персик-подих» (вердикт Юлі П2 17.07), у тон mission-карткам і «рейсу дня» */ --postcard-paper: #fefaf6; /* листівка */ --postcard-shade: #f9ecdf; --visa-paper-1: #fef8f2; /* віза-картка */ --visa-paper-2: #f9e9da; --mission-paper-1:#ffeade; /* картка місії */ --mission-paper-2:#ffddca; /* Граматична вікторина — персик/error-родина (А.10 17.07). Контрасти: secondary-700 на start-hover 8.86, графіт на wrong-bg 10.7. */ --quiz-start-hover: var(--amber-hover); --quiz-wrong-bg: var(--color-error-100); /* Небесні світила на карті (день/ніч) */ --celestial-sun: #e8b54a; --celestial-moon: #d9e4f5; /* Чекпоінт юніта в маршруті — персик-родина замість старого золота (А.10 17.07). ink 6.21 на bg-тінті (AA); фони — тінти персика поверх білої секції юніта. */ --checkpoint-ink: #75523f; --checkpoint-bg: color-mix(in srgb, var(--color-secondary) 20%, transparent); --checkpoint-head-bg: color-mix(in srgb, var(--color-secondary) 7%, transparent); /* Плашка «доступ закрито» (імена amber-* історичні): персик-родина 17.07. Контрасти: ink 6.22 на bg / 5.70 на hover / 6.92 на білому; ink-strong 9.67; ico 3.38 (нетекст ≥3:1). Персик-strong — тільки смуга/рамка, без тексту. */ --amber-bg: var(--color-secondary-100); --amber-border: #f5c9ab; --amber-strong: var(--color-secondary); --amber-ink: #75523f; --amber-ink-strong: var(--color-secondary-700); --amber-ico: #b0765a; --amber-hover: #ffe4d4; /* Бейджі доступу (адмінка) — системні тінти (А.10 17.07); off-чорнило = --ex-no-ink (5.65 на error-100), on-чорнило = success-700 (5.83; success-600 давав лише 3.63) */ --badge-on-bg: var(--color-success-100); --badge-off-bg: var(--color-error-100); /* Тост доступу (темний): графіт замість нейтрального чорного, жовті → персик (17.07; альтернатива bg — індиго --color-ink, якщо графіт здасться глухим). Контрасти на графіті: ico 7.13, link 8.82, білий текст 12.41. */ --toast-bg: var(--color-text); --toast-ico: var(--color-secondary); --toast-link: #ffd0b3; /* Досягнення */ --ach-on-bg: #f2faf5; --icon-idle: #b3aec2; /* лавандо-сіра неактивна іконка (був беж #b9b2a6; та сама світлота, А.10 17.07) */ /* Карта словника (vocab-map) — звірено з палітрою (А.11 17.07): вода = мінт (задає vocab-map.css/style.css), суша = живий крем сторінки, сітка лишається мінт-родини #dbe6e3 (тон-у-тон із водою #eef4f3), обводка суші = системна border-strong (був теплий беж #d8d3bf) */ --vmap-grid: #dbe6e3; /* сітка на мінті */ --vmap-land: var(--color-bg); /* крем, як бекграунд сторінки */ --vmap-words: var(--color-ink); /* країни зі словами — індиго #5158a6 (Юля 18.07) */ --vmap-words-hover: var(--color-primary); /* ховер — світліший перивінкл #5875dc */ --vmap-land-stroke: var(--color-border-strong); /* ======================================================== ПАЛІТРА ВПРАВ (--ex-*) — переїхала з exercises.css (.block) у :root: нею користуються і блоки уроку в style.css. ======================================================== */ /* Перетон 17.07 (вердикт Юлі П1 «пісок»): та сама щільність, підтон від --color-bg-warm #ead7b8 замість жовто-оливкового tan старого фону. Гейт: title 11.82 на row, ex-ink 6.07 на row, on-dark 11.08/13.14 на темних кнопках; muted 3.42/3.21 (декоративний, старий був 3.01). */ --ex-ink: #5158a6; /* індиго-акцент */ --ex-row: #fcf9f4; /* кремовий рядок */ --ex-row-border: #ecdcc0; /* рамка рядка / волосяна лінія */ --ex-btn-border: #d8c5a5; /* рамка пігулки */ --ex-title: var(--color-text);/* заголовок/текст + фон темних кнопок */ --ex-muted: #91857a; /* приглушений */ --ex-ok-bg: #e9f7ee; --ex-ok-border: #aae1bc; --ex-ok-ink: var(--color-success-600); --ex-ok-soft: #eff5f0; --ex-ok-soft-border: #cde3d6; --ex-no-bg: #fceaea; --ex-no-border: #f2a6a8; --ex-no-ink: #a4383a; --ex-no-soft: #fcf1ed; /* «Вибрано» — лілове (за дизайн-системою), а не бордове */ --ex-sel-bg: #f3eff4; --ex-sel-border: #e4d5e8; --ex-sel-ink: #414685; --ex-note-chip: #e4d5e8; /* лілово-рожевий чип нотатки */ /* Додано в 3.2 — колишні повторювані хардкоди exercises.css */ --ex-on-dark: var(--color-bg); /* кремовий текст на темних кнопках */ --ex-dark-hover: #2a2635; /* ховер темних кнопок (темніший графіт) */ --ex-border-strong: #c6b294; /* пісочна рамка контролів */ --ex-border-soft: #e2d2b6; /* світліша пісочна рамка */ --ex-used-ink: #b5a996; --ex-used-bg: #f4eee2; --ex-used-border: #e5d8c1; --ex-field: var(--color-bg); /* поля вводу/плашки = фон сторінки */ --ex-hairline: #e6d7bd; /* волосяна лінія прикладів/нотаток */ --ex-bubble: #f5ecdc; /* бульбашка співрозмовника в діалогах */ --ex-slot-head: #f2e7d3; /* шапка колонки categorize */ --ex-avatar-bg: #eee1ca; /* аватар hangman */ --ex-hl-border: #f0b285; /* обводка виділеного слова — персик замість золота */ --ex-memory-back-ink: #d3c2a8; /* «?» на сорочці картки memory */ --ex-memory-flip-border: #ada294; /* рамка перевернутої картки */ --ex-faint: #ab9f92; /* найблідший текст (здатись у hangman) */ /* Запис голосу (speaking) — звірено з системним error (А.10 17.07): rec-red = error (рамка/крапка, нетекст 3.81 на білому ≥3); strong = ex-no-ink #a4383a (текст на білому 6.55, білий на ньому 6.55 у стані запису — обидва AA; старий #b23a3a давав 5.9); bg = error-100 */ --rec-red: var(--color-error); --rec-red-strong: var(--ex-no-ink); --rec-red-bg: var(--color-error-100); /* Can-do шкала самооцінки — персик + лаванда (вердикт Юлі C1 17.07): idle лавандо-сірий (3.17 на білому, як і старий), «трохи» = персик-тінт (ink 6.22 AA), «впевнено» = чистіша лаванда, чорнило лишається --ex-ink */ --cd-idle: #948da6; --cd-hover: #565064; --cd-mid-ink: #75523f; --cd-mid-border: #f5c9ab; --cd-mid-bg: var(--color-secondary-100); --cd-more-border: #cdb3d6; --cd-more-bg: #f1e9f4; /* Fact-блок уроку — лаванда + індиго (вердикт Юлі F2 17.07); title = індиго ex-sel (8.61 на білому). Заливка доведена до F2 17.07 (була золота rgba з teal-епохи): блідий лавандовий тінт від border-у в тон лівій смузі — callout лишається видимим на білому .block, у родині F2. */ --fact-border: #d8c2de; --fact-title: #414685; --fact-bg: color-mix(in srgb, var(--fact-border) 28%, var(--color-surface)); /* Нотатка до вправи — боардлес-скло в тон rule_cards (редизайн 23.07): плашка = легкий індиго-тінт від чорнила, поле біле із суцільною індиго-волосяною рамкою (пунктир прибрано — читався як dropzone). */ --note-ink: var(--ex-ink); --note-paper: color-mix(in srgb, var(--ex-ink) 6%, var(--color-surface)); --note-field: var(--color-surface); --note-line: var(--ex-hairline); --note-border: color-mix(in srgb, var(--ex-ink) 24%, var(--color-surface)); --note-muted: var(--ex-muted); --note-placeholder: #a2958a; }