/* hero — section 1 · sirka-courses Nodes: desktop 3001:284 (1520x816) · mobile 3001:3134 (375x667) + mobile bar 3001:3158 (375x64). MOBILE-FIRST: base = 375, then the PSEUDO-tablet band (768-1023, interpolated — nothing is drawn there), then the drawn desktop layer at 1024+. Scoped rules only: .hero__* and .mobile-menu__* (the panel's base layout is components.css's, only hero-specific bits are added here). No global selector, no :root, no .container, no template stylesheet — those are PAGE-SCAFFOLD's. */ /* ============================================================================ SECTION-SCOPED TOKENS — brief/hero.md 2.4, all three bands. M-min = M*320/375 · M-max = M*767/375 · D-min = D*1024/1520 · D-max = D*1920/1520. Everything in this section rides ONE ramp: at 1024 the desktop factor is 1024/1520 = 0.6737 and the flow sums to 36.4 + 26.9 + 242.5 + 26.9 + 74.1 + 29.6 + 37.7 + 75.3 = 549.4 = 550 = --hero-min-h D-min. A fixed px anywhere in that chain breaks the 816 box and therefore every section below it. ============================================================================ */ .hero { --hero-min-h: clamp(569px, calc(667px + (var(--max-vw) - 375px) * 0.015), 1364px); --hero-pt: clamp(30px, calc(35px + (var(--max-vw) - 375px) * 0.015), 72px); --hero-gap-title: clamp(17px, calc(20px + (var(--max-vw) - 375px) * 0.015), 41px); --hero-gap-lead: clamp(22px, calc(26px + (var(--max-vw) - 375px) * 0.015), 53px); --hero-gap-cta: clamp(43px, calc(50px + (var(--max-vw) - 375px) * 0.015), 102px); --hero-pb: clamp(26px, calc(31px + (var(--max-vw) - 375px) * 0.015), 63px); /* Colours take no clamp and need no band blocks (D-12). These three are section-scoped ADDITIONS to brief-page.md 4.4, not redefinitions: canvas.json collapsed the toggle's icon leaves (graphicLeavesCollapsed: 270) so the page-level colour census could not see them. */ --hero-toggle-chip: #d9d9d9; /* 3001:295 — the ACTIVE chip's fill */ --hero-toggle-icon-on: #000000; /* the active icon's stroke */ --hero-toggle-icon-off: #9c9c9c; /* the inactive icon's stroke */ } /* ============================================================================ SECTION SHELL — Pattern B-edge: the photo reaches both viewport edges with no visible margin, and the content sits in the normal page content box. ============================================================================ */ .hero { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: var(--hero-min-h); /* NO margin-bottom. Section rhythm has ONE owner: base.css's `section + section { margin-block-start: var(--section-gap) }`, with the five drawn desktop exceptions overridden by the section BELOW each boundary. `about-course` already sets its own `margin-top: var(--section-gap)`, so a bottom margin here doubled the hero -> about-course gap (240 instead of 120 at desktop, 100 instead of 50 at mobile). Removed by the driver at integration, 2026-08-12. */ color: #ffffff; } /* The
itself gets NO block padding — the bar starts at y=0 on both layers (2.1). */ .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Figma CROP {widthPct 363.87, offsetXPct 134.79} on a uniform 0.4489 scale, so cover + an explicit object-position reproduces it exactly: 505.5 / 989.6 of overflow = 51.08% (3.1). */ object-position: 51.08% 50%; } /* the 20% black scrim, both layers. Kept as a separate layer over the photo so an asset check that only looks at `fill` can still see the underneath it (brief-page.md 8.4). */ .hero::after { content: ""; position: absolute; inset: 0; background: var(--c-scrim); } /* The photo and the scrim are positioned, so the in-flow content must be lifted above them. */ .hero__bar, .hero__inner { position: relative; z-index: 1; } /* ============================================================================ BAR — 3001:3158 mobile (375x64) / 3001:287 desktop (1520x54). Full-bleed strip that re-applies the gutter as its OWN padding-inline, so its inner row lines up with the page content box without being inside .container. Height is CONTENT-driven on both layers: 10 + 44 + 10 = 64 mobile (the burger), 10 + 34 + 10 = 54 desktop (the control group). NOT sticky (BA-4) — it scrolls away with the hero as the first child in normal flow. ============================================================================ */ .hero__bar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding-block: 10px; /* drawn 10 at BOTH anchors — not clamped (2.4) */ padding-inline: var(--gutter); background: var(--c-ink-alt); /* #252627, opaque: it covers the top of the photo */ } .hero__brand { display: flex; flex-direction: row; align-items: center; gap: 5px; /* 5.0 desktop / 5.014 mobile -> ship 5 (2.4) */ } .hero__brand-name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-logo); line-height: var(--lh-logo); /* absolute 20px on 22px = 0.909 */ letter-spacing: var(--ls-logo); text-transform: uppercase; /* SIRKA ECOM LAB uses NON-BREAKING spaces in the source (8.5), so it is a single unbreakable run by construction; nowrap makes that explicit and cannot be defeated by a wider fallback. */ white-space: nowrap; } /* ---------- desktop control group (3001:293) — not drawn below 1024 ---------- */ .hero__bar-controls { display: none; } /* ---------- theme toggle (3001:294) — desktop only ---------- 64x28. Figma padding [4,4,4,4] WITH a 1px INSIDE stroke: an INSIDE stroke sits inside the padding box while a CSS border ADDS to it, so the CSS is 3px + 1px (4px + a border would inflate the pill to 66x30 — brief-page.md 4.4a Trap 2 / D-13). Figma radius 100 on a 28-tall box -> 9999px; never transcribe the literal 100 (D-14). */ .hero__theme { display: flex; flex-direction: row; align-items: center; gap: 0; /* the two chips touch inside the 3px pad */ width: 64px; /* fixed: 3 + 1 + 28 + 28 + 1 + 3 (D-8) */ height: 28px; padding: 3px; border: 1px solid #ffffff; border-radius: var(--r-pill); } .hero__theme-chip { display: grid; place-items: center; width: 28px; /* 7 + 14 + 7 */ height: 20px; /* 3 + 14 + 3 */ border-radius: var(--r-pill); /* Figma 32 on a 20-tall box -> 9999px */ background: transparent; color: var(--hero-toggle-icon-off); } /* STATE binding (D-10, brief-page.md 4.4): the chip fill and BOTH icon strokes are driven by [aria-pressed] and swap together. Hard-coding "chip A is grey, chip B is transparent" is a P1. The fill is on a real with a real box, not a pseudo-element — an 0x0 ::before that never paints while its state binding reads live is a documented failure on this pipeline (FD-161). */ .hero__theme[aria-pressed="false"] .hero__theme-chip--light, .hero__theme[aria-pressed="true"] .hero__theme-chip--dark { background: var(--hero-toggle-chip); color: var(--hero-toggle-icon-on); } .hero__theme-icon { width: 14px; /* fixed 14x14 on both anchors (D-8) */ height: 14px; fill: none; /* both glyphs are STROKED, not filled */ stroke: currentColor; } /* ---------- bar CTA (3001:303) — desktop only ---------- 188x34, a text button with a 2px bottom rule — NOT a pill (border-radius 0, no background). Figma padding [7,0,7,0] + a 2px INSIDE bottom stroke -> 7px 0 5px + a 2px border: 7 + 20 + 5 + 2 = 34. Writing 7px + the border makes it 36 tall and misaligns the whole 54px bar (D-13). */ .hero__bar-cta { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; /* label -> arrow, 10 on both layers (2.4) */ padding: 7px 0 5px; border-bottom: 2px solid #ffffff; border-radius: 0; color: #ffffff; } .hero__bar-cta-label { font-family: var(--font-body); font-weight: 600; /* the node says 600, not the ramp's descriptive 800 (D-5) */ font-size: var(--text-body); /* D-base 16 */ /* Figma AUTO leading, NOT 100% (D-4): the drawn box is 20 at 16px, and `line-height: 1` here would shrink the button 34 -> 30. Written as the drawn RATIO 20/16 rather than as `normal`, because Chromium's `normal` for Onest resolves 16px to a 21px box — Figma and Blink round the same ~1.29 AUTO metric in opposite directions, and that 1px propagates: it makes the bar 55 instead of 54 and pushes the h1 / lead / CTA down 1px each. MEASURED both ways. */ line-height: 1.25; /* 16 -> 20: 7 + 20 + 5 + 2 = 34 = 3001:303.height */ letter-spacing: -0.03em; /* node -3% */ } /* ---------- En / Ru (3001:306) — desktop bar AND the mobile menu panel ---------- A STATE pair, not two differently-coloured shapes (D-10). js/nav.js keeps every [data-lang-switch] on the page in sync; the muted side is bound to .is-active and is never hard-coded per element (brief-page.md 4.4 — hard-coding it is a P1). */ .hero__lang { display: flex; flex-direction: row; align-items: flex-start; gap: 5px; font-family: var(--font-body); font-weight: 800; font-size: var(--text-btn); /* D-base 20 */ line-height: 1; /* genuinely 100%: `En` measures 20px at 20px (D-4) */ letter-spacing: var(--ls-btn); /* -0.03em */ } .hero__lang-item { color: var(--c-white-30); } /* inactive: #ffffff4d */ .hero__lang-item.is-active { color: #ffffff; } .hero__lang-sep { color: #ffffff; } /* No text-decoration here — the FOOTER `En` carries the underline, not this pair (5.4). */ /* ---------- hamburger (3001:3164) — mobile + pseudo-tablet ---------- */ .hero__burger { display: grid; place-items: center; width: 44px; /* FIXED (D-8): 44 is the tap-target minimum and the mobile clamp would shrink it to 37.5 at 320px */ height: 44px; padding: 0; background: transparent; border: none; color: #ffffff; } .hero__burger-icon { width: 44px; height: 44px; fill: none; stroke: currentColor; /* Figma wraps 3001:3164 in scaleY(-1). D-9 left it off because the export could not say which side of the flip the downloaded file is on — MEASURED and resolved: the exported bars sit at y 12/23/34 inside the 44 box, and the node's own render has them at 10/21/32, so without the flip the glyph renders 2px LOW. With it, a pixel diff against get_screenshot(3001:3158) over the burger box scores 0.000. Bar LENGTHS are unaffected (they are horizontal), so the 25 / 36 / 25 right-aligned identity of CgMenuRight — middle bar longest — is preserved. */ transform: scaleY(-1); } /* ============================================================================ CONTENT — mobile base (375). Pure flow: nothing is absolutely positioned below 1024 except the photo and the scrim. Four siblings, no wrapper (6.1). Flow closes on the frame: 64 + 35 + 248 + 20 + 62 + 26 + 48 + 50 + 80 + 31 = 664 vs a drawn 667; the 3px of line-height rounding lands in the bottom slack because min-height holds the box open. ============================================================================ */ .hero__inner { position: relative; /* containing block for the desktop stat block */ flex: 1 1 auto; /* so `bottom` on the pinned stats measures from the section's own bottom edge, not from short content */ padding-top: var(--hero-pt); /* 35 mobile / 40 desktop, measured from the BAR's bottom */ padding-bottom: var(--hero-pb); /* 31 mobile / 111.81 desktop — 2.1; dropping it shifts every section below by up to 112px */ } .hero__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h1); /* M 55 / D 120 */ line-height: var(--lh-h1); /* M 1.12 / D 1 */ letter-spacing: var(--ls-h1); /* M -1.82% / D -5% */ text-transform: uppercase; /* textCase UPPER — never upper-cased in the source (8.5) */ color: #ffffff; } .hero__lead { margin-top: var(--hero-gap-title); /* 20 mobile / 40 desktop */ font-family: var(--font-body); font-weight: 600; font-size: var(--text-btn); /* M 14 -> D 20: numerically identical to --text-btn, so that ramp is REUSED rather than duplicated (D-5) */ line-height: 1.1; /* node 110% */ letter-spacing: 0; /* node 0% — not the body row's -5% */ color: #ffffff; } /* Two leads, one per layer (D-2). display:none, not visibility, so a screen reader reads exactly one. The hidden one computes 0x0 in the measured band — expected, not a defect. */ .hero__lead--d { display: none; } .hero__lead--m { display: block; } .hero__cta { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; /* label -> arrow, 10 on both layers (2.4) */ width: 100%; /* 335 = full content width; the 35px side padding is inert */ margin-top: var(--hero-gap-lead); /* 26 mobile / 44 desktop */ padding: 15px 35px; /* fixed: [15,35,15,35] at BOTH anchors (2.4) */ border-radius: 0; /* D-14 */ background: #ffffff; color: var(--c-ink-alt); } .hero__cta-label { font-family: var(--font-body); font-weight: 600; /* the node says 600 (D-5) */ font-size: var(--text-btn); /* M 14 / D 20 */ /* Figma AUTO leading (D-4), written as the drawn ratio per band for the same reason as the bar CTA above: `1` gives 42 / 50, and `normal` gives 18 / 25 in Blink where Figma draws 18 / 26. */ line-height: 1.2857; /* 14 -> 18: 15 + 18 + 15 = 48 = 3001:3139.height */ letter-spacing: var(--ls-btn); /* -0.03em */ white-space: nowrap; } /* ---------- stat trio (3001:3142 / 3001:313) ---------- */ .hero__stats { display: flex; flex-direction: row; /* FIX-Audit P1-2 (2026-08-12). Figma draws counterAxisAlignItems: CENTER on 3001:3142, and transcribing it literally broke the numerals' shared baseline everywhere the three items stop being the same height: labels 1 and 3 carry a drawn hard
so they are permanently two lines, while label 2 (3001:3152) collapses to ONE as soon as its column passes ~110px, and `center` then floats a 63-tall item against two 80-tall ones. Measured spreads before the fix: 0.00 at 320/375, 10.78 at 640, 8.39 at 768, 9.59 from 850 to 1023, 0.00 at 1024+ (where the row is absolutely positioned). `flex-start` is a no-op at the drawn anchor — at 375 and 320 all three items measure the same height (79.78 / 76.80), verified — so this changes nothing Figma actually draws and fixes every width in between. */ align-items: flex-start; gap: var(--grid-gap); /* 20, fixed on both layers */ margin-top: var(--hero-gap-cta); /* 50 — mobile + pseudo-tablet only */ } .hero__stat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; /* 3.0 mobile / 3.19 desktop -> ship 3 (2.4) */ flex: 1 1 0; /* three equal columns: (335 - 40) / 3 = 98.33 */ min-width: 0; } .hero__stat-num { font-family: var(--font-display); font-weight: 600; font-size: var(--text-stat-xl); /* M 36 / D 96 */ line-height: var(--lh-stat-xl); /* 1.2 */ letter-spacing: var(--ls-stat-xl); /* 0 */ text-transform: uppercase; color: #ffffff; } .hero__stat-label { width: 100%; font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); /* M 14 / D 16 */ line-height: var(--lh-small); /* 1.2 */ letter-spacing: var(--ls-small); /* -0.03em */ text-transform: none; /* the ramp is marked UPPER page-wide; these labels are sentence case as drawn (D-5b) */ color: #ffffff; white-space: normal; /* wraps to 2 lines on mobile (box 34 = 2 x 16.8) */ } /* Per-layer label copy — item 2 is genuinely different ("Оборот брендов" vs "Суммарный оборот наших брендов"), and items 1 and 3 carry a hard break in the mobile string only. Six real Figma text nodes, so six elements. */ .hero__stat-label--d { display: none; } .hero__stat-label--m { display: block; } /* ============================================================================ PSEUDO-TABLET 768-1023 — INTERPOLATED, nothing is drawn here and no stage measures it. NOTHING SWITCHES AT 768 (6.5): same DOM, same layout as mobile — the hamburger is still the only nav, the desktop control group stays hidden, the stat row stays in flow, and the photo keeps the 51.08% crop. This block therefore carries TOKENS ONLY. MANDATORY: every scoped token above is re-declared here. A section-scoped token missing from exactly this block is how ragazzi-pdp2 shipped a badge 2x too large across the band. ============================================================================ */ @media (min-width: 768px) { .hero { --hero-min-h: clamp(667px, calc(667px + (var(--max-vw) - 768px) * 0.025), 816px); --hero-pt: clamp(35px, calc(35px + (var(--max-vw) - 768px) * 0.025), 40px); --hero-gap-title: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 40px); --hero-gap-lead: clamp(26px, calc(26px + (var(--max-vw) - 768px) * 0.025), 44px); --hero-pb: clamp(31px, calc(31px + (var(--max-vw) - 768px) * 0.025), 111.81px); /* --hero-gap-cta has NO desktop counterpart: above 1024 the stat row is absolutely positioned and nothing consumes it (documented band exception, brief/hero.md 2.4). It is declared here explicitly rather than left to inherit, and it CONTINUES the mobile ramp — giving it a 0.025 ramp would need a D-base that is drawn nowhere, and pinning it flat at 50px would make it jump DOWN from 55.9 at 767. */ --hero-gap-cta: clamp(43px, calc(50px + (var(--max-vw) - 375px) * 0.015), 102px); } /* FIX-Audit (P1-2, 2026-08-12). Across the WHOLE 768-1023 band the three stat numerals lost their common baseline — `$50M` sat 9.6px low (measured spread 8.39 at 768, 9.59 from 850 to 1023, and exactly 0.00 at 320/375 and at 1024+). Mechanism, not transcription: labels 1 and 3 carry the drawn hard
(3001:3147 / 3001:3157) so they are permanently two lines, while label 2 (3001:3152, no break) collapses to ONE line once its column passes ~110px. `align-items: center` — faithful to 3001:3142's counterAxisAlignItems: CENTER — then centres a 63-tall item against two 80-tall ones, and the numerals, which sit at the TOP of each item, stop agreeing. The fix lives on the BASE `.hero__stats` rule, not here: re-measuring after the first attempt showed the same spread at 640 (10.78) — i.e. it starts well inside the mobile band, as soon as label 2 fits one line — so scoping it to 768+ would have left half the defect in place. It is a no-op at the drawn anchor (all three items measure 79.78 at 375 and 76.80 at 320), so nothing Figma actually draws changes. Above 1024 the row is absolutely positioned. */ } /* ============================================================================ DESKTOP 1024+ — the drawn layer. The bar swaps control sets, the leads swap copy, the CTA goes back to content width, and the stat block becomes the section's one absolutely positioned thing. Proportional to --vw-base 1520, capped by --max-vw at 1926. ============================================================================ */ @media (min-width: 1024px) { .hero { --hero-min-h: clamp(550px, calc(816px * (var(--max-vw) / var(--vw-base))), 1031px); --hero-pt: clamp(27px, calc(40px * (var(--max-vw) / var(--vw-base))), 51px); --hero-gap-title: clamp(27px, calc(40px * (var(--max-vw) / var(--vw-base))), 51px); --hero-gap-lead: clamp(30px, calc(44px * (var(--max-vw) / var(--vw-base))), 56px); --hero-pb: clamp(75px, calc(111.81px * (var(--max-vw) / var(--vw-base))), 141px); /* right-group gap, 1024+ ONLY: the element it spaces (3001:293) does not exist below 1024 — the mobile bar has a hamburger instead (documented band exception, 2.4). */ --hero-nav-gap: clamp(40px, calc(60px * (var(--max-vw) / var(--vw-base))), 76px); } /* photo: scaleMode FILL on this layer — centred, no crop offset (3.1) */ .hero__bg { object-position: 50% 50%; } .hero__bar-controls { display: flex; flex-direction: row; align-items: center; gap: var(--hero-nav-gap); /* 60: 64 + 60 + 188 + 60 + 72 = 444 = 3001:293.width */ } .hero__burger { display: none; } /* not drawn on desktop */ /* Left-column caps are non-negotiable: without 61.25% the h1 runs the full 1440 and wraps to 2 lines instead of 3 (240 tall, not 360); without 51.667% the lead runs under the stats. */ .hero__title { max-width: 61.25%; } /* 882 / 1440 */ .hero__lead--d { display: block; } .hero__lead--m { display: none; } .hero__lead--d { max-width: 51.667%; } /* 744 / 1440 */ .hero__cta { width: max-content; } /* 299x56 — content width, NOT stretched */ .hero__cta-label { line-height: 1.3; } /* 20 -> 26: 15 + 26 + 15 = 56 = 3001:310.height (D-4) */ /* THE ONE ABSOLUTELY POSITIONED BLOCK (D-7). The lead's box ends at y=604 while the stat block starts at y=567 — a 37px vertical overlap resolved horizontally (lead 40…784, stats 770…1480). Normal flow cannot express a negative gap and `margin-top: auto` clamps at 0, so any flow-based attempt makes the hero 853 tall instead of 816 and pushes the whole page down 37px. Pinning only this block closes the box on 816 to 0.19px. The CTA stays in flow — it is what carries the bottom padding. `right`/`width` are resolved against .hero__inner's PADDING box (that is what an absolute containing block is), so the gutter is subtracted explicitly: the calc is exactly 49.306% of the 1440 content box at every viewport width, and the right edge sits on the gutter (1480 = 1520 - 40) as drawn. */ .hero__stats { position: absolute; right: var(--gutter); bottom: var(--hero-pb); /* 111.81 above the section bottom */ width: calc((100% - 2 * var(--gutter)) * 0.49306); /* 710 / 1440 */ margin-top: 0; justify-content: space-between; align-items: flex-end; /* Figma alignItems MAX — the three numerals sit on one baseline; stretch/flex-start is visibly wrong */ } /* Item widths are Figma HUGs = max(numeral, the 140-wide label wrapper), measured 140 / 214 / 169; 140 + 214 + 169 = 523, so space-between yields two 93.5 gaps and columns at x = 0 / 233.5 / 541. They are written as percentages of the 710 block rather than left to intrinsic sizing, so the drawn numeral positions hold at every width and cannot be moved by a wider fallback face. This is the D-6 requirement: if the LABEL is allowed to size its column the row becomes 96 / 258 / 169 and space-between moves the `$50m` numeral 44px LEFT of Figma. Capping the label instead would clip `Суммарный оборот наших брендов` mid-word and wrapping it would break the 137.19 block height — so the label overflows its column on purpose, and all three still fit inside the 710 block (233.5 + 258 = 491.5 < 541, 541 + 158 = 699 < 710). */ .hero__stat { flex: 0 0 auto; min-width: 0; } .hero__stat:nth-child(1) { width: 19.718%; } /* 140 / 710 */ .hero__stat:nth-child(2) { width: 30.141%; } /* 214 / 710 */ .hero__stat:nth-child(3) { width: 23.803%; } /* 169 / 710 */ .hero__stat-num { white-space: nowrap; } .hero__stat-label--d { display: block; } .hero__stat-label--m { display: none; } .hero__stat-label--d { white-space: nowrap; /* one line (box 19), overflowing its column BY DESIGN */ overflow: visible; } } /* ============================================================================ MOBILE MENU PANEL — nothing hero-specific is left here. The panel is drawn at 1182:953 and every one of its numbers lives in css/components.css (page-scaffold's), next to the layout, the background and the >=1024 kill-switch. What it borrows from this file, unchanged: .hero__brand + .hero__brand-name and .hero__burger (the drawn panel bar IS this bar), .hero__bar-cta (the drawn panel CTA is the bar's text link with a 2px rule, not the hero's filled 335x48 plate 3001:3139), .hero__theme with its chips, and .hero__lang. The two rules that used to sit here are gone with what they styled: .mobile-menu__close-icon (the ✕ — the panel draws the hamburger, 1182:960) and .mobile-menu__cta { margin-top: 0 } (it no longer carries .hero__cta). ============================================================================ */