:root { --black: #0c0c0e; --black-soft: #151517; --pink: #ec2382; --pink-dark: #c81468; /* Slightly darker than --pink specifically for white button text — the brand pink's lighter gradient stop only hits ~4.09:1 contrast with white at button text size, just under WCAG AA's 4.5:1 minimum. --pink itself stays as-is everywhere else (headings, borders, badges on black backgrounds already clear AA comfortably). */ --pink-btn: #cd1f77; --teal: #17c9c4; --teal-dark: #0fa5a1; --gray: #9d9da3; --gray-light: #3a3a3f; --white: #f7f7f8; /* A dark teal-tinted black, used for card drop-shadows instead of flat rgba(0,0,0,...) — carries a whisper of the brand hue instead of a generic gray-black shadow. Kept subtle enough that it reads as "depth," not as a visible color. */ --shadow-tint: 10, 26, 27; --font-display: 'Bungee', cursive; --font-body: 'Poppins', sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } /* Smooth scroll is opt-in via a class the page adds after load (see script.js), not applied unconditionally here — a blanket `scroll-behavior: smooth` on also hijacks the browser's own scroll-position restoration on reload, animating a visible (and disorienting) scroll from the top down to wherever you were instead of landing there instantly like normal. Scoping it to post-load keeps anchor-link clicks smooth without touching reload/restore behavior. */ html.smooth-scroll { scroll-behavior: smooth; } /* Balances line-wrapping on headings so a heading never ends with a single orphaned word on its own line — no-op in browsers that don't support it, so this is purely additive. */ h1, h2, h3, h4 { text-wrap: balance; } /* Scrollbar */ html { scrollbar-color: var(--teal-dark) var(--black-soft); scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--black-soft); } ::-webkit-scrollbar-thumb { background: var(--teal-dark); border-radius: 999px; border: 2px solid var(--black-soft); } ::-webkit-scrollbar-thumb:hover { background: var(--pink); } body { background: var(--black); color: var(--white); font-family: var(--font-body); line-height: 1.6; } .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; } /* Header and utility bar span wider than content sections so they hug the real screen edge on large monitors instead of floating inward */ .utility-inner, .header-inner { max-width: 1800px; padding: 0 40px; } a { text-decoration: none; color: inherit; } ul { list-style: none; } /* Focus visibility — keyboard/screen-reader navigation only (:focus-visible skips this for mouse clicks), since the site had no custom focus ring at all and was falling back to the browser default, which reads poorly against this dark custom UI. */ a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } /* Skip-to-content link — hidden off-screen until a keyboard user tabs to it (the very first focusable thing on the page), letting them jump past the utility bar/header/nav straight to the main content. Uses plain :focus, not :focus-visible, since a skip link should always appear the instant it's focused however that happens. */ .skip-link { position: fixed; top: -60px; left: 16px; z-index: 1000; background: var(--teal); color: var(--black); font-weight: 700; font-size: 0.9rem; padding: 12px 20px; border-radius: 8px; transition: top 0.2s ease; } .skip-link:focus { top: 16px; } /* Decorative bubble background */ .bubbles-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 8% 15%, rgba(23,201,196,0.14) 0, rgba(23,201,196,0.04) 28px, transparent 42px), radial-gradient(circle at 22% 65%, rgba(236,35,130,0.12) 0, rgba(236,35,130,0.03) 40px, transparent 62px), radial-gradient(circle at 78% 20%, rgba(236,35,130,0.13) 0, rgba(236,35,130,0.04) 34px, transparent 52px), radial-gradient(circle at 90% 75%, rgba(23,201,196,0.12) 0, rgba(23,201,196,0.03) 48px, transparent 72px), radial-gradient(circle at 55% 45%, rgba(23,201,196,0.09) 0, rgba(23,201,196,0.03) 60px, transparent 92px), radial-gradient(circle at 35% 90%, rgba(236,35,130,0.11) 0, rgba(236,35,130,0.03) 30px, transparent 47px); background-repeat: no-repeat; } .eyebrow { font-family: var(--font-display); font-weight: normal; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); font-size: 0.85rem; margin-bottom: 8px; } .eyebrow.center { text-align: center; } .section-title { font-family: var(--font-display); font-weight: normal; font-size: 1.9rem; letter-spacing: 0.5px; margin-bottom: 12px; } .section-title.center { text-align: center; } .section-sub { color: var(--gray); max-width: 560px; margin-bottom: 40px; } .section-sub.center { margin-left: auto; margin-right: auto; text-align: center; } .section { position: relative; z-index: 1; padding: 90px 0; } /* Fade into/out of the surrounding black sections instead of a hard color cut at the section boundary — gradient stop distances assume a plain .section on both sides, which holds for every current .section-dark. */ .section-dark { background: linear-gradient( 180deg, var(--black) 0, var(--black-soft) 110px, var(--black-soft) calc(100% - 110px), var(--black) 100% ); } /* Header */ .site-header { /* Sticks to the top on desktop only (see the 861px+ media query below) — on mobile/tablet it scrolls away normally like the rest of the page. Stays `relative` (not `static`) here so it remains a positioned containing block for the mobile nav dropdown at all times. */ position: relative; z-index: 50; background: rgba(12,12,14,0.85); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.06); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; } .logo-img { height: 42px; width: auto; display: block; } .logo-img.small { height: 38px; } /* Desktop-only: header sticks to the top while scrolling. Section targets get scroll-margin-top so an in-page nav link doesn't land with its heading hidden under the now-fixed header. */ @media (min-width: 861px) { .site-header { position: sticky; top: 0; } section[id] { scroll-margin-top: 90px; } } .main-nav { display: flex; gap: 32px; } .main-nav a { position: relative; font-weight: 600; font-size: 0.95rem; transition: color 0.2s; } .main-nav a:hover { color: var(--pink); } /* Scroll-spy — highlights whichever nav link matches the section currently in view (see script.js). A small underline instead of just a color change so it stays distinct from the plain :hover state. */ .main-nav a.active { color: var(--teal); } .main-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 999px; background: var(--teal); } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { width: 24px; height: 2px; background: var(--white); display: block; } /* Buttons */ .btn { display: inline-block; padding: 14px 30px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; cursor: pointer; border: 2px solid transparent; text-align: center; } .btn-block { display: block; width: 100%; } .btn-primary { background: linear-gradient(135deg, var(--pink-btn), var(--pink-dark)); color: var(--white); box-shadow: 0 8px 24px rgba(236,35,130,0.35); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(236,35,130,0.45); } .btn-primary:active { transform: scale(0.97); box-shadow: 0 6px 16px rgba(236,35,130,0.4); } .btn-outline { border-color: var(--teal); color: var(--teal); } .btn-outline:hover { background: var(--teal); color: var(--black); } .btn-outline:active { transform: scale(0.97); } /* Utility bar */ .utility-bar { position: relative; z-index: 51; background: var(--black-soft); border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.85rem; font-weight: 600; } .utility-inner { display: flex; align-items: center; justify-content: center; gap: 8px 28px; min-height: 40px; padding: 8px 0; flex-wrap: wrap; } .utility-item { white-space: nowrap; } .utility-phone { color: var(--teal); } .utility-phone:hover { color: var(--white); } .utility-icon { margin-right: 4px; } .utility-follow { color: var(--gray); font-weight: 500; } .utility-social { display: flex; align-items: center; gap: 14px; } .social-icon { color: var(--gray); display: flex; transition: color 0.2s; } .social-icon svg { width: 16px; height: 16px; } .social-icon:hover { color: var(--teal); } /* Service area banner */ .service-area-banner { position: relative; z-index: 1; background: linear-gradient(90deg, rgba(23,201,196,0.12), rgba(236,35,130,0.12)); border-bottom: 1px solid rgba(255,255,255,0.08); } .service-area-inner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 24px; text-align: center; font-size: 0.9rem; } .service-area-pin { font-size: 1rem; } .service-area-inner strong { color: var(--teal); } /* Hero */ .hero { position: relative; z-index: 1; padding: 90px 0; } .hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; } /* Launch without photos — hides the hero photo and the photo strip (the Before & After gallery is left alone) until real photos are ready. To bring them back, just remove the "hidden-for-launch" class from the hero-visual and photo-strip elements in index.html; these rules do nothing once that class is gone. */ .hidden-for-launch { display: none !important; } .hero-inner:has(.hero-visual.hidden-for-launch) { grid-template-columns: 1fr; text-align: center; } .hero-inner:has(.hero-visual.hidden-for-launch) .hero-sub { margin-left: auto; margin-right: auto; } .hero-inner:has(.hero-visual.hidden-for-launch) .hero-cta { justify-content: center; } .hero-tagline { color: var(--gray); font-size: 0.9rem; font-style: italic; margin-top: 4px; } .hero h1 { font-family: var(--font-display); font-weight: normal; font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.25; letter-spacing: 0.5px; margin: 14px 0 16px; color: var(--teal); } .text-pink { color: var(--pink); } .hero-sub { max-width: 480px; margin: 0 0 28px; color: var(--gray); font-size: 1.05rem; } .hero-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .hero-link { color: var(--gray); font-weight: 600; font-size: 0.95rem; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; } .hero-link:hover { color: var(--teal); border-color: var(--teal); } .hero-visual { position: relative; } /* Shared "photo coming soon" treatment for every placeholder slot on the site (hero shot, photo strip, before/after gallery) — a soft teal/pink glow instead of harsh gray/black caution-tape stripes, plus a camera glyph so the slot reads as "photo pending" rather than "broken image". */ .hero-photo-placeholder, .photo-strip-item, .ba-photo { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: radial-gradient(circle at 28% 24%, rgba(23,201,196,0.16), transparent 55%), radial-gradient(circle at 76% 74%, rgba(236,35,130,0.14), transparent 55%), var(--black-soft); border: 1px dashed rgba(255,255,255,0.15); } .hero-photo-placeholder::before, .photo-strip-item::before, .ba-photo::before { content: ""; display: block; width: 26px; height: 26px; flex-shrink: 0; background-color: var(--gray); --camera-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 8a2 2 0 0 1 2-2h1.5l1-1.5h7l1 1.5H18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8Z M12 13m-3.4 0a3.4 3.4 0 1 0 6.8 0a3.4 3.4 0 1 0 -6.8 0Z'/%3E%3C/svg%3E"); -webkit-mask: var(--camera-icon) center / contain no-repeat; mask: var(--camera-icon) center / contain no-repeat; } .hero-photo-placeholder { aspect-ratio: 4/3; border-radius: 20px; color: var(--gray); font-weight: 600; } .hero-ribbon { position: absolute; top: -14px; right: 16px; background: var(--pink-btn); color: var(--white); font-family: var(--font-display); font-size: 0.9rem; padding: 10px 18px; border-radius: 999px; transform: rotate(4deg); box-shadow: 0 8px 20px rgba(236,35,130,0.4); } /* Photo strip */ .photo-strip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; } .photo-strip-item { aspect-ratio: 4/5; text-align: center; padding: 8px; } .photo-strip-item span { color: var(--gray); font-size: 0.8rem; font-weight: 600; } .photo-strip-item.has-photo { position: relative; padding: 0; border: none; background: none; cursor: pointer; } .photo-strip-item.has-photo::before { display: none; } .photo-strip-item.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; } .photo-strip-item.has-photo:hover img { opacity: 0.85; } /* How It Works */ .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; } .step-number { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--teal); color: var(--teal); font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 16px; } .step h3 { font-family: var(--font-display); font-weight: normal; color: var(--pink); font-size: 1.05rem; margin-bottom: 8px; } .step p { color: var(--gray); font-size: 0.92rem; line-height: 1.6; } /* Pricing */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .price-card { background: var(--black-soft); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 24px 22px; position: relative; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 28px rgba(var(--shadow-tint), 0.35); } .price-card.featured { border-color: var(--pink); background: linear-gradient(180deg, rgba(236,35,130,0.08), var(--black-soft) 40%); transform: scale(1.03); box-shadow: 0 10px 32px rgba(236,35,130,0.2); } .price-card h3 { font-family: var(--font-display); font-weight: normal; font-size: 1rem; } .price-card .price { font-family: var(--font-display); font-size: 1.5rem; color: var(--teal); font-weight: normal; } .price-card .price span { font-family: var(--font-body); font-size: 0.78rem; color: var(--gray); font-weight: 400; margin-left: 5px; } .price-card .price-time { display: flex; align-items: center; gap: 6px; color: var(--gray); font-size: 0.82rem; margin-bottom: 4px; } .price-time-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--teal); } .price-card ul { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; margin: 4px 0; } .price-card li { font-size: 0.82rem; color: var(--white); padding-left: 18px; position: relative; line-height: 1.35; } .price-card li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); } /* Per-vehicle-size price breakdown — overrides the generic bulleted .price-card ul/li styling above with a compact label/price row list. */ .price-tiers { flex-grow: 0; gap: 3px; margin: 0 0 2px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); } .price-tiers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-left: 0; font-size: 0.74rem; } .price-tiers li::before { content: none; } .price-tiers li span { color: var(--gray); } .price-tiers li strong { color: var(--white); font-weight: 700; white-space: nowrap; } .badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--pink-btn); color: var(--white); font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; } .price-card { transition: border-color 0.2s, transform 0.25s ease, box-shadow 0.25s ease; } .price-card:hover { border-color: var(--teal); } /* Ancestor-scoped so this beats the reveal animation's resting transform (same specificity as a plain .price-card:hover, but reveal's rule comes later in source order and would otherwise win). Featured card keeps its permanent scale() and only gains a deeper shadow, not a lift, to avoid fighting that same transform. */ .pricing-grid .price-card:not(.featured):hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(23,201,196,0.18); } .price-card.featured:hover { border-color: var(--pink); box-shadow: 0 20px 44px rgba(236,35,130,0.32); } .price-card .btn-block { padding: 11px 20px; font-size: 0.88rem; } /* Gallery */ .ba-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .ba-groups-more { margin-top: 20px; } .ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 16px; overflow: hidden; } .ba-photo { aspect-ratio: 4/3; position: relative; } .ba-photo span { color: var(--gray); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; background: rgba(0,0,0,0.5); padding: 4px 12px; border-radius: 999px; } .ba-after span { color: var(--teal); } /* Real photo dropped into a slot — kill the placeholder treatment and let the image fill the box, with the Before/After pill overlaid in the corner instead of centered. */ .ba-photo.has-photo { border: none; background: none; align-items: flex-start; justify-content: flex-end; cursor: pointer; } .ba-photo.has-photo::before { display: none; } .ba-photo.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s; } .ba-photo.has-photo:hover img { opacity: 0.85; } .ba-photo.has-photo span { position: relative; z-index: 1; margin: 10px; } /* About */ .about-inner { max-width: 860px; text-align: center; } .about-story { color: var(--gray); font-size: 1.05rem; line-height: 1.8; /* Tightened from 720px — at this font-size that was pushing past the ~65-character comfortable reading measure. */ max-width: 640px; margin: 0 auto 44px; } .about-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: left; } .about-badge { background: var(--black-soft); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px 20px; box-shadow: 0 8px 20px rgba(var(--shadow-tint), 0.3); } .about-badge-icon { width: 34px; height: 34px; color: var(--teal); margin-bottom: 12px; } .about-badge-icon svg { width: 100%; height: 100%; } .about-badge h3 { font-family: var(--font-display); font-weight: normal; color: var(--pink); font-size: 1rem; margin-bottom: 8px; } .about-badge p { color: var(--gray); font-size: 0.88rem; line-height: 1.5; } /* FAQ */ .faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .faq-item { background: var(--black); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; color: var(--white); font-family: var(--font-body); font-weight: 600; font-size: 1rem; text-align: left; padding: 20px 24px; cursor: pointer; } .faq-icon { flex-shrink: 0; color: var(--teal); font-size: 1.3rem; font-weight: 700; transition: transform 0.25s ease; } .faq-item.open .faq-icon { transform: rotate(45deg); color: var(--pink); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } /* Generously above the tallest real answer's rendered height (the longest one wraps to ~336px on narrow mobile widths) so nothing clips — the max-height transition still feels the same speed either way, since it stops animating once the content's actual height is reached. */ .faq-item.open .faq-answer { max-height: 600px; } .faq-answer p { color: var(--gray); font-size: 0.95rem; line-height: 1.6; padding: 0 24px 20px; } .faq-answer a { color: var(--teal); font-weight: 600; } .faq-fallback { text-align: center; color: var(--gray); margin-top: 32px; font-size: 0.95rem; } .faq-fallback a { color: var(--teal); font-weight: 600; } /* Reviews / trust signals */ .google-badge { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 360px; margin: 0 auto 44px; padding: 14px 24px; background: var(--black-soft); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; transition: border-color 0.2s; } .google-badge:hover { border-color: var(--teal); } .google-badge-score { font-family: var(--font-display); font-size: 1.3rem; color: var(--white); } .google-stars { color: #fbbc04; letter-spacing: 1px; } .google-badge-text { color: var(--gray); font-size: 0.9rem; font-weight: 600; } .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; } .testimonial-card { background: var(--black-soft); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 8px 20px rgba(var(--shadow-tint), 0.3); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* One review gets the same "emphasize a single tile" treatment already used on the featured pricing card and the widened email contact card — reusing that established pattern here instead of a different technique, so a 3-equal-column row isn't the only rhythm on the page. Teal (not pink) since pink already reads as "pricing/upsell" elsewhere. */ .testimonial-card.featured { border-color: var(--teal); background: linear-gradient(180deg, rgba(23,201,196,0.08), var(--black-soft) 40%); transform: scale(1.05); box-shadow: 0 10px 32px rgba(23,201,196,0.2); } .testimonial-card.featured .testimonial-quote { font-size: 1.05rem; } .testimonial-grid .testimonial-card:not(.featured):hover { transform: translateY(-6px); border-color: var(--teal); box-shadow: 0 16px 32px rgba(23,201,196,0.16); } .testimonial-card.featured:hover { border-color: var(--teal); box-shadow: 0 20px 40px rgba(23,201,196,0.32); } .testimonial-stars { color: #fbbc04; letter-spacing: 2px; } .testimonial-quote { color: var(--white); font-size: 0.95rem; line-height: 1.6; flex-grow: 1; } .testimonial-author { color: var(--teal); font-weight: 700; font-size: 0.9rem; } .guarantee-badge { text-align: center; color: var(--teal); font-weight: 700; font-size: 1rem; letter-spacing: 0.3px; } /* Contact — the section's whole content now that there's no quote form beside it, so these cards get to be the emphasis: bigger, a 3-across row on wider screens, centered as a standalone block. */ .contact-cards { display: grid; /* Email is the middle card and by far the longest string ("sudzmobile detailing8@gmail.com") — give it extra width so it fits on one line instead of wrapping awkwardly mid-word. */ grid-template-columns: 1fr minmax(300px, 1.6fr) 1fr; gap: 24px; max-width: 960px; margin: 0 auto; } .contact-card { /* Grid items default to min-width: auto, which floors their width at their content's min-content size — the long email address would otherwise force this wider than its grid track and overflow on narrow screens instead of wrapping. */ min-width: 0; background: var(--black); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 40px 28px; text-align: center; box-shadow: 0 8px 20px rgba(var(--shadow-tint), 0.3); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } /* Phone and Email are actionable (tel:/mailto:) — make the whole card tappable/clickable, not just the link text, and give it lift/press feedback on hover (desktop) and tap (touch). */ .contact-card-tappable { position: relative; cursor: pointer; } .contact-card-tappable p a { display: block; } .contact-card-tappable p a::after { content: ""; position: absolute; inset: 0; } .contact-card-tappable:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 12px 28px rgba(23,201,196,0.25); } .contact-card-tappable:active { transform: scale(0.97); border-color: var(--teal); box-shadow: 0 6px 16px rgba(23,201,196,0.3); } .contact-card-icon { width: 40px; height: 40px; color: var(--teal); margin: 0 auto 16px; } .contact-card-icon svg { width: 100%; height: 100%; } .contact-card h3 { font-family: var(--font-display); color: var(--pink); margin-bottom: 10px; font-size: 1.1rem; } .contact-card p { color: var(--gray); font-size: 1.05rem; font-weight: 600; overflow-wrap: break-word; } /* Subtle affordance marking Phone/Email as actionable (tel:/mailto:), distinct from the static Service Area card — same arrow convention already used for "See Pricing →" in the hero. Nudges further right on hover/press, matching the card's own lift feedback. Mobile/tablet only (see the 860px breakpoint below) — on desktop the hover-lift itself already signals interactivity, so the arrow stayed off there per feedback. */ .tap-indicator { display: none; color: var(--teal); font-size: 0.9rem; margin-left: 2px; transition: transform 0.15s ease; } .contact-card-tappable:hover .tap-indicator, .contact-card-tappable:active .tap-indicator { transform: translateX(3px); } /* Footer */ .site-footer { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,0.06); padding: 56px 0 24px; } .footer-columns { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; } .footer-col h3 { font-family: var(--font-display); color: var(--white); font-size: 0.95rem; letter-spacing: 0.3px; margin-bottom: 14px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col li { color: var(--gray); font-size: 0.9rem; overflow-wrap: break-word; } .footer-col a { color: var(--gray); transition: color 0.15s ease; } .footer-col a:hover { color: var(--teal); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .footer-bottom p { color: var(--gray); font-size: 0.85rem; } .footer-legal-link { color: var(--gray); font-size: 0.85rem; transition: color 0.15s ease; } .footer-legal-link:hover { color: var(--teal); } /* Legal pages (Privacy Policy) */ .legal-page { max-width: 760px; margin: 0 auto; } .legal-content { color: var(--gray); font-size: 1rem; line-height: 1.8; } .legal-content h2 { font-family: var(--font-display); font-weight: normal; color: var(--white); font-size: 1.2rem; letter-spacing: 0.3px; margin: 36px 0 12px; } .legal-content h2:first-child { margin-top: 0; } .legal-content p { margin-bottom: 16px; } .legal-content a { color: var(--teal); } .legal-content a:hover { color: var(--pink); } /* 404 page */ .not-found { max-width: 640px; margin: 0 auto; } .not-found-code { font-family: var(--font-display); font-size: clamp(4rem, 12vw, 7rem); line-height: 1; color: var(--teal); margin-bottom: 8px; } .not-found-cta { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 4px; } /* Responsive */ @media (max-width: 860px) { .steps-grid { grid-template-columns: 1fr; gap: 32px; } .pricing-grid { grid-template-columns: 1fr; } .price-card.featured { transform: none; } .ba-groups { grid-template-columns: 1fr; gap: 24px; } .contact-cards { grid-template-columns: 1fr; max-width: 420px; } .tap-indicator { display: inline-block; } .footer-columns { grid-template-columns: 1fr 1fr; row-gap: 32px; } .footer-brand { grid-column: 1 / -1; } /* Hamburger nav takes over here (not just phones) — below this width the full inline nav ("Services Gallery About Reviews FAQ Contact") doesn't fit and wraps mid-phrase. */ .main-nav { position: absolute; top: 63px; left: 0; right: 0; background: var(--black-soft); flex-direction: column; padding: 20px 24px; gap: 18px; display: none; border-bottom: 1px solid rgba(255,255,255,0.08); } .main-nav.open { display: flex; } .nav-toggle { display: flex; } .testimonial-grid { grid-template-columns: 1fr; } .testimonial-card.featured { transform: none; } .about-badges { grid-template-columns: 1fr 1fr; } .hero-inner { grid-template-columns: 1fr; text-align: center; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-cta { justify-content: center; } .hero-visual { display: none; } .photo-strip { grid-template-columns: repeat(3, 1fr); } .photo-strip-item:nth-child(4), .photo-strip-item:nth-child(5) { display: none; } } @media (max-width: 640px) { .hero { padding: 60px 0; } .utility-follow { display: none; } .utility-inner { gap: 8px 20px; } .service-area-inner { font-size: 0.82rem; padding: 10px 16px; } /* Narrow phones don't have room for the email address on one line at the default size — shrink it (and match the other cards) so it fits without wrapping awkwardly mid-word. */ .contact-card p { font-size: 0.85rem; } .footer-columns { grid-template-columns: 1fr; text-align: center; } .footer-brand { grid-column: auto; display: flex; justify-content: center; } .footer-col ul { align-items: center; } .footer-bottom { justify-content: center; text-align: center; } } /* Scroll-reveal animations */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-d1 { transition-delay: 0.08s; } .reveal-d2 { transition-delay: 0.16s; } .reveal-d3 { transition-delay: 0.24s; } .reveal-d4 { transition-delay: 0.32s; } .reveal-d5 { transition-delay: 0.4s; } /* The featured pricing card (and featured testimonial) each have their own static scale(); combine it with the reveal transform instead of letting .reveal's translateY override it. */ .price-card.featured.reveal { transform: scale(1.03) translateY(28px); } .price-card.featured.reveal.is-visible { transform: scale(1.03); } .testimonial-card.featured.reveal { transform: scale(1.05) translateY(28px); } .testimonial-card.featured.reveal.is-visible { transform: scale(1.05); } /* On narrow screens the featured cards' scale is disabled (see the 860px rules above) — match that here too, at equal specificity, so this wins over the desktop reveal rule at this viewport. */ @media (max-width: 860px) { .price-card.featured.reveal { transform: translateY(28px); } .price-card.featured.reveal.is-visible { transform: none; } .testimonial-card.featured.reveal { transform: translateY(28px); } .testimonial-card.featured.reveal.is-visible { transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Lightbox — full-screen viewer for real photos (photo strip, gallery) */ .lightbox { display: none; position: fixed; inset: 0; z-index: 500; align-items: center; justify-content: center; background: rgba(6,6,8,0.92); } .lightbox.open { display: flex; } /* Zoomed state allows scrolling/panning — see the JS, which sets an explicit pixel width/height (not transform) so the enlarged image actually contributes to the container's scrollable area, and sets justify-content/align-items per axis: centered while that axis still fits, flex-start once it overflows (a centered-but-overflowing flex item clips its start edge out of scroll reach, so it has to switch). The scrollbar itself is hidden (scrolling still works via wheel/ trackpad/drag) purely for a cleaner look. */ .lightbox.zoom-active { overflow: auto; scrollbar-width: none; } .lightbox.zoom-active::-webkit-scrollbar { display: none; } .lightbox-img { max-width: 88vw; max-height: 84vh; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.55); } /* Tall phone-shot photos (before/after gallery, roughly 9:16) are width-limited by max-width long before they hit max-height, so they render small with empty space above/below — give them more headroom on both axes so they actually fill the screen. */ .lightbox-img.is-portrait { max-width: 96vw; max-height: 94vh; } .lightbox-img.zoomed { max-width: none; max-height: none; border-radius: 0; } /* Click-to-zoom — desktop (fine pointer + real hover) only. Touch devices don't get the zoom cursor or the toggle, since a tap there is just how you'd view the photo, not a request to zoom. */ @media (hover: hover) and (pointer: fine) { .lightbox-img { cursor: zoom-in; } .lightbox-img.zoomed { cursor: zoom-out; } } .lightbox-close, .lightbox-arrow { /* Fixed to the viewport, not absolute relative to .lightbox — .lightbox is itself the scroll container when zoomed, so an absolutely positioned child of it scrolls right along with the photo. Anchoring to the viewport instead keeps these pinned to the screen's edges no matter how far the photo is scrolled/panned. */ position: fixed; z-index: 1; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--white); cursor: pointer; transition: background 0.2s; } .lightbox-close:hover, .lightbox-arrow:hover { background: rgba(255,255,255,0.22); } .lightbox-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 1.8rem; line-height: 1; } .lightbox-arrow { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; line-height: 1; } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } .lightbox-arrow.is-hidden { display: none; } @media (max-width: 640px) { .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 1.5rem; } .lightbox-arrow { width: 40px; height: 40px; font-size: 1.6rem; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } }