/* ============================================ RENATUS SPACING TOKENS Based on Figma Design System 2026 ============================================ */ :root { /* Base spacing scale */ --spacing-0: 0; --spacing-1: 0.25rem; /* 4px */ --spacing-2: 0.5rem; /* 8px */ --spacing-3: 0.75rem; /* 12px */ --spacing-4: 1rem; /* 16px */ --spacing-5: 1.25rem; /* 20px */ --spacing-6: 1.5rem; /* 24px */ --spacing-8: 2rem; /* 32px */ --spacing-10: 2.5rem; /* 40px */ --spacing-12: 3rem; /* 48px */ --spacing-16: 4rem; /* 64px */ --spacing-20: 5rem; /* 80px */ /* Shorthand aliases. Naming convention: --space-N = N × 4px (so --space-10 = 40px). Half-step aliases (--space-1-5, --space-4-5, --space-7-5) carry a hyphenated decimal because CSS custom-property names can't contain dots. */ --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-4-5: 18px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-7-5: 30px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-12-5: 50px; --space-16: 64px; --space-20: 80px; /* Semantic spacing aliases */ --spacing-2xs: 0.125rem; /* 2px */ --spacing-xs: var(--spacing-1); --spacing-sm: var(--spacing-2); --spacing-md: var(--spacing-4); --spacing-lg: var(--spacing-6); --spacing-xl: var(--spacing-8); --spacing-3xl: var(--spacing-12); /* Standard report container padding — every painted report container (.mi-section card, and the capital cards that mirror it) uses this so cards and sections share one rhythm. 28px top/bottom, 35px left/right. Single source of truth — tune here. Christine 29 May 2026. */ --report-container-pad-y: var(--space-7); /* 28px */ --report-container-pad-x: 35px; /* Shared component spacing */ --tab-padding-x: 20px; --pill-container-padding: 4px; --pill-container-gap: 2px; --pill-tab-padding-x: 28px; --pill-tab-padding-y: 0; /* Shared layout widths */ --content-max-width: 1425px; /* --landing-container is a value-alias of --content-max-width kept for legacy consumers; new code should use --content-max-width. */ --landing-container: var(--content-max-width); --landing-container-padding: 60px; /* Used by .mw-page (work.css) and any other top-level page wrapper that needs breathing space below the last content row before the footer. Single source of truth so the value can be tuned in one place. */ --page-padding-bottom: 60px; /* ─────────────────────────────────────────────────────────── LISTING-HERO TOP CLEARANCE — single source of truth. Used by every page that renders a .listing-hero panel: /free, /explore, /work, /work/projects, /work/library, and /program. All consumers share one selector + one token, so they share the same vertical rhythm below the floating navbar pill. Tune here, and every consumer updates. Desktop is tighter than the raw --topbar-height because the pill itself is shorter than the token (see navbar.css L25 — pill height = topbar - 12px). */ /* ─────────────────────────────────────────────────────────── CANONICAL PAGE-TOP → HEADING GAP. Single source of truth for the vertical distance between the very top of the page (the navbar overlays the page from y=0) and the first heading on EVERY top-level page — /free, /explore, /work, /pricing, /company, /legal, /products, /partner, /support, etc. Tune here and every consumer updates together — Christine 5 May 2026: "all of these pages should be tokenized and have the exact same margin gap from the navbar." Composed from: --listing-hero-pad-top → .listing-hero-panel inner pad (panel sits at y=0 under the floating navbar pill, so panel inner padding-top = total gap) .page-section-hero → padding-top reads this token directly (see base.css) ⚠️ DO NOT REDUCE BELOW 80px. Pill clearance geometry: outer wrapper padding-top = 6px (navbar.css L13) pill height = --topbar-height - 12px (= 60px) pill BOTTOM edge = 6 + 60 = 66px Heading sits at y = --page-hero-pad-top from page top. Required: pad-top >= 66 + breathing gap (we use ≥14px). 100px → 34px clearance below pill bottom. ✓ Earlier values that LOOKED right but were actually clipping: 40px (var(--space-10)) → -26px clipped 56px (calc(--topbar-height - --space-4)) → -10px clipped 80px (calc(--topbar-height + --space-2)) → 14px clearance but Christine wanted 100px on 5 May 2026. */ --page-hero-pad-top: 80px; --page-hero-pad-top-mobile: 80px; /* Listing-hero (panel-based pages: /free, /explore, /work, kits, programs) — re-exported from the canonical token so existing selectors keep working. Don't fork these values; edit --page-hero-pad-top above. */ --listing-hero-pad-top: var(--page-hero-pad-top); --listing-hero-pad-top-mobile: var(--page-hero-pad-top-mobile); /* ─────────────────────────────────────────────────────────── PAGE CONTENT GUTTER — horizontal inset that aligns auxiliary blocks (search bar, tabs, etc.) with the title TEXT inside .listing-hero-panel on /free and /explore. Composed of the panel's outer margin (--space-10 = 40px) PLUS its inner padding (--space-8 = 32px) so anything that uses this token sits flush with the heading copy. Mobile drops to 0 so the page-level .mw-page 24px gutter is the single horizontal inset on phones — set per breakpoint by the consumer (see free.css L160-167 + the @media block near L2090). Add new desktop/mobile pairs here when other pages need the same flush-to-title behaviour. */ --page-gutter-x: calc(var(--space-10) + var(--space-8)); /* 72px */ --page-gutter-x-mobile: 0; /* 0 — relies on .mw-page */ /* ============================================ SEMANTIC SPACING ALIASES Maps t-shirt sizes to spacing scale values. ============================================ */ --space-xs: var(--spacing-xs); /* 4px */ --space-sm: var(--spacing-sm); /* 8px */ --space-md: var(--spacing-3); /* 12px */ --space-lg: var(--spacing-md); /* 16px */ --space-xl: var(--spacing-lg); /* 24px */ --space-2xl: var(--spacing-xl); /* 32px */ --space-3xl: var(--spacing-3xl); /* 48px */ --space-4xl: var(--spacing-16); /* 64px */ /* ============================================ PRICING PAGE LAYOUT TOKENS ============================================ */ --pricing-card-width: 323px; --pricing-card-container: 1039px; --pricing-cta-width: 218px; --pricing-cta-height: 46px; --pricing-input-width: 253px; --pricing-card-gap: 35px; --pricing-card-padding-y: 27px; --pricing-card-internal-gap: 5px; --pricing-spacer-height-lg: 80px; --pricing-spacer-height-sm: 39px; --pricing-sub-card-min-height: 560px; --pricing-feature-width: 250px; --pricing-cta-wrap-padding: 22px; --pricing-stripe-badge-height: 120px; }