/* ═══════════════════════════════════════════════════════════════════════════ dvani.ai — site.css One stylesheet for every page. The first half is the existing "Midnight Premium" theme lifted verbatim from the old inline styles (tokens, nav, buttons, cards, footer) so nothing that already worked changes. The second half is what the product line needed: the Products panel, product page chassis, store, cart, checkout, placeholders, diagrams. ═══════════════════════════════════════════════════════════════════════════ */ :root { --primary: #1E293B; --primary-light: #334155; --primary-dark: #0F172A; --accent: #F97316; --accent-light: #FED7AA; --accent-dark: #EA580C; --bg: #020617; --surface: #0F172A; --surface-2: #16203A; --surface-hover: #334155; --text-primary: #F1F5F9; --text-secondary: #94A3B8; /* 7.9:1 on --bg */ /* Was #64748B — 4.24:1 on --bg and 3.75:1 on --surface, i.e. below AA on the cards where it was mostly used. #8FA0B8 is 7.6:1 and still reads as muted against --text-primary. */ --text-muted: #8FA0B8; /* Ink for text sitting ON the accent. White on #F97316 is 2.80:1 — the primary CTA was the least legible text on the site. This is 6.9:1 and keeps the brand orange exactly as it is in the logo. */ --on-accent: #1C0701; /* Type scale — 1.2 ratio on a 16px body. Nine steps, each doing distinct work. Do not introduce a size between these: the previous sheet had 14 sizes including five (14/15/16/17/18) that were visually identical. */ --t-label: 12px; /* mono eyebrows, pills, badges — the floor, never smaller */ --t-xs: 13px; /* captions, meta, fine print */ --t-base: 16px; /* body, nav, buttons, card copy */ --t-md: 19px; /* lede, card titles */ --t-lg: 23px; /* h3 */ --t-xl: 28px; /* h2 */ --t-2xl: 33px; /* section titles */ --t-3xl: 40px; /* figures */ --success: #10B981; --blue: #60A5FA; --amber: #FBBF24; --border: #1E293B; --border-light: #0F172A; --shadow-md: 0 4px 6px -1px rgba(0,0,0,.2), 0 2px 4px -2px rgba(0,0,0,.15); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.25), 0 4px 6px -4px rgba(0,0,0,.15); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.3), 0 8px 10px -6px rgba(0,0,0,.2); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 9999px; --font-heading: 'DM Sans', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --ease-out: cubic-bezier(.16,1,.3,1); --gutter: clamp(20px, 4vw, 40px); --nav-h: 76px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .section-container, .hero-inner, .phero-inner, .nav-inner, .footer-inner { min-width: 0; } html { scroll-behavior: smooth; scroll-padding-top: 90px; scroll-snap-type: y proximity; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--text-primary); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, svg { max-width: 100%; display: block; } [hidden] { display: none !important; } a { color: inherit; } button { font: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .vak { font-family: Georgia, 'Times New Roman', serif; letter-spacing: .02em; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ═══ NAV (retained) ═══ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(15,23,42,.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.06); transition: background .3s; } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); height: var(--nav-h); max-width: 1280px; margin: 0 auto; } .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-logo img { height: 34px; } .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; } .nav-links > li { position: relative; } .nav-links a, .nav-links button.nav-btn { font-size: 16px; font-weight: 500; color: rgba(255,255,255,.7); text-decoration: none; transition: color .2s; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .nav-links a:hover, .nav-links a.active, .nav-links button.nav-btn:hover, .nav-links button.nav-btn[aria-expanded="true"] { color: #fff; } .nav-btn .chev { width: 10px; height: 10px; transition: transform .2s; } .nav-btn[aria-expanded="true"] .chev { transform: rotate(180deg); } /* Must out-specify `.nav-links a` (0,1,1), which sets `background: none`. As plain `.nav-cta` (0,1,0) it lost the cascade and rendered with no background at all — a text link wearing a !important white, which is why it looked like a nav item rather than the primary call to action. */ .nav-links a.nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: var(--accent); color: var(--on-accent); font-size: var(--t-base); font-weight: 600; border-radius: var(--radius-pill); text-decoration: none; transition: background .2s, transform .2s; border: 0; cursor: pointer; } .nav-links a.nav-cta:hover { background: #FB8A3C; color: var(--on-accent); transform: translateY(-1px); } .nav-cart { position: relative; } .nav-cart .count { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: var(--accent-dark); font-size: 12px; font-weight: 700; display: none; align-items: center; justify-content: center; } .nav-cart .count.on { display: inline-flex; } .mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .mobile-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: .3s; border-radius: 2px; } /* Products panel — the Apple-style menu */ .mega { position: absolute; left: 0; right: 0; top: var(--nav-h); z-index: 999; /* Opaque, not rgba: a menu you can read the headline through is a menu that reads as broken. The shadow does the lifting that translucency was trying and failing to do. */ background: #070C1A; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 48px -12px rgba(0,0,0,.6); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: all .22s var(--ease-out); } .mega.open { transform: none; opacity: 1; visibility: visible; } /* minmax(0,…) on the tile track and 1fr on nothing else: with plain `repeat(4, 1fr)` a long word in one tile can still push the track wider than its share. The side rail is a fixed 216px so the four tiles always divide the remainder evenly. */ .mega-inner { max-width: 1280px; margin: 0 auto; padding: 26px calc(var(--gutter) - 10px) 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 216px; /* stretch, not start: the tiles must be equal height or `margin-top:auto` on the link row has nothing to push against and the rows sit at four different heights. */ gap: 28px; align-items: stretch; } .mega-tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; /* No negative margin to bleed the hover background outward: at mobile width the grid is narrow enough that -12px pushes the tile past the viewport. */ border-radius: var(--radius-lg); padding: 10px; transition: background .2s var(--ease-out); } .mega-tile:hover, .mega-tile:focus-visible { background: rgba(255,255,255,.06); } .mega-tile .pic { aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; background: var(--surface); margin-bottom: 14px; } .mega-tile .pic img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease-out); } .mega-tile:hover .pic img { scale: 1.05; } .mega-tile h4 { font-family: var(--font-heading); font-size: var(--t-md); font-weight: 700; color: #fff; letter-spacing: -.015em; } /* The plain-language descriptor that travels with a product name in the menu. A first-time visitor cannot infer a device from "Sanjaya" or "Ekalavya". */ .mega-tile .desc { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 2px 0 4px; } .mega-tile p { font-size: var(--t-xs); color: var(--text-secondary); margin: 6px 0 0; line-height: 1.5; text-wrap: pretty; } /* Pushed to the bottom so the link rows sit on one baseline across all four tiles, however many lines of description each one has. */ .mega-tile .links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-xs); font-weight: 600; margin-top: auto; padding-top: 12px; } .mega-tile .links span { color: var(--accent); white-space: nowrap; } .mega-tile .sub { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .mega-tile .sub span { font-family: var(--font-mono); font-size: var(--t-label); padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--text-muted); white-space: nowrap; } .mega-side { border-left: 1px solid rgba(255,255,255,.1); padding-left: 28px; align-self: stretch; } .mega-side h5 { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } .mega-side a { display: block; text-decoration: none; color: var(--text-secondary); font-size: var(--t-base); padding: 8px 0; transition: color .2s; } .mega-side a:hover { color: #fff; } /* ═══ BUTTONS (retained) ═══ */ .btn-primary, .btn-secondary, .btn-white, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 32px; font-size: 16px; font-weight: 600; font-family: var(--font-body); border-radius: var(--radius-pill); text-decoration: none; border: 0; cursor: pointer; transition: all .25s var(--ease-out); white-space: nowrap; } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 14px rgba(249,115,22,.35); } .btn-primary:hover { background: #FB8A3C; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(249,115,22,.45); } .btn-secondary { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; } .btn-secondary:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); } .btn-white { background: #fff; color: var(--bg); } .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,255,255,.15); } .btn-ghost { padding: 10px 18px; font-size: var(--t-base); color: var(--accent); background: transparent; } .btn-ghost:hover { background: rgba(249,115,22,.08); } .btn-sm { padding: 9px 18px; font-size: var(--t-xs); } .btn-primary[disabled], .btn-secondary[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; } /* ═══ SECTIONS (retained + shared) ═══ */ .section { padding: clamp(64px, 9vw, 110px) var(--gutter); position: relative; overflow: hidden; } .section.tight { padding-block: clamp(40px, 6vw, 72px); } .section-container { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; } .section-container.wide { max-width: 1280px; } .section-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--accent); margin-bottom: 12px; } .section-title { font-family: var(--font-heading); font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; letter-spacing: -.5px; color: var(--text-primary); margin-bottom: 16px; line-height: 1.12; text-wrap: balance; } .section-desc { font-size: 19px; color: var(--text-secondary); max-width: 600px; margin-bottom: 40px; } .center { text-align: center; } .center .section-desc { margin-inline: auto; } .glow-a { background: linear-gradient(135deg, #020617 0%, #0F172A 50%, #1E293B 100%); } .glow-b { background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%); } .glow-c { background: linear-gradient(135deg, #020617 0%, #0F172A 60%, #1a365d 200%); } .glow-a::before, .glow-b::before, .glow-c::before { content: ''; position: absolute; top: -20%; right: -10%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(249,115,22,.10) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .glow-a::after, .glow-b::after, .glow-c::after { content: ''; position: absolute; bottom: -15%; left: -8%; width: 360px; height: 360px; background: radial-gradient(circle, rgba(59,130,246,.07) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; transition: all .3s var(--ease-out); } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); } .feature-icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--primary-dark), var(--primary)); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--accent); } .feature-icon svg { width: 24px; height: 24px; } .feature-card h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 600; margin-bottom: 10px; } .feature-card p { font-size: 16px; color: var(--text-secondary); line-height: 1.65; } .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .step-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); padding: 28px; text-align: left; } .step-num { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; } .step-card h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 700; margin-bottom: 10px; } .step-card p { font-size: 16px; color: rgba(255,255,255,.62); line-height: 1.65; } .step-card .ph { margin-top: 16px; } .cta-banner { padding: 80px var(--gutter); text-align: center; color: #fff; position: relative; overflow: hidden; } .cta-banner h2 { font-family: var(--font-heading); font-size: clamp(28px, 3.5vw, 38px); font-weight: 700; margin-bottom: 16px; position: relative; z-index: 1; text-wrap: balance; } .cta-banner p { font-size: 19px; color: rgba(255,255,255,.65); margin-bottom: 32px; position: relative; z-index: 1; max-width: 560px; margin-inline: auto; } .cta-banner .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } /* ═══ FOOTER (retained, product names corrected) ═══ */ .footer { background: linear-gradient(180deg, #0F172A 0%, #020617 100%); color: rgba(255,255,255,.5); padding: 60px var(--gutter) 32px; border-top: 1px solid rgba(255,255,255,.04); } .footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } .footer-brand p { font-size: 16px; line-height: 1.65; margin-top: 16px; max-width: 300px; } .footer-brand .vak { margin-top: 14px; color: rgba(255,255,255,.6); font-size: 16px; } .footer-col h4 { font-family: var(--font-heading); font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 16px; } .footer-col a { display: block; font-size: 16px; color: rgba(255,255,255,.5); text-decoration: none; padding: 4px 0; transition: color .2s; } .footer-col a:hover { color: var(--accent); } .footer-bottom { max-width: 1100px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: center; font-size: 14.5px; gap: 12px; flex-wrap: wrap; } /* ═══ HOME HERO ═══ */ .hero { padding: calc(var(--nav-h) + clamp(36px, 5.5vw, 68px)) var(--gutter) clamp(48px, 7vw, 88px); position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 70% -10%, rgba(249,115,22,.16), transparent 60%), radial-gradient(800px 500px at 10% 110%, rgba(96,165,250,.10), transparent 60%), var(--bg); } .hero-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; } /* The headline row spans both columns; the lede and the play card sit under it. */ .hero-top { grid-column: 1 / -1; } .hero-top .funding { margin-bottom: 22px; } .hero .lede { max-width: 60ch; } .hero .funding { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; max-width: 100%; padding: 7px 14px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 13px; color: var(--text-secondary); margin-bottom: 26px; } .hero .funding b { background: var(--accent); color: var(--on-accent); font-size: 12px; padding: 3px 9px; border-radius: 999px; letter-spacing: .06em; text-transform: uppercase; } /* Three clauses, not two: the type has to come down or the fourth wrapped line pushes the buttons off the fold on a 900 px-tall laptop. */ /* No text-wrap:balance here — the clauses are broken by hand, and balance redistributes across those breaks ("A slate / that teaches."). */ .hero h1 { font-family: var(--font-heading); font-size: clamp(29px, 5.2vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -.028em; text-wrap: pretty; } .hero h1 em { font-style: normal; color: var(--accent); } .hero .lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--text-secondary); margin: 22px 0 32px; max-width: 54ch; } .hero .row { display: flex; gap: 14px; flex-wrap: wrap; } .hero .trust { margin-top: 30px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); } .hero .trust span::before { content: '✓'; color: var(--success); margin-right: 6px; font-weight: 700; } .hero-media { position: relative; } .video-slot { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xl); } .video-slot video { width: 100%; height: 100%; object-fit: cover; } .video-slot .ph { position: absolute; inset: 0; border-radius: 0; margin: 0; } /* ═══ HERO COVER VIDEO ═══ A short silent loop sits behind the whole hero. Two scrims sit on top of it: a vertical one so the nav and the lower edge stay dark, and a horizontal one weighted to the left so the headline never has to compete with the slate. The loop is decorative — it carries no information the copy does not — so it is safe to withhold it on reduced-motion, save-data and slow connections. */ .hero-cover { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); } /* Both children fill the box and sit on top of one another — the poster is the floor, the loop fades in over it. In flow they would stack vertically and the video would land a whole hero-height below the fold. */ .hero-cover video, .hero-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; } .hero-cover video { opacity: 0; transition: opacity .9s ease; } .hero-cover video.on { opacity: 1; } .hero-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--bg) 0%, rgba(2,6,23,.92) 34%, rgba(2,6,23,.55) 62%, rgba(2,6,23,.72) 100%), linear-gradient(to bottom, rgba(2,6,23,.86) 0%, rgba(2,6,23,.30) 34%, rgba(2,6,23,.46) 72%, var(--bg) 100%); } .hero.has-cover { background: var(--bg); } .hero.has-cover .hero-inner { position: relative; z-index: 1; } /* The play card: a poster and a button that opens the full film with sound. */ .play-card { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-xl); cursor: pointer; aspect-ratio: 16/9; color: inherit; text-align: left; } .play-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); } .play-card:hover img, .play-card:focus-visible img { transform: scale(1.04); } .play-card .veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,6,23,.85), rgba(2,6,23,.05) 55%); } .play-card .knob { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 74px; height: 74px; border-radius: 50%; background: rgba(249,115,22,.94); display: grid; place-items: center; box-shadow: 0 10px 40px rgba(249,115,22,.45); transition: scale .3s ease; } .play-card:hover .knob, .play-card:focus-visible .knob { scale: 1.08; } .play-card .knob svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; } .play-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .play-card .cap b { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: #fff; } .play-card .cap span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.66); } /* Lightbox for the full film. */ /* Above the nav (1000) and the cart drawer (1100): while the film is playing it is the only thing on screen. */ .lightbox { position: fixed; inset: 0; z-index: 1300; display: none; place-items: center; padding: clamp(12px, 4vw, 48px); background: rgba(2,6,23,.94); backdrop-filter: blur(8px); } .lightbox.open { display: grid; } .lightbox .frame { width: min(1100px, 100%); position: relative; } .lightbox video { width: 100%; max-height: 82vh; border-radius: var(--radius-lg); background: #000; display: block; box-shadow: var(--shadow-xl); } .lightbox .shut { position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 19px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .lightbox .shut:hover { color: #fff; border-color: var(--accent); } @media (prefers-reduced-motion: reduce) { .hero-cover video { display: none; } .play-card img, .play-card .knob { transition: none; } } /* ═══ PLACEHOLDERS — every one is labelled with what should replace it ═══ */ .ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed rgba(249,115,22,.45); border-radius: var(--radius-lg); background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 10px, transparent 10px 20px), rgba(15,23,42,.6); color: var(--text-secondary); text-align: center; padding: 18px; min-height: 160px; font-size: 13px; } .ph .k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .ph .t { max-width: 34ch; line-height: 1.45; } .ph svg { width: 34px; height: 34px; color: rgba(249,115,22,.7); } .ph.photo { aspect-ratio: 4/3; } .ph.portrait { aspect-ratio: 3/4; } .ph.wide { aspect-ratio: 21/9; } .ph.video { aspect-ratio: 16/9; } .ph.sq { aspect-ratio: 1; } .ph.min { min-height: 0; padding: 12px; } /* ═══ CHASSIS DIAGRAM + tiles ═══ */ .figure { margin: 0; } .figure svg { width: 100%; height: auto; } .figure.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .figure.scroll img { min-width: 760px; } .chassis-m { display: none; } .figure figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-muted); text-align: center; } .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: all .3s var(--ease-out); } .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: rgba(249,115,22,.5); } .tile.flag { border-color: var(--accent); grid-column: span 2; } .tile .pic { aspect-ratio: 4/3; overflow: hidden; background: var(--primary-dark); position: relative; } .tile .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .tile:hover .pic img { transform: scale(1.03); } .tile .badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(2,6,23,.75); border: 1px solid rgba(255,255,255,.12); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; } .tile .badge.hot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .tile .body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .tile .who { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .tile h3 { font-family: var(--font-heading); font-size: 23px; font-weight: 700; } .tile p { font-size: 16px; color: var(--text-secondary); line-height: 1.55; } .tile .price { margin-top: auto; padding-top: 12px; font-family: var(--font-heading); font-size: 19px; font-weight: 700; } .tile .price small { font-size: 13px; font-weight: 400; color: var(--text-muted); } .tile .row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } /* ═══ PRODUCT PAGE CHASSIS ═══ */ .phero { padding-top: calc(var(--nav-h) + 20px); position: relative; overflow: hidden; } .phero-inner { max-width: 1280px; margin: 0 auto; padding: clamp(32px, 5vw, 64px) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .phero .eyebrow { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .phero h1 { font-family: var(--font-heading); font-size: clamp(36px, 5vw, 58px); font-weight: 700; line-height: 1.04; letter-spacing: -.028em; text-wrap: balance; } .phero .lede { font-size: 19px; color: var(--text-secondary); margin: 20px 0 30px; max-width: 52ch; } .phero .row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .phero .from { font-size: 16px; color: var(--text-muted); } .phero .from b { color: #fff; font-size: 19px; font-family: var(--font-heading); } .phero-media { border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xl); aspect-ratio: 4/3; } .phero-media img { width: 100%; height: 100%; object-fit: cover; } .phero-media.tall { aspect-ratio: 3/4; max-height: 560px; margin-inline: auto; } .subnav { position: sticky; top: var(--nav-h); z-index: 900; background: rgba(2,6,23,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); } .subnav-inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; height: 52px; gap: 16px; } .subnav .name { font-family: var(--font-heading); font-weight: 700; font-size: 16px; } .subnav .links { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; } .subnav .links a { font-size: 13px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; } .subnav .links a:hover { color: #fff; } .subnav .buy { padding: 7px 16px; font-size: 13px; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .split.rev > :first-child { order: 2; } .split h2 { font-family: var(--font-heading); font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin-bottom: 14px; text-wrap: balance; } .split p { font-size: 16px; color: var(--text-secondary); max-width: 52ch; } .split p + p { margin-top: 12px; } .split .media { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); background: var(--surface); } .split .media img { width: 100%; height: 100%; object-fit: cover; } .demo-wrap { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); background: #020617; box-shadow: var(--shadow-xl); position: relative; } .demo-wrap iframe { width: 100%; border: 0; display: block; aspect-ratio: 16/10; min-height: 420px; background: #020617; } .demo-wrap .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; } .demo-wrap .bar .hint { font-size: 13px; color: var(--text-secondary); } .demo-start { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; aspect-ratio: 16/10; min-height: 420px; border: 0; cursor: pointer; color: var(--text-primary); background: radial-gradient(120% 90% at 50% 0%, #0f1c2e 0%, #020617 70%); font: inherit; } .demo-start .play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--accent); font-size: 20px; padding-left: 4px; } .demo-start:hover .play, .demo-start:focus-visible .play { border-color: var(--accent); } .demo-start .lbl { font-family: var(--font-heading); font-size: 19px; font-weight: 600; } .demo-start::after { content: "Loads an interactive demo. Sound on."; font-size: 13px; color: var(--text-muted); } @media (prefers-reduced-motion: reduce) { .demo-start .play { transition: none; } } @media (max-width: 720px) { .demo-start { aspect-ratio: 3/4; min-height: 0; } } .demo-note { margin-top: 14px; font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: .02em; } .lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .line { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 26px; display: flex; flex-direction: column; gap: 10px; } .line .who { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .line h3 { font-family: var(--font-heading); font-size: 23px; font-weight: 700; } .line p { font-size: 16px; color: var(--text-secondary); } .line .pic { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; } .line .pic img { width: 100%; height: 100%; object-fit: cover; } .line .price { font-family: var(--font-heading); font-size: 28px; font-weight: 700; margin-top: 6px; } .line .price small { font-size: 13px; font-weight: 400; color: var(--text-muted); } .line ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: var(--text-secondary); } .line ul li::before { content: '✓'; color: var(--success); font-weight: 700; margin-right: 8px; } .line .row { margin-top: auto; padding-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; } .safety { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .safety .it { background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; } .safety .it svg { width: 26px; height: 26px; color: var(--accent); margin-bottom: 12px; } .safety .it h4 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; margin-bottom: 6px; } .safety .it p { font-size: 13px; color: var(--text-secondary); } .safety-note { margin-top: 18px; font-size: 13px; color: var(--text-muted); } .faq { max-width: 820px; margin: 0 auto; } .faq details { border-bottom: 1px solid var(--border); padding: 4px 0; } .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: var(--font-heading); font-size: 19px; font-weight: 600; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--accent); font-size: 23px; font-weight: 400; transition: transform .2s; flex-shrink: 0; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding: 0 0 18px; color: var(--text-secondary); font-size: 16px; max-width: 70ch; } .specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; max-width: 900px; margin: 0 auto; } .specs dl { display: grid; grid-template-columns: 1fr 1.4fr; } .specs dt, .specs dd { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 16px; } .specs dt { color: var(--text-secondary); } .specs dd { color: var(--text-primary); font-weight: 500; } .specs .tbc { color: var(--amber); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; } .quote-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; } .quote-card p { font-size: 16px; color: var(--text-primary); line-height: 1.6; } .quote-card .who { margin-top: 12px; font-size: 13px; color: var(--text-muted); } .quote-card .sample { display: inline-block; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--amber); border: 1px dashed rgba(251,191,36,.5); padding: 2px 7px; border-radius: 4px; } .models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .model { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; } .model .tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .model h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 700; margin: 6px 0 8px; } .model p { font-size: 16px; color: var(--text-secondary); } .model .best { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); } .model .best b { color: var(--text-primary); } .rail { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .rail .r { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; } .rail .r h4 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; margin-bottom: 4px; } .rail .r p { font-size: 16px; color: var(--text-secondary); } .pricebox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px; } .pricebox .big { font-family: var(--font-heading); font-size: 40px; font-weight: 700; letter-spacing: -.02em; } .pricebox .big small { font-size: 16px; font-weight: 400; color: var(--text-muted); } .pricebox .sub { font-size: 16px; color: var(--text-secondary); margin: 6px 0 16px; } .pricebox ul { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; } .pricebox ul li { font-size: 16px; color: var(--text-secondary); } .pricebox ul li::before { content: '✓'; color: var(--success); font-weight: 700; margin-right: 8px; } .pricebox.hi { border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(249,115,22,.1); position: relative; } .pricebox .pop { position: absolute; top: -12px; left: 24px; padding: 4px 14px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; } .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* ═══ STORE / CART / CHECKOUT ═══ */ .store-head { padding-top: calc(var(--nav-h) + 40px); } .store-layout { display: grid; grid-template-columns: 220px 1fr; gap: 36px; } .filters { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; display: flex; flex-direction: column; gap: 6px; } .filters h5 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin: 10px 0 6px; } .filters button { text-align: left; background: none; border: 0; color: var(--text-secondary); padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 16px; } .filters button:hover, .filters button.on { background: rgba(255,255,255,.06); color: #fff; } .chips { display: none; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .chips button { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 13px; cursor: pointer; } .chips button.on { border-color: var(--accent); color: #fff; } .sku-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sku { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; transition: all .3s var(--ease-out); } .sku:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(249,115,22,.45); } .sku .pic { aspect-ratio: 4/3; background: var(--primary-dark); overflow: hidden; position: relative; } .sku .pic img { width: 100%; height: 100%; object-fit: cover; } .sku .pic .ph { position: absolute; inset: 0; border-radius: 0; } .sku .body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .sku .fam { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .sku h3 { font-family: var(--font-heading); font-size: 19px; font-weight: 700; } .sku p { font-size: 13px; color: var(--text-secondary); } .sku .price { margin-top: auto; padding-top: 10px; font-family: var(--font-heading); font-size: 19px; font-weight: 700; } .sku .price small { font-size: 13px; font-weight: 400; color: var(--text-muted); } .sku .row { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; } .sku .opt { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .sku .opt label { font-size: 13px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 4px; } .sku select { width: 100%; min-width: 0; } .sku select, .qty { background: var(--bg); border: 1px solid var(--border); color: #fff; border-radius: 8px; padding: 8px 10px; font-size: 13px; } .qty { width: 64px; } .tag-pre { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--amber); } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--surface); border-left: 1px solid var(--border); z-index: 1100; transform: translateX(100%); transition: transform .3s var(--ease-out); display: flex; flex-direction: column; } .drawer.open { transform: none; } .drawer header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--border); } .drawer header h3 { font-family: var(--font-heading); font-size: 19px; } .drawer .items { flex: 1; overflow: auto; padding: 12px 20px; } .drawer .it { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: center; } .drawer .it img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--bg); } .drawer .it .n { font-weight: 600; font-size: 16px; } .drawer .it .d { font-size: 13px; color: var(--text-muted); } .drawer .it .rm { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 12px; } .drawer .it .rm:hover { color: var(--accent); } .drawer footer { padding: 18px 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; } .drawer .tot { display: flex; justify-content: space-between; font-family: var(--font-heading); font-weight: 700; font-size: 19px; } .drawer .empty { color: var(--text-muted); text-align: center; padding: 40px 0; } .toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 1200; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-pill); padding: 10px 10px 10px 20px; font-size: 16px; box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden; transition: all .25s var(--ease-out); max-width: calc(100vw - 32px); } .toast.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .toast b { font-weight: 600; } .toast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toast button { flex: 0 0 auto; } .scrim { position: fixed; inset: 0; background: rgba(2,6,23,.6); z-index: 1050; opacity: 0; visibility: hidden; transition: all .25s; } .scrim.open { opacity: 1; visibility: visible; } .co-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; } .form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form .full { grid-column: 1 / -1; } .form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-secondary); } .form input, .form textarea, .form select { background: var(--bg); border: 1px solid var(--border); color: #fff; border-radius: 10px; padding: 12px 14px; font-size: 16px; font-family: var(--font-body); } .form input:focus, .form textarea:focus { border-color: var(--accent); outline: none; } .form .err { color: #FCA5A5; font-size: 13px; } .summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; position: sticky; top: calc(var(--nav-h) + 20px); } .summary h3 { font-family: var(--font-heading); font-size: 19px; margin-bottom: 12px; } .summary .it { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 16px; } .summary .it span:last-child { white-space: nowrap; } .summary .tot { display: flex; justify-content: space-between; padding-top: 14px; font-family: var(--font-heading); font-weight: 700; font-size: 19px; } .summary .note { font-size: 13px; color: var(--text-muted); margin-top: 12px; } .callout { border: 1px solid rgba(251,191,36,.4); background: rgba(251,191,36,.06); border-radius: var(--radius-md); padding: 14px 16px; font-size: 13px; color: var(--text-secondary); } .callout b { color: var(--amber); } .confirm { max-width: 720px; margin: 0 auto; text-align: center; } .confirm .id { font-family: var(--font-mono); font-size: 16px; color: var(--accent); letter-spacing: .06em; } .mono { font-family: var(--font-mono); font-size: .9em; color: var(--blue); } .reveal { transition: opacity .6s ease, transform .6s ease; } html.js .reveal:not(.in) { opacity: 0; transform: translateY(18px); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation: none !important; } } /* ═══ RESPONSIVE ═══ */ @media (max-width: 1100px) { .mega-inner { grid-template-columns: repeat(2, 1fr); } .mega-side { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; display: flex; gap: 20px; flex-wrap: wrap; } .mega-side h5 { width: 100%; } .tiles { grid-template-columns: repeat(2, 1fr); } .tile.flag { grid-column: span 2; } .steps-grid, .safety { grid-template-columns: repeat(2, 1fr); } .features-grid, .lines, .models, .sku-grid, .price-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .hero-inner > *, .phero-inner > *, .split > *, .co-layout > *, .store-layout > *, .tiles > *, .lines > *, .sku-grid > * { min-width: 0; } .hero .funding { border-radius: 14px; } .nav-links { display: none; } .mobile-toggle { display: block; } /* ── the open menu, on a phone ───────────────────────────────────────── The products panel used to disappear underneath the menu. The cause was a stacking one, not a z-index one: .mega is a sibling of .nav-inner inside