/* ============================================================ REVXL BOOKING FUNNEL — STYLES · "BUSINESS MODE" SKIN Calm, premium re-skin of the old "Jarvis HUD" funnel. EFI / REVUP tokens kept verbatim; HUD chrome stripped (no bracket corners, no // STEP mono kickers, no glow-pulse). Mobile-first: base targets ~390px, enhanced at >=768px (tablet) and >=1200px (desktop). Fonts (Barlow Condensed / Barlow / JetBrains Mono) + Calendly widget.css load from index.html . ============================================================ */ :root { /* color */ --ink: #f5f1ea; /* warm off-white — primary text */ --bg: #070503; /* warm near-black — page ground */ --amber: #f0a13c; /* engine amber — primary action */ --gold: #ffc869; /* gold — emphasis + hover state */ --cyan: #3fd9e8; /* HUD cyan — selected-answer accent */ --dim: rgba(245,241,234,0.62); /* muted ink — captions, idle nav */ --on-cyan: #04222a; /* dark teal — text on cyan fills */ /* type families */ --font-display: "Barlow Condensed", sans-serif; /* 800/900 */ --font-body: "Barlow", system-ui, sans-serif; /* 400/500/600/800 */ --font-mono: "JetBrains Mono", monospace; /* 400/600 */ /* radii */ --r-btn: 4px; --r-card: 10px; --r-pill: 999px; /* signature shadows / glows */ --glow-amber: 0 0 40px rgba(240,161,60,0.35); --glow-cyan-text: 0 0 60px rgba(63,217,232,0.38); --lift-card: 0 14px 40px rgba(0,0,0,0.5), 0 0 26px rgba(240,161,60,0.12); --legibility: 0 2px 6px rgba(0,0,0,0.9), 0 4px 18px rgba(0,0,0,0.7), 0 8px 40px rgba(0,0,0,0.55); /* glass surfaces (derived from design-system cards) */ --glass: linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); --glass-border: rgba(255,255,255,0.12); --glass-hover-border: rgba(240,161,60,0.5); --glass-sel-border: rgba(63,217,232,0.6); /* business-mode additions */ --card-bg: #100c08; /* floating dark-glass card body */ --card-border: rgba(240,161,60,0.22); /* 1px amber-tinted card frame */ --card-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 40px rgba(240,161,60,0.06); --sel-fill: rgba(63,217,232,0.10); /* faint cyan fill on selected answer */ --sel-glow: 0 0 22px rgba(63,217,232,0.22); /* layout */ --shell-max: 720px; /* quiz column cap */ --page-max: 1080px; /* landing sales column cap */ --card-max: 560px; /* floating card cap */ --spin-ms: 340ms; /* card-spin — MUST match funnel.js SPIN_MS */ } /* ---------- animations ---------- */ @keyframes screenIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* card-spin OUT — subtle Y-axis tilt + lift + fade (mobile-friendly, no 3D wheel) */ @keyframes cardSpinOut { from { opacity: 1; transform: perspective(1100px) rotateY(0deg) translateY(0) scale(1); } to { opacity: 0; transform: perspective(1100px) rotateY(-12deg) translateY(-10px) scale(0.97); } } /* card-spin IN — settles from the opposite tilt */ @keyframes cardSpinIn { from { opacity: 0; transform: perspective(1100px) rotateY(12deg) translateY(10px) scale(0.97); } to { opacity: 1; transform: perspective(1100px) rotateY(0deg) translateY(0) scale(1); } } /* ---------- reset / ground ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scrollbar-width: thin; scrollbar-color: rgba(240,161,60,0.4) transparent; scroll-behavior: smooth; } body { background: radial-gradient(120% 80% at 50% -10%, rgba(240,161,60,0.06), transparent 60%), var(--bg); background-attachment: fixed; color: var(--ink); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; } img, svg, iframe { display: block; max-width: 100%; } a { color: var(--cyan); } /* the [hidden] attribute drives screen + result + ladder visibility (funnel.js) */ [hidden] { display: none !important; } /* visually-hidden — keeps the semantic

for SEO / screen readers without altering the layout */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ PROGRESS BAR — spans the 6 numbered questions
============================================================ */ .progress { position: sticky; top: 0; z-index: 30; width: 100%; height: 4px; background: rgba(255,255,255,0.07); overflow: hidden; } .progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--amber), var(--gold)); box-shadow: 0 0 14px rgba(240,161,60,0.55); border-radius: 0 var(--r-pill) var(--r-pill) 0; transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ FUNNEL SHELL ============================================================ */ .funnel { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 16px 56px; } /* ============================================================ BRAND HEADER — persistent, compact header.brand > .logo ( .bolt · .logo-word ) + .decoder ============================================================ */ .brand { text-align: center; padding: 26px 12px 6px; } .logo { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } /* gold lightning-bolt bookends — sized to NOT overpower the semibold word */ .logo .bolt { width: 15px; height: auto; flex: 0 0 auto; } .logo-word { font-family: var(--font-body); font-weight: 600; /* Barlow semibold — the locked logo weight */ font-size: clamp(1.9rem, 8vw, 2.5rem); letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; } .logo-word .rev { color: var(--ink); } .logo-word .xl { color: var(--gold); } /* decoder subhead — mirrors the mark's ink/gold highlight */ .decoder { margin-top: 8px; font-family: var(--font-body); font-weight: 500; font-size: clamp(0.82rem, 3.4vw, 0.98rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); } .decoder .rev { color: var(--ink); font-weight: 600; } .decoder .xl { color: var(--gold); font-weight: 600; } /* ============================================================ STAGE — amber radial spotlight behind the floating card .stage wraps every cycling section (.screen / .result / .ladder) ============================================================ */ .stage { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 18px 0 8px; } /* soft amber spotlight — sits behind the card, never competes with it */ .stage::before { content: ""; position: absolute; top: -4%; left: 50%; transform: translateX(-50%); width: min(140%, 760px); height: 560px; background: radial-gradient(50% 50% at 50% 38%, rgba(240,161,60,0.18), rgba(240,161,60,0.06) 45%, transparent 72%); filter: blur(6px); pointer-events: none; z-index: 0; } /* ============================================================ SECTION — one cycling step (quiz / result / ladder rung)