/* ════════════════════════════════════════════════════════════════════ Dracula Bastion — канонічні токени типографіки СІТКА. П'ять кеглів на всю систему: 12 · 16 · 24 · 32 · 48. Рядок = кегль + 4. Одне правило, жодної мішанини. Чому саме так. Раніше було вісім різних кеглів (18, 19, 20, 22, 44, 72…) і рядки за різними коефіцієнтами — це давало десяток висот, які нічим не відрізнялись, окрім випадковості. П'ять кеглів і одна формула рядка роблять анатомію передбачуваною: висоту будь-якого блоку можна порахувати в голові. ВИНЯТОК — контроли. У кнопці рядок дорівнює кеглю, а не кегль+4: там текст центрується падінгом, і рівність дає точну арифметику коробки (4 + 16 + 4 = 24). Правило «+4» стосується тексту, що ллється рядками. Дві гарнітури плюс похідна для цифр. Усі три OFL і статичні: імпортуються в Unreal без пайплайну. Три обмеження пари, закодовані правилами нижче: 1. У Didact Gothic ОДНА вага. Жирного в описовому шарі не існує — замість bold ставиться Playfair Display SC. Тому font-synthesis:none: Slate жирність не синтезує, і веб не має підробляти те, чого не буде в грі. 2. Playfair Display SC — дідона з волосяними штрихами. Мінімум 20px: це найближчий крок сітки над порогом 18px, нижче якого волосяні штрихи гинуть у grayscale-згладжуванні Unreal. 3. Табличних цифр немає ні в тій, ні в тій. Числа, що змінюються, набираються Bastion Numerals — похідною з вирівняними ширинами й видаленим кернінгом. ════════════════════════════════════════════════════════════════════ */ /* Похідна для цифр. Веб-сабсет 4 KB проти 184 KB повного TTF, який іде в рушій. Ліцензія лежить поруч із файлом. */ @font-face{ font-family:"Bastion Numerals"; font-style:normal; font-weight:400; font-display:swap; src:url("../assets/fonts/bastion-numerals/BastionNumerals-Numerals.woff2") format("woff2"); unicode-range:U+0020,U+002B-002F,U+0030-0039,U+003A,U+0025,U+00D7,U+2013-2014,U+2212; } :root{ /* ── Гарнітури ── */ --font-display:"Playfair Display SC",Georgia,serif; --font-text:"Didact Gothic","Segoe UI",system-ui,sans-serif; --font-num:"Bastion Numerals","Didact Gothic",sans-serif; /* ── Метрики, виміряні на файлах, що йдуть у рушій ── Didact Gothic: cap 0.682 x-h 0.468 Playfair Display SC: cap 0.708 капітель 0.514 Описовий шрифт у рядку із заголовним треба збільшувати на 4% (0.708 / 0.682 = 1.038). У шкалі це враховано вибором кроку. */ --cap-display:0.708; --cap-text:0.682; --x-text:0.468; /* ══ ШКАЛА. 5 кеглів · 9 ролей · рядок = кегль + 4 ══ Кегль │ Рядок │ Роль 48 │ 52 │ display — постер, герой сайту 32 │ 36 │ h1 — заголовок сторінки · num-l таймер 24 │ 28 │ h2 · h3 · label — розділи й лейбли. МІНІМУМ Playfair 16 │ 20 │ body · meta · num — увесь текст і інтерфейс 12 │ 16 │ micro — бейджі, не текст для читання */ --fs-display:48px; --lh-display:52px; --ls-display:.01em; --fs-h1:32px; --lh-h1:36px; --ls-h1:.02em; --fs-h2:24px; --lh-h2:28px; --ls-h2:.03em; --fs-h3:24px; --lh-h3:28px; --ls-h3:.03em; --fs-label:24px; --lh-label:28px; --ls-label:.05em; --fs-body:16px; --lh-body:20px; --fs-meta:16px; --lh-meta:20px; --ls-meta:.12em; --fs-micro:12px; --lh-micro:16px; --ls-micro:.1em; --fs-num-l:32px; --lh-num-l:36px; --ls-num-l:.02em; --fs-num:16px; --lh-num:20px; --ls-num:.03em; /* Рядок у контролах = кегль. Виняток із правила «+4»: у кнопці текст центрується падінгом, і рівність дає точну арифметику коробки. */ --lh-control-sm:16px; --lh-control-lg:24px; /* Базовий кегль системи. 16px — і це підлога для всього, що людина читає. Нижче спускається тільки micro, і тільки на бейджі, які не є текстом. */ --fs-base:16px; /* ── Ваги. Тільки ті, що існують у файлах. ── */ --w-display:900; --w-heading:700; --w-heading-light:400; --w-text:400; /* єдина вага Didact Gothic. Інших немає. */ } /* Заборона синтетичної жирності й курсиву: у рушії їх не буде, тому веб не має їх підробляти. */ html{ font-synthesis:none; -webkit-text-size-adjust:100%; } /* ── Класи ролей ── */ .t-display{font-family:var(--font-display);font-weight:var(--w-display); font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)} .t-h1{font-family:var(--font-display);font-weight:var(--w-heading); font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)} .t-h2{font-family:var(--font-display);font-weight:var(--w-heading); font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)} .t-h3{font-family:var(--font-display);font-weight:var(--w-heading-light); font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)} .t-label{font-family:var(--font-display);font-weight:var(--w-heading); font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label)} .t-body{font-size:var(--fs-body);line-height:var(--lh-body)} .t-meta{font-size:var(--fs-meta);line-height:var(--lh-meta); letter-spacing:var(--ls-meta);text-transform:uppercase} .t-micro{font-size:var(--fs-micro);line-height:var(--lh-micro); letter-spacing:var(--ls-micro);text-transform:uppercase} .t-num-l{font-family:var(--font-num);font-size:var(--fs-num-l); line-height:var(--lh-num-l);letter-spacing:var(--ls-num-l)} .t-num{font-family:var(--font-num);font-size:var(--fs-num); line-height:var(--lh-num);letter-spacing:var(--ls-num)}