/* ============================================================================================ css/sections/cta-footer.css — section 11 / 11 (the LAST section) desktop 3001:231 (1520 x 693) · mobile 3001:4055 (335 x 808) SCOPE: only .cta-footer / .cta-form-card* / .lead-form* / .page-footer* / .subscribe* rules. No global selector, no :root, no template stylesheet — the scaffold owns all of that. Section-scoped tokens live on .cta-footer (NOT :root: the lock owns :root), declared in ALL THREE bands. Read them off `.cta-footer`, not documentElement. Mobile-first: base = 375. @media 768 = the CARD's 2-up. @media 1024 = the FOOTER's grid. Two different breakpoints on purpose (slice D-13): the card is text-beside-form with no image so 768 is safe, while the footer's 23.194444% subscribe track is only 169px at 768 against a 164px minimum content width — so the footer keeps the 3-column mobile grid through 768-1023 and switches at 1024. ============================================================================================= */ /* -------------------------------------------------------------------------------------------- SCOPED TOKENS — MOBILE band 0-767 (slice 11.4) clamp(M-min, calc(M-base + (max-vw - 375px) * 0.015), M-max) Eight tokens are deliberately NOT fluid: every one is drawn at the SAME value on both layers, exactly like the page's --grid-gap ("20 on BOTH layers — fixed, do not clamp"). -------------------------------------------------------------------------------------------- */ .cta-footer { --text-cf-lead: clamp(12px, calc(14px + (var(--max-vw) - 375px) * 0.015), 29px); --text-cf-wordmark: clamp(12px, calc(14.559px + (var(--max-vw) - 375px) * 0.015), 30px); --text-cf-sub: clamp(14px, calc(16px + (var(--max-vw) - 375px) * 0.015), 33px); --cf-section-mt: clamp(43px, calc(50px + (var(--max-vw) - 375px) * 0.015), 102px); --cf-card-py: clamp(17px, calc(20px + (var(--max-vw) - 375px) * 0.015), 41px); --cf-card-px: clamp(17px, calc(20px + (var(--max-vw) - 375px) * 0.015), 41px); --cf-card-gap: clamp(26px, calc(30px + (var(--max-vw) - 375px) * 0.015), 61px); --cf-intro-gap: clamp(17px, calc(20px + (var(--max-vw) - 375px) * 0.015), 41px); --cf-form-gap: clamp(21px, calc(25px + (var(--max-vw) - 375px) * 0.015), 51px); --cf-field-gap: clamp(13px, calc(15px + (var(--max-vw) - 375px) * 0.015), 31px); --cf-input-pb: clamp(8px, calc(9px + (var(--max-vw) - 375px) * 0.015), 18px); --cf-submit-legal-gap: clamp(9px, calc(10px + (var(--max-vw) - 375px) * 0.015), 20px); --cf-footer-py: clamp(17px, calc(20px + (var(--max-vw) - 375px) * 0.015), 41px); --cf-footer-gap: clamp(34px, calc(40px + (var(--max-vw) - 375px) * 0.015), 82px); --cf-brand-h: clamp(34px, calc(40px + (var(--max-vw) - 375px) * 0.015), 82px); --cf-mark-h: clamp(34px, calc(40px + (var(--max-vw) - 375px) * 0.015), 82px); --cf-mark-gap: clamp(6px, calc(6.740px + (var(--max-vw) - 375px) * 0.015), 14px); --cf-copy-w: clamp(105px, calc(123px + (var(--max-vw) - 375px) * 0.015), 252px); /* constants — identical on BOTH layers */ --cf-link-gap: 5px; --cf-sub-h: 34px; --cf-sub-pb: 8px; --cf-rule-w: 2px; --cf-btn-py: 15px; --cf-btn-px: 35px; --cf-inline-gap: 10px; --cf-arrow: 14px; --cf-field-slack: 5px; /* the real 5px below each MOBILE underline (slice D-16) */ } /* -------------------------------------------------------------------------------------------- SCOPED TOKENS — PSEUDO-TABLET 768-1023. MANDATORY: nothing is drawn here, and a token declared in only two bands silently inherits the wrong one across the third (ragazzi-pdp2 shipped a badge 2x too large because 2 of 51 scoped tokens were missing from this block). clamp(M-base, calc(M-base + (max-vw - 768px) * 0.025), D-base) -------------------------------------------------------------------------------------------- */ @media (min-width: 768px) { .cta-footer { --text-cf-lead: clamp(14px, calc(14px + (var(--max-vw) - 768px) * 0.025), 20px); --text-cf-wordmark: clamp(14.559px, calc(14.559px + (var(--max-vw) - 768px) * 0.025), 21.6px); --text-cf-sub: 16px; /* M-base === D-base: nothing to interpolate */ --cf-section-mt: clamp(50px, calc(50px + (var(--max-vw) - 768px) * 0.025), 101.3px); --cf-card-py: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 80px); --cf-card-px: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 30px); --cf-card-gap: 30px; /* only ever READ below 768 (slice note 3) */ --cf-intro-gap: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 83px); --cf-form-gap: clamp(25px, calc(25px + (var(--max-vw) - 768px) * 0.025), 50px); --cf-field-gap: clamp(15px, calc(15px + (var(--max-vw) - 768px) * 0.025), 36px); --cf-input-pb: clamp(9px, calc(9px + (var(--max-vw) - 768px) * 0.025), 14px); --cf-submit-legal-gap: clamp(10px, calc(10px + (var(--max-vw) - 768px) * 0.025), 20px); --cf-footer-py: clamp(20px, calc(20px + (var(--max-vw) - 768px) * 0.025), 25px); --cf-footer-gap: 40px; /* M-base === D-base */ --cf-brand-h: clamp(40px, calc(40px + (var(--max-vw) - 768px) * 0.025), 120px); --cf-mark-h: clamp(40px, calc(40px + (var(--max-vw) - 768px) * 0.025), 59.344px); --cf-mark-gap: clamp(6.740px, calc(6.740px + (var(--max-vw) - 768px) * 0.025), 10px); --cf-copy-w: clamp(123px, calc(123px + (var(--max-vw) - 768px) * 0.025), 276px); --cf-link-gap: 5px; --cf-sub-h: 34px; --cf-sub-pb: 8px; --cf-rule-w: 2px; --cf-btn-py: 15px; --cf-btn-px: 35px; --cf-inline-gap: 10px; --cf-arrow: 14px; --cf-field-slack: 5px; } } /* -------------------------------------------------------------------------------------------- SCOPED TOKENS — DESKTOP 1024+ clamp(D-min, calc(D-base * (max-vw / vw-base)), D-max) -------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) { .cta-footer { --text-cf-lead: clamp(13px, calc(20px * (var(--max-vw) / var(--vw-base))), 25px); --text-cf-wordmark: clamp(15px, calc(21.6px * (var(--max-vw) / var(--vw-base))), 27px); --text-cf-sub: clamp(11px, calc(16px * (var(--max-vw) / var(--vw-base))), 20px); --cf-section-mt: clamp(68px, calc(101.3px * (var(--max-vw) / var(--vw-base))), 128px); --cf-card-py: clamp(54px, calc(80px * (var(--max-vw) / var(--vw-base))), 101px); --cf-card-px: clamp(20px, calc(30px * (var(--max-vw) / var(--vw-base))), 38px); --cf-card-gap: clamp(20px, calc(30px * (var(--max-vw) / var(--vw-base))), 38px); --cf-intro-gap: clamp(56px, calc(83px * (var(--max-vw) / var(--vw-base))), 105px); --cf-form-gap: clamp(34px, calc(50px * (var(--max-vw) / var(--vw-base))), 63px); --cf-field-gap: clamp(24px, calc(36px * (var(--max-vw) / var(--vw-base))), 45px); --cf-input-pb: clamp(9px, calc(14px * (var(--max-vw) / var(--vw-base))), 18px); --cf-submit-legal-gap: clamp(13px, calc(20px * (var(--max-vw) / var(--vw-base))), 25px); --cf-footer-py: clamp(17px, calc(25px * (var(--max-vw) / var(--vw-base))), 32px); --cf-footer-gap: clamp(27px, calc(40px * (var(--max-vw) / var(--vw-base))), 51px); --cf-brand-h: clamp(81px, calc(120px * (var(--max-vw) / var(--vw-base))), 152px); --cf-mark-h: clamp(40px, calc(59.344px * (var(--max-vw) / var(--vw-base))), 75px); --cf-mark-gap: clamp(7px, calc(10px * (var(--max-vw) / var(--vw-base))), 13px); --cf-copy-w: clamp(186px, calc(276px * (var(--max-vw) / var(--vw-base))), 349px); --cf-link-gap: 5px; --cf-sub-h: 34px; --cf-sub-pb: 8px; --cf-rule-w: 2px; --cf-btn-py: 15px; --cf-btn-px: 35px; --cf-inline-gap: 10px; --cf-arrow: 14px; --cf-field-slack: 0px; /* desktop's 36 is a hug: 20 + 14 + 2, no slack (slice D-16) */ } } /* ============================================================================================ SECTION SHELL — 3001:231 / 3001:4055 Vertical auto-layout, gap 20, padding [0,0,20,0] — the 20 gap AND the 20 bottom padding are identical on both layers, so both are the page's --grid-gap, not new tokens. Pattern A: NO fill on the frame, both children inset to the content box -> no bleed here. The mobile padding-left: 1 is designer drift and is DROPPED (brief-page.md 1.3 / slice D-10). ============================================================================================= */ .cta-footer { display: flex; flex-direction: column; gap: var(--grid-gap); padding-block-end: var(--grid-gap); /* LAST section on the page: its bottom edge IS the 10011 frame edge (9318 + 693 = 10011). */ margin-block-end: 0; } /* faq -> cta-footer is a drawn 101.30, one of the five non-120 desktop boundaries, and THIS section owns it (brief-page.md 4.5 assigns each exception to the lower slice; if faq set it too the page would gain 101px of drift and the 10011 total would stop closing). Same single property as base.css `section + section`, so this REPLACES the default rather than adding to it. Mobile is untouched: the drawn mobile gap is 50 = --section-gap already. */ @media (min-width: 1024px) { .cta-footer { margin-block-start: var(--cf-section-mt); } } /* ============================================================================================ A. THE DARK LEAD-CAPTURE CARD — 3001:232 / 3001:4056 ============================================================================================= */ .cta-form-card { background: var(--c-ink); /* #232323 */ padding-block: var(--cf-card-py); /* 80 D / 20 M */ padding-inline: var(--cf-card-px); /* 30 D / 20 M */ border-radius: var(--r-flat); /* 0 — nothing on this page has a radius */ } /* The global focus ring is --c-ink, which is invisible on this card's own #232323 surface. Only the ring's COLOUR changes; the 2px width and 2px offset stay the page's. */ .cta-form-card :focus-visible { outline-color: var(--c-bg); } /* 3001:233 / 3001:4057 — a COLUMN below 768, the drawn 2-up from 768 (see the 768 block). */ .cta-form-card__inner { display: flex; flex-direction: column; gap: var(--cf-card-gap); /* 30 mobile */ } /* 3001:234 / 3001:4058. Declared gap 40 on desktop is DEAD under SPACE_BETWEEN — the effective gap is 83 (275 - 192). Below 768 the column is a real 20px gap. */ .cta-form-card__intro { display: flex; flex-direction: column; gap: var(--cf-intro-gap); min-width: 0; /* no min-content floor once this becomes a flex column */ } /* 3001:236 / 3001:4059. Reuses .t-h2, whose --fw-h2 / --lh-h2 / --ls-h2 already switch at 1024 (600/0.88/-0.04em mobile -> 700/1/-0.0625em desktop) — exactly what this node is drawn as. ONLY the colour is overridden: WHITE on both layers, because this heading sits on the dark card. --c-heading / --c-ink-alt here would be a gate fill delta (slice 5.2, D-19). */ .cta-form-card__title { color: var(--c-bg); } /* 3001:238 / 3001:4061 — Onest 600, 20 D / 14 M, lh 120%, ls -3%. No page ramp fits: --text-body-alt has the metrics but D-base 16, --text-body-lg has D-base 20 but 115%/-5% with M-base 16 -> scoped --text-cf-lead (slice 5.3, D-19). */ .cta-form-card__lead { font-family: var(--font-body); font-weight: 600; font-size: var(--text-cf-lead); line-height: 1.2; letter-spacing: -0.03em; color: var(--c-bg); } /* ============================================================================================ THE LEAD FORM — 3001:239 / 3001:4062 ============================================================================================= */ .lead-form { display: flex; flex-direction: column; gap: var(--cf-form-gap); /* 50 D / 25 M */ min-width: 0; } .lead-form__fields { /* 3001:240 / 3001:4063 */ display: flex; flex-direction: column; gap: var(--cf-field-gap); /* 36 D / 15 M */ } /* A field is a LABEL-LESS underline input: one 60%-white placeholder run + 16/11px of air + a 2px white rule. The `Line 17` nodes are `line` type with height 0 and a CENTER stroke painted ABOVE their own y, so they occupy ZERO Figma layout height — a CSS border-bottom ADDS 2px, so the 2 is SUBTRACTED from the gap: 16-2 = 14 D, 11-2 = 9 M (slice D-3). The 5px --cf-field-slack is the real empty space below each MOBILE rule (fixed h-[34px] boxes with justifyContent: MIN and content of 18+11+0 = 29). Desktop's 36 is a hug -> 0. */ .lead-form__field { display: block; padding-bottom: var(--cf-field-slack); } .lead-form__input { display: block; width: 100%; background: none; border: 0; border-radius: var(--r-flat); border-bottom: var(--cf-rule-w) solid var(--c-bg); /* the 2px Line 17 */ padding: 0 0 var(--cf-input-pb); /* 14 D / 9 M */ font-family: var(--font-body); font-weight: 600; font-size: var(--text-body); /* M 14 / D 16 — the exact drawn ramp */ line-height: normal; /* Figma AUTO, NOT 100% (slice D-2) */ letter-spacing: -0.03em; color: var(--c-bg); /* typed text (BA-2) */ } /* #ffffff99. `opacity: 1` is not decoration: Firefox applies a default placeholder opacity that would silently darken rgba(255,255,255,0.6) to about 0.32. */ .lead-form__input::placeholder { color: var(--c-white-60); opacity: 1; } .lead-form__foot { /* 3001:253 / 3001:4076 */ display: flex; flex-direction: column; gap: var(--cf-submit-legal-gap); /* 20 D / 10 M */ align-items: stretch; } /* 3001:254 / 3001:4077 — white surface, radius 0, padding [15,35,15,35] on BOTH layers. SPACE_BETWEEN with an inert declared gap of 10. */ .lead-form__submit { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--cf-inline-gap); padding-block: var(--cf-btn-py); /* 15 */ padding-inline: var(--cf-btn-px); /* 35 */ background: var(--c-bg); border: 0; border-radius: var(--r-flat); color: var(--c-ink-alt); /* #252627 — label AND arrow; NOT the card's #232323 */ text-align: left; cursor: pointer; } /* Reuses .t-btn's ramp (M 14 / D 20) and its lh `normal` + ls -3%, which match the node exactly. ONE override: the weight is 600 here, not the token row's 800 (slice D-19). */ .lead-form__submit-label { font-weight: 600; } /* 3001:257 / 3001:4080. Reuses --text-micro's ramp (M 12 / D 14 — exact). TWO overrides: lh 120% (the token row says 100%) and NO text-transform (the token row says UPPER; this node carries no textCase at all, so upper-casing it would be a visible defect AND a gate textTransform delta). Full-opacity white, not 60%. */ .lead-form__legal { font-family: var(--font-body); font-weight: 400; font-size: var(--text-micro); line-height: 1.2; letter-spacing: 0em; color: var(--c-bg); } /* BA-5: Figma marks neither fragment as a link — this underline is the minimum affordance and matches the page's only existing link decoration (the active `En`). */ .lead-form__legal-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* BA-4. `hidden` -> display:none -> no box and no flex gap, so the card measures 483 / 434 and the gate sees nothing new. No colour is invented: the page has no accent, no green, no red. */ .lead-form__status { font-family: var(--font-body); font-weight: 400; font-size: var(--text-micro); line-height: 1.2; color: var(--c-bg); } .lead-form__status[hidden] { display: none; } /* ============================================================================================ B. THE PAGE FOOTER — 3001:258 / 3001:4081 ONE grid, two placements, six flat items. The copyright is LAST in the DOM (the mobile order, and the better reading order) and desktop lifts it into the meta column with grid-template-areas — no `order:`, no duplicated markup. ============================================================================================= */ .page-footer { display: grid; grid-template-columns: repeat(3, 1fr); /* (335 - 20 - 20) / 3 = 98.33 vs drawn 98/99/98 */ column-gap: var(--grid-gap); /* 20 */ row-gap: var(--cf-footer-gap); /* 40 */ align-content: start; padding-block: var(--cf-footer-py); /* 25 D / 20 M */ grid-template-areas: "brand brand brand" "social nav lang" "sub sub sub" "copy copy copy"; /* --cf-brand-h is LOAD-BEARING on desktop (slice D-11): 3001:260 is a FIXED 120-tall box holding a 59.344 lockup, and 120 > the meta column's 113, so IT sets footer = 25+120+25 = 170 and section = 483+20+170+20 = 693. Letting the row hug gives 163 / 686 — a 7px shortfall that also un-closes the 10011 page total. The 2 * --cf-footer-py is REQUIRED, not decoration: `box-sizing: border-box` is global, so a bare `min-height: 120` is measured against the BORDER box (113 + 50 = 163 > 120) and is therefore INERT — it would have shipped exactly the 7px shortfall D-11 warns about. With align-content: start the 7px of slack sits at the bottom instead of being distributed into the two auto row tracks, which would push the copyright from y=97 to about 100.5. */ min-height: calc(var(--cf-brand-h) + var(--cf-footer-py) * 2); } /* `display: flex` is load-bearing, not tidiness: as a block container the box would give the inline-flex lockup a LINE BOX, and the strut's descender made it 63.73 tall against a drawn 59.344 (measured). A flex container blockifies the item and the box hugs the lockup exactly. */ .page-footer__brand-box { grid-area: brand; align-self: start; display: flex; align-items: flex-start; } /* 3001:261 / 3001:4083 — glyph + 2-line wordmark, gap 10 D / 6.740384 M. The mobile lockup is the desktop one at exactly 0.674038 (proved to five places on all four measurements). */ .page-footer__brand { display: inline-flex; align-items: center; gap: var(--cf-mark-gap); color: var(--c-ink); } /* 3001:262 / 3001:4084. Shared #icon-sirka symbol, currentColor. Height is reserved and the aspect ratio pinned so the mark cannot cause CLS or stretch. */ .page-footer__mark { height: var(--cf-mark-h); /* 59.344 D / 40 M */ width: auto; aspect-ratio: 34 / 59.3438; /* 0.572926 */ color: var(--c-ink); /* #232323 — THIS instance's ink, not #252627 */ flex: 0 0 auto; } /* 3001:265 / 3001:4087 — 21.6 D / 14.559 M, lh 100%, ls -4%, UPPER, 2 lines, ONE nbsp. --text-logo is the HEADER lockup (one line, TWO nbsp, 22/22.06, absolute 20px leading, ls -3.64%) and does not cover this — mobile would be 34% off (slice D-6, D-19). */ .page-footer__wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-cf-wordmark); line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; color: var(--c-ink); } /* 3001:267 / 3001:4091 — vertical, gap 5, hugs its content (94 D / 76 M). */ .page-footer__social { grid-area: social; align-self: start; justify-self: start; display: flex; flex-direction: column; gap: var(--cf-link-gap); } /* --text-nav does NOT cover the socials: they are 20 D (not 18) at ls -3% D / -2% M, and the line-height MODE flips across layers (AUTO desktop, real 100% mobile). --text-body-lg's ramp is exactly M 16 / D 20, so the ramp is REUSED and the three non-size properties are overridden locally — a scoped token with an identical fingerprint would be a duplicate ramp (FD-146). lh/ls are bound to the 1024 band below (slice 11.2, D-19). */ .page-footer__social-link { font-family: var(--font-body); font-weight: 800; font-size: var(--text-body-lg); line-height: 1; /* MOBILE: real 100% (16 / 16) */ letter-spacing: -0.02em; /* MOBILE: -2% */ color: var(--c-ink); white-space: nowrap; } /* The