/* =================================================================== GORILLO — LEGACY BRIDGE Loaded LAST, only on the five pages that still render their body content with the Webflow export (coaching + the four legal pages). Those pages now load three stylesheets that disagree with each other: 1. ches-stellar-site-…webflow.shared.css (Webflow export) 2. upgrade.css (older refinement layer) 3. gorillo-2026.css (the new design system) gorillo-2026.css only styles `g-`-prefixed classes, so it cannot reach the legacy markup, and the Webflow sheet still paints that markup with its own backgrounds and gold-on-black type. This file is the only place where the two are reconciled. Every rule below exists for a reason that is written above it. Nothing here touches the macro-calculator (see the last block) or any page JS. =================================================================== */ /* ------------------------------------------------------------------- 1. BACKGROUND — one surface for the whole page ------------------------------------------------------------------- `body.g-body` already paints the new near-black (#060607), but the Webflow sheet gives each legal page's text container its own solid background (`.text-block-2` #0a0101, `.text-block-3/-4` #000, `.text-block-18` #000). Those blocks are full-bleed, so the page showed a second, slightly different black on top of the new one — visible as a seam against the new header and footer. Make them transparent and let the body colour through. */ .text-block-2, .text-block-3, .text-block-4, .text-block-18{ background-color:transparent; } /* ------------------------------------------------------------------- 2. TYPE COLOUR — gold body copy becomes the new text colour ------------------------------------------------------------------- The same Webflow rules set `color:gold` (and `var(--mid-yellow)` on retourbeleid) on the *whole* legal text block, so every paragraph of the terms/privacy/disclaimer pages was gold. The new system uses gold as an accent only. Body copy goes to --g-text; the page heading keeps the gold accent so the hierarchy survives. */ .text-block-2, .text-block-3, .text-block-4, .text-block-18{ color:var(--g-text); font-family:var(--g-body); font-size:1rem; line-height:1.8; } .text-block-2 strong, .text-block-3 strong, .text-block-4 strong, .text-block-18 strong, .text-block-2 b, .text-block-3 b, .text-block-4 b, .text-block-18 b{ color:#fff; } /* inline links inside the legal copy: gold, underlined, still obvious */ .text-block-2 a, .text-block-3 a, .text-block-4 a, .text-block-18 a{ color:var(--g-gold); text-decoration:underline; text-underline-offset:2px; } /* ------------------------------------------------------------------- 3. MEASURE — the legal copy was edge-to-edge ------------------------------------------------------------------- These four blocks sit directly in with no Webflow container, so the text ran from viewport edge to viewport edge. The new system centres content in `.g-wrap` (max 1180px + a gutter); mirror that here so the legal pages line up with the new header and footer. A narrower measure than --g-wrap because this is long-form prose. */ .text-block-2, .text-block-3, .text-block-4, .text-block-18{ width:100%; max-width:820px; margin-inline:auto; padding:clamp(40px,6vw,72px) var(--g-gut) clamp(56px,7vw,88px); box-sizing:border-box; } /* ------------------------------------------------------------------- 4. PAGE HEADING on the legal pages ------------------------------------------------------------------- `.paginakop` only ever got the browser/Webflow default

(38px, bold, Arial). Give it the new display face so it reads as the same brand as the header above it. / .paginakop{ font-family:var(--g-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.05; font-size:clamp(1.9rem,4.2vw,3rem); color:var(--g-gold); margin:0 0 24px; } / ------------------------------------------------------------------- 5. THE LEADING
STACK ------------------------------------------------------------------- The old Webflow navbar was `position:fixed` (`.navbar-logo-left-container-product.shadow-three`), so each legal page opened with 6–10 hard
s purely to push the first line out from under it. The new `.g-head` is `position:sticky` and therefore in the flow, so those
s are now pure dead space (roughly a screen height on mobile). The markup is body content and stays untouched — this collapses them in CSS instead. `:has()` selects only the
s that come BEFORE the page heading, so the
s that actually separate paragraphs are left alone. Browsers without `:has()` simply keep the old whitespace: degraded, never broken. / .text-block-2 br:has(~ .paginakop), .text-block-3 br:has(~ .paginakop), .text-block-4 br:has(~ .paginakop), .text-block-18 br:has(~ .paginakop){ display:none; } / ------------------------------------------------------------------- 6. COACHING PAGE — legacy wrapper vs. the new footer ------------------------------------------------------------------- `.page-wrapper` is `overflow:hidden` in the Webflow sheet. The new header and footer are deliberately mounted OUTSIDE that wrapper (a clipping ancestor kills `position:sticky` on `.g-head`), so nothing needs to change there. What does bleed is `.main-wrapper`'s colour and the fixed-navbar spacing the banner no longer needs — both are fine as-is. The one leftover: Webflow's own footer styling hooks (`.footer-subscribe-product`, `.footer-wrapper-three`, …) were deleted with the markup, so the only rules that can still reach the new chrome are the Webflow element resets. Neutralise the ones that actually land. / / Webflow resets `img{display:inline-block;vertical-align:middle}` and `ul,ol{padding-left:40px}` / `h1..h6{margin-bottom:10px;font-weight:bold}`. gorillo-2026.css wins on specificity for `.g-page img` and `.g-foot ul/h4`, but the payment-logo row and the social icons have no such rule, so pin them explicitly rather than relying on inheritance luck. / .g-foot .g-pay img, .g-foot .g-social svg, .g-head__logo img{ display:block; vertical-align:baseline; } .g-foot ul, .g-foot ol{ padding-left:0; margin-bottom:0; } .g-foot h4{ font-weight:600; } / `a{background-color:#0000}` and upgrade.css's `a{transition:color .2s}` are harmless. But upgrade.css forces `.button, .button-primary-3, .submit-button, .checkout-button` to gold with !important; none of those classes exist in the new chrome, so nothing to undo there. The one class that IS shared is `.container` / `.w-container` (max-width 1120 !important in upgrade.css) — the new chrome uses `.g-wrap`, so it never collides. / / Webflow's `button{overflow:visible;text-transform:none}` plus `button{color:inherit;font:inherit}` reach the new burger button. `.g-burger` sets its own box, but not its font — harmless, except that `font:inherit` resets line-height and could make the three bars drift. Lock the flex box so the bars stay centred whatever the font is. / .g-head .g-burger{ line-height:0; font-size:0; } / ------------------------------------------------------------------- 7. TOPBAR / HEADER / FOOTER stacking on legacy pages ------------------------------------------------------------------- Webflow gives `.navbar-logo-left-container-product.shadow-three` z-index 999 and several sections z-index 5. That markup is gone, but `.banner-section` layers and Webflow IX2 opacity animations still create stacking contexts on the coaching page. `.g-head` ships with z-index 900, which is below Webflow's 999 — raise it here so the sticky header can never be overlapped by a legacy section. / .g-head{ z-index:1000; } / ------------------------------------------------------------------- 8. HANDS OFF: THE MACRO-CALCULATOR ------------------------------------------------------------------- Everything inside #macro-app (coaching.html) is styled by an inline