/* ========================================================================== Solar Stealth — "Power of One" design system (2026 redesign) Mobile-first. Light + dark via [data-theme="dark"] on . Class names consumed by template/script.js + theme.js are preserved: .site-header__nav-*, .theme-toggle*, .form__*, .reveal/.is-revealed ========================================================================== */ /* ---------- Tokens ---------- */ :root { --bg: #f6f8fb; --bg-elev: #ffffff; --bg-soft: #eef2f7; --ink: #0b1524; --ink-2: #46566e; --ink-3: #6b7a92; --line: #dfe6ef; --accent-1: #0ea5a0; /* teal */ --accent-2: #1d4ed8; /* blue */ --accent-grad: linear-gradient(92deg, #14b8a6 0%, #2563eb 100%); --accent-soft: rgba(20, 184, 166, .10); --on-accent: #ffffff; --shadow: 0 1px 2px rgba(11, 21, 36, .05), 0 12px 32px -12px rgba(11, 21, 36, .14); --shadow-lg: 0 24px 64px -24px rgba(11, 21, 36, .28); --radius: 18px; --radius-lg: 28px; --header-h: 64px; --container: 1120px; --scrim: linear-gradient(180deg, rgba(5,10,20,.18) 0%, rgba(5,10,20,.16) 45%, rgba(5,10,20,.72) 100%); } [data-theme="dark"] { --bg: #070c15; --bg-elev: #0d1524; --bg-soft: #101a2c; --ink: #edf2fa; --ink-2: #a8b6cc; --ink-3: #7e8da6; --line: #1c2941; --accent-1: #2dd4bf; --accent-2: #60a5fa; --accent-grad: linear-gradient(92deg, #2dd4bf 0%, #3b82f6 100%); --accent-soft: rgba(45, 212, 191, .10); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .55); --shadow-lg: 0 24px 64px -24px rgba(0, 0, 0, .7); --scrim: linear-gradient(180deg, rgba(4,8,16,.30) 0%, rgba(4,8,16,.28) 45%, rgba(4,8,16,.82) 100%); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.015em; } p { margin: 0 0 1em; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(18px, 4vw, 32px); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } .skip-link { position: absolute; left: 8px; top: -48px; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; z-index: 200; text-decoration: none; transition: top .2s ease; } .skip-link:focus { top: 8px; } /* Gradient utility text */ .grad-text { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-1); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--accent-grad); } /* Section scaffolding */ .section { padding-block: clamp(56px, 9vw, 104px); } .section--tint { background: var(--bg-soft); } .section__kicker { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .section__title { font-size: clamp(1.7rem, 4.6vw, 2.6rem); font-weight: 800; max-width: 21ch; } .section__title--center { margin-inline: auto; text-align: center; } .section__lede { color: var(--ink-2); font-size: clamp(1rem, 2.4vw, 1.15rem); max-width: 62ch; margin-bottom: 0; } /* Reveal-on-scroll (script.js toggles .is-revealed) */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 26px; border-radius: 999px; border: 0; font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; } .btn:active { transform: scale(.97); } .btn--primary { background: var(--accent-grad); color: var(--on-accent); box-shadow: 0 10px 26px -10px rgba(20, 122, 190, .55); } .btn--primary:hover { box-shadow: 0 14px 32px -10px rgba(20, 122, 190, .7); transform: translateY(-1px); } .btn--secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--line); } .btn--secondary:hover { border-color: var(--accent-1); color: var(--accent-1); } .hero .btn--secondary { color: #fff; border-color: rgba(255,255,255,.55); backdrop-filter: blur(4px); } .hero .btn--secondary:hover { border-color: #fff; color: #fff; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 130; /* above drawer+backdrop so the burger stays tappable */ border-bottom: 1px solid var(--line); } /* Blur lives on a pseudo-element, NOT the header itself: backdrop-filter on an ancestor creates a containing block for position:fixed descendants, which was collapsing the mobile flyout drawer to the header's 64px box. */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .site-header__inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); } .site-header__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } /* Nav (and everything after it) sits right; brand + theme toggle sit left */ .site-header__nav { margin-left: auto; } @media (max-width: 380px) { .site-header__logo-text { font-size: 1rem; } } .brand-mark { width: 30px; height: 30px; border-radius: 9px; flex: none; background: var(--accent-grad); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: .95rem; } .site-header__logo-text { font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; color: var(--ink); } .site-header__cta { min-height: 40px; padding: 8px 18px; font-size: .92rem; } .site-header__nav-list { display: flex; gap: 4px; align-items: center; list-style: none; margin: 0; padding: 0; } .site-header__nav-link { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--ink-2); transition: color .15s ease, background-color .15s ease; } .site-header__nav-link:hover { color: var(--ink); background: var(--accent-soft); } .site-header__burger { display: none; } .site-header__nav-backdrop { display: none; } /* In-drawer quote CTA: only rendered inside the mobile flyout */ .site-header__nav-item--cta { display: none; } /* Mobile drawer (checkbox-driven; script.js layers a11y on top) */ @media (max-width: 860px) { .site-header__burger { display: grid; place-items: center; position: relative; width: 46px; height: 46px; border-radius: 12px; font-size: 1.3rem; cursor: pointer; color: var(--ink); order: 3; } /* Burger morphs to a close ✕ while the drawer is open (header sits above the drawer, so this stays tappable as the close control). */ .site-header__nav-toggle:checked ~ .site-header__burger { color: transparent; } .site-header__nav-toggle:checked ~ .site-header__burger::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font-size: 1.2rem; font-weight: 700; } .site-header__cta { display: none; } .site-header__nav-list { position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); height: 100dvh; flex-direction: column; align-items: stretch; gap: 0; padding: calc(var(--header-h) + 14px) 18px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--bg-elev); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .28s ease; z-index: 120; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .site-header__nav-item { border-bottom: 1px solid var(--line); } .site-header__nav-link { display: flex; align-items: center; width: 100%; min-height: 52px; font-size: clamp(1rem, 4.4vw, 1.12rem); padding: 14px 10px; border-radius: 0; color: var(--ink); } .site-header__nav-item--cta { display: block; border-bottom: 0; margin-top: 18px; } .site-header__nav-item--cta .btn { width: 100%; } .site-header__nav-toggle:checked ~ .site-header__nav-list { transform: none; } .site-header__nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(5, 10, 20, .5); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 110; } .site-header__nav-toggle:checked ~ .site-header__nav-backdrop { opacity: 1; pointer-events: auto; } } @media (prefers-reduced-motion: reduce) { .site-header__nav-list, .site-header__nav-backdrop { transition: none; } } /* ---------- Theme toggle (theme.js contract) ---------- Icon-only round button, docked left beside the logo. theme.js still swaps the sun/moon icon and keeps the aria-label descriptive. */ .theme-toggle { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; transition: border-color .15s ease, color .15s ease; } .theme-toggle:hover { border-color: var(--accent-1); color: var(--ink); } .theme-toggle__icon { display: grid; place-items: center; } .theme-toggle__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; display: block; } /* ---------- Breadcrumbs ---------- */ .breadcrumbs { padding-top: 18px; font-size: .88rem; color: var(--ink-3); } .breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .breadcrumbs__link { color: var(--ink-3); text-decoration: none; } .breadcrumbs__link:hover { color: var(--accent-1); } .breadcrumbs__separator { margin-inline: 4px; } .breadcrumbs__current { color: var(--ink-2); font-weight: 600; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: min(92svh, 880px); display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; } /* Mobile portrait crop: anchor to the LEFT of the photo (roofline + panels) instead of the center, so the composition survives the tall crop. */ @media (max-width: 860px) { .hero__media { object-position: 0% 38%; } } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); } .hero__inner { padding-block: clamp(48px, 8vw, 88px); color: #fff; } /* Mobile: reserve the sticky quote bar's zone (bar ~50px + 12px offset + 12px breathing room + iOS safe area) below the hero text/buttons, so the floating bar never overlaps the eyebrow, headline, subhead, or CTAs. */ @media (max-width: 860px) { .hero__inner { padding-bottom: calc(28px + 74px + env(safe-area-inset-bottom, 0px)); } } .hero__eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7ef0dc; margin-bottom: 16px; text-shadow: 0 1px 3px rgba(5, 10, 20, .65), 0 2px 14px rgba(5, 10, 20, .45); } .hero__headline { font-size: clamp(2.15rem, 7vw, 4.1rem); font-weight: 850; letter-spacing: -.025em; max-width: 15ch; margin-bottom: .35em; text-wrap: balance; text-shadow: 0 2px 4px rgba(5, 10, 20, .55), 0 6px 24px rgba(5, 10, 20, .45); } .hero__subhead { font-size: clamp(1.02rem, 2.6vw, 1.25rem); color: rgba(255,255,255,.94); max-width: 52ch; margin-bottom: 1.6em; text-shadow: 0 1px 3px rgba(5, 10, 20, .6), 0 3px 16px rgba(5, 10, 20, .4); } .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Stat band (0 Down · Savings Day One · One Company) ---------- */ .statband { border-block: 1px solid var(--line); background: var(--bg-elev); } .statband__list { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; } .statband__item { padding: clamp(22px, 4vw, 38px) 18px; text-align: center; } .statband__item + .statband__item { border-left: 1px solid var(--line); } .statband__value { display: block; font-size: clamp(1.35rem, 4.6vw, 2.2rem); font-weight: 850; letter-spacing: -.02em; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .statband__label { display: block; font-weight: 700; margin-top: 2px; } .statband__sub { display: block; font-size: .85rem; color: var(--ink-3); margin-top: 2px; } @media (max-width: 640px) { .statband__list { grid-template-columns: 1fr; } .statband__item + .statband__item { border-left: 0; border-top: 1px solid var(--line); } .statband__item { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; text-align: left; padding-block: 18px; } .statband__value { grid-row: span 2; min-width: 120px; } } /* ---------- Power of One (ring + copy) ---------- */ .one-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; } @media (min-width: 900px) { .one-grid { grid-template-columns: 1.05fr .95fr; } } .one-copy .section__lede { margin-bottom: 1em; } .one-mission { margin-top: 18px; padding: 18px 20px; border-left: 3px solid var(--accent-1); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink-2); font-size: .98rem; } .one-mission strong { color: var(--ink); } .ring-wrap { display: grid; place-items: center; } .ring { width: min(100%, 480px); height: auto; } .ring .ring__node { fill: var(--bg-elev); stroke: var(--line); } .ring .ring__node-title { fill: var(--ink); font-weight: 800; } .ring .ring__node-sub { fill: var(--ink-3); } .ring .ring__center-title { fill: var(--ink); font-weight: 850; } .ring .ring__center-sub { fill: var(--ink-3); } /* ---------- Partner feature rows ---------- */ .partners { display: grid; gap: clamp(28px, 5vw, 56px); margin-top: clamp(28px, 5vw, 48px); } .partner { display: grid; gap: 22px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } @media (min-width: 860px) { .partner { grid-template-columns: 1fr 1fr; gap: 0; align-items: center; } .partner--flip .partner__media { order: 2; } } .partner__media { position: relative; min-height: 240px; } .partner__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } @media (max-width: 859px) { .partner__media { min-height: 0; } .partner__media img { position: static; aspect-ratio: 16 / 10; } } .partner__media--contain { background: var(--bg-soft); display: grid; place-items: center; padding: 26px; } .partner__media--contain img { position: static; height: auto; max-height: 420px; width: auto; object-fit: contain; aspect-ratio: auto; } .partner__caption { position: absolute; left: 12px; bottom: 12px; font-size: .75rem; color: #fff; background: rgba(5, 10, 20, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 5px 10px; border-radius: 8px; } .partner__body { padding: clamp(24px, 4vw, 48px); } .partner__tag { font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-1); margin-bottom: 8px; } .partner__title { font-size: clamp(1.35rem, 3.2vw, 1.8rem); font-weight: 800; } .partner__body p { color: var(--ink-2); } .partner__link { font-weight: 700; color: var(--accent-2); text-decoration: none; } .partner__link:hover { text-decoration: underline; } /* ---------- Charts (Sunrun scale) ---------- */ .chart-cards { display: grid; gap: 22px; margin-top: clamp(26px, 4vw, 40px); } @media (min-width: 900px) { .chart-cards { grid-template-columns: 1fr 1fr; } } .chart-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3.5vw, 34px); box-shadow: var(--shadow); } .chart-card__tag { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-1); margin-bottom: 6px; } .chart-card__title { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; } .chart-card__lede { color: var(--ink-2); font-size: .95rem; } .chart { display: grid; gap: 16px; margin-top: 20px; } .chart__row { display: grid; gap: 6px; } .chart__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .9rem; } .chart__name { font-weight: 700; } .chart__val { font-weight: 800; white-space: nowrap; } .chart__val--accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .chart__track { height: 14px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; } .chart__bar { height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--accent-grad); transition: width 1.1s cubic-bezier(.22, .8, .3, 1); } .chart__bar--muted { background: var(--ink-3); opacity: .45; } /* bars start at 0 until the section is revealed */ .reveal:not(.is-revealed) .chart__bar { width: 0 !important; } .chart__foot { font-size: .8rem; color: var(--ink-3); margin: 14px 0 0; } /* ---------- Steps ---------- */ .steps { display: grid; gap: 16px; margin-top: clamp(26px, 4vw, 40px); counter-reset: step; } @media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } } .step { position: relative; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 22px; box-shadow: var(--shadow); } .step::before { counter-increment: step; content: "0" counter(step); display: inline-block; font-weight: 850; font-size: 1.5rem; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; } .step h3 { font-size: 1.08rem; } .step p { color: var(--ink-2); font-size: .95rem; margin: 0; } /* ---------- Spec grid (Q.TRON) ---------- */ .specs { display: grid; gap: 14px; margin-top: clamp(26px, 4vw, 40px); grid-template-columns: repeat(2, 1fr); } @media (min-width: 800px) { .specs { grid-template-columns: repeat(4, 1fr); } } .spec { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; box-shadow: var(--shadow); } .spec__value { display: block; font-size: clamp(1.3rem, 3.4vw, 1.8rem); font-weight: 850; letter-spacing: -.02em; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .spec__label { display: block; font-weight: 700; font-size: .92rem; margin-top: 2px; } .spec__sub { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 2px; } /* Feature chips */ .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 0; list-style: none; } .chips li { font-size: .85rem; font-weight: 700; border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 15px; color: var(--ink-2); background: var(--bg-elev); } /* Split hero (Q.TRON page) */ .split-hero { padding-block: clamp(48px, 8vw, 96px); } .split-hero__grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; } @media (min-width: 900px) { .split-hero__grid { grid-template-columns: 1.1fr .9fr; } } .split-hero__panel { position: relative; display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-lg); background: radial-gradient(120% 90% at 20% 10%, var(--accent-soft) 0%, transparent 60%), var(--bg-soft); border: 1px solid var(--line); } .split-hero__panel img { max-height: min(60vh, 560px); width: auto; filter: drop-shadow(0 30px 40px rgba(5, 10, 20, .35)); } /* Feature cards (3-up) */ .cards { display: grid; gap: 16px; margin-top: clamp(26px, 4vw, 40px); } @media (min-width: 800px) { .cards { grid-template-columns: repeat(3, 1fr); } } .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); } .card h3 { font-size: 1.1rem; } .card p { color: var(--ink-2); font-size: .95rem; margin: 0; } .card__icon { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; margin-bottom: 14px; color: var(--accent-1); font-size: 1.2rem; } /* Media banner section (image + overlay copy) */ .banner { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; isolation: isolate; } .banner img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); } .banner__body { padding: clamp(22px, 4vw, 40px); color: #fff; max-width: 60ch; } .banner__body h2, .banner__body h3 { color: #fff; } .banner__body p { color: rgba(255,255,255,.88); margin: 0; } /* ---------- Gallery ---------- */ .gallery { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: clamp(26px, 4vw, 40px); } @media (min-width: 800px) { .gallery { grid-template-columns: repeat(3, 1fr); } } .gallery__item { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-elev); } .gallery__image { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .gallery__caption { font-size: .82rem; color: var(--ink-3); padding: 10px 14px; } /* ---------- FAQ accordion ---------- */ .faq { display: grid; gap: 12px; margin-top: clamp(26px, 4vw, 40px); max-width: 780px; } .faq__item { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 18px 22px; font-weight: 700; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::marker { content: none; } /* Question text: its own flex item so long questions wrap fully instead of being squeezed or clipped by the +/- icon. */ .faq__q { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; line-height: 1.4; } .faq__item summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-1); font-weight: 800; transition: transform .2s ease; margin-top: 1px; /* optically align with first text line */ } .faq__item[open] summary::after { content: "–"; transform: rotate(180deg); } .faq__answer { padding: 0 22px 20px; color: var(--ink-2); overflow-wrap: break-word; } .faq__answer a { color: var(--accent-2); font-weight: 600; } /* ---------- Forms (script.js contract preserved) ---------- */ .form { display: grid; gap: 16px; max-width: 640px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); } .form__honeypot { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .form__field { display: grid; gap: 6px; } .form__label { font-weight: 700; font-size: .92rem; } .form__required { color: var(--accent-1); } .form__control { width: 100%; min-height: 50px; padding: 12px 16px; font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; } textarea.form__control { min-height: 130px; resize: vertical; } .form__control:focus { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-soft); } .form__submit { width: 100%; } .form__success { color: #16a34a; font-weight: 700; margin: 0; } .form__error { color: #dc2626; font-weight: 700; margin: 0; } altcha-widget { --altcha-color-base: var(--bg-elev); --altcha-color-text: var(--ink); --altcha-color-border: var(--line); } /* Contact split */ .contact-grid { display: grid; gap: clamp(28px, 5vw, 56px); margin-top: clamp(26px, 4vw, 40px); } @media (min-width: 900px) { .contact-grid { grid-template-columns: .8fr 1.2fr; align-items: start; } } .contact-aside h3 { font-size: 1.05rem; } .contact-aside p { color: var(--ink-2); font-size: .95rem; } /* ---------- CTA block ---------- */ .cta-block { text-align: center; border-radius: var(--radius-lg); padding: clamp(40px, 7vw, 72px) clamp(22px, 5vw, 48px); background: radial-gradient(120% 140% at 50% 0%, rgba(37, 99, 235, .18) 0%, transparent 60%), var(--bg-elev); border: 1px solid var(--line); box-shadow: var(--shadow); } .cta-block__heading { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 850; letter-spacing: -.02em; } .cta-block p { color: var(--ink-2); max-width: 52ch; margin-inline: auto; } .cta-block .btn { margin-top: 10px; } /* ---------- Page header (privacy etc.) ---------- */ .page-header { padding-block: clamp(40px, 7vw, 72px) 0; } .page-header__title { font-size: clamp(1.9rem, 5.4vw, 3rem); font-weight: 850; letter-spacing: -.02em; } .page-header__lede { color: var(--ink-2); font-size: 1.1rem; max-width: 60ch; } /* Rich text (incl. legal pages) */ .rich-text { max-width: 760px; } .rich-text h2 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); font-weight: 800; margin-top: 1.8em; } .rich-text h2:first-child { margin-top: 0; } .rich-text h3 { font-size: 1.08rem; font-weight: 800; margin-top: 1.4em; } .rich-text p, .rich-text li { color: var(--ink-2); } .rich-text ul { padding-left: 22px; margin: 0 0 1em; } .rich-text li { margin-bottom: .4em; } .rich-text .legal-updated { font-size: .85rem; color: var(--ink-3); } /* Form consent fine print (TCPA) */ .form__consent { font-size: .78rem; color: var(--ink-3); line-height: 1.5; margin: 0; } .form__consent a { color: var(--accent-2); } /* ---------- Footer ---------- */ .site-footer { margin-top: clamp(40px, 7vw, 72px); border-top: 1px solid var(--line); background: var(--bg-elev); padding-block: clamp(36px, 6vw, 64px) calc(28px + 74px); /* clearance for mobile CTA bar */ } @media (min-width: 861px) { .site-footer { padding-bottom: 36px; } } .site-footer__inner { display: grid; gap: 30px; } @media (min-width: 800px) { .site-footer__inner { grid-template-columns: 1.3fr 1fr .9fr .8fr; } } .site-footer__brand-blurb { color: var(--ink-3); font-size: .9rem; max-width: 34ch; margin-top: 10px; } .site-footer__col-heading { font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .site-footer__col-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .site-footer__link { color: var(--ink-2); text-decoration: none; font-size: .95rem; } .site-footer__link:hover { color: var(--accent-1); } .site-footer__legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 8px; font-size: .8rem; color: var(--ink-3); } .site-footer__legal p { margin: 0 0 6px; } /* ---------- Timeline (incentives page) ---------- */ .timeline { list-style: none; margin: clamp(26px, 4vw, 40px) 0 0; padding: 0; position: relative; display: grid; gap: 26px; max-width: 720px; } .timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: var(--line); } .timeline__item { position: relative; padding-left: 40px; } .timeline__item::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 999px; background: var(--accent-grad); box-shadow: 0 0 0 4px var(--accent-soft); } .timeline__item--past::before { background: var(--ink-3); opacity: .5; box-shadow: none; } .timeline__date { display: block; font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-1); } .timeline__item--past .timeline__date { color: var(--ink-3); } .timeline__title { display: block; font-weight: 800; margin: 2px 0 4px; } .timeline__body { color: var(--ink-2); font-size: .95rem; margin: 0; } /* ---------- Status badges ---------- */ .badge { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; } .badge--dead { background: rgba(220, 38, 38, .12); color: #b91c1c; } .badge--alive { background: rgba(22, 163, 74, .12); color: #15803d; } [data-theme="dark"] .badge--dead { color: #f87171; } [data-theme="dark"] .badge--alive { color: #4ade80; } /* ---------- State jump nav + incentive cards ---------- */ .state-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .state-nav__link { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 22px; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--ink); background: var(--bg-elev); transition: border-color .15s ease, color .15s ease; } .state-nav__link:hover { border-color: var(--accent-1); color: var(--accent-1); } .state-section { scroll-margin-top: calc(var(--header-h) + 16px); } .incentive-cards { display: grid; gap: 16px; margin-top: clamp(22px, 3.5vw, 32px); } @media (min-width: 800px) { .incentive-cards { grid-template-columns: repeat(2, 1fr); } } .incentive-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .incentive-card__amount { display: block; font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 850; letter-spacing: -.02em; background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .incentive-card h3, .incentive-card h4 { font-size: 1.05rem; margin: 4px 0 6px; } .incentive-card p { color: var(--ink-2); font-size: .93rem; margin: 0; } /* ---------- Disclaimer / notice ---------- */ .notice { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 16px 20px; margin-top: clamp(24px, 4vw, 36px); font-size: .85rem; color: var(--ink-3); } .notice p { margin: 0 0 6px; } .notice p:last-child { margin: 0; } /* Wide steps variant (5-step panel journey) */ @media (min-width: 800px) { .steps--journey { grid-template-columns: repeat(5, 1fr); } } .steps--journey .step { padding: 22px 18px 18px; } .steps--journey .step h3 { font-size: 1rem; } .steps--journey .step p { font-size: .88rem; } /* ---------- Comparison table (ownership page) ---------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: clamp(26px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-elev); box-shadow: var(--shadow); } .compare { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .92rem; } .compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } .compare thead th { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-soft); white-space: nowrap; } .compare thead th:first-child { width: 24%; } .compare tbody th { font-weight: 700; color: var(--ink); } .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; } .compare td { color: var(--ink-2); } .compare .good { color: #15803d; font-weight: 700; } .compare .bad { color: #b91c1c; font-weight: 700; } [data-theme="dark"] .compare .good { color: #4ade80; } [data-theme="dark"] .compare .bad { color: #f87171; } .compare__hint { font-size: .8rem; color: var(--ink-3); margin: 10px 4px 0; display: none; } @media (max-width: 740px) { .compare__hint { display: block; } } /* ---------- Mobile sticky CTA bar ---------- Context-aware: script.js adds .mobile-cta--hidden whenever the contact form or the footer is in view (the CTA is redundant there and was overlapping the form's submit button), and while a form field is focused (mobile keyboard). Respects the iOS home-indicator safe area. */ .mobile-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: none; transition: transform .28s ease, opacity .28s ease; } @media (max-width: 860px) { .mobile-cta { display: block; } .mobile-cta .btn { width: 100%; box-shadow: 0 16px 40px -10px rgba(5, 10, 20, .5); } } .mobile-cta--hidden { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } } .page--contact .mobile-cta { display: none; }