/* Tesla brand landing (docs/tesla-landing-spec.md). Every surface, border and text colour here is a theme token from style.css: the site ships a light and a dark theme and dark is the default, so a literal #fff card is a card that disappears — white on white — for most visitors. The only literals left are the washes over the two band photographs, which are hardcoded dark on purpose so white type stays legible in both themes. Guarded by TestTeslaCSS_UsesThemeTokens. */ /* The site header is position:fixed, so every page root offsets itself by its height — the same rule .sd uses. Without it the hero slides under the header. */ .tesla { padding-top: var(--header-height); } /* padding-block, not padding: the shorthand zeroed .container's side gutter and the trail sat flush against the screen edge on a phone. */ .tesla-crumbs { padding-block: 16px; font-size: 0.85rem; color: var(--text-soft); } .tesla-crumbs a { color: inherit; text-decoration: none; } .tesla-crumbs a:hover { color: var(--primary); } .tesla-crumbs span[aria-current] { color: var(--text-strong); } .tesla-hero { padding: 24px 0 48px; } .tesla-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) 320px; gap: 32px; align-items: start; } .tesla-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin: 0 0 12px; } .tesla-h1 { font-size: clamp(1.9rem, 4.4vw, 2.75rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 16px; } .tesla-h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 14px; } .tesla-lede { max-width: 62ch; line-height: 1.65; margin: 0 0 24px; } .tesla-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 26px; } .tesla-stats .v { display: block; font-size: 1.6rem; font-weight: 500; line-height: 1.1; } .tesla-stats .k { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--text-soft); } .tesla-cta { display: flex; flex-wrap: wrap; gap: 12px; } .tesla-section { padding: 48px 0; } @media (max-width: 900px) { .tesla-hero-grid { grid-template-columns: 1fr; } } /* --- colour configurator ------------------------------------------------- */ .tesla-config { margin-top: 28px; } /* No plate behind the car: the cut-outs are transparent, so the car stands on the page itself. A filled rectangle read as a white box punched into the layout. */ .tesla-stage { position: relative; aspect-ratio: 1400 / 620; } .tesla-stage::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 9%; height: 18px; background: radial-gradient(50% 50% at 50% 50%, rgba(14, 14, 21, 0.16), rgba(14, 14, 21, 0) 74%); filter: blur(9px); } .tesla-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.4s ease; z-index: 2; } .tesla-frame.is-on { opacity: 1; } .tesla-config-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; } .tesla-config-name { font-size: 1.1rem; font-weight: 600; margin: 0; } .tesla-config-sub { display: block; font-size: 0.85rem; font-weight: 400; color: var(--text-soft); margin-top: 2px; } /* The dot is a colour, not a label: the name is there for screen readers and for the crawler, and must not paint over the swatch. No global helper exists in this project, so the page declares its own. */ .tesla-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .tesla-dots { display: flex; flex-wrap: wrap; gap: 10px; } .tesla-dot { position: relative; width: 36px; height: 36px; border-radius: 50%; padding: 0; cursor: pointer; border: 1px solid var(--border-medium); background: var(--swatch); transition: transform 0.12s ease; } .tesla-dot:hover { transform: scale(1.08); } .tesla-dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--text-strong); } .tesla-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } .tesla-disclaimer { margin-top: 18px; font-size: 0.85rem; color: var(--text-soft); max-width: 66ch; } .tesla-section--alt { background: var(--surface-2); } @media (prefers-reduced-motion: reduce) { .tesla-frame, .tesla-dot { transition: none; } } /* --- supporting blocks --------------------------------------------------- */ .tesla-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; } .tesla-card { background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: 8px; padding: 22px; } .tesla-card h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; } .tesla-card p { margin: 0; font-size: 0.9rem; color: var(--text-soft); line-height: 1.6; } .tesla-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: none; } .tesla-steps li { border-top: 2px solid var(--primary); padding-top: 14px; } .tesla-steps .k { font-size: 0.75rem; font-weight: 700; color: var(--primary); letter-spacing: 0.1em; } .tesla-steps .t { display: block; font-size: 1rem; font-weight: 600; margin-top: 6px; } .tesla-steps p { margin: 8px 0 0; font-size: 0.85rem; color: var(--text-soft); line-height: 1.55; } .tesla-table-scroll { overflow-x: auto; margin-top: 24px; background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: 8px; } .tesla-table { border-collapse: collapse; width: 100%; min-width: 520px; } .tesla-table th, .tesla-table td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--border-soft); } .tesla-table thead th { font-size: 0.8rem; font-weight: 600; color: var(--text-soft); background: var(--surface-2); } .tesla-table thead th.us { color: var(--primary); } .tesla-table tbody tr:last-child td { border-bottom: 0; } .tesla-table td.lbl { color: var(--text-soft); font-size: 0.9rem; white-space: nowrap; } .tesla-table td.us { font-weight: 600; } .tesla-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } .tesla-prices-note { margin-top: 16px; font-size: 0.85rem; color: var(--text-soft); max-width: 68ch; } .tesla-closer { text-align: center; } .tesla-closer .tesla-lede { margin-left: auto; margin-right: auto; } .tesla-closer .tesla-cta { justify-content: center; } @media (max-width: 900px) { .tesla-cards { grid-template-columns: 1fr; } .tesla-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .tesla-steps { grid-template-columns: 1fr; } } /* --- hero photo ---------------------------------------------------------- */ .tesla-hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr) 290px; } .tesla-hero-shot { border-radius: 8px; overflow: hidden; background: var(--media-tile-bg); aspect-ratio: 16 / 10; } .tesla-hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- full-width band ----------------------------------------------------- */ .tesla-band { position: relative; isolation: isolate; min-height: clamp(460px, 46vw, 640px); display: flex; align-items: center; overflow: hidden; } /* Parallax is driven by tesla.js, not by a CSS scroll timeline: scroll timelines only exist in Chromium, so Safari and Firefox saw a still photo. The image is taller than the band to leave room to travel without baring an edge. */ .tesla-band > img { position: absolute; inset: -26% 0; width: 100%; height: 152%; object-fit: cover; z-index: -2; will-change: transform; } .tesla-band-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 14, 0.95) 0%, rgba(10, 10, 14, 0.88) 30%, rgba(10, 10, 14, 0.55) 52%, rgba(10, 10, 14, 0.12) 82%, rgba(10, 10, 14, 0) 100%), linear-gradient(0deg, rgba(10, 10, 14, 0.45) 0%, rgba(10, 10, 14, 0) 45%); } .tesla-band-inner { padding-block: 56px; } .tesla-band-quote { font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: #fff; margin: 0; max-width: 18ch; } .tesla-band-sub { color: #dcdde2; max-width: 46ch; margin: 14px 0 0; } /* --- detail figures ------------------------------------------------------ */ .tesla-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; } .tesla-figs figure { margin: 0; background: var(--surface-1); border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; } .tesla-figs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .tesla-figs figcaption { padding: 16px 18px 18px; font-size: 0.85rem; color: var(--text-soft); line-height: 1.55; } .tesla-figs b { display: block; font-size: 1rem; font-weight: 600; color: var(--text-strong); margin-bottom: 6px; } /* --- tighter configurator stage ------------------------------------------ */ .tesla-stage { aspect-ratio: 1400 / 520; max-width: 1000px; margin-inline: auto; } .tesla-config-bar { justify-content: center; gap: 22px; } @media (max-width: 1180px) { .tesla-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } } @media (max-width: 900px) { .tesla-figs { grid-template-columns: 1fr; } .tesla-hero-grid { grid-template-columns: 1fr; } } /* --- mobile --------------------------------------------------------------- Two fixes found on a real 390px viewport, not in the tests. */ @media (max-width: 760px) { /* 1. The photo came AFTER the buttons, so the first screen was solid text. On a phone the car has to be the first thing under the headline. */ .tesla-hero-grid { display: flex; flex-direction: column; } .tesla-hero-copy { display: contents; } .tesla-hero-copy .tesla-eyebrow { order: 1; } .tesla-hero-copy .tesla-h1 { order: 2; } .tesla-hero-shot { order: 3; margin-block: 4px 18px; aspect-ratio: 16 / 10; } .tesla-hero-copy .tesla-lede { order: 4; } .tesla-hero-copy .tesla-stats { order: 5; } .tesla-hero-copy .tesla-cta { order: 6; } .sd-aside { order: 7; } .tesla-cta .btn { flex: 1 1 100%; } /* 2. The comparison table was cut off: only the first column fitted and the second scrolled out of sight, which turns a comparison into a claim. Each row becomes a card with both values side by side. */ .tesla-table-scroll { overflow: visible; } .tesla-table { min-width: 0; } .tesla-table thead { display: none; } .tesla-table, .tesla-table tbody, .tesla-table tr { display: block; width: 100%; } .tesla-table tr { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); } .tesla-table tr:last-child { border-bottom: 0; } .tesla-table td { display: block; padding: 0; border: 0; } .tesla-table td.lbl { font-size: 0.78rem; color: var(--text-soft); margin-bottom: 8px; white-space: normal; } .tesla-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tesla-table tbody tr td.lbl { grid-column: 1 / -1; } .tesla-table td[data-col]::before { content: attr(data-col); display: block; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 4px; } .tesla-table td.us[data-col]::before { color: var(--primary); } .tesla-table td { font-size: 0.9rem; } } /* The factory palette is a photograph, not a cut-out: it gets a real frame and no fake floor shadow. The generated colours below stay cut-outs on the page. */ .tesla-stage--photo { aspect-ratio: 16 / 9; max-width: 1000px; border-radius: 8px; overflow: hidden; background: var(--media-tile-bg); } .tesla-stage--photo::after { display: none; } .tesla-stage--photo img { object-fit: cover; } /* A