/* ============================================================ Redesign integration shim — loaded LAST, after styles.css + design-overrides.css + sovereign-overrides.css, only on the two redesigned pages. Two jobs: 1. Point --sans at the repo's bundled Avenir (AvenirLTStd, exposed by the Next root layout as --font-avenir on ). The original static CSS relied on a Mac-only "Avenir Next" system font, which would fall back to a generic sans for most visitors. 2. Re-assert the dark page theme with `html body` (specificity 0,0,2) so it always beats the app's globals.css `body { background:#fff }` (0,0,1) regardless of order in the static export. ============================================================ */ body { --sans: var(--font-avenir), "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Design pass: unify typography — body/long-form now use the same structural sans stack as nav/headings/CTAs. No serif face anywhere. */ --serif: var(--sans); } html body { background: var(--blue-charcoal); color: var(--white); font-family: var(--serif); overflow-x: hidden; } /* STACKING FIX: give every glow container its own stacking context so the z-index:0 glow `::after` and z-index:1 cells layer WITHIN the grid and the whole grid paints as one unit above the section background. Without this, the glow `::after` was getting hoisted into the ancestor `.container` (z-index:3) stacking context and painting where it wasn't visible. */ .mouse-glow { isolation: isolate; } /* ROOT-CAUSE FIX: design-overrides.css has `.pillar-grid::after { content: none !important }` (a leftover meant to hide an old grid-corner ornament). But `.pillar-grid` IS the `.mouse-glow` container, so that rule stopped the cursor-glow `::after` pseudo from ever generating — which is why nothing we did to opacity/background/z-index/cache had any effect. Restore content so the glow pseudo exists. (Loads after design-overrides, so it wins the tie.) */ .mouse-glow::after { content: "" !important; } /* Mouse-glow reveal — driven by a JS-toggled `.glow-on` class (added on pointer enter/move by RedesignBehaviors) in addition to the original CSS :hover. The :hover path was not firing reliably in embedded preview contexts, leaving the cursor-glow + per-cell edge glow invisible. */ .mouse-glow.glow-on::after { opacity: 1 !important; } .mouse-glow.glow-on > *::before, .mouse-glow.glow-on > *::after { opacity: 1 !important; } /* PERF/GLOW FIX: the scroll-fade entrance transitions `filter: blur()` to `none`, but Chrome settles a transitioned filter at `blur(0px)` (not true `none`). That residual filter context CLIPS the Stripe mouse-glow on the pillar/proof cards — which is why the cursor-glow worked on 4749 (no scroll-fade) but vanished on the port. Force filter:none on every scroll-fade state so no filter context ever exists. The entrance keeps its fade + slide + scale; only the (subtle) blur is dropped. */ .sf-init, .sf-init.sf-in, .sf-init.sf-out { filter: none !important; } /* ============================================================ DOORS — approved glow treatment. Layers the atmospheric under-glow + hover bloom + inner-panel lift ON TOP of the existing chrome we keep: the L-pad corners, the four edge glow-lines, and the 1px border. The circling border-trace stays removed (SVG borders already display:none). ============================================================ */ .door { overflow: visible; transition: transform .4s ease, filter .4s ease, background .35s ease, border-color .35s ease; } /* CARD-SHAPED edge glow (replaces the old radial-ellipse halo, which read as a soft blob). A pseudo sized exactly to the card border-box: its layered box-shadow stack emanates from the card's rectangle edges, so the glow FOLLOWS THE CARD OUTLINE rather than forming an ellipse. The tightest layer is a bright #cfe0ff edge line hugging the perimeter; the wider mariner layers bloom outward. Subtle at rest so doors read as glowing, bright on hover. This is the `.door-border-edge` treatment from the design package, rebuilt in CSS (the SVG layer was dropped during the React port). No circling trace. */ .door::before { content: "" !important; display: block !important; position: absolute; inset: 0; border-radius: 2px; z-index: -2; pointer-events: none; /* resting: faint card-shaped halo */ box-shadow: 0 0 3px rgba(207, 224, 255, 0.30), 0 0 9px rgba(45, 109, 217, 0.20), 0 0 20px rgba(45, 109, 217, 0.14), 0 0 38px rgba(45, 109, 217, 0.08); /* Fast fade-OUT (.2s) on mouse-leave, slow fade-IN handled below. */ transition: box-shadow .2s ease; } .door:hover { transform: translateY(-4px); filter: drop-shadow(0 24px 60px rgba(45, 109, 217, 0.40)); /* downward bloom */ } /* hover: bright #cfe0ff edge line + intensified outward bloom, smooth rise */ .door:hover::before { box-shadow: 0 0 3px rgba(207, 224, 255, 0.95), 0 0 10px rgba(207, 224, 255, 0.55), 0 0 22px rgba(45, 109, 217, 0.50), 0 0 44px rgba(45, 109, 217, 0.32); transition: box-shadow .4s ease; } /* inner panel: transparent at rest (under-glow shows through), lifts on hover */ .door-inner { background: repeating-linear-gradient(90deg, rgba(160, 200, 255, 0.02) 0 1px, transparent 1px 4px), linear-gradient(180deg, rgba(8, 18, 52, 0) 0%, rgba(2, 8, 30, 0) 100%) !important; box-shadow: none; transition: background .35s ease, box-shadow .35s ease; } .door:hover .door-inner { background: repeating-linear-gradient(90deg, rgba(160, 200, 255, 0.025) 0 1px, transparent 1px 4px), linear-gradient(180deg, rgba(8, 18, 52, 0.55) 0%, rgba(2, 8, 30, 0.65) 100%) !important; box-shadow: inset 0 1.5px 0 rgba(190, 220, 255, 0.35), inset 0 -20px 30px rgba(0, 10, 40, 0.4); }