/* base.css — сброс, типографика, примитивы разметки, кнопки, состояния.
* Ни одного литерального цвета/кегля/отступа: только var(--l-*) из tokens.css.
*/
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--l-bg);
color: var(--l-ink);
font-family: var(--l-font-body);
font-stretch: var(--l-stretch-body);
font-weight: var(--l-weight-body);
font-size: var(--l-text-body);
line-height: var(--l-leading-body);
letter-spacing: var(--l-tracking-body);
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: var(--l-field-size); } /* tokens.css, кегль полей ввода */
/* заголовки – стили текста (tokens.css, «стили текста»): h1 – главная фраза, h2 – заголовок секции,
h3 – заголовок пункта */
h1, h2, h3 { text-wrap: balance; }
h1 {
font-family: var(--l-display-font); font-stretch: var(--l-display-stretch); font-weight: var(--l-display-weight);
font-size: var(--l-display-size); line-height: var(--l-display-leading); letter-spacing: var(--l-display-tracking);
}
h2 {
font-family: var(--l-h2-font); font-stretch: var(--l-h2-stretch); font-weight: var(--l-h2-weight);
font-size: var(--l-h2-size); line-height: var(--l-h2-leading); letter-spacing: var(--l-h2-tracking);
}
h3 {
font-family: var(--l-h3-font); font-stretch: var(--l-h3-stretch); font-weight: var(--l-h3-weight);
font-size: var(--l-h3-size); line-height: var(--l-h3-leading); letter-spacing: var(--l-h3-tracking);
}
p { text-wrap: pretty; }
.cur { margin-inline-end: var(--l-cur-gap); } /* «€ 890»: волосяной пробел, build.mjs cur */
a { color: inherit; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible {
outline: var(--l-focus) solid var(--l-accent);
outline-offset: 3px;
border-radius: var(--l-radius-s);
}
.skip {
position: absolute; left: var(--l-s4); top: calc(var(--l-s4) * -4);
z-index: 100; padding: var(--l-s3) var(--l-s4);
background: var(--l-ink); color: var(--l-ink-invert);
transition: top var(--l-t-hover) var(--l-ease);
}
.skip:focus { top: var(--l-s4); }
/* ─────────────── разметка ─────────────── */
.wrap { width: 100%; max-width: var(--l-max); margin-inline: auto; padding-inline: var(--l-gutter); }
.measure { max-width: var(--l-measure); }
.section { padding-block: var(--l-section-y); position: relative; }
.section--sunk { background: var(--l-bg-sunk); }
.section--hair { border-top: var(--l-hair) solid var(--l-hairline); }
/* шапка секции: номер и метка – бирка, заголовок дисплеем, интро в полосу набора */
.shead { display: grid; gap: var(--l-s4); margin-bottom: var(--l-s7); }
.shead__label {
color: var(--l-ink-mute);
display: flex; align-items: baseline; gap: var(--l-s3);
}
.shead__label::before {
content: attr(data-num);
color: var(--l-ink);
font-weight: var(--l-weight-strong); /* выделение */
}
.shead__label:not([data-num])::before { content: none; }
.shead__intro { max-width: var(--l-measure); color: var(--l-ink-2); } /* типографика – стиль «лид», ниже */
.grid { display: grid; gap: var(--l-s5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }
/* форма и цвет карточки – раздел «суперэллипс» в конце файла */
.card {
padding: var(--l-s5);
}
/* фоновая сетка бренда, шаг 60px */
.gridbg { position: relative; }
.gridbg::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(to right, var(--l-grid) var(--l-hair), transparent var(--l-hair)),
linear-gradient(to bottom, var(--l-grid) var(--l-hair), transparent var(--l-hair));
background-size: var(--l-grid-step) var(--l-grid-step);
mask-image: linear-gradient(to bottom, #000 20%, transparent 100%);
}
.gridbg > * { position: relative; z-index: 1; }
/* ─────────────── текстовые примитивы ─────────────── */
/* стиль «бирка»: называет кусок страницы; ступень – текст */
.label, .shead__label {
font-family: var(--l-font-label); font-stretch: var(--l-stretch-label); font-weight: var(--l-label-weight);
font-size: var(--l-label-size); line-height: var(--l-label-leading); letter-spacing: var(--l-tracking-label);
text-transform: var(--l-label-case);
}
.label { color: var(--l-ink-mute); }
/* стиль «надпись»: подписывает данные; ступень – мелкий. .src – источник цифры, канон требует источник и дату у каждого числа */
.mono, .src {
font-family: var(--l-font-mono); font-stretch: var(--l-stretch-mono); font-weight: var(--l-note-weight);
font-size: var(--l-note-size); line-height: var(--l-note-leading); letter-spacing: var(--l-note-tracking);
}
b.mono, strong.mono { font-weight: revert; } /* жирная надпись страниц v1 остаётся жирной */
.src { color: var(--l-ink-mute); }
.mute { color: var(--l-ink-mute); }
/* лид – вводка под заголовком: стиль «текст» (до 30.09 своя роль, отличалась только интерлиньяжем), бледнее цветом */
.lead, .shead__intro {
font-family: var(--l-font-body); font-stretch: var(--l-stretch-body); font-weight: var(--l-weight-body);
font-size: var(--l-text-body); line-height: var(--l-leading-body); letter-spacing: var(--l-tracking-body);
}
.lead { color: var(--l-ink-2); }
/* ─────────────── кнопки ─────────────── */
.btn {
--btn-bg: transparent; --btn-ink: var(--l-ink); --btn-line: var(--l-ink);
display: inline-flex; align-items: center; justify-content: center; gap: var(--l-s2);
padding: var(--l-btn-pad-y) var(--l-btn-pad-x);
min-height: var(--l-btn-h);
background: var(--btn-bg); color: var(--btn-ink);
border: var(--l-hair) solid var(--btn-line);
border-radius: var(--l-btn-radius);
font-family: var(--l-btn-font); /* стиль «действие», ступень – текст у обеих кнопок */
font-stretch: var(--l-btn-stretch);
font-size: var(--l-btn-text);
font-weight: var(--l-btn-weight);
letter-spacing: var(--l-btn-tracking);
text-decoration: none;
cursor: pointer;
transition: transform var(--l-t-hover) var(--l-ease), background var(--l-t-hover) var(--l-ease),
color var(--l-t-hover) var(--l-ease), border-color var(--l-t-hover) var(--l-ease);
}
.btn:hover { transform: translateY(var(--l-btn-lift)); }
.btn:active { transform: scale(var(--l-btn-press)); }
.btn--primary { --btn-bg: var(--l-cta-bg); --btn-ink: var(--l-cta-ink); --btn-line: var(--l-cta-bg); }
.btn--primary:hover { --btn-bg: color-mix(in oklab, var(--l-cta-bg) 88%, var(--l-ink)); --btn-line: var(--btn-bg); }
.btn--ghost { --btn-line: var(--l-line); --btn-ink: var(--l-ink-2); }
.btn--ghost:hover { --btn-line: var(--l-ink); --btn-ink: var(--l-ink); }
.btn--lg { padding: var(--l-btn-lg-pad-y) var(--l-btn-lg-pad-x); min-height: var(--l-btn-lg-h); }
.actions { display: flex; flex-wrap: wrap; gap: var(--l-s3); align-items: center; }
/* движение по скроллу оставлено трём местам, где оно что-то значит: сцена hero,
строки терминала в кадре и точка дуги недель. секции не «проявляются». */
/* ─────────────── доступность мелочей ─────────────── */
.vh {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (max-width: 620px) {
.actions .btn { width: 100%; }
}
/* ─────────────── суперэллипс ─────────────── */
/* Углы – суперэллипс k=2.4 дизайн-системы Интуиции, одна кривая в Chromium, Safari и Firefox.
Порт из Радарика (app/globals.css, «Cross-engine squircle corners»): corner-shape рендерится
только в Chromium, поэтому форму поверхностей несёт маска. Одна заливка 100% 100% минус четыре
угловые выемки размером --sq-r, операция subtract: угол держит размер, заливка следует за
элементом, потолка по высоте нет. Прежняя форма с intersect и mask-size r*100 теряла фон на
длинных элементах. Выемки – node scripts/gen-superellipse.mjs 2.4 24, страж – node --test из code/landings.
mask-size в переменную не выносится: var() внутри custom property подставляется там, где она
объявлена, и --sq-r замёрз бы на :root. */
:root {
--sq-tl: url('data:image/svg+xml;utf-8,');
--sq-tr: url('data:image/svg+xml;utf-8,');
--sq-br: url('data:image/svg+xml;utf-8,');
--sq-bl: url('data:image/svg+xml;utf-8,');
--sq-mask: linear-gradient(#fff, #fff), var(--sq-tl), var(--sq-tr), var(--sq-br), var(--sq-bl);
--sq-mask-position: 0 0, top left, top right, bottom right, bottom left;
/* полоса у верхнего края: её нижние углы лежат внутри поверхности */
--sq-mask-top: linear-gradient(#fff, #fff), var(--sq-tl), var(--sq-tr);
--sq-mask-top-position: 0 0, top left, top right;
}
/* Поверхность с волосяной рамкой бренда. Сам элемент не маскируется: форму рисуют два псевдо
под контентом, и маска не режет ни содержимое, ни outline фокуса. ::before – цвет линии на всю
рамочную коробку, ::after – заливка внутри рамки на радиусе меньше на волос: та же кривая с тем
же центром, как внутренний край нативной рамки. Рамка прозрачная ради раскладки, радиус хоста
нужен только форме outline. isolation обязателен: без контекста наложения z-index: -1 уходит
под фон предка. Цвет и радиус задаёт блок через --sq-fill, --sq-line и --sq-r.
Список расширять после проверки новой поверхности на тень, фокус и выступающих детей.
overflow на поверхности запрещён: hidden обрежет псевдо по дуге, auto унесёт их со скроллом.
Ребёнку, которому нужна обрезка, – .sq-mask или .sq-mask-top, скроллу – обёртка-поверхность. */
.card, .ba__row, .event__facts, .route__step, .dod,
.replay, .tool__frame, .stack__frame, .made__frame, .letter__frame {
--sq-r: var(--l-radius-m);
--sq-r-in: calc(var(--sq-r) - var(--l-hair));
--sq-fill: var(--l-bg-card);
--sq-line: var(--l-line);
position: relative;
isolation: isolate;
background: none;
border: var(--l-hair) solid transparent;
border-radius: var(--sq-r);
}
:is(.card, .ba__row, .event__facts, .route__step, .dod, .replay, .tool__frame, .stack__frame, .made__frame, .letter__frame)::before,
:is(.card, .ba__row, .event__facts, .route__step, .dod, .replay, .tool__frame, .stack__frame, .made__frame, .letter__frame)::after {
content: "";
position: absolute;
inset: calc(var(--l-hair) * -1);
z-index: -1;
pointer-events: none;
background: var(--sq-line);
transition: background var(--l-t-hover) var(--l-ease);
-webkit-mask-image: var(--sq-mask);
mask-image: var(--sq-mask);
-webkit-mask-position: var(--sq-mask-position);
mask-position: var(--sq-mask-position);
-webkit-mask-size: 100% 100%, var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r);
mask-size: 100% 100%, var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: source-out, source-over, source-over, source-over, source-over;
mask-composite: subtract, add, add, add, add;
}
:is(.card, .ba__row, .event__facts, .route__step, .dod, .replay, .tool__frame, .stack__frame, .made__frame, .letter__frame)::after {
--sq-r: var(--sq-r-in);
inset: 0;
background: var(--sq-fill);
}
/* Маска прямо на элементе: для ребёнка, которому нужна обрезка по той же кривой, и для замены
без псевдо (img, iframe). overflow: hidden на поверхности эту работу не сделает – его обрезка
идёт по дуге border-radius. .sq-mask – вся площадь, .sq-mask-top – полоса у верхнего края.
Ребёнок поверхности берёт --sq-r: var(--sq-r-in); элемент вне поверхности задаёт --sq-r сам,
иначе mask-size недействителен и маска рассыпается. */
.sq-mask, .people__photo, .tool__iframe {
border-radius: 0;
-webkit-mask-image: var(--sq-mask);
mask-image: var(--sq-mask);
-webkit-mask-position: var(--sq-mask-position);
mask-position: var(--sq-mask-position);
-webkit-mask-size: 100% 100%, var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r);
mask-size: 100% 100%, var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: source-out, source-over, source-over, source-over, source-over;
mask-composite: subtract, add, add, add, add;
}
.sq-mask-top, .dod__tracks, .replay__bar, .shipped__shot {
border-radius: 0;
-webkit-mask-image: var(--sq-mask-top);
mask-image: var(--sq-mask-top);
-webkit-mask-position: var(--sq-mask-top-position);
mask-position: var(--sq-mask-top-position);
-webkit-mask-size: 100% 100%, var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r);
mask-size: 100% 100%, var(--sq-r) var(--sq-r), var(--sq-r) var(--sq-r);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-composite: source-out, source-over, source-over;
mask-composite: subtract, add, add;
}
/* Контролы на 4px: разница кривой с дугой здесь меньше пикселя, поэтому, как в Радарике,
суперэллипс им даёт corner-shape там, где он есть, а Safari и Firefox рисуют дугу того же
радиуса. Аргумент superellipse(K) – степень двойки: кривая с показателем 2^K. Маске k=2.4
соответствует superellipse(1.263); у Радарика стоит 2.4, это показатель 5.3, и в Chromium
кнопка 4px выходит почти прямоугольной. Только прямоугольники: на пилюле и круге
corner-shape делает лепёшку. */
@supports (corner-shape: superellipse(1.263)) {
.btn, .ladder__kind, .dod__box { corner-shape: superellipse(var(--l-corner-k)); }
}
/* Режим принудительных цветов перекрашивает фон псевдо в фон страницы: рамка возвращается на место. */
@media (forced-colors: active) {
:is(.card, .ba__row, .event__facts, .route__step, .dod, .replay, .tool__frame, .stack__frame, .made__frame, .letter__frame) { border-color: CanvasText; }
:is(.card, .ba__row, .event__facts, .route__step, .dod, .replay, .tool__frame, .stack__frame, .made__frame, .letter__frame)::before,
:is(.card, .ba__row, .event__facts, .route__step, .dod, .replay, .tool__frame, .stack__frame, .made__frame, .letter__frame)::after { display: none; }
}