/* ============================================================================= Dealer driveaway — styles Theme: data-theme="light" | "dark" on (no localStorage; default from OS) ============================================================================= */ html[data-theme="light"] { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } :root { --font-heading: "Outfit", system-ui, sans-serif; --font-body: "Source Sans 3", system-ui, sans-serif; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-header: 0 1px 0 rgba(15, 23, 42, 0.06); --transition-fast: 150ms ease; --transition-med: 220ms ease; --accent: #0d6e68; --accent-hover: #0a5c57; --accent-muted: rgba(13, 110, 104, 0.12); --bg: #fafaf9; --bg-elevated: #ffffff; --bg-alt: #f4f4f2; --text: #1c1917; --text-muted: #57534e; --border: #e7e5e4; --ring: #0d6e68; } [data-theme="dark"] { --accent: #2dd4bf; --accent-hover: #5eead4; --accent-muted: rgba(45, 212, 191, 0.12); --bg: #0c0f12; --bg-elevated: #14181d; --bg-alt: #1a1f26; --text: #f5f5f4; --text-muted: #a8a29e; --border: #292524; --ring: #2dd4bf; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-header: 0 1px 0 rgba(255, 255, 255, 0.06); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--text); background: var(--bg); padding-bottom: env(safe-area-inset-bottom); } h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; transition: color var(--transition-fast); } a:hover { color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; z-index: 9999; padding: var(--space-sm) var(--space-md); background: var(--accent); color: #fff; font-weight: 600; } .skip-link:focus { left: var(--space-md); top: var(--space-md); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----- Header ----- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg-elevated) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-header); } .site-header__inner { max-width: 1120px; margin: 0 auto; padding: var(--space-sm) var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } .site-logo { display: flex; align-items: center; gap: var(--space-sm); color: var(--text); text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; letter-spacing: -0.03em; flex-shrink: 0; } .site-logo:hover { color: var(--text); } .site-logo__bg { fill: var(--bg-alt); stroke: var(--border); stroke-width: 1; } .site-logo__vehicle, .site-logo__cab { fill: var(--accent); } .site-logo__road { stroke: var(--text-muted); opacity: 0.6; } .site-logo__text { max-width: 180px; line-height: 1.15; } @media (min-width: 900px) { .site-logo__text { max-width: none; } } /* ----- Nav ----- */ .nav { position: relative; } .nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-sm); } .nav__toggle-bar { display: block; height: 2px; width: 22px; background: var(--text); border-radius: 1px; transition: transform var(--transition-med), opacity var(--transition-fast); } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 900px) { .nav__toggle { display: none; } } .nav__list { list-style: none; margin: 0; padding: 0; } @media (max-width: 899px) { .nav__list { position: absolute; right: 0; top: calc(100% + var(--space-sm)); min-width: 220px; padding: var(--space-md); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); display: none; flex-direction: column; gap: var(--space-xs); } .nav__list.is-open { display: flex; } } @media (min-width: 900px) { .nav__list { display: flex; flex-direction: row; align-items: center; gap: var(--space-lg); } } .nav__link { display: block; padding: var(--space-sm) var(--space-sm); color: var(--text); text-decoration: none; font-weight: 500; font-size: 0.9375rem; border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast); } .nav__link:hover { background: var(--bg-alt); color: var(--text); } .site-header__actions { display: flex; align-items: center; gap: var(--space-sm); } .header-call { display: none; } @media (min-width: 640px) { .header-call { display: inline-flex; } } @media (max-width: 899px) { .site-header__actions .btn--primary.btn--sm { display: none; } } /* Theme toggle */ .theme-toggle { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-alt); cursor: pointer; color: var(--text); transition: border-color var(--transition-fast), background var(--transition-fast); } .theme-toggle:hover { border-color: var(--text-muted); } .theme-toggle__icon { grid-area: 1 / 1; display: flex; transition: opacity var(--transition-fast), transform var(--transition-med); } /* Light theme: show moon (switch to dark); hide sun */ [data-theme="light"] .theme-toggle__icon--sun { opacity: 0; transform: rotate(12deg) scale(0.9); pointer-events: none; } /* Dark theme: show sun (switch to light); hide moon */ [data-theme="dark"] .theme-toggle__icon--moon { opacity: 0; transform: rotate(-12deg) scale(0.9); pointer-events: none; } /* ----- Buttons ----- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0.6rem 1.1rem; font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; text-decoration: none; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-hover); color: #fff; } [data-theme="dark"] .btn--primary { color: #0c0f12; } [data-theme="dark"] .btn--primary:hover { color: #0c0f12; } .btn--secondary { background: transparent; color: var(--text); border-color: var(--border); } .btn--secondary:hover { background: var(--bg-alt); border-color: var(--text-muted); color: var(--text); } .btn--ghost { background: transparent; color: var(--text); border-color: transparent; } .btn--ghost:hover { background: var(--bg-alt); } .btn--sm { padding: 0.45rem 0.85rem; font-size: 0.875rem; } .btn--lg { padding: 0.85rem 1.35rem; font-size: 1rem; } /* ----- Hero ----- */ .hero { padding: var(--space-3xl) var(--space-lg) var(--space-2xl); border-bottom: 1px solid var(--border); background: var(--bg-elevated); } .hero__inner { max-width: 1120px; margin: 0 auto; } /* Same outer width as .section__inner; keep headline/lead readable */ .hero__prose { max-width: 720px; } .hero__eyebrow { margin: 0 0 var(--space-md); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .hero__title { margin: 0 0 var(--space-lg); font-size: clamp(1.75rem, 4vw, 2.375rem); } .hero__lead { margin: 0 0 var(--space-xl); font-size: 1.125rem; color: var(--text-muted); } .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-2xl); } .hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-lg); margin: 0; padding: var(--space-lg) 0 0; border-top: 1px solid var(--border); } .hero__stat { margin: 0; } .hero__stat-term { margin: 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .hero__stat-value { margin: var(--space-xs) 0 0; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; } /* ----- Sections ----- */ .section { padding: var(--space-3xl) var(--space-lg); } .section--alt { background: var(--bg-alt); } .section--quote { background: var(--bg-elevated); border-top: 1px solid var(--border); } .section__inner { max-width: 1120px; margin: 0 auto; } .section__inner--narrow { max-width: 680px; } /* Left-aligned prose column inside full-width section shell (matches Services left edge) */ .about__content { max-width: 680px; } .section__header { margin-bottom: var(--space-2xl); } .section__header--center { text-align: center; } .section__title { margin: 0 0 var(--space-md); font-size: clamp(1.5rem, 3vw, 1.875rem); } .section__intro { margin: 0; max-width: 560px; color: var(--text-muted); font-size: 1.0625rem; } .section__header--center .section__intro { margin-left: auto; margin-right: auto; } /* Cards */ .card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-lg); } .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm); transition: border-color var(--transition-med), box-shadow var(--transition-med), transform var(--transition-med); } .section--alt .card { background: var(--bg-elevated); } .card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow-md); transform: translateY(-2px); } .card__title { margin: 0 0 var(--space-sm); font-size: 1.125rem; } .card__text { margin: 0; color: var(--text-muted); font-size: 0.9375rem; } /* Steps */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); } @media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } } .steps__item { display: flex; gap: var(--space-lg); align-items: flex-start; padding: var(--space-lg); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--transition-fast); } .steps__item:hover { border-color: color-mix(in srgb, var(--accent) 25%, var(--border)); } .steps__num { flex-shrink: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; background: var(--accent-muted); color: var(--accent); border-radius: var(--radius-sm); } .steps__title { margin: 0 0 var(--space-sm); font-size: 1.0625rem; } .steps__text { margin: 0; color: var(--text-muted); font-size: 0.9375rem; } /* Feature list */ .feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); } @media (min-width: 640px) { .feature-list { grid-template-columns: repeat(2, 1fr); } } .feature-list__item { display: flex; gap: var(--space-md); padding: var(--space-lg); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); } .feature-list__icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 999px; } .feature-list__title { display: block; margin-bottom: var(--space-xs); font-size: 1rem; } .feature-list__text { margin: 0; color: var(--text-muted); font-size: 0.9375rem; } /* Coverage */ .coverage { max-width: 640px; } .coverage__list { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm); } .coverage__list li { padding: var(--space-sm) var(--space-md); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px; font-size: 0.9375rem; font-weight: 500; } .section--alt .coverage__list li { background: var(--bg-alt); } .coverage__note { margin: 0; color: var(--text-muted); font-size: 1rem; } /* Trust grid */ .trust-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-lg); } .trust-block { padding: var(--space-xl); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); transition: border-color var(--transition-fast); } .trust-block:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); } .trust-block__title { margin: 0 0 var(--space-sm); font-size: 1.0625rem; } .trust-block__text { margin: 0; color: var(--text-muted); font-size: 0.9375rem; } /* Prose / About */ .prose p { margin: 0 0 var(--space-md); color: var(--text-muted); } .prose p:last-child { margin-bottom: 0; } .about-cta { margin: var(--space-xl) 0 0; } /* FAQ */ .faq { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elevated); } .faq__item + .faq__item { border-top: 1px solid var(--border); } .faq__question { margin: 0; font-size: 1rem; } .faq__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg); border: none; background: transparent; font: inherit; font-weight: 600; text-align: left; color: var(--text); cursor: pointer; transition: background var(--transition-fast); } .faq__trigger:hover { background: var(--bg-alt); } .faq__trigger[aria-expanded="true"] { background: var(--bg-alt); } .faq__chevron { flex-shrink: 0; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform var(--transition-med); } .faq__trigger[aria-expanded="true"] .faq__chevron { transform: rotate(-135deg); } .faq__panel { padding: 0 var(--space-lg) var(--space-lg); color: var(--text-muted); font-size: 0.9375rem; } .faq__panel[hidden] { display: none; } .faq__panel p { margin: 0; } /* Form */ .quote-form { transition: opacity var(--transition-med); } .quote-form.is-hidden { display: none; } .form-row { display: grid; gap: var(--space-lg); } @media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: var(--space-xs); } .field label { font-weight: 600; font-size: 0.875rem; } .field__req { color: var(--accent); } .field__hint { margin: 0; font-size: 0.8125rem; color: var(--text-muted); } .field input, .field select, .field textarea { padding: 0.65rem 0.85rem; font: inherit; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .field select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2357534e' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.25rem; } [data-theme="dark"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a8a29e' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); } .field textarea { resize: vertical; min-height: 100px; } .field--error input, .field--error select, .field--error textarea { border-color: #b91c1c; } .field__error { min-height: 1.25rem; font-size: 0.8125rem; color: #b91c1c; } [data-theme="dark"] .field--error input, [data-theme="dark"] .field--error select, [data-theme="dark"] .field--error textarea { border-color: #f87171; } [data-theme="dark"] .field__error { color: #fca5a5; } .quote-form__submit { margin-top: var(--space-lg); } .form-success { padding: var(--space-xl); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); } .form-success__title { margin: 0 0 var(--space-sm); font-family: var(--font-heading); font-size: 1.25rem; } .form-success__text { margin: 0 0 var(--space-lg); color: var(--text-muted); } .form-success__summary { margin: 0 0 var(--space-lg); padding: var(--space-lg); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.875rem; white-space: pre-wrap; word-break: break-word; overflow-x: auto; } .form-success__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); } /* Contact cards */ .contact-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); } .contact-card { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 220px; padding: var(--space-xl); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .contact-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow-md); color: var(--text); } .contact-card__label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .contact-card__value { font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; color: var(--accent); } /* Footer */ .site-footer { padding: var(--space-3xl) var(--space-lg); padding-bottom: calc(var(--space-3xl) + 72px); background: var(--bg-alt); border-top: 1px solid var(--border); } @media (min-width: 768px) { .site-footer { padding-bottom: var(--space-3xl); } } .site-footer__inner { max-width: 1120px; margin: 0 auto; } .site-footer__name { margin: 0 0 var(--space-xs); font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; } .site-footer__tagline { margin: 0 0 var(--space-xl); color: var(--text-muted); font-size: 0.9375rem; } .site-footer__grid { display: grid; gap: var(--space-xl); } @media (min-width: 560px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } .site-footer__heading { margin: 0 0 var(--space-sm); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .site-footer__text { margin: 0; color: var(--text-muted); font-size: 0.9375rem; } .site-footer__text a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } .site-footer__text a:hover { color: var(--accent); } .site-footer__legal { margin: var(--space-2xl) 0 0; padding-top: var(--space-lg); border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--text-muted); } /* Mobile sticky CTA */ .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg-elevated) 95%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08); } .mobile-cta .btn { flex: 1; } @media (min-width: 768px) { .mobile-cta { display: none; } } /* Google Places Autocomplete dropdown above header/modals */ .pac-container { z-index: 10050 !important; }