/* JUST Forms - токены.
Источник правды: ../../БРЕНДБУК-JUST.pdf, версия 1.0 (2025), сверено 22.09.2026.
Вторая сверка - живой CSS justbrand.agency: палитра и шрифты совпали.
Менять цвета и шрифты только здесь. */
@font-face{
font-family:'Loos Condensed';
src:url('../fonts/LoosCondensed-Regular.woff2') format('woff2');
font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
font-family:'Loos Extended';
src:url('../fonts/LoosExtended-Bold.woff2') format('woff2');
font-weight:700;font-style:normal;font-display:swap;
}
/* Фолбэк с подогнанными метриками: пока Loos едет, текст набирается системным
шрифтом той же ширины и с той же строкой, поэтому swap не двигает заголовок.
Числа измерены 22.09.2026 в headless Chrome на этой машине (canvas measureText,
кегль 100px, строка "Насколько вероятно, что вы посоветуете JUST коллеге"):
Helvetica Neue 2622,30 px, ascent 95, descent 21;
Loos Extended 3726,07 px, ascent 100, descent 26 -> size-adjust 142%;
Loos Condensed 2312,65 px, ascent 100, descent 26 -> size-adjust 88%.
ascent/descent-override = доля Loos, деленная на size-adjust: после умножения
на size-adjust строка получается ровно как у Loos (ascent 1em, descent 0,26em).
Подгонка сделана по ширине строки, а не по высоте букв: на 390px от ширины
зависит число строк заголовка, а именно оно двигает весь экран вниз.
На Windows и Android local() возьмет Arial или Roboto - они шире Helvetica Neue
на 2-3 процента, это в пределах допуска. */
@font-face{
font-family:'Loos Extended fallback';
src:local('Helvetica Neue'), local('Arial'), local('Roboto');
size-adjust:142%;ascent-override:70.4%;descent-override:18.3%;line-gap-override:0%;
}
@font-face{
font-family:'Loos Condensed fallback';
src:local('Helvetica Neue'), local('Arial'), local('Roboto');
size-adjust:88%;ascent-override:113.6%;descent-override:29.5%;line-gap-override:0%;
}
/* Сабсет и preload. Файлы шрифтов не трогаем без дизайн-отдела, поэтому здесь
только готовая команда и готовые строки. Сейчас оба woff2 лежат целиком:
LoosCondensed-Regular.woff2 64424 байта, LoosExtended-Bold.woff2 68736 байт.
Сабсет (fonttools, запускать в prototype/fonts):
pyftsubset LoosExtended-Bold.woff2 --flavor=woff2 --output-file=LoosExtended-Bold.subset.woff2 \
--unicodes="U+0000-00FF,U+0131,U+0400-045F,U+2010-2015,U+2018-201F,U+2022,U+2026,U+2116,U+20BD" \
--layout-features="kern,liga,tnum" --no-hinting --desubroutinize
(второй раз то же самое для LoosCondensed-Regular.woff2)
Preload в каждой страницы, до ссылок на css (правка в HTML, не здесь):
*/
:root{
/* Основная палитра брендбука */
--white:#FFFFFF; /* Белый */
--paper:#F8F3EA; /* Слоновая кость */
--orange:#F85300; /* Апельсин, Pantone 171C */
/* Дополнительная палитра брендбука: презентации, инфографика, мерч */
--ash:#ECECEC; /* Пепел */
--smoke:#ABABAB; /* Дым */
--navy:#041762; /* Синие чернила */
--ink:#151515; /* Уголь */
/* Правило брендбука: не больше трех цветов палитры в макете, один обязательно
из основной. Формула: нейтральный + контрастный + контрастный/нейтральный.
Все экраны, включая экран готово: слоновая кость + уголь + апельсин. */
/* Производные: только прозрачности от фирменных, новых оттенков не вводим */
--rule:rgba(21,21,21,.14); /* линии сетки и границы */
--rule-strong:rgba(21,21,21,.32);
--muted:rgba(21,21,21,.56); /* второстепенный текст */
--faint:rgba(21,21,21,.06); /* заливка подложек */
/* Данные в отчетах. Формула брендбука: нейтральный + контрастный + контрастный.
Лайм запрещен в интерфейсе решением владельца, третья серия - уголь.
Проверено валидатором: разделение для дальтоников 30,8 по худшей паре, контраст к фону у всех трех выше 3:1.
Хрома у угля нулевая, поэтому у каждой полосы обязательна подпись значением. */
--data-1:#F85300;
--data-2:#2F55B8;
--data-3:#151515;
--font-display:'Loos Extended','Loos Extended fallback',system-ui,sans-serif;
--font-text:'Loos Condensed','Loos Condensed fallback',system-ui,sans-serif;
--radius:4px;
--gutter:clamp(20px,4vw,56px);
--col:minmax(0,1fr);
--tap:48px;
--bar-h:0px; /* высота нижней полосы действий; на телефоне 56px, см. ui.css */
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;max-width:100vw} /* урок iOS Safari 18.09 */
html{-webkit-text-size-adjust:100%}
/* Интерлиньяж по брендбуку: основной текст = кегль * 1.25, заголовки = кегль * 0.94 */
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--font-text);font-size:17px;line-height:1.25;
-webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important} /* урок: свой display перебивает hidden */
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* Фирменная модульная сетка: вертикальные направляющие, как на сайте агентства */
.rules{
position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:repeating-linear-gradient(90deg,
var(--rule) 0 1px, transparent 1px calc(100% / 6));
background-size:100% 100%;
opacity:.5;
}
@media (max-width:760px){ .rules{background-image:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px calc(100% / 3))} }