/* ===================================================== SHOWCASE LAYER — css/showcase.css (branch: showcase/pinnacle) "Night Ledger": the night-showroom light story staged for real, set in the brand's single-family Poppins type system (no serif). Loads AFTER styles.css and overrides at equal specificity. styles.css is never edited. Acts: I Arrival (hero + marquee) V The Math (pricing) II The Leak (pain) VI The Vault (security) III The Machine (why) VII The Questions (faq) IV The Proof (how-it-works) VIII Dawn (book-demo finale) NOTE (branch: homepage-restructure): on this branch the timeline moved to #why and the CDK demo section is #how-it-works (id "cdk" no longer exists); the ordinals above track that mapping. ============================================================ */ /* ---------- S0. TOKENS + TYPE SCALE ---------- */ :root{ --font-display:"Poppins",system-ui,sans-serif; --amber-hot:#FFB454; --gold-dawn:#FFE0A6; --cool-key:#B9C8FF; --carmine-deep:#6E1B24; --ink-red:#FF6B72; /* Display scale grows: the page finally uses its vertical real estate */ --text-h1:clamp(2.7rem,1.35rem + 4.6vw,4.35rem); --text-h2:clamp(2.05rem,1.3rem + 3vw,3rem); } /* ---------- S1. GLOBAL TYPE SYSTEM ---------- Single family: Poppins carries voice (headlines, italic accents) AND every UI surface, body line, and numeral (the brand kit's one-face rule), contrast comes from weight extremes, not a second face. Interior headers stay calm white per the sitewide calm pass; the italic accent IS the accent now (matches the wordmark's own upright-plus-italic lockup). */ .section-header h2{ font-family:var(--font-display);font-weight:700;letter-spacing:-0.012em;line-height:1.06} .section-header h2 .grad-text{font-style:italic;font-weight:700} .section-header p{color:var(--text-muted)} /* Act ordinals: claim-free wayfinding stamped before each act's eyebrow */ main{counter-reset:act} .section-header{counter-increment:act} .section-header .eyebrow::before{ content:counter(act,decimal-leading-zero); display:inline-block;margin-right:10px;padding-right:10px; border-right:1px solid rgba(255,255,255,0.18); color:var(--text-muted);letter-spacing:0.08em} /* Self-drawing hairline under every act header (piggybacks the existing .fade-up IntersectionObserver — no new JS, no new observers) */ .section-header.fade-up::after{ content:"";display:block;width:min(240px,38%);height:1px;margin:26px auto 0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.30),transparent); transform:scaleX(0);transition:transform 0.9s var(--ease-out-expo) 0.15s} .section-header.fade-up.visible::after{transform:scaleX(1)} /* ---------- S2. ACT I — ARRIVAL: the staged hero ---------- */ /* Full-height showroom bay: copy centered, marquee pinned to the sill. Layer order (back to front): atmosphere canvas (-3) -> floor (-2) -> pointer glow (-1) -> content. */ .hero{display:flex;flex-direction:column;min-height:calc(100svh + 72px); padding:calc(72px + var(--space-6)) 0 0} /* The GRID owns the auto margins, not the marquee: spare bay height splits evenly above and below the copy. An auto top margin on the marquee instead would pool ALL of it between trust bar and logos on tall viewports. */ .hero .container.hero-grid{width:100%;margin-top:auto;margin-bottom:auto} .hero .logo-marquee{margin-top:0} @media (min-width:1025px){.hero .trust-bar{margin-bottom:56px}} /* Tall-window balance fix: on tall desktop windows the leftover height above min-height used to pool entirely in the marquee's own margin-top:auto gap below the trust chips. Giving the content block a matching margin-top:auto splits that leftover into two equal auto gaps (above the title, below the chips), so the composition stays centered instead of bottom-heavy at any window height. justify-content switches to flex-start so the flex column's own centering never fights these two auto margins. */ @media (min-width:1025px){ .hero{justify-content:flex-start} .hero .container.hero-grid{margin-top:auto} } .hero-atmo{position:absolute;inset:0;z-index:-3;pointer-events:none} .atmo-canvas{position:absolute;inset:0;width:100%;height:100%;display:block} /* Polished showroom floor: a cool sheen plane, plus a warm pool under the card's side of the stage. Reads under the WebGL light; carries the grounding alone if WebGL is absent. */ .hero-floor{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:-2;pointer-events:none; background: radial-gradient(52% 88% at 71% 100%,rgba(255,140,35,0.10),transparent 70%), radial-gradient(80% 120% at 50% 118%,rgba(214,222,240,0.055),transparent 62%), linear-gradient(180deg,transparent 0%,rgba(214,222,240,0.028) 55%,rgba(214,222,240,0.05) 100%)} .hero .trust-item{color:var(--text-primary)} /* Display headline: Poppins at weight 800, with the brand-gradient phrase in italic. Poppins sets wider than the serif it replaced, so the measure widened from 620px to 680px to keep a balanced 3-line headline at 1440. */ .hero-title{font-family:var(--font-display);font-weight:800;letter-spacing:-0.02em; line-height:1.05;max-width:680px;text-wrap:balance} .hero-title .grad-text{font-style:italic;font-weight:700} .hero-sub{max-width:50ch;font-size:clamp(1.02rem,0.95rem + 0.4vw,1.16rem)} .hero-copy{max-width:640px} /* Entrance: copy rises in a stagger; the whole sequence begins as the ignition loader lifts. fill:both so the reduced-motion duration collapse lands every element on its final frame. */ @keyframes scRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}} .hero-title,.hero-sub,.hero-buttons,.hero-cred,.trust-bar{ animation:scRise 0.9s var(--ease-out-expo) both} /* Delays sit just past the ignition loader's 900ms lift on first visit, so the loader wipe hands off into the copy rise as one continuous sequence; on repeat visits (loader skipped) the beat still reads as a deliberate curtain. */ .hero-title{animation-delay:0.40s} .hero-sub{animation-delay:0.53s} .hero-buttons{animation-delay:0.65s} .hero-cred{animation-delay:0.77s} .trust-bar{animation-delay:0.87s} /* The card arrives larger, grounded on the lit floor, with a one-time headlight sweep across its face. */ .hero-card-scene{width:min(100%,500px)} .hero-stage{animation:scRise 1.1s var(--ease-out-expo) 0.60s both} .hero-card-face::after{content:"";position:absolute;inset:-40%;pointer-events:none; mix-blend-mode:screen;opacity:0; background:linear-gradient(115deg,transparent 38%,rgba(255,196,120,0.34) 48%,rgba(255,255,255,0.20) 50%,rgba(255,196,120,0.34) 52%,transparent 62%); transform:translateX(-60%); animation:scSweep 1.3s var(--ease-out-expo) 1.65s 1} @keyframes scSweep{0%{opacity:0;transform:translateX(-60%)}18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateX(60%)}} /* Floor reflection: CUT after audit pass 2. The card's printing occupies its whole bottom quarter, so any visible mirror band kept legible upside-down text (a dated glossy-UI trope), and box-reflect on the bobbing card was the costliest effect on the page. The floor pool + contact shadow carry the grounding; the shadow is the honest cue. */ /* ---------- S3. MARQUEE — chrome sill ---------- */ .logo-marquee{padding:26px 0} .logo-chip img{width:70px;height:70px} /* A single light glint traveling the band's top hairline (transform-only) */ .logo-marquee::before{content:"";position:absolute;top:-1px;left:0;width:30%;height:1px; background:linear-gradient(90deg,transparent,rgba(255,180,84,0.55),transparent); transform:translateX(-100%);animation:scGlint 7s linear infinite;pointer-events:none} @keyframes scGlint{to{transform:translateX(433%)}} /* ---------- S4. ACT II — THE LEAK (restaged 2026-07-28: abstract room, no cards) ---------- The section is a PASSAGE of the showroom where the light turns carmine. The mood lives in the background: .leak-stage hosts the dedicated leak-atmosphere shader (atmosphereLeak() in showcase.js — carmine volumetric churn + embers sinking down the frame); the #pain-points::before wash below is the no-WebGL / reduced-motion fallback AND the under-layer the shader fades in over. Content floats bare on the stage: one display-scale burn figure, three numbered typographic lines with hairline rules that draw in. */ #pain-points::before{background: radial-gradient(48% 54% at 22% 52%,rgba(178,54,63,0.16),transparent 72%), radial-gradient(40% 46% at 84% 70%,rgba(110,27,36,0.20),transparent 74%), radial-gradient(46% 50% at 82% 30%,rgba(255,140,35,0.05),transparent 74%)} .leak-stage{position:absolute;inset:0;z-index:0;pointer-events:none} .leak-stage .atmo-canvas{opacity:0;transition:opacity 1.6s ease} #pain-points.sc-lit .leak-stage .atmo-canvas{opacity:1} /* The burn figure: one bare display-scale number in the dark — no chrome, no card */ .leak-hero{text-align:center;margin:clamp(40px,6vw,72px) auto clamp(48px,7vw,84px);max-width:760px} .leak-hero-kicker{font-size:1.02rem;color:var(--text-secondary);max-width:52ch;margin:0 auto 18px} .leak-hero-kicker strong{color:#E4565D} .leak-hero-num{display:flex;align-items:baseline;justify-content:center;gap:16px;flex-wrap:wrap;margin:0} .leak-hero-num .count{font-size:clamp(4.2rem,2.6rem + 8vw,8.6rem);font-weight:800;line-height:0.95; letter-spacing:-0.035em;color:var(--ink-red);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"; text-shadow:0 0 70px rgba(178,54,63,0.55),0 0 160px rgba(178,54,63,0.25)} .leak-hero-unit{font-size:clamp(1rem,0.85rem + 0.8vw,1.35rem);font-weight:700;text-transform:uppercase; letter-spacing:0.14em;color:var(--text-muted)} .leak-hero-sub{font-size:clamp(1.02rem,0.9rem + 0.6vw,1.25rem);font-weight:600;color:#E4565D;margin:16px 0 0} /* The three pains: a numbered typographic ladder, rules drawing in as each line reveals */ .leak-lines{list-style:none;margin:0 auto;padding:0;max-width:780px} .leak-line{position:relative;display:grid;grid-template-columns:64px 1fr;gap:18px; padding:clamp(22px,3vw,34px) 0} .leak-line::before{content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,rgba(228,86,93,0.55),rgba(228,86,93,0.12) 60%,transparent); transform:scaleX(0);transform-origin:left;transition:transform 1100ms var(--ease-out-expo) 180ms} .leak-line.visible::before{transform:scaleX(1)} .leak-line-num{font-size:0.82rem;font-weight:700;letter-spacing:0.18em;color:#E4565D; padding-top:5px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"; text-shadow:0 0 18px rgba(178,54,63,0.5)} .leak-line-body h3{font-size:clamp(1.15rem,1.05rem + 0.5vw,1.4rem);margin-bottom:8px} .leak-line-body p{font-size:0.98rem;color:var(--text-secondary);max-width:62ch;margin:0} .leak-line-body p strong{color:#E4565D} @media (max-width:600px){ .leak-line{grid-template-columns:1fr;gap:6px} .leak-line-num{padding-top:0} } /* Ledger hairline under the leak figure: red ink gets ruled like a statement */ .leak-meter{padding-bottom:18px;border-bottom:1px solid rgba(228,86,93,0.22)} /* ---------- S5. ACT III — THE MACHINE: center-spine timeline ---------- */ /* Desktop: the spine moves to the page's center line and the step cards alternate sides around it; ghost act numerals sit behind each card. ledgerCurrent() keeps working untouched — it reads node geometry, not layout. Mobile keeps the shipped left-spine layout. */ @media (min-width:1025px){ .hiw{max-width:1180px} .hiw-timeline::before,.hiw-timeline::after{left:50%} .hiw-step{grid-template-columns:1fr var(--hiw-node) 1fr;column-gap:clamp(28px,3.4vw,52px); z-index:1} /* positioned (base rule) + z-index -> stacking context: the ghost ordinal's z-index:-1 stays above the opaque section bg, and the step (nodes included) keeps painting above the timeline's positioned spine pseudos */ .hiw-node{grid-column:2;grid-row:1} .hiw-card{grid-column:3;grid-row:1;max-width:560px;justify-self:start} .hiw-step:nth-child(even) .hiw-card{grid-column:1;justify-self:end} /* Oversized ghost ordinals filling the empty half of each row */ .hiw-step::before{content:attr(data-step);position:absolute;top:50%;z-index:-1; transform:translateY(-52%); font-family:var(--font-display);font-weight:800;font-style:italic; font-size:clamp(9rem,13vw,13rem);line-height:1;color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,0.11);pointer-events:none} .hiw-step:nth-child(odd)::before{left:13%} .hiw-step:nth-child(even)::before{right:13%} .hiw-step--final::before{-webkit-text-stroke-color:rgba(16,185,129,0.12)} } .hiw-title{font-family:var(--font-display);font-weight:800;letter-spacing:-0.01em} /* The 5-up recap becomes a ruled spec strip */ #how-it-works .callout-grid{max-width:1080px;padding:26px 8px;gap:0; border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)} #how-it-works .callout-item{padding:6px 18px} #how-it-works .callout-item + .callout-item{border-left:1px solid var(--border-subtle)} #how-it-works .callout-icon{background:none;border:none;width:auto;height:auto;margin:0 auto 10px} #how-it-works .callout-item h5{text-transform:uppercase;letter-spacing:0.06em;font-size:0.78rem} #how-it-works .callout-item p{color:var(--text-muted)} /* ---------- S6. ACT VIII — DAWN: the booking finale ---------- */ /* The warmest frame on the page: the atmosphere canvas (warm grade) sits at the bottom of the stage's stack; every parallax player paints above it. */ /* Canvas is the stage's first positioned child (z auto) so every .player sibling paints above it by DOM order; no z-index overrides needed. */ .pband-title{font-family:var(--font-display);font-weight:800;letter-spacing:-0.012em} .pband-title .grad-text{font-style:italic;font-weight:700} /* Booking card: lit from behind, warm hairline rim, the light's focal point */ .cta-form-card{position:relative; border:1px solid transparent; background: linear-gradient(var(--glass-bg),var(--glass-bg)) padding-box, linear-gradient(155deg,rgba(255,224,166,0.45),rgba(255,140,35,0.18) 30%,rgba(255,255,255,0.06) 60%,rgba(178,54,63,0.25)) border-box; box-shadow:0 0 60px rgba(255,140,35,0.10),0 30px 80px rgba(0,0,0,0.5)} .cta-form-card::before{content:"";position:absolute;inset:-70px;z-index:-1;pointer-events:none; background:radial-gradient(60% 60% at 50% 50%,rgba(255,180,84,0.12),transparent 70%)} /* ---------- S7. FOCUS SYSTEM — corner brackets ---------- */ /* Distinctive four-corner viewfinder brackets on the page's big interactive moments; small controls keep the sitewide ring. */ .btn{position:relative} .btn:focus-visible,.push-start:focus-visible,.hiw-node:focus-visible{ outline:none;box-shadow:none} .btn:focus-visible::after,.push-start:focus-visible::after,.hiw-node:focus-visible::after{ content:"";position:absolute;inset:-7px;pointer-events:none;border-radius:0; background: linear-gradient(var(--orange),var(--orange)) left 0 top 0/12px 2px, linear-gradient(var(--orange),var(--orange)) left 0 top 0/2px 12px, linear-gradient(var(--orange),var(--orange)) right 0 top 0/12px 2px, linear-gradient(var(--orange),var(--orange)) right 0 top 0/2px 12px, linear-gradient(var(--orange),var(--orange)) left 0 bottom 0/12px 2px, linear-gradient(var(--orange),var(--orange)) left 0 bottom 0/2px 12px, linear-gradient(var(--orange),var(--orange)) right 0 bottom 0/12px 2px, linear-gradient(var(--orange),var(--orange)) right 0 bottom 0/2px 12px; background-repeat:no-repeat; /* mask keeps the existing conic halo on .hiw-node from fighting the brackets */ opacity:1} .hiw-node:focus-visible::after{inset:-9px;padding:0;background-repeat:no-repeat; -webkit-mask:none;mask:none} /* ---------- S8. RESPONSIVE ---------- */ @media (max-width:1024px){ .hero{min-height:0;padding-top:calc(72px + var(--space-8))} .hero-card-float{-webkit-box-reflect:none} .hero-floor{height:32%} .hero-stage{display:none} .hero .trust-bar{margin-bottom:20px} .hero .logo-marquee{margin-top:28px} } @media (max-width:768px){ .logo-chip img{width:60px;height:60px} .section-header .eyebrow::before{margin-right:8px;padding-right:8px} #how-it-works .callout-grid{gap:14px;padding:20px 8px;border-left:none;border-right:none} #how-it-works .callout-item + .callout-item{border-left:none} } /* ---------- S9. REDUCED MOTION ---------- The sitewide section-20 reset already collapses every animation above to its final frame (all entrance keyframes declare fill:both). The atmosphere canvas never mounts (showcase.js guards). Only the marquee glint needs an explicit kill: at 1 iteration it would freeze mid-band. */ @media (prefers-reduced-motion:reduce){ .logo-marquee::before{display:none} .hero-card-face::after{display:none} } /* ===================================================== Night Ledger - section fragment: Acts IV-VII (#how-it-works, #pricing, #security, #faq). Loads inside css/showcase.css, AFTER css/styles.css, so equal-specificity selectors here win. TOKENS ASSUMED (defined by the orchestrator's core file, used freely below): --font-display, --amber-hot (#FFB454), --gold-dawn (#FFE0A6), --cool-key (#B9C8FF), --carmine-deep (#6E1B24), --ink-red (#FF6B72). Everything else is an existing styles.css token. SPECIFICITY STRATEGY: most rules below are prefixed with the section id (#how-it-works / #pricing / #security / #faq) so they win outright over styles.css without a specificity fight. The ONE deliberate exception is .lv-was / .lv-free / .lv-was::after in Act V(b) - those are left UNPREFIXED, at the same specificity as their styles.css originals, on purpose: the value-ledger has a JS-driven scroll state machine (.is-armed / .is-struck) whose rules are already more specific (more chained classes) than a bare .lv-was. Adding an #pricing id there would make our "resting" color win in EVERY state, including mid-animation, and break the red-to-gray strike sequence. Keeping specificity equal lets our new resting tone show for the honest static/ reduced-motion end state while the state machine still safely overrides it while it's actually animating. See the comment inline at that rule for the full trace. FADE-UP SAFETY: .cdk-demo, .pricing-cards, .calc-binnacle, .value-ledger, .sec-band and .faq-list all carry the sitewide .fade-up class directly in the markup, and fade-up owns `transform` on those exact elements. Nothing below sets `transform` on any of those six selectors themselves - new transforms only ever land on pseudo-elements (::before/::after) or on unrelated descendants (.ps-ring, .sec-band-seal, dotted leaders, ghost ordinals). Checked one by one; see per-act notes. NO MARKUP EDITS were needed for anything below. */ /* ===================================================== ACT IV - THE PROOF (#how-it-works): service-bay staging + editorial table ============================================================ */ /* Stage the demo on a lit floor: a soft radial pool grounding the whole terminal+panel group, and a faint vertical light shaft dropping onto the terminal column specifically. Both are pseudo-elements at z-index:-1 inside #how-it-works .cdk-demo's existing isolation:isolate context, so they paint behind the terminal button / wire / panel without needing any new stacking context or markup. .cdk-demo itself keeps position:relative + isolate from styles.css; .cdk-terminal-col gets position:relative here only to anchor its own shaft pseudo. */ #how-it-works .cdk-terminal-col{position:relative} #how-it-works .cdk-demo::before{ content:"";position:absolute;z-index:-1;pointer-events:none; left:50%;bottom:-40px;width:130%;height:210px; transform:translateX(-50%); background:radial-gradient(ellipse 55% 100% at 50% 100%, rgba(255,180,84,0.10), transparent 72%); filter:blur(4px); } #how-it-works .cdk-terminal-col::before{ content:"";position:absolute;z-index:-1;pointer-events:none; left:50%;top:-72px;bottom:-24px;width:150px; transform:translateX(-50%); background:linear-gradient(180deg, rgba(255,180,84,0) 0%, rgba(255,180,84,0.11) 40%, rgba(255,180,84,0.16) 62%, rgba(255,180,84,0.03) 86%, rgba(255,180,84,0) 100%); filter:blur(9px); } /* Slightly deepened panel shadow - the RO panel currently has no box-shadow of its own (it relies on the section background matching var(--bg-elevated)); give it real ground contact so it reads as a physical object catching the shaft/floor light. */ #how-it-works .cdk-panel{ box-shadow:0 28px 56px -20px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.04); } /* Editorial comparison table: de-box the wrap into top/bottom hairlines only, and a warmer (amber, not white) row hover to match the neutral-warm zone. The row-lead (first td) keeps a medium weight for a touch of emphasis, but no longer needs a separate font-family override, since it inherits Poppins like the rest of the table now, so a second face isn't the source of the contrast anymore. Scoped to #how-it-works .comparison-table so /security/'s battle table (.security-table) and every other sitewide table are untouched. */ #how-it-works .table-wrap{ border:none;border-radius:0;background:none; border-top:1px solid var(--border-color); border-bottom:1px solid var(--border-color); } #how-it-works .comparison-table thead th{ background:none; border-bottom:1px solid var(--border-color); } #how-it-works .comparison-table td{ border-top:1px solid var(--border-color); /* was --border-subtle (0.04); a touch more defined without a box */ } #how-it-works .comparison-table td:first-child{ font-weight:500; font-size:1.05rem; letter-spacing:-0.01em; } /* Warmer hover - same technique as the sitewide `tbody tr:hover`, just re-tinted amber for this section's neutral-warm register. */ #how-it-works .comparison-table tbody tr:hover{ background-color:rgba(255,180,84,0.07); } @media (max-width:1024px){ /* .cdk-demo drops its desktop-only zoom:1.25 below this width; the floor pool/shaft scale with it automatically (they're sized in px relative to the same box), no override needed. */ } @media (max-width:768px){ /* .cdk-demo goes flex-direction:column here (styles.css section 19) - terminal stacks above the wire/panel. Tighten the floor pool so it doesn't read as an oversized ellipse under a much taller column, and shorten the shaft to match. */ #how-it-works .cdk-demo::before{height:150px;bottom:-24px} #how-it-works .cdk-terminal-col::before{width:120px;top:-40px;bottom:-16px} } @media (max-width:480px){ #how-it-works .cdk-terminal-col::before{width:96px} } /* ===================================================== ACT V - THE MATH (#pricing): asymmetric bento + real ledger ============================================================ */ /* (a) Bento re-grid at >=1025px only. Markup order stays featured, debit, monthly (untouched) - explicit column/row placement, not a reorder. Below 1025px this block simply doesn't apply and the existing 3-up / 1-up rules from styles.css section 19 keep working unchanged. */ @media (min-width:1025px){ #pricing .pricing-cards{ grid-template-columns:3fr 2fr; grid-template-rows:1fr 1fr; align-items:stretch; } #pricing .pricing-card.featured{ grid-column:1;grid-row:1 / 3; display:flex;flex-direction:column;justify-content:center; padding:48px 44px; } #pricing .pricing-cards .pricing-card:nth-child(2){grid-column:2;grid-row:1} #pricing .pricing-cards .pricing-card:nth-child(3){grid-column:2;grid-row:2} /* Featured price becomes the page's big display-scale figure. */ #pricing .pricing-card.featured .card-price{ font-family:var(--font-display); font-weight:800; font-size:clamp(4rem,2rem + 9vw,7rem); line-height:0.9; letter-spacing:-0.02em; margin:22px 0 16px; } #pricing .pricing-card.featured .card-label{font-size:0.9rem} #pricing .pricing-card.featured .card-desc{font-size:1rem;max-width:34ch} } /* (b) Value ledger: dotted leaders, tabular figures, red-ink "was" / kept-ink "FREE". The leader is built on .ledger-name (NOT the grid - .ledger-row stays the existing 3-column auto/1fr/auto grid from styles.css; no markup/structure change). Turning .ledger-name into a flex row lets its own ::after grow as a dotted rule filling the rest of the name column, reading as a classic ledger leader up to the value gutter. Gated to >=769px: below that the row's name column narrows enough (and item names like "Managed PCI Compliance" get long enough) that forcing nowrap could clip text - mobile keeps the plain stacked name/desc block exactly as it ships today. */ @media (min-width:769px){ #pricing .ledger-name{ display:flex;align-items:baseline;gap:10px;white-space:nowrap; } #pricing .ledger-name::after{ content:"";flex:1 1 auto;min-width:16px;align-self:center; border-bottom:1px dotted rgba(240,242,245,0.26); transform:translateY(-3px); } } #pricing .ledger-value{ font-feature-settings:var(--tabular); /* font-variant-numeric:tabular-nums already set in styles.css */ } /* .lv-was / .lv-free / .lv-was::after are DELIBERATELY left at the SAME selector (no #pricing id) as their styles.css originals - see the file-header note. This only changes the resting/base tone (what no-JS, reduced-motion, and pre-scroll visitors see); the .is-armed / .is-struck scroll state machine's own, higher-specificity rules still safely take over mid-animation. */ .lv-was{color:var(--carmine-deep)} .ledger-value[data-value] .lv-was::after{background:var(--carmine-deep)} .lv-free{color:var(--success)} /* (c) #calcStart attract state: a slow breathing glow on .ps-ring ONLY, and only while the panel is truly idle (not yet lit, not mid-crank). Because the selector requires :not(.is-lit) AND :not(.is-cranking), it can never match at the same time as the styles.css `.is-lit .ps-ring` or `.is-cranking .ps-ring` rules - the three states are mutually exclusive by construction, so there's no specificity fight and no risk of shadowing the ignition crank flicker or the lit resting ring. Nothing else about the dead-panel gating (.is-armed opacity/filter on .cluster/.odo-row) is touched. */ #pricing .calc-binnacle:not(.is-lit):not(.is-cranking) .ps-ring{ animation:scPsAttract 2.8s ease-in-out infinite; } @keyframes scPsAttract{ 0%,100%{border-color:rgba(255,180,84,0.18);box-shadow:none} 50%{border-color:rgba(255,180,84,0.6); box-shadow:0 0 14px rgba(255,180,84,0.45),inset 0 0 8px rgba(255,180,84,0.18)} } @media (max-width:1024px){ /* Bento is >=1025px-only by design; nothing to adjust here. */ } @media (max-width:768px){ /* .pricing-cards already stacks 1-up (section 19); the ledger's dotted leader is already off below 769px. No further changes. */ } @media (max-width:480px){ #pricing .ledger-name{white-space:normal} /* belt-and-braces: the >=769px rule already excludes this width */ } /* ===================================================== ACT VI - THE VAULT (#security): the one cool zone ============================================================ */ /* Section-level teal + cool-blue wash, same technique as the #pain-points::before carmine wash in styles.css (two soft radial gradients, very low opacity, z-index:0 behind the content). This sits OUTSIDE .sec-band's own glass (which already has a teal ::before of its own scoped to the card) - it's the section's ambient temperature, visible in the negative space around the band, continuing the page's cold-to-warm zone story. #security already has position:relative + overflow:hidden from the shared .section rule, so no extra positioning is needed here. */ #security::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(46% 50% at 18% 26%, rgba(16,185,129,0.07), transparent 72%), radial-gradient(50% 56% at 86% 76%, rgba(185,200,255,0.045), transparent 76%); } #security .container{position:relative;z-index:1} /* Vault-door concentric rings behind the seal icon. .sec-band-seal already reads as a small circular badge with its own 1px ring border (from styles.css) - that border is effectively ring #1; these two pseudo-elements add two more, larger and fainter, so the icon reads as the center of a vault door. Contained well inside .sec-band's own padding (36px/40px) so overflow:hidden on .sec-band never clips them. */ #security .sec-band-seal{position:relative;isolation:isolate} #security .sec-band-seal::before, #security .sec-band-seal::after{ content:"";position:absolute;z-index:-1;pointer-events:none; left:50%;top:50%;border-radius:50%; transform:translate(-50%,-50%); } #security .sec-band-seal::before{ width:76px;height:76px;border:1px solid rgba(16,185,129,0.18); } #security .sec-band-seal::after{ width:94px;height:94px;border:1px solid rgba(16,185,129,0.10); } @media (max-width:1024px){ /* No change - the wash and rings both scale with the section/seal, not the viewport. */ } @media (max-width:768px){ /* .sec-band already switches to a single column at max-width:900px in styles.css; the seal (and its rings) stay the same size, just re-flow above the stats. Nothing to override. */ } @media (max-width:480px){ #security .sec-band-seal::after{width:86px;height:86px} /* tiny extra margin on the narrowest phones */ } /* ===================================================== ACT VII - THE QUESTIONS (#faq): editorial ledger of questions ============================================================ */ /* styles.css section 15 boxes each .faq-item (border + radius + background). This replaces that with hairline top rules between items (closed off top/bottom by the list itself), larger question type, more generous vertical padding, and an oversized ghost ordinal on desktop. The accordion mechanics themselves (.faq-question button, .faq-answer max-height transition, .faq-item.active / .faq-toggle rotate) are untouched - only cosmetics change below. */ #faq .faq-list{ gap:0; counter-reset:scFaqCount; border-bottom:1px solid var(--border-color); } #faq .faq-item{ counter-increment:scFaqCount; position:relative; overflow:visible; /* was overflow:hidden, needed only to clip the old boxed corners */ border:none; border-top:1px solid var(--border-color); border-radius:0; background:none; transition:border-color var(--dur-fast) ease; } /* Re-declared at the same #faq specificity so the open/active state still gets a warm accent - now on the item's own hairline instead of a full box outline. */ #faq .faq-item.active{border-top-color:rgba(255,140,35,0.45)} #faq .faq-question{ padding:28px 8px; font-size:clamp(1.15rem,1.05rem + 0.35vw,1.25rem); font-weight:600; } #faq .faq-answer p{padding:0 8px 28px} /* Oversized ghost ordinal, desktop only. Positioned inside the item's own (widened) padding-left rather than bled out past the item edge - safe regardless of how wide .faq-list itself is (the structural-breakout rule in styles.css section 2 can widen .container--narrow .faq-list up to 1080px at this width, which would eat into any margin an outside-bled numeral relied on). */ @media (min-width:1025px){ #faq .faq-item{padding-left:100px} #faq .faq-item::before{ content:counter(scFaqCount, decimal-leading-zero); position:absolute;left:0;top:50%; transform:translateY(-50%); font-family:var(--font-display); font-weight:800; font-size:3.2rem; line-height:1; letter-spacing:-0.02em; color:var(--text-primary); opacity:0.08; pointer-events:none; } } @media (max-width:1024px){ /* Ghost ordinal is >=1025px-only by design; item padding reverts automatically. */ } @media (max-width:768px){ #faq .faq-question{padding:24px 6px} #faq .faq-answer p{padding:0 6px 24px} } @media (max-width:480px){ #faq .faq-question{padding:20px 4px;font-size:1.08rem} #faq .faq-answer p{padding:0 4px 20px} } /* ===================================================== ORCHESTRATOR POLISH ROUND 1 (post-integration) ============================================================ */ /* ACT V: the featured $0 card read as a lit void — give the space intent. Background restates the glass recipe's two layers and adds a warm floor pool; content gets a ruled ledger break between price and description. */ @media (min-width:1025px){ #pricing .pricing-card.featured{ background: radial-gradient(72% 90% at 26% 84%,rgba(255,140,35,0.10),transparent 70%), linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0) 42%), linear-gradient(155deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012))} #pricing .pricing-card.featured .card-qual{font-size:0.9rem;letter-spacing:0.14em; text-transform:uppercase;color:var(--amber-hot)} #pricing .pricing-card.featured .card-desc{border-top:1px solid var(--border-subtle); padding-top:18px;margin-top:18px;font-size:1.02rem} } /* ===================================================== FIX ROUND 1 — audit pass 1 (29 findings triaged; append-only, later rules win at equal specificity) ============================================================ */ /* [design P0] Hero seal: deepen the deboss so it reads stamped, not stuck on. Darker recess center, heavier top inner shadow, brighter lower lip. */ .cdk-seal{background:radial-gradient(circle,rgba(5,7,12,0.84) 0%,rgba(6,9,14,0.64) 55%,rgba(8,11,17,0.36) 100%); box-shadow: inset 0 4px 9px rgba(0,0,0,0.64), inset 0 -1px 2px rgba(255,255,255,0.17), 0 1px 1px rgba(255,255,255,0.18), 0 -1px 1px rgba(0,0,0,0.30)} .cdk-seal::before{border-color:rgba(255,140,35,0.42)} /* [design P0] CDK wire end-cap dots RETIRED 2026-08-03 — the Classic Countertop rework (styles.css) gave the channel an etched track + lit gradient fill that already reads as a live connection; the dots were patching the old 2px hairline. The .ct-screen inset went with it (class no longer exists in the new markup). */ /* [design P2] RO mockup fidelity: varied repair-order bar lengths so the mock reads as real data. */ #how-it-works .cdk-lines li:nth-child(1) .cdk-bar{flex-basis:96px} #how-it-works .cdk-lines li:nth-child(2) .cdk-bar{flex-basis:58px} /* [design P0] Pricing chip swatches read as placeholder assets at bento scale — retire them in this section (the card-motif chip lives on in the hero's real EMV chip). */ #pricing .pricing-card::after{display:none} /* [design/layout P0] Timeline gutters below the center-spine breakpoint: .hiw sits outside .container and had no side padding of its own. */ @media (max-width:1024px){ .hiw{padding-left:24px;padding-right:24px} } /* [layout P1] Tablet band: cap card measure so text never runs edge to edge */ @media (min-width:769px) and (max-width:1024px){ .hiw-card{max-width:640px} } /* [design P1] Pain-card reading-order rules RETIRED 2026-07-28 — the bento died in the Act II restage (see S4); the section is bare type on the leak stage now. */ /* [a11y P0] Ledger "was" ink was too dark to read at rest / reduced motion. Dusty carmine: clearly struck-out, still legible on the dark surface. */ .lv-was{color:#B06066} .ledger-value[data-value] .lv-was::after{background:#B06066} /* [a11y P1] Focus brackets must never spin: the current node's conic-halo animation would otherwise rotate the viewfinder marks. */ .hiw-node:focus-visible::after{animation:none;transform:none} /* [a11y P2] Bracket clearance inside the ledger's clipped footer */ .ledger-foot .btn:focus-visible::after{inset:-4px} /* [design P0] Small-phone navbar: real breathing room between wordmark, CTA, and hamburger; toggle stays inside the safe gutter. */ @media (max-width:480px){ .nav-logo{font-size:1rem;gap:8px} .brand-mark{width:26px;height:26px} .nav-cta{margin-right:8px} .nav-cta .btn{padding:8px 12px} } /* [layout P2] Phone table: right-edge fade signals the horizontal scroll */ @media (max-width:768px){ #how-it-works .table-wrap{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent); mask-image:linear-gradient(90deg,#000 86%,transparent)} } /* [perf P0] The reflection is a desktop-only effect — at <=1024 the shorter stage let it bleed over the marquee band. (S8 already zeroed it; this restates it after the fix-round rules so the cascade can never resurrect it.) */ @media (max-width:1024px){ .hero-card-float{-webkit-box-reflect:none} } /* [perf P1] The finale form card sat a backdrop-filter on top of the live dawn shader — every frame re-blurred a full card of pixels. The card is near-opaque anyway (its content is the booking iframe): drop the blur, keep the glass read via the rim gradient, wire the dawn tokens in. */ .cta-form-card{-webkit-backdrop-filter:none;backdrop-filter:none; background: linear-gradient(rgba(11,15,26,0.90),rgba(11,15,26,0.90)) padding-box, linear-gradient(155deg, color-mix(in srgb,var(--gold-dawn) 45%,transparent), color-mix(in srgb,var(--orange) 18%,transparent) 30%, rgba(255,255,255,0.06) 60%, color-mix(in srgb,var(--carmine) 25%,transparent)) border-box} /* [a11y P2] Reduced motion: the global reset collapses durations but not delays — kill the hero entrance outright so nothing pops in sequence. */ @media (prefers-reduced-motion:reduce){ .hero-title,.hero-sub,.hero-buttons,.hero-cred,.trust-bar,.hero-stage{ animation:none;opacity:1;transform:none} } /* ===================================================== ROUND 2 - CINEMA PASS Owner feedback on the first pass: too conservative, no scroll choreography, no depth. This block is scroll camera work and ignition lighting. Contract: js/showcase.js sets --hs (0..1) on .hero as an inline style and adds "sc-lit" (add-only) to #pain-points, #why, #how-it-works, #pricing, #security, #faq, #book-demo when each crosses 25% viewport visibility. Under reduced motion the JS never runs the scroll math; it adds sc-lit to every target immediately instead, so --hs stays 0 and every wash below lands lit, not dim. All new rules append; none edit an earlier declaration in place. ============================================================ */ /* ---------- R2-1. HERO CAMERA DOLLY (>=1025px only) ---------- The card recedes like a slow pull-back; the copy column drifts at a slower, independent rate and fades as the visitor leaves the hero. Hosts are chosen deliberately: .hero-card-scene and .hero-copy carry no fill:both entrance keyframe of their own (those live on .hero-title/.hero-sub/.hero-buttons/.hero-cred/ .trust-bar and on .hero-stage), so putting transform here never fights an entrance animation. No transition on either rule: --hs already tracks scroll on a rAF throttle in JS, so the motion IS the scrollbar; adding a CSS transition would make the card visibly lag a frame behind the finger/wheel. */ @media (min-width:1025px){ .hero-card-scene{ transform:translateY(calc(var(--hs,0) * 110px)) scale(calc(1 - var(--hs,0) * 0.10)); } .hero-copy{ transform:translateY(calc(var(--hs,0) * 55px)); opacity:calc(1 - var(--hs,0) * 0.55); } } /* ---------- R2-2. SECTION IGNITION ---------- The page's ambient light comes on section by section as the visitor walks it, instead of every wash sitting at full strength from first paint. Two sections already carry a wash (#pain-points, #security, both from earlier rounds) - those get an opacity ramp restated on the SAME selector. Four sections had no wash at all (checked both files: no wash existed anywhere on #why, #how-it-works, #pricing, or #faq before this block, using this branch's id mapping) - those get a brand-new ::before built on the exact same recipe already proven on #pain-points: absolute inset:0, z-index:0, pointer-events:none, with the section's real content promoted to z-index:1 so it keeps painting above the wash (without that promotion, a static-positioned .container paints BEHIND a z-index:0 sibling pseudo-element, per normal stacking order - the reason every prior wash in this file already does the same promotion). Every gradient stop below stays under rgba alpha .16, so AA text contrast is never at stake - only the negative space around the content shifts. #how-it-works .cdk-demo::before (the floor pool) and #how-it-works .cdk-terminal-col::before (the light shaft) are DIFFERENT, already-scoped elements from Act IV and are untouched here. */ #pain-points::before{opacity:.12;transition:opacity 1.4s ease .1s} #pain-points.sc-lit::before{opacity:1} #security::before{opacity:.12;transition:opacity 1.4s ease .1s} #security.sc-lit::before{opacity:1} #why::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.12;transition:opacity 1.4s ease .1s; background: radial-gradient(52% 56% at 50% 34%, rgba(255,140,35,0.14), transparent 72%), radial-gradient(44% 48% at 50% 82%, rgba(255,140,35,0.06), transparent 76%)} #why.sc-lit::before{opacity:1} #why .container{position:relative;z-index:1} #why .hiw{z-index:1} #how-it-works::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.12;transition:opacity 1.4s ease .1s; background: radial-gradient(54% 46% at 50% 30%, rgba(255,180,84,0.15), transparent 74%), radial-gradient(40% 40% at 16% 72%, rgba(255,140,35,0.05), transparent 76%)} #how-it-works.sc-lit::before{opacity:1} #how-it-works .container{position:relative;z-index:1} #pricing::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.12;transition:opacity 1.4s ease .1s; background: radial-gradient(56% 50% at 50% 60%, rgba(255,140,35,0.16), transparent 74%), radial-gradient(42% 42% at 80% 26%, rgba(255,180,84,0.08), transparent 76%)} #pricing.sc-lit::before{opacity:1} #pricing .container{position:relative;z-index:1} #faq::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; opacity:.12;transition:opacity 1.4s ease .1s; background:radial-gradient(60% 60% at 50% 46%, rgba(240,242,245,0.05), transparent 78%)} #faq.sc-lit::before{opacity:1} #faq .container{position:relative;z-index:1} /* ---------- R2-3. FINALE DAWN BUILD ---------- .player--glow::before (styles.css section 17b) is currently a flat, always-on radial glow behind the booking card with no baseline opacity or transition of its own. Give it a dim baseline and let dawn genuinely BREAK once the finale crosses 25% viewport: bigger, brighter, over ~2s. Only transform/opacity/background change here; the parallax --dy drift stays owned by .player itself (untouched). */ .player--glow::before{opacity:.55;transition:transform 2s ease,opacity 2s ease} #book-demo.sc-lit .player--glow::before{ transform:scale(1.35);opacity:1; background:radial-gradient(circle,rgba(255,180,84,.34),rgba(178,54,63,.10) 45%,transparent 68%); } /* ---------- R2-4. DEPTH ---------- (a) True 3D on the two hover-lift cards already on the page. Both box-shadow blocks are copied VERBATIM from their styles.css hover rules (.pricing-card:hover line ~1302, .pain-card:hover line ~571) so only the transform changes. Both cards carry "fade-up" directly in the markup, same as the existing hover rules they extend - the file-order rule keeps this safe (showcase.css loads after styles.css, so this rule wins the equal-specificity tie against .fade-up.visible's transform:none the same way the original hover rules already needed to). */ .pricing-card:hover{ transform:translateY(-6px) perspective(900px) rotateX(1.6deg); box-shadow: 0 24px 50px rgba(0,0,0,0.48), inset 0 1px 0.5px rgba(255,255,255,0.32), inset 0 -20px 30px -24px rgba(0,0,0,0.4), 0 0 26px rgba(255,140,35,0.08); } .pain-card:hover{ transform:translateY(-6px) perspective(900px) rotateX(1.6deg); box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.4),inset -1px -3px 9px rgba(0,0,0,0.36), 0 0 0 1px rgba(178,54,63,0.28),0 0 40px rgba(178,54,63,0.18),0 30px 60px rgba(0,0,0,0.5); } /* (b) .hiw-card had a transition on border-color/box-shadow only; add transform to that list and give it a real hover lift plus a slightly stronger neutral edge. The current-step rule (.hiw-step:has(.hiw-node.is-current) .hiw-card) is a longer, higher-specificity selector, so it still wins the border-color whenever a step is actually current - this hover just adds a resting-state hint on every other card. Not touching .cdk-panel: its shatter-burst WAAPI sequence owns that element's transform. */ .hiw-card{transition:border-color .4s ease,box-shadow .4s ease,transform .4s var(--ease-out-expo)} .hiw-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,0.18)} /* ---------- R2-5. DISPLAY DRAMA ---------- */ /* Bigger display ceiling: restates the custom property from S0, later wins. Ceiling trimmed from 5rem to 4.5rem for the Poppins restore, since bold Poppins carries more visual mass per point than the serif it replaced. */ :root{--text-h1:clamp(2.7rem,1.35rem + 4.6vw,4.5rem)} /* A slow breathing glow on the leak figure - the loss visibly pulses, never resting at one brightness. Paint-only (text-shadow), no layout property involved, matched to the other slow ambient loops on the page (ledBreathe, btnShine) rather than anything jarring. */ @keyframes scLeakGlow{ 0%,100%{text-shadow:0 0 54px rgba(178,54,63,.40)} 50%{text-shadow:0 0 54px rgba(255,107,114,.75)} } .leak-amount{animation:scLeakGlow 3s ease-in-out infinite} /* Marquee glints, turned up + TWINNED: the brighter streak on the TOP hairline (left to right) and its mirror on the BOTTOM hairline (right to left), phase-locked so both enter, cross, exit, and rest at the exact same instants. HARD-SYNC CONSTRAINT: the two streaks are NOT two animated elements - a two-animation build (::before + ::after, one keyframe each) drifted out of phase on real mobile devices, where the engine can start/resume separate animations on different frames. Both lines are therefore two background LAYERS of this one pseudo, driven by ONE animation: same timeline object, zero possible skew. This is a deliberate exception to the compositor-only motion rule - the damage region is two 1px strips, and background-position is the only way to run both directions off a single animation. Never split these back into separate per-line animations. Geometry: the pseudo spans the whole band, inset -1px vertically so layer y 0%/100% land exactly on the border hairlines. Each layer is the same 30%-wide soft gradient the single glint used. Position percentages map p% to p/100*(W-0.3W): -42.857% = fully off left, 142.857% = fully off right, so the pair travels edge-to-edge in mirror and shares the same off-screen rest (~19% of the cycle), viewport-size independent. This rule overrides S3's transform-based glint wholesale (width/height/transform reset explicitly); scGlint up in S3 is dead weight kept only so that rule stays valid. */ .logo-marquee::before{content:"";position:absolute;top:-1px;bottom:-1px;left:0;right:0; width:auto;height:auto;transform:none; background-image:linear-gradient(90deg,transparent,rgba(255,180,84,0.85),transparent), linear-gradient(90deg,transparent,rgba(255,180,84,0.85),transparent); background-size:30% 1px,30% 1px;background-repeat:no-repeat,no-repeat; background-position:-42.857% 0,142.857% 100%; animation:scGlints 5.5s linear infinite;pointer-events:none} @keyframes scGlints{to{background-position:185.714% 0,-85.714% 100%}} /* ---------- R2-6. SPINE COMET ---------- Restate only background + box-shadow on .hiw-timeline::after (the spine fill, styles.css section 7b): every other property (content, position, width, top/height driven by --spine-top/--spine-fill, transform, border-radius, pointer-events, the height transition) is left exactly as shipped. The fill now runs carmine to orange to a hot near-white tip, with a heavier glow, so the "current step" read is a comet with a white-hot head rather than a flat gradient. */ .hiw-timeline::after{ background:linear-gradient(180deg, var(--carmine), var(--orange) 82%, #FFD9A0 100%); box-shadow:0 0 22px rgba(255,140,35,0.7),0 0 40px rgba(255,217,160,0.35); } /* ---------- R2-7. REDUCED MOTION + RESPONSIVE ---------- */ /* The dolly in R2-1 already needs nothing extra: JS never sets --hs above 0 under reduced motion, so both transforms stay at their zero-state with no override required. The section washes need nothing extra either: sc-lit lands on every target synchronously (see the file-header note above) and the sitewide global reset in styles.css section 20 already collapses every transition duration to near-zero, so the lit end-state is what reduced-motion visitors see, never the dim pre-state. Only the two new looping keyframes need an explicit kill, matching how S9 already handles the older marquee glint. */ @media (prefers-reduced-motion:reduce){ .leak-amount{animation:none} .logo-marquee::before{display:none} } /* Washes are unscoped to any width (inset:0, no transform, no dimension change) so there is no horizontal-overflow risk at any breakpoint; the dolly stays desktop-only per R2-1's own media query, so mobile/tablet never see it. Nothing in this block needs a dedicated responsive override beyond what R2-1 through R2-6 already scope themselves. */ /* ===================================================== ACT III-B: REASON TIMELINE EXTRAS (branch homepage-restructure) The drawn line-art SVG illustrations that used to occupy this block were RETIRED 2026-07-29 (owner verdict: "look awful"). S5's giant ghost ordinals (#why .hiw-step::before, the raw step number rendered huge in the empty half of each row) briefly stood back in for them, then were suppressed again 2026-07-30 in favor of the actual reason, set as one enormous figure/word per row (.hiw-type-big) with a small-caps label (.hiw-type-label) - type and light only, no objects. Every rule that existed only to place, color, or draw the old illustrations on (the wrapper element, its inner mark, the per-element accent classes, the stroke/fill reveal machinery and its staggered per-item delays, the entrance-fade override, and the lit-state glow) stayed deleted with them. What remains below: the #why timeline still runs 7 steps, badges, the fork on step 2, the standard numbered node on step 7 (its teal check-node treatment was retired 2026-07-30 - see the node-fill comments below), the new reason type (this section), and the two content pieces after it (proof-point lists + the savings card's count-up stat), which never depended on any illustration and stay untouched. ============================================================ */ /* (5) Reason type - re-suppress S5's ghost ordinal, scoped to #why only (S5's own rule is left in place file-wide; this just wins the specificity fight here since the actual reason replaces it). */ #why .hiw-step::before{content:none} /* Owner ask 2026-07-30: .hiw-node has a fixed height (--hiw-node) and .hiw-step's base align-items:start (styles.css section 7b) is what lands it at the row's top instead of centered on its card. align-self on the item always wins over the parent's align-items regardless of selector specificity, so this plain rule (no media query) is enough to center it sub-1025 - nothing else in either file sets align-self on .hiw-node there to fight it. Restated inside the >=1025px block below since S5's alternating layout re-places the node into its own grid column/row there. */ #why .hiw-node{align-self:center} /* Ignition rework (2026-07-30): main.js clamps the current node to index 0 on load, so step 1 reads "lit" before the row has ever entered the viewport unless ignition also requires visibility - .fade-up is repurposed here purely as that visibility hook (main.js only adds .visible to elements carrying .fade-up), so its own sitewide hide/slide-up styling is neutralized right below; it never moves or fades this row, it just earns the .visible class on scroll-in like the retired scenes did. The actual ignite is an ink SWEEP: .hiw-type-big keeps its unlit outline look permanently on the element itself (no more background/clip swap or brightness transition there), and a stacked ::before duplicates the same text in gradient-filled ink, clipped fully away at rest and wiped open left-to-right via clip-path when the row is both the current/passed step AND visible. NOTE - the card deliberately gets NO such neutralizer and NO bespoke entrance. A 22px/34px translate entrance pair was built 2026-07-30 and REVERTED the same day (owner refinement: step text must never move or fade in as choreography - the reached-state signal is COLOR only, see the color-ignite in (10) below). The card keeps the plain sitewide .fade-up/.visible reveal it always had, so it is never left at opacity 0. Known quirk kept as-is (owner-accepted): R2-4b's .hiw-card{transition:border-color/box-shadow/transform} (this file, ~line 916) ties with the base .fade-up transition (both 0,1,0) and wins the transition property by file order, so the card's one-time reveal lands near-instant rather than eased - fine, because that reveal is not the choreography here, the color-ignite is. */ #why .hiw-type.fade-up{opacity:1;transform:none;transition:none} /* Mobile / sub-1025 (default - S5's own alternating spine only turns on at >=1025px, so this is the baseline the desktop block below overrides): the type sits in the card's own column, stacked above the card - there is no opposite spine half to occupy yet. */ #why .hiw-type{grid-column:2;justify-self:start;text-align:left;margin-bottom:6px} /* Base figure: always the faint outline look, never swapped on the element itself - the ::before ink layer below is what ignites. */ #why .hiw-type-big{position:relative;display:block;font-family:var(--font-display); font-weight:400;font-size:clamp(2.6rem,9vw,3.4rem);line-height:0.95; letter-spacing:-0.02em;color:transparent; -webkit-text-stroke:1px rgba(240,242,245,0.10); text-stroke:1px rgba(240,242,245,0.10)} #why .hiw-type-label{display:block;margin-top:14px;font-size:0.78rem;font-weight:600; letter-spacing:0.22em;color:var(--text-muted);transition:color .4s ease-in} /* Ink layer: a duplicate of the figure text, gradient-filled, stacked exactly over the outline via attr(data-text) + inset:0 (inherits font/size/align from .hiw-type-big, so no positioning math needed). Negative vertical insets keep ascenders/descenders unclipped; the 100% right inset hides the ink entirely at rest. */ #why .hiw-type-big::before{content:attr(data-text);position:absolute;inset:0; background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-stroke:0; clip-path:inset(-0.1em 100% -0.15em 0); transition:clip-path 0.9s var(--ease-out-expo)} /* Lit condition (owner ask 2026-07-30, SPOTLIGHT): only the CURRENT step wipes the ink open now, once the row has also crossed the fade-up visibility threshold - this is what stops step 1's figure reading pre-lit at page load. The is-passed variant that used to keep every row behind you lit permanently is GONE - a step's ink sweep now closes back up (in reverse, via the same 0.9s transition) the moment it stops being current, so exactly one row reads lit at a time. See the FINAL RE-LIGHT block near the end of this section for the payoff once the visitor scrolls past the whole timeline. The label warm-up to orange is gated the same way. Reduced motion needs no override: the sitewide universal transition-duration reset (styles.css section 20) already collapses the clip-path sweep and the label color transition to instant, and the end state here is entirely class-driven. */ #why .hiw-step:has(.hiw-node.is-current) .hiw-type.visible .hiw-type-big::before{ clip-path:inset(-0.1em 0 -0.15em 0)} #why .hiw-step:has(.hiw-node.is-current) .hiw-type.visible .hiw-type-label{color:var(--orange)} /* Desktop >=1025px: the SAME breakpoint S5 uses for its alternating spine. The type takes the column the card just vacated - column 1 for odd rows (S5 keeps their card at column 3), column 3 for even rows (S5 flips their card to column 1) - mirroring S5's own .hiw-step:nth-child(even) .hiw-card rule one column over. */ @media (min-width:1025px){ #why .hiw-node{align-self:center} #why .hiw-type{grid-row:1;align-self:center;padding:0 24px;margin-bottom:0} #why .hiw-step:nth-child(odd) .hiw-type{grid-column:1;justify-self:center;text-align:center} #why .hiw-step:nth-child(even) .hiw-type{grid-column:3;justify-self:center;text-align:center} #why .hiw-type-big{font-size:clamp(4rem,6.5vw,6.5rem)} /* Uniform row rhythm (owner ask 2026-07-30): (11)'s row gap is a constant clamp, but each row's OWN height was purely content-driven (an implicit auto grid row under align-items:start), so the divider-to-divider rhythm still read uneven since content height varies by row. Measured at 1440x1000 with fade-up force-revealed: the five plain rows (steps 1/3/4/6/7) are ~182.9px; step 5 ("ON SITE" wrapping to two lines in .hiw-type-big) is ~216.3px; step 2 (the credit/debit fork - .hiw-card holds an extra .hiw-fork block below its desc/points) is tallest at ~282.6px and sets the ceiling. Pinning every row to that ceiling (rounded up to the next 10px) makes the divider spacing identical everywhere instead of only the gap between rows being constant. #why .hiw-node and #why .hiw-type both already carry align-self:center (this block), so they recenter automatically as the row's auto track grows to fill the min-height; the card gets the same align-self:center below (follow-up to the same ask - under the base align-items:start from styles.css line 459 it stayed pinned to the top of the taller track while node/type sat mid-row), so all three columns now center in the uniform 290px rows. */ #why .hiw-step{min-height:290px} #why .hiw-card{align-self:center} } /* (6) Card checkmark proof points + the savings card's count-up stat. Resting colors here are the DIMMED ink of the (10) color-ignite system (rgba of --text-secondary / --success at reduced alpha); the lit values live in (10)'s gated rules. */ #why .hiw-points{margin-top:14px;padding:0;list-style:none} #why .hiw-points li{display:flex;align-items:baseline;gap:10px; margin-bottom:7px;font-size:0.95rem;color:rgba(160,174,192,0.32); transition:color .6s ease} #why .hiw-points li::before{content:"\2713";flex:none; color:rgba(16,185,129,0.35);font-weight:700;transition:color .6s ease} #why .hiw-stat-kicker{display:block;margin-bottom:6px; font-size:0.78rem;font-weight:600;letter-spacing:0.08em; text-transform:uppercase;color:var(--text-muted)} /* Same background-clip:text recipe as the sitewide .grad-text (S1), restated locally so the direction can run orange->carmine (the sitewide --gradient-brand token runs carmine->orange). */ #why .hiw-stat .count{display:block;margin:2px 0 10px; font-family:var(--font-display);font-weight:800;line-height:1.05; font-size:clamp(2rem,3vw,2.6rem); background:linear-gradient(90deg,var(--orange),var(--carmine)); -webkit-background-clip:text;background-clip:text;color:transparent} /* (7) Node fill ignite v2 (owner ask 2026-07-30): the previous mechanism grew a background box's size on the node BUTTON itself, cropped to a circle by the button's own border-radius - it read as a SQUARE swelling behind the circle, and its 0.75s delay felt laggy. Replaced with a dedicated circular fill LAYER,