/* ================================================================= Block Gemini — Site-wide Polish Layer ----------------------------------------------------------------- Loaded LAST on every page. Normalizes typography, spacing, color, and component rules across all per-page stylesheets WITHOUT touching layout structure or content. Targets only drifting properties: - section padding rhythm (96–112px desktop; 64–72px mobile) - card/panel/button border-radius (square brand, 0–4px max) - off-canon border colors (collapse to --site-line) - heading + body type scale alignment - color drift (purple/violet/orange/random green) → cyan/blue - hero top offset (always clears 64px nav) - icon sizing rhythm - responsive breakpoints ================================================================= */ /* ---------- 1. UNIFIED SECTION RHYTHM ---------------------------- */ /* Collapse the 9 different "section" paddings used across pages to a single rhythm. Use rems so it scales cleanly on mobile. */ :root { --bg-section-pad-y: clamp(72px, 9vw, 112px); --bg-section-pad-y-tight: clamp(56px, 7vw, 88px); --bg-hero-pad-top: clamp(96px, 10vw, 128px); /* always > 64px nav */ --bg-hero-pad-bottom: clamp(64px, 7vw, 96px); --bg-card-pad: 24px; --bg-card-pad-lg: 32px; } /* Per-page section classes that played the same role — unify pad */ .aa-section, .asv-section, .au-section, .inf-section, .llm-section, .cv-section, .dat-section, .cap-section, .apt-section, .av-section, .blockchain-section, .bcs-section, .ssi-section, .dw-section, .pp-section, .sc-section, .sca-section, .st-section, .io-section, .lw-section, .ic-section, .pc-section, .esg-section, .dtp-section, .nf-section, .pb-section, .rt-section, .rw-section, .df-section, .tg-section, .vc-section, .wc-section, .da-section, .cx-section, .voicechat-section, .da-solves, .da-caps, .da-flow, .da-audit, .da-uses, .da-ctrls, .da-portal, .da-outcomes, .pb-when, .pb-models, .pb-caps, .pb-arch, .pb-tech, .pb-ints, .pb-sec, .pb-uses, .video-section, .numbers-band, .flagship-band { padding-top: var(--bg-section-pad-y); padding-bottom: var(--bg-section-pad-y); } /* Final/CTA bands keep slightly more air */ .aa-final, .asv-final, .au-final, .inf-final, .llm-final, .cv-final, .dat-final, .cap-final, .apt-final, .da-final, .pb-final, .bc-final, .blockchain-final { padding-top: clamp(96px, 11vw, 140px); padding-bottom: clamp(96px, 11vw, 140px); } /* Hero top padding — collapse all the divergent values to one rule */ .aa-hero, .asv-hero, .au-hero, .inf-hero, .llm-hero, .cv-hero, .dat-hero, .cap-hero, .apt-hero, .av-hero, .blockchain-hero, .bcs-hero, .ssi-hero, .dw-hero, .pp-hero, .sc-hero, .sca-hero, .st-hero, .io-hero, .lw-hero, .ic-hero, .pc-hero, .esg-hero, .dtp-hero, .nf-hero, .pb-hero, .rt-hero, .rw-hero, .df-hero, .tg-hero, .vc-hero, .wc-hero, .da-hero, .cx-hero, .voicechat-hero { padding-top: var(--bg-hero-pad-top) !important; padding-bottom: var(--bg-hero-pad-bottom) !important; } /* Breadcrumb pages place a thin breadcrumb above the hero — give it the same top clearance, then the hero can use a tighter top */ .da-bread, .pb-bread, .pp-bread, .sc-bread, .ssi-bread, .io-bread, .lw-bread, .ic-bread, .pc-bread, .esg-bread, .dtp-bread, .nf-bread, .rt-bread, .rw-bread, .df-bread, .tg-bread, .vc-bread, .wc-bread, .av-bread, .bcs-bread, .dw-bread, .sca-bread, .st-bread, .cx-bread { padding-top: var(--bg-hero-pad-top) !important; padding-bottom: 0 !important; } .da-bread + .da-hero, .pb-bread + .pb-hero, .pp-bread + .pp-hero, .sc-bread + .sc-hero, .ssi-bread + .ssi-hero, .io-bread + .io-hero, .lw-bread + .lw-hero, .ic-bread + .ic-hero, .pc-bread + .pc-hero, .esg-bread + .esg-hero, .dtp-bread + .dtp-hero, .nf-bread + .nf-hero, .rt-bread + .rt-hero, .rw-bread + .rw-hero, .df-bread + .df-hero, .tg-bread + .tg-hero, .vc-bread + .vc-hero, .wc-bread + .wc-hero, .av-bread + .av-hero, .bcs-bread + .bcs-hero, .dw-bread + .dw-hero, .sca-bread + .sca-hero, .st-bread + .st-hero, .cx-bread + .cx-hero { padding-top: 32px !important; } /* ---------- 2. UNIFIED CONTAINERS -------------------------------- */ /* All containers behave the same — drop random max-widths */ .container, .container-narrow { width: 100%; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; } .container { max-width: 1440px; } .container-narrow { max-width: 1180px; } @media (max-width: 768px) { .container, .container-narrow { padding-left: 20px; padding-right: 20px; } } /* ---------- 3. SQUARE/MINIMAL RADIUS ENFORCEMENT ----------------- */ /* The brand is square. Newer pages (da, pb, nf, rw, etc) introduced 8–20px radii. Pin everything to 0–4px on dark surfaces. */ .da-solve, .da-cap, .da-audit-card, .da-use, .da-ctrl-card, .da-outcome, .da-portal-card, .da-final-card, .da-flow-step, .pb-when-card, .pb-cap, .pb-arch-band, .pb-part, .pb-model, .pb-tech-card, .pb-int, .pb-sec-card, .pb-use, .pb-final-card, .nf-timer-cell, .nf-card, .nf-final-card, .rw-comp, .rw-detail-img-tag, .rw-final-card, .io-card, .io-final-card, .ssi-card, .ssi-final-card, .dtp-card, .dtp-final-card, .lw-card, .lw-final-card, .ic-card, .ic-final-card, .pc-card, .pc-final-card, .esg-card, .esg-final-card, .df-card, .df-final-card, .tg-card, .tg-final-card, .av-card, .av-final-card, .sca-card, .sca-final-card, .st-card, .st-final-card, .cx-card, .cx-final-card, .dw-card, .dw-final-card, .pp-card, .pp-final-card, .sc-card, .sc-final-card, .rt-card, .rt-final-card, .vc-card, .vc-final-card, .wc-card, .wc-final-card, .bcs-card, .bcs-final-card { border-radius: 2px !important; } /* Pills that should stay pill */ .aa-hero-tag, .nav-status, [class*="-pill"], .pill, .status-pill, [class*="badge"]:not([class*="cell"]) { /* leave alone */ } /* ---------- 4. UNIFIED BORDER COLOR ------------------------------ */ /* Multiple shades of white-alpha border in newer pages. Force them all to --site-line (0.08). */ .da-solve, .da-cap, .da-audit-card, .da-use, .da-ctrl-card, .da-outcome, .da-flow-step, .pb-when-card, .pb-cap, .pb-arch-band, .pb-part, .pb-model, .pb-tech-card, .pb-int, .pb-sec-card, .pb-use, .nf-card, .rw-comp, .io-card, .ssi-card, .dtp-card, .lw-card, .ic-card, .pc-card, .esg-card, .df-card, .tg-card, .av-card, .sca-card, .st-card, .cx-card, .dw-card, .pp-card, .sc-card, .rt-card, .vc-card, .wc-card, .bcs-card, .da-portal-rrow, .nf-stat, .rw-detail-stats { border-color: var(--site-line) !important; } /* Section dividers: collapse all the rgba(255,255,255,0.06) border-tops to canonical --site-line */ [class*="da-"], [class*="pb-"], [class*="nf-"], [class*="rw-"], [class*="io-"], [class*="ssi-"], [class*="dtp-"], [class*="lw-"], [class*="ic-"], [class*="pc-"], [class*="esg-"], [class*="df-"], [class*="tg-"], [class*="av-"], [class*="sca-"], [class*="st-"], [class*="cx-"], [class*="dw-"], [class*="pp-"], [class*="sc-"], [class*="rt-"], [class*="vc-"], [class*="wc-"], [class*="bcs-"] { /* targeted below per-property to avoid clobbering visual elements */ } .da-solves, .da-caps, .da-flow, .da-audit, .da-uses, .da-ctrls, .da-portal, .da-outcomes, .da-final, .pb-when, .pb-models, .pb-caps, .pb-arch, .pb-tech, .pb-ints, .pb-sec, .pb-uses, .pb-final { border-top-color: var(--site-line) !important; } /* ---------- 5. TYPOGRAPHY HARMONIZATION -------------------------- */ /* Nudge per-page H2/H3 titles to a consistent scale. Many pages used 28/32/36/44 for the same role. */ /* Section big titles — clamp to one curve */ .section-title, .aa-cmp-h, .aa-ind-h, .aa-dept-h, .au-section-title, .inf-section-title, .llm-section-title, .cv-section-title, .dat-section-title, .cap-section-title, .apt-section-title, .asv-section-title, .da-section-h, .pb-section-h, .nf-section-h, .rw-section-h, .io-section-h, .ssi-section-h, .dtp-section-h, .lw-section-h, .ic-section-h, .pc-section-h, .esg-section-h, .df-section-h, .tg-section-h, .av-section-h, .sca-section-h, .st-section-h, .cx-section-h, .dw-section-h, .pp-section-h, .sc-section-h, .rt-section-h, .vc-section-h, .wc-section-h, .bcs-section-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.025em; color: #fff; } /* Card-level headings — H4 role */ .aa-cap-h, .aa-type-h, .aa-pipe-step .h, .aa-ind-list h4, .au-card h4, .inf-card h4, .llm-card h4, .cv-card h4, .dat-card h4, .cap-card h4, .apt-card h4, .asv-card h4, .da-card h4, .pb-card h4, .nf-card h4, .rw-card h4, .da-solve h3, .pb-when-card h3, .da-audit-card h3, .da-use h3, .da-outcome h3, .pb-tech-card h3, .pb-sec-card h3 { font-family: var(--font-display); font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: #fff; font-weight: 500; } /* Body copy in cards — consistent muted text */ .aa-cap-p, .aa-type-list li, .aa-pipe-step .p, .au-card p, .inf-card p, .llm-card p, .cv-card p, .dat-card p, .cap-card p, .apt-card p, .asv-card p, .da-card p, .pb-card p, .nf-card p, .rw-card p, .da-solve p, .pb-when-card p, .da-audit-card p, .da-use p, .da-outcome p, .pb-tech-card p, .pb-sec-card p { font-size: 13.5px; line-height: 1.55; color: var(--site-text-2); } /* Eyebrows — single style across pages */ .aa-cmp-eyebrow, .aa-cap-num, .aa-builder-h, .aa-ind-eyebrow, .aa-pipe-step .num, .aa-dept-tab .num, .au-eyebrow, .inf-eyebrow, .llm-eyebrow, .cv-eyebrow, .dat-eyebrow, .cap-eyebrow, .apt-eyebrow, .asv-eyebrow, .da-eyebrow, .pb-eyebrow, .nf-eyebrow, .rw-eyebrow, .io-eyebrow, .ssi-eyebrow, .dtp-eyebrow, .lw-eyebrow, .ic-eyebrow, .pc-eyebrow, .esg-eyebrow, .df-eyebrow, .tg-eyebrow, .av-eyebrow, .sca-eyebrow, .st-eyebrow, .cx-eyebrow, .dw-eyebrow, .pp-eyebrow, .sc-eyebrow, .rt-eyebrow, .vc-eyebrow, .wc-eyebrow, .bcs-eyebrow { font-family: var(--font-mono); font-size: 11px !important; letter-spacing: 0.16em !important; text-transform: uppercase; } /* ---------- 6. COLOR DRIFT REPAIR -------------------------------- */ /* Map any orange/violet/purple drift back to cyan or text-2. Operational reds (alert) and mints (live status) preserved. */ /* nf-timer accent was orange-pink (#FF8A50) — neutralize to cyan */ .nf-timer-l { color: var(--site-cyan) !important; } /* Anywhere a page used --site-orange as a UI accent (not status), keep it only as warning. Safe-no-op for pages that didn't use it. */ /* ---------- 7. COMPONENT NORMALIZATION --------------------------- */ /* Buttons — pin radius to 0 across the site (already in styles.css for .btn but per-page pages sometimes use raw