/* ========================================================= Landing page styles (shared across every site this codebase serves). Visual references (from screenshots): * tesla.com — light surfaces, TESLA wordmark nav, rounded-pill blue primary CTAs with title case (NOT uppercase), white/border secondary buttons, full-bleed media sections, minimal inline footer. * referral landing reference — centered typographic hero, URL pill with inline arrow action, primary + secondary CTA row, small uppercase accent section labels, trust chip row, sticky bottom bar. Non-infringing choices: system font stack (Tesla uses proprietary Gotham — we intentionally do not substitute it), distinct blue accent (#3457dc, close to Tesla's production CTA blue but not a trademarked brand color reuse), no Tesla logo or wordmark. ========================================================= */ :root { /* Surfaces */ --bg: #ffffff; --bg-alt: #f4f4f4; --bg-deep: #f9f9f9; --bg-dark: #171a20; /* Text */ --fg: #171a20; --fg-soft: #393c41; --fg-muted: #5c5e62; --fg-subtle: #8a8e93; /* Accents — Tesla-style blue primary, muted reds for urgency, green for active */ --accent: #3457dc; /* Primary CTA blue */ --accent-hover: #2845bf; --accent-soft: #eef2ff; --success: #0f7b3f; /* active/verified indicator */ --warn: #b17200; /* urgency text */ /* Lines */ --line: #dcdcdc; --line-soft: #ececec; --line-strong: #c9c9c9; /* Radii */ --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-pill: 999px; /* Shadows — whisper-soft; Tesla uses almost none */ --shadow-xs: 0 1px 2px rgba(23, 26, 32, 0.04); --shadow: 0 10px 30px rgba(23, 26, 32, 0.06); --shadow-bar: 0 -4px 20px rgba(23, 26, 32, 0.08); /* Layout */ --wrap: 1200px; --wrap-narrow: 760px; /* Top nav and bottom sticky bar share a narrower max-width than `--wrap`. With space-between layouts, a 1200px wrap leaves a hollow gap between the brand on the left and the CTA on the right on wide viewports; pulling the chrome bars in tightens that gap so the elements cluster toward the visual center of the hero (which lives in `--wrap-narrow`). 880px is the tightest the nav can go before the brand wordmark + nav links + CTA start to feel crowded. Both bars ride on the same variable so the design stays in sync if tweaked. */ --wrap-bar: 880px; --stickybar-h: 68px; /* Approximate height of the sticky top nav: 12px top padding + 36px logo + 12px bottom padding + 1px border. Drives `scroll-padding-top` on so in-page anchors (#how, #incentive, #faq, #hero-title) don't land underneath the sticky nav. The 16px buffer adds visual breathing room above the target's top edge. */ --nav-h: 61px; /* Typography */ --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Offset every in-page anchor jump (and `scrollIntoView`) by the sticky nav's height plus a 16px breathing gap, so anchored targets like #hero-title / #how / #incentive / #faq don't land underneath the nav. One declaration covers every anchor on the page. */ scroll-padding-top: calc(var(--nav-h) + 16px); /* Matches the overlay wash so there's no flash while the background image is still loading. */ background-color: #f7f7f7; } /* The Tesla reference photo is painted by a fixed, viewport-sized pseudo-element instead of `background-attachment: fixed` on . Why: * `background-attachment: fixed` + `background-size: cover` is broken on iOS Safari (the image is sized against the full document height, not the viewport, so the cars get cropped out on tall pages and the whole thing looks blank once the off-white wash is layered on). Using a `position: fixed` pseudo sidesteps the quirk — `cover` then correctly scales against the 100vw×100vh pseudo box on every browser. * `z-index: -1` pushes it behind all content. Body is made a stacking context (`isolation: isolate` a few rules below) so the negative z-index stays scoped to the page and doesn't get painted behind the root background color. Image delivery strategy: * `image-set()` lets modern browsers pick the WebP (~31KB); older ones use the JPEG (~73KB) via the `type()` hint. * The plain `url()` layer after `image-set()` is the fallback for browsers that don't understand `image-set()` at all (old Edge, Firefox <88). They get the JPEG. * On mobile (<=720px) the 960px-wide variant replaces both layers to save bandwidth. * The solid `#f7f7f7` at the bottom is the ultimate fallback if the image fails to load; it matches the page wash. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(247, 247, 247, 0.74), rgba(247, 247, 247, 0.74)), image-set( url('/images/hero-bg.webp') type('image/webp'), url('/images/hero-bg.jpg') type('image/jpeg') ) center center / cover no-repeat, url('/images/hero-bg.jpg') center center / cover no-repeat, #f7f7f7; } @media (max-width: 720px) { body::before { background: linear-gradient(rgba(247, 247, 247, 0.78), rgba(247, 247, 247, 0.78)), image-set( url('/images/hero-bg-mobile.webp') type('image/webp'), url('/images/hero-bg-mobile.jpg') type('image/jpeg') ) center center / cover no-repeat, url('/images/hero-bg-mobile.jpg') center center / cover no-repeat, #f7f7f7; } } /* Reduced-motion users: stop the "stationary background, content scrolls over it" parallax by anchoring the pseudo to the document instead of the viewport. It then scrolls with the page. */ @media (prefers-reduced-motion: reduce) { body::before { position: absolute; } } body { margin: 0; /* `relative` + `isolation: isolate` makes body a containing block and a stacking context so the `body::before` fixed background at z-index: -1 stays scoped behind body's children without slipping behind the root html background color. */ position: relative; isolation: isolate; background: transparent; color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* The sticky bar is hidden by default and only revealed when the user scrolls to the very bottom of the page (see .stickybar / .stickybar.is-visible below + the rAF scroll listener in script.js). No permanent body padding is needed — instead the footer carries enough bottom padding (sized off `--stickybar-h`) so the disclaimer clears the bar with breathing room when it reveals. */ } a { color: inherit; text-decoration: none; transition: color 150ms ease; } a:hover { color: var(--accent); } img, svg { display: block; max-width: 100%; } p { margin: 0 0 14px; color: var(--fg-soft); } code { font-family: var(--font-mono); background: var(--bg-alt); padding: 2px 8px; border-radius: 4px; color: var(--fg); font-size: 0.92em; letter-spacing: 0.01em; } h1, h2, h3 { margin: 0 0 16px; color: var(--fg); font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; } /* ========================================================= LAYOUT WRAPPERS ========================================================= */ .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; } .wrap-narrow { max-width: var(--wrap-narrow); padding: 0 24px; margin: 0 auto; } @media (max-width: 640px) { .wrap, .wrap-narrow { padding: 0 20px; } } .center { text-align: center; } /* ========================================================= NAV — Tesla.com inspired: wordmark left, minimal links, one primary CTA on the right. Sticky with blurred backdrop. ========================================================= */ .nav { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-soft); } .nav-inner { max-width: var(--wrap-bar); margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } @media (max-width: 640px) { .nav-inner { padding: 12px 20px; } } .brand { display: inline-flex; align-items: center; gap: 10px; /* Wordmark is the primary brand anchor in the nav — size it up so it reads at a glance and balances the 36px logo mark. Weight 700 and a tight negative letter-spacing give it the same "display-text" feel as Tesla's wordmark without copying the trademarked face. */ font-size: 20px; font-weight: 700; letter-spacing: -0.015em; color: var(--fg); } /* Logo sized to the exact pixel height of the `.btn-sm` primary CTA that sits on the opposite side of the nav (padding 9px top/bottom + 13px × 1.2 line-height + 2px border = ~36px). Matching the button height keeps the two ends of the nav visually balanced instead of a small mark floating next to a much larger button. Mobile breakpoint shrinks to match the smaller mobile `.btn-sm` padding. */ .brand-icon { width: 36px; height: 36px; color: var(--accent); flex: none; } .brand-text { color: var(--fg); } .nav-right { display: flex; align-items: center; gap: 22px; } .nav-link { font-size: 14px; font-weight: 500; color: var(--fg-soft); } .nav-link:hover { color: var(--fg); } @media (max-width: 720px) { .nav-link { display: none; } .nav-right .btn-sm { padding: 8px 14px; font-size: 13px; } /* Mobile `.btn-sm` is ~34px tall (8 + 13×1.2 + 8 + 2). Shrink the logo to match so the nav keeps its "logo height == button height" relationship the user asked for. Step the wordmark down a touch too — 18px reads as "prominent" on a narrow viewport without crowding the CTA. */ .brand-icon { width: 34px; height: 34px; } .brand { font-size: 18px; } } @media (max-width: 400px) { .brand-text { display: none; } } /* ========================================================= BUTTONS — Tesla.com pattern: primary: blue fill, white text, rounded pill, title case secondary: white fill, dark text, thin border small: tighter padding for nav / sticky bar ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: var(--r-pill); font-family: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; border: 1px solid transparent; min-width: 220px; line-height: 1.2; text-align: center; transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 80ms ease, box-shadow 150ms ease; } .btn:active { transform: translateY(1px); } .btn-icon { width: 15px; height: 15px; color: currentColor; flex: none; } .btn-sm .btn-icon { width: 13px; height: 13px; } .btn-label { display: inline-block; } .btn-primary { background: var(--accent); color: #ffffff !important; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #ffffff !important; } .btn-secondary { background: #ffffff; color: var(--fg) !important; border: 1px solid var(--line); } .btn-secondary:hover { background: var(--bg-alt); border-color: var(--line-strong); color: var(--fg) !important; } .btn-sm { padding: 9px 18px; font-size: 13px; min-width: 0; } /* Copied state — used by script.js */ .btn.copied, .btn-primary.copied { background: var(--success) !important; border-color: var(--success) !important; color: #ffffff !important; } /* ========================================================= HERO — centered typographic, referral-card front-and-center. Light surface; relies on type hierarchy, not imagery. ========================================================= */ .hero { padding: 64px 32px 56px; text-align: center; /* Transparent so the fixed Tesla photo shows through the hero at full strength. A tiny top accent glow is kept for hierarchy. */ background: radial-gradient(ellipse at 50% 0%, rgba(52, 87, 220, 0.05), transparent 55%); border-bottom: 1px solid var(--line-soft); } .hero-inner { max-width: 860px; margin: 0 auto; } .hero-eyebrow { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 7px 16px; border-radius: var(--r-pill); background: #ffffff; border: 1px solid var(--line); color: var(--fg-soft); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 24px; } .hero-eyebrow time { font-weight: 600; color: var(--fg); text-transform: none; letter-spacing: 0; margin-left: 4px; } .eye-item { display: inline-flex; align-items: center; gap: 6px; } .eye-sep { color: var(--fg-muted); } .pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--success); flex: none; box-shadow: 0 0 0 0 rgba(15, 123, 63, 0.55); animation: pulse 2.2s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(15, 123, 63, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(15, 123, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 123, 63, 0); } } @media (prefers-reduced-motion: reduce) { .pulse { animation: none; } } .hero-title { font-size: clamp(40px, 7vw, 88px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; margin: 0 0 14px; color: var(--fg); } .hero-sub { font-size: clamp(17px, 2.2vw, 22px); font-weight: 500; letter-spacing: -0.005em; color: var(--accent); margin: 0 0 16px; } .hero-lead { font-size: clamp(15px, 1.5vw, 17px); color: var(--fg-muted); max-width: 560px; margin: 0 auto 32px; line-height: 1.55; } /* ---- URL pill + inline arrow button --------------------- The chip is an (whole-pill click target so the visitor doesn't have to aim for the small blue arrow). We strip the default link chrome — underline, blue color, tap-highlight rectangle — so it continues to read as a passive URL pill rather than a "link" in the traditional inline sense. The href attribute is the same display referral URL the visible text shows, so every passive surface a browser exposes — status bar on hover, right-click "Copy link address", social previews, middle-click / cmd-click "open in new tab" — points at a real Tesla referral URL rather than a bare tesla.com address. A JS click handler in script.js upgrades plain left-clicks one step further: it reads the freshest active code from `#activeLink[data-link]` (kept in sync by the page-load hydration call to /api/public/referral-code) and navigates there, so the most recent verified referral is applied at checkout. */ .link-chip { display: flex; align-items: stretch; max-width: 620px; margin: 0 auto 20px; background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; box-shadow: var(--shadow); transition: border-color 150ms ease, box-shadow 150ms ease; /* Strip default chrome so the chip keeps its pill appearance. */ text-decoration: none; color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent; } .link-chip:hover { border-color: var(--line-strong); box-shadow: 0 12px 36px rgba(23,26,32,0.08); } .link-chip:focus { outline: none; } .link-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .link-chip:visited { color: var(--fg); } .link-chip-text { flex: 1; min-width: 0; padding: 14px 20px; /* Inter 700 — matches the bold sans-serif referral URL treatment in the reference design. Loaded via Google Fonts in index.html; the system stack is the fallback used until the WOFF2 arrives (with `display=swap`) and on browsers where the load is blocked. */ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; text-align: left; /* The visible URL text is a stable snapshot painted at server-render time, while the actionable copy / open paths read from `data-link` on `#activeLink` so they always use the freshest known active code (kept current by the /api/public/referral-code hydration call on page load). Suppressing manual selection / long-press here keeps visitors funnelled through the "Copy Referral Link" button, which is the one path guaranteed to copy the latest active URL rather than whatever the text happened to show at first paint. Cursor inherits `pointer` from the parent `.link-chip` anchor (the whole pill is a click target, not just the arrow). */ user-select: none; -webkit-user-select: none; /* Safari, including iOS */ -moz-user-select: none; /* Older Firefox */ -ms-user-select: none; /* Legacy Edge */ -webkit-touch-callout: none; /* Suppress iOS long-press menu */ cursor: inherit; } .link-chip-go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; background: var(--accent); color: #ffffff !important; transition: background 150ms ease; } .link-chip-go:hover { background: var(--accent-hover); color: #ffffff !important; } .link-chip-go svg { width: 16px; height: 16px; } /* ---- Hero CTA row --------------------------------------- */ .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 0 0 22px; } .hero-cta .btn { min-width: 240px; } /* Primary order CTA in the hero CTA row. Single-line: bag icon + label. We key off the id so swapping btn-primary/btn-secondary classes between Copy and Order buttons doesn't disturb the layout. */ .hero-cta #primaryOrderLink .btn-label { font-size: 14.5px; font-weight: 600; } /* ---- Trust + urgency lines ------------------------------ */ .hero-trust { font-size: 13.5px; color: var(--fg-muted); margin: 0 0 6px; } .hero-trust .check { color: var(--success); font-weight: 700; margin-right: 2px; } .hero-trust .sep { margin: 0 8px; color: var(--fg-subtle); } .hero-urgency { font-size: 13px; color: #d93025; font-weight: 600; margin: 0 0 28px; } /* ---- Trust chip row ------------------------------------- */ .chip-row { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-pill); background: #ffffff; border: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--fg-soft); white-space: nowrap; } .chip-mark { color: var(--success); font-weight: 700; } .chip-mark-star { color: #b8860b; } /* ---- Hero responsive ------------------------------------ */ @media (max-width: 720px) { .hero { padding: 48px 20px 44px; } .hero-lead { margin-bottom: 24px; } .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; } .hero-cta .btn { width: 100%; min-width: 0; } .hero-cta #primaryOrderLink { padding: 12px 24px; } } @media (max-width: 520px) { .hero-title { letter-spacing: -0.025em; } .link-chip { flex-direction: column; border-radius: var(--r-lg); } .link-chip-text { /* Keep the referral URL on a single line on mobile. The chip is stacked (chip-text row on top, CTA row below) so the text row has the full hero width to itself, and a clamped font-size ensures typical Tesla referral URLs (~40 chars) fit on a 360– 430px viewport without wrapping. Unusually long codes ellipsize cleanly rather than breaking mid-word (which is what was happening before with `overflow-wrap: anywhere`). */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 14px 18px; font-size: clamp(12px, 3.4vw, 15px); line-height: 1.45; justify-content: center; text-align: center; border-bottom: 1px solid var(--line-soft); } .link-chip-go { padding: 12px 20px; justify-content: center; gap: 8px; } .link-chip-go::after { content: "Open on Tesla.com"; font-size: 14px; font-weight: 500; letter-spacing: 0; } .chip { font-size: 12.5px; padding: 7px 12px; } .hero-trust { font-size: 13px; } .hero-trust .sep { margin: 0 5px; } /* Keep the "Verified Active · Updated: …" badges on one row inside the eyebrow pill on mobile. Earlier we stacked them vertically to avoid an orphaned "·" separator, but that looked worse than the orphan it was trying to solve. Instead we tighten the font size, letter-spacing and inner gaps just enough for a 393-class phone to keep both items (and the dot between them) on a single line. */ .hero-eyebrow { padding: 6px 12px; font-size: 10.5px; letter-spacing: 0.06em; gap: 6px 8px; flex-wrap: nowrap; max-width: calc(100vw - 32px); } .hero-eyebrow .eye-item { white-space: nowrap; } .hero-eyebrow .pulse { width: 7px; height: 7px; } } /* ========================================================= SHARED SECTION CHROME ========================================================= */ .section { padding: 96px 0; /* Semi-translucent so the fixed background photo remains faintly visible behind every section as the page scrolls over it. The alternating surface keeps the page's rhythm. */ background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .section-alt { background: rgba(244, 244, 244, 0.84); } @media (max-width: 720px) { .section { padding: 64px 0; } } .kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin: 0 0 14px; } .kicker.center { text-align: center; } .section-title { font-size: clamp(26px, 3.6vw, 40px); font-weight: 600; letter-spacing: -0.022em; line-height: 1.12; color: var(--fg); margin: 0 0 40px; } .section-title.center { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; } @media (max-width: 520px) { .section-title { margin-bottom: 28px; } } /* ========================================================= HOW IT WORKS — numbered step list, boxless ========================================================= */ .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); } .step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 28px 4px; border-bottom: 1px solid var(--line); align-items: start; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 16px; letter-spacing: 0; } .step-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 4px 0 6px; color: var(--fg); } .step-body p { font-size: 15px; line-height: 1.6; color: var(--fg-muted); margin: 0; } @media (max-width: 520px) { .step { grid-template-columns: 40px 1fr; gap: 14px; padding: 22px 2px; } .step-num { width: 32px; height: 32px; font-size: 14px; } .step-title { font-size: 16px; margin-top: 3px; } } /* ========================================================= WHAT YOU GET — reward line + supporting paragraph ========================================================= */ .reward { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-lg); margin: 0 0 20px; box-shadow: var(--shadow-xs); } .reward-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .reward-name { font-size: 16px; font-weight: 600; color: var(--fg); } .reward-meta { font-size: 12.5px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; } .reward-right { display: flex; align-items: center; gap: 10px; flex: none; } .reward-price { font-size: 24px; font-weight: 600; color: var(--fg-muted); letter-spacing: -0.01em; } .reward-price s { /* Explicit strike so the "$297" reads as a crossed-out former price. */ text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #d93025; } .reward-tag { font-size: 16px; font-weight: 800; color: var(--success); background: rgba(15, 123, 63, 0.12); padding: 6px 14px; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: 0.1em; } .reward-body { font-size: 15px; line-height: 1.65; color: var(--fg-muted); margin: 0; } /* CTA row beneath the reward card — vertically separated, centered so the "Claim Incentive" button reads as the section's payoff rather than a continuation of the body paragraph. The button itself uses the standard .btn .btn-primary style from the global button block. */ .reward-cta { margin-top: 28px; text-align: center; } @media (max-width: 520px) { .reward { flex-direction: column; align-items: flex-start; padding: 18px 20px; gap: 14px; } .reward-price { font-size: 20px; } .reward-tag { font-size: 15px; } .reward-cta { margin-top: 22px; } .reward-cta .btn { width: 100%; justify-content: center; } } /* Inline red-bold emphasis used in the hero lead. */ .hero-em { color: #d93025; font-weight: 700; } /* Inline Tesla.com links inside prose. Subtle underline so the link is obvious without competing with the big red call-to-action buttons. */ .inline-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: color 150ms ease, text-decoration-color 150ms ease; } .inline-link:hover { color: var(--accent); text-decoration-color: var(--accent); } /* ========================================================= LEGAL PAGES (privacy, terms) ========================================================= */ .legal { padding: 8px 0 40px; } .legal h2 { font-size: 20px; font-weight: 600; color: var(--fg); margin: 36px 0 10px; letter-spacing: -0.01em; } .legal p, .legal li { font-size: 15.5px; line-height: 1.7; color: var(--fg-soft); } .legal p { margin: 0 0 14px; } .legal ul { margin: 4px 0 16px; padding-left: 22px; } .legal li { margin: 0 0 8px; } .legal a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .legal a:hover { text-decoration-thickness: 2px; } .legal code { background: #f4f5f7; padding: 2px 6px; border-radius: 4px; font-size: 13.5px; color: var(--fg); } .legal-meta { color: var(--fg-muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin: 6px 0 24px; } .legal-back { margin: 44px 0 0; font-size: 15px; } /* ========================================================= MODELS — 3-col card grid, Tesla.com product-card inspired but text-only (no product photography assets). ========================================================= */ .models { display: grid; /* 6-column scaffold lets us render 3 cards per row (span 2) and center a trailing row of 2 items without an awkward empty cell. */ grid-template-columns: repeat(6, 1fr); gap: 20px; } .model { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 30px; background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-lg); transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; min-height: 188px; } /* When the grid has 5 items, center the trailing row of 2. */ .models > .model:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; } .models > .model:nth-child(5):nth-last-child(1) { grid-column: 4 / span 2; } .model:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow); } .model-tag { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--fg-muted); text-transform: uppercase; } .model-name { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--fg); margin: 2px 0 4px; } .model-body { font-size: 14.5px; line-height: 1.55; color: var(--fg-muted); margin: 0; } @media (max-width: 900px) { .models { grid-template-columns: repeat(2, 1fr); } .model, .models > .model:nth-child(4):nth-last-child(2), .models > .model:nth-child(5):nth-last-child(1) { grid-column: auto; } } @media (max-width: 560px) { .models { grid-template-columns: 1fr; gap: 14px; } .model { min-height: 0; padding: 22px 20px; } } /* ========================================================= FAQ — boxless accordion with hairline dividers ========================================================= */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); padding: 22px 0; } .faq summary { cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; letter-spacing: -0.005em; color: var(--fg); position: relative; padding-right: 36px; transition: color 150ms ease; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--fg-muted); border-bottom: 1.5px solid var(--fg-muted); transform: translateY(-70%) rotate(45deg); transition: transform 200ms ease, border-color 150ms ease; } .faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--accent); } .faq summary:hover { color: var(--accent); } .faq details p { margin: 12px 0 4px; color: var(--fg-muted); font-size: 15px; line-height: 1.65; max-width: 680px; } @media (max-width: 520px) { .faq summary { font-size: 15.5px; padding-right: 30px; } } /* ========================================================= FINAL CTA — light section with paired buttons ========================================================= */ .final { background: var(--bg); padding: 112px 32px 120px; text-align: center; border-top: 1px solid var(--line-soft); } .final-inner { max-width: 680px; margin: 0 auto; padding: 0; } .final-title { font-size: clamp(34px, 5vw, 56px); font-weight: 700; letter-spacing: -0.028em; line-height: 1.05; color: var(--fg); margin: 0 0 14px; } .final-body { color: var(--fg-muted); font-size: 16px; max-width: 520px; margin: 0 auto 28px; line-height: 1.6; } .final-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } @media (max-width: 640px) { .final { padding: 72px 20px 80px; } .final-cta { flex-direction: column; align-items: stretch; } .final-cta .btn { width: 100%; min-width: 0; } } /* ========================================================= FOOTER — minimal, Tesla.com single-line inspired ========================================================= */ .foot { background: var(--bg); border-top: 1px solid var(--line-soft); /* Bottom padding has to clear the sticky bar (--stickybar-h = 68px) plus a comfortable visual gap, otherwise the bar reveals on scroll-to-bottom and overlaps the last line of the disclaimer. `calc(var(--stickybar-h) + 32px)` keeps the spacing in sync if the sticky bar height is ever tweaked. */ padding: 32px 0 calc(var(--stickybar-h) + 32px); } .foot-inner { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; } .disclaimer { font-size: 12px; line-height: 1.6; color: var(--fg-muted); margin: 0; max-width: 860px; /* Disclaimer is dense legal text — left-aligned reads better than the centered treatment the rest of the footer uses. The block itself stays horizontally centered in the footer column via the parent `align-items: center`; only the text inside flows to the left. */ text-align: left; } .foot-row { font-size: 12px; color: var(--fg-subtle); margin: 0; } .foot-row a { color: var(--fg-muted); } .foot-row a:hover { color: var(--fg); } .foot-row .sep { margin: 0 8px; } /* ========================================================= STICKY BOTTOM CTA BAR ========================================================= */ .stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); box-shadow: var(--shadow-bar); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); padding-bottom: env(safe-area-inset-bottom, 0); /* Hidden by default; the rAF scroll listener in script.js toggles `.is-visible` once the viewport bottom reaches (within 4px of) the document bottom. We use transform + opacity (compositor-only, no layout thrash) and add `visibility: hidden` so the bar can't receive focus or pointer events while off-screen. The `transition` on `visibility` is delayed by the same duration as `transform` so visibility flips back on AT THE END of the slide- out, not immediately — same pattern as a fade-out modal. The reverse rule below uses `transition-delay: 0s` so visibility turns on AT THE START of the slide-in. The `prefers-reduced-motion` block at the bottom of this file globally zeroes transitions, so users with that preference get an instant snap with no animation. */ transform: translateY(100%); opacity: 0; visibility: hidden; transition: transform 220ms ease, opacity 180ms ease, visibility 0s linear 220ms; } .stickybar.is-visible { transform: translateY(0); opacity: 1; visibility: visible; transition: transform 220ms ease, opacity 180ms ease, visibility 0s linear 0s; } .stickybar-inner { max-width: var(--wrap-bar); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--stickybar-h); } /* Value-prop badge — sized to match the adjacent .stickybar-btn so the sticky-bar row reads as three balanced pill-shaped chips. Vertical padding and font-size mirror `.stickybar-btn` (9px / 13px), border radius matches (--r-pill = 999px), and a faint accent-tinted fill plus border separates it from the bar background without competing with the buttons for emphasis. The "FREE FSD" payoff is the visual anchor — accented color + heavier weight; the lead-in label sits in muted color so the eye lands on the perk first. */ .stickybar-badge { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: rgba(52, 87, 220, 0.06); /* tint of --accent #3457dc */ font-family: inherit; font-size: 13px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stickybar-badge-perk { font-weight: 600; color: var(--fg); } .stickybar-badge-perk strong { font-weight: 700; color: var(--accent); letter-spacing: 0.02em; } /* Crossed-out former price — same red strike treatment as the reward card's `.reward-price s`, scaled thinner for the smaller badge type and muted in color so it reads as "old / replaced by FREE". */ .stickybar-badge-perk s { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: #d93025; color: var(--fg-muted); font-weight: 500; } /* Scale the .pulse dot down a notch inside the smaller sticky badge so it sits proportionally next to the 13px label (the hero eyebrow does the same trick on its small-screen breakpoint). */ .stickybar-badge .pulse { width: 7px; height: 7px; } .stickybar-actions { display: flex; gap: 8px; flex: none; } .stickybar-btn { font-size: 13px; padding: 9px 16px; } @media (max-width: 640px) { .stickybar-inner { padding: 10px 12px; gap: 8px; min-height: 60px; } /* The badge eats horizontal room the action buttons need on phones — we keep mobile parity with the prior behavior and hide it. The value-prop is already covered by the hero on this viewport. */ .stickybar-badge { display: none; } .stickybar-actions { flex: 1; justify-content: stretch; } .stickybar-btn { flex: 1; text-align: center; padding: 11px 10px; font-size: 12.5px; /* Don't let the CTA wrap to two lines at narrow widths — it looked broken in the mobile screenshot. */ white-space: nowrap; min-width: 0; } /* At very narrow widths, hide the bag/clipboard icon so the label alone has room to sit on one line. */ .stickybar-btn .btn-icon { flex: none; } } @media (max-width: 380px) { .stickybar-btn .btn-icon { display: none; } .stickybar-btn { font-size: 12px; padding: 11px 8px; gap: 0; } } /* ========================================================= ACCESSIBILITY + MOTION ========================================================= */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } ::selection { background: var(--accent); color: #ffffff; }