/* ============================================================================ 17 — DUNES · EV Launch / Brutalist Vehicle Marketing Bespoke design language: brushed steel + sunset HDR sky No shared styles. No reused tokens. Built for this template only. ============================================================================ */ :root{ /* Base ink / paper */ --void: #0a0a0a; --night: #14110d; --asphalt: #1a1715; --steel-deep: #2a2825; --steel: #4a4844; --steel-mid: #6e6c66; --steel-light: #a3a8b0; --steel-bright: #c8ccd0; --paper: #ffffff; --paper-mute: #d8d2c8; --paper-faint: #948b7c; /* Sunset palette — golden hour HDR */ --sun-1: #fff2cc; /* highest sun */ --sun-2: #ffd089; /* warm light */ --sun-3: #f97316; /* sunset amber */ --sun-4: #c2410c; /* burnt orange */ --clay: #92400e; /* terracotta */ --clay-deep: #5a2408; /* Sky gradient stops */ --sky-1: #fde4b8; /* horizon glow */ --sky-2: #f9a86b; /* low band */ --sky-3: #d96a3a; /* mid amber */ --sky-4: #6e3a52; /* dusk violet */ --sky-5: #2a1f3a; /* upper band */ --sky-6: #0e0a1a; /* zenith */ /* Lines & accents */ --line: rgba(168, 158, 140, .14); --line-sharp: rgba(168, 158, 140, .28); --line-bright: rgba(255, 240, 200, .26); /* Type stacks */ --display: 'Barlow Condensed', 'Inter', system-ui, sans-serif; --sans: 'Inter', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* Easing */ --ease: cubic-bezier(.25, .46, .45, .94); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spec: cubic-bezier(.58, 1, 0, 0); /* the premium curve */ } *{box-sizing: border-box; margin: 0; padding: 0} html, body{width: 100%; height: 100%} /* Sunset sky gradient on — visible behind canvas if anything is missing */ html{ background: /* Sun glow at horizon */ radial-gradient(60% 22% at 50% 78%, rgba(255, 220, 150, .55) 0%, transparent 70%), /* Mid-band sunset */ linear-gradient(180deg, var(--sky-6) 0%, var(--sky-5) 18%, var(--sky-4) 38%, var(--sky-3) 62%, var(--sky-2) 80%, var(--sky-1) 95%, #ffeac8 100% ); color: var(--paper); font-family: var(--sans); scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body{ overflow: hidden; font-size: calc(15px * var(--res-scale-text, 1)); line-height: 1.55; background: transparent; } body.is-locked{overflow: hidden} ::selection{background: var(--sun-3); color: var(--void)} button, a{font-family: inherit; color: inherit} button{background: none; border: 0; cursor: pointer} a{text-decoration: none} /* ============================================================================ CANVAS — z:0, sits above page bg ============================================================================ */ #fxCanvas{ position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; background: transparent; pointer-events: none; } /* ============================================================================ ATMOSPHERE LAYERS — sky overlay + sand haze + subtle grain ============================================================================ */ /* Soft top-down vignette so the sky reads with depth */ .sky-overlay{ position: fixed; inset: 0; z-index: 1; pointer-events: none; background: /* Top zenith fade-in (deeper night above) */ linear-gradient(180deg, rgba(14, 10, 26, .42) 0%, rgba(14, 10, 26, .12) 28%, transparent 48%, transparent 72%, rgba(217, 106, 58, .08) 88%, rgba(255, 220, 150, .14) 100% ); mix-blend-mode: multiply; } /* Hot sand haze near the horizon — keeps the truck grounded */ .sand-haze{ position: fixed; left: 0; right: 0; bottom: 0; height: 38%; z-index: 2; pointer-events: none; background: radial-gradient(120% 80% at 50% 100%, rgba(217, 106, 58, .26) 0%, rgba(146, 64, 14, .18) 28%, transparent 70% ), linear-gradient(180deg, transparent 0%, rgba(146, 64, 14, .14) 100%); mix-blend-mode: screen; filter: blur(1px); } /* 35 mm film grain — desert dust */ .dune-grain{ position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* ============================================================================ NAV RAIL — Tesla configurator chrome, top ============================================================================ */ .nav-rail{ position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 22px 48px; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .15) 70%, transparent 100%); backdrop-filter: blur(2px); } .nav-rail > *{pointer-events: auto} .nav-rail__brand{ display: inline-flex; align-items: center; gap: 12px; color: var(--paper); font: 700 13px/1 var(--display); letter-spacing: .32em; text-transform: uppercase; } .nav-rail__mark{width: 28px; height: 28px; color: var(--paper); filter: drop-shadow(0 0 8px rgba(255, 200, 120, .3))} .nav-rail__name{color: var(--paper); text-shadow: 0 1px 2px rgba(0, 0, 0, .4)} .nav-rail__links{ justify-self: center; display: inline-flex; align-items: center; gap: 32px; font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; } .nav-rail__links a{ position: relative; color: var(--paper-mute); padding: 10px 0; transition: color .35s var(--ease); } .nav-rail__links a::after{ content: ''; position: absolute; left: 50%; bottom: 4px; width: 0; height: 1px; background: var(--sun-3); transition: width .4s var(--ease), left .4s var(--ease); } .nav-rail__links a:hover{color: var(--paper)} .nav-rail__links a:hover::after{width: 24px; left: calc(50% - 12px)} .nav-rail__pill{ display: inline-block; padding: 7px 14px; font: 500 10px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--sun-2); background: rgba(249, 115, 22, .08); border: 1px solid rgba(249, 115, 22, .35); border-radius: 2px; } /* ============================================================================ TELEMETRY RAIL — bottom ============================================================================ */ .telemetry{ position: fixed; bottom: 22px; right: 48px; z-index: 50; display: inline-flex; align-items: center; gap: 18px; padding: 10px 18px; font: 500 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--paper-mute); background: rgba(10, 10, 10, .42); backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--line); border-radius: 2px; pointer-events: none; } .telemetry__group{display: inline-flex; align-items: center; gap: 8px} .telemetry__lbl{color: var(--paper-faint)} .telemetry__val{color: var(--sun-2); font-variant-numeric: tabular-nums; min-width: 36px} .telemetry__sep{width: 1px; height: 11px; background: var(--line-sharp)} /* ============================================================================ SCENE TAG — left bottom ============================================================================ */ .scene-tag{ position: fixed; bottom: 22px; left: 48px; z-index: 50; display: inline-flex; align-items: baseline; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--paper-mute); pointer-events: none; } .scene-tag__num{color: var(--sun-3); font-weight: 700; font-size: 13px} .scene-tag__sep{color: var(--paper-faint)} .scene-tag__total{color: var(--paper-faint)} .scene-tag__label{margin-left: 12px; color: var(--paper); letter-spacing: .28em} /* ============================================================================ SCROLL CUE — center bottom ============================================================================ */ .scroll-cue{ position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 50; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font: 500 9px/1 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: var(--paper-mute); transition: opacity .6s var(--ease); pointer-events: none; } .scroll-cue.is-hidden{opacity: 0} .scroll-cue__line{ width: 1px; height: 28px; background: linear-gradient(180deg, var(--paper-mute), transparent); animation: scrollLine 2.2s ease-in-out infinite; transform-origin: top; } @keyframes scrollLine{ 0% {transform: scaleY(0); opacity: 0} 35% {opacity: 1} 100% {transform: scaleY(1); opacity: 0} } /* ============================================================================ DECK + SCENES ============================================================================ */ .deck{ position: relative; z-index: 5; height: 100svh; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; } .deck::-webkit-scrollbar{display: none} .scene{ scroll-snap-align: start; min-height: 100svh; display: flex; align-items: center; padding: clamp(96px, 11vh, 156px) clamp(28px, 6vw, 110px); position: relative; } .scene__inner{ width: 100%; max-width: 1320px; margin: 0 auto; position: relative; z-index: 1; } /* Hero — gradient on left for readability against bright sunset */ .scene--hero::before{ content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .72) 0%, rgba(10, 10, 10, .5) 36%, rgba(10, 10, 10, .14) 60%, transparent 88% ); pointer-events: none; } .scene--hero .scene__inner{max-width: 980px} /* Other scenes — bottom-up gradient so the truck silhouette reads */ .scene--power::before, .scene--range::before, .scene--config::before, .scene--reserve::before, .scene--reach::before{ content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10, 10, 10, .35) 0%, rgba(10, 10, 10, .68) 38%, rgba(10, 10, 10, .88) 78%, rgba(10, 10, 10, .94) 100% ); pointer-events: none; } .center-col{display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px} /* ============================================================================ TYPE — Barlow Condensed display, bold + tight ============================================================================ */ .eyebrow{ display: inline-flex; align-items: center; gap: 10px; font: 500 10px/1 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: var(--sun-2); margin-bottom: clamp(20px, 2.4vw, 32px); } .eyebrow__dot{ display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sun-3); box-shadow: 0 0 10px var(--sun-3); animation: emberPulse 2.4s ease-in-out infinite; } @keyframes emberPulse{ 0%, 100% {opacity: .55; transform: scale(1)} 50% {opacity: 1; transform: scale(1.18)} } .eyebrow .ord{color: var(--paper-mute); margin-right: 6px} .display{ font-family: var(--display); font-weight: 700; font-size: clamp(96px, 16vw, 240px); line-height: .82; letter-spacing: -.02em; color: var(--paper); text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 255, 255, .18), 0 6px 40px rgba(249, 115, 22, .26), 0 18px 80px rgba(0, 0, 0, .55); background: linear-gradient(180deg, #ffffff 0%, #ffe9c4 38%, var(--sun-3) 78%, var(--clay) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .section-h{ font-family: var(--display); font-weight: 700; font-size: clamp(56px, 8.4vw, 128px); line-height: .9; letter-spacing: -.012em; color: var(--paper); text-transform: uppercase; text-shadow: 0 8px 40px rgba(0, 0, 0, .55); } .section-h--center{text-align: center} .hero-sub{ margin-top: clamp(22px, 2.4vw, 36px); max-width: 580px; font-size: clamp(15px, 1.18vw, 19px); line-height: 1.55; color: var(--paper-mute); font-weight: 400; } .section-sub{ margin-top: 18px; max-width: 640px; font-size: clamp(14px, 1.05vw, 17px); line-height: 1.6; color: var(--paper-mute); font-weight: 400; } .section-sub--center{margin-left: auto; margin-right: auto} /* Reveal animation */ [data-reveal]{ opacity: 0; transform: translateY(24px); filter: blur(8px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--rd, 0ms); } [data-reveal].is-visible{ opacity: 1; transform: translateY(0); filter: blur(0); } /* ============================================================================ HERO META — three big stat cells (range / 0-60 / drag) ============================================================================ */ .hero-meta{ margin-top: 44px; display: inline-flex; align-items: center; gap: 24px; padding: 22px 28px; background: rgba(10, 10, 10, .42); backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--line-sharp); border-radius: 2px; } .hero-meta__cell{display: inline-flex; flex-direction: column; gap: 6px} .hero-meta__lbl{ font: 500 10px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--paper-faint); } .hero-meta__val{ font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -.01em; color: var(--paper); font-variant-numeric: tabular-nums; } .hero-meta__val small{ font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-faint); margin-left: 4px; } .hero-meta__sep{width: 1px; height: 36px; background: var(--line-sharp)} /* ============================================================================ CTAs ============================================================================ */ .hero-cta-row{ margin-top: 44px; display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; } .cta{ display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; font: 600 11px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--paper); border: 1px solid var(--line-sharp); border-radius: 2px; background: rgba(10, 10, 10, .35); backdrop-filter: blur(8px); transition: background .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease), box-shadow .35s var(--ease); position: relative; overflow: hidden; } .cta svg{width: 16px; height: 12px; transition: transform .35s var(--ease)} .cta:hover{transform: translateY(-1px); border-color: rgba(255, 220, 150, .42)} .cta:hover svg{transform: translateX(4px)} .cta--primary{ color: var(--void); background: linear-gradient(180deg, #ffd089, var(--sun-3)); border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -1px 0 rgba(0, 0, 0, .25) inset, 0 12px 30px -10px rgba(249, 115, 22, .55); } .cta--primary:hover{ background: linear-gradient(180deg, #ffe5af, #f97316); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -1px 0 rgba(0, 0, 0, .25) inset, 0 18px 40px -10px rgba(249, 115, 22, .75); } .cta--ghost{background: transparent} .cta--ghost:hover{background: rgba(255, 255, 255, .04)} .cta--lg{padding: 20px 32px; font-size: 12px; letter-spacing: .28em} /* ============================================================================ SPEC GRID — POWER scene ============================================================================ */ .spec-grid{ margin-top: clamp(40px, 4vw, 64px); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 20px); max-width: 1080px; } .spec{ display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; background: linear-gradient(180deg, rgba(20, 17, 13, .55) 0%, rgba(10, 10, 10, .65) 100%); border: 1px solid var(--line); border-top: 1px solid var(--line-bright); border-radius: 2px; backdrop-filter: blur(16px) saturate(140%); transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease); } .spec:hover{ transform: translateY(-3px); border-color: rgba(249, 115, 22, .42); background: linear-gradient(180deg, rgba(36, 24, 14, .55) 0%, rgba(10, 10, 10, .65) 100%); } .spec__lbl{ font: 500 10px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--sun-2); } .spec__num{ font-family: var(--display); font-weight: 700; font-size: clamp(36px, 3.4vw, 52px); line-height: 1; letter-spacing: -.01em; color: var(--paper); font-variant-numeric: tabular-nums; } .spec__num small{ font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-faint); margin-left: 4px; } .spec__sub{ font-size: 12.5px; color: var(--paper-mute); font-weight: 400; line-height: 1.5; } /* ============================================================================ RANGE TABLE ============================================================================ */ .range-table{ margin-top: clamp(36px, 4vw, 56px); max-width: 980px; border-top: 1px solid var(--line-sharp); border-bottom: 1px solid var(--line-sharp); background: linear-gradient(180deg, rgba(10, 10, 10, .42) 0%, rgba(10, 10, 10, .58) 100%); backdrop-filter: blur(14px) saturate(140%); } .range-table__head{ display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 24px; padding: 14px 22px; font: 500 10px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--paper-faint); border-bottom: 1px solid var(--line-sharp); background: rgba(10, 10, 10, .25); } .range-table__head span:not(:first-child){text-align: right} .range-table__row{ display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 24px; padding: 18px 22px; border-bottom: 1px solid var(--line); transition: background .35s var(--ease), padding-left .35s var(--ease); } .range-table__row:last-child{border-bottom: 0} .range-table__row:hover{ background: linear-gradient(90deg, rgba(249, 115, 22, .06), transparent 70%); padding-left: 28px; } .range-table__cond{ display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--paper); font-weight: 400; } .cond-dot{ display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cond-dot--steady{background: #5fb564; box-shadow: 0 0 10px rgba(95, 181, 100, .5)} .cond-dot--mixed {background: var(--sun-2); box-shadow: 0 0 10px rgba(255, 208, 137, .5)} .cond-dot--cold {background: #6cbef0; box-shadow: 0 0 10px rgba(108, 190, 240, .5)} .cond-dot--tow {background: var(--sun-4); box-shadow: 0 0 10px rgba(194, 65, 12, .5)} .range-table__val{ text-align: right; font-family: var(--display); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .01em; color: var(--paper); font-variant-numeric: tabular-nums; } .range-table__cons{ text-align: right; font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--paper-mute); font-variant-numeric: tabular-nums; align-self: center; } /* Charge speed bar */ .range-charge{margin-top: 36px; max-width: 980px} .range-charge__bar{ position: relative; height: 8px; background: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .08) 100% ); border: 1px solid var(--line-sharp); border-radius: 4px; overflow: visible; } .range-charge__fill{ position: absolute; left: 10%; top: 0; bottom: 0; width: 70%; background: linear-gradient(90deg, var(--sun-3), #fcd34d); border-radius: 4px; box-shadow: 0 0 20px rgba(249, 115, 22, .55); animation: chargeFill 3.4s var(--ease) infinite; transform-origin: left; } @keyframes chargeFill{ 0% {transform: scaleX(0); opacity: 0} 20% {opacity: 1} 90% {transform: scaleX(1); opacity: 1} 100% {transform: scaleX(1); opacity: .25} } .range-charge__marker{ position: absolute; top: -8px; width: 1px; height: 24px; background: var(--paper-faint); transform: translateX(-50%); } .range-charge__marker--end{background: var(--sun-2)} .range-charge__marker span{ position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font: 500 10px/1 var(--mono); letter-spacing: .18em; color: var(--paper-mute); white-space: nowrap; } .range-charge__cap{ margin-top: 24px; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-mute); } .range-charge__cap strong{color: var(--sun-2); font-weight: 700} /* ============================================================================ CONFIGURATOR — trim swatches ============================================================================ */ .trim-row{ margin-top: clamp(40px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); max-width: 920px; } .trim{ display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; background: linear-gradient(180deg, rgba(20, 17, 13, .42) 0%, rgba(10, 10, 10, .55) 100%); border: 1px solid var(--line); border-radius: 2px; backdrop-filter: blur(14px) saturate(140%); cursor: pointer; transition: border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease); text-align: left; } .trim:hover{transform: translateY(-3px); border-color: rgba(255, 220, 150, .32)} .trim--active{ border-color: var(--sun-3); box-shadow: 0 0 0 1px var(--sun-3) inset, 0 18px 40px -16px rgba(249, 115, 22, .42); } .trim__swatch{ position: relative; aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .45); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 8px 22px -8px rgba(0, 0, 0, .55); } .trim__shimmer{ position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65% ); transform: translateX(-100%); transition: transform 1s var(--ease); } .trim:hover .trim__shimmer{transform: translateX(100%)} /* Brushed mill — vertical brushed-steel stripes */ .trim__swatch--brushed{ background: repeating-linear-gradient(90deg, #b3b6bc 0px, #c0c4ca 1px, #989ba0 2px, #aeb1b6 3px ), linear-gradient(180deg, #d6d8dc 0%, #989ba0 100%); } /* Matte mineral — flat dark gunmetal */ .trim__swatch--mineral{ background: radial-gradient(120% 80% at 50% 20%, #4a4844 0%, #2a2825 70%), linear-gradient(180deg, #3a3834 0%, #1f1d1a 100%); } /* Sand-blast clay — warm desert terracotta */ .trim__swatch--clay{ background: radial-gradient(120% 80% at 30% 30%, #c46b3a 0%, #92400e 70%), linear-gradient(180deg, #a04a18 0%, #5a2408 100%); } .trim__name{ font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .04em; color: var(--paper); text-transform: uppercase; } .trim__price{ font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--sun-2); } /* Interior swatches */ .interior-row{ margin-top: 32px; display: inline-flex; align-items: center; gap: 18px; padding: 14px 18px; background: rgba(10, 10, 10, .42); border: 1px solid var(--line); border-radius: 2px; backdrop-filter: blur(12px); } .interior-row__lbl{ font: 500 11px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--paper-mute); } .interior-row__swatches{display: inline-flex; gap: 10px} .iswatch{ width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-sharp); cursor: pointer; transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); } .iswatch:hover{transform: scale(1.08); border-color: var(--paper-mute)} .iswatch--active{ border-color: var(--sun-3); box-shadow: 0 0 0 2px rgba(249, 115, 22, .35); } .iswatch--coal {background: radial-gradient(circle at 35% 30%, #2a2825 0%, #0a0a0a 80%)} .iswatch--wheat {background: radial-gradient(circle at 35% 30%, #e8d5a8 0%, #b89a6a 80%)} .iswatch--clay-int {background: radial-gradient(circle at 35% 30%, #c46b3a 0%, #5a2408 80%)} /* ============================================================================ CONFIG STACK — RESERVE (vertical motor ladder, not card grid) ============================================================================ */ .config-stack{ margin-top: clamp(36px, 4vw, 56px); display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; } .config-row{ display: grid; grid-template-columns: 78px 1.6fr 2.2fr 1.4fr; align-items: center; gap: clamp(20px, 2.6vw, 40px); padding: 22px clamp(18px, 2vw, 28px); border-radius: 2px; background: linear-gradient(90deg, rgba(20,17,13,.0), rgba(20,17,13,.32) 30%, rgba(20,17,13,.32) 70%, rgba(20,17,13,.0)); border-top: 1px solid var(--line); transition: background .45s var(--ease), transform .45s var(--ease); } .config-row:first-child{border-top: 0} .config-row:hover{ background: linear-gradient(90deg, rgba(249,115,22,.04), rgba(249,115,22,.10) 50%, rgba(249,115,22,.04)); transform: translateX(2px); } .config-row--feat{ background: linear-gradient(90deg, rgba(249,115,22,.06), rgba(249,115,22,.16) 50%, rgba(249,115,22,.06)); border-top: 1px solid rgba(249,115,22,.38); } .config-row--feat + .config-row{border-top: 1px solid rgba(249,115,22,.18)} .config-row__id{ display: flex; align-items: center; gap: 14px; } .config-row__num{ font-family: var(--display); font-weight: 500; font-size: 22px; color: var(--sun-3); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .config-row__rule{ flex: 1; height: 1px; background: linear-gradient(90deg, var(--sun-3), transparent); opacity: .5; } .config-row__name h3{ margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: .02em; color: var(--paper); text-transform: uppercase; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .config-row__name p{ margin: 0; font-size: 13px; color: var(--paper-mute); line-height: 1.4; } .config-row__pill{ font: 500 9px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--sun-2); padding: 5px 9px; border: 1px solid rgba(249, 115, 22, .55); border-radius: 2px; background: rgba(249, 115, 22, .08); } .config-row__specs{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 10px; margin: 0; } .config-row__specs div{ display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--line); padding-left: 12px; } .config-row__specs dt{ font: 500 9.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--paper-faint); } .config-row__specs dd{ margin: 0; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--paper); font-variant-numeric: tabular-nums; letter-spacing: .015em; } .config-row__buy{ display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .config-row__price{ margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .config-row__price span{ font-family: var(--display); font-weight: 700; font-size: clamp(28px, 2.6vw, 36px); color: var(--paper); letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1; } .config-row__price small{ font: 500 9.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--paper-faint); } .config-row__cta{ padding: 12px 20px; font: 600 10.5px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--paper); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-sharp); border-radius: 2px; transition: background .3s var(--ease), border-color .3s var(--ease); } .config-row__cta:hover{ background: rgba(255, 220, 150, .12); border-color: rgba(255, 220, 150, .5); } .config-row__cta--feat{ background: linear-gradient(180deg, #ffd089, var(--sun-3)); color: var(--void); border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -1px 0 rgba(0, 0, 0, .25) inset, 0 12px 28px -10px rgba(249, 115, 22, .55); } .config-row__cta--feat:hover{ background: linear-gradient(180deg, #ffe5af, #f97316); } .config-foot{ margin: 28px 0 0; font: 500 10px/1.5 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--paper-faint); } /* ============================================================================ REACH (footer) ============================================================================ */ .reach-actions{ display: flex; align-items: center; gap: 14px; margin-top: 40px; flex-wrap: wrap; justify-content: center; } .dunes-foot{ margin-top: 80px; display: flex; align-items: center; gap: 22px; font: 600 10px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--paper-faint); width: 100%; max-width: 720px; } .dunes-foot__line{ flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 158, 140, .42), transparent); } /* ============================================================================ GATE — sunset loading screen ============================================================================ */ .gate{ position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: radial-gradient(60% 32% at 50% 78%, rgba(255, 220, 150, .55) 0%, transparent 70%), linear-gradient(180deg, var(--sky-6) 0%, var(--sky-5) 22%, var(--sky-4) 44%, var(--sky-3) 64%, var(--sky-2) 82%, var(--sky-1) 96% ); transition: opacity 1.1s var(--ease), visibility 1.1s; } .gate.is-open{opacity: 0; visibility: hidden; pointer-events: none} .gate__sky{ position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 80%, rgba(249, 115, 22, .35) 0%, transparent 60%); animation: gateSkyPulse 4s ease-in-out infinite; pointer-events: none; } @keyframes gateSkyPulse{ 0%, 100% {opacity: .6} 50% {opacity: 1} } .gate__inner{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 460px; text-align: center; padding: 0 32px; } .gate__loading{ font: 500 10px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--paper-mute); display: inline-flex; align-items: center; gap: 10px; } .gate__dots{display: inline-flex; gap: 4px} .gate__dots i{ display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--sun-3); animation: dots 1.4s ease-in-out infinite; } .gate__dots i:nth-child(2){animation-delay: .2s} .gate__dots i:nth-child(3){animation-delay: .4s} @keyframes dots{ 0%, 80%, 100% {opacity: .25} 40% {opacity: 1} } .gate__mark{ width: 96px; height: 96px; color: var(--paper); filter: drop-shadow(0 0 24px rgba(249, 115, 22, .55)); } .gate__title{ font-family: var(--display); font-weight: 700; font-size: 56px; letter-spacing: .22em; text-transform: uppercase; color: var(--paper); margin-top: 6px; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); } .gate__sub{ font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--paper-mute); } .gate__btns{ display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; justify-content: center; } .gate__btn{ padding: 16px 28px; min-height: 50px; min-width: 200px; font: 600 11px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--paper); border: 1px solid rgba(255, 255, 255, .2); border-radius: 2px; background: rgba(10, 10, 10, .35); backdrop-filter: blur(8px); transition: all .35s var(--ease); touch-action: manipulation; } .gate__btn:hover{border-color: rgba(255, 220, 150, .55); background: rgba(255, 220, 150, .12)} .gate__btn--primary{ color: var(--void); background: linear-gradient(180deg, #ffd089, var(--sun-3)); border-color: transparent; box-shadow: 0 12px 30px -10px rgba(249, 115, 22, .65); } .gate__btn--primary:hover{ background: linear-gradient(180deg, #ffe5af, #f97316); box-shadow: 0 18px 40px -10px rgba(249, 115, 22, .85); } .gate__progress{ margin-top: 12px; width: 240px; height: 2px; background: rgba(255, 255, 255, .15); border-radius: 2px; overflow: hidden; } .gate__progress-fill{ display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--sun-3), var(--sun-1)); transition: width .4s var(--ease); box-shadow: 0 0 12px rgba(249, 115, 22, .55); } .gate__small{ margin-top: 10px; font: 500 10px/1.4 var(--mono); letter-spacing: .12em; color: var(--paper-faint); } /* ============================================================================ RESERVATION HUD — live ticker pulse, sits above telemetry ============================================================================ */ .reservation-hud{ position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 50; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; font: 500 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--paper-mute); background: rgba(10, 10, 10, .42); backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--line); border-radius: 2px; pointer-events: none; white-space: nowrap; } .reservation-hud__pulse{ display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #5fb564; box-shadow: 0 0 8px rgba(95, 181, 100, .65); animation: livePulse 2.4s ease-in-out infinite; } @keyframes livePulse{ 0%, 100% {opacity: .5; transform: scale(1)} 50% {opacity: 1; transform: scale(1.4)} } .reservation-hud__count{ color: var(--sun-2); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: .14em; display: inline-block; min-width: 26px; text-align: right; transition: color .35s var(--ease), text-shadow .35s var(--ease), transform .25s var(--ease); } .reservation-hud__count.is-bumped{ color: var(--sun-1); text-shadow: 0 0 14px rgba(255, 220, 150, .8); transform: scale(1.18); } .reservation-hud__sep{color: var(--paper-faint); padding: 0 2px} .reservation-hud__total{color: var(--paper-faint); font-variant-numeric: tabular-nums} .reservation-hud__lbl{margin-left: 8px; color: var(--paper-mute)} /* ============================================================================ SPEC COUNTER — set tabular nums on the live count span ============================================================================ */ .spec__count{ display: inline-block; font-variant-numeric: tabular-nums; min-width: 0; } /* Trim button "tap" feedback when clicked */ .trim.is-tapped{ animation: trimTap .42s var(--ease); } @keyframes trimTap{ 0% {transform: translateY(-3px) scale(1)} 35% {transform: translateY(-1px) scale(.985); box-shadow: 0 0 0 1px var(--sun-3) inset, 0 0 32px -4px rgba(249, 115, 22, .65)} 100% {transform: translateY(-3px) scale(1)} } /* ============================================================================ LUX-MINIMAL OVERRIDE — strip the broadcast/HUD chrome, replace with a slim Tesla-style nav, a floating italic-serif product caption, and a single line of bottom delivery info. Bouquet/marketing voice, not HUD. (Old DOM stubs retained so module.js writes don't crash.) ============================================================================ */ .nav-rail, .telemetry, .scene-tag, .scroll-cue, .reservation-hud{ display: none !important; } /* ---- Slim luxe nav (top) ---- */ .lux-nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding: 18px clamp(28px, 4vw, 56px); pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .18) 60%, transparent 100%); } .lux-nav::after{ content: ''; position: absolute; left: clamp(28px, 4vw, 56px); right: clamp(28px, 4vw, 56px); bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 240, 200, .18), transparent); } .lux-nav > *{pointer-events: auto} .lux-nav__brand{ display: inline-flex; align-items: center; gap: 12px; justify-self: start; color: var(--paper); } .lux-nav__mark{ width: 22px; height: 22px; color: var(--paper); filter: drop-shadow(0 0 6px rgba(255, 200, 120, .25)); } .lux-nav__name{ font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); } .lux-nav__links{ justify-self: center; display: inline-flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: .02em; color: var(--paper-mute); } .lux-nav__links a{ position: relative; padding: 6px 0; color: var(--paper-mute); transition: color .35s var(--ease); } .lux-nav__links a::after{ content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px; background: var(--sun-2); transform: translateX(-50%); transition: width .4s var(--ease); } .lux-nav__links a:hover{color: var(--paper)} .lux-nav__links a:hover::after{width: 18px} .lux-nav__cta{justify-self: end} .lux-nav__btn{ display: inline-flex; align-items: center; padding: 9px 20px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--paper); border: 1px solid rgba(255, 240, 200, .4); border-radius: 999px; background: transparent; transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); } .lux-nav__btn:hover{ background: var(--paper); color: var(--void); border-color: var(--paper); } /* ---- Floating product caption (lower-right, italic serif) ---- */ .lux-caption{ position: fixed; right: clamp(28px, 4vw, 56px); bottom: clamp(48px, 6vh, 76px); z-index: 55; display: inline-flex; align-items: center; gap: 14px; pointer-events: none; opacity: 0; animation: luxCapFade 1.6s var(--ease-out) 1.2s forwards; } .lux-caption__line{ display: inline-block; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 220, 170, .55)); } .lux-caption__text{ font-family: 'Italiana', 'Didot', Georgia, serif; font-style: italic; font-size: 15px; letter-spacing: .01em; color: rgba(255, 235, 200, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .55); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); } .lux-caption__text.is-fading{opacity: 0; transform: translateY(4px)} @keyframes luxCapFade{ from {opacity: 0; transform: translateY(8px)} to {opacity: 1; transform: translateY(0)} } /* ---- Bottom info (delivery + origin), tiny, no chrome ---- */ .lux-foot-info{ position: fixed; left: clamp(28px, 4vw, 56px); bottom: clamp(20px, 3vh, 32px); z-index: 55; display: inline-flex; align-items: center; gap: 12px; pointer-events: none; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-faint); } .lux-foot-info__dot{color: rgba(255, 220, 170, .35)} /* ============================================================================ RESPONSIVE ============================================================================ */ @media (max-width: 1100px){ .lux-nav{padding: 16px 28px; gap: 18px} .lux-nav__links{gap: 18px; font-size: 12px} .spec-grid{grid-template-columns: repeat(2, 1fr)} .config-row{grid-template-columns: 1fr; gap: 14px; padding: 18px 14px} .config-row__specs{grid-template-columns: repeat(2, 1fr); gap: 12px 8px} .config-row__buy{align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%} .config-row__price{align-items: flex-start} .config-row__id{order: -1} .trim-row{grid-template-columns: 1fr; max-width: 460px} } @media (max-width: 720px){ .lux-nav{ grid-template-columns: 1fr auto; padding: 12px 20px; } .lux-nav__links{display: none} .lux-caption{display: none} .lux-foot-info{ bottom: 14px; left: 20px; font-size: 9px; letter-spacing: .1em; gap: 8px; } .scene{padding: clamp(96px, 11vh, 140px) 22px} .display{font-size: clamp(72px, 18vw, 124px)} .section-h{font-size: clamp(42px, 11vw, 72px)} .hero-meta{ flex-wrap: wrap; gap: 16px; padding: 18px 20px; } .hero-meta__sep{display: none} .range-table__head, .range-table__row{ grid-template-columns: 1fr auto; gap: 12px; } .range-table__cons{display: none} .dunes-foot{flex-direction: column; gap: 10px} .dunes-foot__line{display: none} } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal]{opacity: 1; transform: none; filter: none} .reservation-hud__count.is-bumped{transform: none} .trim.is-tapped{animation: none} }