:root { color-scheme: dark; /* Cinematic automotive palette — deep black + charcoal, off-white text, and a restrained platinum/chrome accent (not gold, not saturated) per the brand's art direction: expensive, controlled, never "gaming site." */ --black: #060607; --charcoal: #0f0f11; --charcoal-2: #17171a; --charcoal-3: #1f1f23; --line: #29292d; --line-soft: rgba(255,255,255,.09); --white: #f6f5f2; --off: #c7c4bc; --mute: #8b887f; --metal: #cfd2d6; --metal-dim: #9a9ea3; --wa: #25D366; --wa-dark: #1ea952; --radius: 4px; --radius-lg: 2px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Bebas Neue', 'Oswald', Impact, sans-serif; --ease: cubic-bezier(.16,.84,.44,1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--font); color: var(--white); background: var(--black); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } p { margin: 0; } .wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; } ::selection { background: var(--metal); color: #0a0a0b; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .96; margin: 0; } /* Progressive enhancement for scroll effects — see the top of main.js and the note in README.md. html.js is set synchronously in , before paint, so there's never a flash; without it (JS off/blocked/erroring) everything is visible immediately, full stop. */ html.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); } html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } html.js .reveal-2 { transition-delay: .1s; } html.js .reveal-3 { transition-delay: .2s; } html.js .reveal-4 { transition-delay: .3s; } /* ---------- motion-language variants ---------- Each section gets its own reveal treatment instead of one blanket fade — see README for the full list. All gated under html.js/is-visible exactly like the base .reveal above, so nothing is ever hidden without JS. */ /* NOTE: the clip-path that hides these lives on an INNER element (.clip-inner, or the itself for .reveal-mask) — never on the element IntersectionObserver is actually watching. A clip-path'd-to-zero target reports zero intersection to IO (the spec factors the target's own clip rect into the visible area), so if the observed node were the clipped one it would sit at 0% forever and never cross the reveal threshold — a real deadlock caught via testing. */ .reveal-clip .clip-inner { display: block; } html.js .reveal-clip .clip-inner { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); } html.js .reveal-clip.is-visible .clip-inner { clip-path: inset(0 0 0% 0); } html.js .reveal-side-l { opacity: 0; transform: translateX(-64px); } html.js .reveal-side-r { opacity: 0; transform: translateX(64px); } html.js .reveal-side-l.is-visible, html.js .reveal-side-r.is-visible { opacity: 1; transform: translateX(0); } html.js .reveal-scale { opacity: 0; transform: scale(.9); } html.js .reveal-scale.is-visible { opacity: 1; transform: scale(1); } html.js .reveal-mask img { clip-path: inset(0 0 100% 0); transform: scale(1.18); transition: clip-path 1.15s var(--ease), transform 1.4s var(--ease); } html.js .reveal-mask.is-visible img { clip-path: inset(0 0 0% 0); transform: scale(1); } html.js .reveal-route .hyd-route { width: 0; transition: width 1.1s .3s var(--ease); } html.js .reveal-route.is-visible .hyd-route { width: 220px; } /* staggered children — steps, pills, trust stats, and (via inline transition-delay set in main.js) the JS-rendered fleet cards & FAQ items */ html.js .reveal-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } html.js .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); } html.js .reveal-stagger > *:nth-child(2) { transition-delay: .08s; } html.js .reveal-stagger > *:nth-child(3) { transition-delay: .16s; } html.js .reveal-stagger > *:nth-child(4) { transition-delay: .24s; } html.js .reveal-stagger > *:nth-child(5) { transition-delay: .32s; } html.js .reveal-stagger > *:nth-child(6) { transition-delay: .40s; } html.js .reveal-stagger > *:nth-child(7) { transition-delay: .48s; } html.js .reveal-stagger > *:nth-child(8) { transition-delay: .56s; } html.js .reveal-scale.reveal-stagger > * { transform: scale(.88); } html.js .reveal-scale.reveal-stagger.is-visible > * { transform: scale(1); } /* hero headline — masked line reveal, triggered on load (not scroll) */ .hero-title .line { display: block; overflow: hidden; } .hero-title .line i { display: block; font-style: normal; } html.js .hero-title .line i { transform: translateY(115%); transition: transform 1s .15s var(--ease); } html.js .hero-title.is-ready .line i { transform: translateY(0); } html.js .hero-title .reveal-line-2 { transition-delay: .32s; } /* magnetic buttons — nudged toward the cursor by main.js on pointer:fine */ .magnetic { will-change: transform; } .eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 650; letter-spacing: .26em; text-transform: uppercase; color: var(--metal); } .eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--metal-dim); } .eyebrow.center { justify-content: center; } .eyebrow.center::after { content: ""; width: 34px; height: 1px; background: var(--metal-dim); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; font-family: var(--font); font-weight: 650; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: transform .3s var(--ease), background .3s, border-color .3s, color .3s; white-space: nowrap; border-radius: var(--radius); } .btn-primary { background: var(--white); color: #0a0a0b; } .btn-primary:hover { background: var(--metal); transform: translateY(-2px); } .btn-outline { background: transparent; border-color: rgba(255,255,255,.3); color: var(--white); } .btn-outline:hover { border-color: var(--white); transform: translateY(-2px); } .btn-whatsapp { background: var(--wa); color: #fff; border-color: var(--wa); } .btn-whatsapp:hover { background: var(--wa-dark); transform: translateY(-2px); } .btn-row { display: flex; gap: 14px; flex-wrap: wrap; } /* ---------- header ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 90; padding: 22px 0; transition: background .4s, padding .4s, border-color .4s; border-bottom: 1px solid transparent; } .site-header.scrolled { background: rgba(6,6,7,.85); backdrop-filter: blur(14px); padding: 14px 0; border-color: var(--line-soft); } .header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .brand-mark { width: 38px; height: 38px; border: 1px solid var(--metal-dim); display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; letter-spacing: .04em; color: var(--white); flex-shrink: 0; } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-text strong { font-family: var(--font-display); font-size: 16.5px; letter-spacing: .05em; color: var(--white); } .brand-text span { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-top: 2px; } .main-nav { display: flex; align-items: center; gap: 30px; } .main-nav a { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--off); white-space: nowrap; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } .main-nav a:hover { color: var(--white); } .main-nav a.active { color: var(--white); border-color: var(--metal); } .header-actions { position: relative; z-index: 95; display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .header-call { padding: 12px 18px; font-size: 11.5px; } .admin-link { font-family: var(--font); font-size: 10.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--line); padding: 10px 15px; white-space: nowrap; transition: color .2s, border-color .2s; } .admin-link:hover { color: var(--white); border-color: var(--metal-dim); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; color: var(--white); width: 30px; height: 20px; position: relative; } .nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .25s, opacity .25s; } .nav-toggle::before { top: 0; } .nav-toggle span { top: 9px; } .nav-toggle::after { bottom: 0; } body.nav-open .nav-toggle::before { transform: translateY(9px) rotate(45deg); } body.nav-open .nav-toggle span { opacity: 0; } body.nav-open .nav-toggle::after { transform: translateY(-9px) rotate(-45deg); } /* ---------- hero ---------- */ .hero { position: relative; height: 100vh; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; background: var(--black); } .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; opacity: .85; transform: scale(1.08); will-change: transform, opacity; } .hero-video { display: block; background: var(--black); } /* "arrival" — the car eases into frame on load rather than snapping in */ html.js .hero-video { opacity: 0; transform: scale(1.22); transition: transform 1.8s var(--ease), opacity 1.4s ease; } html.js .hero.hero-ready .hero-video { opacity: .85; transform: scale(1.08); } .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,6,7,.35) 0%, rgba(6,6,7,.25) 40%, rgba(6,6,7,.92) 92%), linear-gradient(90deg, rgba(6,6,7,.75) 0%, rgba(6,6,7,.15) 45%, rgba(6,6,7,.55) 100%); } .hero-content { position: relative; z-index: 2; width: 100%; padding-bottom: 8vh; } .hero-kicker { font-size: 12px; font-weight: 650; letter-spacing: .34em; text-transform: uppercase; color: var(--metal); margin-bottom: 22px; } .hero h1 { font-size: clamp(52px, 10vw, 128px); color: var(--white); margin-bottom: 22px; } .hero h1 span { display: block; } .hero-sub { font-family: var(--font); font-size: clamp(16px, 1.6vw, 20px); font-weight: 600; color: var(--white); letter-spacing: .01em; margin-bottom: 14px; max-width: 40ch; } .hero-desc { font-family: var(--font); font-size: 14.5px; color: var(--off); max-width: 46ch; margin-bottom: 38px; line-height: 1.7; } .hero-scroll-cue { position: absolute; left: 28px; bottom: 28px; z-index: 2; display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); } .hero-scroll-cue .line { width: 1px; height: 34px; background: linear-gradient(var(--metal-dim), transparent); animation: scrollCue 2.2s ease-in-out infinite; } @keyframes scrollCue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.01% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ---------- showcase video (hero -> collection bridge) ---------- */ .showcase-video-stage { max-width: 780px; margin: 56px auto 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px var(--line-soft); background: var(--charcoal-2); } .showcase-video-stage video, .showcase-video-stage img { width: 100%; height: auto; display: block; } .section-cta { justify-content: center; margin-top: 38px; } /* ---------- the journey (small, no pinning, no scroll-scrubbing) ---------- */ /* A single normal-height section: a line that grows once (a plain CSS transition triggered by the same .reveal/is-visible mechanism as the rest of the site — not tied to scroll position) and five small circular photo nodes that fade in along it, staggered. Replaces the earlier full-screen 7-stage pinned story. Without JS the line is just drawn at full length and every node is visible immediately — nothing here depends on scroll math. */ .journey { padding: 90px 0 110px; } .journey-line { position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 80px; padding: 0 10px; } .journey-track { position: absolute; top: 46px; left: 0; right: 0; height: 2px; background: var(--line); overflow: hidden; } .journey-track::after { content: ""; position: absolute; inset: 0; background: var(--metal); } html.js .journey-track::after { transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); } html.js .journey-line.is-visible .journey-track::after { transform: scaleX(1); } /* a detailed little car that races the length of the line once it's drawn, then loops softly — the one continuous bit of motion in this section, everything else fires once. Purely decorative (aria-hidden), off entirely without JS or under reduced motion since it only ever runs inside html.js .is-visible. z-index sits BELOW the node dots (which are 2) on purpose, so the car visibly ducks behind each photo as it passes rather than driving across the image — it only ever "shows" on the bare line. */ .journey-car { position: absolute; top: 46px; left: 0; width: 108px; height: 31px; margin: -15.5px 0 0 -14px; z-index: 1; opacity: 0; pointer-events: none; } .journey-car-icon { position: relative; z-index: 2; width: 100%; height: 100%; display: block; color: var(--white); filter: drop-shadow(0 3px 8px rgba(0,0,0,.55)); overflow: visible; } .journey-car-body { fill: currentColor; } .journey-car-glass { fill: var(--charcoal); } .journey-car-headlight { fill: #ffd27a; } .journey-car-taillight { fill: #ff5a5a; } .journey-car-rim { fill: var(--charcoal-2); stroke: currentColor; stroke-width: 2; } .journey-car-spoke { stroke: currentColor; stroke-width: 1.3; } .journey-wheel { transform-box: fill-box; transform-origin: center; } html.js .journey-line.is-visible .journey-wheel { animation: journeyWheelSpin .45s linear infinite; } @keyframes journeyWheelSpin { to { transform: rotate(360deg); } } /* three fanned-out streaks instead of one flat bar — reads as speed lines */ .journey-car-trail { position: absolute; right: 90%; border-radius: 2px; background: linear-gradient(to left, rgba(246,245,242,.75), rgba(246,245,242,0)); } .journey-car-trail-1 { top: 34%; width: 92px; height: 3px; } .journey-car-trail-2 { top: 52%; width: 68px; height: 2.5px; opacity: .7; } .journey-car-trail-3 { top: 70%; width: 46px; height: 2px; opacity: .45; } html.js .journey-line.is-visible .journey-car { animation: journeyRace 2.2s linear 1.3s infinite; } @keyframes journeyRace { 0% { left: -6%; opacity: 0; transform: translateY(0); } 5% { opacity: 1; } 25% { transform: translateY(-3px); } 50% { transform: translateY(0); } 75% { transform: translateY(-3px); } 95% { opacity: 1; } 100% { left: 106%; opacity: 0; transform: translateY(0); } } @keyframes journeyRaceV { 0% { top: -6%; opacity: 0; transform: translateX(0) rotate(90deg); } 5% { opacity: 1; } 25% { transform: translateX(-3px) rotate(90deg); } 50% { transform: translateX(0) rotate(90deg); } 75% { transform: translateX(-3px) rotate(90deg); } 95% { opacity: 1; } 100% { top: 106%; opacity: 0; transform: translateX(0) rotate(90deg); } } .journey-node { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 140px; cursor: default; } .journey-dot { position: relative; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; display: block; background: var(--charcoal-2); box-shadow: 0 0 0 5px var(--black), 0 0 0 6px var(--line-soft); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .journey-dot img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .journey-node:hover .journey-dot { transform: scale(1.1); box-shadow: 0 0 0 5px var(--black), 0 0 0 6px var(--metal-dim); } .journey-node:hover .journey-dot img { transform: scale(1.1); } .journey-label { font-family: var(--font); font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--off); transition: color .3s; } .journey-node:hover .journey-label { color: var(--white); } /* a ring that pings outward from each dot the instant it lands — timed to match that node's own reveal delay below, so the "pop" reads as one motion. */ .journey-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--metal); opacity: 0; } html.js .journey-node { opacity: 0; transform: translateY(14px) scale(.8); transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1); } html.js .journey-line.is-visible .journey-node { opacity: 1; transform: translateY(0) scale(1); } html.js .journey-line.is-visible .journey-node:nth-child(3) { transition-delay: .3s; } html.js .journey-line.is-visible .journey-node:nth-child(4) { transition-delay: .5s; } html.js .journey-line.is-visible .journey-node:nth-child(5) { transition-delay: .7s; } html.js .journey-line.is-visible .journey-node:nth-child(6) { transition-delay: .9s; } html.js .journey-line.is-visible .journey-node:nth-child(7) { transition-delay: 1.1s; } html.js .journey-line.is-visible .journey-node:nth-child(3) .journey-dot::after { animation: journeyPing .8s var(--ease) .3s; } html.js .journey-line.is-visible .journey-node:nth-child(4) .journey-dot::after { animation: journeyPing .8s var(--ease) .5s; } html.js .journey-line.is-visible .journey-node:nth-child(5) .journey-dot::after { animation: journeyPing .8s var(--ease) .7s; } html.js .journey-line.is-visible .journey-node:nth-child(6) .journey-dot::after { animation: journeyPing .8s var(--ease) .9s; } html.js .journey-line.is-visible .journey-node:nth-child(7) .journey-dot::after { animation: journeyPing .8s var(--ease) 1.1s; } @keyframes journeyPing { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } } /* ---------- sections (generic) ---------- */ .section { padding: 130px 0; position: relative; background: var(--black); } .section-tight { padding: 90px 0; } .section-early { padding-top: 90px; } .section-alt { background: var(--charcoal); } .section-title { font-size: clamp(30px, 4.6vw, 58px); color: var(--white); text-align: center; margin: 18px auto 0; max-width: 16ch; } .section-title.left { text-align: left; margin-left: 0; } .section-sub { font-family: var(--font); text-align: center; color: var(--mute); margin: 20px auto 0; max-width: 52ch; font-size: 14.5px; line-height: 1.7; } .section-sub.left { text-align: left; margin-left: 0; } .section-head { text-align: center; margin-bottom: 60px; } .section-head.left { text-align: left; } .section-head.left .eyebrow { justify-content: flex-start; } /* ---------- how it works — a staggered "track," not a flat grid ---------- */ /* Four cards riding a shared rail at alternating heights (like a car easing through a chicane rather than four filing cabinets), each igniting on hover — the ghost numeral fills solid, an accent line draws in underneath, and a chevron nudges forward. The whole group still enters as one plain .reveal fade — only the resting positions (the zig-zag) and the hover state are bespoke, so nothing fights the shared reveal transform. */ .process-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 78px; padding-top: 44px; } .process-rail { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); overflow: hidden; } .process-rail::after { content: ""; position: absolute; inset: 0; background: var(--metal); } html.js .process-rail::after { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); } html.js .process-track.is-visible .process-rail::after { transform: scaleX(1); } .process-step { position: relative; background: var(--black); border: 1px solid var(--line); padding: 34px 24px 30px; transform: translateY(var(--off, 0px)); transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; } .process-step:hover { transform: translateY(calc(var(--off, 0px) - 10px)); border-color: var(--metal-dim); box-shadow: 0 24px 60px rgba(0,0,0,.45); } .process-num { display: block; font-family: var(--font-display); font-size: 58px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--metal-dim); margin-bottom: 24px; transition: color .4s, -webkit-text-stroke-color .4s, transform .4s var(--ease); } .process-step:hover .process-num { color: var(--white); -webkit-text-stroke-color: var(--white); transform: translateY(-2px); } .process-step h3 { font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--white); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; } .process-arrow { font-style: normal; font-family: var(--font-display); font-size: 16px; color: var(--metal); opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s; } .process-step:hover .process-arrow { opacity: 1; transform: translateX(0); } .process-step p { font-family: var(--font); font-size: 13.5px; color: var(--mute); line-height: 1.6; } .process-step::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: var(--metal); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .process-step:hover::after { transform: scaleX(1); } /* ---------- fleet ---------- */ .filter-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 44px 0 4px; } .filter-chip { font-family: var(--font); border: 1px solid var(--line); background: transparent; padding: 10px 20px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; color: var(--off); transition: .2s; } .filter-chip:hover { border-color: var(--metal-dim); color: var(--white); } .filter-chip.active { background: var(--white); border-color: var(--white); color: #0a0a0b; } .fleet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 40px; background: var(--line); } .car-card { position: relative; background: var(--black); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); } html.js .car-card.reveal { opacity: 0; transform: translateY(44px); transition: opacity .8s var(--ease), transform .8s var(--ease); } html.js .car-card.reveal.is-visible { opacity: 1; transform: translateY(0); } .car-card:hover { box-shadow: 0 24px 60px rgba(0,0,0,.5); z-index: 2; } .car-card-media { position: relative; height: 300px; overflow: hidden; background: var(--charcoal-2); } .car-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .car-card:hover .car-card-media img { transform: scale(1.1); } .car-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,6,7,0) 45%, rgba(6,6,7,.9) 100%); } .car-card-media::before { content: ""; position: absolute; z-index: 3; inset: 0; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%); transform: translateX(-140%); transition: transform 1s var(--ease); pointer-events: none; } .car-card:hover .car-card-media::before { transform: translateX(140%); } .car-card-cat-tag { position: absolute; top: 18px; left: 18px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--white); background: rgba(6,6,7,.55); border: 1px solid rgba(255,255,255,.25); padding: 7px 12px; backdrop-filter: blur(4px); } .car-card-body { padding: 26px 26px 30px; } .car-card-body h3 { font-family: var(--font-display); font-size: 24px; color: var(--white); margin-bottom: 6px; letter-spacing: .01em; } .car-card-specs { font-family: var(--font); font-size: 12px; color: var(--mute); margin-bottom: 20px; letter-spacing: .02em; } .car-card-prices { display: flex; align-items: baseline; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: 20px; } .car-card-prices .p { display: flex; flex-direction: column; } .car-card-prices .p b { font-family: var(--font-display); font-size: 22px; color: var(--white); letter-spacing: .01em; } .car-card-prices .p span { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-top: 3px; } .car-card-actions { display: flex; gap: 10px; } .car-card-actions .btn { flex: 1; padding: 13px 14px; font-size: 10.5px; } /* ---------- the range (was three full-screen showcase scenes, condensed) ---------- */ .range-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 50px; background: var(--line); } .range-card { background: var(--black); } .range-media { height: 220px; overflow: hidden; } .range-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .range-card:hover .range-media img { transform: scale(1.06); } .range-num { display: block; font-family: var(--font); font-size: 11px; letter-spacing: .2em; color: var(--metal); margin: 22px 26px 10px; } .range-card h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 22px; color: var(--white); margin: 0 26px 12px; line-height: 1.05; } .range-card p { font-family: var(--font); font-size: 13.5px; color: var(--mute); line-height: 1.7; margin: 0 26px 26px; } /* ---------- interior ---------- */ .interior-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 56px; background: var(--line); } .interior-media { position: relative; height: 460px; overflow: hidden; } .interior-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .interior-media:hover img { transform: scale(1.05); } /* ---------- monthly / trust / hyderabad ---------- */ .dark-cta { position: relative; background: var(--charcoal); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; } .dark-cta-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; } .dark-cta h2 { font-size: clamp(32px, 5vw, 62px); color: var(--white); margin: 18px 0 22px; } .dark-cta p { font-family: var(--font); color: var(--off); font-size: 15px; max-width: 44ch; margin-bottom: 30px; line-height: 1.7; } .pill-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); } .pill-list div { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--line); font-family: var(--font); } .pill-list b { font-family: var(--font-display); font-size: 15px; letter-spacing: .04em; color: var(--white); } .pill-list span { font-size: 12px; color: var(--mute); } /* ---------- why mani's cars town (car-in-a-circle hub + spoke) ---------- */ .why-hub { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 56px; margin-top: 60px; } .why-points { display: flex; flex-direction: column; gap: 42px; } .why-points-right { text-align: right; } .why-point h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 19px; letter-spacing: .01em; color: var(--white); margin-bottom: 10px; } .why-point p { font-family: var(--font); font-size: 13.5px; color: var(--mute); line-height: 1.7; max-width: 30ch; } .why-points-right .why-point p { margin-left: auto; } .why-media { position: relative; width: 280px; height: 280px; margin: 0 auto; flex-shrink: 0; } .why-media img { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 30px 80px rgba(0,0,0,.55); } .why-ring { position: absolute; inset: -16px; border-radius: 50%; border: 1px dashed var(--line-soft); z-index: 1; pointer-events: none; } .why-ring-2 { inset: -32px; border-color: var(--line); } html.js .why-ring { animation: whySpin 32s linear infinite; } html.js .why-ring-2 { animation: whySpin 50s linear infinite reverse; } @keyframes whySpin { to { transform: rotate(360deg); } } /* ---------- fleet marquee (pure CSS loop, no video, stays light) ---------- */ .marquee-section { padding: 44px 0; overflow: hidden; background: var(--charcoal); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .marquee-track { display: flex; width: max-content; } html.js .marquee-track { animation: marqueeScroll 30s linear infinite; } .marquee-section:hover .marquee-track { animation-play-state: paused; } .marquee-group { display: flex; gap: 18px; padding-right: 18px; flex-shrink: 0; } .marquee-group img { width: 220px; height: 130px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0; filter: grayscale(.2); opacity: .8; transition: opacity .3s, filter .3s; } .marquee-group img:hover { opacity: 1; filter: grayscale(0); } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hyd { position: relative; height: 88vh; min-height: 560px; display: flex; align-items: center; overflow: hidden; } .hyd-bg { position: absolute; inset: 0; z-index: 0; } .hyd-bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; } .hyd-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,6,7,.92) 0%, rgba(6,6,7,.55) 48%, rgba(6,6,7,.35) 100%); } .hyd-content { position: relative; z-index: 2; max-width: 620px; } .hyd h2 { font-size: clamp(32px, 5.4vw, 66px); color: var(--white); margin: 18px 0 20px; } .hyd p { font-family: var(--font); color: var(--off); font-size: 15px; line-height: 1.75; margin-bottom: 28px; } .hyd-route { position: relative; height: 2px; background: var(--line); margin-top: 6px; overflow: hidden; width: 220px; } .hyd-route::before { content: ""; position: absolute; inset: 0; width: 200%; background-image: repeating-linear-gradient(to right, var(--metal) 0 18px, transparent 18px 36px); animation: routeMove 1.4s linear infinite; } @keyframes routeMove { from { transform: translateX(0); } to { transform: translateX(-36px); } } /* ---------- FAQ ---------- */ .faq-list { max-width: 760px; margin: 50px auto 0; } .faq-item { border-top: 1px solid var(--line); } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; text-align: left; background: none; border: 0; padding: 26px 4px; font-family: var(--font); font-size: 15.5px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; color: var(--white); transition: color .2s; } .faq-q:hover { color: var(--metal); } .faq-q .chev { font-family: var(--font-display); transition: transform .3s var(--ease); color: var(--metal); flex-shrink: 0; font-size: 20px; } .faq-item.open .faq-q .chev { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); } .faq-a p { font-family: var(--font); padding: 0 4px 26px; color: var(--mute); font-size: 14px; line-height: 1.7; max-width: 66ch; } .faq-cta { text-align: center; margin-top: 50px; } .faq-cta p { color: var(--mute); margin-bottom: 16px; font-size: 14px; font-family: var(--font); } /* ---------- book / enquiry form ---------- */ .enquiry-form { max-width: 820px; margin: 50px auto 0; background: var(--charcoal-2); border: 1px solid var(--line); padding: 40px; } .ef-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .ef-field { display: flex; flex-direction: column; gap: 9px; } .ef-field-full { margin-bottom: 24px; } .ef-field label { font-family: var(--font); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .ef-field input, .ef-field select, .ef-field textarea { padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14.5px; font-family: var(--font); background: var(--black); color: var(--white); width: 100%; } .ef-field textarea { resize: vertical; min-height: 90px; } .ef-field input:focus, .ef-field select:focus, .ef-field textarea:focus { outline: none; border-color: var(--metal-dim); } .ef-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .ef-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ef-note { font-family: var(--font); font-size: 12px; color: var(--mute); } .ef-alert { margin-top: 18px; padding: 13px 16px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600; border: 1px solid; font-family: var(--font); } .ef-alert.success { background: rgba(37,211,102,.08); border-color: rgba(37,211,102,.4); color: #4ee08c; } .ef-alert.error { background: rgba(240,90,90,.08); border-color: rgba(240,90,90,.4); color: #ff8a8a; } .req { color: var(--metal); } /* ---------- final cinematic scene ---------- */ .finale { position: relative; height: 100vh; min-height: 620px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } .finale-bg { position: absolute; inset: 0; z-index: 0; } .finale-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; will-change: transform; } .finale-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 100%, rgba(6,6,7,.5), rgba(6,6,7,.96)); } .finale-content { position: relative; z-index: 2; } .finale-kicker { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--metal); margin-bottom: 24px; } .finale h2 { font-size: clamp(38px, 7.5vw, 92px); color: var(--white); margin-bottom: 40px; } .finale .btn-row { justify-content: center; } /* ---------- contact ---------- */ .contact-grid { text-align: center; } .contact-line { font-family: var(--font); color: var(--off); font-size: 14.5px; margin-top: 12px; } .contact-line a { color: var(--white); font-weight: 600; } /* ---------- footer ---------- */ .site-footer { background: var(--black); color: var(--mute); padding: 60px 0 24px; border-top: 1px solid var(--line); } .footer-grid { display: grid; grid-template-columns: 1.3fr .7fr .7fr .7fr; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--line); } .footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; } .footer-brand strong { font-family: var(--font-display); font-size: 18px; letter-spacing: .04em; color: var(--white); } .footer-tagline { font-family: var(--font); font-size: 13px; margin-bottom: 12px; line-height: 1.7; max-width: 40ch; } .site-footer .contact-line { color: var(--mute); font-size: 13px; margin-top: 7px; } .site-footer h4 { font-family: var(--font); color: var(--white); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 18px; font-weight: 700; } .footer-categories { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .footer-categories button { background: none; border: 0; color: var(--mute); font-size: 13.5px; cursor: pointer; padding: 0; text-align: left; font-family: inherit; transition: color .2s; } .footer-categories button:hover { color: var(--white); } .footer-categories a { color: var(--mute); font-size: 13.5px; transition: color .2s; } .footer-categories a:hover { color: var(--white); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 11.5px; color: var(--mute); flex-wrap: wrap; gap: 10px; font-family: var(--font); } .footer-bottom .admin-link { border-color: var(--line); color: var(--mute); } .footer-bottom .admin-link:hover { color: var(--white); border-color: var(--metal-dim); } /* ---------- responsive ---------- */ @media (max-width: 1180px) { .main-nav { display: none; } .nav-toggle { display: block; } .header-call { display: none; } body.nav-open .main-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 84vw); background: var(--charcoal); border-left: 1px solid var(--line); padding: 100px 30px 30px; z-index: 89; overflow-y: auto; } body.nav-open .main-nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line); } } @media (max-width: 980px) { .process-track { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } .process-step, .process-step:hover { transform: none; } .fleet-grid, .range-grid { grid-template-columns: repeat(2, 1fr); } .interior-grid, .dark-cta-grid { grid-template-columns: 1fr; } .interior-grid { gap: 2px; } .why-hub { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 40px; } .why-points, .why-points-right { text-align: center; align-items: center; } .why-points-right .why-point p, .why-point p { margin-left: auto; margin-right: auto; } .why-media { order: -1; } .footer-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .wrap { padding: 0 20px; } .process-track, .fleet-grid, .range-grid { grid-template-columns: 1fr; } .process-track { row-gap: 20px; } .why-media { width: 220px; height: 220px; } .marquee-group img { width: 170px; height: 100px; } .hero { min-height: 560px; } .hero-scroll-cue { display: none; } /* was overlapping the CTA buttons on short mobile viewports */ .hero-content { padding-bottom: 40px; } .hero-desc { display: none; } .section { padding: 84px 0; } .section-tight { padding: 64px 0; } .brand-text span { display: none; } .admin-link { padding: 9px 12px; font-size: 10px; } .ef-row { grid-template-columns: 1fr; gap: 14px; } .enquiry-form { padding: 24px; } .car-card-actions { flex-direction: column; } .hyd, .finale { height: auto; min-height: 100vh; padding: 90px 0; align-items: center; } .hyd-content { padding-bottom: 0; } .showcase-video-stage { margin-top: 40px; } html.js .reveal-side-l, html.js .reveal-side-r { transform: translateX(0) translateY(24px); } /* the journey line rotates to vertical — a trunk down the left edge with each node branching off to its right, instead of a cramped 5-across row. */ .journey-line { flex-direction: column; align-items: flex-start; gap: 32px; margin-top: 50px; padding: 0; } .journey-track { top: 0; bottom: 0; left: 46px; right: auto; width: 2px; height: auto; } html.js .journey-track::after { transform: scaleY(0); transform-origin: top; transition: transform 1.1s var(--ease); } html.js .journey-line.is-visible .journey-track::after { transform: scaleY(1); } .journey-node { flex-direction: row; align-items: center; width: auto; gap: 18px; } .journey-dot { width: 76px; height: 76px; } .journey-car { top: 0; left: 46px; } html.js .journey-line.is-visible .journey-car { animation-name: journeyRaceV; animation-duration: 2.2s; animation-delay: 1.1s; } }