/* AUTO-GENERATED by scripts/build-design-engine.mjs — do not edit. SHARED BASE ONLY. Each design's own CSS lives in design-.css and is loaded by MainLayout only for a club actually on that design. */ /* ===== designs.css ===== */ /* ───────────────────────────────────────────────────────────────────────────── DESIGN LAYER — full-layout variants for the multi-club product. Selected by data-design on (set from CLUB.theme.design in MainLayout). design "a" = Ashippun's flagship layout → NO rules here → byte-identical. Every rule below is scoped under body[data-design="…"], so it can never touch the default design. This restructures composition (nav emphasis, hero layout, section rhythm, cards) on top of the SHARED markup + theme tokens — a genuinely different look per club, safely, without forking the page templates. ───────────────────────────────────────────────────────────────────────────── */ /* ─── Mobile safety net (every template design) ──────────────────────────────── Two guarantees on narrow screens, whatever a design's inner layout does: (1) the BODY never scrolls sideways — overflow-x:clip contains any stray-wide child (clip, NOT hidden, so position:sticky rails keep working); (2) long words / club names in headings wrap instead of overflowing the viewport. */ body[data-design] { overflow-x: clip; } body[data-design] :where(h1, h2, h3, h4) { overflow-wrap: break-word; } /* =========================================================================== DESIGN B — "Centered Editorial" Ashippun's home hero is a left copy column + right app card. Design B recomposes it into a single centered, magazine-style hero, centers page intros site-wide, and gives sections a calmer, more editorial rhythm. =========================================================================== */ /* ── Header: centered, quieter ─────────────────────────────────────────────── */ body[data-design="b"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="b"] .public-nav { justify-content: center; } body[data-design="b"] .brand-title { letter-spacing: 0.01em; } /* ── Hero: single centered column (hide the side app card) ─────────────────── */ body[data-design="b"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 0; } body[data-design="b"] .public-app-promo { display: none; } body[data-design="b"] .public-banner-copy { max-width: 820px; margin: 0 auto; text-align: center; } body[data-design="b"] .public-title { font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; } body[data-design="b"] .public-copy { margin-left: auto; margin-right: auto; max-width: 60ch; font-size: 1.2rem; } body[data-design="b"] .public-actions { justify-content: center; } body[data-design="b"] .public-stat-row { justify-content: center; gap: 40px; border-top: 1px solid var(--public-line); padding-top: 26px; margin-top: 34px; } body[data-design="b"] .public-stat { text-align: center; } /* ── Page intros: centered on every inner page ─────────────────────────────── */ body[data-design="b"] .public-page-header { text-align: center; } body[data-design="b"] .public-page-header .public-eyebrow, body[data-design="b"] .public-page-header h1, body[data-design="b"] .public-page-header p { margin-left: auto; margin-right: auto; } body[data-design="b"] .public-page-header p { max-width: 62ch; } /* ── Section rhythm: airier, editorial ─────────────────────────────────────── */ body[data-design="b"] .public-section { padding-top: 72px; padding-bottom: 72px; } body[data-design="b"] .public-eyebrow { letter-spacing: 0.16em; } /* ── Footer: centered brand block ──────────────────────────────────────────── */ body[data-design="b"] .public-footer-brand-row { justify-content: center; } /* Mobile: keep the centered composition graceful */ @media (max-width: 720px) { body[data-design="b"] .public-stat-row { gap: 22px; } } /* =========================================================================== DESIGN C — "Broadsheet" Formal & institutional: centered masthead hero with a double-rule under the title, ruled section dividers, small-caps eyebrows, ledger-style stat row. Pairs well with an elegant/slab font. Distinct from B's airy elegance. =========================================================================== */ body[data-design="c"] .public-topbar { border-bottom: 2px solid var(--public-text); } body[data-design="c"] .public-nav { justify-content: center; } body[data-design="c"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: center; text-align: center; } body[data-design="c"] .public-app-promo { display: none; } body[data-design="c"] .public-banner-copy { max-width: 900px; margin: 0 auto; text-align: center; } body[data-design="c"] .public-eyebrow { letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.72rem; } body[data-design="c"] .public-title { font-size: clamp(2.6rem, 6.5vw, 4.6rem); line-height: 1.05; display: inline-block; padding-bottom: 16px; border-bottom: 3px double currentColor; } body[data-design="c"] .public-copy { margin: 22px auto 0; max-width: 62ch; font-size: 1.12rem; } body[data-design="c"] .public-actions { justify-content: center; } body[data-design="c"] .public-stat-row { justify-content: center; gap: 0; border-top: 1px solid var(--public-line); margin-top: 30px; padding-top: 8px; } body[data-design="c"] .public-stat { text-align: center; padding: 18px 30px; border-left: 1px solid var(--public-line); } body[data-design="c"] .public-stat:first-child { border-left: none; } body[data-design="c"] .public-section { border-top: 1px solid var(--public-line); padding-top: 60px; padding-bottom: 60px; } body[data-design="c"] .public-page-header { text-align: center; border-bottom: 3px double var(--public-line); padding-bottom: 24px; } body[data-design="c"] .public-page-header .public-eyebrow, body[data-design="c"] .public-page-header h1, body[data-design="c"] .public-page-header p { margin-left: auto; margin-right: auto; } body[data-design="c"] .public-page-header p { max-width: 62ch; } /* =========================================================================== DESIGN D — "Spotlight" Bold & energetic: giant uppercase hero type, an accent-pill eyebrow, thick accent rules on the header + page intros, uppercase section headings. Pairs well with a bold/slab font. Loud — the opposite of C's restraint. =========================================================================== */ body[data-design="d"] .public-topbar { border-bottom: 3px solid var(--public-accent); } body[data-design="d"] .public-nav { justify-content: center; } body[data-design="d"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: center; text-align: center; } body[data-design="d"] .public-app-promo { display: none; } body[data-design="d"] .public-banner-copy { max-width: 900px; margin: 0 auto; text-align: center; } body[data-design="d"] .public-eyebrow { display: inline-block; background: var(--public-accent); color: #fff; padding: 6px 15px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; } body[data-design="d"] .public-title { font-size: clamp(3rem, 10vw, 7rem); line-height: 0.92; text-transform: uppercase; letter-spacing: -0.02em; } body[data-design="d"] .public-copy { margin: 0 auto; max-width: 54ch; font-size: 1.22rem; font-weight: 600; } body[data-design="d"] .public-actions { justify-content: center; } body[data-design="d"] .public-stat-row { justify-content: center; gap: 40px; } body[data-design="d"] .public-stat-value { font-size: clamp(1.4rem, 3vw, 2rem); } body[data-design="d"] .public-page-header { text-align: center; border-bottom: 4px solid var(--public-accent); padding-bottom: 20px; } body[data-design="d"] .public-page-header .public-eyebrow, body[data-design="d"] .public-page-header h1, body[data-design="d"] .public-page-header p { margin-left: auto; margin-right: auto; } body[data-design="d"] .public-page-header h1 { text-transform: uppercase; letter-spacing: -0.01em; } /* Mobile niceties for C & D */ @media (max-width: 720px) { body[data-design="c"] .public-stat { padding: 14px 18px; } body[data-design="d"] .public-stat-row { gap: 22px; } } /* ########################################################################### EXPANDED LIBRARY — Designs E-I (generated 2026-07-07, grounded in real classes) Each scoped under body[data-design=KEY] so Ashippun (no attr) is untouched. ########################################################################### */ /* =========================================================================== DESIGN E — "Minimalist" Extreme restraint. Left-aligned, thin/light type, a smaller type scale, hairline dividers only, and generous whitespace. The eyebrow loses its pill and becomes a quiet muted line; buttons go ghost. Distinct from B/C/D (all centered) and D (loud) — this is the opposite of loud: a premium, calm gallery. =========================================================================== */ /* ── Header: hairline, quiet, wide-tracked brand ───────────────────────────── */ body[data-design="e"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="e"] .brand-title { font-weight: 400; letter-spacing: 0.06em; } /* ── Hero: single LEFT column, no side card, lots of air ───────────────────── */ body[data-design="e"] .public-banner-inner { display: block !important; padding: 96px 0; } body[data-design="e"] .public-app-promo { display: none; } body[data-design="e"] .public-banner-copy { max-width: 640px; } /* eyebrow: strip the pill, make it a quiet muted line */ body[data-design="e"] .public-eyebrow { min-height: 0; padding: 0; border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: rgba(255, 255, 255, 0.72); font-weight: 400; font-size: 0.72rem; letter-spacing: 0.28em; } body[data-design="e"] .public-title { margin: 26px 0 20px; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; line-height: 1.12; letter-spacing: -0.01em; text-shadow: none; } body[data-design="e"] .public-copy { max-width: 52ch; font-size: 0.98rem; font-weight: 300; line-height: 1.9; text-shadow: none; } body[data-design="e"] .public-actions { gap: 12px; margin-top: 34px; } /* buttons: quiet ghost outlines, no lift */ body[data-design="e"] .public-btn { min-height: 42px; border-radius: 0; border: 1px solid var(--public-line); background: transparent; color: var(--public-text); font-weight: 400; letter-spacing: 0.04em; box-shadow: none; } body[data-design="e"] .public-btn:hover { transform: none; border-color: var(--public-text); box-shadow: none; } body[data-design="e"] .public-btn.primary { background: transparent; border-color: var(--public-text); color: var(--public-text); box-shadow: none; } body[data-design="e"] .public-btn.primary:hover { background: var(--public-text); color: var(--public-bg); box-shadow: none; } /* stats: thin single top rule, quiet light values */ body[data-design="e"] .public-stat-row { gap: 40px; margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.22); } body[data-design="e"] .public-stat { border: none; padding: 0; } body[data-design="e"] .public-stat-label { font-weight: 400; letter-spacing: 0.16em; opacity: 0.82; } body[data-design="e"] .public-stat-value { font-weight: 300; font-size: 1.2rem; text-shadow: none; } /* ── Sections: very airy, single hairline top border, smaller quiet headings ── */ body[data-design="e"] .public-section { padding: 88px 0; border-top: 1px solid var(--public-line); } body[data-design="e"] .public-section-title, body[data-design="e"] .public-page-header h1 { font-weight: 300; letter-spacing: 0; } body[data-design="e"] .public-section-copy, body[data-design="e"] .public-page-header p { font-weight: 300; color: var(--public-muted); } body[data-design="e"] .public-page-header { padding: 72px 0 24px; } /* feature cards: borderless, hairline-separated, shadowless calm */ body[data-design="e"] .public-home-feature-grid { gap: 0; } body[data-design="e"] .public-home-feature-card { border: none; border-top: 1px solid var(--public-line); background: transparent; box-shadow: none; padding: 34px 0; } body[data-design="e"] .public-home-feature-title { font-weight: 400; } /* footer: quiet left brand, no emphasis */ body[data-design="e"] .public-footer { border-top: 1px solid var(--public-line); } body[data-design="e"] .public-footer-brand-row { justify-content: flex-start; } @media (max-width: 720px) { body[data-design="e"] .public-banner-inner { padding: 64px 0; } body[data-design="e"] .public-section { padding: 56px 0; } body[data-design="e"] .public-stat-row { gap: 24px; } } /* DESIGN F — "Warm Lodge" Friendly & approachable. Big rounded corners on the hero, cards and buttons, soft raised shadows, and accent-TINTED card backgrounds. Left-aligned copy keeps it distinct from the centered B/C/D; the roundness + warmth keep it distinct from A's corporate grid. */ /* ── Header: soft, rounded, quietly warm ─────────────────────────────────── */ body[data-design="f"] .public-topbar { border-bottom: 1px solid var(--public-line-soft, var(--public-line)); } body[data-design="f"] .brand-title { letter-spacing: 0.005em; } /* ── Hero: keep the LEFT copy column, drop the app card, round the whole stage */ body[data-design="f"] .public-banner { border-radius: 0 0 clamp(24px, 5vw, 56px) clamp(24px, 5vw, 56px); overflow: hidden; } body[data-design="f"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="f"] .public-app-promo { display: none; } body[data-design="f"] .public-banner-copy { max-width: 720px; } body[data-design="f"] .public-eyebrow { border-radius: 999px; letter-spacing: 0.10em; } body[data-design="f"] .public-title { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.015em; } body[data-design="f"] .public-copy { font-size: 1.14rem; line-height: 1.85; max-width: 58ch; } body[data-design="f"] .public-actions { gap: 16px; margin-top: 26px; } /* Big, pill-soft buttons that feel welcoming to tap */ body[data-design="f"] .public-btn { border-radius: 999px; min-height: 50px; padding: 0 26px; box-shadow: var(--public-shadow); } body[data-design="f"] .public-stat-row { gap: 16px; margin-top: 34px; } /* ── Page intros: friendlier, roomier ────────────────────────────────────── */ body[data-design="f"] .public-page-header h1 { letter-spacing: -0.015em; } body[data-design="f"] .public-page-header p { line-height: 1.85; } /* ── Sections: generous rhythm ───────────────────────────────────────────── */ body[data-design="f"] .public-section { padding-top: 68px; padding-bottom: 68px; } body[data-design="f"] .public-section-title { letter-spacing: -0.015em; } /* ── Feature cards: chunky rounded, accent-tinted, softly raised ─────────── */ body[data-design="f"] .public-home-feature-grid { gap: 28px; } body[data-design="f"] .public-home-feature-card { border-radius: clamp(20px, 3vw, 32px); border: 1px solid color-mix(in srgb, var(--public-accent) 22%, var(--public-line)); background: color-mix(in srgb, var(--public-accent) 8%, var(--public-bg)); box-shadow: var(--public-shadow); padding: 30px; transition: transform 0.18s ease, box-shadow 0.18s ease; } body[data-design="f"] .public-home-feature-card:hover { transform: translateY(-4px); } body[data-design="f"] .public-home-feature-title { letter-spacing: -0.01em; } /* ── Footer: keep the warm, left brand block ─────────────────────────────── */ body[data-design="f"] .public-footer { border-top: 1px solid color-mix(in srgb, var(--public-accent) 16%, var(--public-line)); } /* Mobile: keep the cozy composition graceful */ @media (max-width: 720px) { body[data-design="f"] .public-banner-inner { padding: 44px 0; } body[data-design="f"] .public-home-feature-card { padding: 22px; } body[data-design="f"] .public-stat-row { gap: 12px; } } /* =========================================================================== DESIGN G — "Magazine" Asymmetric editorial. Unlike B/C/D (all centered), G stays firmly LEFT-aligned: an oversized hero title in a single left column, section headings + eyebrows marked by a thick accent LEFT-border with big type, and feature "cards" that dissolve into borderless rows separated by hairlines, each with a left accent rule. Editorial, asymmetric — never centered. =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="g"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="g"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="g"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="g"] .public-app-promo { display: none; } body[data-design="g"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="g"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="g"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="g"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="g"] .public-actions { justify-content: flex-start; } body[data-design="g"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="g"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="g"] .public-section-title, body[data-design="g"] .public-page-header h1, body[data-design="g"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="g"] .public-page-header { padding-top: 48px; } body[data-design="g"] .public-page-header .public-eyebrow, body[data-design="g"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="g"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="g"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="g"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="g"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="g"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="g"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="g"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="g"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="g"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="g"] .public-banner-inner { padding: 44px 0; } body[data-design="g"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="g"] .public-section-title, body[data-design="g"] .public-page-header h1, body[data-design="g"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN H — "Bold Bands" =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="h"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="h"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="h"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="h"] .public-app-promo { display: none; } body[data-design="h"] .public-banner-copy { max-width: 900px; } body[data-design="h"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="h"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="h"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="h"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="h"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="h"] .public-band, body[data-design="h"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="h"] .public-section-title, body[data-design="h"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="h"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="h"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="h"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="h"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="h"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="h"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="h"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="h"] .public-banner-inner { padding: 48px 0; } body[data-design="h"] .public-section-title, body[data-design="h"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN I — "Heritage" Formal, established country-club. A symmetric centered hero (no rule under the title), a short centered accent ornament ABOVE every section/page heading, and feature cards framed in a thin accent border with an inner double-line and refined padding. Ornamental restraint, serif-friendly spacing. Distinct from C's newspaper ruling and D's loud uppercase. =========================================================================== */ /* ── Header: quiet, framed underline ───────────────────────────────────────── */ body[data-design="i"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="i"] .public-nav { justify-content: center; } body[data-design="i"] .brand-title { letter-spacing: 0.04em; } /* ── Hero: symmetric, centered, calm ───────────────────────────────────────── */ body[data-design="i"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 64px 0; } body[data-design="i"] .public-app-promo { display: none; } body[data-design="i"] .public-banner-copy { max-width: 840px; margin: 0 auto; text-align: center; } body[data-design="i"] .public-eyebrow { letter-spacing: 0.22em; font-size: 0.72rem; } body[data-design="i"] .public-title { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.06; letter-spacing: -0.005em; margin: 22px 0 16px; } body[data-design="i"] .public-copy { margin: 0 auto; max-width: 60ch; font-size: 1.12rem; } body[data-design="i"] .public-actions { justify-content: center; } body[data-design="i"] .public-stat-row { justify-content: center; gap: 34px; margin-top: 36px; border-top: 1px solid rgba(255, 255, 255, 0.28); padding-top: 26px; } body[data-design="i"] .public-stat { text-align: center; border: none; padding: 0; } /* ── Section & page headings: crowned by a short centered accent rule ───────── */ body[data-design="i"] .public-section { padding: 66px 0; } body[data-design="i"] .public-section-title, body[data-design="i"] .public-page-header h1 { text-align: center; } body[data-design="i"] .public-section-title::before, body[data-design="i"] .public-page-header h1::before { content: ""; display: block; width: 54px; height: 2px; margin: 0 auto 18px; background: var(--public-accent); } body[data-design="i"] .public-section-copy { margin-left: auto; margin-right: auto; text-align: center; } body[data-design="i"] .public-page-header { text-align: center; padding-bottom: 24px; } body[data-design="i"] .public-page-header .public-eyebrow, body[data-design="i"] .public-page-header h1, body[data-design="i"] .public-page-header p { margin-left: auto; margin-right: auto; } body[data-design="i"] .public-page-header p { max-width: 62ch; } /* ── Feature cards: framed with a thin accent border + inner double line ──────── */ body[data-design="i"] .public-home-feature-card { border: 1px solid var(--public-accent); padding: 30px 26px; box-shadow: 0 2px 0 var(--public-accent), var(--public-shadow); outline: 1px solid var(--public-line); outline-offset: -7px; text-align: center; } body[data-design="i"] .public-home-feature-header { justify-content: center; } body[data-design="i"] .public-home-feature-title { letter-spacing: 0.01em; } /* ── Buttons: ledger style — hard offset shadow, squared, uppercase ─────────── */ body[data-design="i"] .public-btn { border-radius: 2px; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; box-shadow: 3px 3px 0 0 var(--public-text); transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease, color 0.15s ease; } body[data-design="i"] .public-btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 var(--public-text); } body[data-design="i"] .public-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 0 var(--public-text); } body[data-design="i"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: centered, formal ──────────────────────────────────────────────── */ body[data-design="i"] .public-footer-brand-row { justify-content: center; } @media (max-width: 720px) { body[data-design="i"] .public-banner-inner { padding: 44px 0; } body[data-design="i"] .public-stat-row { gap: 20px; } body[data-design="i"] .public-home-feature-card { padding: 24px 20px; } } /* =========================================================================== DESIGN K — "Lodge" (dormant; cloned from H base block, reskinned later) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="k"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="k"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="k"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="k"] .public-app-promo { display: none; } body[data-design="k"] .public-banner-copy { max-width: 900px; } body[data-design="k"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="k"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="k"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="k"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="k"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="k"] .public-band, body[data-design="k"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="k"] .public-section-title, body[data-design="k"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="k"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="k"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="k"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="k"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="k"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="k"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="k"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="k"] .public-banner-inner { padding: 48px 0; } body[data-design="k"] .public-section-title, body[data-design="k"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN L — "Varsity" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="l"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="l"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="l"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="l"] .public-app-promo { display: none; } body[data-design="l"] .public-banner-copy { max-width: 900px; } body[data-design="l"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="l"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="l"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="l"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="l"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="l"] .public-band, body[data-design="l"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="l"] .public-section-title, body[data-design="l"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="l"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="l"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="l"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="l"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="l"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="l"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="l"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="l"] .public-banner-inner { padding: 48px 0; } body[data-design="l"] .public-section-title, body[data-design="l"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN M — "Almanac" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="m"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="m"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="m"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="m"] .public-app-promo { display: none; } body[data-design="m"] .public-banner-copy { max-width: 900px; } body[data-design="m"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="m"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="m"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="m"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="m"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="m"] .public-band, body[data-design="m"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="m"] .public-section-title, body[data-design="m"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="m"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="m"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="m"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="m"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="m"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="m"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="m"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="m"] .public-banner-inner { padding: 48px 0; } body[data-design="m"] .public-section-title, body[data-design="m"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN N — "Homestead" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="n"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="n"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="n"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="n"] .public-app-promo { display: none; } body[data-design="n"] .public-banner-copy { max-width: 900px; } body[data-design="n"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="n"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="n"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="n"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="n"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="n"] .public-band, body[data-design="n"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="n"] .public-section-title, body[data-design="n"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="n"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="n"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="n"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="n"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="n"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="n"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="n"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="n"] .public-banner-inner { padding: 48px 0; } body[data-design="n"] .public-section-title, body[data-design="n"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN O — "Standard" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="o"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="o"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="o"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="o"] .public-app-promo { display: none; } body[data-design="o"] .public-banner-copy { max-width: 900px; } body[data-design="o"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="o"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="o"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="o"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="o"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="o"] .public-band, body[data-design="o"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="o"] .public-section-title, body[data-design="o"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="o"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="o"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="o"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="o"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="o"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="o"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="o"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="o"] .public-banner-inner { padding: 48px 0; } body[data-design="o"] .public-section-title, body[data-design="o"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN P — "Mosaic" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="p"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="p"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="p"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="p"] .public-app-promo { display: none; } body[data-design="p"] .public-banner-copy { max-width: 900px; } body[data-design="p"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="p"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="p"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="p"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="p"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="p"] .public-band, body[data-design="p"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="p"] .public-section-title, body[data-design="p"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="p"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="p"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="p"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="p"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="p"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="p"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="p"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="p"] .public-banner-inner { padding: 48px 0; } body[data-design="p"] .public-section-title, body[data-design="p"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN Q — "Foyer" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="q"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="q"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="q"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="q"] .public-app-promo { display: none; } body[data-design="q"] .public-banner-copy { max-width: 900px; } body[data-design="q"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="q"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="q"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="q"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="q"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="q"] .public-band, body[data-design="q"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="q"] .public-section-title, body[data-design="q"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="q"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="q"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="q"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="q"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="q"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="q"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="q"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="q"] .public-banner-inner { padding: 48px 0; } body[data-design="q"] .public-section-title, body[data-design="q"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN R — "Vista" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="r"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="r"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="r"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="r"] .public-app-promo { display: none; } body[data-design="r"] .public-banner-copy { max-width: 900px; } body[data-design="r"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="r"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="r"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="r"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="r"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="r"] .public-band, body[data-design="r"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="r"] .public-section-title, body[data-design="r"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="r"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="r"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="r"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="r"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="r"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="r"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="r"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="r"] .public-banner-inner { padding: 48px 0; } body[data-design="r"] .public-section-title, body[data-design="r"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN S — "Milepost" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="s"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="s"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="s"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="s"] .public-app-promo { display: none; } body[data-design="s"] .public-banner-copy { max-width: 900px; } body[data-design="s"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="s"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="s"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="s"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="s"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="s"] .public-band, body[data-design="s"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="s"] .public-section-title, body[data-design="s"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="s"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="s"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="s"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="s"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="s"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="s"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="s"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="s"] .public-banner-inner { padding: 48px 0; } body[data-design="s"] .public-section-title, body[data-design="s"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN T — "Axis" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="t"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="t"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="t"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="t"] .public-app-promo { display: none; } body[data-design="t"] .public-banner-copy { max-width: 900px; } body[data-design="t"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="t"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="t"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="t"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="t"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="t"] .public-band, body[data-design="t"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="t"] .public-section-title, body[data-design="t"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="t"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="t"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="t"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="t"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="t"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="t"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="t"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="t"] .public-banner-inner { padding: 48px 0; } body[data-design="t"] .public-section-title, body[data-design="t"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN U — "Broadside" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="u"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="u"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="u"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="u"] .public-app-promo { display: none; } body[data-design="u"] .public-banner-copy { max-width: 900px; } body[data-design="u"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="u"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="u"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="u"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="u"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="u"] .public-band, body[data-design="u"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="u"] .public-section-title, body[data-design="u"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="u"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="u"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="u"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="u"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="u"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="u"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="u"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="u"] .public-banner-inner { padding: 48px 0; } body[data-design="u"] .public-section-title, body[data-design="u"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN V — "Concourse" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="v"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="v"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="v"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="v"] .public-app-promo { display: none; } body[data-design="v"] .public-banner-copy { max-width: 900px; } body[data-design="v"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="v"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="v"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="v"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="v"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="v"] .public-band, body[data-design="v"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="v"] .public-section-title, body[data-design="v"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="v"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="v"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="v"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="v"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="v"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="v"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="v"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="v"] .public-banner-inner { padding: 48px 0; } body[data-design="v"] .public-section-title, body[data-design="v"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN W — "Switchback" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="w"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="w"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="w"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="w"] .public-app-promo { display: none; } body[data-design="w"] .public-banner-copy { max-width: 900px; } body[data-design="w"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="w"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="w"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="w"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="w"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="w"] .public-band, body[data-design="w"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="w"] .public-section-title, body[data-design="w"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="w"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="w"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="w"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="w"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="w"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="w"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="w"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="w"] .public-banner-inner { padding: 48px 0; } body[data-design="w"] .public-section-title, body[data-design="w"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN X — "Shelf" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="x"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="x"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="x"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="x"] .public-app-promo { display: none; } body[data-design="x"] .public-banner-copy { max-width: 900px; } body[data-design="x"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="x"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="x"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="x"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="x"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="x"] .public-band, body[data-design="x"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="x"] .public-section-title, body[data-design="x"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="x"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="x"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="x"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="x"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="x"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="x"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="x"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="x"] .public-banner-inner { padding: 48px 0; } body[data-design="x"] .public-section-title, body[data-design="x"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN Y — "Exhibit" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="y"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="y"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="y"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="y"] .public-app-promo { display: none; } body[data-design="y"] .public-banner-copy { max-width: 900px; } body[data-design="y"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="y"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="y"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="y"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="y"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="y"] .public-band, body[data-design="y"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="y"] .public-section-title, body[data-design="y"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="y"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="y"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="y"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="y"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="y"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="y"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="y"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="y"] .public-banner-inner { padding: 48px 0; } body[data-design="y"] .public-section-title, body[data-design="y"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN Z — "Chapbook" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="z"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="z"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="z"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="z"] .public-app-promo { display: none; } body[data-design="z"] .public-banner-copy { max-width: 900px; } body[data-design="z"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="z"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="z"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="z"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="z"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="z"] .public-band, body[data-design="z"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="z"] .public-section-title, body[data-design="z"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="z"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="z"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="z"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="z"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="z"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="z"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="z"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="z"] .public-banner-inner { padding: 48px 0; } body[data-design="z"] .public-section-title, body[data-design="z"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AA — "Reel" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="aa"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="aa"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="aa"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="aa"] .public-app-promo { display: none; } body[data-design="aa"] .public-banner-copy { max-width: 900px; } body[data-design="aa"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="aa"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="aa"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="aa"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="aa"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="aa"] .public-band, body[data-design="aa"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="aa"] .public-section-title, body[data-design="aa"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="aa"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="aa"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="aa"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="aa"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="aa"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="aa"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="aa"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="aa"] .public-banner-inner { padding: 48px 0; } body[data-design="aa"] .public-section-title, body[data-design="aa"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AB — "Bulletin" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ab"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ab"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ab"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ab"] .public-app-promo { display: none; } body[data-design="ab"] .public-banner-copy { max-width: 900px; } body[data-design="ab"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ab"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ab"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ab"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ab"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ab"] .public-band, body[data-design="ab"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ab"] .public-section-title, body[data-design="ab"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ab"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ab"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ab"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ab"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ab"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ab"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ab"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ab"] .public-banner-inner { padding: 48px 0; } body[data-design="ab"] .public-section-title, body[data-design="ab"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AC — "Console" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ac"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ac"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ac"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ac"] .public-app-promo { display: none; } body[data-design="ac"] .public-banner-copy { max-width: 900px; } body[data-design="ac"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ac"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ac"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ac"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ac"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ac"] .public-band, body[data-design="ac"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ac"] .public-section-title, body[data-design="ac"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ac"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ac"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ac"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ac"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ac"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ac"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ac"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ac"] .public-banner-inner { padding: 48px 0; } body[data-design="ac"] .public-section-title, body[data-design="ac"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AD — "Newsstand" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ad"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ad"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ad"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ad"] .public-app-promo { display: none; } body[data-design="ad"] .public-banner-copy { max-width: 900px; } body[data-design="ad"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ad"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ad"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ad"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ad"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ad"] .public-band, body[data-design="ad"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ad"] .public-section-title, body[data-design="ad"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ad"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ad"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ad"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ad"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ad"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ad"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ad"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ad"] .public-banner-inner { padding: 48px 0; } body[data-design="ad"] .public-section-title, body[data-design="ad"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AE — "Crest" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ae"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ae"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ae"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ae"] .public-app-promo { display: none; } body[data-design="ae"] .public-banner-copy { max-width: 900px; } body[data-design="ae"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ae"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ae"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ae"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ae"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ae"] .public-band, body[data-design="ae"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ae"] .public-section-title, body[data-design="ae"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ae"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ae"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ae"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ae"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ae"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ae"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ae"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ae"] .public-banner-inner { padding: 48px 0; } body[data-design="ae"] .public-section-title, body[data-design="ae"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AF — "Sitrep" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="af"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="af"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="af"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="af"] .public-app-promo { display: none; } body[data-design="af"] .public-banner-copy { max-width: 900px; } body[data-design="af"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="af"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="af"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="af"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="af"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="af"] .public-band, body[data-design="af"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="af"] .public-section-title, body[data-design="af"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="af"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="af"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="af"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="af"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="af"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="af"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="af"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="af"] .public-banner-inner { padding: 48px 0; } body[data-design="af"] .public-section-title, body[data-design="af"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AG — "Keepsake" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ag"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ag"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ag"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ag"] .public-app-promo { display: none; } body[data-design="ag"] .public-banner-copy { max-width: 900px; } body[data-design="ag"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ag"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ag"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ag"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ag"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ag"] .public-band, body[data-design="ag"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ag"] .public-section-title, body[data-design="ag"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ag"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ag"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ag"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ag"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ag"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ag"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ag"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ag"] .public-banner-inner { padding: 48px 0; } body[data-design="ag"] .public-section-title, body[data-design="ag"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AH — "Trailhead" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ah"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ah"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ah"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ah"] .public-app-promo { display: none; } body[data-design="ah"] .public-banner-copy { max-width: 900px; } body[data-design="ah"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ah"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ah"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ah"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ah"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ah"] .public-band, body[data-design="ah"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ah"] .public-section-title, body[data-design="ah"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ah"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ah"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ah"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ah"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ah"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ah"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ah"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ah"] .public-banner-inner { padding: 48px 0; } body[data-design="ah"] .public-section-title, body[data-design="ah"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AI — "Plat" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ai"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ai"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ai"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ai"] .public-app-promo { display: none; } body[data-design="ai"] .public-banner-copy { max-width: 900px; } body[data-design="ai"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ai"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ai"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ai"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ai"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ai"] .public-band, body[data-design="ai"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ai"] .public-section-title, body[data-design="ai"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ai"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ai"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ai"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ai"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ai"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ai"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ai"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ai"] .public-banner-inner { padding: 48px 0; } body[data-design="ai"] .public-section-title, body[data-design="ai"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AJ — "Compass" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="aj"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="aj"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="aj"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="aj"] .public-app-promo { display: none; } body[data-design="aj"] .public-banner-copy { max-width: 900px; } body[data-design="aj"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="aj"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="aj"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="aj"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="aj"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="aj"] .public-band, body[data-design="aj"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="aj"] .public-section-title, body[data-design="aj"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="aj"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="aj"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="aj"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="aj"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="aj"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="aj"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="aj"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="aj"] .public-banner-inner { padding: 48px 0; } body[data-design="aj"] .public-section-title, body[data-design="aj"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AK — "Provenance" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ak"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ak"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ak"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ak"] .public-app-promo { display: none; } body[data-design="ak"] .public-banner-copy { max-width: 900px; } body[data-design="ak"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ak"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ak"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ak"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ak"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ak"] .public-band, body[data-design="ak"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ak"] .public-section-title, body[data-design="ak"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ak"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ak"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ak"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ak"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ak"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ak"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ak"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ak"] .public-banner-inner { padding: 48px 0; } body[data-design="ak"] .public-section-title, body[data-design="ak"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AL — "Ribbon" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="al"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="al"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="al"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="al"] .public-app-promo { display: none; } body[data-design="al"] .public-banner-copy { max-width: 900px; } body[data-design="al"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="al"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="al"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="al"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="al"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="al"] .public-band, body[data-design="al"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="al"] .public-section-title, body[data-design="al"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="al"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="al"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="al"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="al"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="al"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="al"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="al"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="al"] .public-banner-inner { padding: 48px 0; } body[data-design="al"] .public-section-title, body[data-design="al"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AM — "Overlook" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="am"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="am"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="am"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="am"] .public-app-promo { display: none; } body[data-design="am"] .public-banner-copy { max-width: 900px; } body[data-design="am"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="am"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="am"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="am"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="am"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="am"] .public-band, body[data-design="am"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="am"] .public-section-title, body[data-design="am"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="am"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="am"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="am"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="am"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="am"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="am"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="am"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="am"] .public-banner-inner { padding: 48px 0; } body[data-design="am"] .public-section-title, body[data-design="am"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AN — "Fieldbook" (dormant; cloned from H base block, reshaped) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="an"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="an"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="an"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="an"] .public-app-promo { display: none; } body[data-design="an"] .public-banner-copy { max-width: 900px; } body[data-design="an"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="an"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="an"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="an"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="an"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="an"] .public-band, body[data-design="an"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="an"] .public-section-title, body[data-design="an"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="an"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="an"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="an"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="an"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="an"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="an"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="an"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="an"] .public-banner-inner { padding: 48px 0; } body[data-design="an"] .public-section-title, body[data-design="an"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AO — "Beacon" (dormant; cloned from K base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ao"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ao"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ao"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ao"] .public-app-promo { display: none; } body[data-design="ao"] .public-banner-copy { max-width: 900px; } body[data-design="ao"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ao"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ao"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ao"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ao"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ao"] .public-band, body[data-design="ao"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ao"] .public-section-title, body[data-design="ao"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ao"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ao"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ao"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ao"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ao"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ao"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ao"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ao"] .public-banner-inner { padding: 48px 0; } body[data-design="ao"] .public-section-title, body[data-design="ao"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AP — "Playbill" (dormant; cloned from M base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ap"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ap"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ap"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ap"] .public-app-promo { display: none; } body[data-design="ap"] .public-banner-copy { max-width: 900px; } body[data-design="ap"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ap"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ap"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ap"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ap"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ap"] .public-band, body[data-design="ap"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ap"] .public-section-title, body[data-design="ap"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ap"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ap"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ap"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ap"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ap"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ap"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ap"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ap"] .public-banner-inner { padding: 48px 0; } body[data-design="ap"] .public-section-title, body[data-design="ap"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AQ — "Topo" (dormant; cloned from O base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="aq"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="aq"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="aq"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="aq"] .public-app-promo { display: none; } body[data-design="aq"] .public-banner-copy { max-width: 900px; } body[data-design="aq"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="aq"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="aq"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="aq"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="aq"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="aq"] .public-band, body[data-design="aq"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="aq"] .public-section-title, body[data-design="aq"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="aq"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="aq"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="aq"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="aq"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="aq"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="aq"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="aq"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="aq"] .public-banner-inner { padding: 48px 0; } body[data-design="aq"] .public-section-title, body[data-design="aq"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AR — "Docket" (dormant; cloned from Q base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ar"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ar"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ar"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ar"] .public-app-promo { display: none; } body[data-design="ar"] .public-banner-copy { max-width: 900px; } body[data-design="ar"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ar"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ar"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ar"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ar"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ar"] .public-band, body[data-design="ar"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ar"] .public-section-title, body[data-design="ar"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ar"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ar"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ar"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ar"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ar"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ar"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ar"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ar"] .public-banner-inner { padding: 48px 0; } body[data-design="ar"] .public-section-title, body[data-design="ar"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AS — "Scoreboard" (dormant; cloned from S base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="as"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="as"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="as"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="as"] .public-app-promo { display: none; } body[data-design="as"] .public-banner-copy { max-width: 900px; } body[data-design="as"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="as"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="as"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="as"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="as"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="as"] .public-band, body[data-design="as"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="as"] .public-section-title, body[data-design="as"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="as"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="as"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="as"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="as"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="as"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="as"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="as"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="as"] .public-banner-inner { padding: 48px 0; } body[data-design="as"] .public-section-title, body[data-design="as"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AT — "Fieldguide" (dormant; cloned from U base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="at"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="at"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="at"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="at"] .public-app-promo { display: none; } body[data-design="at"] .public-banner-copy { max-width: 900px; } body[data-design="at"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="at"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="at"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="at"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="at"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="at"] .public-band, body[data-design="at"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="at"] .public-section-title, body[data-design="at"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="at"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="at"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="at"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="at"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="at"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="at"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="at"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="at"] .public-banner-inner { padding: 48px 0; } body[data-design="at"] .public-section-title, body[data-design="at"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AU — "Tabloid" (dormant; cloned from W base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="au"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="au"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="au"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="au"] .public-app-promo { display: none; } body[data-design="au"] .public-banner-copy { max-width: 900px; } body[data-design="au"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="au"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="au"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="au"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="au"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="au"] .public-band, body[data-design="au"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="au"] .public-section-title, body[data-design="au"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="au"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="au"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="au"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="au"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="au"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="au"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="au"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="au"] .public-banner-inner { padding: 48px 0; } body[data-design="au"] .public-section-title, body[data-design="au"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AV — "Workshop" (dormant; cloned from Y base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="av"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="av"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="av"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="av"] .public-app-promo { display: none; } body[data-design="av"] .public-banner-copy { max-width: 900px; } body[data-design="av"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="av"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="av"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="av"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="av"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="av"] .public-band, body[data-design="av"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="av"] .public-section-title, body[data-design="av"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="av"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="av"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="av"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="av"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="av"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="av"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="av"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="av"] .public-banner-inner { padding: 48px 0; } body[data-design="av"] .public-section-title, body[data-design="av"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AW — "Passport" (dormant; cloned from K base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="aw"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="aw"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="aw"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="aw"] .public-app-promo { display: none; } body[data-design="aw"] .public-banner-copy { max-width: 900px; } body[data-design="aw"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="aw"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="aw"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="aw"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="aw"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="aw"] .public-band, body[data-design="aw"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="aw"] .public-section-title, body[data-design="aw"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="aw"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="aw"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="aw"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="aw"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="aw"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="aw"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="aw"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="aw"] .public-banner-inner { padding: 48px 0; } body[data-design="aw"] .public-section-title, body[data-design="aw"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AX — "Liner" (dormant; cloned from M base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ax"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ax"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ax"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ax"] .public-app-promo { display: none; } body[data-design="ax"] .public-banner-copy { max-width: 900px; } body[data-design="ax"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ax"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ax"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ax"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ax"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ax"] .public-band, body[data-design="ax"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ax"] .public-section-title, body[data-design="ax"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ax"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ax"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ax"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ax"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ax"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ax"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ax"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ax"] .public-banner-inner { padding: 48px 0; } body[data-design="ax"] .public-section-title, body[data-design="ax"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AY — "Ranger" (dormant; cloned from O base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ay"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ay"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ay"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ay"] .public-app-promo { display: none; } body[data-design="ay"] .public-banner-copy { max-width: 900px; } body[data-design="ay"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ay"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ay"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ay"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ay"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ay"] .public-band, body[data-design="ay"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ay"] .public-section-title, body[data-design="ay"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ay"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ay"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ay"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ay"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ay"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ay"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ay"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ay"] .public-banner-inner { padding: 48px 0; } body[data-design="ay"] .public-section-title, body[data-design="ay"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN AZ — "Gazette" (dormant; cloned from Q base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="az"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="az"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="az"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="az"] .public-app-promo { display: none; } body[data-design="az"] .public-banner-copy { max-width: 900px; } body[data-design="az"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="az"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="az"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="az"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="az"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="az"] .public-band, body[data-design="az"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="az"] .public-section-title, body[data-design="az"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="az"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="az"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="az"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="az"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="az"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="az"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="az"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="az"] .public-banner-inner { padding: 48px 0; } body[data-design="az"] .public-section-title, body[data-design="az"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN BA — "Switchboard" (dormant; cloned from S base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="ba"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="ba"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="ba"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="ba"] .public-app-promo { display: none; } body[data-design="ba"] .public-banner-copy { max-width: 900px; } body[data-design="ba"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="ba"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="ba"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="ba"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="ba"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="ba"] .public-band, body[data-design="ba"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="ba"] .public-section-title, body[data-design="ba"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="ba"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="ba"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="ba"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="ba"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="ba"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="ba"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="ba"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="ba"] .public-banner-inner { padding: 48px 0; } body[data-design="ba"] .public-section-title, body[data-design="ba"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN BB — "Marquee" (dormant; cloned from U base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="bb"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="bb"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="bb"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="bb"] .public-app-promo { display: none; } body[data-design="bb"] .public-banner-copy { max-width: 900px; } body[data-design="bb"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="bb"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="bb"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="bb"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="bb"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="bb"] .public-band, body[data-design="bb"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="bb"] .public-section-title, body[data-design="bb"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="bb"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="bb"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="bb"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="bb"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="bb"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="bb"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="bb"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="bb"] .public-banner-inner { padding: 48px 0; } body[data-design="bb"] .public-section-title, body[data-design="bb"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN BC — "Cartogram" (dormant; cloned from W base block, reshape me) =========================================================================== */ /* ── Header: solid, grounded ───────────────────────────────────────────────── */ body[data-design="bc"] .public-topbar { border-bottom: 4px solid var(--public-text); } body[data-design="bc"] .brand-title { letter-spacing: -0.01em; font-weight: 900; } /* ── Hero: bold left copy, no side card, punchy stats ──────────────────────── */ body[data-design="bc"] .public-banner-inner { display: flex !important; flex-direction: column; align-items: flex-start; text-align: left; padding: 72px 0; } body[data-design="bc"] .public-app-promo { display: none; } body[data-design="bc"] .public-banner-copy { max-width: 900px; } body[data-design="bc"] .public-title { font-size: clamp(2.9rem, 8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; font-weight: 900; } body[data-design="bc"] .public-copy { max-width: 60ch; font-size: 1.16rem; } body[data-design="bc"] .public-stat-value { font-size: clamp(1.5rem, 3vw, 2.1rem); } /* ── The bands: alternate the whole section background down the page ───────── */ body[data-design="bc"] .public-section { padding-top: 76px; padding-bottom: 76px; border: none; background: var(--public-bg); } body[data-design="bc"] .public-section:nth-of-type(even) { background: var(--public-bg-soft); border-top: 3px solid var(--public-line); border-bottom: 3px solid var(--public-line); } /* Neutralize the markup helper bands so rhythm is position-driven, not class-driven */ body[data-design="bc"] .public-band, body[data-design="bc"] .public-alt-band { border-color: var(--public-line); } /* ── Chunky, bold section headers with an accent bar ───────────────────────── */ body[data-design="bc"] .public-section-title, body[data-design="bc"] .public-page-header h1 { font-weight: 900; letter-spacing: -0.02em; padding-left: 18px; border-left: 8px solid var(--public-accent); } body[data-design="bc"] .public-home-feature-title { font-weight: 900; } /* ── Page intros: solid slab under the accent bar ──────────────────────────── */ body[data-design="bc"] .public-page-header { padding: 48px 0 24px; border-bottom: 3px solid var(--public-line); } /* ── Feature cards: solid, hard edges, accent top rule ─────────────────────── */ body[data-design="bc"] .public-home-feature-card { border: 2px solid var(--public-line); border-top: 5px solid var(--public-accent); border-radius: 0; background: var(--public-bg); box-shadow: none; } /* ── Chunky solid buttons, high contrast ───────────────────────────────────── */ body[data-design="bc"] .public-btn { min-height: 52px; padding: 0 28px; border-radius: 4px; border-width: 2px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } body[data-design="bc"] .public-btn.primary { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: heavy accent cap ──────────────────────────────────────────────── */ body[data-design="bc"] .public-footer { border-top: 5px solid var(--public-accent); } /* Mobile: soften the padding rhythm so bands don't feel cavernous */ @media (max-width: 720px) { body[data-design="bc"] .public-section { padding-top: 52px; padding-bottom: 52px; } body[data-design="bc"] .public-banner-inner { padding: 48px 0; } body[data-design="bc"] .public-section-title, body[data-design="bc"] .public-page-header h1 { padding-left: 12px; border-left-width: 6px; } } /* =========================================================================== DESIGN BD — "Broadsheet" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bd"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bd"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bd"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bd"] .public-app-promo { display: none; } body[data-design="bd"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bd"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bd"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bd"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bd"] .public-actions { justify-content: flex-start; } body[data-design="bd"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bd"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bd"] .public-section-title, body[data-design="bd"] .public-page-header h1, body[data-design="bd"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bd"] .public-page-header { padding-top: 48px; } body[data-design="bd"] .public-page-header .public-eyebrow, body[data-design="bd"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bd"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bd"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bd"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bd"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bd"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bd"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bd"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bd"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bd"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bd"] .public-banner-inner { padding: 44px 0; } body[data-design="bd"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bd"] .public-section-title, body[data-design="bd"] .public-page-header h1, body[data-design="bd"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BE — "Split" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="be"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="be"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="be"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="be"] .public-app-promo { display: none; } body[data-design="be"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="be"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="be"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="be"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="be"] .public-actions { justify-content: flex-start; } body[data-design="be"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="be"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="be"] .public-section-title, body[data-design="be"] .public-page-header h1, body[data-design="be"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="be"] .public-page-header { padding-top: 48px; } body[data-design="be"] .public-page-header .public-eyebrow, body[data-design="be"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="be"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="be"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="be"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="be"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="be"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="be"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="be"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="be"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="be"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="be"] .public-banner-inner { padding: 44px 0; } body[data-design="be"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="be"] .public-section-title, body[data-design="be"] .public-page-header h1, body[data-design="be"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BF — "Sidebar" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bf"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bf"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bf"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bf"] .public-app-promo { display: none; } body[data-design="bf"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bf"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bf"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bf"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bf"] .public-actions { justify-content: flex-start; } body[data-design="bf"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bf"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bf"] .public-section-title, body[data-design="bf"] .public-page-header h1, body[data-design="bf"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bf"] .public-page-header { padding-top: 48px; } body[data-design="bf"] .public-page-header .public-eyebrow, body[data-design="bf"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bf"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bf"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bf"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bf"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bf"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bf"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bf"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bf"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bf"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bf"] .public-banner-inner { padding: 44px 0; } body[data-design="bf"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bf"] .public-section-title, body[data-design="bf"] .public-page-header h1, body[data-design="bf"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BG — "Almanac" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bg"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bg"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bg"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bg"] .public-app-promo { display: none; } body[data-design="bg"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bg"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bg"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bg"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bg"] .public-actions { justify-content: flex-start; } body[data-design="bg"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bg"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bg"] .public-section-title, body[data-design="bg"] .public-page-header h1, body[data-design="bg"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bg"] .public-page-header { padding-top: 48px; } body[data-design="bg"] .public-page-header .public-eyebrow, body[data-design="bg"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bg"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bg"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bg"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bg"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bg"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bg"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bg"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bg"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bg"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bg"] .public-banner-inner { padding: 44px 0; } body[data-design="bg"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bg"] .public-section-title, body[data-design="bg"] .public-page-header h1, body[data-design="bg"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BH — "Poster" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bh"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bh"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bh"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bh"] .public-app-promo { display: none; } body[data-design="bh"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bh"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bh"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bh"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bh"] .public-actions { justify-content: flex-start; } body[data-design="bh"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bh"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bh"] .public-section-title, body[data-design="bh"] .public-page-header h1, body[data-design="bh"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bh"] .public-page-header { padding-top: 48px; } body[data-design="bh"] .public-page-header .public-eyebrow, body[data-design="bh"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bh"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bh"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bh"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bh"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bh"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bh"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bh"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bh"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bh"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bh"] .public-banner-inner { padding: 44px 0; } body[data-design="bh"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bh"] .public-section-title, body[data-design="bh"] .public-page-header h1, body[data-design="bh"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BI — "Bento" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bi"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bi"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bi"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bi"] .public-app-promo { display: none; } body[data-design="bi"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bi"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bi"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bi"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bi"] .public-actions { justify-content: flex-start; } body[data-design="bi"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bi"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bi"] .public-section-title, body[data-design="bi"] .public-page-header h1, body[data-design="bi"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bi"] .public-page-header { padding-top: 48px; } body[data-design="bi"] .public-page-header .public-eyebrow, body[data-design="bi"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bi"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bi"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bi"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bi"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bi"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bi"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bi"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bi"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bi"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bi"] .public-banner-inner { padding: 44px 0; } body[data-design="bi"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bi"] .public-section-title, body[data-design="bi"] .public-page-header h1, body[data-design="bi"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BJ — "Console" (dormant; cloned from BD base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bj"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bj"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bj"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bj"] .public-app-promo { display: none; } body[data-design="bj"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bj"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bj"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bj"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bj"] .public-actions { justify-content: flex-start; } body[data-design="bj"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bj"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bj"] .public-section-title, body[data-design="bj"] .public-page-header h1, body[data-design="bj"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bj"] .public-page-header { padding-top: 48px; } body[data-design="bj"] .public-page-header .public-eyebrow, body[data-design="bj"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bj"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bj"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bj"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bj"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bj"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bj"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bj"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bj"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bj"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bj"] .public-banner-inner { padding: 44px 0; } body[data-design="bj"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bj"] .public-section-title, body[data-design="bj"] .public-page-header h1, body[data-design="bj"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BK — "Magazine" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bk"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bk"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bk"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bk"] .public-app-promo { display: none; } body[data-design="bk"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bk"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bk"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bk"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bk"] .public-actions { justify-content: flex-start; } body[data-design="bk"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bk"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bk"] .public-section-title, body[data-design="bk"] .public-page-header h1, body[data-design="bk"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bk"] .public-page-header { padding-top: 48px; } body[data-design="bk"] .public-page-header .public-eyebrow, body[data-design="bk"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bk"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bk"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bk"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bk"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bk"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bk"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bk"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bk"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bk"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bk"] .public-banner-inner { padding: 44px 0; } body[data-design="bk"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bk"] .public-section-title, body[data-design="bk"] .public-page-header h1, body[data-design="bk"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BL — "Dock" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bl"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bl"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bl"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bl"] .public-app-promo { display: none; } body[data-design="bl"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bl"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bl"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bl"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bl"] .public-actions { justify-content: flex-start; } body[data-design="bl"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bl"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bl"] .public-section-title, body[data-design="bl"] .public-page-header h1, body[data-design="bl"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bl"] .public-page-header { padding-top: 48px; } body[data-design="bl"] .public-page-header .public-eyebrow, body[data-design="bl"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bl"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bl"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bl"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bl"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bl"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bl"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bl"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bl"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bl"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bl"] .public-banner-inner { padding: 44px 0; } body[data-design="bl"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bl"] .public-section-title, body[data-design="bl"] .public-page-header h1, body[data-design="bl"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BM — "Split" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bm"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bm"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bm"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bm"] .public-app-promo { display: none; } body[data-design="bm"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bm"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bm"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bm"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bm"] .public-actions { justify-content: flex-start; } body[data-design="bm"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bm"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bm"] .public-section-title, body[data-design="bm"] .public-page-header h1, body[data-design="bm"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bm"] .public-page-header { padding-top: 48px; } body[data-design="bm"] .public-page-header .public-eyebrow, body[data-design="bm"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bm"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bm"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bm"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bm"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bm"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bm"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bm"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bm"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bm"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bm"] .public-banner-inner { padding: 44px 0; } body[data-design="bm"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bm"] .public-section-title, body[data-design="bm"] .public-page-header h1, body[data-design="bm"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BN — "Portal" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bn"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bn"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bn"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bn"] .public-app-promo { display: none; } body[data-design="bn"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bn"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bn"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bn"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bn"] .public-actions { justify-content: flex-start; } body[data-design="bn"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bn"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bn"] .public-section-title, body[data-design="bn"] .public-page-header h1, body[data-design="bn"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bn"] .public-page-header { padding-top: 48px; } body[data-design="bn"] .public-page-header .public-eyebrow, body[data-design="bn"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bn"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bn"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bn"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bn"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bn"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bn"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bn"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bn"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bn"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bn"] .public-banner-inner { padding: 44px 0; } body[data-design="bn"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bn"] .public-section-title, body[data-design="bn"] .public-page-header h1, body[data-design="bn"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BO — "Broadcast" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bo"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bo"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bo"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bo"] .public-app-promo { display: none; } body[data-design="bo"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bo"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bo"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bo"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bo"] .public-actions { justify-content: flex-start; } body[data-design="bo"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bo"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bo"] .public-section-title, body[data-design="bo"] .public-page-header h1, body[data-design="bo"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bo"] .public-page-header { padding-top: 48px; } body[data-design="bo"] .public-page-header .public-eyebrow, body[data-design="bo"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bo"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bo"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bo"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bo"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bo"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bo"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bo"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bo"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bo"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bo"] .public-banner-inner { padding: 44px 0; } body[data-design="bo"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bo"] .public-section-title, body[data-design="bo"] .public-page-header h1, body[data-design="bo"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BP — "Almanac" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bp"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bp"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bp"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bp"] .public-app-promo { display: none; } body[data-design="bp"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bp"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bp"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bp"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bp"] .public-actions { justify-content: flex-start; } body[data-design="bp"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bp"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bp"] .public-section-title, body[data-design="bp"] .public-page-header h1, body[data-design="bp"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bp"] .public-page-header { padding-top: 48px; } body[data-design="bp"] .public-page-header .public-eyebrow, body[data-design="bp"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bp"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bp"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bp"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bp"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bp"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bp"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bp"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bp"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bp"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bp"] .public-banner-inner { padding: 44px 0; } body[data-design="bp"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bp"] .public-section-title, body[data-design="bp"] .public-page-header h1, body[data-design="bp"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BQ — "Ledger" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bq"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bq"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bq"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bq"] .public-app-promo { display: none; } body[data-design="bq"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bq"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bq"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bq"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bq"] .public-actions { justify-content: flex-start; } body[data-design="bq"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bq"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bq"] .public-section-title, body[data-design="bq"] .public-page-header h1, body[data-design="bq"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bq"] .public-page-header { padding-top: 48px; } body[data-design="bq"] .public-page-header .public-eyebrow, body[data-design="bq"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bq"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bq"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bq"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bq"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bq"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bq"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bq"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bq"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bq"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bq"] .public-banner-inner { padding: 44px 0; } body[data-design="bq"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bq"] .public-section-title, body[data-design="bq"] .public-page-header h1, body[data-design="bq"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BR — "Dockpill" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="br"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="br"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="br"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="br"] .public-app-promo { display: none; } body[data-design="br"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="br"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="br"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="br"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="br"] .public-actions { justify-content: flex-start; } body[data-design="br"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="br"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="br"] .public-section-title, body[data-design="br"] .public-page-header h1, body[data-design="br"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="br"] .public-page-header { padding-top: 48px; } body[data-design="br"] .public-page-header .public-eyebrow, body[data-design="br"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="br"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="br"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="br"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="br"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="br"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="br"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="br"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="br"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="br"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="br"] .public-banner-inner { padding: 44px 0; } body[data-design="br"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="br"] .public-section-title, body[data-design="br"] .public-page-header h1, body[data-design="br"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BS — "Cover" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bs"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bs"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bs"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bs"] .public-app-promo { display: none; } body[data-design="bs"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bs"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bs"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bs"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bs"] .public-actions { justify-content: flex-start; } body[data-design="bs"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bs"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bs"] .public-section-title, body[data-design="bs"] .public-page-header h1, body[data-design="bs"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bs"] .public-page-header { padding-top: 48px; } body[data-design="bs"] .public-page-header .public-eyebrow, body[data-design="bs"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bs"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bs"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bs"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bs"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bs"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bs"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bs"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bs"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bs"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bs"] .public-banner-inner { padding: 44px 0; } body[data-design="bs"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bs"] .public-section-title, body[data-design="bs"] .public-page-header h1, body[data-design="bs"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BT — "Mosaic" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bt"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bt"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bt"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bt"] .public-app-promo { display: none; } body[data-design="bt"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bt"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bt"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bt"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bt"] .public-actions { justify-content: flex-start; } body[data-design="bt"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bt"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bt"] .public-section-title, body[data-design="bt"] .public-page-header h1, body[data-design="bt"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bt"] .public-page-header { padding-top: 48px; } body[data-design="bt"] .public-page-header .public-eyebrow, body[data-design="bt"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bt"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bt"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bt"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bt"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bt"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bt"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bt"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bt"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bt"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bt"] .public-banner-inner { padding: 44px 0; } body[data-design="bt"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bt"] .public-section-title, body[data-design="bt"] .public-page-header h1, body[data-design="bt"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BU — "Terminal" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bu"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bu"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bu"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bu"] .public-app-promo { display: none; } body[data-design="bu"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bu"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bu"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bu"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bu"] .public-actions { justify-content: flex-start; } body[data-design="bu"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bu"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bu"] .public-section-title, body[data-design="bu"] .public-page-header h1, body[data-design="bu"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bu"] .public-page-header { padding-top: 48px; } body[data-design="bu"] .public-page-header .public-eyebrow, body[data-design="bu"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bu"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bu"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bu"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bu"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bu"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bu"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bu"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bu"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bu"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bu"] .public-banner-inner { padding: 44px 0; } body[data-design="bu"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bu"] .public-section-title, body[data-design="bu"] .public-page-header h1, body[data-design="bu"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BV — "Poster" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bv"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bv"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bv"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bv"] .public-app-promo { display: none; } body[data-design="bv"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bv"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bv"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bv"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bv"] .public-actions { justify-content: flex-start; } body[data-design="bv"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bv"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bv"] .public-section-title, body[data-design="bv"] .public-page-header h1, body[data-design="bv"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bv"] .public-page-header { padding-top: 48px; } body[data-design="bv"] .public-page-header .public-eyebrow, body[data-design="bv"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bv"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bv"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bv"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bv"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bv"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bv"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bv"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bv"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bv"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bv"] .public-banner-inner { padding: 44px 0; } body[data-design="bv"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bv"] .public-section-title, body[data-design="bv"] .public-page-header h1, body[data-design="bv"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BW — "Journal" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bw"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bw"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bw"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bw"] .public-app-promo { display: none; } body[data-design="bw"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bw"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bw"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bw"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bw"] .public-actions { justify-content: flex-start; } body[data-design="bw"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bw"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bw"] .public-section-title, body[data-design="bw"] .public-page-header h1, body[data-design="bw"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bw"] .public-page-header { padding-top: 48px; } body[data-design="bw"] .public-page-header .public-eyebrow, body[data-design="bw"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bw"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bw"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bw"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bw"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bw"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bw"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bw"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bw"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bw"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bw"] .public-banner-inner { padding: 44px 0; } body[data-design="bw"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bw"] .public-section-title, body[data-design="bw"] .public-page-header h1, body[data-design="bw"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BX — "Bento" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bx"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bx"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bx"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bx"] .public-app-promo { display: none; } body[data-design="bx"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bx"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bx"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bx"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bx"] .public-actions { justify-content: flex-start; } body[data-design="bx"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bx"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bx"] .public-section-title, body[data-design="bx"] .public-page-header h1, body[data-design="bx"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bx"] .public-page-header { padding-top: 48px; } body[data-design="bx"] .public-page-header .public-eyebrow, body[data-design="bx"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bx"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bx"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bx"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bx"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bx"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bx"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bx"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bx"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bx"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bx"] .public-banner-inner { padding: 44px 0; } body[data-design="bx"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bx"] .public-section-title, body[data-design="bx"] .public-page-header h1, body[data-design="bx"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BY — "Timeline" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="by"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="by"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="by"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="by"] .public-app-promo { display: none; } body[data-design="by"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="by"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="by"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="by"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="by"] .public-actions { justify-content: flex-start; } body[data-design="by"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="by"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="by"] .public-section-title, body[data-design="by"] .public-page-header h1, body[data-design="by"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="by"] .public-page-header { padding-top: 48px; } body[data-design="by"] .public-page-header .public-eyebrow, body[data-design="by"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="by"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="by"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="by"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="by"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="by"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="by"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="by"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="by"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="by"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="by"] .public-banner-inner { padding: 44px 0; } body[data-design="by"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="by"] .public-section-title, body[data-design="by"] .public-page-header h1, body[data-design="by"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN BZ — "Atlas" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="bz"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="bz"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="bz"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="bz"] .public-app-promo { display: none; } body[data-design="bz"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="bz"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="bz"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="bz"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="bz"] .public-actions { justify-content: flex-start; } body[data-design="bz"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="bz"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="bz"] .public-section-title, body[data-design="bz"] .public-page-header h1, body[data-design="bz"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="bz"] .public-page-header { padding-top: 48px; } body[data-design="bz"] .public-page-header .public-eyebrow, body[data-design="bz"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="bz"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="bz"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="bz"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="bz"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="bz"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="bz"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="bz"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="bz"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="bz"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="bz"] .public-banner-inner { padding: 44px 0; } body[data-design="bz"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="bz"] .public-section-title, body[data-design="bz"] .public-page-header h1, body[data-design="bz"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* =========================================================================== DESIGN CA — "Scrapbook" (dormant; cloned from G base block, reshape me) =========================================================================== */ /* ── Header: quiet hairline, no centering ──────────────────────────────────── */ body[data-design="ca"] .public-topbar { border-bottom: 1px solid var(--public-line); } body[data-design="ca"] .brand-title { letter-spacing: -0.01em; } /* ── Hero: single LEFT column, giant title, drop the app card ──────────────── */ body[data-design="ca"] .public-banner-inner { display: block !important; padding: 64px 0; } body[data-design="ca"] .public-app-promo { display: none; } body[data-design="ca"] .public-banner-copy { max-width: 900px; margin: 0; text-align: left; } body[data-design="ca"] .public-eyebrow { /* strip the pill → editorial kicker with an accent left rule */ border: none; background: none; padding: 0 0 0 14px; border-left: 4px solid var(--public-accent); border-radius: 0; letter-spacing: 0.2em; } body[data-design="ca"] .public-title { font-size: clamp(3rem, 9vw, 6.2rem); line-height: 0.92; letter-spacing: -0.035em; margin: 20px 0 16px; } body[data-design="ca"] .public-copy { max-width: 56ch; font-size: 1.18rem; } body[data-design="ca"] .public-actions { justify-content: flex-start; } body[data-design="ca"] .public-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--public-accent); margin-top: 36px; padding-top: 8px; } body[data-design="ca"] .public-stat { border-top: none; border-bottom: none; text-align: left; } /* ── Section headings + page intros: thick accent left-border, big type ────── */ body[data-design="ca"] .public-section-title, body[data-design="ca"] .public-page-header h1, body[data-design="ca"] .public-photo-strip-title { border-left: 6px solid var(--public-accent); padding-left: 18px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; } body[data-design="ca"] .public-page-header { padding-top: 48px; } body[data-design="ca"] .public-page-header .public-eyebrow, body[data-design="ca"] .public-section-copy { text-align: left; } /* ── Feature cards → borderless editorial rows split by hairlines ──────────── */ body[data-design="ca"] .public-home-feature-grid { grid-template-columns: 1fr; gap: 0; } body[data-design="ca"] .public-home-feature-card { border: none; background: none; box-shadow: none; border-left: 4px solid var(--public-accent); border-top: 1px solid var(--public-line); padding: 30px 0 30px 22px; } body[data-design="ca"] .public-home-feature-card:last-child { border-bottom: 1px solid var(--public-line); } body[data-design="ca"] .public-home-feature-title { font-size: 1.4rem; letter-spacing: -0.02em; } /* ── Buttons: broadsheet — squared, thin-ruled, uppercase, restrained ───────── */ body[data-design="ca"] .public-btn { border-radius: 0; border-width: 1px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem; box-shadow: none; } body[data-design="ca"] .public-btn:hover { transform: none; box-shadow: none; } body[data-design="ca"] .public-btn.primary { background: var(--public-text); border-color: var(--public-text); color: var(--public-bg); } body[data-design="ca"] .public-btn.primary:hover { background: var(--public-accent); border-color: var(--public-accent); color: #fff; } /* ── Footer: keep the left rail, no centering ──────────────────────────────── */ body[data-design="ca"] .public-footer-brand-row { justify-content: flex-start; } /* Mobile: thinner rules, keep the asymmetry graceful */ @media (max-width: 720px) { body[data-design="ca"] .public-banner-inner { padding: 44px 0; } body[data-design="ca"] .public-stat-row { grid-template-columns: 1fr; gap: 12px; } body[data-design="ca"] .public-section-title, body[data-design="ca"] .public-page-header h1, body[data-design="ca"] .public-photo-strip-title { border-left-width: 4px; padding-left: 12px; } } /* ===== design-colors.css ===== */ /* ───────────────────────────────────────────────────────────────────────────── PER-DESIGN COLOR — ALL template designs (e–z) are NEUTRAL. Every floor plan pins NO colors and NO fonts: it floats entirely on the palette + per-club brand accent + font axes, so ANY design can be ordered in ANY paint and ANY type (the configurator model). e–i were converted from forced color worlds to neutral on 2026-07-20 to join the any-paint/font pool with k–z. All template designs are forced to a consistent LIGHT theme (NEUTRAL_LIGHT_DESIGNS in MainLayout) so a club looks the same to every visitor. Ashippun (design "a") is untouched. ───────────────────────────────────────────────────────────────────────────── */ /* ── k · Lodge — a NEUTRAL floor plan (letterhead header · split hero · framed gallery · certificate CTA). DORMANT (not in worker/assign.ts). Per the configurator model, design k pins NO colors and NO fonts here: it floats entirely on the palette + per-club brand accent + font axes, so a club can order the Lodge FLOOR PLAN in ANY paint and ANY type. The structure lives in HomeK/ HeaderK + the designs.css [data-design="k"] block; all of it reads only --public-* vars. (This is the corrected model — floor plan ≠ a locked color/font.) ── */ /* ── Live-band hidden-state guard ──────────────────────────────────────────── Keeps the home live band's initially-hidden elements hidden until the shared home script reveals them (a class `display` can beat the UA `[hidden]{display:none}` and flash an empty panel). Scoped to template designs; Ashippun's default home untouched. */ .public-body[data-design] #weatherContent[hidden], .public-body[data-design] #weatherShootSection[hidden], .public-body[data-design] #eventContent[hidden], .public-body[data-design] #leagueContent[hidden], .public-body[data-design] #leagueSeasonLabel[hidden], .public-body[data-design] #shootNightContent[hidden], .public-body[data-design] #weatherAlertBubble[hidden] { display: none !important; } /* ── l · Varsity — a NEUTRAL floor plan (athletic banner hero · scoreboard live band · block headings). DORMANT (not in worker/assign.ts). Pins NO colors/fonts — floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── m · Almanac — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── n · Homestead — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── o · Standard — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── p · Mosaic — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── q · Foyer — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── r · Vista — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── s · Milepost — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── t · Axis — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── u · Broadside — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── v · Concourse — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── w · Switchback — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── x · Shelf — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── y · Exhibit — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── z · Chapbook — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── aa · Reel — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── ab · Bulletin — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── ac · Console — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── ad · Newsstand — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── ae · Crest — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── af · Sitrep — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── ag · Keepsake — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── ah · Trailhead — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── ai · Plat — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── aj · Compass — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── ak · Provenance — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── al · Ribbon — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── am · Overlook — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ── an · Fieldbook — a NEUTRAL floor plan. DORMANT. Pins NO colors/fonts; floats on the palette + brand accent + font axes, per the configurator model. ── */ /* ===== inner-compose.css ===== */ /* ═══════════════════════════════════════════════════════════════════════════ COMPOSED INNER-PAGE BODY STYLES — restyle a composed inner page's content (the slotted public-* sections) by [inner-cmp-] so a club's inner pages get a distinct rhythm. Global (reaches slotted content). Neutral tokens. Applies only inside .inner-cmp (composed inner pages); other designs untouched. ═════════════════════════════════════════════════════════════════════════════ */ .inner-cmp { --icmp-pad: clamp(2.4rem, 5.5vw, 4rem); } .inner-cmp .inner-cmp-body > .public-section { padding-block: var(--icmp-pad); } /* airy — generous whitespace, flat bands off */ .inner-cmp-airy { --icmp-pad: clamp(2.8rem, 6.5vw, 5rem); } .inner-cmp-airy .inner-cmp-body .public-band { background: transparent; } /* dense — compact rhythm, tighter type block */ .inner-cmp-dense { --icmp-pad: clamp(1.5rem, 3.5vw, 2.6rem); } .inner-cmp-dense .inner-cmp-body .public-simple-block p { line-height: 1.55; } /* banded — every other section carries a soft fill (strong horizontal rhythm) */ .inner-cmp-banded .inner-cmp-body > .public-section:nth-of-type(even) { background: var(--public-bg-soft, var(--public-bg-alt)); } .inner-cmp-banded .inner-cmp-body > .public-section:nth-of-type(odd).public-band { background: transparent; } /* ruled — editorial: sections separated by hairline top rules, no fills */ .inner-cmp-ruled .inner-cmp-body > .public-section { border-top: 1px solid var(--public-line); } .inner-cmp-ruled .inner-cmp-body > .public-section:first-child { border-top: none; } .inner-cmp-ruled .inner-cmp-body .public-band { background: transparent; } .inner-cmp-ruled .inner-cmp-body .public-simple-block h3, .inner-cmp-ruled .inner-cmp-body .public-simple-block h2 { letter-spacing: 0.01em; } /* edged — left accent rule on each content block for a documented feel */ .inner-cmp-edged .inner-cmp-body .public-simple-block { border-left: 3px solid var(--public-accent); padding-left: clamp(0.9rem, 2vw, 1.4rem); } .inner-cmp-edged .inner-cmp-body .public-band { background: var(--public-bg-soft, var(--public-bg-alt)); } /* ── FOUR MORE INNER RHYTHMS (5 -> 9) ──────────────────────────────────────── innerstyle sets how sections on an inner page are SEPARATED — fills, rules, edges, spacing. It applies to all EIGHT inner pages at once, which makes it the cheapest structural axis per page touched, and it was sitting at five. These use the same hooks the original five do (.inner-cmp-body > .public-section, .public-simple-block, .public-band) so they work across every page body without per-page work. */ /* framed — each section is a hairline card rather than a band of the page. */ .inner-cmp-framed .inner-cmp-body > .public-section { border: 1px solid var(--public-line); border-radius: var(--public-radius, 14px); margin-block: clamp(0.7rem, 2vw, 1.2rem); } .inner-cmp-framed .inner-cmp-body .public-band { background: transparent; } /* tinted — a faint accent wash on alternating sections; softer than `banded`, which uses the neutral soft background. */ .inner-cmp-tinted .inner-cmp-body > .public-section:nth-of-type(even) { background: color-mix(in srgb, var(--public-accent) 6%, var(--public-bg)); } .inner-cmp-tinted .inner-cmp-body > .public-section:nth-of-type(odd).public-band { background: transparent; } /* spaced — no fills or rules at all; separation is pure air, with a small centred accent dot between sections. The quietest rhythm in the set. */ .inner-cmp-spaced .inner-cmp-body > .public-section { padding-block: clamp(2rem, 6vw, 4rem); } .inner-cmp-spaced .inner-cmp-body .public-band { background: transparent; } .inner-cmp-spaced .inner-cmp-body > .public-section + .public-section::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--public-accent); margin: 0 auto clamp(1.4rem, 4vw, 2.4rem); opacity: 0.6; } /* indent — hanging section heads: the heading sits out to the left of its body, a report/documented feel none of the other rhythms has. Collapses on a phone, where there is no room to hang anything. */ @media (min-width: 861px) { .inner-cmp-indent .inner-cmp-body .public-simple-block { padding-left: 6.5rem; position: relative; } .inner-cmp-indent .inner-cmp-body .public-simple-block > h2, .inner-cmp-indent .inner-cmp-body .public-simple-block > h3 { position: absolute; left: 0; top: 0; width: 5.6rem; margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--public-accent); line-height: 1.3; } } .inner-cmp-indent .inner-cmp-body > .public-section { border-top: 1px solid var(--public-line-soft, var(--public-line)); } .inner-cmp-indent .inner-cmp-body > .public-section:first-child { border-top: none; } /* ═══════════════════════════════════════════════════════════════════════════ ⚠ ASSEMBLED MARKUP — READ BEFORE ADDING A RHYTHM These rules originally targeted `.public-section` and `.public-simple-block`. Once the eight inner pages were ASSEMBLED they stopped emitting either: the body is now `.inner-cmp-body > .asm > .asm-region`, with `.asm-w` as the width wrapper around each content block. The `inner-cmp-