/* ===== 00-critical.css ===== */ /* ========================================================================== 00-critical.css — foundation · inlined in AND kept in site.css DESIGN §3 tokens (verbatim) + context overrides, the metric-matched serif fallback (§2), html / body base, skip link. Keep it lean: nothing else belongs here. Section files never change a token; they read them. ========================================================================== */ :root{ /* ---------- 3.1 grounds ---------- */ --ink:#040913; --navy-950:#060D1B; --navy-900:#0A1528; --navy-850:#07101F; --navy-800:#0F1F3A; --navy-700:#173058; /* ---------- 3.2 paper (type on dark) ---------- */ --paper:#F4EFE6; --paper-2:rgba(244,239,230,.80); --paper-3:rgba(244,239,230,.64); --paper-4:rgba(244,239,230,.34); --paper-88:rgba(244,239,230,.88); --paper-90:rgba(244,239,230,.90); /* ---------- 3.3 gold scale ---------- */ --gold-lo:#8E7137; --gold:#C9A55C; --gold-hi:#E7CD92; --gold-pale:#F6E3B4; --champ:#E9DEC6; --champ-hi:#F3EAD8; --hair:rgba(244,239,230,.16); --hair-2:rgba(244,239,230,.09); --hair-gold:rgba(201,165,92,.62); --gold-50:rgba(201,165,92,.5); --gold-14:rgba(201,165,92,.14); --err:#EBA99B; /* ---------- 3.4 film scrims (hero-video.md §3; animate opacity only) ---------- */ --scrim-top:linear-gradient(180deg,rgba(4,10,22,.66) 0%,rgba(4,10,22,.44) 9%,rgba(4,10,22,.16) 18%,rgba(4,10,22,0) 28%); --scrim-bot:linear-gradient(0deg,rgba(4,10,22,.62) 0%,rgba(4,10,22,.34) 14%,rgba(4,10,22,0) 34%); --scrim-wm:radial-gradient(58% 34% at 50.2% 84%,rgba(4,10,22,.52) 0%,rgba(4,10,22,.26) 55%,rgba(4,10,22,0) 100%); --vignette:radial-gradient(120% 90% at 50% 45%,rgba(4,10,22,0) 55%,rgba(4,10,22,.38) 100%); --film-side:linear-gradient(90deg,rgba(4,9,19,.16),rgba(4,9,19,0) 30%,rgba(4,9,19,0) 60%,rgba(4,9,19,.30)),radial-gradient(120% 90% at 50% 45%,rgba(4,9,19,0) 60%,rgba(4,9,19,.32)); /* ---------- 3.5 glass (see §4 for the recipes) ---------- */ --glass-sheen:linear-gradient(116deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.025) 26%,rgba(255,255,255,0) 50%); --glass-fill:linear-gradient(180deg,rgba(9,19,38,.58),rgba(5,11,23,.74)); --glass-bevel-fill:linear-gradient(180deg,rgba(16,32,62,.26),rgba(5,11,23,.40)); --glass-bevel-color:rgba(226,238,255,.15) rgba(170,198,245,.045) rgba(190,214,255,.07) rgba(208,226,255,.095); --glass-rim:linear-gradient(135deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.16) 22%,rgba(255,255,255,.04) 48%,rgba(231,205,146,.10) 74%,rgba(231,205,146,.46) 100%); --glass-reflect:linear-gradient(112deg,rgba(255,255,255,0) 57%,rgba(255,255,255,.05) 64%,rgba(255,255,255,.012) 72%,rgba(255,255,255,0) 78%); --glass-shadow:0 0 0 1px rgba(4,9,19,.34),inset 0 0 0 1px rgba(255,255,255,.055),inset 0 26px 46px -30px rgba(255,255,255,.12),inset 0 -22px 34px -28px rgba(150,190,255,.10),0 40px 80px -36px rgba(0,0,0,.72),0 12px 26px -16px rgba(0,0,0,.5); --glass-blur:blur(20px) saturate(1.35); --glass-solid:linear-gradient(180deg,rgba(12,25,50,.93),rgba(6,13,27,.95)); --glass-solid-bevel:linear-gradient(180deg,rgba(24,42,76,.9),rgba(10,20,40,.92)); --deep-fill:linear-gradient(180deg,rgba(9,21,46,.66),rgba(5,11,23,.82)); --deep-blur:blur(20px) saturate(1.1) brightness(.84); --clear-fill:linear-gradient(180deg,rgba(13,26,50,.18),rgba(5,11,23,.30)); --pill-fill:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03)); --pill-border:rgba(255,255,255,.32); --pill-shadow:inset 0 0 0 3px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.34),0 8px 24px -12px rgba(0,0,0,.6); --pill-blur:blur(12px) saturate(1.3); --pill-solid:rgba(14,28,54,.9); --bar-fill:linear-gradient(180deg,rgba(9,19,38,.74),rgba(6,13,27,.80)); --bar-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.12),0 18px 50px -24px rgba(0,0,0,.7); --bar-blur:blur(18px) saturate(1.35); --bar-solid:rgba(7,15,30,.96); --veil-blur:blur(22px) saturate(1.3); /* light fields: give section glass something to refract (static backgrounds, new) */ --field-cold:radial-gradient(70% 55% at 16% 0%,rgba(60,96,160,.14),rgba(10,21,40,0) 70%); --field-warm:radial-gradient(55% 45% at 90% 100%,rgba(201,165,92,.07),rgba(201,165,92,0) 70%); --grain:url("data:image/svg+xml;utf8,"); /* ---------- 3.6 type ---------- */ --serif:'Noto Serif Display','TV Serif Fallback',Georgia,'Times New Roman',serif; --sans:'Inter Tight','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif; --fs-micro:11.5px; --fs-micro-s:11px; --fs-small:13px; --fs-body:16px; --fs-text:clamp(15px,1vw,17px); --fs-lede:clamp(15px,1.04vw,18px); --fs-card:clamp(13.5px,.92vw,15.5px); --fs-intro:clamp(14px,.96vw,16.5px); --fs-row:clamp(16.5px,1.12vw,21px); --fs-note:clamp(15.5px,1.05vw,19.5px); --fs-cap:clamp(14.5px,.98vw,16.5px); --fs-h5:clamp(17px,1.25vw,22px); --fs-h4:clamp(20px,1.45vw,28px); --fs-h4b:clamp(19px,1.36vw,26px); --fs-h3:clamp(26px,2.2vw,42px); --fs-h3r:clamp(24px,2vw,36px); --fs-h2:clamp(30px,3vw,60px); --fs-h2-phone:clamp(25px,7vw,40px); --fs-panel:clamp(20px,1.42vw,28px); --fs-quote:clamp(21px,1.7vw,32px); --fs-mark:clamp(20px,1.6vw,28px); --fs-figure:clamp(32px,2.5vw,50px); --fs-stat:clamp(40px,3.6vw,72px); --fs-latin:clamp(40px,3.4vw,64px); --fs-dsg:clamp(56px,5.2vw,104px); --fs-tagline:clamp(20px,2.9svh,44px); --tr-caps:.2em; --tr-nav:.18em; --tr-mark:.18em; --tr-lock:.15em; /* ---------- 3.7 space ---------- */ --m:clamp(20px,5vw,128px); --g:clamp(14px,1.7vw,28px); --wrap:1760px; --gutter:max(var(--m),calc((100% - var(--wrap)) / 2)); --hh:clamp(64px,9.4vh,92px); --fh:clamp(54px,6.8vh,68px); --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --sec-pt:clamp(88px,11vh,150px); --sec-pb:clamp(84px,11vh,140px); --chap-pt:clamp(36px,6vh,72px); --head-gap:clamp(26px,3.6vh,48px); --block-gap:clamp(40px,6vh,76px); --inner-gap:clamp(24px,3.4vh,40px); --pad-panel:clamp(16px,1.3vw,26px); --pad-card:clamp(18px,1.5vw,26px); --measure:44ch; --measure-text:62ch; /* ---------- 3.8 radii: photo in a frame · controls (buttons, chips, tags, inputs) · glass panels, frames, dock · logo, pins ---------- */ --r-1:1px; --r-2:2px; --r-3:3px; --r-round:50%; /* ---------- 3.9 z-index map ---------- */ --z-film:1; --z-scrim:2; --z-grain:3; --z-frame-edge:4; --z-panel:25; --z-folio:26; --z-cover:30; --z-conn:31; --z-intro:40; --z-cover-intro:60; --z-header:100; --z-menu:200; --z-skip:300; /* local stacks: glass children 1, glass rim 3, reflection 0; layers window: film 0, side scrim 4, grain 5, overlay 5 */ /* ---------- 3.10 motion ---------- */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.7,0,.2,1); --ease-std:cubic-bezier(.4,0,.2,1); --ease-drift:cubic-bezier(.45,0,.25,1); --t-swap:170ms; --t-exit:280ms; --t-fast:300ms; --t-hover:400ms; --t-base:600ms; --t-reveal:900ms; --t-slow:1200ms; --t-seg:5000ms; --t-intro:3520ms; --t-intro-short:640ms; /* ---------- 3.11 breakpoints (documentation; media queries use the literals) ---------- */ --bp-xs:374px; --bp-phone:760px; --bp-tablet:1120px; --bp-nav:1280px; --bp-wide:1600px; --bp-ultra:2200px; } /* token overrides by context (proto values, new breakpoints) */ @media (orientation:portrait) and (max-width:1119.98px){:root{--hh:60px;--m:clamp(20px,5.2vw,56px);--fa:.5625}} @media (orientation:portrait) and (max-width:760px){:root{--fa:.75}} /* final-fix (AD item 4): real phone heights (390 × 664 Safari, 360 × 640 Android) — the hero film becomes a 16:10 band of the 4:3 film (object-fit:cover crops sky and tarmac only; the aircraft is centred), so the sheets below never sit on the aircraft */ @media (orientation:portrait) and (max-width:760px) and (max-height:700px){:root{--fa:.62}} @media (orientation:landscape) and (max-height:500px){:root{--hh:52px;--fh:48px}} @media (max-width:760px){:root{--sec-pt:80px;--sec-pb:72px}} @media (min-width:2200px){:root{--fs-micro:13.5px;--fs-micro-s:12.5px;--fs-small:15px}} /* serif fallback sized to the same TERRAVIA ink width, so the lockup fit holds before the web font arrives (§2, proto) */ @font-face{font-family:'TV Serif Fallback';src:local('Georgia'),local('Times New Roman');size-adjust:94.9%;ascent-override:113%;descent-override:31%} /* base that the first paint needs (§3 base, §2 font features) */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink);color-scheme:dark} body{margin:0;font-family:var(--sans);font-weight:400;font-size:var(--fs-body);line-height:1.6;color:var(--paper);background:var(--navy-950);overflow-x:hidden; font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-synthesis:none} /* skip link: the first focus stop of the page */ .skip{position:fixed;left:16px;top:-60px;z-index:var(--z-skip);background:var(--paper);color:var(--navy-950);padding:10px 16px;border-radius:var(--r-2);font-size:13px;font-weight:500;letter-spacing:.06em} .skip:focus{top:16px} /* ===== 01-base.css ===== */ /* ========================================================================== 01-base.css — foundation · element reset, typographic defaults, .sec, scroll margins, tabular figures, generic vertical arrows, reduced-motion safety, print (DESIGN §2, §3, §6.6, §10) ========================================================================== */ /* ---- element reset (proto) ---- */ img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit} input,select,textarea{font:inherit;color:inherit;margin:0} h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0} ul,ol{list-style:none} em{font-style:italic} b,strong{font-weight:500} /* 600 is never used on the page; never a faux bold (§2) */ a,button,summary,label{-webkit-tap-highlight-color:transparent} ::selection{background:rgba(231,205,146,.26);color:var(--paper)} /* ---- focus: 1 px gold-hi, 4 px outside, on the ground (§6.5) ---- */ :focus-visible{outline:1px solid var(--gold-hi);outline-offset:4px} /* ---- figures and wrapping (§2, binding) ---- */ .num,.qty,.st-v b,.lr-n,.dsg,.idx .r{font-variant-numeric:lining-nums tabular-nums} /* every figure that stands in a column */ .h2,.p-t,.grp-title{text-wrap:balance} p{text-wrap:pretty} /* progressive; never relied on for fit */ /* ---- section shell (§3) ---- */ .sec{position:relative;isolation:isolate;padding:var(--sec-pt) var(--gutter) var(--sec-pb)} .grp[id],#summary,#fleet-concrete,#fleet-asphalt,#fleet-earth,#fleet-transport{scroll-margin-top:calc(var(--hh) + 24px)} /* integration: a section reached by a jump (nav, menu, deep link, no-JS anchor, the hero's release) begins where the header bar ends; its own padding-top stays the air above the overline. #objects sets the same in 30-objects.css; #technology (sticky stage) keeps 0 */ #company,#leadership,#fleet,#now,#contact{scroll-margin-top:var(--hh)} /* ---- generic vertical arrows: .up = «Наверх» and back-links to a section above; .dn = down (§5.3) ---- */ .up,.dn{display:block;flex:none;width:1px;height:11px;background:currentColor;position:relative} .up::after{content:"";position:absolute;left:-3px;top:0;width:6px;height:6px;border-left:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)} .dn::after{content:"";position:absolute;left:-3px;bottom:0;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)} /* ---- reduced motion: global safety rule (§6.6, proto); html.reduced also covers ?motion=0 ---- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important} } html.reduced *,html.reduced *::before,html.reduced *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important} /* ---- print: for the official who prints the page (§10) ---- */ @media print{ html,body{background:#fff!important;color:#111!important} body *{color:#111!important;-webkit-text-fill-color:currentColor!important;text-shadow:none!important} /* cream-on-white would vanish; the gradient lockup too */ .intro,.hero,.hdr,.menu,.t-fig,.form-acts,.foot-nav,.skip{display:none!important} .hero-fb{display:block!important} .t-track{height:auto!important} .t-stage{position:static!important;height:auto!important} .vit{background:none!important;border:1px solid #bbb!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important} .vit::before,.vit::after,.grain,[class*="scr"]{display:none!important} .lede,.txt,.st-l,.lb-text,.photo-cap{color:#333!important} .h2,.h3,.lb-name,.st-v{color:#111!important} } /* ===== 02-glass.css ===== */ /* ========================================================================== 02-glass.css — foundation · the one material, four levels (DESIGN §4, proto verbatim) Navy smoked vitrine · mitred bevel · specular rim (white key top-left, champagne bounce bottom-right) · one reflection. Rules of use (§4.5): ≤ 3 backdrop surfaces over the moving film, blur ≤ 20 px over video, never animate backdrop-filter, depth ≤ 2, bevel ≤ 5 px (6 px ultra), radii 3 px vitrines / 2 px controls, glass only on a textured ground. ========================================================================== */ /* ---- Level A · Vitrine (.vit), Level B · Pane (.vit--thin), Window (.vit--clear), deep (.vit--deep) — §4.1 ---- */ .vit{ --bev:5px; position:relative;isolation:isolate;border-radius:var(--r-3);border:var(--bev) solid; border-color:var(--glass-bevel-color); background:var(--glass-sheen) padding-box,var(--glass-fill) padding-box,var(--glass-bevel-fill) border-box; -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shadow); } .vit::before{ /* specular rim: white key light top-left, warm champagne bounce bottom-right */ content:"";position:absolute;inset:calc(var(--bev)*-1);border-radius:inherit;padding:1.25px;pointer-events:none;z-index:3; background:var(--glass-rim); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .vit::after{ /* one calm reflection */ content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:var(--glass-reflect)} .vit>*{position:relative;z-index:1} .vit--thin{--bev:3px} .vit--deep{ /* over the lit cumulus / sun: calm the backdrop before tinting, so the glass stays navy */ background:linear-gradient(116deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 24%,rgba(255,255,255,0) 50%) padding-box, var(--deep-fill) padding-box, linear-gradient(180deg,rgba(16,32,62,.16),rgba(5,11,23,.30)) border-box; -webkit-backdrop-filter:var(--deep-blur);backdrop-filter:var(--deep-blur)} .vit--clear{background: linear-gradient(116deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 26%,rgba(255,255,255,0) 52%) padding-box, var(--clear-fill) padding-box, linear-gradient(180deg,rgba(13,26,50,.22),rgba(5,11,23,.36)) border-box} @media (min-width:2200px){.vit{--bev:6px}.vit--thin{--bev:4px}} /* ---- Level C · Pill — §4.2 (the components' geometry lives with their owners: .btn here in 03, .next/.dock in 10-hero) ---- */ .btn--glass,.next{border:1px solid var(--pill-border);background:var(--pill-fill); -webkit-backdrop-filter:var(--pill-blur);backdrop-filter:var(--pill-blur);box-shadow:var(--pill-shadow)} .next{border-color:rgba(255,255,255,.30);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.025)); box-shadow:inset 0 0 0 3px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.34),0 10px 26px -14px rgba(0,0,0,.7)} .btn--glass:hover,.next:hover{background-color:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)} .dock{border:1px solid rgba(255,255,255,.2);border-radius:var(--r-3);background:linear-gradient(180deg,rgba(20,38,70,.55),rgba(6,13,27,.72)); -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(231,205,146,.12),0 18px 40px -18px rgba(0,0,0,.8)} /* ---- Level D · Bar — §4.3 (header bar: transparent over the hero, solid past it; mobile menu veil) ---- */ .hdr::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s var(--ease); background:var(--bar-fill);-webkit-backdrop-filter:var(--bar-blur);backdrop-filter:var(--bar-blur);box-shadow:var(--bar-shadow)} .hdr.is-solid::before{opacity:1} .menu{background:rgba(4,9,19,.6);-webkit-backdrop-filter:var(--veil-blur);backdrop-filter:var(--veil-blur)} /* ---- Fallbacks — §4.4: html.low (saveData / weak device), html.noglass (no backdrop-filter), no-JS @supports ---- */ html.low .vit,html.noglass .vit, html.low .vit--deep,html.noglass .vit--deep{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-solid) padding-box,var(--glass-solid-bevel) border-box} html.low .vit--clear,html.noglass .vit--clear{background:linear-gradient(180deg,rgba(13,26,50,.30),rgba(5,11,23,.40)) padding-box,var(--glass-solid-bevel) border-box} html.low .btn--glass,html.noglass .btn--glass,html.low .next,html.noglass .next, html.low .tag--photo,html.noglass .tag--photo{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--pill-solid)} html.low .photo-cap--over,html.noglass .photo-cap--over{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,13,27,.9)} html.low .dock,html.noglass .dock{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,20,40,.95)} html.low .hdr::before,html.noglass .hdr::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bar-solid)} html.low .menu,html.noglass .menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(4,9,19,.94)} @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .vit,.vit--deep{background:var(--glass-solid) padding-box,var(--glass-solid-bevel) border-box} .vit--clear{background:linear-gradient(180deg,rgba(13,26,50,.30),rgba(5,11,23,.40)) padding-box,var(--glass-solid-bevel) border-box} .btn--glass,.next,.tag--photo{background:var(--pill-solid)} .photo-cap--over{background:rgba(6,13,27,.9)} .dock{background:rgba(10,20,40,.95)} .hdr::before{background:var(--bar-solid)} .menu{background:rgba(4,9,19,.94)} } @media (prefers-contrast:more){ .vit,.vit--deep{background:var(--glass-solid) padding-box,var(--glass-solid-bevel) border-box} .vit--clear{background:linear-gradient(180deg,rgba(13,26,50,.30),rgba(5,11,23,.40)) padding-box,var(--glass-solid-bevel) border-box} .lede,.txt{color:var(--paper)} } @media (forced-colors:active){ .vit,.btn,.next,.dock,.chip,.tag,.inp{border:1px solid CanvasText} .vit::before,.vit::after{display:none} } html.low .grain,html.reduced .grain,html.low .t-film::before,html.reduced .t-film::before{display:none} /* ===== 03-components.css ===== */ /* ========================================================================== 03-components.css — foundation · shared components (DESIGN §5, ownership §10) Sections USE these classes and may add a scoped modifier (.objects .tag{…}); they never redefine a base rule. Owned elsewhere: .chap (28) · .ledger .lr* .pm (30) · .t-* .pin .ld .co .ctx .chips (50) · .card .cbody .card-label .lb-* .qty (60) · .form-grid .fld* .inp .form-* (80) · .foot* (90) · .hdr* .menu* (06) · hero furniture (10) · intro states (08) ========================================================================== */ /* ---------- 5.1 The lockup (the name) — static parts; hero adds .sw/.si/.au/.ix (08 / 10) ---------- */ .lk-fit{container:lk / inline-size;width:100%} .lk{ --tr:.15em; --wem:5.74; --fv:1000px; --hl:max(1px,.0065em); --cs:max(10px,.15em); --dy:.25em; position:relative;display:flex;flex-direction:column;width:max-content;margin:0 auto; font-size:min(calc(100cqi / var(--wem)),var(--fv));font-family:var(--serif);font-weight:300;line-height:1;color:var(--paper);text-align:left; font-kerning:none;font-variant-ligatures:none;font-synthesis:none} .wm{position:relative;display:flex;white-space:nowrap;margin:-.169em -.008em -.112em -.025em;filter:drop-shadow(0 2px 22px rgba(4,9,19,.55))} /* audit: an engine without container units (Safari < 16, e.g. iOS 15.x) cannot evaluate 100cqi: the whole min() above is then invalid at computed-value time (var() inside) and font-size falls back to the inherited ~16 px. There the hero / intro size comes from --fv, which their fit routines write in px, capped by the page column; the footer keeps §5.1's 62.7 px in its 360 px box */ @supports not (width:1cqi){ .lk{font-size:min(var(--fv),calc((100vw - 2 * var(--m)) / var(--wem)))} .foot .foot-lk .lk{--fv:62.7px} } .ch{display:block;position:relative;margin-right:calc(var(--tr) + var(--k,0em))} .ch:last-child{margin-right:0} .ch b,.ch .au{display:block;font-weight:inherit;font-style:normal; background:linear-gradient(180deg,#FFFFFF 8%,#F4EFE6 46%,#DDD3BF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .ch.k-te{--k:-.042em}.ch.k-er{--k:-.006em}.ch.k-rr{--k:.012em}.ch.k-ra{--k:.010em}.ch.k-av{--k:-.07em}.ch.k-vi{--k:-.03em}.ch.k-ia{--k:-.034em} .ch .au{position:absolute;left:0;top:0;opacity:0;background-image:linear-gradient(180deg,#F6E3B4 6%,#E7CD92 40%,#B8924A 100%)} .dim{display:flex;align-items:center;height:var(--cs);margin-top:calc(var(--dy) - var(--cs) / 2);position:relative} .dim .tk{flex:none;width:var(--hl);height:.1em;background:var(--gold)} .dim .sg{flex:1 1 0;min-width:.3em;height:var(--hl);transform-origin:0 50%} .dim .sg.l{background:linear-gradient(90deg,var(--gold-lo),var(--gold) 45%,var(--gold-hi))} .dim .sg.r{background:linear-gradient(90deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo))} .dim .cn{flex:none;font:500 var(--cs)/1 var(--sans);letter-spacing:.46em;padding:0 .7em 0 1.16em;color:rgba(244,239,230,.95);white-space:nowrap;text-shadow:0 1px 12px rgba(4,9,19,.6)} /* ---------- 5.20 Descriptor — mandatory wherever the wordmark stands alone ---------- */ .desc{--ds:clamp(11px,1.2svh,17px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;font:500 var(--ds)/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--paper-88);text-shadow:0 1px 12px rgba(4,9,19,.75)} .desc span{white-space:nowrap} .desc .dl{display:inline-flex;align-items:center} .desc .dl+.dl::before,.desc .dl i{content:"";display:inline-block;width:1.5em;height:1px;background:var(--gold);margin:0 1.1em 0 calc(1.1em - .18em);transform:translateY(-.06em)} .desc .dl:last-child>span:last-child{margin-right:-.18em} /* Everything above is §5.20 verbatim: one line (hero desktop, OG). .desc--stack (new): two lines d1 — d2 / d3 — place for a box narrower than the line (footer brand column, cards); no orphan dash at a line start; each line keeps the container's alignment (justify-content), size, caps and tracking. */ .desc--stack{row-gap:.5em} .desc--stack .dl{flex-basis:100%;justify-content:inherit} .desc--stack .dl+.dl::before{display:none} .desc--stack .dl>span:last-child{margin-right:-.18em} /* portrait phones (§5.20 «phones: two lines, sentence case»; the §7.4 values): the tracked caps line cannot fit (d1 — d2 at 11 px caps = 356 px; a 360 phone column is 320). Stacked like .desc--stack — so the container's alignment is kept: centred by default, flex-start in .foot-desc — in sentence case, never below §2's 13 px floor for non-caps text (a section's --ds ≥ 13 px is kept as is). The hero adds its own centred P-mode look in 10-hero.css. */ @media (orientation:portrait) and (max-width:760px){ .desc{row-gap:4px;font-size:max(13px,var(--ds));font-weight:400;letter-spacing:.01em;text-transform:none} .desc .dl{flex-basis:100%;justify-content:inherit} .desc .dl+.dl::before{display:none} .desc .dl i{width:14px;margin:0 11px;transform:none} .desc .dl>span:last-child,.desc .dl:last-child>span:last-child{margin-right:0} } /* ---------- 5.2 Eyebrow — the chapter mark on panels and cards ---------- */ .eyebrow{display:flex;align-items:center;gap:14px;font:500 var(--fs-micro)/1.2 var(--sans);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--paper-2)} .eyebrow .mk{font-family:var(--serif);font-weight:400;font-size:14px;letter-spacing:.18em;color:var(--paper);white-space:nowrap;margin-right:-.18em;text-transform:none} .eyebrow .rule{flex:1;min-width:18px;height:1px;background:linear-gradient(90deg,var(--hair-gold),rgba(201,165,92,.14))} .eyebrow .lb{white-space:nowrap;margin-right:-.2em} @media (min-width:2200px){.eyebrow .mk{font-size:16.5px}} /* ---------- 5.3 Section overline — runhead (the numeral lives inside the i18n value) ---------- */ .runhead{display:flex;align-items:center;gap:16px;font:500 var(--fs-micro)/1 var(--sans);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--paper-2)} .runhead .ov{display:inline-flex;align-items:center;gap:16px;white-space:nowrap} .runhead .no{font:400 17px/1 var(--serif);letter-spacing:.08em;color:var(--paper);text-transform:none} .runhead .dot{color:var(--paper-4);letter-spacing:0} .runhead .rl{flex:1;min-width:24px;height:7px;align-self:center; /* runway tick scale */ background:linear-gradient(90deg,var(--hair-gold),rgba(201,165,92,.12)) 0 100%/100% 1px no-repeat, repeating-linear-gradient(90deg,rgba(201,165,92,.5) 0 1px,transparent 1px 56px) 0 100%/100% 5px no-repeat} .runhead .rt{display:inline-flex;align-items:center;gap:10px;color:var(--paper-2);white-space:nowrap;padding:8px 0;border-bottom:1px solid var(--hair-gold);transition:color var(--t-fast)} .runhead .rt:hover{color:var(--paper)} @media (max-width:760px){.runhead{flex-wrap:wrap;row-gap:10px} /* phones: the right slot keeps only its arrow — the words stay for screen readers, the target stays 44 px, no stub underline */ .runhead .rt{min-width:44px;min-height:44px;justify-content:flex-end;padding:0;border-bottom-color:transparent} .runhead .rt .tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}} /* ---------- 5.5 Section heading, lede, body ---------- */ .h2{font-family:var(--serif);font-weight:300;font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.008em;text-wrap:balance} .h2 em{display:block;font-weight:300;color:rgba(244,239,230,.86)} .h3{font:300 var(--fs-h3r)/1.12 var(--serif);letter-spacing:.002em;color:var(--paper)} .lede{font-size:var(--fs-lede);line-height:1.64;color:var(--paper-2);max-width:var(--measure)} .lede--strong{color:var(--paper)} .txt{font-size:var(--fs-text);line-height:1.62;color:var(--paper-2);max-width:var(--measure-text)} .txt+.txt{margin-top:1em} .sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--g);align-items:end;margin-top:var(--head-gap)} .sec-head .lede{justify-self:end} @media (max-width:1119.98px){.sec-head{grid-template-columns:1fr}.sec-head .lede{justify-self:start}} @media (max-width:760px){.h2{font-size:var(--fs-h2-phone)}} /* ---------- 5.6 Buttons, arrow, link-with-rule ---------- */ .arr{display:block;width:26px;height:1px;position:relative;flex:none;overflow:visible} .arr::before{content:"";position:absolute;inset:0;background:currentColor;transform-origin:0 50%;transform:scaleX(.82);transition:transform .45s var(--ease)} .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)} a:hover>.arr::before,button:hover>.arr::before{transform:scaleX(1)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;height:44px;padding:0 22px;font:500 var(--fs-micro)/1 var(--sans);letter-spacing:var(--tr-caps);text-transform:uppercase;white-space:nowrap;border-radius:var(--r-2);transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)} .btn--glass{color:var(--paper)} .btn--champ{background:var(--champ);color:var(--navy-950);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 26px -14px rgba(0,0,0,.6)} .btn--champ:hover{background:var(--champ-hi)} .btn--wide{width:100%;justify-content:space-between} /* hero III, phone sheets, menu, form on phones */ .btn:disabled{opacity:.45;pointer-events:none} .lnk{display:inline-flex;align-items:center;gap:14px;font:500 var(--fs-micro)/1.2 var(--sans);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--paper);padding-bottom:8px;border-bottom:1px solid var(--hair-gold);white-space:nowrap;transition:color var(--t-fast)} .lnk:hover{color:#fff} @media (min-width:2200px){.btn{height:48px;padding:0 24px}} /* touch targets ≥ 44 px below 1120 px: the hit area grows, the underline stays on the text (§5.6) */ @media (max-width:1119.98px){.lnk{position:relative}.lnk::before{content:"";position:absolute;left:0;right:0;top:-13px;bottom:-9px}} /* ---------- 5.7 Chip (toggle) and tag (label) — the .chips row belongs to its section (50) ---------- */ .chip{min-height:32px;padding:5px 10px;border-radius:var(--r-2);font-size:12px;line-height:1.3;color:var(--paper-2);border:1px solid var(--hair);transition:color .3s,border-color .3s,background-color .3s} .chip[aria-pressed="true"]{color:var(--paper);border-color:rgba(255,255,255,.4);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.3)} .chip:hover{border-color:rgba(255,255,255,.3)} html.touch .chip{position:relative} html.touch .chip::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px} /* 44 px hit area on touch */ .tag{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 9px;border:1px solid var(--hair);border-radius:var(--r-2);font:500 var(--fs-micro-s)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--paper-2);white-space:nowrap} .tag--gold{border-color:var(--hair-gold);color:var(--gold-hi)} /* role tags */ .tag--live{border-color:var(--hair-gold);color:var(--paper)} /* «В работе», «В работе сейчас» */ .tag--live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 0 3px rgba(231,205,146,.16)} /* static, never pulses */ a.tag{position:relative;transition:border-color var(--t-fast),color var(--t-fast)} a.tag::after{content:"";position:absolute;inset:-10px -6px} /* 44 px hit area */ a.tag:hover{border-color:var(--gold);color:#fff} .tag--photo{position:absolute;left:12px;top:12px;z-index:4;border-color:rgba(255,255,255,.22);color:var(--paper);background:rgba(6,13,27,.62);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)} @media (min-width:2200px){.chip{font-size:15px}.tag{height:27px;padding:0 10px}} /* ---------- 5.9 Stat — the numbers strip (one vitrine, hairline tiles, static figures) ---------- */ .stats-panel{padding:0 var(--pad-panel)} .stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));overflow:hidden} .st{position:relative;display:flex;flex-direction:column;padding:clamp(20px,2.2vh,30px) clamp(14px,1.3vw,24px) clamp(18px,2vh,28px);box-shadow:-1px 0 0 var(--hair-2),0 -1px 0 var(--hair-2)} .st-pre{display:block;min-height:1.2em;margin-bottom:10px;font:500 var(--fs-micro-s)/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--paper-3)} /* reserved even when empty: figures share one baseline */ .st-v{display:flex;align-items:baseline;gap:.16em;font:300 var(--fs-stat)/.9 var(--serif);color:var(--paper);white-space:nowrap} .st-v b{font-weight:inherit} /* the base b{500} must not thicken the figure */ .st-u{font:italic 300 .42em/1 var(--serif);color:var(--paper-2)} .st-l{margin-top:14px;font-size:13.5px;line-height:1.45;color:var(--paper-2);max-width:20ch} /* tiles 1 + 2 read as one fact («8 … из них 5 …»): a gold dimension bracket over both */ .st:nth-child(-n+2)::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair-gold)} .st:nth-child(1)::after,.st:nth-child(2)::after{content:"";position:absolute;top:0;width:1px;height:8px;background:var(--gold)} .st:nth-child(1)::after{left:0}.st:nth-child(2)::after{right:0} @media (max-width:1119.98px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.st-l{max-width:none}} @media (min-width:2200px){.st-l{font-size:15px}} /* word values (leadership facts «5 лет», «Одна команда») */ .stats--word .st-v{font-size:clamp(26px,2.2vw,40px);line-height:1.05;white-space:normal} /* further .stats--word tweaks (e.g. no 1 + 2 gold bracket on the leadership facts) belong to 40-leadership.css (§10) */ /* ---------- 5.11 Photo figure with caption (real and silent photographs) ---------- */ .photo{position:relative} .photo-win{padding:6px} /* Level B frame; omit .photo-win for an unframed photo */ .photo-box,.slot{position:relative;overflow:hidden;border-radius:var(--r-1);aspect-ratio:4/3; background:radial-gradient(120% 90% at 28% 0%,rgba(60,96,160,.22),rgba(10,21,40,0) 60%), repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 10px), linear-gradient(180deg,rgba(10,22,44,.40),rgba(6,13,27,.62))} [data-ratio="16x9"] .photo-box,.slot[data-ratio="16x9"]{aspect-ratio:16/9} [data-ratio="3x2"] .photo-box,.slot[data-ratio="3x2"]{aspect-ratio:3/2} [data-ratio="4x5"] .photo-box,.slot[data-ratio="4x5"]{aspect-ratio:4/5} .photo-box img,.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .photo-box::after,.slot::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none; background:linear-gradient(112deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.045) 48%,rgba(255,255,255,.01) 57%,rgba(255,255,255,0) 63%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .photo-box::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--grain) 0 0/256px 256px;opacity:.04} /* light grain on every photograph */ /* the loader (02-slots.js) fades a photograph in. Real photos may carry src="…" as well as data-src: without JS they are shown as is */ html.js .photo[data-slot] .photo-box img{opacity:0;transition:opacity .6s ease} html.js .photo.is-shown .photo-box img{opacity:1} html.js .photo[data-slot]:not(.has-img) .photo-box img{visibility:hidden} .photo.has-img .slot-ph{display:none} .photo-box img:not([src]),.slot img:not([src]){visibility:hidden} /* no JS: an image the loader never filled shows no alt text, no broken icon */ /* hanging dash: the caption is one text flow, so values with inline markup (,  ) never split into cells */ .photo-cap{margin-top:14px;padding-left:28px;text-indent:-28px;font:italic 300 var(--fs-cap)/1.4 var(--serif);color:var(--paper-2)} .photo-cap::before{content:"—";display:inline-block;width:28px;text-indent:0;font:500 11px/1 var(--sans);letter-spacing:.2em;color:var(--paper-3)} .photo-cap--over{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;display:block;width:max-content;max-width:calc(100% - 24px);padding:7px 11px;text-indent:0;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-2); font:italic 300 14px/1.35 var(--serif);color:var(--paper);background:rgba(6,13,27,.62);-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)} .photo-cap--over::before{display:none} html.reduced .photo[data-slot] .photo-box img{transition:none} /* ---------- 5.12 OPEN PHOTO SLOT — museum label (no «скоро», no camera icon) ---------- */ .slot-ph{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:14px} .slot-ph::before{content:"";position:absolute;inset:14px;pointer-events:none;opacity:.8; /* viewfinder corners */ background:linear-gradient(var(--gold),var(--gold)) 0 0/16px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 0/1px 16px no-repeat, linear-gradient(var(--gold),var(--gold)) 100% 0/16px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 0/1px 16px no-repeat, linear-gradient(var(--gold),var(--gold)) 0 100%/16px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) 0 100%/1px 16px no-repeat, linear-gradient(var(--gold),var(--gold)) 100% 100%/16px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) 100% 100%/1px 16px no-repeat} .slot.has-img .slot-ph{display:none} .keys{display:flex;gap:.9em;font-size:clamp(9px,.72vw,13px)} .keys span{display:flex;gap:.34em} .keys i{display:block;width:.42em;height:2.6em;background:linear-gradient(180deg,rgba(244,239,230,.34),rgba(244,239,230,.16))} .dsg{font:300 var(--fs-dsg)/.9 var(--serif);letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(244,239,230,.5);font-variant-numeric:lining-nums tabular-nums} /* ↑ §2 wins over §5.12's «lining-nums»: the `font` shorthand resets font-variant-numeric, so the 01-base rule cannot reach .dsg — it is restated here */ .dsg small{font:400 .22em/1 var(--sans);letter-spacing:.1em;-webkit-text-stroke:0;color:var(--paper-3);vertical-align:top;margin-left:.3em} .slot-ar{position:absolute;right:22px;bottom:18px;font:500 11px/1 var(--sans);letter-spacing:.14em;color:var(--paper-4)} /* name variant — open slots without an index (company figure if the file is removed, `now` card 2) */ .slot-ph--name .ph-name{max-width:26ch;padding:0 24px;text-align:center;font:italic 300 clamp(17px,1.3vw,22px)/1.3 var(--serif);color:var(--paper-2)} /* ---------- 5.13 SILENT SLOT strip — hides as a whole until one photo arrives (no JS needed) ---------- */ .strip{display:none} .strip:has(.photo.has-img){display:block} /* heading + grid appear with the first photo */ .strip.has-photo{display:block} /* audit: the same for engines without :has() (class set by 95-audit.js) */ .strip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)} @media (max-width:760px){.strip-grid{grid-template-columns:1fr}} /* ---------- 5.15 Progress I · II · III (hero) and the three-stop progress of the layers film ---------- */ .steps{display:flex;align-items:center;gap:14px} .steps li{display:flex;align-items:center;gap:10px;color:var(--paper-3);transition:color .6s} .steps .rn{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.08em;text-transform:none} .steps .sl{margin-right:-.2em} .steps li.is-done{color:var(--paper-2)} .steps li.is-now{color:var(--paper)} .trk{display:block;width:clamp(28px,3vw,64px);height:1px;background:rgba(244,239,230,.26);position:relative;overflow:hidden} .trk u{position:absolute;inset:0;background:var(--gold-hi);transform:scaleX(0);transform-origin:0 50%} /* filled by `progress` p, scaleX only */ @media (max-width:1279.98px){.steps .sl{display:none}} @media (min-width:2200px){.steps .rn{font-size:18px}} .tprog{display:flex;align-items:center;gap:12px;color:var(--paper-3)} .tprog li{display:flex;align-items:center;gap:12px;white-space:nowrap;transition:color .5s} .tprog li+li::before{content:"";width:22px;height:1px;background:var(--hair)} .tprog li span{padding:6px 0 5px;border-bottom:1px solid transparent;transition:border-color .5s} .tprog li.on{color:var(--paper)} .tprog li.on span{border-bottom-color:var(--gold)} @media (max-width:760px){.tprog,.tprog li{gap:8px}.tprog li+li::before{width:10px}} /* proto; the tech stage tightens the tracking itself (§8.6) */ /* ---------- 5.17 Language switch ---------- */ /* §5.17 with min-width:28px restored. The 28 px box is padding + glyphs (7 + ~15 + 7), so the gold rule is inset by the same 7 px and still ends with the glyphs (minus the trailing tracking); the slash sits optically centred between RU and UZ. margin-inline:-7px puts the glyph ink (not the padded box) on the container's edge, like the text around it. */ .lang{display:flex;align-items:center;gap:9px;margin-inline:-7px;font:500 var(--fs-micro)/1 var(--sans);letter-spacing:.16em} .lang button{position:relative;min-width:28px;padding:10px 7px;color:var(--paper-3);transition:color var(--t-fast)} .lang button:hover{color:var(--paper-2)} .lang button[aria-pressed="true"]{color:var(--paper)} .lang button[aria-pressed="true"]::after{content:"";position:absolute;left:7px;right:calc(7px + .16em);bottom:4px;height:1px;background:var(--gold)} .lang span{color:var(--paper-4)} /* touch: ≥ 44 × 44 hit area = 28 px box + 8 px each side (× 31.5 + 7 + 7); the two areas stay ≥ 6 px apart (9 + slash + 9 − 16) */ @media (max-width:1279.98px){.lang button::before{content:"";position:absolute;inset:-7px -8px}} html.touch .lang button::before{content:"";position:absolute;inset:-7px -8px} /* ===== 04-segment-player.css ===== */ /* TV.SegmentPlayer layers: two stacked films + two posters. Focal point comes from --sp-pos on the root. */ .sp{position:absolute; inset:0; overflow:hidden; background:#030c18; contain:strict} .sp-v,.sp-poster{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--sp-pos,50% 50%); opacity:0; pointer-events:none; user-select:none; -webkit-user-select:none} .sp-v{z-index:1} .sp-v.is-on{opacity:1} .sp-poster{z-index:2; transition:opacity .45s ease} .sp-poster2{z-index:3; transition:opacity .7s ease} .sp-poster.is-on{opacity:1} html.reduced .sp-poster{transition:none} /* ===== 05-functional.css ===== */ /* Functional rules owned by the foundation (behaviour, not look). Design lives in 00-critical/01-03 and the section files. */ html.hero-locked, html.hero-locked body { overflow: hidden; overscroll-behavior: none; } html.hero-locked #top .hero-stage, html.hero-locked [data-hero-stage] { touch-action: none; } [hidden] { display: none !important; } /* reveal: visible without JS, with reduced motion and after the safety timeout */ html.js:not(.reveal-all):not(.reduced) [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 18px, 0); } [data-reveal] { transition: opacity .9s var(--ease-out, cubic-bezier(.16,1,.3,1)) var(--d, 0ms), transform .9s var(--ease-out, cubic-bezier(.16,1,.3,1)) var(--d, 0ms); } html.reduced [data-reveal] { transition: none; } /* language switch: a short fade of the content, never of the header */ main, footer { transition: opacity .18s ease; } html.lang-switching main, html.lang-switching footer { opacity: .2; } /* photo slots: the image fades in when decoded */ .slot img { opacity: 0; transition: opacity .6s ease; } .slot.is-shown img { opacity: 1; } .slot:not(.has-img) img { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } html.reduced .slot img { transition: none; } /* never-break spans from the copy deck */ .nb { white-space: nowrap; } /* visually hidden, still read by screen readers */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ===== 06-header.css ===== */ /* ========================================================================== 06-header.css — the page chrome: header, «Меню», the full-screen glass menu (DESIGN §5.16, §5.17, §8.11; ARCHITECTURE §2) Over the hero the header is BARE TYPE on the film's top scrim (a bar would sit on the cockpit glazing at stop I); past the hero it becomes the Level D glass bar. The bar and the veil recipes live in 02-glass.css (§4.3), .btn / .btn--glass / .arr / .lang in 03-components.css — used here, never redefined. State classes (07-header.js): .hdr.is-solid + html.past-hero · html.menu-open · .menu.is-open · a[aria-current="true"] No JS: «Меню» is a link to #menu and the menu opens with :target; the language switch (JS-only) is not shown. ========================================================================== */ /* the skip link (.skip, 00-critical.css) lives in 02-header.html; its target — and the section a menu link opened — takes focus without drawing a frame round the page (07-header.js) */ .is-focus-target:focus{outline:none} /* ---------- shell ---------- */ .hdr{position:fixed;left:0;right:0;top:0;z-index:var(--z-header);height:var(--hh);padding:0 var(--gutter); display:grid;grid-template-columns:1fr auto 1fr;column-gap:clamp(24px,2.6vw,48px);align-items:center} /* ≥ a nav gap between the three groups, also in UZ at 1280 */ /* the bar (::before, §4.3) is invisible over the film — keep it out of the backdrop budget there (§4.5: ≤ 3 over the moving film) */ .hdr::before{visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s} .hdr.is-solid::before{visibility:visible;transition:opacity .5s var(--ease),visibility 0s} /* the bare type's own soft scrim: it deepens the film's top scrim just under the words (the hero thins that scrim to .5 at stop III, where the cumulus reaches the nav — ТЕХНИКА measured 3.7:1 without it, ≥ 4.8:1 with it). A gradient with no edge, never a bar and no hairline (§9 rule 2); plain alpha, no backdrop; it fades out under the solid bar */ .hdr::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--hh) + 48px);z-index:-2;pointer-events:none; background:linear-gradient(180deg,rgba(4,9,19,.34) 0%,rgba(4,9,19,.22) 45%,rgba(4,9,19,0) 100%);transition:opacity .5s var(--ease)} .hdr.is-solid::after{opacity:0} @media (orientation:portrait) and (max-width:1119.98px){.hdr::after{display:none}} /* P mode (§7.4): the film starts below the header's navy band */ /* ---------- brand: emblem 40 + the optical master of the name (Serif 420, CONSTRUCTIONS justified to the ink) ---------- */ .hdr-brand{display:inline-flex;align-items:center;gap:14px;justify-self:start;min-width:0;min-height:44px} /* audit: 44 px tap target (the emblem is 40) */ .hdr-logo{width:40px;height:40px;border-radius:var(--r-round);overflow:hidden;flex:none;box-shadow:0 0 0 1px rgba(231,205,146,.55),0 6px 18px -6px rgba(0,0,0,.6)} .hdr-logo img{width:100%;height:100%;transform:scale(1.04)} .hdr-name{display:inline-flex;flex-direction:column;gap:6px;line-height:1;white-space:nowrap;transition:opacity .6s var(--ease),transform .7s var(--ease-out)} .hdr-name b{font-family:var(--serif);font-weight:420;font-size:19px;letter-spacing:.24em;margin-right:-.24em;text-shadow:0 1px 12px rgba(4,9,19,.45)} .hdr-name i{display:flex;justify-content:space-between;font:500 9.5px/1 var(--sans);font-style:normal;color:var(--paper-2);padding-right:.1em} html[data-hero="0"]:not(.past-hero) .hdr-name{opacity:0;transform:translateX(-8px)} /* state 0: the big name is on screen */ /* ---------- desktop nav (≥ 1280): six items, gold rule on hover and on the section in view ---------- */ .hdr-nav{justify-self:center} .hdr-nav ul{display:flex;gap:clamp(18px,2.2vw,40px)} .hdr-nav a{position:relative;display:block;font:500 var(--fs-micro)/1 var(--sans);letter-spacing:var(--tr-nav);text-transform:uppercase;color:var(--paper-90); padding:12px 0;margin-right:-.18em;white-space:nowrap;text-shadow:0 1px 10px rgba(4,9,19,.5);transition:color var(--t-fast) var(--ease)} .hdr-nav a::after{content:"";position:absolute;left:0;right:.18em;bottom:5px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)} .hdr-nav a:hover,.hdr-nav a[aria-current="true"]{color:var(--paper)} .hdr-nav a:hover::after,.hdr-nav a[aria-current="true"]::after{transform:scaleX(1)} html.touch .hdr-nav a{padding:16px 0} /* 44 px targets on large touch screens */ html.touch .hdr-nav a::after{bottom:9px} /* ---------- tools: glass CTA · RU / UZ · «Меню» ---------- */ .hdr-tools{justify-self:end;display:flex;align-items:center;gap:clamp(16px,2vw,30px)} .hdr .btn{height:40px;padding:0 18px;gap:12px} /* RU / UZ in the bar and in the menu: the §5.17 ink rhythm (9 px glyph ↔ slash) on the foundation's 28 px boxes, so the switch reads as one group next to the CTA and «Меню». Touch areas (the foundation's ::before, below 1280 and on touch) grow outwards: 4 px towards the slash (the two meet there without overlapping), 12 px outside → ≥ 28 + 16 = 44 px wide, 45 px tall (§9 rule 34) */ .hdr .lang,.menu .lang{gap:2px} .hdr .lang button{text-shadow:0 1px 10px rgba(4,9,19,.5)} html .hdr .lang button:first-child::before,html .menu .lang button:first-child::before{inset:-7px -4px -7px -12px} html .hdr .lang button:last-child::before,html .menu .lang button:last-child::before{inset:-7px -12px -7px -4px} /* over the film the switch stands on the top scrim only, which a bright cloud can outshine (UZ measured 3.96:1 in --paper-3): the idle language takes --paper-2 there (§4.5 rule 4, §9 rule 14; ≥ 5.4:1 with the scrim above, states 0–III, 1024–2560); on the solid bar (a navy ground) it keeps the foundation's --paper-3 (≥ 5.9:1 over the brightest film under the bar) */ .hdr:not(.is-solid) .lang button[aria-pressed="false"]{color:var(--paper-2)} .hdr:not(.is-solid) .lang button[aria-pressed="false"]:hover{color:var(--paper)} .menu-btn{display:none;align-items:center;gap:12px;height:44px;font:500 var(--fs-micro)/1 var(--sans);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--paper); text-shadow:0 1px 10px rgba(4,9,19,.5)} .menu-btn i{display:grid;gap:6px;width:26px} .menu-btn i::before,.menu-btn i::after{content:"";height:1px;background:currentColor;box-shadow:0 1px 8px rgba(4,9,19,.35)} .menu-btn i::after{width:62%;justify-self:end} /* ---------- mobile menu (below 1280): Level D veil (§4.3) + one vitrine; opens with opacity / transform only ---------- */ .menu{position:fixed;inset:0;z-index:var(--z-menu);overflow:hidden; opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s} .menu:focus{outline:none} /* the dialog itself takes focus only as a catch-all; its controls show the ring */ .menu.is-open{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s} /* reduced motion: the global .01 ms rule (01-base.css) gives every element a real transition of «all» — the dialog's «visibility 0s» and the visibility each control inherits from it would lag a frame, so «Закрыть» is still hidden when 07-header.js focuses it. Here visibility switches at once; only opacity keeps its (.01 ms) transition */ html.reduced .menu,html.reduced .menu.is-open,html.reduced .menu *{transition-property:opacity} @media (prefers-reduced-motion:reduce){.menu,.menu.is-open,.menu *{transition-property:opacity}} /* the sheet scrolls below the header band (short landscape screens); «Закрыть» stays put above it */ .menu-sc{position:absolute;left:0;right:0;top:var(--hh);bottom:0;overflow:auto;overscroll-behavior:contain;padding:10px var(--m) calc(32px + env(safe-area-inset-bottom,0px)); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10px);mask-image:linear-gradient(180deg,transparent 0,#000 10px)} /* scrolled glass fades out under the band */ .menu-in{max-width:560px;margin:0 auto;padding:22px 26px 28px;transform:translate3d(0,12px,0);transition:transform .6s var(--ease-out)} /* .vit */ .menu.is-open .menu-in{transform:none} /* «Закрыть» takes the exact place of «Меню» (same centre line, same right edge; --sbw = the scrollbar the lock removed) */ .menu-close{position:absolute;z-index:2;right:calc(var(--m) + var(--sbw,0px));top:calc(var(--hh) / 2 - 22px);display:inline-flex;align-items:center;gap:12px;height:44px; font:500 var(--fs-micro)/1 var(--sans);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--paper)} .menu-close i{position:relative;width:26px;height:13px} .menu-close i::before,.menu-close i::after{content:"";position:absolute;right:2px;top:50%;width:18px;height:1px;margin-top:-.5px;background:currentColor;transform:rotate(45deg)} .menu-close i::after{transform:rotate(-45deg)} .menu-list li{border-bottom:1px solid var(--hair)} .menu-list a{display:flex;align-items:baseline;gap:16px;padding:13px 0;font-family:var(--serif);font-weight:300;font-size:25px;line-height:1.15;color:var(--paper);transition:color var(--t-fast) var(--ease)} .menu-list a:hover{color:#fff} .menu-list a small{flex:none;min-width:2.2em;font-family:var(--serif);font-weight:400;font-size:14px;letter-spacing:.12em;color:var(--gold-hi)} .menu-list a[aria-current="true"]::after{content:"";flex:none;align-self:center;width:18px;height:1px;margin-left:auto;background:var(--gold)} /* the section in view */ .menu .btn{margin-top:24px;height:auto;min-height:44px;padding-block:13px;line-height:1.35;white-space:normal} /* a long UZ label wraps inside the pill, never past it */ /* depth ≤ 2 (§4.5 rule 3, §9 rule 16): veil (D) → sheet (A) → the pill keeps its fill, border and hover but blurs nothing */ .menu .btn--glass{-webkit-backdrop-filter:none;backdrop-filter:none} .menu .lang{margin-top:20px} html.menu-open,html.menu-open body{overflow:hidden} html.menu-open body{padding-right:var(--sbw,0px)} /* no layout jump when the lock hides a classic scrollbar */ html.menu-open .hdr{right:var(--sbw,0px)} /* ---------- no JS (and tv-fallback: site.js never ran) ---------- The header scrolls away with the page instead of floating as bare type over the text (it cannot turn solid without JS); at the top it stands over the state-0 lockup, so the small name steps back as it does in state 0. «Меню» is a link, the menu opens with :target, «Закрыть» leaves it without scrolling; RU / UZ needs JS and is not shown. */ .menu-btn--nojs,.menu-close--nojs{display:none} html.js .menu-btn--nojs,html.js .menu-close--nojs,html:not(.js) button.menu-btn,html:not(.js) button.menu-close{display:none} html:not(.js) .menu-close--nojs,html.tv-fallback .menu-close--nojs{display:inline-flex} html.tv-fallback button.menu-btn,html.tv-fallback button.menu-close{display:none} html:not(.js) .hdr,html.tv-fallback .hdr{position:absolute} html:not(.js):has(#top) .hdr-name,html.tv-fallback:has(#top) .hdr-name{opacity:0} html:not(.js) .hdr .lang,html:not(.js) .menu .lang,html.tv-fallback .hdr .lang,html.tv-fallback .menu .lang{display:none} html:not(.js) .menu:target,html.tv-fallback .menu:target{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s} html:not(.js) .menu:target .menu-in,html.tv-fallback .menu:target .menu-in{transform:none} /* ---------- widths ---------- */ @media (min-width:2200px){.hdr .btn{height:48px;padding:0 24px}.hdr-logo{width:48px;height:48px}.hdr-name b{font-size:22px}.hdr-name i{font-size:11px}} @media (max-width:1400px){.hdr-nav a{font-size:11px;letter-spacing:.15em}.hdr .btn{padding:0 15px;gap:10px;letter-spacing:.16em;font-size:11px}.hdr-tools{gap:16px}} @media (min-width:1280px) and (max-width:1400px){.hdr .lang{font-size:11px;letter-spacing:.15em} html.touch .hdr .lang{margin-left:-3px}} /* 13 px from the CTA: RU's 12 px touch margin never lies on the pill */ @media (max-width:1279.98px){ .hdr{grid-template-columns:auto 1fr}.hdr-nav{display:none}.hdr .btn{display:none} .hdr-tools{gap:24px} .menu-btn{display:inline-flex} html.tv-fallback .menu-btn--nojs{display:inline-flex}html.tv-fallback button.menu-btn{display:none} } /* «Меню» keeps its word while the name keeps ≥ 24 px from RU (html.hdr-tight is measured by 07-header.js; ≤ 374 px always icon only). The icon alone keeps a 44 × 44 target and its ink stays on the gutter; «Закрыть» follows «Меню». */ html.hdr-tight .menu-btn>span,html.hdr-tight .menu-close>span{display:none} html.hdr-tight .menu-btn,html.hdr-tight .menu-close{padding:0 9px;margin-right:-9px} @media (max-width:374px){ .menu-btn>span,.menu-close>span{display:none} .menu-btn,.menu-close{padding:0 9px;margin-right:-9px} } @media (orientation:landscape) and (max-height:500px){.hdr-logo{width:32px;height:32px}.hdr-name b{font-size:15px}.hdr-name i{display:none}} @media (forced-colors:active){.menu-btn i::before,.menu-btn i::after,.menu-close i::before,.menu-close i::after{forced-color-adjust:none;background:CanvasText}} /* ===== 08-intro.critical.css ===== */ /* ========================================================================== 08-intro.critical.css — brand intro «превью» · DESIGN §6.1 (storyboard), §5.1 (intro furniture), ARCHITECTURE §3.0, TECH §6 Inlined in (and kept in site.css): on a first visit the first painted frame is already smoked glass, never the bare page. Owns (DESIGN §10): .intro .iv-* .geo · the lockup's intro furniture .sw .si .ix and its intro states · html.intro-full / intro-short rules. Motion lives in 08-intro.js (Web Animations, transform / opacity only). backdrop-filter never animates; the frost fades by its opacity. ========================================================================== */ /* ---- the overlay: above the first screen, below the header; never takes a pointer or focus (aria-hidden in the markup) ---- */ .intro{position:fixed;inset:0;z-index:var(--z-intro);display:none;overflow:hidden;pointer-events:none} html.intro-full .intro,html.intro-short .intro{display:block} /* ---- 1 · the state-0 film seen through smoked glass. With the hero on the page the frost blurs the hero's own film. .iv-film is its stand-in only on a page without #top (isolated build): the state-0 poster at the hero's geometry, the hero's scrims on top. ---- */ .iv-film{position:absolute;inset:0;z-index:0;display:none;overflow:hidden;background:var(--ink)} /* own stack: its layers stay under the frost */ .intro.is-solo .iv-film{display:block} .iv-amb{position:absolute;inset:-12%;display:none;background:var(--navy-900) 50% 50%/cover no-repeat;filter:blur(46px) saturate(1.35) brightness(.62)} /* ambient surround (framed / portrait), §7.6 */ .intro.is-amb .iv-amb{display:block} .intro.is-p .iv-amb{inset:-20% -30%} .intro.is-amb .iv-film::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(90% 80% at 50% 45%,rgba(6,13,27,.25),rgba(4,9,19,.78))} .iv-frame{position:absolute;z-index:2;overflow:hidden;left:var(--ifx,0px);top:var(--ify,0px);width:var(--ifw,100%);height:var(--ifh,100%)} .iv-frame img{position:absolute;left:var(--iix,0px);top:var(--iiy,0px);width:var(--iiw,100%);height:var(--iih,100%);max-width:none;object-fit:cover} .iv-frame::after{content:"";position:absolute;inset:0;background:var(--scrim-top),var(--scrim-bot),var(--vignette)} .intro.is-p .iv-frame{-webkit-mask:linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 9%,#000 74%,transparent 100%);mask:linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 9%,#000 74%,transparent 100%)} .intro.is-p .iv-frame::after{background:none} /* ---- 2 · frost (Level-A-like glass over the whole first screen), navy veil on the vanishing point, edge light ---- */ .iv-frost{position:absolute;inset:0;-webkit-backdrop-filter:blur(26px) saturate(1.25) brightness(.9);backdrop-filter:blur(26px) saturate(1.25) brightness(.9); background:linear-gradient(116deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 26%,rgba(255,255,255,0) 50%),rgba(8,17,34,.22)} /* the veil is centred on the film's vanishing point from the first painted frame. 08-intro.js writes the measured --vpx / --vpy; until then --vpy0 is the same point from the hero's state-0 geometry (proto geo(0), vy = .386 of the film box): D / N / L: film box = the (framed ≤ 2048×1152) frame, oversized to 16:9 × 1.04 and raised as far as the fin allows — vy = fy + clamp(fhh − .63856·Hf, finMin + .26624·Hf, .40144·Hf); P: the film sits under the header at its own aspect. */ .intro{--v-fw:min(100vw,2048px);--v-fh:min(100vh,1152px);--v-fy:calc((100vh - var(--v-fh)) / 2);--v-hf:max(var(--v-fh),var(--v-fw) * .5625); --v-fin:max(max(0px,var(--hh) - var(--v-fy)) * .9,var(--v-fh) * .04); --vpy0:calc(var(--v-fy) + clamp(var(--v-fh) - var(--v-hf) * .63856,var(--v-fin) + var(--v-hf) * .26624,var(--v-hf) * .40144))} @media (min-aspect-ratio:19/10){.intro{--v-fin:max(max(0px,var(--hh) - var(--v-fy)) * .45,var(--v-fh) * .04)}} @media (orientation:portrait) and (max-width:1119.98px){.intro{--vpy0:calc(var(--hh) + 100vw * var(--fa) * .386)}} .iv-navy{position:absolute;inset:0;background: radial-gradient(44% 5% at var(--vpx,50%) var(--vpy,var(--vpy0)),rgba(231,205,146,.10),rgba(231,205,146,.02) 60%,rgba(231,205,146,0) 100%), radial-gradient(60% 46% at var(--vpx,50%) var(--vpy,var(--vpy0)),rgba(14,30,60,.40),rgba(7,15,31,.62) 60%,rgba(5,10,21,.80) 100%), linear-gradient(180deg,rgba(6,13,27,.42),rgba(6,13,27,.12) 40%,rgba(4,9,19,.55))} .iv-navy::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:256px 256px;opacity:.05} /* plain alpha: a blend mode here would make .intro a backdrop root and stop the frost */ .iv-edge{position:absolute;inset:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 1px 0 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(231,205,146,.16)} /* fallbacks: no blur available or a weak device — the glass becomes the solid smoked fill of §4.4 (α .93–.95): the sharp film never shows through, so the drawn runway never crosses the aircraft; the film appears only as the frost lifts */ html.low .iv-frost,html.noglass .iv-frost{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-solid)} @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.iv-frost{background:var(--glass-solid)}} html.noglass .intro.is-solo .iv-frame img{filter:blur(24px)} html.low .intro.is-solo .iv-film{display:none} /* ---- 3 · the runway drawn in one-point perspective (horizon, bead, centre-line dashes, edges; SVG built by 08-intro.js) ---- */ .geo{position:absolute;left:0;top:0;overflow:visible} .geo *{transform-box:fill-box} .geo polygon{transform-origin:50% 100%} .geo rect{transform-origin:50% 50%} /* ---- 4 · the intro lockup: the §5.1 drawing, placed by JS on the hero lockup's rect (--lx / --ly / --fv); hidden until placed ---- */ .iv-lk{position:absolute;left:0;top:var(--ly,0px);width:100%;visibility:hidden} .intro.is-placed .iv-lk{visibility:visible} .intro .lk{margin:0 0 0 var(--lx,0px);transform-origin:0 0} /* letters wait 1.05 em below their baseline inside a clip; the dimension line waits unseen (full version only) */ .intro .wm>.ch{clip-path:inset(-.5em -.5em .1em -.5em)} html.intro-full .intro .wm>.ch>b{transform:translateY(1.05em)} html.intro-full .intro .dim>*{opacity:0} .iv-probe{position:absolute;left:0;top:0;box-sizing:content-box;visibility:hidden;width:var(--m);height:var(--hh);padding-left:var(--fh)} /* resolves tokens for JS */ /* ---- lockup furniture for the intro (§5.1: .sw/.si specular pass, .au hinge, .ix brackets / glosses / centre-line dash / gold run). Unscoped on purpose: a hero lockup that carries the same furniture keeps it invisible. ---- */ /* one specular pass while the glass clears: a skewed window slides, its content counter-slides (transform only) */ .sw{position:absolute;left:0;top:-.12em;height:1.1em;width:1.15em;overflow:hidden;pointer-events:none;opacity:0;transform-origin:0 0; -webkit-mask:linear-gradient(90deg,transparent,#000 42%,#000 58%,transparent);mask:linear-gradient(90deg,transparent,#000 42%,#000 58%,transparent)} .si{position:absolute;left:0;top:0;padding-top:.12em;display:flex;white-space:nowrap;transform-origin:0 0} .si .ch b{background:linear-gradient(180deg,#FFFFFF,#FFF8EA 60%,#F3E2BD);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 .08em rgba(255,236,196,.55))} .ix{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none} .ix i{position:absolute;left:0;display:block;opacity:0} .ix .g-sg{top:calc(-.27em - var(--hl) / 2);width:1em;height:var(--hl);transform-origin:0 50%;background:linear-gradient(90deg,var(--gold-lo),var(--gold) 50%,var(--gold-lo))} .ix .g-tk{top:-.32em;width:var(--hl);height:.1em;background:var(--gold)} /* beat B: a runway centre-line dash in the gap, BELOW the baseline (never a caret at cap height) */ .ix .cl{top:calc(.719em + .055em);height:.15em;width:max(1.5px,.02em);margin-left:calc(max(1.5px,.02em) / -2);background:linear-gradient(180deg,var(--gold-hi),var(--gold));transform-origin:50% 0} /* beat C: the gold leaves the hinge A and runs into the dimension line */ .ix .gr{top:calc(.719em + var(--dy) - .0045em);width:1em;height:max(1.5px,.009em);background:linear-gradient(90deg,rgba(231,205,146,0),var(--gold-pale) 30%,var(--gold-pale) 70%,rgba(231,205,146,0));transform-origin:0 50%} .ix .lb{position:absolute;left:0;width:0;height:0;opacity:0} .ix .lb.t{top:-.27em} .ix .lb.b{top:calc(.719em + var(--dy))} .ix .lb span{position:absolute;left:0;top:0;transform:translate(-50%,-.61em);font:500 max(11px,.112em)/1 var(--sans);letter-spacing:.26em;text-indent:.26em;white-space:nowrap;color:rgba(244,239,230,.96)} /* ---- 5 · the hero's first screen waits under the intro (production hooks for proto `html.intro-on`). Its lockup is revealed by the hand-off (html.intro-handoff); tagline, descriptor, index, folio, connector and header fade in at the end of beat C (08-intro.js). [data-intro-ui] opts any other first-screen element into the same fade. The state-0 stack rides above the veil. ---- */ html:is(.intro-full,.intro-short):not(.intro-handoff) #top [data-lockup]{opacity:0} html:is(.intro-full,.intro-short) :is(#top .tagline,#top .tag-f,#top .desc,#top .idx,#top .folio,#top .conn,.hdr,[data-intro-ui]){opacity:0} /* the stack rides above the veil; at the hand-off (every intro layer is clear by then) it drops back, so the copy lies on top of the revealed lockup and the specular pass finishes on the name instead of being cut by it */ html:is(.intro-full,.intro-short):not(.intro-handoff) #top .cover{z-index:var(--z-cover-intro)} /* ---- safety net: if the script never ends the intro, the page is given back at 7.5 s (visibility / opacity keyframes only; an opacity animation on .intro itself would turn it into a backdrop root and stop the frost). ?intro=hold opts out. ---- */ @keyframes iv-gone{to{visibility:hidden}} @keyframes iv-show{to{opacity:1}} html:is(.intro-full,.intro-short):not(.intro-hold) .intro{animation:iv-gone 1ms linear 7.5s both} html:is(.intro-full,.intro-short):not(.intro-hold) :is(#top [data-lockup],#top .tagline,#top .tag-f,#top .desc,#top .idx,#top .folio,#top .conn,.hdr,[data-intro-ui]){animation:iv-show 1ms linear 7.5s both} @media (forced-colors:active){.intro{display:none!important}} /* ===== 10-hero.css ===== */ /* ========================================================================== 10-hero.css — the three-swipe hero (DESIGN §7, §5.15, §6.2, §8.5; ARCHITECTURE §3.1, §7) Owns: .hero .amb .frame .film .scr* .vig .grain .cover .tagline .idx .conn .panel .p-* .rows .ph* .folio .cue* .ctrl .dock (hero use) .next .prev .skipfilm .tag-f .hero-fb Uses the foundation as is: .lk (03), .desc (03), .eyebrow (03), .steps/.trk (03), .vit/.next/.dock glass (02), .btn/.lnk (03). Stacking contract (§6.1): .hero never creates a stacking context — no isolation, z-index, transform, filter, opacity < 1 or will-change on .hero itself — so the fixed intro (z 40) sits between the film and the lockup. Runtime custom properties written by 10-hero.js (every one has a CSS fallback here): frame --fx --fy --fw --fhh --fl --frr --fb · film box --Wf --Hf --fs --pan --pany · lockup --cb --nx --fv panels --pr --pw --p1t --pb --pd · portrait --ct --st ========================================================================== */ /* ---------- 7.1 the first screen ---------- */ .hero{position:relative;height:100vh;height:100svh;overflow:hidden;overflow:clip;background:var(--ink)} .hero-probe{position:absolute;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;padding:var(--hh) 0 var(--fh) var(--m)} /* resolves --hh --fh --m to px for the geometry */ .hero.no-anim,.hero.no-anim *,.hero.no-anim *::before,.hero.no-anim *::after{transition:none!important} /* initial paint, deep link, ?hero=N */ /* ---------- 7.6 film treatment and framing ---------- */ .amb{position:absolute;inset:0;z-index:0;overflow:hidden;display:none} /* ambient surround: framed + P modes */ .amb i{position:absolute;inset:-12%;background:var(--navy-900) 50% 50%/cover no-repeat;filter:blur(46px) saturate(1.35) brightness(.62);opacity:0;transition:opacity var(--t-slow) linear} .amb i.is-on{opacity:1} .amb::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 45%,rgba(6,13,27,.25),rgba(4,9,19,.78))} .frame{position:absolute;z-index:var(--z-film);left:var(--fx,0px);top:var(--fy,0px);width:var(--fw,100%);height:var(--fhh,100%);overflow:hidden} .film{position:absolute;left:50%;top:50%;width:var(--Wf,100%);height:var(--Hf,100%);will-change:transform; transform:translate(-50%,-50%) translate3d(var(--pan,0px),var(--pany,0px),0) scale(var(--fs,1.03));transition:transform .7s var(--ease-io)} .film .sp{background:var(--ink)} .film .st-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%} /* no-JS state-0 poster (§7.3 table) */ .scr{position:absolute;inset:0;pointer-events:none;z-index:var(--z-scrim)} .scr-top{background:var(--scrim-top);transition:opacity 1s var(--ease)} .hero[data-state="2"] .scr-top{opacity:.7}.hero[data-state="3"] .scr-top{opacity:.5} .scr-bot{background:var(--scrim-bot)} .scr-wm{background:var(--scrim-wm);opacity:0;transition:opacity .7s var(--ease)}.hero.cover-on .scr-wm{opacity:1} .vig{background:var(--vignette)} .grain{z-index:var(--z-grain);background-image:var(--grain);background-size:256px 256px;opacity:.055} /* plain alpha, no blend mode */ .hero.framed .amb{display:block} .hero.framed .frame{border-radius:var(--r-3);box-shadow:0 0 0 1px rgba(4,9,19,.5),0 60px 120px -40px rgba(0,0,0,.8)} .hero.framed .frame::after{content:"";position:absolute;inset:0;z-index:var(--z-frame-edge);border-radius:inherit;padding:1.25px;pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 24%,rgba(255,255,255,0) 50%,rgba(231,205,146,.08) 76%,rgba(231,205,146,.36)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .hero.framed .grain{opacity:.085} /* ---------- 7.2 state 0 — the lockup stack on the film's axis ---------- */ .cover{position:absolute;z-index:var(--z-cover);left:var(--fl,0px);right:var(--frr,0px);bottom:var(--cb,calc(var(--fh) + 32px)); padding:0 calc(var(--m) - var(--nx,0px)) 0 calc(var(--m) + var(--nx,0px)); display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none; transition:opacity .5s var(--ease),transform .7s var(--ease-out),visibility 0s} .cover .lk{--fv:12.6svh} /* no-JS size ≈ .9 · fMax; the fit routine writes the measured one inline */ .hero:not(.cover-on) .cover{opacity:0;visibility:hidden;transform:translate3d(0,-12px,0);transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s .6s} /* §7.7: the page's one

stays in the accessibility tree at every state (released, deep-linked, ?hero=N). The cover's opacity 0 already hides it on screen; its visual parts (.wm, .dim) are aria-hidden, so only the sr-only name and descriptor tail are exposed */ .hero:not(.cover-on) .cover .lk{visibility:visible} .hero.hero-measure .cover{transform:none!important;transition:none!important} /* the fit measures the resting pose */ .tagline{margin-top:clamp(9px,1.2svh,22px);font:italic 300 var(--fs-tagline)/1.1 var(--serif);letter-spacing:.004em;color:var(--paper);text-shadow:0 2px 22px rgba(4,9,19,.62)} .cover .desc{margin-top:clamp(8px,1.15svh,20px)} .idx{display:none} .conn{position:absolute;left:0;top:0;z-index:var(--z-conn);pointer-events:none;overflow:visible;display:none} /* ---------- 7.3 states I–III — one panel component: same width, same right edge, same inner grid ---------- */ .panel{position:absolute;z-index:var(--z-panel);right:var(--pr,72px);width:var(--pw,340px);padding:clamp(16px,1.3vw,26px) clamp(16px,1.3vw,26px) clamp(16px,1.3vw,24px); opacity:0;visibility:hidden;transform:translate3d(0,14px,0);transition:opacity var(--t-exit) var(--ease),transform .3s var(--ease),visibility 0s .3s} .p1{top:var(--p1t,110px)} .p2,.p3{bottom:var(--pb,96px);width:var(--pw2,var(--pw,340px))} /* final-fix (AD item 5): II / III have their own width (free up to the wingtip) */ .hero.p1c .p1 .p-note{display:none} /* final-fix (AD item 3): compact panel I beside the fuselage */ .p2{transform:translate3d(28px,0,0)} /* II slides in from the right: its edge never meets the wingtip */ .panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity var(--pd,1s) var(--ease-out),transform var(--pd,1.1s) var(--ease-out),visibility 0s} /* title size from the panel's CONTENT width (not its outer width): «Восемь объектов команды.» (13.1 em) stays one line at every desktop size, so title I is two lines, II four (two per sentence), III two — never three (§9.5). Language-independent: UZ never shrinks the type (§9.21) */ .p-t{margin-top:clamp(12px,1.6vh,18px);font-family:var(--serif);font-weight:300;font-size:min(var(--fs-panel),calc((var(--pw,400px) - 2 * clamp(16px,1.3vw,26px) - 2 * var(--bev,5px)) * .0746));line-height:1.14;letter-spacing:.002em;color:var(--paper);text-wrap:balance} /* final-fix (AD item 5): II / III size their title from their own measure (--pw2): «Собственный комплекс GOMACO.» is 16.31 em in the serif (measured), so 1 / 16.6 of the content width keeps «Собственный комплекс GOMACO.» / «Собственный бетонный завод.» one line each */ .p2 .p-t,.p3 .p-t{font-size:min(var(--fs-panel),calc((var(--pw2,var(--pw,400px)) - 2 * clamp(16px,1.3vw,26px) - 2 * var(--bev,5px)) * .0602))} .p-t>span{display:block;text-wrap:balance} .p-row{margin-top:clamp(12px,1.6vh,16px);padding-top:clamp(12px,1.6vh,16px);border-top:1px solid var(--hair);font:300 var(--fs-row)/1.38 var(--serif);color:var(--paper)} .p-note{margin-top:clamp(10px,1.3vh,14px);font:italic 300 var(--fs-note)/1.35 var(--serif);color:var(--paper-2)} .rows{margin-top:clamp(12px,1.6vh,18px);border-top:1px solid var(--hair)} .rows li{padding:clamp(8px,1.15vh,12px) 0;border-bottom:1px solid var(--hair-2)} .rows b{display:block;font:300 var(--fs-h4b)/1.12 var(--serif);color:var(--paper)} .rows li>span{display:block;margin-top:4px;font-size:clamp(13px,.9vw,15.5px);line-height:1.42;color:var(--paper-2)} .rows .inl{display:flex;align-items:baseline;gap:12px} .rows .inl b{font-size:var(--fs-figure);line-height:.9;font-variant-numeric:lining-nums tabular-nums} .rows .inl>span{margin:0} .p-foot{margin-top:clamp(14px,2vh,22px)} .p-role{margin-top:clamp(10px,1.3vh,14px);font:italic 300 var(--fs-note)/1.35 var(--serif);color:var(--paper-2)} .p3 .btn{width:100%;justify-content:space-between} /* the one CTA may take two lines (long UZ «Obyektni muhokama qilish» in a 292 px panel): the arrow never leaves the button */ .p3 .btn,.hero-fb .btn{height:auto;min-height:44px;padding-top:11px;padding-bottom:11px;white-space:normal;line-height:1.35;text-align:left} .p3 .btn>span,.hero-fb .btn>span{min-width:0} .ph{display:none} /* phone lines (COPY *.m keys), shown in N / L / P */ .ph-lines{margin-top:12px;border-top:1px solid var(--hair)} .ph-lines li{padding:9px 0;border-bottom:1px solid var(--hair-2);font-size:14.5px;line-height:1.42;color:var(--paper-2)} .ph-lines li b{display:block;margin-bottom:1px;font:300 19px/1.2 var(--serif);color:var(--paper)} .ph-lines:last-child li:last-child{border-bottom:0;padding-bottom:0} /* a sheet ends on its words, not on a stray rule */ /* ---------- 7.5 folio — cue (left) · ↑ · progress I II III · Next · Skip (bottom-right, the darkest corner) ---------- */ .folio{position:absolute;z-index:var(--z-folio);left:max(calc(var(--fl,0px) + var(--m)),var(--gutter));right:max(calc(var(--frr,0px) + var(--m)),var(--gutter));bottom:var(--fb,0px);height:var(--fh); display:flex;align-items:center;justify-content:space-between;gap:24px; font:500 var(--fs-micro)/1 var(--sans);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--paper-2)} .cue{display:flex;align-items:center;gap:14px;white-space:nowrap;transition:opacity .6s var(--ease)} .hero:not(.cover-on) .cue{opacity:0} .cue-line{position:relative;display:block;flex:none;width:1px;height:26px;background:var(--hair);overflow:hidden} .cue-line::after{content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:var(--gold-hi);animation:cue 2.6s var(--ease-io) 1.2s 3 both} @keyframes cue{0%{transform:translateY(-14px)}60%,100%{transform:translateY(28px)}} .cue .t,.cue .rh{display:none} html.touch .cue .w{display:none} html.touch .cue .t{display:inline} /* released hero back at the very top: «Вверх — вернуться к фильму» replaces the cue */ .hero.relock-on .cue{opacity:1} .hero.relock-on .cue .w,.hero.relock-on .cue .t{display:none} .hero.relock-on .cue .rh{display:inline} .ctrl{display:flex;align-items:center;gap:clamp(16px,2vw,32px)} .folio .dock{display:flex;align-items:center;gap:clamp(16px,2vw,32px)} /* §4.5.4 / §9.14: nothing below --paper-2 over the film — upcoming steps are lifted from the foundation's --paper-3 (done = paper-2 with a gold track, now = paper; the track tells done from upcoming). P mode resets it: its dock sits on navy, not on the film */ .folio .steps li:not(.is-now){color:var(--paper-2)} @media not all and (orientation:portrait) and (max-width:1119.98px){ /* D / N / L: the dock is a bare row, glass only in P */ html .folio .dock{padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none} } .next{position:relative;display:inline-flex;align-items:center;gap:12px;white-space:nowrap;flex:none;height:42px;padding:0 16px 0 20px;border-radius:var(--r-2);color:var(--paper); letter-spacing:var(--tr-caps);text-transform:uppercase;transition:background-color var(--t-hover),border-color var(--t-hover)} /* + Level C (02-glass) */ .next .nh{color:var(--paper-2);padding-left:12px;border-left:1px solid var(--hair)} /* §9.14: nothing below paper-2 over the film */ .next .nh:empty{display:none} .next .dn{display:block;width:1px;height:14px;background:currentColor;position:relative} .next .dn::after{content:"";position:absolute;left:-3px;bottom:0;width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg)} /* ↑ previous step: bare (no fourth glass surface over the film), 44 px target, absent at state 0 */ .prev{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:42px;margin-right:-6px;color:var(--paper-2); transition:color var(--t-fast),opacity var(--t-base) var(--ease),visibility 0s} .prev::before{content:"";position:absolute;inset:-1px -7px} .prev:hover{color:var(--paper)} .prev .up{height:14px} .prev .up::after{left:-3px;width:7px;height:7px} .hero[data-state="0"] .prev{opacity:0;visibility:hidden;transition:opacity var(--t-exit) var(--ease),visibility 0s var(--t-exit)} .skipfilm{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--paper-2);letter-spacing:var(--tr-caps);text-transform:uppercase;white-space:nowrap;padding:0;transition:color var(--t-fast)} /* §9.34: 44 px target */ html.touch .next{height:44px} /* §9.34: ≥ 44 px on touch (1024 / 1366 tablets in D / N) */ .skipfilm:hover{color:var(--paper)} .hero[data-state="3"] .skipfilm{visibility:hidden} .tag-f{display:none;font:italic 300 clamp(19px,2.6svh,30px)/1.1 var(--serif);letter-spacing:.004em;text-transform:none;color:var(--paper);white-space:nowrap;text-shadow:0 2px 18px rgba(4,9,19,.7);transition:opacity .6s var(--ease)} .hero.tag-low .tag-f{display:block} .hero.tag-low .cue,.hero.tag-low .cover .tagline{display:none} .hero.tag-low:not(.cover-on) .tag-f{opacity:0} .hero.tag-low.relock-on .tag-f{display:none} .hero.tag-low.relock-on .cue{display:flex} /* the folio's fit (10-hero.js): labels of the progress go first, then the next-step hint */ .hero.f-tight .folio .steps .sl{display:none} .hero.f-tight2 .folio .next .nh{display:none} /* ---------- 7.3 N mode — landscape narrower than 16:10 (4:3, 5:4) and rotated monitors wider than 1120: a low two-column sheet ---------- */ @media (max-aspect-ratio:1599/1000) and (min-height:501px) and (min-width:1120px),(orientation:landscape) and (max-aspect-ratio:1599/1000) and (min-height:501px){ .hero .panel{left:calc(var(--fl,0px) + var(--m));right:calc(var(--frr,0px) + var(--m))!important;width:auto!important;top:auto!important;bottom:var(--pb)!important; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(24px,3vw,48px);align-items:start;padding:16px clamp(20px,2.2vw,30px)} .hero .panel .eyebrow,.hero .panel .p-t{grid-column:1} .hero .panel .p-t{font-size:clamp(20px,2.2vw,28px)} .hero .panel .dk{display:none}.hero .panel .ph{display:block} .hero .panel .ph-lines{grid-column:2;grid-row:1/span 3;margin-top:0} .p3 .p-foot{grid-column:1;margin-top:12px} } /* ---------- 7.3 L mode — landscape phones: everything inside 100 svh, compact ---------- */ @media (orientation:landscape) and (max-height:500px){ .hero .panel{padding:12px 14px} .hero .panel .dk{display:none}.hero .panel .ph{display:block} .hero .p-t{font-size:18px;margin-top:8px} .hero .p-t>span{display:inline} /* the 240 px panel: the two sentences balance over three lines, not four (§9.5) */ .ph-lines{margin-top:8px}.ph-lines li{padding:6px 0;font-size:13px}.ph-lines li b{font-size:16px} .hero .p-foot{margin-top:8px} .p3 .btn{min-height:38px;padding-top:8px;padding-bottom:8px;margin-top:0} .tagline{font-size:16px;margin-top:8px} .cover .desc{--ds:11px;margin-top:6px} /* §7.3 says 10.5 px; §2 / §9.18 floor micro caps at 11 px */ .next,html.touch .next{height:36px}.prev{height:36px} .next::before{content:"";position:absolute;inset:-5px -1px}.prev::before{inset:-4px -7px} /* 36 px pills, 44 px targets (§9.34; the pill has a 1 px border) */ .next .nh,.folio .steps .sl{display:none} } /* ---------- 7.4 P mode — phones and portrait tablets: the film on top at its own aspect, words below, a glass dock ---------- */ @media (orientation:portrait) and (max-width:1119.98px){ .hero{background:var(--navy-950)} .amb{display:block}.amb i{inset:-20% -30%} .frame{left:0;top:var(--hh);width:100%;height:calc(100vw * var(--fa)); -webkit-mask:linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 9%,#000 74%,transparent 100%);mask:linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 9%,#000 74%,transparent 100%)} .film{left:0;top:0;width:100%;height:100%;transform:none!important} .film .st-poster img{object-position:50% 50%} .scr-top,.scr-wm,.vig{display:none} .grain{opacity:.04} .cover{top:var(--ct,calc(var(--hh) + 100vw * var(--fa) + 50px));bottom:auto;left:0;right:0} .cover .lk{--fv:12svh} .tagline{margin-top:clamp(14px,2.2vh,26px);font-size:clamp(21px,5.9vw,34px)} .cover .desc{margin-top:clamp(10px,1.6vh,18px);display:grid;justify-items:center;gap:4px;--ds:clamp(13px,3.6vw,16px);font-size:var(--ds);font-weight:400;letter-spacing:.01em;text-transform:none;color:var(--paper-2)} .cover .desc .dl{display:flex;align-items:center} .cover .desc .dl+.dl::before{display:none} .cover .desc .dl i{width:14px;margin:0 11px;transform:none} .cover .desc .dl>span:last-child,.cover .desc .dl:last-child>span:last-child{margin-right:0} .idx{display:block;width:min(100%,420px);margin-top:clamp(16px,2.6vh,30px);border-top:1px solid var(--hair);text-align:left} .idx li{display:grid;grid-template-columns:2.4em 1fr auto;align-items:baseline;padding:clamp(8px,1.3vh,12px) 2px;border-bottom:1px solid var(--hair-2)} .idx .r{font:400 16px/1 var(--serif);color:var(--gold-hi);font-variant-numeric:lining-nums tabular-nums} .idx .m{font:400 13px/1 var(--serif);letter-spacing:.3em;color:var(--paper-3)} .idx .f{font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--paper)} .hero.idx-c .idx{margin-top:10px}.hero.idx-c .idx li{padding:6px 2px} .hero.no-idx .idx{display:none} .hero.no-tag .cover .tagline{display:none} .conn{display:block} .hero .panel{left:12px;right:12px!important;width:auto!important;top:var(--st,50%)!important;bottom:auto!important;padding:18px 20px 20px;--bev:4px} .p2{transform:translate3d(0,14px,0)} .hero .panel .dk{display:none}.hero .panel .ph{display:block} .hero .p-t{font-size:min(clamp(22px,6vw,32px),calc((min(100vw - 24px,640px) - 48px) * .0746));margin-top:12px} /* the live sheet's measure only (the fallback sizes its own) */ .p3 .btn{margin-top:14px;min-height:48px} .hero .p-foot{margin-top:0} /* short phones (360 × 740): placePanels() adds .sh-c when a sheet would come within 14 px of the dock — the sheet can rise only 26 px into the film, so it tightens its vertical rhythm instead (type sizes and the 48 px CTA are untouched) */ .hero.sh-c .panel{padding-top:14px;padding-bottom:16px} .hero.sh-c .p-t{margin-top:8px} .hero.sh-c .ph-lines{margin-top:8px} .hero.sh-c .ph-lines li{padding:6px 0} .hero.sh-c .p3 .btn{margin-top:10px} .folio{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));height:auto;display:grid;grid-template-columns:1fr auto;row-gap:10px;column-gap:12px;font-size:11px;letter-spacing:.16em} .cue{grid-column:1;grid-row:1;padding-left:8px;min-width:0;white-space:normal;line-height:1.35} .hero:not(.cover-on) .cue{visibility:hidden} .hero.relock-on .cue{visibility:visible} .ctrl{display:contents} .prev{grid-column:1;grid-row:1;justify-self:start;width:44px;height:44px;margin:-9px 0 -9px -4px} /* 44 px target in a 26 px row */ .hero.relock-on .prev{visibility:hidden} .skipfilm{grid-column:2;grid-row:1;justify-self:end;padding:0 8px;margin:-9px 0} /* 44 px target in the 26 px row, like .prev; text keeps its 8 px inset (mirrors the cue) */ .hero[data-state="3"] .skipfilm{visibility:hidden} /* keeps its column: the cue row (and the ↑) stays the same height in every state, so the sheets' 14 px clearance holds */ .folio .dock{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 5px 5px 16px} /* + Level C dock glass (02) */ .steps{flex:1;justify-content:space-between;gap:6px;min-width:0} .steps li{gap:7px} .folio .steps li:not(.is-now):not(.is-done){color:var(--paper-3)} /* on the navy dock, with no track, colour alone tells upcoming from done */ .folio .steps .sl{display:inline;font-size:11px;letter-spacing:.12em;margin-right:0} .steps .trk{display:none} .steps li+li::before{content:"";width:clamp(8px,3vw,28px);height:1px;background:var(--hair);margin-right:4px} .next,html.touch .next{width:46px;height:46px;padding:0;justify-content:center;border-color:rgba(255,255,255,.34)} .next .nx,.next .nh{display:none} .hero[data-state="3"] .steps{display:none} .hero[data-state="3"] .folio .dock{padding:5px} .hero[data-state="3"] .next{flex:1;width:auto;justify-content:space-between;padding:0 16px} .hero[data-state="3"] .next .nx{display:inline;font-size:11px} } @media (orientation:portrait) and (min-width:600px) and (max-width:1119.98px){ .folio{left:50%;right:auto;width:min(640px,calc(100% - 24px));transform:translateX(-50%)} .hero .panel{left:max(12px,calc(50% - 320px));right:max(12px,calc(50% - 320px))!important} /* sheets share the dock's 640 px column */ } @media (orientation:portrait) and (max-width:374px){ .cue{letter-spacing:.1em} /* final-fix (AD nice-to-have 10): «Смахните вверх · три шага» holds one line at 360 */ .folio .steps .sl{font-size:10.5px;letter-spacing:.08em} .steps li+li::before{width:6px} .folio .dock{padding-left:12px} } /* final-fix (AD item 4): short phones — with the 16:10 band (--fa .62, 00-critical) the sheets are compacted so they fit between the film's feathered last 26 px and the folio; placePanels() never lifts a sheet above that line (glass never hides the aircraft) */ @media (orientation:portrait) and (max-width:760px) and (max-height:700px){ .hero .panel,.hero.sh-c .panel{padding:12px 16px} .hero .p-t,.hero.sh-c .p-t{font-size:20px;margin-top:6px;line-height:1.12} .hero .ph-lines,.hero.sh-c .ph-lines{margin-top:6px} .hero .ph-lines li,.hero.sh-c .ph-lines li{padding:5px 0} .hero .ph-lines li b{font-size:17px;line-height:1.16} .hero .p3 .btn,.hero.sh-c .p3 .btn{min-height:44px;margin-top:8px} } /* ---------- 7.8 / 8.5 reduced motion · no JS · tv-fallback: the three panels as ordinary content under the first screen ---------- */ /* ground (§8.0 / §9.25): starts and ends on --navy-950 — the two light fields (the same colour stops as --field-cold / --field-warm) sit inside the block and have faded out before either edge, so neither the film above nor company below meets a cut-off glow */ .hero-fb{display:none;padding:clamp(48px,8vh,96px) var(--gutter); background:radial-gradient(60% 50% at 14% 44%,rgba(60,96,160,.14),rgba(10,21,40,0) 70%),radial-gradient(50% 44% at 88% 54%,rgba(201,165,92,.07),rgba(201,165,92,0) 70%),var(--navy-950)} html.reduced .hero-fb,html:not(.js) .hero-fb,html.tv-fallback .hero-fb{display:block} .hero-fb .fb-note{margin:0 0 clamp(18px,2.6vh,30px);font-size:var(--fs-small);line-height:1.55;color:var(--paper-3)} /* audit: the