/* ========================================================= Coastal Glow Holiday Lighting — Design Tokens & Base ========================================================= */ /* Google Fonts are loaded via + preconnect in (not @import here) — @import forces a sequential CSS->CSS->font waterfall instead of letting the browser discover and fetch the font files in parallel. */ :root { /* Brand colors sampled from the Coastal Glow logo */ --navy-950: #050c18; --navy-900: #081020; --navy-800: #0d1a30; --navy-700: #142542; --navy-600: #1c3358; --gold-300: #f6d888; --gold-400: #f0c14b; --gold-500: #e8ad2e; --gold-600: #c98f1c; --wave-blue-400: #5ac3ec; --wave-blue-500: #1f8fd6; --wave-blue-600: #0c6fb0; --white: #ffffff; --ivory: #f7f5ef; --text-muted: #aab6cb; --text-faint: #7c88a0; --border-soft: rgba(255, 255, 255, 0.1); --border-gold: rgba(232, 173, 46, 0.35); /* Florida sunset spectrum — the site's recurring visual signature */ --deep-ocean: #0f2f52; --champagne: #efdfc0; --coral: #e8836b; --coral-deep: #c96650; --dusty-pink: #d9a6a0; --amber: #d98c3d; --sunset-orange: #c9663a; --gradient-sunset-bright: linear-gradient(100deg, var(--sunset-orange) 0%, var(--amber) 32%, var(--gold-400) 60%, var(--dusty-pink) 100%); --gradient-sunset-overlay: linear-gradient(180deg, rgba(5, 12, 24, 0.90) 0%, rgba(15, 24, 45, 0.72) 20%, rgba(80, 45, 58, 0.46) 38%, rgba(201, 102, 58, 0.30) 56%, rgba(217, 140, 61, 0.26) 72%, rgba(5, 10, 20, 0.88) 100%); --color-background: var(--navy-900); --color-surface: var(--navy-800); --color-surface-raised: var(--navy-700); --color-primary: var(--gold-500); --color-on-primary: var(--navy-950); --color-accent: var(--wave-blue-500); --color-foreground: var(--white); --color-muted: var(--text-muted); /* Light "editorial" surface used sparingly for breathing room between dark, cinematic sections */ --color-ivory-bg: var(--champagne); --color-ink: #1c1610; --color-ink-muted: #6b6355; --font-display: 'Playfair Display', 'Georgia', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --space-3xs: 4px; --space-2xs: 8px; --space-xs: 12px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-card: 0 12px 30px -12px rgba(0, 0, 0, 0.55); --shadow-gold: 0 8px 24px -8px rgba(232, 173, 46, 0.45); --shadow-lift: 0 20px 45px -18px rgba(0, 0, 0, 0.65); --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 150ms; --dur-med: 260ms; --dur-slow: 420ms; --container-max: 1240px; --header-h: 76px; --announce-h: 42px; } /* ========================================================= Reset & base ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--color-background); color: var(--color-foreground); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 var(--space-sm); } p { margin: 0 0 var(--space-sm); color: var(--text-muted); } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-md); } section { position: relative; } section[id] { scroll-margin-top: calc(var(--header-h) + var(--announce-h)); } /* Scroll reveal — subtle fade + rise, triggered by IntersectionObserver in main.js. Gated behind .js-enabled (set immediately by main.js) so content stays visible by default if JavaScript fails to load — this is progressive enhancement, not a requirement. */ .js-enabled .reveal { opacity: 0; transform: translateY(22px); transition: opacity 900ms var(--ease-standard), transform 900ms var(--ease-standard); } .js-enabled .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js-enabled .reveal { opacity: 1; transform: none; transition: none; } } /* Light "editorial" section surface — used sparingly to punctuate the dark, cinematic rhythm */ .section-light { background: var(--color-ivory-bg); color: var(--color-ink); } .section-light .eyebrow { color: var(--coral-deep); } .section-light .eyebrow::before { background: var(--coral-deep); } .section-light h2, .section-light h3, .section-light h4 { color: var(--color-ink); } .section-light p { color: var(--color-ink-muted); } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-400); margin-bottom: var(--space-sm); } .eyebrow::before { display: none; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold-500); } /* Breadcrumbs — used on location landing pages, sits just under the header */ .breadcrumbs { background: var(--color-surface); padding: var(--space-md) 0; margin-top: calc(var(--header-h) + var(--announce-h)); } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; font-size: 0.85rem; color: var(--text-faint); } .breadcrumbs a { color: var(--text-muted); } .breadcrumbs a:hover { color: var(--gold-400); } .breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--text-faint); } .breadcrumbs li[aria-current="page"] { color: var(--ivory); } /* Location landing pages: compact intro hero (no background photo, unlike the homepage hero) sitting directly under the breadcrumbs bar. */ .location-hero { padding: var(--space-2xl) 0 var(--space-xl); text-align: center; } @media (max-width: 640px) { /* This hero is short enough on mobile that its secondary CTA can land directly under the fixed .mobile-cta bar, at whatever scroll position the visitor happens to be at (padding can't fix this — the fixed bar's position is viewport-relative, not document-relative). Simplify to a single primary CTA here instead; the gallery is still one tap away via the nav menu. The homepage's own hero is tall enough that this never comes up there, so it keeps both buttons. */ .location-hero .btn-outline { display: none; } } .location-hero .eyebrow { display: block; margin-bottom: var(--space-sm); } .location-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--white); max-width: 800px; margin: 0 auto var(--space-md); } .location-hero p { max-width: 68ch; margin: 0 auto var(--space-lg); font-size: 1.05rem; color: var(--text-muted); } .section-head { max-width: 680px; margin: 0 auto var(--space-2xl); text-align: center; } .section-head h1, .section-head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--white); } .section-head p { font-size: 1.05rem; } /* Inline links inside intro paragraphs inherit body text color by default (see the base `a` rule), so without this they'd be invisible against the surrounding copy at rest and only discoverable on hover -- a dead end on touch devices. */ .section-head p a, .split-copy p a { color: var(--gold-400); text-decoration: underline; text-decoration-color: rgba(240, 193, 75, 0.4); text-underline-offset: 3px; } .section-head p a:hover, .split-copy p a:hover { text-decoration-color: currentColor; } .section-head.align-left { margin-left: 0; text-align: left; } /* Focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: var(--radius-sm); } /* ========================================================= Buttons ========================================================= */ .btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: var(--space-2xs); padding: 14px 28px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.95rem; cursor: pointer; border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); min-height: 48px; touch-action: manipulation; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); color: var(--navy-950); box-shadow: var(--shadow-gold); } .btn-primary:hover { box-shadow: 0 12px 30px -8px rgba(232, 173, 46, 0.6); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--white); border-color: var(--border-soft); } .btn-outline:hover { border-color: var(--gold-400); color: var(--gold-300); } .btn-block { width: 100%; } /* ========================================================= Announcement bar ========================================================= */ .announce-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 101; height: var(--announce-h); display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: 0 var(--space-md); background: linear-gradient(90deg, var(--navy-950), var(--navy-700) 50%, var(--navy-950)); border-bottom: 1px solid var(--border-gold); color: var(--champagne); font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; transition: background var(--dur-fast) var(--ease-standard); } .announce-bar:hover { background: linear-gradient(90deg, var(--navy-900), var(--navy-600) 50%, var(--navy-900)); } .announce-bar strong { color: var(--gold-300); font-weight: 700; } .announce-bar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .announce-bar__cta { color: var(--gold-400); font-weight: 700; flex-shrink: 0; } @media (max-width: 700px) { .announce-bar { font-size: 0.74rem; gap: var(--space-2xs); padding: 0 var(--space-sm); } .announce-bar__sub { display: none; } } @media (max-width: 420px) { .announce-bar__cta { display: none; } } /* ========================================================= Header / Nav ========================================================= */ .site-header { position: fixed; top: var(--announce-h); left: 0; right: 0; z-index: 100; border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: border-color var(--dur-med) var(--ease-standard), top var(--dur-med) var(--ease-standard); } /* Blur/tint lives on a pseudo-element (not on .site-header itself) because a filter/backdrop-filter on an element makes it a containing block for its position:fixed descendants -- which broke the full-viewport mobile nav panel nested inside the header. Keeping the header itself filter-free avoids that. */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(5, 12, 24, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background var(--dur-med) var(--ease-standard); } .site-header.is-scrolled::before { background: rgba(5, 12, 24, 0.92); } .site-header.is-scrolled { border-color: rgba(255, 255, 255, 0.1); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) var(--space-md); max-width: 1400px; } .brand { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-display); } .brand img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; } .brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand .brand-text strong { color: var(--white); font-size: 1.05rem; letter-spacing: 0.02em; } .brand .brand-text span { color: var(--gold-400); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; } .nav-links { display: flex; align-items: center; gap: var(--space-md); } .nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--text-muted); transition: color var(--dur-fast) var(--ease-standard); position: relative; padding: 4px 0; white-space: nowrap; text-align: center; } .nav-links a:hover, .nav-links a.is-active { color: var(--white); } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--gold-500); transition: right var(--dur-med) var(--ease-standard); } .nav-links a:hover::after { right: 0; } .nav-cta { display: flex; align-items: center; gap: var(--space-sm); } .nav-cta .btn { padding: 10px 22px; min-height: 42px; white-space: nowrap; } .nav-toggle { display: none; background: none; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--white); cursor: pointer; } .nav-toggle svg { width: 22px; height: 22px; } @media (max-width: 1100px) { .nav-links { position: fixed; inset: calc(var(--header-h) + var(--announce-h)) 0 0 0; background: var(--navy-950); flex-direction: column; justify-content: flex-start; align-items: stretch; padding: var(--space-lg) var(--space-md); gap: 0; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--dur-med) var(--ease-standard), transform var(--dur-med) var(--ease-standard); } .nav-links.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .nav-links a { padding: 16px 4px; border-bottom: 1px solid var(--border-soft); font-size: 1.05rem; } .nav-cta { display: none; } .nav-toggle { display: inline-flex; } } /* ========================================================= Hero ========================================================= */ .hero { min-height: 100dvh; display: flex; align-items: center; padding: calc(150px + var(--announce-h)) 0 var(--space-3xl); overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--navy-950); } .hero__img { position: absolute; inset: -3%; background: url('../assets/img/full/hero-mansion.jpg') center center / cover no-repeat; animation: heroZoom 26s ease-in-out infinite alternate; } /* Subtle dark scrim to keep hero text legible without darkening the photo overall -- stronger on the left where the copy sits, fading out toward the right so the image still reads clearly. */ .hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,12,24,0.47) 0%, rgba(5,12,24,0.32) 55%, rgba(5,12,24,0.14) 100%), linear-gradient(0deg, rgba(5,12,24,0.41) 0%, rgba(5,12,24,0.04) 65%); pointer-events: none; } @keyframes heroZoom { from { transform: scale(1); } to { transform: scale(var(--hero-zoom-max, 1.08)); } } @media (prefers-reduced-motion: reduce) { .hero__img { animation: none; } } .hero-inner { position: relative; z-index: 1; max-width: 720px; } .hero-inner { max-width: 760px; } .hero-content .eyebrow-locations { display: block; text-align: center; font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--champagne); opacity: 0.85; margin-bottom: var(--space-md); white-space: nowrap; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); } @media (max-width: 900px) { .hero-content .eyebrow-locations { white-space: normal; } } .hero-content h1 { font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: 1.06; color: var(--white); text-wrap: balance; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); } .hero-content h1 em { font-style: italic; color: var(--gold-300); } .hero-content .lede { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.25; color: var(--ivory); max-width: 68ch; opacity: 0.92; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.65), 0 4px 14px rgba(0, 0, 0, 0.35); } .hero-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin: var(--space-lg) 0 0; } .hero-note { margin: var(--space-sm) 0 0; font-size: 0.85rem; font-weight: 600; color: var(--gold-300); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); text-align: center; } /* Hero entrance rides the same .reveal system as the rest of the page (see base.css rules above) rather than a standalone keyframe animation — a fill-mode:both keyframe that never gets to run (slow devices, throttled background tabs) would otherwise strand this above-the-fold content at its 0%-opacity starting state forever. */ .hero__scroll-cue { position: absolute; left: 50%; bottom: var(--space-lg); transform: translateX(-50%); z-index: 1; width: 1px; height: 42px; background: linear-gradient(180deg, transparent, var(--gold-400) 40%, transparent); opacity: 0.7; animation: scrollCue 2.6s ease-in-out infinite; } @keyframes scrollCue { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } } @media (prefers-reduced-motion: reduce) { .hero__scroll-cue { animation: none; } } @media (max-width: 900px) { .hero { padding-top: calc(120px + var(--announce-h)); } .hero-inner { margin: 0 auto; text-align: center; } .hero-content .lede { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } /* On tall/narrow viewports, background-size:cover already crops hard to fill the height. Drop the desktop-only overscan margin and ease off the zoom animation's peak so mobile isn't cropped in tighter than it needs to be, and the image isn't upscaled further than necessary. */ .hero__img { inset: 0; --hero-zoom-max: 1.03; } } /* ========================================================= Trust bar ========================================================= */ .trust-bar { background: var(--navy-950); border-block: 1px solid var(--border-soft); padding: var(--space-lg) 0; } .trust-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-md); text-align: center; } .trust-grid li { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); } .trust-grid svg { width: 28px; height: 28px; color: var(--gold-400); } .trust-grid span { font-size: 0.82rem; font-weight: 600; color: var(--ivory); letter-spacing: 0.01em; } .trust-grid li a { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); color: inherit; text-decoration: none; } .trust-grid li a:hover span { color: var(--gold-300); } .trust-grid li a:hover svg { color: var(--gold-300); } @media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 901px) and (max-width: 1100px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } } /* ========================================================= Installation showcase ========================================================= */ .install-showcase { padding: var(--space-3xl) 0; background: var(--color-surface); } .install-showcase .container { max-width: 1100px; } .install-showcase video { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); background: var(--navy-950); } /* ========================================================= Introduction ========================================================= */ .intro { padding: var(--space-3xl) 0; background: var(--color-ivory-bg); color: var(--color-ink); } .intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; } .intro-copy .eyebrow { color: var(--coral-deep); } .intro-copy .eyebrow::before { background: var(--coral-deep); } .intro-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: var(--color-ink); } .intro-copy h2 em { font-style: italic; color: var(--coral-deep); } .intro-copy p { color: var(--color-ink-muted); font-size: 1.05rem; max-width: 52ch; } .intro-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); aspect-ratio: 4/5; background: var(--navy-950); } .intro-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-standard); } .intro-media:hover img { transform: scale(1.04); } .intro-media video { display: block; width: 100%; height: 100%; object-fit: contain; } @media (max-width: 900px) { .intro-grid { grid-template-columns: 1fr; } .intro-media { order: -1; aspect-ratio: 4/5; } .intro-copy { text-align: center; } .intro-copy p { margin-left: auto; margin-right: auto; } } /* ========================================================= Services ========================================================= */ .services { padding: var(--space-3xl) 0; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } .service-card { background: var(--color-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: var(--border-gold); } .service-card .thumb { aspect-ratio: 4/3; overflow: hidden; } .service-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-standard); } .service-card:hover .thumb img { transform: scale(1.06); } /* Before/after slider embedded in a service card thumb — reuses .ba-slider's drag interaction, but the card itself already handles the rounded/clipped frame, so the standalone slider's own border/shadow/radius are stripped. */ .thumb.ba-slider { aspect-ratio: 4/3; border: none; box-shadow: none; border-radius: 0; } .thumb.ba-slider .ba-handle::after { width: 34px; height: 34px; background-size: 16px; } .thumb.ba-slider .ba-tag { font-size: 0.68rem; padding: 4px 10px; } .service-card .body { padding: var(--space-md) var(--space-lg) var(--space-lg); } .service-card h3 { font-size: 1.15rem; color: var(--white); margin-bottom: var(--space-2xs); } .service-card p { font-size: 1rem; margin-bottom: 0; } @media (max-width: 960px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } .service-card .body { text-align: center; } } /* ========================================================= Why Coastal Glow ========================================================= */ .why { padding: var(--space-3xl) 0; background: var(--color-surface); } .why-head { max-width: 720px; margin: 0 auto var(--space-2xl); text-align: center; } .why-head h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--white); } .why-lede { font-size: 1.05rem; } .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); max-width: 980px; margin: 0 auto; } .why-item { text-align: center; padding: var(--space-lg) var(--space-md); background: var(--navy-900); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); transition: transform var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard); } .why-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--border-gold); } .why-item .icon-circle { width: 54px; height: 54px; border-radius: 50%; background: var(--navy-700); border: 1px solid var(--border-gold); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-sm); } .why-item .icon-circle svg { width: 24px; height: 24px; color: var(--gold-400); } .why-item h3 { font-size: 1.1rem; color: var(--white); margin-bottom: var(--space-2xs); } .why-item p { font-size: 1rem; margin-bottom: 0; } @media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; max-width: 460px; } } /* ========================================================= Before / After ========================================================= */ .before-after { padding: var(--space-3xl) 0; } .ba-wrap { max-width: 860px; margin: 0 auto; } .ba-slider { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); border: 1px solid var(--border-gold); cursor: ew-resize; touch-action: pan-y; user-select: none; } .ba-slider img, .ba-slider video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } /* The large standalone Before/After comparison uses portrait-sourced media, so the box itself is portrait too -- matches the before-photo's own 3:4 ratio, leaving only slight pillarboxing on the narrower 9:16 after-video. */ #before-after .ba-wrap { max-width: 520px; } #before-after .ba-slider { aspect-ratio: 3/4; background: var(--navy-950); } #before-after .ba-slider img, #before-after .ba-slider video { object-fit: contain; } .ba-slider .ba-after { clip-path: inset(0 0 0 50%); } .ba-slider .ba-after-walkway { object-position: 50% 75%; } .ba-slider .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--gold-400); box-shadow: 0 0 12px rgba(232,173,46,0.7); transform: translateX(-50%); } .ba-slider .ba-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; border-radius: 50%; background: var(--gold-400); transform: translate(-50%, -50%); box-shadow: 0 6px 16px rgba(0,0,0,0.4); background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; background-size: 22px; } .ba-tag { position: absolute; top: var(--space-sm); padding: 6px 14px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(5,12,24,0.65); border: 1px solid var(--border-soft); backdrop-filter: blur(6px); } .ba-tag.before-tag { left: var(--space-sm); } .ba-tag.after-tag { right: var(--space-sm); color: var(--gold-300); border-color: var(--border-gold); } .ba-hint { text-align: center; font-size: 0.85rem; color: var(--text-faint); margin-top: var(--space-sm); } /* ========================================================= Gallery — compact Instagram-style portfolio grid ========================================================= */ .gallery { padding: var(--space-3xl) 0; background: var(--color-surface); } .gallery-grid-new { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: var(--container-max); margin: 0 auto; } .gallery-carousel-wrap { position: relative; } .gallery-carousel-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(5, 12, 24, 0.55); border: 1px solid var(--border-soft); color: var(--white); z-index: 2; cursor: pointer; backdrop-filter: blur(4px); transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); } .gallery-carousel-nav:hover { border-color: var(--gold-400); color: var(--gold-300); } .gallery-carousel-nav svg { width: 20px; height: 20px; } .gallery-carousel-nav.prev { left: 4px; } .gallery-carousel-nav.next { right: 4px; } .gallery-carousel-nav.is-hidden { display: none; } .gallery-tile { display: block; width: 100%; padding: 0; margin: 0; border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1/1; position: relative; cursor: pointer; background: var(--navy-950); transition: border-color var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard); } .gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms var(--ease-standard); } .gallery-tile-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(5, 12, 24, 0); opacity: 0; transition: background 300ms var(--ease-standard), opacity 300ms var(--ease-standard); } .gallery-tile-icon { width: 18px; height: 18px; color: var(--gold-400); } .gallery-tile-label { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); } .gallery-play { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(5, 12, 24, 0.5); border: 1px solid var(--border-gold); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; color: var(--gold-400); pointer-events: none; transition: opacity 300ms var(--ease-standard); } .gallery-play svg { width: 12px; height: 12px; margin-left: 1px; } /* Hover state — scoped to devices with a real pointer so touch never gets a stuck/flashed hover state; touch users get the same info via the lightbox. */ @media (hover: hover) and (pointer: fine) { .gallery-tile:hover { border-color: var(--border-gold); box-shadow: var(--shadow-card); } .gallery-tile:hover img { transform: scale(1.05); } .gallery-tile:hover .gallery-tile-overlay { background: rgba(5, 12, 24, 0.55); opacity: 1; } .gallery-tile:hover .gallery-play { opacity: 0; } } .gallery-tile:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; } .gallery-loadmore-wrap { text-align: center; margin-top: var(--space-xl); } .gallery-loadmore-wrap .btn.is-hidden { display: none; } /* Small static grid for the location pages' photo/video preview sections -- deliberately not .gallery-grid-new: that class's collapsed-state nth-child rules assume a "load more" JS toggle these fixed 3-6 item grids never use, which would hide items that should always be visible here. */ .mini-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: var(--container-max); margin: 0 auto; } @media (max-width: 900px) { .mini-gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .mini-gallery-grid { grid-template-columns: repeat(2, 1fr); } } .mini-gallery { padding: var(--space-3xl) 0 0; } @media (max-width: 1200px) { .gallery-grid-new { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 900px) { .gallery-grid-new { grid-template-columns: repeat(3, 1fr); } } /* Collapsed state: show exactly one row (matching the current column count), with the rest revealed by "View Full Gallery". Each breakpoint below only needs to hide further, since narrower breakpoints stack in cascade order. */ .gallery-grid-new:not(.is-expanded) .gallery-tile:nth-child(n+6) { display: none; } @media (max-width: 1200px) { .gallery-grid-new:not(.is-expanded) .gallery-tile:nth-child(n+5) { display: none; } } @media (max-width: 900px) { .gallery-grid-new:not(.is-expanded) .gallery-tile:nth-child(n+4) { display: none; } } /* Desktop (>=1024px): collapsed state becomes a horizontal carousel instead of a fixed one-row grid — every item is reachable via the arrows/drag/swipe, not just the first few. "View Full Gallery" still switches to the full wrapping grid exactly as before (the :not(.is-expanded) scoping below is what makes the carousel rules stop applying once expanded). */ @media (min-width: 1024px) { .gallery-carousel-nav { display: flex; } .gallery-grid-new:not(.is-expanded) { display: flex; overflow-x: auto; scrollbar-width: none; cursor: grab; } .gallery-grid-new:not(.is-expanded)::-webkit-scrollbar { display: none; } .gallery-grid-new:not(.is-expanded).is-dragging { cursor: grabbing; } .gallery-grid-new:not(.is-expanded) .gallery-tile { display: block; flex: 0 0 240px; width: 240px; } /* Same specificity as the collapsed-row hiding rules above (0,4,0) — wins on source order since this block comes later, undoing the hide so every tile is reachable in the carousel instead of just the first row's worth. */ .gallery-grid-new:not(.is-expanded) .gallery-tile:nth-child(n+4), .gallery-grid-new:not(.is-expanded) .gallery-tile:nth-child(n+5), .gallery-grid-new:not(.is-expanded) .gallery-tile:nth-child(n+6) { display: block; } } /* Mobile (<=640px): original filterable single-item slideshow instead of the compact grid above — kept as-is per client request, not part of the redesign. */ .gallery-old-mobile { display: none; } @media (max-width: 640px) { .gallery-new-desktop { display: none; } .gallery-old-mobile { display: block; } .gallery-old-mobile .gallery-slideshow { position: relative; } .gallery-old-mobile .gallery-grid { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); cursor: grab; } .gallery-old-mobile .gallery-grid::-webkit-scrollbar { display: none; } .gallery-old-mobile .gallery-grid.is-dragging { cursor: grabbing; } .gallery-old-mobile .gallery-item { flex: 0 0 100%; scroll-snap-align: center; border-radius: 0; aspect-ratio: 4/3; cursor: pointer; position: relative; border: 1px solid var(--border-soft); overflow: hidden; } .gallery-old-mobile .gallery-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-old-mobile .gallery-item .cap { position: absolute; inset: auto 0 0 0; padding: var(--space-2xs) var(--space-sm); background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent); font-size: 0.78rem; font-weight: 600; color: var(--white); opacity: 1; } .gallery-old-mobile .gallery-item.is-hidden { display: none; } .gallery-old-mobile .gallery-item .play-badge { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(5, 12, 24, 0.55); border: 1px solid var(--border-gold); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: var(--gold-400); pointer-events: none; } .gallery-old-mobile .gallery-item .play-badge svg { width: 16px; height: 16px; margin-left: 2px; } .gallery-old-mobile .gallery-nav { display: flex; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(5, 12, 24, 0.55); border: 1px solid var(--border-soft); color: var(--white); z-index: 2; cursor: pointer; backdrop-filter: blur(4px); } .gallery-old-mobile .gallery-nav:hover { border-color: var(--gold-400); color: var(--gold-300); } .gallery-old-mobile .gallery-nav svg { width: 18px; height: 18px; } .gallery-old-mobile .gallery-nav.prev { left: var(--space-2xs); } .gallery-old-mobile .gallery-nav.next { right: var(--space-2xs); } .gallery-old-mobile .gallery-counter { display: block; position: absolute; bottom: var(--space-sm); left: 50%; transform: translateX(-50%); z-index: 2; padding: 4px 12px; border-radius: var(--radius-pill); background: rgba(5, 12, 24, 0.65); color: var(--ivory); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; } } /* Lightbox */ .lightbox { position: fixed; inset: 0; background: rgba(3, 7, 15, 0.94); display: none; align-items: center; justify-content: center; z-index: 200; padding: var(--space-lg); } .lightbox.is-open { display: flex; } .lightbox img, .lightbox-video { max-width: min(90vw, 1100px); max-height: 82vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lift); } .lightbox-video { display: none; background: #000; } .lightbox-close, .lightbox-nav { position: absolute; background: rgba(255,255,255,0.08); border: 1px solid var(--border-soft); color: var(--white); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .lightbox-close { top: var(--space-md); right: var(--space-md); } .lightbox-nav.prev { left: var(--space-md); top: 50%; transform: translateY(-50%); } .lightbox-nav.next { right: var(--space-md); top: 50%; transform: translateY(-50%); } .lightbox-nav svg, .lightbox-close svg { width: 20px; height: 20px; } .lightbox-caption { position: absolute; bottom: var(--space-lg); left: 0; right: 0; text-align: center; color: var(--ivory); font-size: 0.9rem; } /* ========================================================= How it works ========================================================= */ .how-it-works { padding: var(--space-3xl) 0; } .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-md); position: relative; } .step { text-align: center; position: relative; background: var(--color-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-sm) var(--space-lg); transition: transform var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard), border-color var(--dur-med) var(--ease-standard); } .step:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--border-gold); } .step .icon-circle { width: 54px; height: 54px; border-radius: 50%; background: var(--navy-700); border: 1px solid var(--border-gold); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-sm); position: relative; z-index: 1; } .step .icon-circle svg { width: 24px; height: 24px; color: var(--gold-400); } .step h3 { color: var(--white); font-size: 1rem; margin-bottom: var(--space-3xs); } .step p { font-size: 1rem; margin-bottom: 0; } /* Free Consultation page's "How It Works" has 3 steps, not the 5 the base .steps grid is built for -- without this, 3 items in a 5-column grid sit left-anchored with dead space on the right instead of filling the row. */ @media (min-width: 901px) { .steps-3 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; } } /* Sarasota page's "Our Process" has 7 steps -- same idea as .steps-3 above, a 3-column grid so 7 items fall 3/3/1, with the trailing 7th item centered using the same last-child technique the base .steps tablet breakpoint already uses for its own odd-item-remainder case. */ @media (min-width: 901px) { .steps-7 { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; } .steps-7 .step:last-child { grid-column: 1 / -1; width: calc(33.333% - var(--space-md) * 2 / 3); margin: 0 auto; } } @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } .step:last-child { grid-column: 1 / -1; width: calc(50% - var(--space-md) / 2); margin: 0 auto; } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .step:last-child { grid-column: auto; width: auto; margin: 0; } } /* ========================================================= Residential / Commercial ========================================================= */ .split-section { padding: var(--space-3xl) 0; } .split-section--reverse { background: var(--color-surface); } .split-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; } .split-section--reverse .split-copy { order: 2; } .split-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); aspect-ratio: 9/10; } .split-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-standard); } .split-media:hover img { transform: scale(1.04); } .split-copy { text-align: center; } .split-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--white); } .split-copy p { font-size: 1.02rem; max-width: 48ch; margin-left: auto; margin-right: auto; } @media (max-width: 900px) { .split-section-grid { grid-template-columns: 1fr; } .split-section--reverse .split-copy { order: 0; } .split-media { order: -1; aspect-ratio: 16/10; } } /* ========================================================= Commercial concept rendering showcase ========================================================= */ .concept-showcase { padding: 0 0 var(--space-3xl); background: var(--color-surface); } .concept-showcase .container { max-width: 1100px; } .concept-showcase img, .concept-showcase video { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); } .concept-showcase-copy { max-width: 640px; margin: var(--space-xl) auto 0; text-align: center; } .concept-showcase-copy .eyebrow { justify-content: center; } .concept-showcase-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--white); } .concept-showcase-copy p { font-size: 1.02rem; } /* ========================================================= Service areas ========================================================= */ .areas { padding: var(--space-3xl) 0 0; background: var(--color-surface); overflow: hidden; } .areas-split { display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: var(--space-2xl); align-items: stretch; padding-left: max(var(--space-md), calc((100vw - var(--container-max)) / 2 + var(--space-md))); padding-right: var(--space-md); } .areas-content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-xl) 0; text-align: center; } .areas-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm) var(--space-lg); } .areas-list li { display: flex; align-items: center; gap: var(--space-2xs); font-size: 1rem; color: var(--ivory); } .areas-list svg { width: 16px; height: 16px; color: var(--gold-400); flex-shrink: 0; } .areas-list a:hover { color: var(--gold-400); } .areas-map { position: relative; min-height: 480px; overflow: hidden; background: var(--navy-900); } .areas-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .areas-map-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at 14% 55%, rgba(240, 193, 75, 0.22) 0%, transparent 42%), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(5, 12, 24, 0.62) 100%); } .map-pin { position: absolute; width: 0; height: 0; } .map-pin-icon { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); width: 26px; height: 26px; color: var(--gold-400); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 9px rgba(240, 193, 75, 0.75)); } .map-pin-label { position: absolute; left: 16px; top: -15px; transform: translateY(-50%); font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; color: var(--white); white-space: nowrap; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7); } .map-pin--flip .map-pin-label { left: auto; right: 16px; } .areas-trust { margin-top: var(--space-2xl); border-top: 1px solid var(--border-soft); padding: var(--space-lg) 0; } .areas-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .areas-trust-item { display: flex; align-items: flex-start; gap: var(--space-sm); } .areas-trust-item .icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(232, 173, 46, 0.12); border: 1px solid var(--border-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .areas-trust-item .icon svg { width: 19px; height: 19px; color: var(--gold-400); } .areas-trust-item strong { display: block; color: var(--white); font-size: 0.95rem; margin-bottom: 2px; } .areas-trust-item span { font-size: 0.85rem; color: var(--text-muted); } @media (max-width: 900px) { .areas-split { grid-template-columns: 1fr; padding-left: var(--space-md); padding-right: var(--space-md); } .areas-map { order: -1; min-height: 320px; } .areas-list { grid-template-columns: 1fr 1fr; justify-items: center; } .areas-list li { justify-content: center; } .areas-trust { display: none; } } @media (max-width: 560px) { .areas-trust-grid { grid-template-columns: 1fr; } .areas-trust-item { max-width: 320px; margin: 0 auto; } .areas-trust-item > div { flex: 1; text-align: center; } } /* ========================================================= FAQ ========================================================= */ .faq { padding: var(--space-3xl) 0; } .faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: var(--space-sm); } .faq-item { border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); background: none; border: none; color: var(--white); text-align: left; padding: var(--space-md) var(--space-lg); font-size: 1rem; font-weight: 600; cursor: pointer; } .faq-q svg { width: 20px; height: 20px; color: var(--gold-400); flex-shrink: 0; transition: transform var(--dur-med) var(--ease-standard); } @media (min-width: 901px) { .faq-q-text { flex: 1; text-align: center; } } .faq-item.is-open .faq-q svg { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-standard); padding: 0 var(--space-lg); } .faq-a p { padding-bottom: var(--space-md); margin: 0; font-size: 1rem; } .faq-item.is-open .faq-a { max-height: 320px; } /* ========================================================= Contact ========================================================= */ .contact { padding: var(--space-3xl) 0; background: var(--color-surface); } .contact .container { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-2xl); align-items: start; } .contact-info { display: grid; gap: var(--space-md); align-content: start; text-align: center; } .contact-info > p { max-width: 48ch; margin-left: auto; margin-right: auto; } .tier-list { width: 100%; max-width: 420px; margin: 0 auto; text-align: left; } .tier-intro { font-weight: 600; color: var(--ivory); margin-bottom: var(--space-sm); } .tier-item { padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-xs); border: 1px solid var(--border-soft); border-left: 3px solid var(--gold-400); border-radius: var(--radius-sm); background: rgba(232, 173, 46, 0.05); } .tier-item:last-child { margin-bottom: 0; } .tier-name { font-weight: 700; color: var(--gold-300); font-size: 0.95rem; margin: 0 0 4px; } .tier-desc { font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); margin: 0; } .contact-info .item { width: 100%; max-width: 320px; margin: 0 auto; text-align: left; } .contact-info .item { display: flex; gap: var(--space-sm); align-items: flex-start; } .contact-info .item .icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(232,173,46,0.12); border: 1px solid var(--border-gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-info .item .icon svg { width: 19px; height: 19px; color: var(--gold-400); } .contact-info .item strong { display: block; color: var(--white); font-size: 0.95rem; } .contact-info .item span, .contact-info .item a { font-size: 1rem; color: var(--text-muted); } .contact-info .item a:hover { color: var(--gold-400); } .contact-form { background: var(--navy-900); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-xl); display: grid; gap: var(--space-md); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); min-width: 0; align-items: start; } .field { display: grid; gap: 6px; min-width: 0; } .field label { font-size: 0.82rem; font-weight: 600; color: var(--ivory); } .field input, .field select, .field textarea { background: var(--navy-800); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--white); font-family: inherit; font-size: 1rem; min-height: 46px; transition: border-color var(--dur-fast) var(--ease-standard); } .field textarea { min-height: 110px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-500); } .field input[type="file"] { padding: 9px 14px; width: 100%; min-width: 0; } .field input[type="file"]::file-selector-button { background: var(--gold-500); color: var(--navy-950); border: none; border-radius: var(--radius-sm); padding: 8px 14px; margin-right: 12px; font-weight: 600; font-family: inherit; cursor: pointer; } .photo-upload-group { display: flex; flex-direction: column; gap: 6px; } .photo-upload-group input[type="file"] { min-height: 40px; padding: 6px 12px; font-size: 0.9rem; } .field-optional { font-weight: 400; color: var(--text-faint); font-size: 0.85em; } /* Collapsible "add more details" wrapper around the form's optional fields -- keeps only the 4 required fields visible by default so the form reads as quick to complete, without removing any of the optional fields themselves. */ .form-more { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--navy-800); } .form-more summary { cursor: pointer; list-style: none; padding: 14px 16px; font-size: 0.92rem; font-weight: 600; color: var(--ivory); display: flex; align-items: center; gap: 8px; } .form-more summary::-webkit-details-marker { display: none; } .form-more summary::before { content: "+"; color: var(--gold-400); font-size: 1.15rem; line-height: 1; width: 14px; flex-shrink: 0; } .form-more[open] summary::before { content: "\2212"; } .form-more[open] summary { border-bottom: 1px solid var(--border-soft); } .form-more-body { display: none; padding: var(--space-md) var(--space-md) 0; gap: var(--space-md); } .form-more[open] .form-more-body { display: grid; } .form-more-body:last-child { padding-bottom: var(--space-md); } .checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; font-weight: 400; color: var(--ivory); cursor: pointer; } .checkbox-label input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin-top: 3px; accent-color: var(--gold-500); flex-shrink: 0; cursor: pointer; } .field-hint { font-size: 0.8rem; color: var(--text-faint); margin: var(--space-2xs) 0 0 28px; } .form-success { display: none; align-items: center; gap: var(--space-2xs); color: var(--gold-300); font-size: 0.9rem; font-weight: 600; } .form-success.is-visible { display: flex; } .form-error { display: none; color: #e8756a; font-size: 0.9rem; font-weight: 600; } .form-error a { color: inherit; text-decoration: underline; } .form-error.is-visible { display: block; } @media (max-width: 900px) { .contact .container { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 480px) { .contact-form { padding: var(--space-lg) var(--space-md); } .contact-form .btn-block { font-size: 0.88rem; padding-left: var(--space-md); padding-right: var(--space-md); } } /* ========================================================= Footer ========================================================= */ .site-footer { position: relative; background: var(--navy-950); padding: var(--space-2xl) 0 var(--space-lg); border-top: 1px solid var(--border-soft); } .site-footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--gradient-sunset-bright); opacity: 0.85; } .footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr; gap: var(--space-xl); padding-bottom: var(--space-xl); } .footer-brand .brand { margin-bottom: var(--space-sm); } .footer-brand p { font-size: 0.88rem; max-width: 32ch; } .footer-col h5 { color: var(--white); font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-sm); } .footer-col ul { display: grid; gap: 10px; } .footer-col a { font-size: 0.9rem; color: var(--text-muted); } .footer-col a:hover { color: var(--gold-400); } .footer-social { display: flex; gap: var(--space-2xs); margin-top: var(--space-sm); } .footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; } .footer-social svg { width: 17px; height: 17px; } .footer-social a:hover { border-color: var(--gold-400); color: var(--gold-400); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-lg); border-top: 1px solid var(--border-soft); font-size: 0.8rem; color: var(--text-faint); flex-wrap: wrap; gap: var(--space-sm); } .footer-bottom a:hover { color: var(--gold-400); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } .footer-brand { text-align: center; } .footer-brand .brand { justify-content: center; } .footer-social { justify-content: center; } } /* ========================================================= Sticky mobile CTA ========================================================= */ .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; padding: var(--space-sm) var(--space-md); background: rgba(5,12,24,0.92); backdrop-filter: blur(10px); border-top: 1px solid var(--border-soft); } @media (max-width: 640px) { .mobile-cta { display: block; padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom)); } body { padding-bottom: 88px; } } /* Utility */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }