/* =================================================================== Smarter Shine Co. — v2 "Open & Modern" design tokens Palette derived from the brand logo (navy, gold, evergreen), pushed into deep full-bleed color blocks the way apple.com uses color per section rather than as small accents. Type: Inter Tight (display, tight tracking) + Inter (body/text) — mirrors Apple's own SF Pro Display / SF Pro Text split. =================================================================== */ :root{ --paper: #F6F4EF; --ink: #0A0F1C; --ink-soft: #414B5C; --navy: #0B3D91; --gold: #F2B705; --gold-soft: #FBE29A; --evergreen: #0B6B3A; --evergreen-deep: #084F2B; --mist: #9AA5B1; --white: #FFFFFF; --line: rgba(10,15,28,0.12); --line-on-dark: rgba(255,255,255,0.16); --font-display: "Inter Tight", sans-serif; --font-body: "Inter", sans-serif; --wrap: 1180px; --ease: cubic-bezier(.16,.8,.28,1); } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; overflow-x: hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; } } body{ margin: 0; overflow-x: hidden; font-family: var(--font-body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; line-height: 1.6; } img{ max-width: 100%; display: block; } a{ color: inherit; text-decoration: none; } ul, ol{ margin: 0; padding: 0; list-style: none; } button{ font: inherit; } .wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 32px; } .skip-link{ position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--white); padding: 12px 18px; z-index: 999; } .skip-link:focus{ left: 0; } :focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; } /* ---------- scroll reveal ---------- */ .reveal{ opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; } } /* ---------- type ---------- */ .eyebrow{ font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 18px; } .eyebrow-light{ color: rgba(255,255,255,0.7); } .section-title{ font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.03; letter-spacing: -.02em; margin: 0 0 50px; max-width: 16ch; } .section{ padding: 130px 0; position: relative; } .section-tinted{ background: var(--white); } /* real crew/job-site photos behind a few key sections instead of flat color, each washed with that section's own brand color so it still reads as "that section" at a glance — just with texture and warmth behind it instead of a blank field. Heavy enough overlay that text contrast is untouched; the photo is texture, not a focal point. */ #services{ background-image: linear-gradient(rgba(246,244,239,0.93), rgba(246,244,239,0.93)), url('assets/backgrounds/plans-bg.jpg'); background-size: cover; background-position: center 30%; } #reviews{ background-image: linear-gradient(rgba(246,244,239,0.93), rgba(246,244,239,0.93)), url('assets/backgrounds/reviews-crew-bg.jpg'); background-size: cover; background-position: center 25%; } /* on a narrow, tall mobile section the landscape photo has to scale way up to cover the height, which crops most of its width away — retune background-position-x per photo so whoever's in it stays centered in that narrow crop window instead of getting cut off at the edges. Section padding also comes down a notch, which eases the crop ratio a bit further on top of just repositioning. */ @media (max-width: 700px){ .section{ padding: 90px 0; } /* .how's own mobile padding is set later, in the HOW IT WORKS section's own media query — a rule here would lose the cascade tie to that section's later unconditional padding:130px 0. */ #services{ background-position: 40% center; } #reviews{ background-position: 45% center; } } .section-sub{ font-size: 1.1rem; color: var(--ink-soft); max-width: 46ch; margin: 16px 0 32px; } /* ---------- buttons ---------- */ .btn{ display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; border-radius: 999px; font-weight: 600; font-size: 0.98rem; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease); } .btn:hover{ transform: translateY(-2px) scale(1.015); } .btn-gold{ background: var(--gold); color: var(--ink); } .btn-gold:hover{ box-shadow: 0 12px 30px -8px rgba(242,183,5,0.55); } .btn-ink{ background: var(--ink); color: var(--white); } .btn-ink:hover{ box-shadow: 0 12px 30px -8px rgba(10,15,28,0.4); } .btn-small{ padding: 11px 22px; font-size: 0.88rem; } .btn-full{ width: 100%; } /* golden shine/glimmer — a soft pulsing glow plus a light sweep that crosses the button every few seconds, like sun catching clean glass */ .btn-shine{ position: relative; overflow: hidden; isolation: isolate; animation: btnGlow 3.2s ease-in-out infinite; } .btn-shine span{ position: relative; z-index: 2; } .btn-shine::after{ content: ""; position: absolute; top: -50%; bottom: -50%; left: -60%; width: 40%; background: linear-gradient(75deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: btnSweep 3.2s ease-in-out infinite; z-index: 1; } @keyframes btnSweep{ 0%, 30%{ left: -60%; } 60%, 100%{ left: 130%; } } @keyframes btnGlow{ 0%, 100%{ box-shadow: 0 0 0 0 rgba(242,183,5,0.45), 0 12px 26px -10px rgba(242,183,5,0.5); } 50%{ box-shadow: 0 0 22px 6px rgba(242,183,5,0.55), 0 12px 30px -8px rgba(242,183,5,0.7); } } @media (prefers-reduced-motion: reduce){ .btn-shine{ animation: none; } .btn-shine::after{ animation: none; display: none; } } .text-link{ display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.98rem; padding-bottom: 2px; border-bottom: 1.5px solid var(--ink); transition: gap .25s var(--ease), opacity .25s var(--ease); } .text-link:hover{ gap: 10px; opacity: .7; } /* =================================================================== NAV =================================================================== */ .site-nav{ position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease); } .nav-inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 32px; height: 76px; display: flex; align-items: center; gap: 32px; } .nav-brand{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-right: auto; color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; white-space: nowrap; transition: color .4s var(--ease); } .nav-brand-mark{ flex-shrink: 0; } /* logo mark: bigger, full opacity, with a soft gold glow that pulses around its actual silhouette (not a rectangular box) — a ::before duplicates the same PNG as a mask on a solid-gold, blurred, slightly oversized layer sitting behind it, so the glow traces the logo's real edges regardless of its shape. */ .nav-brand-mark{ position: relative; display: block; isolation: isolate; } .nav-brand-mark img{ position: relative; z-index: 1; height: 46px; width: auto; display: block; } .nav-brand-mark::before{ content: ""; position: absolute; inset: -7px; background: var(--gold); -webkit-mask: var(--logo-mask) center / contain no-repeat; mask: var(--logo-mask) center / contain no-repeat; filter: blur(5px); opacity: .85; animation: logoGlow 3.2s ease-in-out infinite; z-index: 0; } @keyframes logoGlow{ 0%, 100%{ opacity: .55; filter: blur(4px); } 50%{ opacity: 1; filter: blur(7px); } } @media (prefers-reduced-motion: reduce){ .nav-brand-mark::before{ animation: none; opacity: .8; } } @media (max-width: 880px){ .nav-brand-mark img{ height: 38px; } } .nav-links{ display: flex; gap: 30px; } .nav-links a{ color: rgba(255,255,255,0.85); font-weight: 500; font-size: 0.94rem; transition: color .4s var(--ease); } /* while the nav is still transparent over the hero, give the links (and brand wordmark) a bit of shadow so they hold up against a bright, unfiltered video background instead of a dark scrim */ .site-nav:not(.scrolled) .nav-links a, .site-nav:not(.scrolled) .nav-brand{ text-shadow: 0 2px 10px rgba(0,0,0,0.55); } .nav-links a:hover{ color: var(--gold); } .nav-links a.active{ color: var(--gold); } .site-nav.scrolled .nav-links a.active{ color: var(--navy); } .nav-cta{ flex-shrink: 0; white-space: nowrap; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .nav-toggle{ display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; } .nav-toggle span{ display: block; width: 22px; height: 2px; background: var(--white); transition: background .4s var(--ease); } .mobile-nav{ display: none; flex-direction: column; gap: 2px; padding: 8px 32px 24px; } .mobile-nav a{ padding: 14px 4px; font-weight: 500; color: var(--white); border-bottom: 1px solid var(--line-on-dark); } .mobile-nav .btn{ margin-top: 16px; } .site-nav.menu-open .mobile-nav{ display: flex; } .site-nav.menu-open{ background: var(--ink); } .site-nav.scrolled{ background: rgba(246,244,239,0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .site-nav.scrolled .nav-brand, .site-nav.scrolled .nav-links a{ color: var(--ink); } .site-nav.scrolled .nav-links a:hover{ color: var(--navy); } .site-nav.scrolled .nav-toggle span{ background: var(--ink); } /* .scrolled and .menu-open have equal specificity and .scrolled comes later in the file, so opening the mobile menu after scrolling had .scrolled's translucent paper background win over .menu-open's solid ink one — mobile-nav's links are always white text (they don't get a .scrolled dark-text override, since they're only ever meant to sit on a solid dark panel), so that translucent-bg case read as "menu goes clear with white text," unreadable. Forcing the combined state back to the same solid ink panel it uses at the top of the page fixes it regardless of scroll position. */ .site-nav.scrolled.menu-open{ background: var(--ink); backdrop-filter: none; border-bottom: none; } .site-nav.scrolled.menu-open .nav-toggle span{ background: var(--white); } @media (max-width: 880px){ .nav-links, .nav-cta{ display: none; } .nav-toggle{ display: flex; } } /* ---------- Services dropdown ---------- Desktop: hover/focus reveals a flat 4-item menu (the umbrella terms only). Window Cleaning and Power Washing have sub-services, so they get a right-facing arrow and a second-level flyout submenu on hover/focus; Gutter Cleaning and Christmas Light Installation have no sub-services, so they're plain links with no arrow — "when applicable" per the user's own phrasing. Mobile: a native
disclosure inside the slide-out mobile nav (no hover on touch), with a *nested*
for the two umbrella terms that have sub-services — same JS-free pattern the FAQ accordion already uses. Selector specificity on the link-color/text-shadow overrides below is deliberately matched to the base .nav-links rules they override (3 classes + 1 element) and placed after them in the file, so they win the cascade tie on source order without reaching for !important — see the environment notes memory for why that matters here. Hover-bridge gotcha: .nav-dropdown-menu sits 14px below the trigger (a real visual gap, not flush) so a straight-down mouse path from the trigger crosses dead space with nothing under the cursor — losing :hover on .nav-item-dropdown before the menu is reached. The ::before pseudo-element below is an invisible strip that exactly fills that gap and is itself a descendant of .nav-item-dropdown, so hovering through it keeps the dropdown open the whole way down. The second-level flyout doesn't need this trick since it's flush (left: 100%, no gap) against the row that opens it. */ .nav-item-dropdown{ position: relative; display: flex; align-items: center; } .nav-item-dropdown::before{ content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } .nav-dropdown-trigger{ display: flex; align-items: center; gap: 6px; } .nav-dropdown-caret{ width: 9px; height: 9px; flex-shrink: 0; transition: transform .3s var(--ease); } .nav-item-dropdown:hover .nav-dropdown-caret, .nav-item-dropdown:focus-within .nav-dropdown-caret{ transform: rotate(180deg); } .nav-dropdown-menu{ position: absolute; top: 100%; left: 50%; transform: translate(-50%, 4px); margin-top: 14px; min-width: 240px; background: var(--white); border-radius: 16px; box-shadow: 0 24px 48px -20px rgba(10,15,28,0.38); padding: 10px; display: grid; gap: 1px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index: 60; } .nav-item-dropdown:hover .nav-dropdown-menu, .nav-item-dropdown:focus-within .nav-dropdown-menu{ opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .site-nav .nav-links .nav-dropdown-menu a{ color: var(--ink); text-shadow: none; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 9px; font-size: .92rem; font-weight: 600; white-space: nowrap; } .site-nav .nav-links .nav-dropdown-menu a:hover{ background: var(--paper); color: var(--navy); } .site-nav .nav-links .nav-dropdown-submenu a{ font-weight: 500; font-size: .9rem; } /* rows with a sub-service flyout */ .nav-dropdown-item{ position: relative; } .nav-dropdown-item.has-submenu > a{ justify-content: space-between; } .nav-dropdown-caret-right{ width: 7px; height: 12px; flex-shrink: 0; color: var(--mist); } .nav-dropdown-submenu{ position: absolute; left: 100%; top: -10px; min-width: 240px; background: var(--white); border-radius: 16px; box-shadow: 0 24px 48px -20px rgba(10,15,28,0.38); padding: 10px; display: grid; gap: 1px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--ease), visibility .2s; z-index: 61; } .nav-dropdown-item.has-submenu:hover .nav-dropdown-submenu, .nav-dropdown-item.has-submenu:focus-within .nav-dropdown-submenu{ opacity: 1; visibility: visible; pointer-events: auto; } /* mobile: native disclosure, same visual language as .mobile-nav a */ .mobile-nav-services{ border-bottom: 1px solid var(--line-on-dark); } /* ">" (direct-child) throughout this block on purpose — plain descendant selectors here also matched the nested .mobile-nav-submenu summaries (Window Cleaning / Power Washing), since those sit inside .mobile-nav-services too. That's what put a stray extra "−" next to those rows once Services itself was open, on top of their own toggle — real bug, not just a style preference. */ .mobile-nav-services > summary{ padding: 14px 4px; font-weight: 500; color: var(--white); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .mobile-nav-services > summary::-webkit-details-marker{ display: none; } .mobile-nav-services > summary::after{ content: "+"; font-size: 1.3rem; color: rgba(255,255,255,0.6); } .mobile-nav-services[open] > summary::after{ content: "\2212"; } .mobile-nav-services-list{ display: flex; flex-direction: column; gap: 2px; padding: 0 4px 14px 14px; } .mobile-nav-services-list > a{ padding: 10px 4px; font-size: .9rem; color: rgba(255,255,255,0.75); border-bottom: none; } /* nested disclosure for Window Cleaning / Power Washing on mobile — the inside takes click priority for navigation, so tapping the label navigates while tapping elsewhere in the row (the arrow) toggles the sub-list open, same dual behavior as the desktop hover+link row above. */ .mobile-nav-submenu summary{ display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; } .mobile-nav-submenu summary::-webkit-details-marker{ display: none; } .mobile-nav-submenu summary > a{ flex: 1; padding: 10px 4px; font-size: .9rem; color: rgba(255,255,255,0.75); } /* same +/− pattern as .mobile-nav-services summary::after, not the rotating "›" this used before — kept consistent per the user's explicit request rather than having two different toggle styles for the two disclosure levels in this menu. */ .mobile-nav-submenu summary::after{ content: "+"; padding: 10px 10px 10px 6px; font-size: 1.1rem; color: rgba(255,255,255,0.5); } .mobile-nav-submenu[open] summary::after{ content: "\2212"; } .mobile-nav-submenu-list{ display: flex; flex-direction: column; gap: 2px; padding-left: 16px; } .mobile-nav-submenu-list a{ padding: 9px 4px; font-size: .86rem; color: rgba(255,255,255,0.62); border-bottom: none; } @media (max-width: 880px){ .nav-item-dropdown{ display: none; } /* desktop-only trigger; mobile uses .mobile-nav-services instead */ } /* =================================================================== HERO =================================================================== */ .hero{ position: relative; height: 100vh; min-height: 640px; display: flex; align-items: center; overflow: hidden; background: var(--ink); } /* Hero visual (Aug 2026 redesign, 4th pass): back to a single full-bleed image, every width — the separate narrow portrait column is gone, per the user's explicit call to drop it entirely. Just assets/hero-bg-wide.jpg (1672x941 landscape) via object-fit: cover. On a narrow tall mobile viewport that crops hard on width (same shape of problem as the .how-photo-band fix elsewhere in this file), a naive center crop only shows the spray wand and half the string lights, missing the brush and gutter entirely. Verified by generating actual crop previews at several object-position values (not just eyeballing in the browser) — 55% is the one where all four elements (wand+spray top-left, lights top-right, brush bottom-left, gutter bottom-right) land inside the visible strip, same "all four services visible" spirit as the original dedicated portrait image this replaced. */ .hero-visual{ position: absolute; inset: 0; overflow: hidden; } .hero-bg-img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } @media (max-width: 900px){ .hero-bg-img{ object-position: 55% center; } } /* no scrim, no blur — the new hero clip is shown clean. .hero-haze stays in the DOM (opacity still driven by scroll in script.js) purely as the hook that also drives the hero-copy scroll-fade; it no longer paints anything itself. */ .hero-haze{ position: absolute; inset: 0; opacity: 0; } .hero-copy{ position: relative; z-index: 2; width: 100%; text-align: center; padding: 76px 24px 0; } /* no scrim behind the copy anymore, so text leans on shadow alone for contrast against the raw video */ .hero-copy .eyebrow-light{ text-shadow: 0 2px 14px rgba(0,0,0,0.7); } .hero-title{ font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 9vw, 7.2rem); line-height: .96; letter-spacing: -.03em; color: var(--white); margin: 0 0 24px; text-shadow: 0 4px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.5); } .hero-sub{ font-size: clamp(1.2rem, 2.2vw, 1.55rem); font-weight: 500; color: rgba(255,255,255,0.92); max-width: 52ch; margin: 0 auto 40px; text-shadow: 0 2px 16px rgba(0,0,0,0.6); } .hero-actions{ display: flex; justify-content: center; } .hero-logo{ width: clamp(56px, 9vw, 84px); height: auto; margin: 0 auto 18px; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5)); } .scroll-cue{ position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; } .scroll-cue-line{ display: block; width: 1px; height: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.1)); } .scroll-cue-arrow{ color: rgba(255,255,255,0.9); animation: cueArrow 2s ease-in-out infinite; } @keyframes cueArrow{ 0%{ opacity: 0; transform: translateY(-6px); } 40%{ opacity: 1; transform: translateY(0); } 60%{ opacity: 1; transform: translateY(3px); } 100%{ opacity: 0; transform: translateY(9px); } } @media (prefers-reduced-motion: reduce){ .scroll-cue-arrow{ animation: none; opacity: .8; } } /* =================================================================== PLANS — service tabs (all 4 in a line) + video/plans panel =================================================================== */ /* all 4 services in a single row, same shape at every width — on a phone the row is wider than the screen so it scrolls horizontally (native touch scroll, no JS needed) instead of wrapping or shrinking labels down to illegibility. A soft edge mask hints there's more to scroll to, same technique as the reviews-wall columns use. */ .plans-tabs{ display: flex; justify-content: center; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: -8px 0 48px; padding: 4px 20px 10px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } .plans-tabs::-webkit-scrollbar{ display: none; } .plans-tab{ flex-shrink: 0; white-space: nowrap; padding: 13px 24px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); font-family: var(--font-display); font-weight: 700; font-size: .96rem; color: var(--ink-soft); cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .plans-tab:hover{ border-color: var(--gold); color: var(--ink); } .plans-tab.is-active{ background: var(--gold); border-color: var(--gold); color: var(--ink); } /* below 640px, show all 4 services at once as a 2x2 grid instead of a horizontal-scroll row — easier to discover than a swipeable row that only hints at more content off-screen. Placed AFTER the base .plans-tabs/.plans-tab rules above on purpose — media queries add no specificity, so an equal-specificity override earlier in the file loses the cascade tie to a later unconditional rule regardless of the media query. (Same bug pattern as the .how background-size fix documented in the environment notes memory — this is the third instance of it, hit again by not re-reading that note before adding this block the first time.) min-width:0 is additionally needed because CSS Grid's default 1fr track minimum is `auto`, not `0` — without it the track refuses to shrink below the button's unwrapped min-content width even once white-space:normal is correctly applied, which pushed the second column off the right edge of the viewport (the actual "cutting off" / off-center bug reported). */ @media (max-width: 639px){ .plans-tabs{ display: grid; grid-template-columns: repeat(2, 1fr); overflow-x: visible; -webkit-mask-image: none; mask-image: none; padding: 4px 4px 10px; } .plans-tab{ min-width: 0; white-space: normal; text-align: center; padding: 13px 10px; } } /* mobile-first: play button, then a swipeable, peeking carousel of that service's 3 plans. Same shape at every width — it just gets more breathing room on larger screens — since this is the layout the mobile experience is designed around first. */ .plans-panel{ transition: opacity .3s var(--ease), transform .3s var(--ease); } .plans-panel.is-switching{ opacity: 0; transform: translateY(6px); } /* deck of cards: 3 plan cards always in the DOM, each tagged data-pos="front|left|right". Swapping which plan sits in which slot (on swipe/arrow/service-switch) only changes that attribute, so the position change animates for free via the transition below — no content re-render needed for the shuffle itself, just for a service switch (which also crossfades the whole panel, handled separately). */ .plans-carousel-wrap{ position: relative; } .deck{ position: relative; max-width: 380px; min-height: 430px; /* fallback for the instant before script.js measures real content and sets an explicit px height */ margin: 0 auto; touch-action: pan-y; } .deck-card{ position: absolute; top: 0; left: 50%; width: 74%; height: 100%; /* all 3 cards always match — script.js sets .deck's height to the tallest card's natural content height */ background: var(--white); border-radius: 22px; border-top: 6px solid var(--accent, var(--gold)); padding: 28px 24px; box-shadow: 0 20px 40px -26px rgba(10,15,28,0.3); display: flex; flex-direction: column; gap: 10px; cursor: grab; transition: transform .5s cubic-bezier(.22,.68,0,1), opacity .4s var(--ease); } .deck-card:active{ cursor: grabbing; } .deck-card[data-pos="front"]{ transform: translate(-50%, 0) scale(1) rotate(0deg); z-index: 3; opacity: 1; } .deck-card[data-pos="left"]{ transform: translate(calc(-50% - 58px), 10px) scale(.9) rotate(-7deg); z-index: 1; opacity: .9; } .deck-card[data-pos="right"]{ transform: translate(calc(-50% + 58px), 10px) scale(.9) rotate(7deg); z-index: 1; opacity: .9; } .deck-card-tag{ align-self: flex-start; background: var(--accent, var(--gold)); color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; } .deck-card h3{ font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 4px 0 0; } .deck-card-desc{ color: var(--ink-soft); font-size: .96rem; line-height: 1.55; margin: 0; } .deck-card ul{ margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; } .deck-card li{ font-size: .9rem; color: var(--ink-soft); padding-left: 20px; position: relative; } .deck-card li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--gold)); } .deck-card-price{ display: flex; align-items: baseline; gap: 8px; margin-top: 4px; } .deck-card-num{ font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; } .deck-card-numlabel{ font-size: .85rem; color: var(--ink-soft); font-weight: 600; } .deck-card .btn{ margin-top: auto; align-self: flex-start; pointer-events: auto; } .deck-card[data-pos="left"] .btn, .deck-card[data-pos="right"] .btn{ pointer-events: none; } .plans-carousel-arrow{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(10,15,28,0.1); background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 8px 20px -6px rgba(10,15,28,0.3); color: var(--ink); font-size: 1rem; cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .plans-carousel-prev{ left: -6px; } .plans-carousel-next{ right: -6px; } .plans-carousel-arrow:hover{ background: var(--gold); border-color: var(--gold); transform: translateY(-50%) scale(1.08); } @media (prefers-reduced-motion: reduce){ .deck-card{ transition: opacity .3s var(--ease); } } @media (min-width: 640px){ .deck{ max-width: 440px; } .deck-card{ width: 62%; } .deck-card[data-pos="left"]{ transform: translate(calc(-50% - 90px), 12px) scale(.88) rotate(-8deg); } .deck-card[data-pos="right"]{ transform: translate(calc(-50% + 90px), 12px) scale(.88) rotate(8deg); } } @media (min-width: 900px){ .deck{ max-width: 560px; min-height: 400px; } .deck-card{ width: 46%; min-height: 380px; } .deck-card[data-pos="left"]{ transform: translate(calc(-50% - 150px), 14px) scale(.86) rotate(-8deg); } .deck-card[data-pos="right"]{ transform: translate(calc(-50% + 150px), 14px) scale(.86) rotate(8deg); } .plans-carousel-prev{ left: -18px; } .plans-carousel-next{ right: -18px; } } /* soften the hard paper->navy color cut at the How It Works section's top/bottom edges, so scrolling past reads as a blend rather than a snap (used to also cover .areas, removed along with that section) */ .how::before, .how::after{ content: ""; position: absolute; left: 0; right: 0; height: 100px; pointer-events: none; z-index: 1; } .how::before{ top: 0; background: linear-gradient(to bottom, rgba(246,244,239,0.4), transparent); } .how::after{ bottom: 0; background: linear-gradient(to top, rgba(246,244,239,0.4), transparent); } /* =================================================================== TRUST / REVIEWS =================================================================== */ .stat-row{ display: flex; justify-content: center; gap: 80px; flex-wrap: wrap; text-align: center; margin-bottom: 90px; } .stat{ display: flex; flex-direction: column; } .stat-num{ font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 6vw, 4.4rem); letter-spacing: -.02em; line-height: 1; } .stat-stars{ margin-top: 8px; color: var(--gold); font-size: 1.1rem; letter-spacing: .12em; } .stat-label{ margin-top: 10px; font-size: .92rem; color: var(--ink-soft); font-weight: 500; } /* ---------- reviews wall: two scrolling pillars + center content ---------- Left/right columns are each a tall, overflow-hidden frame containing a track of review cards duplicated once; animating the track from 0 to -50% (or reverse) loops seamlessly forever since the second half is an exact copy of the first. A top/bottom mask fades cards in/out at the frame edges instead of hard-cropping them. */ .reviews-wall{ display: grid; grid-template-columns: 240px 1fr 240px; align-items: center; gap: 36px; margin-top: 56px; } .review-col{ height: 560px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%); } .review-col-track{ display: flex; flex-direction: column; gap: 18px; } .review-col-up .review-col-track{ animation: reviewsMarquee 42s linear infinite; } .review-col-down .review-col-track{ animation: reviewsMarquee 36s linear infinite reverse; } .review-col:hover .review-col-track{ animation-play-state: paused; } @keyframes reviewsMarquee{ from{ transform: translateY(0); } to{ transform: translateY(-50%); } } @media (prefers-reduced-motion: reduce){ .review-col-track{ animation: none !important; } } .review-card{ background: var(--white); border-radius: 16px; padding: 22px 20px; box-shadow: 0 14px 30px -20px rgba(10,15,28,0.2); } .review-card-stars{ display: block; color: var(--gold); font-size: .8rem; letter-spacing: .14em; margin-bottom: 10px; } .review-card p{ font-size: .92rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 12px; } .review-card cite{ display: block; font-style: normal; font-weight: 700; font-size: .85rem; color: var(--ink); } .reviews-center{ text-align: center; } .reviews-center .stat-row{ margin-bottom: 40px; } .reviews-center .video-frame{ margin: 0 auto 36px; } @media (max-width: 980px){ .reviews-wall{ grid-template-columns: 1fr; } .review-col{ display: none; } } /* =================================================================== HOW IT WORKS =================================================================== */ .how{ background: linear-gradient(rgba(11,61,145,0.87), rgba(11,61,145,0.87)), url('assets/backgrounds/how-bg.jpg'); background-size: cover; background-position: center 35%; color: var(--white); padding: 130px 0; position: relative; } /* .how got much taller once its 4 steps grew richer, which pushed the cover-sized photo into an extreme crop (only ~10-15% of its width visible on a narrow phone) — it read as an unrecognizable smear rather than a photo. A first fix tried rendering the photo at its own full uncropped width instead (background-size: 100% auto), but against a section this tall that just reads as a small, oddly proportioned photo strip floating at the top over a huge flat field below it — not actually fixed, just a different-looking version of the same size mismatch. Real fix: stop trying to make one background image serve a section whose height has nothing to do with the photo's own aspect ratio. .how-photo-band (markup: right after
) is a separate, fixed-height element that gets its own background-size:cover crop — properly filling its own box no matter how tall the rest of .how's content grows. Hidden on desktop where the original full-bleed cover treatment already works fine (that section isn't nearly as disproportionately tall there). */ .how-photo-band{ display: none; } @media (max-width: 700px){ /* padding-top set explicitly here (not just relying on the earlier, general ".how{padding:90px 0}" mobile override near the top of this file) because that earlier rule loses the cascade tie to .how's later unconditional "padding:130px 0" in the HOW IT WORKS section below — same equal-specificity/source-order gotcha this project has hit twice before (see the environment notes memory). Redeclaring it here, after that unconditional rule, wins outright and keeps the -90px margin below actually correct. */ .how{ padding-top: 90px; background-image: linear-gradient(rgba(11,61,145,0.87), rgba(11,61,145,0.87)); } .how-photo-band{ display: block; height: 220px; /* negative top margin cancels .how's own 90px top padding so this sits flush at the section's edge, full-bleed, in normal flow — no absolute positioning needed, so it can't overlap the heading text below it the way an absolutely-positioned band would without careful offset math on .wrap. */ margin: -90px 0 32px; background-image: linear-gradient(rgba(11,61,145,0.35), rgba(11,61,145,0.6)), url('assets/backgrounds/how-bg.jpg'); background-size: cover; background-position: center 30%; } } .how-title{ color: var(--white); } /* back to a simple, even 3-column grid now that every step is just a number + short copy (one has a button) — no more per-step content that varies wildly in height, so the equal-height grid that the richer version couldn't use works great again. */ .how-steps{ display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; border-top: 1px solid var(--line-on-dark); } .how-step{ position: relative; padding: 36px 0 0; } .how-step:not(:first-child)::before{ content: ""; position: absolute; left: -24px; top: 36px; bottom: 4px; width: 1px; background: var(--line-on-dark); } .how-num{ display: block; font-family: var(--font-display); font-weight: 200; font-size: 3rem; line-height: 1; color: rgba(255,255,255,0.35); margin-bottom: 18px; } .how-step-body h3{ font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; } .how-step-body p{ font-size: .95rem; line-height: 1.55; color: rgba(255,255,255,0.65); margin: 0 0 18px; max-width: 32ch; } @media (max-width: 860px){ .how-steps{ grid-template-columns: 1fr; row-gap: 32px; } .how-step:not(:first-child)::before{ display: none; } .how-step:not(:first-child){ border-top: 1px solid var(--line-on-dark); padding-top: 28px; } } /* =================================================================== CONTACT =================================================================== */ .contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contact-grid-reverse .question-form{ order: 2; } .contact-grid-reverse .contact-lead{ order: 1; } .contact-info{ display: flex; flex-direction: column; gap: 14px; margin-top: 36px; } .contact-info a{ font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; } .contact-info span{ color: var(--ink-soft); font-size: .95rem; } .contact-socials{ display: flex; gap: 18px; margin-top: 6px; font-size: .92rem; font-weight: 600; } .contact-socials a:hover{ color: var(--navy); } .field{ margin-bottom: 26px; display: flex; flex-direction: column; gap: 8px; } .field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field-row .field{ margin-bottom: 0; } label{ font-size: .8rem; font-weight: 600; color: var(--ink-soft); } input, select, textarea{ font-family: var(--font-body); font-size: 1rem; padding: 10px 2px; border: none; border-bottom: 1.5px solid var(--line); background: transparent; color: var(--ink); border-radius: 0; } input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--navy); } textarea{ resize: vertical; } .quote-form, .question-form{ margin-top: 4px; } .quote-form .btn, .question-form .btn{ margin-top: 12px; } .form-status{ min-height: 1.4em; font-size: .9rem; color: var(--navy); margin: 14px 0 0; font-weight: 600; } .form-status-success{ color: var(--evergreen); font-size: 1.05rem; } @media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; gap: 48px; } /* was gap:0 — collapsing a field-row to one column with no gap left stacked fields touching with zero breathing room between them (e.g. Last Name's label sitting right against First Name's input). 26px matches .field's own margin-bottom so stacked field-row items read identically to regular stacked fields. */ .field-row{ grid-template-columns: 1fr; gap: 26px; } } /* =================================================================== FOOTER =================================================================== */ .site-footer{ background: var(--ink); color: var(--mist); padding-top: 64px; position: relative; } .footer-grid{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; padding-bottom: 44px; border-bottom: 1px solid var(--line-on-dark); } .footer-brand img{ height: 34px; margin-bottom: 14px; border-radius: 6px; } .footer-brand p{ font-size: .88rem; } .footer-nav{ display: flex; flex-direction: column; gap: 12px; } .footer-nav a:hover, .footer-contact a:hover{ color: var(--gold); } .footer-contact{ display: flex; flex-direction: column; gap: 12px; font-size: .95rem; } .footer-socials{ display: flex; gap: 16px; margin-top: 4px; font-size: .88rem; } .footer-bottom{ padding: 22px 32px 30px; font-size: .82rem; } @media (max-width: 700px){ .footer-grid{ grid-template-columns: 1fr; } } /* =================================================================== REALISTIC WATER DROPLETS + PUDDLES Fixed over the whole page, sliding down like real rain on a window pane. Each drop/puddle uses backdrop-filter to sample and blur whatever is genuinely behind it, so it looks right over the video, the dark sections, and the light sections alike. In Chrome, an SVG feDisplacementMap filter (defined inline in the HTML) adds true optical refraction on top of that; everywhere else falls back to the blur+gloss look, which already reads fine. Lanes are biased toward the page's left/right margins so the fall is noticeable without sliding directly over the reading column. script.js nudges each drop's lane very slightly between fall cycles so they don't repeat an identical path forever. =================================================================== */ .glass-fx-defs{ position: absolute; width: 0; height: 0; overflow: hidden; } .glass-fx{ position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; } .droplet{ position: absolute; top: -8%; border-radius: 62% 38% 55% 45% / 45% 55% 45% 55%; background: radial-gradient(circle at 30% 24%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.22) 24%, rgba(255,255,255,0.02) 46%), radial-gradient(circle at 68% 78%, rgba(0,0,0,0.05), transparent 65%); box-shadow: inset -2px -3px 4px rgba(0,0,0,0.18), inset 2px 3px 3px rgba(255,255,255,0.55), 0 3px 7px rgba(0,0,0,0.14); backdrop-filter: blur(1.5px) saturate(1.15); -webkit-backdrop-filter: blur(1.5px) saturate(1.15); opacity: 0; animation-name: dropletFall; animation-timing-function: cubic-bezier(.4,0,.65,1); animation-iteration-count: infinite; } @supports (backdrop-filter: url(#dropRefract)) or (-webkit-backdrop-filter: url(#dropRefract)){ .droplet{ backdrop-filter: url(#dropRefract) blur(0.5px) saturate(1.2); -webkit-backdrop-filter: url(#dropRefract) blur(0.5px) saturate(1.2); } } /* the fall itself only occupies the first ~58% of the cycle; the rest is a genuine invisible rest before the next drop — fewer drops falling at once, and each one spawns less often, not just slower */ @keyframes dropletFall{ 0%{ opacity: 0; transform: translate(0, 0) scale(0.7); } 4%{ opacity: .8; transform: translate(1px, 6vh) scale(1); } 22%{ opacity: .78; transform: translate(-4px, 42vh) scale(1.03); } 40%{ opacity: .55; transform: translate(3px, 80vh) scale(0.98); } 52%{ opacity: .2; transform: translate(-1px, 103vh) scale(0.85); } 58%, 100%{ opacity: 0; transform: translate(0, 112vh) scale(0.8); } } .droplet:nth-child(1){ left: 4%; width: 11px; height: 15px; animation-duration: 15s; animation-delay: -1s; } .droplet:nth-child(2){ left: 94%; width: 8px; height: 11px; animation-duration: 18s; animation-delay: -9s; } .droplet:nth-child(3){ left: 10%; width: 7px; height: 9px; animation-duration: 13s; animation-delay: -5s; } .droplet:nth-child(4){ left: 89%; width: 13px; height: 17px; animation-duration: 20s; animation-delay: -14s; } .droplet:nth-child(5){ left: 2%; width: 9px; height: 12px; animation-duration: 16s; animation-delay: -7s; } .puddle{ position: absolute; bottom: -3%; border-radius: 50% 50% 45% 55% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 60%, transparent 75%); box-shadow: inset 0 2px 6px rgba(255,255,255,0.22), inset 0 -3px 8px rgba(0,0,0,0.1); backdrop-filter: blur(2px) saturate(1.1); -webkit-backdrop-filter: blur(2px) saturate(1.1); opacity: 0; animation-name: puddleDrift; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @supports (backdrop-filter: url(#dropRefract)) or (-webkit-backdrop-filter: url(#dropRefract)){ .puddle{ backdrop-filter: url(#dropRefract) blur(1px) saturate(1.15); -webkit-backdrop-filter: url(#dropRefract) blur(1px) saturate(1.15); } } @keyframes puddleDrift{ 0%{ opacity: 0; transform: translateX(0) scale(0.92); } 20%{ opacity: .5; transform: translateX(10px) scale(1); } 50%{ opacity: .55; transform: translateX(-14px) scale(1.03); } 80%{ opacity: .35; transform: translateX(8px) scale(0.97); } 100%{ opacity: 0; transform: translateX(0) scale(0.92); } } .puddle:nth-child(6){ left: -3%; width: 160px; height: 46px; animation-duration: 18s; animation-delay: -3s; } .puddle:nth-child(7){ left: 42%; width: 110px; height: 32px; animation-duration: 22s; animation-delay: -11s; } .puddle:nth-child(8){ right: -4%; width: 190px; height: 52px; animation-duration: 20s; animation-delay: -7s; } @media (prefers-reduced-motion: reduce){ .droplet, .puddle{ animation: none; opacity: .35; } } @media (max-width: 600px){ .droplet:nth-child(5){ display: none; } .puddle:nth-child(7){ display: none; } } /* =================================================================== FLOATING QUOTE BUTTON Persistent bottom-right CTA, shown once the visitor scrolls past the page's opening section and hidden again once the contact form itself is on screen (no point floating a button over the form it points to). Works on every page since it only depends on scroll position, not any hero-specific markup. =================================================================== */ .floating-cta{ position: fixed; right: 24px; bottom: 24px; z-index: 90; box-shadow: 0 16px 32px -12px rgba(10,15,28,0.45); opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); } .floating-cta.is-visible{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } @media (max-width: 640px){ .floating-cta{ right: 16px; bottom: 16px; padding: 13px 22px; font-size: .88rem; } } @media (prefers-reduced-motion: reduce){ .floating-cta{ transition: opacity .2s linear; transform: none; } .floating-cta.is-visible{ transform: none; } } /* =================================================================== SERVICES — hub, individual/umbrella pages, and city landing pages Replaces the old hover/tap house-photo feature (Aug 2026) with a panther-powerwashing.com-style structure: a nav dropdown of 8 individual service pages. 6 of those are narrower pages nested under one of two umbrella terms (Exterior/Interior Window Cleaning under "Window Cleaning"; House Washing/Roof Washing/Driveway & Concrete Cleaning/Pressure Washing under "Power Washing"); the other 2 (Gutter Cleaning, Christmas Light Installation) have no narrower split, so the same page serves as both dropdown item and umbrella. Only the 4 umbrellas get real per-city landing pages — a narrow page's city list links to its umbrella+city, not a page-per-narrow- service-per-city. See the generator script for the full URL map. =================================================================== */ /* ---------- shared hero (hub + every individual/umbrella/city page) ---------- */ .service-hero{ padding: 168px 0 64px; text-align: center; background: var(--ink); color: var(--white); } .service-hero .eyebrow{ color: rgba(255,255,255,0.65); } .service-hero-title{ color: var(--white); max-width: 22ch; margin: 0 auto; } .service-hero .section-sub{ color: rgba(255,255,255,0.72); max-width: 56ch; margin: 0 auto 32px; } .service-hero-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* breadcrumb — top of the first light section on individual/city pages */ .service-breadcrumb{ font-size: .82rem; color: var(--ink-soft); margin-bottom: 18px; } .service-breadcrumb a{ color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; } .service-breadcrumb a:hover{ color: var(--navy); } /* ---------- services hub (/services/) — grouped overview grid ---------- */ .services-overview-group{ margin-bottom: 64px; } .services-overview-group:last-child{ margin-bottom: 0; } .services-overview-group-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; } .services-overview-group-head h2{ font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 0; } .services-overview-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .services-overview-card{ background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 26px; display: flex; flex-direction: column; gap: 8px; transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .services-overview-card:hover{ border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(10,15,28,0.35); } .services-overview-card h3{ font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; margin: 0; } .services-overview-card p{ font-size: .9rem; color: var(--ink-soft); margin: 0; } /* ---------- individual / umbrella / city page body ---------- */ /* pill row of sibling service pages — same shape as .plans-tab so it reads as a consistent site pattern. Lives as the last item inside the main content .wrap (not its own full-padding .section) so it sits close to the content above it and the closing CTA band below, rather than floating in a lot of empty space on either side. */ .service-siblings{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 28px 0 0; border-top: 1px solid var(--line); } .service-siblings a{ padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--line); font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--ink-soft); transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); } .service-siblings a:hover{ border-color: var(--gold); color: var(--ink); } .service-siblings a.is-current{ background: var(--gold); border-color: var(--gold); color: var(--ink); } .service-section{ margin-bottom: 72px; } .service-section:last-child{ margin-bottom: 0; } .service-section h2{ font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -.01em; margin: 0 0 20px; max-width: 26ch; } .service-section > p{ font-size: 1.05rem; color: var(--ink-soft); max-width: 68ch; margin: 0 0 20px; } .service-features{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 28px; } .service-feature{ background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 26px; } .service-feature h3{ font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; } .service-feature p{ font-size: .92rem; color: var(--ink-soft); margin: 0; line-height: 1.55; } /* 4-step process — light-background sibling of .how-steps (that one's locked to a dark 3-column layout), sized for up to 4 columns since some service pages need a 4th step */ .process-steps{ display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 32px; border-top: 1px solid var(--line); margin-top: 28px; } .process-step{ position: relative; padding: 32px 0 0; } .process-step:not(:first-child)::before{ content: ""; position: absolute; left: -16px; top: 32px; bottom: 4px; width: 1px; background: var(--line); } .process-num{ display: block; font-family: var(--font-display); font-weight: 200; font-size: 2.6rem; line-height: 1; color: var(--mist); margin-bottom: 14px; } .process-step h3{ font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; } .process-step p{ font-size: .9rem; line-height: 1.55; color: var(--ink-soft); margin: 0; } @media (max-width: 860px){ .process-steps{ grid-template-columns: repeat(2, 1fr); row-gap: 32px; } .process-step:nth-child(odd)::before{ display: none; } } @media (max-width: 560px){ .process-steps{ grid-template-columns: 1fr; } .process-step::before{ display: none; } } /* ---------- city list (on the 4 umbrella pages, and on the narrower pages nested under one — those link out to umbrella+city) ---------- */ .city-grid-section{ background: var(--paper); } .city-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 8px; } .city-chip{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ink); transition: border-color .3s var(--ease), transform .3s var(--ease); } .city-chip:hover{ border-color: var(--gold); transform: translateY(-2px); } .city-chip-arrow{ color: var(--gold); font-weight: 700; } .city-grid-note{ margin-top: 24px; font-size: .95rem; color: var(--ink-soft); } .city-grid-note a{ color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ---------- city landing page: cross-links to the other 9 cities ---------- */ .city-nearby{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .city-nearby a{ padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); font-size: .85rem; font-weight: 600; color: var(--ink-soft); } .city-nearby a:hover{ border-color: var(--gold); color: var(--ink); } @media (max-width: 700px){ .services-overview-cards{ grid-template-columns: 1fr 1fr; } } @media (max-width: 480px){ .services-overview-cards{ grid-template-columns: 1fr; } } /* =================================================================== FAQ =================================================================== */ .faq-list{ border-top: 1px solid var(--line); max-width: 820px; } .faq-item{ border-bottom: 1px solid var(--line); padding: 26px 0; } .faq-item summary{ display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; transition: color .3s var(--ease); } .faq-item summary:hover{ color: var(--navy); } .faq-item summary::-webkit-details-marker{ display: none; } .faq-icon{ position: relative; width: 18px; height: 18px; flex-shrink: 0; } .faq-icon::before, .faq-icon::after{ content: ""; position: absolute; background: var(--ink); transition: transform .3s var(--ease), opacity .25s var(--ease); } .faq-icon::before{ top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); } .faq-icon::after{ left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); } .faq-item[open] .faq-icon::after{ opacity: 0; transform: translateX(-50%) rotate(90deg); } .faq-answer{ padding-top: 14px; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; max-width: 64ch; } .faq-answer p{ margin: 0; } .services-cta{ background: var(--gold); padding: 90px 0; text-align: center; } .services-cta h2{ font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); color: var(--ink); margin: 0 0 28px; letter-spacing: -.02em; } /* =================================================================== BLOG — listing page =================================================================== */ .blog-hero{ padding: 168px 0 60px; text-align: center; background: var(--navy); background: linear-gradient(160deg, var(--navy) 0%, #082a66 100%); color: var(--white); } .blog-hero .eyebrow{ color: rgba(255,255,255,0.65); } .blog-hero-title{ color: var(--white); max-width: 20ch; margin-left: auto; margin-right: auto; } .blog-hero .section-sub{ color: rgba(255,255,255,0.72); max-width: 50ch; margin-left: auto; margin-right: auto; } .blog-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .post-card{ display: flex; flex-direction: column; background: var(--white); border-radius: 18px; overflow: hidden; border-top: 5px solid var(--accent, var(--navy)); box-shadow: 0 20px 40px -24px rgba(10,15,28,0.18); transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .post-card:hover{ transform: translateY(-4px); box-shadow: 0 26px 50px -22px rgba(10,15,28,0.26); } .post-card-body{ padding: 32px 30px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .post-card-tag{ font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, var(--navy)); } .post-card-body h3{ font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; margin: 0; } .post-card-body p{ color: var(--ink-soft); font-size: .96rem; line-height: 1.6; margin: 0; flex: 1; } .post-card-body .text-link{ align-self: flex-start; margin-top: 6px; } @media (max-width: 900px){ .blog-grid{ grid-template-columns: 1fr; } } /* =================================================================== BLOG — post page =================================================================== */ .post-hero{ padding: 168px 0 70px; border-bottom: 1px solid var(--line); } .post-hero-tag{ font-size: .82rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent, var(--navy)); margin: 0 0 18px; } .post-hero-title{ font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.02em; max-width: 20ch; margin: 0 0 22px; } .post-hero-meta{ color: var(--ink-soft); font-size: .92rem; } .post-body{ max-width: 68ch; margin: 0 auto; padding: 70px 0; font-size: 1.08rem; line-height: 1.75; color: var(--ink); } .post-body h2{ font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; letter-spacing: -.01em; margin: 46px 0 18px; } .post-body h2:first-child{ margin-top: 0; } .post-body p{ margin: 0 0 22px; color: var(--ink-soft); } .post-body ul{ margin: 0 0 22px; padding-left: 22px; color: var(--ink-soft); } .post-body li{ margin-bottom: 10px; } .post-body strong{ color: var(--ink); } .post-body a{ color: var(--navy); text-decoration: underline; text-underline-offset: 3px; } .post-pullquote{ border-left: 3px solid var(--accent, var(--navy)); padding: 4px 0 4px 24px; margin: 40px 0; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: var(--ink); font-style: normal; } .post-cta{ background: var(--ink); color: var(--white); padding: 90px 0; text-align: center; } .post-cta h2{ font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3.8vw, 2.6rem); color: var(--white); margin: 0 0 28px; letter-spacing: -.02em; } /* =================================================================== VIDEO FRAME — reusable placeholder for a portrait "reel-style" video that doesn't exist yet (real footage to be dropped in later). A pulsing gold glow marks it as a to-be-filled slot rather than a broken image. Used on the reviews wall and the Our Mission hero. =================================================================== */ /* a real window casing wraps the video, not just a subtle overlay on top of it — thick cream/white border (the sash), gold glow sitting outside that via box-shadow (kept gold per the brand ask, just moved off the border itself so the border reads as the actual frame material), and a bold opaque cross-mullion dividing the glass into 4 panes. */ .video-frame{ position: relative; width: 100%; max-width: 300px; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: linear-gradient(160deg, #101a14 0%, var(--ink) 100%); border: 14px solid #F6F4EF; cursor: pointer; animation: videoFrameGlow 3.2s ease-in-out infinite; } @keyframes videoFrameGlow{ 0%, 100%{ box-shadow: 0 0 18px 2px rgba(242,183,5,0.4), 0 0 0 0 rgba(242,183,5,0.22); } 50%{ box-shadow: 0 0 34px 10px rgba(242,183,5,0.6), 0 0 0 8px rgba(242,183,5,0.12); } } @media (prefers-reduced-motion: reduce){ .video-frame{ animation: none; box-shadow: 0 0 22px 4px rgba(242,183,5,0.45); } } /* the mullion — one vertical + one horizontal bar crossing the glass, sitting inside the casing (inset:0 on an absolutely-positioned child of a bordered box lands on the padding edge, i.e. just inside the border, automatically clear of the frame itself). */ .video-frame::before{ content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); background-repeat: no-repeat; background-image: linear-gradient(#F6F4EF, #F6F4EF), linear-gradient(#F6F4EF, #F6F4EF); background-size: 7px 100%, 100% 7px; background-position: 50% 0, 0 50%; } .video-frame-placeholder{ position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; } .video-frame-play{ width: 56px; height: 56px; border-radius: 50%; background: rgba(242,183,5,0.16); border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.05rem; padding-left: 3px; } .video-frame-placeholder p{ margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,0.7); } /* =================================================================== OUR MISSION PAGE =================================================================== */ .mission-hero{ background: var(--evergreen); background: linear-gradient(160deg, var(--evergreen) 0%, var(--evergreen-deep) 100%); color: var(--white); padding: 168px 0 120px; } .mission-hero-grid{ display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: center; } .mission-hero-copy .eyebrow{ color: rgba(255,255,255,0.68); } .mission-hero-title{ color: var(--white); font-size: clamp(2rem, 4vw, 3rem); max-width: 18ch; margin: 0 0 20px; } .mission-tagline{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--gold); letter-spacing: .01em; margin: -8px 0 26px; } .mission-hero-copy p{ color: rgba(255,255,255,0.78); font-size: 1.02rem; line-height: 1.7; max-width: 56ch; margin: 0 0 20px; } .mission-pullquote{ border-left: 3px solid var(--gold); padding: 4px 0 4px 24px; margin: 32px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--white); font-style: normal; } @media (max-width: 860px){ .mission-hero-grid{ grid-template-columns: 1fr; gap: 40px; } .mission-hero-media{ display: flex; justify-content: center; } } /* ---------- meet the crew ---------- */ .crew-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; } .crew-card{ background: var(--white); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 40px -26px rgba(10,15,28,0.2); } .crew-card-photo{ position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink); } /* same window-pane motif as .video-frame, scaled down to a simple 2x2 cross — a nod to "looking at the crew through a window" */ .crew-card-photo::before{ content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35)), linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35)); background-repeat: no-repeat; background-size: 2px 100%, 100% 2px; background-position: 50% 0, 0 50%; mix-blend-mode: overlay; } .crew-card-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .crew-card-photo-placeholder{ position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .crew-card-photo-icon{ width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55); } .crew-card-photo-placeholder p{ margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,0.55); } .crew-card-video-badge{ position: absolute; z-index: 3; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(10,15,28,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(242,183,5,0.5); color: var(--gold-soft); font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: 6px 10px; border-radius: 999px; } .crew-card-video-badge::before{ content: "▶"; font-size: .6rem; } .crew-card-body{ padding: 20px 20px 24px; } .crew-card-body h3{ font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 4px; } .crew-card-meta{ font-size: .82rem; font-weight: 600; color: var(--navy); margin: 0 0 12px; } .crew-card-fav{ font-size: .88rem; color: var(--ink-soft); line-height: 1.5; margin: 0; } @media (max-width: 900px){ .crew-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 560px){ .crew-grid{ grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; } } /* =================================================================== POLAROIDS — real crew snapshots scattered down the homepage only. Each one straddles the seam between two sections (top:0 + translateY -50%), so it reads as "pinned across the transition" regardless of how much padding either section has, without ever needing to know exact px values per section. Anchored to the section below the seam it's pinned to. Purely decorative flair — hidden below ~1200px where there's no longer clear background beside .wrap to sit in. =================================================================== */ .polaroid{ position: absolute; top: 0; width: clamp(150px, 16vw, 230px); z-index: 4; filter: drop-shadow(0 16px 28px rgba(10,15,28,0.4)); transform: translateY(-50%) rotate(var(--rot, -6deg)); transition: transform .4s var(--ease), filter .4s var(--ease); } .polaroid:hover{ transform: translateY(calc(-50% - 10px)) rotate(var(--rot, -6deg)) scale(1.05); filter: drop-shadow(0 22px 36px rgba(10,15,28,0.48)); z-index: 6; } @media (max-width: 1200px){ .polaroid{ display: none; } } @media (prefers-reduced-motion: reduce){ .polaroid{ transition: none; } } .post-cta p{ color: rgba(255,255,255,0.68); max-width: 50ch; margin: 0 auto 32px; } /* =================================================================== VIDEO MODAL — shared lightbox any "coming soon" video-frame or play button opens (Plans play button, Reviews video-frame, Mission hero video-frame). Just shows the placeholder full-size for now; once real footage exists, swap the placeholder for a real