/* ════════════════════════════════════════════════════════════════════ EXCAR — Premium layer (additive) Loaded AFTER style.css. Adds fluid motion, the blue scanner-sweep signature, depth/parallax, and micro-interaction polish on top of the existing design system. Touches no existing token or component rule. Accent stays Atilla's blue (#1E97F4). The scanner sweep is the KITT-style signature, retoned to blue. Everything here is gated by prefers-reduced-motion. ════════════════════════════════════════════════════════════════════ */ :root { --scan: 30, 151, 244; /* accent as raw RGB, for sweep gradients */ --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); } /* ───────────────────────── Accessibility: skip link ───────────────────────── Baseline a11y, loaded on every page (premium.css is always linked). Hidden until keyboard-focused, then drops into view above the fixed nav. */ .skip-link { position: fixed; top: -120px; left: 16px; z-index: 1000; padding: 12px 18px; background: var(--accent); color: var(--bg); font-family: var(--font-body); font-weight: 600; font-size: 14px; border-radius: 0 0 12px 12px; transition: top 0.2s ease; } .skip-link:focus { top: 0; outline: 2px solid var(--text); outline-offset: 2px; } /* ───────────────────────── Lenis smooth scroll ───────────────────────── Required structural CSS for the Lenis momentum-scroll engine. Only takes effect once premium.js adds .lenis to . */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* Premium scrollbar (purely cosmetic) */ .premium-on ::-webkit-scrollbar { width: 10px; } .premium-on ::-webkit-scrollbar-track { background: var(--bg); } .premium-on ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 2px solid var(--bg); } .premium-on ::-webkit-scrollbar-thumb:hover { background: var(--accent-line); } /* ───────────────────────── Scanner-sweep signature ───────────────────────── A slow horizontal beam of accent-blue light that crosses the hero and every page-header — the KITT scanner, re-toned to Atilla's blue. Injected by JS as so static markup is untouched. */ .scan-host { position: relative; } .scan-line { position: absolute; top: 0; left: -30%; width: 30%; height: 100%; pointer-events: none; z-index: 0; background: linear-gradient( 90deg, transparent 0%, rgba(var(--scan), 0.0) 10%, rgba(var(--scan), 0.10) 48%, rgba(var(--scan), 0.16) 50%, rgba(var(--scan), 0.10) 52%, transparent 90% ); filter: blur(6px); will-change: transform, opacity; animation: scan-sweep 7s var(--ease-soft) infinite; } @keyframes scan-sweep { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 50% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(440%); opacity: 0; } } /* keep header content above the beam */ .hero > .container, .page-header .page-header-inner { position: relative; z-index: 1; } /* A thin scanning edge that rides the top hairline of pinned/scrubbed sections */ .scan-edge { position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--scan), 0.7), transparent); opacity: 0.5; z-index: 2; } /* ───────────────────────── Scroll progress bar ───────────────────────── The "filling as you scroll" cue. premium.js scales it from the scroll ratio. */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(var(--scan), 0.35), var(--accent) 60%, #6fc0ff); box-shadow: 0 0 12px rgba(var(--scan), 0.6); z-index: 200; will-change: transform; } /* ───────────────────────── Reveal / parallax helpers ───────────────────────── premium.js drives these with GSAP ScrollTrigger; the CSS only defines the resting (pre-animation) state so there is no flash before JS runs. */ .premium-on [data-parallax] { will-change: transform; } /* Premium TAKES OVER the reveal system: neutralise Atilla's trigger-once CSS so GSAP can scrub each block in (fill-on-scroll). If JS fails, content is visible. */ .premium-on .reveal, .premium-on .reveal-stagger > * { opacity: 1; transform: none; transition: none; } .premium-on .anim-in { will-change: transform, opacity; } .premium-on .anim-head { will-change: clip-path; } /* Depth tag for feature demos / cards that drift slightly slower than scroll */ .premium-on [data-depth] { will-change: transform; } /* Timeline draw-on-scroll: premium.js animates --draw 0→1 */ .premium-on .timeline { --draw: 1; } .premium-on .timeline::before { transform-origin: top; transform: scaleY(var(--draw)); } /* ───────────────────────── Micro-interactions ───────────────────────── Card hover-tilt — premium.js sets --rx/--ry from the pointer. */ .premium-on .card, .premium-on .team-card, .premium-on .feature-demo, .premium-on .diagram-card { transition: transform 0.35s var(--ease-fluid), border-color 0.3s var(--ease-soft); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; } /* Magnetic buttons — premium.js sets --mx/--my from the pointer. */ .premium-on .btn-primary, .premium-on .nav-cta, .premium-on .waitlist-form button { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform 0.25s var(--ease-fluid), box-shadow 0.2s var(--ease-soft); } /* Nav auto-hide on scroll-down, reveal on scroll-up */ .premium-on nav { transition: transform 0.4s var(--ease-fluid), border-color 0.3s ease, background 0.3s ease; will-change: transform; } .premium-on nav.nav-hidden { transform: translateY(-100%); } /* Animated link underline for nav + inline links */ .premium-on .nav-links a::before { content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--accent); border-radius: 2px; transition: right 0.3s var(--ease-fluid); } .premium-on .nav-links a:hover::before { right: 0; } .premium-on .nav-links a.active::before { right: 0; } /* keep active underline */ .premium-on .nav-links a.active::after { display: none; } /* avoid double line */ /* Buttons / cards get a touch more lift under the premium layer */ .premium-on .btn-primary:hover { box-shadow: 0 12px 40px rgba(var(--scan), 0.35); } /* Console + OBD card subtle float (GSAP yoyo target gets this base) */ .premium-on .console, .premium-on .diagram-card { will-change: transform; } /* ───────────────────────── Page-load curtain (once) ───────────────────────── A brief scanner wipe on first paint of the home hero, mirroring the device "powering on". Skipped under reduced-motion and after the first visit. */ .premium-on .boot-curtain { position: fixed; inset: 0; z-index: 9999; background: var(--bg); pointer-events: none; } .premium-on .boot-curtain::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(var(--scan), 0.18), transparent); transform: translateX(-100%); animation: boot-wipe 0.9s var(--ease-soft) forwards; } @keyframes boot-wipe { to { transform: translateX(100%); } } /* ───────────────────────── Honeypot (anti-spam, visually hidden) ───────────────────────── */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ───────────────────────── Footer legal links (added with new pages) ───────────────────────── */ .footer-legal { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); } .footer-legal a { color: var(--text-tertiary); transition: color 0.2s ease; } .footer-legal a:hover { color: var(--accent); } .footer-legal span { opacity: 0.5; } /* ───────────────────────── Long-form / legal & doc prose (Privacy, Terms, Journal) ───────────────────────── */ .prose { max-width: 720px; } .prose h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.5px; margin: 44px 0 14px; scroll-margin-top: 100px; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 28px 0 10px; } .prose p { color: var(--text-secondary); font-size: 15.5px; margin-bottom: 16px; } .prose ul, .prose ol { margin: 0 0 18px 0; padding-left: 0; list-style: none; } .prose li { position: relative; color: var(--text-secondary); font-size: 15px; padding-left: 24px; margin-bottom: 10px; } .prose li::before { content: ''; position: absolute; left: 0; top: 8px; width: 12px; height: 12px; border-radius: 4px; background: var(--accent-dim); border: 1px solid var(--accent-line); } .prose strong { color: var(--text); font-weight: 600; } .prose a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); } .prose a:hover { text-decoration-color: var(--accent); } .prose em { color: var(--text-tertiary); font-style: italic; } .prose code { font-family: var(--font-mono); font-size: 13px; color: var(--accent); background: var(--accent-dim); padding: 1px 6px; border-radius: 6px; } .prose hr { border: none; border-top: 1px solid var(--border); margin: 36px 0; } .prose blockquote { border-left: 2px solid var(--accent-line); padding-left: 18px; margin: 0 0 18px; color: var(--text-tertiary); } .prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; } .prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); } .prose th { color: var(--text); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; } /* ───────────────────────── "Hear EXCAR" demo control (home hero) ───────────────────────── */ .console-demo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; } .demo-btn { display: inline-flex; align-items: center; gap: 11px; padding: 11px 20px 11px 16px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-dim); color: var(--text); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.5px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .demo-btn:hover { border-color: var(--accent); background: rgba(30, 151, 244, 0.18); } .demo-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Triangle "play" glyph that becomes a square "stop" while playing. */ .demo-icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent var(--accent); transition: all 0.18s ease; } .demo-btn.playing .demo-icon { width: 12px; height: 12px; border: none; border-radius: 2px; background: var(--accent); } .demo-note { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin: 0; text-align: center; max-width: 320px; } /* The idle waveform lives in style.css; intensify it while EXCAR speaks. */ .wave.speaking span { opacity: 1; animation-duration: 0.6s; box-shadow: 0 0 6px 1px rgba(30, 151, 244, 0.6); } /* ───────────────────────── Waitlist: expectation steps + social proof ───────────────────────── */ .waitlist-proof { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.4px; color: var(--accent); margin: 0 0 18px; min-height: 16px; } .waitlist-proof .proof-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 6px 1px rgba(30, 151, 244, 0.7); } .waitlist-steps { list-style: none; margin: 22px auto 0; padding: 0; max-width: 540px; display: grid; gap: 12px; text-align: left; } .waitlist-steps li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--text-secondary); } .waitlist-steps .step-num { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--accent-line); color: var(--accent); font-family: var(--font-mono); font-size: 11px; display: flex; align-items: center; justify-content: center; margin-top: 1px; } /* Team LinkedIn chips (about + investors) */ .team-links { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .team-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); text-decoration: none; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; transition: border-color 0.2s ease, color 0.2s ease; } .team-link:hover { border-color: var(--accent); color: var(--text); } /* Primary platform button — GitHub gets the spotlight (LinkedIn is secondary/optional) */ .team-link--primary { color: #fff; font-weight: 600; background: var(--accent); border-color: var(--accent); padding: 6px 14px; box-shadow: 0 4px 14px -4px rgba(30, 151, 244, 0.6); } .team-link--primary:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 18px -4px rgba(30, 151, 244, 0.7); } /* ───────────────────────── Hero ambient — voice-field canvas ───────────────────────── Injected by premium.js on desktop: a quiet grid of accent dots behind the hero, breathing like a voice waveform and glowing around the pointer. */ .hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Scroll cue at the foot of the pinned hero */ .scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 3px; color: var(--text-tertiary); z-index: 2; pointer-events: none; } .scroll-cue span { display: block; width: 1px; height: 34px; background: linear-gradient(180deg, var(--accent), transparent); animation: cue-drop 1.6s var(--ease-soft) infinite; } @keyframes cue-drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ───────────────────────── Manifesto — word-by-word fill ───────────────────────── premium.js splits [data-manifesto] into .m-word spans and scrubs opacity to 1. Without the premium layer the spans never exist, so the text is simply visible. */ .premium-on .m-word { opacity: 0.14; will-change: opacity; } @media (min-width: 880px) { .premium-on .manifesto { min-height: 100vh; display: flex; align-items: center; } } /* ───────────────────────── Milestones — pinned horizontal scrub ───────────────────────── Desktop premium pins the strip and drives the track sideways; everywhere else the plain overflow-x scroll + snap from index.html takes over. */ @media (min-width: 880px) { .premium-on .milestones { overflow: hidden; } } .premium-on .milestones-track { will-change: transform; } /* ───────────────────────── Reduced motion: disable the whole layer ───────────────────────── */ @media (prefers-reduced-motion: reduce) { .wave.speaking span { animation: none !important; opacity: 1; } .scan-line, .premium-on .boot-curtain { display: none !important; } .hero-canvas, .scroll-cue { display: none !important; } .premium-on .m-word { opacity: 1 !important; } .premium-on .milestones { overflow-x: auto; } .premium-on .milestones-track { transform: none !important; } .premium-on .card, .premium-on .team-card, .premium-on .feature-demo, .premium-on .diagram-card, .premium-on .btn-primary, .premium-on .nav-cta, .premium-on .waitlist-form button { transform: none !important; } .premium-on nav.nav-hidden { transform: none !important; } }