/* ========================================================================== DEE MAK — BASE Reset, font loading, typography primitives, focus, reduced motion. ========================================================================== */ /* --------------------------------------------------------------- FONT LOAD */ /* Archivo Variable — Section 5.1. Self-hosted, subset to Latin, single WOFF2 carrying both the weight (100-900) and width (62-125) axes. ASSET NOT PRESENT. Drop the file at assets/fonts/Archivo-Variable.woff2 and this rule activates with no other change. Until then the stack falls back to Helvetica Neue / Arial. The width axis is applied via font-variation-settings, which is inert on a non-variable fallback — so the fallback renders at normal width rather than distorting. Section 5.1 forbids faking condensed type with transform: scaleX(), and this file never does. */ @font-face { font-family: "Archivo Variable"; src: url("../fonts/Archivo-Variable.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ------------------------------------------------------------------ RESET */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; /* Section 5.5 — never override the user's base size */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-color: var(--studio-grey); /* Section 13.4 — kills white rubber-band */ scroll-behavior: smooth; /* Правка клиента: каждый экран — ровно один "слайд", свайп переключает между ними целиком (mandatory, не proximity). Это работает вместе с position:sticky на .section (layout.css) — секции не "прокручиваются мимо", а стоят на месте, пока следующая наезжает поверх. */ scroll-snap-type: y mandatory; } body { margin: 0; background-color: var(--ink); color: var(--text-primary-dark); font-family: var(--font-family); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); font-variant-numeric: var(--fv-numeric); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* No overflow-x:hidden here: pairing a non-visible overflow-x with the default visible overflow-y computes overflow-y to auto (CSS Overflow §3), which would silently turn body into a second scroll container fighting the -level scroller the section-stack transition depends on. Horizontal overflow is already prevented by construction (gutters, clamp() type, max-width containers). */ -webkit-tap-highlight-color: transparent; /* Section 8.6 — paired with :active */ } h1, h2, h3, p, figure, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; /* Section 13.4 — no double-tap zoom */ } a { color: inherit; text-decoration: none; touch-action: manipulation; } /* ------------------------------------------------------------------ FOCUS */ /* Section 16 — :focus-visible only, never outline:none without a replacement */ :focus { outline: none; } :focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); border-radius: var(--radius-1); } .skip-link { position: absolute; top: 0; left: 0; z-index: 200; padding: var(--space-3) var(--space-5); background: var(--accent); color: var(--cta-label); font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; transform: translateY(-120%); transition: transform var(--dur-fast) var(--ease-standard); } .skip-link:focus-visible { transform: translateY(0); } /* ------------------------------------------------------- TYPE PRIMITIVES */ .t-display-xl { /* Roboto Condensed по правке клиента (было: Archivo variable font с ручной оптической компенсацией буквы "D" через margin-left — убрано, меньше кода). Это статичный шрифт без осей wght/wdth, поэтому font-variation-settings/font-stretch больше не нужны. */ font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: var(--fw-bold); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; } .t-display-lg { font-size: var(--fs-display-lg); font-weight: var(--fw-extrabold); line-height: var(--lh-display-lg); letter-spacing: -0.01em; font-variation-settings: "wdth" var(--wdth-display-lg), "wght" var(--fw-extrabold); font-stretch: 84%; text-transform: uppercase; } .t-display-md { font-size: var(--fs-display-md); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); letter-spacing: -0.01em; font-variation-settings: "wdth" 80, "wght" var(--fw-extrabold); font-stretch: 80%; text-transform: uppercase; } .t-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-variation-settings: "wdth" var(--wdth-heading), "wght" var(--fw-bold); font-stretch: 88%; text-transform: uppercase; } .t-h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-title); letter-spacing: var(--ls-title); text-transform: uppercase; } .t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); } .t-body { font-size: var(--fs-body); line-height: var(--lh-body); } .t-body-sm { font-size: var(--fs-body-sm); line-height: 1.55; letter-spacing: 0.005em; } .t-label { font-size: var(--fs-label); font-weight: var(--fw-semibold); line-height: var(--lh-title); letter-spacing: var(--ls-label); text-transform: uppercase; } .t-label-lg { font-size: var(--fs-label-lg); font-weight: var(--fw-medium); line-height: 1.45; letter-spacing: var(--ls-label-lg); text-transform: uppercase; } .t-meta { font-size: var(--fs-meta); font-weight: var(--fw-medium); line-height: 1.4; letter-spacing: var(--ls-meta); font-variant-numeric: var(--fv-numeric); } .t-numeral-sm { font-size: var(--fs-numeral-sm); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: 0.1em; font-variant-numeric: var(--fv-numeric); } /* ------------------------------------------------------------- UTILITIES */ .u-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* The orange rule motif — Section 5.4. 32 x 1px, 20px below the element it underlines, 8px above the next. Static everywhere except the accordion. */ .rule { display: block; width: var(--rule-width); height: 1px; border: 0; margin: var(--space-5) 0 var(--space-2); background: var(--accent); flex: none; } .rule--on-light { background: var(--accent-ink); } /* --------------------------------------------------------- REDUCED MOTION */ /* Section 14.5 — a legitimate second art direction, not a degraded one. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; scroll-snap-type: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; transition-property: opacity, color, background-color, border-color !important; } /* Sticky-эффект уже отключается в layout.css (.section { position:relative } под reduced-motion) — здесь только гарантия, что не осталось случайных inline transform/opacity от других мест. */ .shell > section { transform: none !important; opacity: 1 !important; } }