/* ========================================================================== Denver Majestic Limousines — Design System Old-school luxury, modern execution: near-black grounding, warm ink typography, oxblood action color, brass trim accent ========================================================================== */ /* Fonts are loaded via a in each page's (not @import here) so the browser can fetch them in parallel with this stylesheet instead of discovering them only after this file parses. */ /* --------------------------------------------------------------------- 1. Design Tokens --------------------------------------------------------------------- */ :root { /* Core: near-black grounding + warm ink */ --black: #0a0908; --ink: #f5f2ec; /* Slate midtones: structural surfaces */ --slate-950: #16181a; --slate-900: #1e2124; --slate-800: #292d31; --slate-700: #383d42; --slate-600: #4a5056; --slate-500: #6b7278; --slate-400: #8f969b; /* Oxblood: primary action color, used sparingly */ --oxblood-300: #9c4247; --oxblood-500: #6e1f23; --oxblood-600: #551719; --oxblood-700: #3d1012; /* Brass: trim / detail accent (brightened for stronger presence) */ --brass-300: #ecd3a2; --brass-500: #d7ac6e; --brass-600: #b58c52; --brass-700: #8f7040; --white: #ffffff; /* Semantic */ --bg-primary: var(--black); --bg-secondary: var(--slate-950); --bg-elevated: var(--slate-900); --bg-elevated-hover: var(--slate-800); --text-primary: var(--ink); /* Raised contrast so body/secondary copy reads clearly on dark surfaces */ --text-secondary: #bcc2c7; --text-muted: #9aa1a7; --accent: var(--oxblood-500); --accent-light: var(--oxblood-300); --accent-hover: var(--oxblood-300); --accent-secondary: var(--brass-500); --accent-secondary-light: var(--brass-300); --border-subtle: rgba(201, 163, 107, 0.14); --border-strong: rgba(201, 163, 107, 0.32); --overlay-scrim: rgba(10, 9, 8, 0.6); /* Typography: editorial serif headlines, clean geometric sans body */ --font-heading: 'Fraunces', Georgia, serif; --font-accent: 'Fraunces', Georgia, serif; --font-body: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; --fs-4xl: 3.75rem; --fs-5xl: 4.75rem; /* Spacing (4/8 rhythm) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* Layout */ --container-max: 1280px; --container-narrow: 780px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 999px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 600ms; /* Elevation */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5); --shadow-accent: 0 8px 32px rgba(110, 31, 35, 0.28); --nav-h: 104px; } /* --------------------------------------------------------------------- 2. Reset --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* No global scroll-behavior: smooth — it smooths *all* scroll input (mouse wheel, trackpad) in Chrome, not just programmatic jumps, which reads as laggy/delayed scrolling. The handful of places that want a smooth scroll (back-to-top, booking steps) already request it explicitly via behavior:'smooth' in JS, so nothing is lost. */ -webkit-text-size-adjust: 100%; overflow-x: clip; } /* Mobile touch polish: no grey tap flash, no 300ms tap delay on interactive elements site-wide (not just .btn) */ a, button, input, select, textarea, .chip, .radio-card, [data-carousel] .carousel-arrow { -webkit-tap-highlight-color: transparent; } a, button, .chip, .nav-toggle, .carousel-arrow, .back-to-top { touch-action: manipulation; } body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6; min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, picture, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; } button { cursor: pointer; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.15; letter-spacing: -0.015em; } h1, h2 { font-weight: 700; } h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.01em; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------- 3. Layout Utilities --------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-6); } .container-narrow { max-width: var(--container-narrow); margin-inline: auto; } section { position: relative; } .section-pad { padding-block: var(--space-9); border-top: 1px solid var(--border-subtle); } .section-pad.no-seam { border-top: none; } /* Light section variant — bright, airy content sections that alternate with the dark hero/CTA/footer for contrast and rhythm. */ .section-light { --bg-primary: var(--ink); --bg-secondary: #ffffff; --bg-elevated: #ffffff; --bg-elevated-hover: #f6f1e7; --text-primary: #1c1712; --text-secondary: #574c40; --text-muted: #766a58; --accent-secondary: var(--brass-600); --accent-secondary-light: var(--brass-700); --border-subtle: rgba(168, 133, 79, 0.2); --border-strong: rgba(168, 133, 79, 0.42); background: var(--bg-primary); color: var(--text-primary); } .section-light .card, .section-light .icon-card, .section-light .fleet-card, .section-light .service-card { box-shadow: 0 10px 28px rgba(28, 23, 18, 0.08); } /* Dark section with a real photo background — for content sections that benefit from an evocative image instead of flat color. */ .section-dark-image { position: relative; overflow: hidden; /* Re-pin dark-theme tokens so text/icons read correctly regardless of whether the section sits between light siblings. Brighter than the base slate-400/500 pair — this section sits directly over a busy photo, so secondary/muted copy needs extra contrast headroom. */ --bg-elevated: var(--slate-900); --bg-secondary: var(--slate-950); --text-primary: var(--ink); --text-secondary: #c9cdd1; --text-muted: #a7acb1; --accent-secondary: var(--brass-500); --accent-secondary-light: var(--brass-300); --border-subtle: rgba(201, 163, 107, 0.16); --border-strong: rgba(201, 163, 107, 0.34); color: var(--text-primary); } .section-dark-image-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .section-dark-image-media img { width: 100%; height: 100%; object-fit: cover; /* Slow ken-burns drift so the photo backdrop breathes instead of sitting frozen behind the content. */ animation: kenBurns 26s var(--ease-in-out) infinite alternate; will-change: transform; } @keyframes kenBurns { from { transform: scale(1) translateX(0); } to { transform: scale(1.08) translateX(-1.5%); } } @media (prefers-reduced-motion: reduce) { .section-dark-image-media img { animation: none; } } .section-dark-image-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 7, 6, 0.74) 0%, rgba(8, 7, 6, 0.6) 45%, rgba(8, 7, 6, 0.86) 100%); } .section-dark-image > .container { position: relative; z-index: 1; } .section-dark-image .section-head .eyebrow, .section-dark-image .section-head h2, .section-dark-image .section-head .lede { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); } /* Dark ambient stage — no photo, just light. Two soft glows (brass upper- left, oxblood lower-right) plus a faint route-map dot grid, so the glass form card in front of it reads like it's floating in atmosphere rather than sitting on a flat panel. */ .booking-stage { position: relative; overflow: hidden; --bg-elevated: var(--slate-900); --bg-secondary: var(--slate-950); --text-primary: var(--ink); --text-secondary: #c9cdd1; --text-muted: #a7acb1; --accent-secondary: var(--brass-500); --accent-secondary-light: var(--brass-300); --border-subtle: rgba(201, 163, 107, 0.16); --border-strong: rgba(201, 163, 107, 0.34); background: var(--black); color: var(--text-primary); } .booking-stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(52% 44% at 12% 6%, rgba(215, 172, 110, 0.16), transparent 62%), radial-gradient(46% 40% at 92% 88%, rgba(110, 31, 35, 0.22), transparent 64%); pointer-events: none; } .booking-stage::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(201, 163, 107, 0.5) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.1; mask-image: radial-gradient(65% 55% at 50% 32%, black, transparent 88%); -webkit-mask-image: radial-gradient(65% 55% at 50% 32%, black, transparent 88%); pointer-events: none; } .booking-stage > .container-narrow { position: relative; z-index: 1; } @media (max-width: 768px) { .container { padding-inline: var(--space-5); } .section-pad { padding-block: var(--space-8); } } .grid { display: grid; gap: var(--space-6); } .flex-between { display: flex; align-items: center; justify-content: space-between; } /* --------------------------------------------------------------------- 4. Typography --------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-secondary); margin-bottom: var(--space-4); } .eyebrow::before { content: ''; width: 32px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); transform-origin: left; } /* Dash draws in once its reveal container becomes visible */ [data-reveal] .eyebrow::before { transform: scaleX(0); transition: transform 700ms var(--ease-out) 250ms; } [data-reveal].is-visible .eyebrow::before { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { [data-reveal] .eyebrow::before { transform: scaleX(1); transition: none; } } h1, .h1 { font-size: clamp(2.5rem, 5vw + 1rem, var(--fs-5xl)); } h2, .h2 { font-size: clamp(2rem, 3.4vw + 1rem, var(--fs-3xl)); } h3, .h3 { font-size: clamp(1.4rem, 1.6vw + 1rem, var(--fs-2xl)); } h4, .h4 { font-size: var(--fs-lg); } .lede { font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.7; max-width: 640px; } .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .section-head { max-width: 640px; margin-bottom: var(--space-8); } .section-head.center { max-width: 680px; margin-inline: auto; text-align: center; } .section-head.center .eyebrow::before { display: none; } .section-head.center .eyebrow { justify-content: center; } /* --------------------------------------------------------------------- 5. Buttons --------------------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 1rem 2.1rem; min-height: 52px; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 10px; border: 1px solid transparent; transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); white-space: nowrap; touch-action: manipulation; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(110, 31, 35, 0.32), 0 0 18px rgba(201, 163, 107, 0.3); } /* Primary CTA: a glossy, convex "keycap" — light-catching gradient, an inset top highlight for the glass dome, a flat lower edge for physical depth, and a soft ambient glow that lifts on hover. */ .btn-primary { background: linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 55%), linear-gradient(160deg, var(--oxblood-300), var(--oxblood-600)); color: var(--ink); border-color: rgba(201, 163, 107, 0.45); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 8px rgba(0, 0, 0, 0.2), 0 2px 0 rgba(58, 12, 14, 0.5), 0 14px 30px rgba(58, 12, 14, 0.35), 0 0 0 1px rgba(201, 163, 107, 0.16); } .btn-primary:hover { border-color: rgba(201, 163, 107, 0.75); filter: brightness(1.06); transform: translateY(-3px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 8px rgba(0, 0, 0, 0.18), 0 4px 0 rgba(58, 12, 14, 0.55), 0 22px 42px rgba(58, 12, 14, 0.42), 0 0 26px rgba(201, 163, 107, 0.28), 0 0 0 1px rgba(201, 163, 107, 0.4); } .btn-primary:active { transform: translateY(-1px) scale(0.98); filter: brightness(0.98); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 6px rgba(0, 0, 0, 0.24), 0 1px 0 rgba(58, 12, 14, 0.5), 0 8px 18px rgba(58, 12, 14, 0.3); } /* Secondary CTA: real frosted glass — translucent layered gradient, backdrop blur, and a rim highlight, so it reads as a pane rather than a flat bordered box on any surface (dark or light section). */ .btn-outline { background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)); border-color: rgba(201, 163, 107, 0.4); color: var(--text-primary); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 18px rgba(0, 0, 0, 0.16); } .btn-outline:hover { border-color: var(--accent-secondary); background: linear-gradient(160deg, rgba(201, 163, 107, 0.2), rgba(201, 163, 107, 0.05)); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 30px rgba(0, 0, 0, 0.2), 0 0 24px rgba(201, 163, 107, 0.22); } .btn-outline:active { transform: translateY(-1px) scale(0.98); background: rgba(201, 163, 107, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.16); } .btn-ghost { /* Same treatment as the card "Read More" links (.card-cta) — brass accent, bold, tracked uppercase — so it reads as a clear CTA against any section instead of blending into body copy. The accent token itself is repinned per section (light/dark), so this always has real contrast without needing a --ink/--text-primary swap. */ display: inline-flex; align-items: center; gap: var(--space-2); color: var(--accent-secondary); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.1em; text-transform: uppercase; padding-inline: var(--space-2); min-height: auto; } .btn-ghost:hover { color: var(--accent-secondary-light); text-shadow: 0 0 12px rgba(201, 163, 107, 0.45); } .btn-ghost:active { transform: scale(0.96); transition-duration: 100ms; } .btn-ghost::after { content: '\2192'; transition: transform var(--dur-base) var(--ease-out); display: inline-block; } .btn-ghost:hover::after { transform: translateX(6px); } .btn-block { width: 100%; } @media (prefers-reduced-motion: reduce) { .btn-primary:active, .btn-outline:active, .btn-ghost:active, .btn-primary:hover, .btn-outline:hover { transform: none; } } /* --------------------------------------------------------------------- 6. Navigation --------------------------------------------------------------------- */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 1000; display: flex; flex-direction: column; border: 1px solid transparent; border-radius: 0; transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out), inset-inline var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); background: linear-gradient(to bottom, rgba(12,8,8,0.75), transparent); } .site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 163, 107, 0.4) 50%, transparent); opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); } .site-header.is-scrolled::after { opacity: 1; } /* Scrolled: the header detaches into a floating glass capsule. Unlike the site's other backdrop-filter uses (which only cost a frame while their own section is in view), this one is fixed-position and stays on screen for literally every scroll frame of every page — so its blur radius matters far more to overall scroll smoothness than any other blur on the site. Backed off from 22px to 12px and the background made a touch more opaque to compensate for the thinner blur, since a fixed capsule this size doesn't need a heavy blur to read as glass. */ .site-header.is-scrolled { top: 10px; inset-inline: max(14px, calc((100% - 1320px) / 2)); border-radius: var(--radius-lg); border-color: rgba(245, 242, 236, 0.08); background: rgba(8, 8, 10, 0.82); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); overflow: hidden; } /* The call button's own blur was stacking on top of the header's already-blurred, already-opaque backdrop — a second, redundant backdrop-filter pass on every scroll frame for no visible gain. */ .site-header .nav-call-btn.glass-btn { backdrop-filter: none; -webkit-backdrop-filter: none; } .site-header.is-scrolled .nav-row { height: 76px; } .site-header.is-scrolled .brand-logo { height: 58px; } @media (max-width: 560px) { .site-header.is-scrolled .brand-logo { height: 48px; } } .nav-row { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 98px; transition: height var(--dur-base) var(--ease-out); } .brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-heading); } .brand-logo { height: 78px; width: auto; display: block; transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out); } .brand:hover .brand-logo { transform: scale(1.05); filter: drop-shadow(0 0 14px rgba(201, 163, 107, 0.45)); } .brand:active .brand-logo { transform: scale(0.98); transition-duration: 100ms; } .footer-brand .brand-logo { height: 72px; } @media (prefers-reduced-motion: reduce) { .brand-logo { transition: filter var(--dur-base) var(--ease-out); } .brand:hover .brand-logo { transform: none; } } /* Modern pill navigation */ .nav-links { display: flex; align-items: center; gap: var(--space-2); } .nav-links a { font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); padding: 0.5rem 0.95rem; border-radius: var(--radius-full); white-space: nowrap; transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .nav-links a:hover { color: var(--text-primary); background: rgba(245, 242, 236, 0.06); } .nav-links a.active { color: var(--accent-secondary-light); background: rgba(245, 242, 236, 0.06); box-shadow: inset 0 0 0 1px rgba(201, 163, 107, 0.28); } .nav-row { min-width: 0; } .brand { min-width: 0; } .nav-cta { display: flex; align-items: center; gap: var(--space-5); flex-shrink: 0; } /* One-tap call icon, always in the header. */ .nav-call-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-full); color: var(--text-primary); } .nav-call-btn:hover { color: var(--accent-secondary); } .nav-cta .btn-primary, .mobile-menu .btn-primary { border: 1px solid rgba(201, 163, 107, 0.4); } .nav-cta .btn-primary:hover, .mobile-menu .btn-primary:hover { border-color: rgba(201, 163, 107, 0.6); } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-shrink: 0; } .nav-toggle-bars { position: relative; width: 22px; height: 16px; } .nav-toggle-bars span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), top var(--dur-base) var(--ease-out); } .nav-toggle-bars span:nth-child(1) { top: 0; } .nav-toggle-bars span:nth-child(2) { top: 7px; } .nav-toggle-bars span:nth-child(3) { top: 14px; } .nav-toggle.is-open .nav-toggle-bars span:nth-child(1) { top: 7px; transform: rotate(45deg); } .nav-toggle.is-open .nav-toggle-bars span:nth-child(2) { opacity: 0; } .nav-toggle.is-open .nav-toggle-bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); } /* Tighten the nav progressively so it keeps fitting horizontally instead of jumping straight to the mobile menu */ @media (max-width: 1150px) { .nav-links { gap: var(--space-1); } } @media (max-width: 980px) { .nav-links { gap: 2px; } .nav-links a { font-size: 0.8125rem; padding: 0.45rem 0.75rem; } .btn.btn-primary { padding: 0.85rem 1.4rem; font-size: 0.7rem; } .brand-logo { height: 64px; } .nav-cta { gap: var(--space-3); } .nav-call-btn { width: 36px; height: 36px; } } @media (max-width: 820px) { .nav-links { gap: 0; } .nav-links a { padding: 0.45rem 0.6rem; } } @media (max-width: 760px) { .nav-links { display: none; } .nav-cta .btn-primary { display: none; } .nav-toggle { display: flex; } } @media (max-width: 560px) { .nav-cta { gap: var(--space-3); } .brand-logo { height: 52px; } } .nav-drawer-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .nav-drawer-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-out), visibility 0s; } .mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 78vw); z-index: 999; background: rgba(10, 9, 8, 0.98); backdrop-filter: blur(20px); border-left: 1px solid var(--border-subtle); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-5); padding: calc(var(--nav-h) + var(--space-2)) var(--space-6) var(--space-6); transform: translateX(100%); visibility: hidden; box-shadow: -16px 0 48px rgba(0, 0, 0, 0.45); transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .mobile-menu.is-open { transform: translateX(0); visibility: visible; transition: transform var(--dur-base) var(--ease-out), visibility 0s; } .mobile-menu a { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-xl); color: var(--text-primary); } .mobile-menu a.active { color: var(--accent); } .mobile-menu .btn { margin-top: var(--space-4); font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.1em; } .mobile-menu .btn + .btn { margin-top: var(--space-3); } /* --------------------------------------------------------------------- 7. Hero --------------------------------------------------------------------- */ .hero { position: relative; /* Capped rather than a hard 100dvh: on tall monitors an uncapped hero stretches with dead space and reads as a wall you have to scroll through before the site "starts". */ min-height: min(100dvh, 960px); display: flex; align-items: center; overflow: hidden; background: var(--black); } /* On small screens the quote form stacks tall, so a forced 100dvh floor plus vertical centering either adds dead space or oversizes the hero — both make it feel like you're "stuck" scrolling through it. Let the hero size to its own content and flow straight into the next section. */ @media (max-width: 900px) { .hero { min-height: auto; align-items: flex-start; } .hero-content { padding-block: calc(var(--nav-h) + var(--space-4)) var(--space-7); } } .hero-media { position: absolute; inset: 0; z-index: 0; } .hero-media img { width: 100%; height: 100%; object-fit: cover; /* Extra punch + a slow ken-burns drift so inner-page hero photos read vivid and alive rather than a flat, muted backdrop. */ filter: saturate(1.2) contrast(1.06); animation: kenBurns 30s var(--ease-in-out) infinite alternate; will-change: transform; } @media (prefers-reduced-motion: reduce) { .hero-media img { animation: none; } } .hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,8,8,0.55) 0%, rgba(12,8,8,0.35) 40%, rgba(12,8,8,0.92) 100%), linear-gradient(90deg, rgba(12,8,8,0.85) 0%, rgba(12,8,8,0.2) 55%); } .hero-content { position: relative; z-index: 1; padding-block: calc(var(--nav-h) + var(--space-6)) var(--space-8); } .hero-content h1 { margin-block: var(--space-4); max-width: 820px; } .hero-content .lede { font-size: var(--fs-md); max-width: 560px; margin-bottom: var(--space-6); } /* Phones: rein the display type in — a 40px headline wrapping to four lines plus a six-line lede towers over a small screen. Slightly smaller sizes read more composed and cut real scroll distance. */ @media (max-width: 640px) { .hero-content h1 { font-size: 2.25rem; } .hero-content .lede { font-size: var(--fs-base); margin-bottom: var(--space-5); } } .hero-scroll { position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); color: var(--text-muted); font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; z-index: 1; } .hero-scroll .line { width: 1px; height: 36px; background: linear-gradient(180deg, var(--accent), transparent); animation: scrollpulse 2.2s var(--ease-in-out) infinite; } @keyframes scrollpulse { 0%, 100% { transform: scaleY(1); opacity: 0.4; } 50% { transform: scaleY(1.3); opacity: 1; } } @media (max-width: 640px), (max-height: 700px) { .hero-scroll { display: none; } } /* --------------------------------------------------------------------- 7b. Hero quote widget — "the route ticket". Styled like a first-class reservation stub: crop-mark corners, editorial underline fields, a drawn route glyph between pickup and drop-off, and a perforation line separating the route from the action stub. --------------------------------------------------------------------- */ .quote-widget { position: relative; isolation: isolate; /* True glass pane: a diagonal light-catch + a top-left specular bloom and a second, quieter bloom bottom-right, layered over a thin dark scrim, so the hero photo actively swims through the blur instead of being hidden behind a card. */ background: radial-gradient(120% 90% at 12% -10%, rgba(255,255,255,0.26), transparent 55%), radial-gradient(90% 70% at 100% 115%, rgba(201,163,107,0.14), transparent 60%), linear-gradient(135deg, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0.03) 35%, rgba(255,255,255,0.06) 100%), linear-gradient(200deg, rgba(32,24,17,0.4), rgba(9,8,7,0.5)); border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 26px; padding: var(--space-7); /* blur(36) saturate(220) looked identical but cost roughly twice as much per scrolled frame — this pane sits over the hero photo, so its backdrop re-filters on every frame of scroll. */ backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); max-width: 820px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(201, 163, 107, 0.16), inset 0 -20px 40px -30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(201, 163, 107, 0.12); } /* A soft sheen drifting across the glass, like light moving over a pane */ .quote-widget::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; /* Static light-catch. This used to drift via an infinite background-position animation, but animating background-position repaints the whole pane every frame — stacked on the backdrop blur it kept the GPU busy nonstop and made scrolling stutter over this section, which reads as the page "sticking". */ background: linear-gradient(115deg, transparent 15%, rgba(255,255,255,0.16) 42%, transparent 68%); background-size: 220% 220%; background-position: 30% 0%; pointer-events: none; } /* Crop-mark corners, like a printed ticket proof — etched into the glass */ .quote-widget .wt-corner { display: block; position: absolute; width: 20px; height: 20px; pointer-events: none; border-style: solid; border-color: rgba(255, 255, 255, 0.5); } .quote-widget .wt-corner.tl { top: 9px; left: 9px; border-width: 1px 0 0 1px; } .quote-widget .wt-corner.br { bottom: 9px; right: 9px; border-width: 0 1px 1px 0; } .widget-ticket-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); } .wt-kicker { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent-secondary); } .wt-kicker::after { content: '\25C6'; font-size: 5px; vertical-align: 3px; margin-left: var(--space-3); opacity: 0.7; } /* Frosted-glass call buttons: translucent, blurred, with an inner rim highlight so they read clearly against photo backgrounds while still feeling light and premium rather than a solid block. */ .glass-btn { background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)); backdrop-filter: blur(16px) saturate(200%); -webkit-backdrop-filter: blur(16px) saturate(200%); border: 1px solid rgba(255, 255, 255, 0.26); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1.5px 0 rgba(255, 255, 255, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.04); transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .glass-btn:hover { background: linear-gradient(160deg, rgba(201, 163, 107, 0.24), rgba(201, 163, 107, 0.06)); border-color: rgba(201, 163, 107, 0.55); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1.5px 0 rgba(255, 255, 255, 0.3), 0 0 22px rgba(201, 163, 107, 0.25); } .glass-btn:active { transform: translateY(0) scale(0.96); } @media (prefers-reduced-motion: reduce) { .glass-btn:hover { transform: none; } } /* Mobile perf + ergonomics: lighter blur radii (backdrop-filter is re-composited every scrolled frame on phone GPUs — the biggest single render cost on the page) and a full 44px touch target for the header call button per platform tap-size guidelines. */ @media (max-width: 760px) { .glass-btn { backdrop-filter: blur(8px) saturate(160%); -webkit-backdrop-filter: blur(8px) saturate(160%); background: rgba(255, 255, 255, 0.1); } .site-header.is-scrolled { backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); background: rgba(8, 8, 10, 0.88); } .mobile-menu { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .nav-call-btn { width: 44px; height: 44px; } } .wt-call-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.5rem 0.9rem; border-radius: var(--radius-full); color: var(--ink); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; } .wt-call-btn svg { color: var(--accent-secondary); flex-shrink: 0; } .wt-call-short { display: none; } @media (max-width: 560px) { .wt-call-full { display: none; } .wt-call-short { display: inline; } .wt-call-btn { padding: 0.45rem 0.75rem; } } /* Segmented tabs: quiet text with a brass underline that slides in */ .widget-tabs { display: flex; gap: var(--space-6); margin-bottom: var(--space-5); border-bottom: 1px solid rgba(201, 163, 107, 0.16); } .widget-tab { position: relative; padding: 0 2px 0.75rem; background: none; border: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); transition: color var(--dur-base) var(--ease-out); } .widget-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--brass-300), var(--brass-600)); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease-out); } .widget-tab:hover { color: var(--text-secondary); } .widget-tab.is-active { color: var(--ink); } .widget-tab.is-active::after { transform: scaleX(1); } .widget-panel { display: none; } .widget-panel.is-active { display: block; animation: fadeIn var(--dur-base) var(--ease-out); } /* Editorial underline fields — no boxes, just a baseline that lights up */ .quote-widget .field { margin-bottom: 0; } .quote-widget .field label { font-size: 0.625rem; letter-spacing: 0.22em; color: var(--accent-secondary); margin-bottom: var(--space-1); } .quote-widget .input { background-color: transparent; border: none; border-bottom: 1px solid rgba(201, 163, 107, 0.28); border-radius: 0; min-height: 44px; padding: 0.4rem 2px; box-shadow: none; } .quote-widget .input:hover { border-bottom-color: rgba(201, 163, 107, 0.5); box-shadow: none; } .quote-widget .input:focus { border-bottom-color: var(--brass-300); box-shadow: 0 1px 0 0 var(--brass-300); } .quote-widget select.input { background-position: right 2px center; padding-right: 1.6rem; } .quote-widget input[type="date"]::-webkit-calendar-picker-indicator, .quote-widget input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.75) sepia(0.4) saturate(2.2) hue-rotate(-15deg); opacity: 0.75; cursor: pointer; } /* Route row: pickup ◆———◆ drop-off, dashes marching along the route */ .route-row { display: grid; grid-template-columns: 1fr 76px 1fr; gap: var(--space-5); align-items: end; } .route-glyph { display: flex; align-items: center; gap: 6px; padding-bottom: 16px; } .rg-dot { width: 7px; height: 7px; flex-shrink: 0; transform: rotate(45deg); background: var(--brass-500); box-shadow: 0 0 8px rgba(201, 163, 107, 0.5); } .rg-path { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(201, 163, 107, 0.65) 0 6px, transparent 6px 12px); animation: routeMarch 1.6s linear infinite; } .rg-loop { width: 11px; height: 11px; flex-shrink: 0; border: 1.5px solid var(--brass-500); border-radius: var(--radius-full); border-bottom-color: transparent; transform: rotate(45deg); } @keyframes routeMarch { from { background-position-x: 0; } to { background-position-x: -12px; } } @media (prefers-reduced-motion: reduce) { .rg-path { animation: none; } } /* Ticket perforation between the route and the action stub */ .widget-perf { position: relative; height: 1px; margin-block: var(--space-5); background: repeating-linear-gradient(90deg, rgba(201, 163, 107, 0.28) 0 8px, transparent 8px 16px); } .widget-perf::before, .widget-perf::after { content: '\25C6'; position: absolute; top: 50%; transform: translateY(-50%); font-size: 6px; color: var(--accent-secondary); opacity: 0.7; } .widget-perf::before { left: 0; } .widget-perf::after { right: 0; } .widget-meta { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: var(--space-5); align-items: end; } .widget-submit { width: 100%; } .widget-call-note { text-align: center; margin-top: var(--space-5); font-size: var(--fs-xs); color: var(--text-muted); } .widget-call-note a { color: var(--accent-secondary); font-weight: 600; } .widget-call-note a:hover { color: var(--accent-secondary-light); } @media (max-width: 860px) { .route-row { grid-template-columns: 1fr; gap: var(--space-4); } /* connector turns vertical between stacked fields — enough air that Pickup and Drop-off read as two distinct fields, not a jammed pair */ .route-row { row-gap: var(--space-2); } .route-glyph { flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 16px; height: 34px; padding: 0; } .rg-dot { flex-shrink: 0; } .rg-path { width: 1px; min-height: 10px; flex: 1; background: repeating-linear-gradient(180deg, rgba(201, 163, 107, 0.65) 0 5px, transparent 5px 10px); animation: none; } .widget-meta { grid-template-columns: 1fr 1fr; } .widget-submit { grid-column: span 2; } } @media (max-width: 520px) { .quote-widget { padding: var(--space-5); } .widget-meta { grid-template-columns: 1fr 1fr; } } /* Lighter blur on small screens (cheaper to composite) — still glass, just backed by a slightly deeper scrim so text stays crisp over a busier part of the photo. */ @media (max-width: 760px) { .quote-widget { border-radius: 20px; backdrop-filter: blur(16px) saturate(200%); -webkit-backdrop-filter: blur(16px) saturate(200%); background: radial-gradient(120% 90% at 12% -10%, rgba(255,255,255,0.18), transparent 55%), linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0.05) 100%), linear-gradient(200deg, rgba(28,21,15,0.55), rgba(8,7,6,0.66)); } .quote-widget::after { animation: none; background-position: 25% 0%; } /* Keep the stacked widget short on phones: the ticket head already has a Call button, so the duplicate call note goes; inputs drop to 46px (still above the 44px touch floor). Every saved pixel here is scroll distance the visitor doesn't have to swipe through. */ .widget-call-note { display: none; } .quote-widget .input { min-height: 46px; } .widget-ticket-head { margin-bottom: var(--space-4); } } /* Hero entrance: orchestrated stagger once the page loader lifts. Timed sequence instead of data-reveal so each element rises on its own beat rather than all firing at once. */ .hero .hero-content .eyebrow, .hero .hero-content h1, .hero .hero-content .lede, .hero .hero-content .quote-widget { opacity: 0; animation: heroRise 850ms var(--ease-out) forwards; } .hero .hero-content .eyebrow { animation-delay: 300ms; } .hero .hero-content h1 { animation-delay: 430ms; } .hero .hero-content .lede { animation-delay: 560ms; } .hero .hero-content .quote-widget { animation-delay: 700ms; } @keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero .hero-content .eyebrow, .hero .hero-content h1, .hero .hero-content .lede, .hero .hero-content .quote-widget { animation: none; opacity: 1; } } /* Compact page hero (non-home pages) */ .page-hero { position: relative; min-height: 52vh; display: flex; align-items: flex-end; padding-top: var(--nav-h); padding-bottom: var(--space-8); overflow: hidden; } .page-hero > .container { position: relative; z-index: 1; } .page-hero .hero-media::after { /* Still deepens toward the bottom where the lede sits, but no longer assumes the photo itself is dark up top — measured contrast behind the headline dropped as low as 2.8:1 (fails WCAG AA's 4.5:1) on a bright sky photo before this was strengthened. The text-shadow below on h1/.lede is the real guarantee, independent of whatever photo ends up here; this gradient just keeps the image from fighting it too. */ background: linear-gradient(180deg, rgba(12,8,8,0.45) 0%, rgba(12,8,8,0.5) 45%, rgba(12,8,8,0.94) 100%); } .page-hero h1, .page-hero .lede, .page-hero .eyebrow, .page-hero .breadcrumb { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5); } .breadcrumb { display: flex; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-4); } .breadcrumb a:hover { color: var(--accent); } /* --------------------------------------------------------------------- 8. Cards --------------------------------------------------------------------- */ .card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); } .card-tag { display: inline-block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-secondary); margin-bottom: var(--space-3); } .icon-card { padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-elevated); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .icon-card:hover { transform: translateY(-6px); border-color: var(--border-strong); } .icon-badge { width: 64px; height: 64px; display: grid; place-items: center; border-radius: var(--radius-full); background: linear-gradient(150deg, rgba(201,163,107,0.22), rgba(201,163,107,0.05)); border: 1px solid rgba(201,163,107,0.28); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 16px rgba(201,163,107,0.12); color: var(--accent-secondary); margin-bottom: var(--space-5); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .icon-badge svg { width: 26px; height: 26px; } .icon-card:hover .icon-badge { transform: translateY(-2px); border-color: rgba(201,163,107,0.45); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 22px rgba(201,163,107,0.2); } @media (prefers-reduced-motion: reduce) { .icon-badge { transition: none; } } /* --------------------------------------------------------------------- 9. Forms --------------------------------------------------------------------- */ .field { margin-bottom: var(--space-5); } .field label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-3); } .field .required { color: var(--accent); } .field .hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-2); } .field .error-msg { font-size: var(--fs-xs); color: #e08585; margin-top: var(--space-2); display: none; } .form-send-error { font-size: var(--fs-sm); color: #e08585; margin-top: var(--space-5); padding: var(--space-4); border: 1px solid rgba(224, 133, 133, 0.3); border-radius: var(--radius-sm); background: rgba(224, 133, 133, 0.06); } .field.has-error .error-msg { display: block; } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #e08585; } .input, select.input, textarea.input { width: 100%; min-height: 52px; padding: 0.9rem 1.1rem; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--fs-base); box-shadow: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } @media (max-width: 640px) { .input, select.input, textarea.input { font-size: max(16px, var(--fs-base)); } } textarea.input { min-height: 140px; resize: vertical; } .input::placeholder { color: var(--text-muted); } .input:hover, select.input:hover, textarea.input:hover { border-color: var(--border-strong); } .input:focus, select.input:focus, textarea.input:focus { outline: none; border-color: var(--accent-secondary); box-shadow: 0 0 0 3px rgba(201, 163, 107, 0.16); } select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9a36b' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.1rem center; padding-right: 2.5rem; } .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } @media (max-width: 640px) { .row-2 { grid-template-columns: 1fr; } } .radio-card-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); } .radio-card { position: relative; border-radius: 14px; } .radio-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; z-index: 2; } /* Glass selection tile — same layered-gradient + backdrop-blur language as the hero widget, and wired into the site's pointer-tilt system (js/main.js) so it tips toward the cursor like the fleet/service cards. */ .radio-card .radio-card-face { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-3); background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.01)); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; text-align: center; font-size: var(--fs-sm); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .radio-card .radio-card-face:hover { border-color: var(--border-strong); transform: translateY(-2px); } .radio-card .radio-card-face::before { content: ''; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: var(--radius-full); border: 1px solid var(--slate-600); background: var(--bg-secondary); transition: all var(--dur-base) var(--ease-out); } .radio-card input:checked + .radio-card-face { border-color: var(--accent); background: linear-gradient(160deg, rgba(201,90,90,0.24), rgba(110,31,35,0.2)); color: var(--accent-light); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--accent), 0 8px 22px rgba(110,31,35,0.28), 0 0 20px rgba(201,163,107,0.1), inset 0 1px 0 rgba(255,255,255,0.14); } .radio-card input:checked + .radio-card-face::before { content: '\2713'; background: var(--accent); border-color: var(--accent); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; } .radio-card input:focus-visible + .radio-card-face { box-shadow: 0 0 0 3px rgba(110,31,35,0.28); } /* Vehicle picker: photo cards instead of plain text pills, reusing the same fleet photography shown on the Fleet page. */ .vehicle-radio-group { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); } .vehicle-radio-card .radio-card-face { flex-direction: column; align-items: stretch; padding: 0; gap: 0; overflow: hidden; text-align: left; } .vehicle-radio-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--slate-800); } .vehicle-radio-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .vehicle-radio-card:hover .vehicle-radio-photo img { transform: scale(1.06); } .vehicle-radio-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, var(--slate-800), var(--slate-900)); color: var(--accent-secondary); } .vehicle-radio-info { padding: var(--space-4) var(--space-4) var(--space-5); } .vehicle-radio-info strong { display: block; font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 600; margin-bottom: 2px; } .vehicle-radio-info em { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); } .vehicle-radio-card input:checked + .radio-card-face .vehicle-radio-info strong, .vehicle-radio-card input:checked + .radio-card-face .vehicle-radio-info em { color: var(--accent-light); } .vehicle-radio-card .radio-card-face::before { top: 10px; right: 10px; background: rgba(10, 9, 8, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-color: rgba(255, 255, 255, 0.4); z-index: 1; } /* Field grouping — small brass eyebrow + hairline to chunk a long step into scannable clusters instead of one flat list of fields. */ .form-group-label { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-secondary); margin-bottom: var(--space-4); } .form-group-label::after { content: ''; flex: 1; height: 1px; background: var(--border-subtle); } .field-group { margin-bottom: var(--space-7); } .field-group:last-of-type { margin-bottom: 0; } .field-narrow { max-width: 220px; } @media (max-width: 640px) { .field-narrow { max-width: none; } } .waypoint-row { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-5); } .waypoint-row .field { flex: 1; margin-bottom: 0; } .waypoint-remove-btn { flex-shrink: 0; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .waypoint-remove-btn:hover { color: #e08585; border-color: #e08585; } .add-stop-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-secondary); padding: var(--space-2) 0; transition: color var(--dur-base) var(--ease-out); } .add-stop-btn:hover { color: var(--accent); } .field-conditional { display: none; } .field-conditional.is-visible { display: block; animation: fieldConditionalIn .3s var(--ease-out); } @keyframes fieldConditionalIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .field-conditional.is-visible { animation: none; } } /* Multi-step form */ .form-steps-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-6); margin-bottom: var(--space-7); border-bottom: 1px solid var(--border-subtle); } .form-steps { display: flex; align-items: center; gap: var(--space-3); flex: 1; } .form-step-dot { display: flex; align-items: center; gap: var(--space-3); flex: 1; } .form-step-dot .num { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-full); background: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--slate-600); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); transition: all var(--dur-base) var(--ease-out); } .form-step-dot .label { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; display: none; transition: color var(--dur-base) var(--ease-out); } .form-step-dot .track { flex: 1; height: 2px; border-radius: 2px; background: var(--border-subtle); position: relative; overflow: hidden; } .form-step-dot .track::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 550ms var(--ease-out); } .form-step-dot:last-child .track { display: none; } .form-step-dot.is-active .num, .form-step-dot.is-done .num { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px rgba(110,31,35,0.16), 0 4px 14px rgba(0,0,0,0.35); } .form-step-dot.is-active .label { color: var(--text-primary); } .form-step-dot.is-done .num { background: linear-gradient(160deg, var(--oxblood-300), var(--accent)); color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,0.35); } .form-step-dot.is-done .track::after { transform: scaleX(1); } @media (min-width: 640px) { .form-step-dot .label { display: block; } } .form-panel { display: none; } .form-panel.is-active { display: block; animation: fadeIn var(--dur-base) var(--ease-out); } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .form-nav { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); } .checkbox-field { display: flex; align-items: flex-start; gap: var(--space-3); } .checkbox-field input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; } .checkbox-field label { font-size: var(--fs-sm); color: var(--text-secondary); text-transform: none; letter-spacing: normal; font-weight: 400; } .form-success { display: none; text-align: center; padding: var(--space-9) var(--space-6); } .form-success .icon-badge { margin-inline: auto; width: 76px; height: 76px; margin-bottom: var(--space-6); } .form-success.is-visible { display: block; } .confirmation-badge { display: inline-block; border: 1px solid rgba(201,163,107,0.3); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); background: linear-gradient(150deg, rgba(201,163,107,0.1), rgba(201,163,107,0.02)); } .confirmation-badge-label { margin: 0; font-size: var(--fs-xs); letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); } .confirmation-badge-value { margin: 4px 0 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.5px; color: var(--accent-secondary); } /* --------------------------------------------------------------------- 10. Misc components --------------------------------------------------------------------- */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } .stat { position: relative; text-align: center; min-width: 0; padding: var(--space-5) var(--space-3); border-radius: var(--radius-lg); transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .stat:hover { transform: translateY(-5px); background: rgba(201, 163, 107, 0.07); box-shadow: 0 18px 34px rgba(28, 23, 18, 0.1); } .stat:not(:last-child)::after { content: ''; position: absolute; top: 22%; bottom: 22%; right: calc(var(--space-5) / -2); width: 1px; background: linear-gradient(180deg, transparent, var(--border-subtle), transparent); } /* Icon badge — same soft brass-circle motif used for .icon-badge elsewhere on the site, sized down to fit a compact stat row. */ .stat-icon-badge { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto var(--space-3); border-radius: var(--radius-full); background: linear-gradient(135deg, rgba(201, 163, 107, 0.18), rgba(201, 163, 107, 0.04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(201, 163, 107, 0.14); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); } .stat-icon { display: block; width: 18px; height: 18px; color: var(--accent-secondary); opacity: 0.9; transition: opacity var(--dur-base) var(--ease-out); } .stat:hover .stat-icon-badge { transform: scale(1.08) translateY(-2px); background: linear-gradient(135deg, rgba(201, 163, 107, 0.28), rgba(201, 163, 107, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(201, 163, 107, 0.3), 0 10px 22px rgba(201, 163, 107, 0.2); } .stat:hover .stat-icon { opacity: 1; } .stat-icon-badge.is-counted { animation: stat-badge-glow 700ms var(--ease-out); } @keyframes stat-badge-glow { 0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(201, 163, 107, 0.14), 0 0 0 rgba(201, 163, 107, 0); } 40% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(201, 163, 107, 0.32), 0 0 18px rgba(201, 163, 107, 0.4); } 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(201, 163, 107, 0.14), 0 0 0 rgba(201, 163, 107, 0); } } .stat .num { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.3rem, 3.6vw, 1.7rem); white-space: nowrap; display: inline-block; background: linear-gradient(160deg, var(--brass-300), var(--brass-600)); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform 350ms var(--ease-out); } .section-light .stat .num { background: linear-gradient(160deg, var(--brass-600), var(--brass-700)); -webkit-background-clip: text; background-clip: text; } .stat .num.is-counted { animation: stat-pop 550ms var(--ease-out); } .stat .label { font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-1); } @keyframes stat-pop { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .stat .num.is-counted { animation: none; } .stat-icon-badge.is-counted { animation: none; } .stat:hover { transform: none; } .stat:hover .stat-icon-badge { transform: none; } } @media (max-width: 768px) { .stat-row { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; gap: var(--space-6); margin-inline: calc(var(--space-5) * -1); padding-inline: var(--space-5); scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; overscroll-behavior-x: contain; } .stat-row::-webkit-scrollbar { display: none; } .stat { flex: 0 0 42%; scroll-snap-align: center; } .stat:not(:last-child)::after { display: none; } } @media (max-width: 420px) { .stat { flex-basis: 48%; } } .badge { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); background: var(--bg-elevated); font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .badge svg { color: var(--accent-secondary); flex-shrink: 0; } .badge:hover { border-color: var(--border-strong); transform: translateY(-2px); } /* A flat white rectangle reads cheap next to the rest of the site's glass/gradient language — a faint warm gradient, a brass top edge, and a touch more shadow give it the same "considered" quality without needing backdrop-blur (which does nothing over a flat section background anyway). */ .card.testimonial-card { position: relative; padding: var(--space-7); border-radius: var(--radius-lg); background: linear-gradient(155deg, #ffffff 0%, #faf6ee 100%); border-color: rgba(168, 133, 79, 0.22); box-shadow: 0 14px 32px rgba(28, 23, 18, 0.1); overflow: hidden; } .testimonial-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brass-600), var(--brass-300) 45%, var(--brass-600)); } .testimonial-card .stars { color: var(--accent-secondary); letter-spacing: 3px; margin-bottom: var(--space-4); } .testimonial-card p { font-size: var(--fs-md); font-family: var(--font-accent); font-style: italic; color: var(--text-primary); margin-block: var(--space-4); } .testimonial-author { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); } /* Initials instead of a blank circle — same brass-glass treatment as the direct-line icons elsewhere on the site, not a one-off. */ .testimonial-author .avatar { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-full); background: linear-gradient(135deg, rgba(201,163,107,0.18), rgba(201,163,107,0.05)); border: 1px solid var(--border-subtle); color: var(--accent-secondary); font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.02em; overflow: hidden; } .testimonial-author .name { font-weight: 600; font-size: var(--fs-sm); } .testimonial-author .role { font-size: var(--fs-xs); color: var(--text-muted); } @media (max-width: 640px) { /* Smaller, tighter cards on phones: 48px of padding on every side left only ~60% of the screen for the quote itself, and the italic quote at desktop size read oversized stacked one-per-row. */ .testimonial-card { padding: var(--space-5); } .testimonial-card .stars { font-size: 0.8125rem; margin-bottom: var(--space-3); } .testimonial-card p { font-size: var(--fs-sm); margin-block: var(--space-3); } .testimonial-author { margin-top: var(--space-4); } .testimonial-author .avatar { width: 36px; height: 36px; font-size: 0.6875rem; } } /* Card stack: a reusable swipeable-deck component (drag physics live in js/card-stack.js — .is-stacked is toggled by a matchMedia listener, not a hard breakpoint split, so it stays in sync if the window crosses 640px live). Cards read fine side by side once there's room, so desktop just gets a plain static grid — nothing to swipe when nothing is hidden behind the front card. Used by both the reviews and "Why Denver Majestic" sections. */ /* isolation: isolate contains the z-indexed stacked cards inside their own stacking context — without it, a card's explicit z-index escapes .card-stack-cards entirely and can paint over unrelated content further down the page (the "More About Us" button was disappearing under a peeking card before this was added). */ .card-stack-cards { position: relative; isolation: isolate; } .card-stack-cards > * { width: 100%; } .card-stack-cards.is-stacked { height: var(--stack-h, 320px); } /* [data-card-stack] prefix bumps specificity above component-specific rules like .section-dark-image .check-item (which needs its own position: relative for an unrelated ::before accent) — without it this silently loses that specificity tie and cards never leave position: relative, so nothing actually stacks. */ [data-card-stack] .card-stack-cards.is-stacked > * { position: absolute; inset: 0; cursor: grab; /* Only the horizontal component of a drag is ours — a vertical swipe must always be free to scroll the page. */ touch-action: pan-y; transition: transform 420ms var(--ease-out), opacity 420ms var(--ease-out); will-change: transform; } [data-card-stack] .card-stack-cards.is-stacked > .is-dragging { transition: none; cursor: grabbing; } @media (prefers-reduced-motion: reduce) { .card-stack-cards.is-stacked > * { transition-duration: 1ms; } } .card-stack-nav { display: none; align-items: center; justify-content: center; gap: var(--space-5); margin-top: var(--space-7); } .card-stack-dots { display: flex; gap: 8px; } .card-stack-dots span { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--border-strong); transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .card-stack-dots span.is-active { background: var(--accent); transform: scale(1.35); } .card-stack-arrow { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-full); border: 1px solid var(--border-subtle); background: var(--bg-elevated); color: var(--text-primary); transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .card-stack-arrow:hover { border-color: var(--accent-secondary); color: var(--accent-secondary); } .card-stack-arrow:active { transform: scale(0.92); } @media (max-width: 640px) { .card-stack-nav { display: flex; } } /* 3 columns straight from 641px squeezed each card to ~200px on tablet widths — the italic quote had barely enough room per line and wrapped into a ragged, cramped column. Step through 2-up first; only go to 3 once there's actually enough width for a readable line length. */ @media (min-width: 641px) { .reviews-stack .card-stack-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } } @media (min-width: 980px) { .reviews-stack .card-stack-cards { grid-template-columns: repeat(3, 1fr); } } /* "Why Denver Majestic" trust points: a plain grid on tablet/desktop (room enough for all four cards side by side, same glass-card look as before), but a swipeable one-at-a-time stack was overkill for four short facts and ran tall on phones — a scannable manifest-style row list reads faster and takes a fraction of the height. */ .why-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-7); } @media (min-width: 861px) { .why-list { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .why-list { display: flex; flex-direction: column; gap: 0; } /* .section-dark-image prefix bumps specificity above the glass-card rule of the same name declared later in the file — otherwise that later, equal-specificity rule wins the cascade tie and the mobile row reset below never actually takes effect. */ .section-dark-image .why-list .check-item { flex-direction: row; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-radius: 0; background: none; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transform: none !important; } .why-list .check-item:last-child { border-bottom: none; } .section-dark-image .why-list .check-item::before { display: none; } .section-dark-image .why-list .check-item .check-icon { width: 32px; height: 32px; margin-top: 0; box-shadow: 0 0 0 3px rgba(201, 163, 107, 0.14); } .why-list .check-item strong { font-size: var(--fs-sm); } .why-list .check-item p { margin-top: 2px; font-size: var(--fs-xs) !important; line-height: 1.4; } } /* CTA banner */ .cta-banner { /* Always a dark, dramatic island — re-pins the dark palette so it reads correctly even when nested inside a light section. */ --text-primary: var(--ink); --text-secondary: var(--slate-400); --accent-secondary: var(--brass-500); --border-subtle: rgba(201, 163, 107, 0.14); position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: var(--space-9) var(--space-7); text-align: center; background: linear-gradient(135deg, var(--slate-900), var(--black)); border: 1px solid var(--border-subtle); color: var(--text-primary); } .cta-banner::before { content: ''; position: absolute; inset: -40%; background: radial-gradient(circle at 30% 30%, rgba(110,31,35,0.14), transparent 55%), radial-gradient(circle at 75% 70%, rgba(201,163,107,0.07), transparent 50%); pointer-events: none; animation: ctaGlowDrift 16s var(--ease-in-out) infinite alternate; will-change: transform; } @keyframes ctaGlowDrift { from { transform: translate(-4%, -3%) scale(1); } to { transform: translate(4%, 3%) scale(1.12); } } @media (prefers-reduced-motion: reduce) { .cta-banner::before { animation: none; } } .cta-banner > * { position: relative; z-index: 1; } .cta-banner h2 { max-width: 600px; margin-inline: auto; margin-bottom: var(--space-5); } .cta-banner .actions { display: flex; justify-content: center; gap: var(--space-5); flex-wrap: wrap; } /* --------------------------------------------------------------------- 11. Footer --------------------------------------------------------------------- */ .site-footer { position: relative; overflow: hidden; background: var(--slate-950); padding-top: var(--space-9); } /* Mountain range sits fully inside the footer's own box — top: 0, and overflow: hidden above is a hard backstop, so the peaks read as part of the footer floor instead of bleeding into the section above it. The graphic itself is taller than the footer's top padding (96px), so without a fade the lower peaks sit directly behind the brand/nav columns and read as clutter behind the text. A soft mask dissolves the art into the footer floor well above where the content starts, instead of shortening the range and losing the tall, dramatic peaks. */ .footer-skyline { position: absolute; top: 0; left: 0; right: 0; height: 240px; pointer-events: none; z-index: 0; /* Fades in from nothing at the very top (where the footer's background meets the section above — two slightly different dark tones that otherwise read as a hard seam) and back out again toward the footer content below, so the whole band floats in rather than snapping on with a visible edge at either end. */ mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 34%, transparent 78%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 34%, transparent 78%); } .footer-skyline img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; /* Grayscale is baked into the source file itself (not just filtered) so mobile doesn't pay to download color data that's discarded anyway; brightness/contrast stay as a live filter since they cost nothing extra over the wire. Brightened so the range reads clearly as the footer's backdrop rather than a barely-there texture. */ filter: brightness(1.05) contrast(1.1); } /* A handful of twinkling stars in the negative space above the peaks — the same signature touch the illustrated skyline had, now scattered over real sky instead of a drawn one. */ .footer-skyline-stars { position: absolute; inset: 0; width: 100%; height: 100%; } .footer-skyline-stars circle { fill: #ffffff; animation: mtnTwinkle 5s ease-in-out infinite; } .footer-skyline-stars circle:nth-child(2n) { animation-duration: 6.5s; animation-delay: 1.1s; } .footer-skyline-stars circle:nth-child(3n) { animation-duration: 4.2s; animation-delay: 2s; } @keyframes mtnTwinkle { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.2; } } @media (prefers-reduced-motion: reduce) { .footer-skyline-stars circle { animation: none; opacity: 0.6; } } /* The sky is chroma-keyed out of the source photo (transparent WebP), so the footer's own near-black background already shows through where there's no mountain — only a light bottom-edge darkening is needed to dissolve the cutout into the content below; the peaks themselves stay vivid and bright rather than sitting under a heavy tint. */ .footer-skyline::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 24, 26, 0.08) 0%, rgba(22, 24, 26, 0.2) 55%, rgba(22, 24, 26, 0.5) 100%); } @media (max-width: 900px) { .footer-skyline { height: 200px; } } @media (max-width: 640px) { .footer-skyline { height: 160px; } } .site-footer > .container { position: relative; z-index: 1; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-7); padding-bottom: var(--space-8); } .footer-brand p { color: var(--text-muted); margin-block: var(--space-5); max-width: 320px; font-size: var(--fs-sm); } .footer-col h2 { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-secondary); margin-bottom: var(--space-5); } .footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); } .footer-col a { color: var(--text-muted); font-size: var(--fs-sm); transition: color var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out); } .footer-contact li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--text-muted); font-size: var(--fs-sm); } .footer-contact svg { color: var(--accent-secondary); flex-shrink: 0; margin-top: 2px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding-block: var(--space-6); border-top: 1px solid var(--border-subtle); font-size: var(--fs-xs); color: var(--text-muted); } .footer-bottom-links { display: flex; gap: var(--space-6); } .footer-bottom-links a:hover { color: var(--accent); } @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } } /* --------------------------------------------------------------------- 12. Grid layouts (per-page reused) --------------------------------------------------------------------- */ .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------- 13. Scroll reveal animation engine --------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } [data-reveal="fade"] { transform: none; } [data-reveal="left"] { transform: translateX(-32px); } [data-reveal="left"].is-visible { transform: translateX(0); } [data-reveal="right"] { transform: translateX(32px); } [data-reveal="right"].is-visible { transform: translateX(0); } [data-reveal="scale"] { transform: scale(0.94); } [data-reveal="scale"].is-visible { transform: scale(1); } [data-reveal-group] > * { opacity: 0; transform: translateY(24px) scale(0.96); transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out); } [data-reveal-group].is-visible > * { opacity: 1; transform: translateY(0) scale(1); } [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; } [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 90ms; } [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 180ms; } [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 270ms; } [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 360ms; } [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 450ms; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; } } /* --------------------------------------------------------------------- 14. Page transition / loader --------------------------------------------------------------------- */ .page-loader { position: fixed; inset: 0; z-index: 3000; background: var(--black); display: flex; align-items: center; justify-content: center; transition: opacity 500ms var(--ease-out), visibility 0s linear 500ms; } .page-loader.is-hidden { opacity: 0; visibility: hidden; } .page-loader .loader-logo { height: 64px; width: auto; animation: pulseMark 1.4s ease-in-out infinite; } @keyframes pulseMark { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .page-loader .loader-logo { animation: none; opacity: 0.85; } } /* Back to top */ .back-to-top { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 500; width: 48px; height: 48px; display: grid; place-items: center; background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02)), var(--bg-elevated); /* Fixed + visible for the rest of the scroll session once past 700px, same reasoning as the sticky header — kept modest for that reason, though this button is small enough that its blur cost was never going to rival the full-width header bar. */ backdrop-filter: blur(8px) saturate(180%); -webkit-backdrop-filter: blur(8px) saturate(180%); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); color: var(--accent-secondary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 18px rgba(0, 0, 0, 0.22); opacity: 0; visibility: hidden; transform: translateY(12px); transition: all var(--dur-base) var(--ease-out); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 26px rgba(0, 0, 0, 0.3), 0 0 18px rgba(201, 163, 107, 0.22); } /* Founding plaque (About) — replaces a photo slot with an engraved brass-on-slate plaque: compass mark, founding year, and the one sedan -> six classes story line. Reuses the ticket crop-mark motif from the hero quote widget for a cohesive visual language. */ .founding-plaque { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-7); background: radial-gradient(circle at 30% 20%, rgba(201,163,107,0.1), transparent 55%), radial-gradient(circle at 75% 85%, rgba(110,31,35,0.16), transparent 55%), linear-gradient(155deg, var(--slate-900), var(--black)); border: 1px solid rgba(201, 163, 107, 0.22); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 36px rgba(0, 0, 0, 0.35); } .founding-plaque::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(201, 163, 107, 0.14); border-radius: calc(var(--radius-lg) - 6px); pointer-events: none; } .fp-corner { position: absolute; width: 22px; height: 22px; border-color: rgba(201, 163, 107, 0.6); border-style: solid; pointer-events: none; } .fp-corner.tl { top: 10px; left: 10px; border-width: 1px 0 0 1px; } .fp-corner.br { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; } .fp-compass { width: 48px; height: 48px; color: var(--accent-secondary); margin-bottom: var(--space-5); animation: fpCompassSpin 22s linear infinite; } .fp-compass svg { width: 100%; height: 100%; } @keyframes fpCompassSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .fp-compass { animation: none; } } .fp-est { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: var(--text-muted); } .fp-year { font-family: var(--font-heading); font-weight: 600; font-style: italic; font-size: clamp(3.5rem, 7vw, 4.75rem); line-height: 1; margin-block: var(--space-3); background: linear-gradient(160deg, var(--brass-300), var(--brass-600)); -webkit-background-clip: text; background-clip: text; color: transparent; } .fp-place { font-size: var(--fs-sm); color: var(--text-secondary); letter-spacing: 0.04em; } .fp-rule { width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-secondary), transparent); margin-block: var(--space-6); } .fp-journey { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .fp-journey span:not(.fp-arrow) { color: var(--text-secondary); } .fp-arrow { color: var(--accent-secondary); font-size: 1rem; line-height: 1; } /* --------------------------------------------------------------------- 16. Filter chips (Fleet) --------------------------------------------------------------------- */ .chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); } .chip { padding: 0.6rem 1.3rem; background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); transition: all var(--dur-base) var(--ease-out); } .chip:hover { border-color: var(--border-strong); color: var(--text-primary); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px rgba(0, 0, 0, 0.12), 0 0 14px rgba(201, 163, 107, 0.18); } .chip:active { transform: translateY(0) scale(0.96); transition-duration: 100ms; } .chip.is-active { background: linear-gradient(160deg, var(--oxblood-300), var(--accent)); border-color: var(--accent); color: var(--ink); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 16px rgba(110, 31, 35, 0.35), 0 0 16px rgba(201, 163, 107, 0.22); } @media (prefers-reduced-motion: reduce) { .chip:hover { transform: none; } } /* Small vehicle-silhouette cutouts inside the fleet filter chips — a quick visual cue per category, sized well under the source images' native resolution so they stay crisp instead of upscaling. */ .chip-photo { display: inline-flex; align-items: center; gap: var(--space-2); padding-block: 0.4rem; } .chip-photo img { height: 26px; width: auto; max-width: 46px; object-fit: contain; flex-shrink: 0; } /* "Meet the fleet at a glance" banner — a cutout composite of every vehicle, so it needs its own drawn-in ground shadow (a radial gradient under the wheels) or it reads as floating cardboard cutouts on the white section background instead of vehicles standing on a surface. */ .fleet-lineup-wrap { position: relative; max-width: 900px; margin: var(--space-8) auto 0; } .fleet-lineup-wrap::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: 6%; height: 22%; background: radial-gradient(ellipse at center, rgba(28, 23, 18, 0.16) 0%, transparent 72%); z-index: 0; } .fleet-lineup-banner { position: relative; z-index: 1; display: block; width: 100%; height: auto; } /* --------------------------------------------------------------------- 18. Fleet spec list --------------------------------------------------------------------- */ .spec-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-block: var(--space-5); } .spec-list li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); } .spec-list svg { color: var(--accent-secondary); flex-shrink: 0; } .fleet-call-note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-5); } .fleet-call-note svg { color: var(--accent-secondary); flex-shrink: 0; } .fleet-call-note a { color: var(--accent); font-weight: 600; } .fleet-call-note a:hover { color: var(--accent-light); } /* Fleet detail rows */ .fleet-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; padding-block: var(--space-8); border-bottom: 1px solid var(--border-subtle); scroll-margin-top: var(--nav-h); } .fleet-row:last-child { border-bottom: none; } .fleet-media { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; } .fleet-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .fleet-row:nth-child(even) .fleet-media { order: 2; } @media (max-width: 860px) { .fleet-row { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-7); } .fleet-row:nth-child(even) .fleet-media { order: 0; } } /* Reveal choreography: the photo slides in from its own side while the image settles from a slight zoom, then the text column rises line by line. Keyed off the row's data-reveal .is-visible state. */ .fleet-row[data-reveal] .fleet-media { opacity: 0; transform: translateX(-36px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); } .fleet-row[data-reveal]:nth-child(even) .fleet-media { transform: translateX(36px); } .fleet-row[data-reveal].is-visible .fleet-media { opacity: 1; transform: translateX(0); } .fleet-row[data-reveal] .fleet-media img { transform: scale(1.12); transition: transform 1300ms var(--ease-out); } .fleet-row[data-reveal].is-visible .fleet-media img { transform: scale(1); } .fleet-row[data-reveal].is-visible .fleet-media:hover img { transform: scale(1.05); } .fleet-row[data-reveal] > div:last-child > * { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } .fleet-row[data-reveal].is-visible > div:last-child > * { opacity: 1; transform: translateY(0); } .fleet-row[data-reveal].is-visible > div:last-child > *:nth-child(1) { transition-delay: 140ms; } .fleet-row[data-reveal].is-visible > div:last-child > *:nth-child(2) { transition-delay: 220ms; } .fleet-row[data-reveal].is-visible > div:last-child > *:nth-child(3) { transition-delay: 300ms; } .fleet-row[data-reveal].is-visible > div:last-child > *:nth-child(4) { transition-delay: 380ms; } .fleet-row[data-reveal].is-visible > div:last-child > *:nth-child(5) { transition-delay: 460ms; } .fleet-row[data-reveal].is-visible > div:last-child > *:nth-child(6) { transition-delay: 540ms; } @media (max-width: 860px) { /* Vertical offsets on small screens so nothing pokes past the viewport edge */ .fleet-row[data-reveal] .fleet-media, .fleet-row[data-reveal]:nth-child(even) .fleet-media { transform: translateY(24px); } .fleet-row[data-reveal].is-visible .fleet-media { transform: translateY(0); } } /* Chip filtering: re-shown rows ease back in rather than popping */ .filter-enter { animation: filterIn 500ms var(--ease-out) both; } @keyframes filterIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .fleet-row[data-reveal] .fleet-media, .fleet-row[data-reveal] .fleet-media img, .fleet-row[data-reveal] > div:last-child > * { opacity: 1; transform: none; transition: none; } .filter-enter { animation: none; } } /* --------------------------------------------------------------------- 19. Process steps --------------------------------------------------------------------- */ .process-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); position: relative; } .process-step { text-align: center; padding: var(--space-6); } .process-num { width: 64px; height: 64px; margin-inline: auto var(--space-5); display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-full); font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-lg); color: var(--accent-secondary); background: var(--bg-elevated); } @media (max-width: 860px) { .process-row { grid-template-columns: 1fr; } } /* Checkmarked benefit grid ("Why Choose Us") */ .check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-7); } .check-grid-4 { grid-template-columns: repeat(4, 1fr); } .check-item { display: flex; gap: var(--space-4); align-items: flex-start; } .check-item .check-icon { width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--accent); color: var(--ink); display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; } .check-item strong { font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 600; } @media (max-width: 860px) { .check-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .check-grid, .check-grid-4 { grid-template-columns: 1fr; } } /* On a light section (no photo backdrop), check-items were rendering as bare icon+text with no container at all — same card treatment as the review/icon cards elsewhere, not a one-off. */ .section-light .check-item { flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); position: relative; overflow: hidden; background: linear-gradient(155deg, #ffffff 0%, #faf6ee 100%); border: 1px solid rgba(168, 133, 79, 0.22); box-shadow: 0 10px 26px rgba(28, 23, 18, 0.08); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .section-light .check-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brass-500), transparent); opacity: 0.6; } .section-light .check-item:hover { transform: translateY(-4px); border-color: rgba(201, 163, 107, 0.4); box-shadow: 0 14px 32px rgba(28, 23, 18, 0.12); } .section-light .check-item .check-icon { margin-top: 0; } /* Feature list used in service detail rows */ .feature-list { display: flex; flex-direction: column; gap: var(--space-3); margin-block: var(--space-5); } .feature-list li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--text-secondary); } .feature-list svg { color: var(--accent-secondary); flex-shrink: 0; margin-top: 3px; } /* --------------------------------------------------------------------- 20. Accordion (FAQ) --------------------------------------------------------------------- */ .accordion-item { border-bottom: 1px solid var(--border-subtle); } .accordion-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 600; } .accordion-item summary::-webkit-details-marker { display: none; } .accordion-item summary .chevron { transition: transform var(--dur-base) var(--ease-out); color: var(--accent-secondary); flex-shrink: 0; } .accordion-item[open] summary .chevron { transform: rotate(180deg); } .accordion-item .accordion-body { padding-bottom: var(--space-5); color: var(--text-secondary); font-size: var(--fs-sm); max-width: 680px; line-height: 1.7; } /* Contact info list + map */ /* Direct-line cards (Contact) — two clickable tel:/mailto: rows that replace a generic address list; brass icon, arrow slides on hover. */ .direct-lines { display: flex; flex-direction: column; gap: var(--space-4); margin-block: var(--space-6); } .direct-line-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .direct-line-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); } .dl-icon { width: 46px; height: 46px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-full); background: linear-gradient(135deg, rgba(201,163,107,0.16), rgba(201,163,107,0.04)); color: var(--accent-secondary); } .dl-icon svg { width: 19px; height: 19px; } .dl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .dl-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-secondary); } .dl-value { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; } @media (max-width: 380px) { .dl-value { font-size: var(--fs-sm); } } .dl-arrow { margin-left: auto; flex-shrink: 0; display: grid; place-items: center; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .direct-line-card:hover .dl-arrow { transform: translateX(4px); color: var(--accent-secondary); } /* Response steps — a vertical mini-timeline filling the rest of the contact rail, setting expectations for what happens after you reach out. Brass numerals + a dashed connector echo the route-glyph motif from the hero quote widget. */ .response-steps { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--border-subtle); } .rs-step { display: flex; gap: var(--space-4); position: relative; } .rs-step:not(:last-child) { padding-bottom: var(--space-6); } .rs-num { position: relative; flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-full); font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm); color: var(--accent-secondary); background: var(--bg-primary); } .rs-step:not(:last-child) .rs-num::after { content: ''; position: absolute; top: 100%; left: 50%; width: 1px; height: calc(var(--space-6) + 4px); transform: translateX(-50%); background: repeating-linear-gradient(180deg, rgba(201, 163, 107, 0.5) 0 4px, transparent 4px 8px); } .rs-copy strong { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 2px; } .rs-copy p { font-size: var(--fs-sm); color: var(--text-muted); } /* --------------------------------------------------------------------- 21. Hero background — static wallpaper (separate mobile/desktop crops, swapped by breakpoint; no scroll-driven motion). --------------------------------------------------------------------- */ .ssh-bg { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .ssh-bg.is-mobile { display: block; } .ssh-bg.is-desktop { display: none; } @media (min-width: 768px) { .ssh-bg.is-mobile { display: none; } .ssh-bg.is-desktop { display: block; } } /* --------------------------------------------------------------------- 22. Fleet carousel --------------------------------------------------------------------- */ .carousel { position: relative; padding-inline: var(--space-8); } .carousel-track { display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* Never trap the page scroll: vertical swipes that start on the track must always pan the page (pan-y stays allowed), and horizontal overscroll stops at the track instead of chaining into browser back/forward gestures — without these, a slightly diagonal swipe on a full-width card can get claimed by the track and the page "sticks". */ touch-action: pan-x pan-y; overscroll-behavior-x: contain; padding: var(--space-2) var(--space-2) var(--space-6); margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-6) * -1); scrollbar-width: none; } .carousel-track::-webkit-scrollbar { display: none; } @media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } } .fleet-card { flex: 0 0 auto; width: 78%; scroll-snap-align: start; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .fleet-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); } @media (min-width: 560px) { .fleet-card { width: 320px; } } /* Desktop: exactly 3 cards fill the visible track width (percentage widths on a flex child resolve against the flex container's own content-box — i.e. the track's visible viewport, not its full scrollable width — so this isn't an approximation). */ @media (min-width: 1024px) { .fleet-card { width: calc((100% - 2 * var(--space-6)) / 3); } } .fleet-card-photo { position: relative; aspect-ratio: 4/3; background: var(--slate-800); overflow: hidden; } .fleet-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .fleet-card:hover .fleet-card-photo img { transform: scale(1.06); } .fleet-card-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10,9,8,0.55) 100%); } .fleet-card-notch { position: relative; height: 0; display: flex; justify-content: center; } .fleet-card-notch span { position: absolute; top: -11px; width: 22px; height: 22px; background: var(--bg-elevated); border-top: 1px solid var(--border-strong); border-left: 1px solid var(--border-strong); transform: rotate(45deg); transition: background var(--dur-base) var(--ease-out); } .fleet-card-info { padding: var(--space-6) var(--space-5) var(--space-5); text-align: center; } .fleet-card-info h3 { font-size: var(--fs-lg); color: var(--accent-secondary); margin-bottom: var(--space-2); } .fleet-card-info .fleet-card-sub { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-4); } .fleet-card-specs { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); } .fleet-card-specs span { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); } .fleet-card-specs svg { color: var(--accent-secondary); flex-shrink: 0; } .fleet-card-specs .sep { color: var(--border-strong); font-weight: 400; } .card-cta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-secondary); transition: color var(--dur-base) var(--ease-out), gap var(--dur-base) var(--ease-out); } .card-cta:hover { color: var(--accent-secondary-light); gap: var(--space-3); } .carousel-arrow { position: absolute; top: 40%; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)), var(--bg-elevated); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid var(--border-strong); border-radius: var(--radius-full); color: var(--text-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 14px rgba(0, 0, 0, 0.2); transition: all var(--dur-base) var(--ease-out); } .carousel-arrow:hover { border-color: var(--accent-secondary); color: var(--accent-secondary); transform: translateY(-50%) scale(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 26px rgba(0, 0, 0, 0.32), 0 0 18px rgba(201, 163, 107, 0.3); } .carousel-arrow:active { transform: translateY(-50%) scale(0.94); transition-duration: 100ms; } .carousel-arrow.prev { left: 0; transform: translateY(-50%); } .carousel-arrow.next { right: 0; transform: translateY(-50%); } .carousel-arrow:hover.prev, .carousel-arrow:hover.next { transform: translateY(-50%) scale(1.06); } .carousel-arrow:active.prev, .carousel-arrow:active.next { transform: translateY(-50%) scale(0.94); } @media (max-width: 640px) { .carousel { padding-inline: 0; } .carousel-arrow { display: none; } .carousel-track { padding-inline: var(--space-5); } } @keyframes swipe-bounce { 0% { transform: scale(1); } 45% { transform: scale(1.045); } 100% { transform: scale(1); } } .is-swipe-bounce { animation: swipe-bounce 420ms var(--ease-out); } @media (prefers-reduced-motion: reduce) { .is-swipe-bounce { animation: none; } } /* Service cards (reuse the same .carousel/.carousel-track/.carousel-arrow mechanics) */ .service-card { flex: 0 0 auto; width: 78%; scroll-snap-align: start; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .service-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); } @media (min-width: 560px) { .service-card { width: 300px; } } @media (min-width: 1024px) { .service-card { width: calc((100% - 2 * var(--space-6)) / 3); } } @media (max-width: 640px) { .fleet-card, .service-card { width: 100%; scroll-snap-align: center; } } .service-card-photo { position: relative; aspect-ratio: 3/2; background: var(--slate-800); overflow: hidden; } .service-card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); } .service-card:hover .service-card-photo img { transform: scale(1.06); } .service-card-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10,9,8,0.6) 100%); } .service-card-icon { position: relative; width: 56px; height: 56px; margin: -28px auto 0; display: grid; place-items: center; background: linear-gradient(150deg, var(--bg-elevated) 40%, rgba(201,163,107,0.1)); border: 1px solid rgba(201,163,107,0.32); border-radius: var(--radius-full); box-shadow: 0 6px 16px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08); color: var(--accent-secondary); z-index: 1; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .service-card-icon svg { width: 24px; height: 24px; } .service-card:hover .service-card-icon { transform: translateY(-2px) scale(1.05); border-color: rgba(201,163,107,0.5); } @media (prefers-reduced-motion: reduce) { .service-card-icon { transition: none; } } .service-card-info { padding: var(--space-5) var(--space-5) var(--space-6); text-align: center; } .service-card-info h3 { font-size: var(--fs-md); margin-block: var(--space-3) var(--space-2); } .service-card-info p { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-4); } /* --------------------------------------------------------------------- 23. Premium form panel --------------------------------------------------------------------- */ .form-panel-card { /* Deliberately re-pins the dark palette regardless of surrounding section, so the form stays a premium dark "island" even inside a light section. Reworked as a true glass pane — layered translucent gradients + specular bloom + drifting sheen — to match the hero quote-widget's glass language. */ --bg-elevated: var(--slate-800); --bg-secondary: var(--slate-900); --text-primary: var(--ink); --text-secondary: var(--slate-400); --text-muted: var(--slate-500); --accent-secondary: var(--brass-500); --accent-secondary-light: var(--brass-300); --border-subtle: rgba(201, 163, 107, 0.22); --border-strong: rgba(201, 163, 107, 0.42); position: relative; isolation: isolate; background: radial-gradient(120% 90% at 10% -10%, rgba(255,255,255,0.12), transparent 55%), linear-gradient(160deg, rgba(46,38,30,0.9) 0%, rgba(20,18,16,0.94) 60%, rgba(12,11,10,0.97) 100%); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; padding: var(--space-8) var(--space-7); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); /* Restrained elevation: one soft drop shadow and a whisper of brass — enough to lift the pane off the stage without a heavy halo. */ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38), inset 0 1.5px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(201, 163, 107, 0.12), 0 0 40px rgba(201, 163, 107, 0.08); color: var(--text-primary); } .form-panel-card::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; /* Static sheen — see .quote-widget::after for why this doesn't animate. */ background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.06) 42%, transparent 64%); background-size: 220% 220%; background-position: 30% 0%; pointer-events: none; } @media (max-width: 640px) { .form-panel-card { padding: var(--space-6) var(--space-5); border-radius: 20px; backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); } } /* Inputs get a recessed "carved into the glass" groove instead of a flat box — a soft inner shadow reads as depth, and the focus state adds a brass glow on top of it rather than replacing it. */ .form-panel-card .input, .form-panel-card select.input, .form-panel-card textarea.input { background: linear-gradient(165deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), rgba(8, 7, 6, 0.4); border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05); } .form-panel-card .input:hover, .form-panel-card select.input:hover, .form-panel-card textarea.input:hover { border-color: var(--border-strong); } .form-panel-card .input:focus, .form-panel-card select.input:focus, .form-panel-card textarea.input:focus { border-color: var(--accent-secondary); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(201, 163, 107, 0.18), 0 0 24px rgba(201, 163, 107, 0.15); } .btn-primary { position: relative; overflow: hidden; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(245,242,236,0.22) 50%, transparent 60%); transform: translateX(-120%); transition: transform 700ms var(--ease-out); } .btn-primary:hover::before { transform: translateX(120%); } @media (prefers-reduced-motion: reduce) { .btn-primary::before { display: none; } } /* --------------------------------------------------------------------- 12. Custom cursor (desktop, fine-pointer only) --------------------------------------------------------------------- */ .cursor-glow { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 1999; border-radius: var(--radius-full); transform: translate(-50%, -50%); opacity: 0; width: 460px; height: 460px; background: radial-gradient(circle, rgba(201, 163, 107, 0.18) 0%, rgba(201, 163, 107, 0.07) 32%, transparent 68%); mix-blend-mode: screen; will-change: transform; transition: opacity var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out); } html.has-custom-cursor .cursor-glow { opacity: 1; } html.has-custom-cursor .cursor-glow.is-hover { width: 560px; height: 560px; } /* --------------------------------------------------------------------- 14. Inner-page hero media --------------------------------------------------------------------- */ .page-hero .hero-media { inset: 0; } /* --------------------------------------------------------------------- 15. Card micro-interactions --------------------------------------------------------------------- */ .icon-card .icon-badge { transition: transform var(--dur-base) var(--ease-out); } .icon-card:hover .icon-badge { transform: scale(1.1) rotate(-6deg); } /* --------------------------------------------------------------------- 16. Home "Itinerary" layout — the page reads like a chauffeur's route sheet: a brass route line draws down the left gutter as you scroll, and every section is a numbered stop along the ride. --------------------------------------------------------------------- */ .page-home main { position: relative; counter-reset: stop; } /* Numbered stop chips above every section heading */ .page-home .section-head { counter-increment: stop; } .page-home .section-head::before { content: 'Stop 0' counter(stop); display: inline-flex; align-items: center; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-secondary); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 0.35rem 0.95rem; margin-bottom: var(--space-4); opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease-out) 100ms, transform 600ms var(--ease-out) 100ms; } .page-home .section-head.is-visible::before, .page-home .is-visible .section-head::before { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .page-home .section-head::before { opacity: 1; transform: none; transition: none; } } /* Rotated GPS meta on the hero's right edge */ .hero-coords { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); z-index: 1; opacity: 0; animation: heroCoordsIn 1000ms var(--ease-out) 950ms forwards; } .hero-coords span:not(.line) { writing-mode: vertical-rl; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-muted); } .hero-coords .line { width: 1px; height: 56px; background: linear-gradient(180deg, transparent, var(--accent-secondary), transparent); } @keyframes heroCoordsIn { from { opacity: 0; transform: translateY(calc(-50% + 18px)); } to { opacity: 1; transform: translateY(-50%); } } @media (max-width: 1100px), (max-height: 640px) { .hero-coords { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-coords { animation: none; opacity: 1; } } /* Giant ghost serif word floating behind the fleet carousel */ .page-home main section { position: relative; } .ghost-word { position: absolute; right: -1%; top: 44%; transform: translateY(-50%) rotate(-2deg) translateX(var(--ghost-drift, 0px)); font-family: var(--font-heading); font-style: italic; font-weight: 600; font-size: clamp(6rem, 15vw, 14rem); line-height: 1; white-space: nowrap; color: rgba(160, 122, 74, 0.05); -webkit-text-stroke: 1.5px rgba(160, 122, 74, 0.24); pointer-events: none; user-select: none; z-index: 0; } .ghost-word ~ * { position: relative; z-index: 1; } /* Hero scroll cue fades out as soon as scrolling starts (JS-driven) */ .hero-scroll { transition: opacity 200ms var(--ease-out); } /* --------------------------------------------------------------------- 17. Footer upgrade — the final stop --------------------------------------------------------------------- */ /* Giant outlined wordmark rising behind the skyline */ .site-footer::after { content: 'MAJESTIC'; position: absolute; left: 50%; bottom: -0.16em; transform: translateX(-50%); font-family: var(--font-heading); font-weight: 600; font-size: clamp(4rem, 13vw, 11rem); letter-spacing: 0.1em; line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(201, 163, 107, 0.12); pointer-events: none; user-select: none; z-index: 0; } /* Brass diamond ahead of each column heading */ .footer-col h2::before { content: '\25C6'; font-size: 6px; color: var(--accent-secondary); margin-right: var(--space-3); vertical-align: 3px; opacity: 0.8; } .footer-brand p { line-height: 1.7; } .footer-col a { position: relative; } .footer-col a:hover { color: var(--accent-secondary); padding-left: 4px; } .footer-bottom { border-top-color: rgba(201, 163, 107, 0.18); } /* --------------------------------------------------------------------- 18. Signature: pointer-driven 3D tilt cards (home carousels) The fleet & service cards behave like polished objects catching light — they tilt toward the cursor and a soft sheen tracks across them. --------------------------------------------------------------------- */ .tilt-3d { position: relative; transform-style: preserve-3d; will-change: transform; } .tilt-3d:not(.is-tilting) { transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .tilt-3d.is-tilting { border-color: var(--border-strong); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(201, 163, 107, 0.22); } .tilt-sheen { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; opacity: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.22), transparent 62%); mix-blend-mode: screen; transition: opacity var(--dur-base) var(--ease-out); } .tilt-3d.is-tilting .tilt-sheen { opacity: 1; } @media (hover: none) { .tilt-sheen { display: none; } } @media (prefers-reduced-motion: reduce) { .tilt-3d { transform: none !important; } .tilt-sheen { display: none; } } /* --------------------------------------------------------------------- 19. Glass panels — the "Why Denver Majestic" assurances become frosted tiles floating over the photo backdrop. --------------------------------------------------------------------- */ .section-dark-image .check-item { flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); position: relative; overflow: hidden; /* A darker backing than a plain white-tint glass card — the photo behind is unpredictable in brightness, so the card needs its own opaque-enough floor for the description text to stay legible. */ background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)), rgba(10, 9, 8, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 26px rgba(0, 0, 0, 0.22); transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .section-dark-image .check-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--brass-500), transparent); opacity: 0.7; } .section-dark-image .check-item:hover { transform: translateY(-4px); background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02)), rgba(10, 9, 8, 0.6); border-color: rgba(201, 163, 107, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 32px rgba(0, 0, 0, 0.28); } .section-dark-image .check-item .check-icon { width: 40px; height: 40px; box-shadow: 0 0 0 4px rgba(201, 163, 107, 0.12); } @media (max-width: 760px) { /* Lighter blur on phones — backdrop-filter is costly per frame */ .section-dark-image .check-item { backdrop-filter: blur(9px) saturate(140%); -webkit-backdrop-filter: blur(9px) saturate(140%); background: rgba(20, 20, 24, 0.5); } } /* Utility spacing */ .mt-2{margin-top:var(--space-2)} .mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)} .mb-2{margin-bottom:var(--space-2)} .mb-4{margin-bottom:var(--space-4)} .mb-6{margin-bottom:var(--space-6)}