/* ========================================================================== LIQUID GLASS v2 — LANDING PAGE DESIGN SYSTEM (business-agnostic) Apple Liquid Glass aesthetic: deeply frosted translucent panels over a soft aurora-mesh backdrop, specular rim highlights, glossy pill controls, large continuous radii, system (SF) typography. THEMING: edit the :root tokens only. The whole page recolors from --brand-mid / --accent-a / --accent-b / --accent-glow and the three --aurora-* washes. Nothing below the token block needs touching. ACCESSIBILITY GUARDRAILS • Any glass surface carrying body text uses --glass-strong (≥0.80 white fill) so WCAG AA contrast holds over the busy backdrop. Decorative glass may be lighter — never put body copy on light chips. • Real backdrop blur only where it is perceptible (header pill, hero panels, light cards, sticky bar, lightbox). Near-opaque dark bands and tiny chips use plain fills — same look, far fewer GPU layers. • @supports fallback for browsers without backdrop-filter; print styles; forced-colors support; prefers-reduced-motion and prefers-reduced-transparency both honored. INSERTION POINTS: every [data-slot] element is an injection container — the hosting app replaces ONLY its children. Styling for injected form fields is provided via [data-slot="lead-form"] descendant rules, so the live form inherits the design with no classes required. Class "slots-live" on hides the purple preview tags. SECTIONS: styles are grouped per page section (banner comments). Leaving the CSS of a deleted HTML section in place is harmless. ========================================================================== */ /* ---------- Design tokens ---------- */ :root { /* ====================================================================== SHARED THEME PALETTE — single source of truth. Every lime accent and every page/band background below derives from these raw ramps. Components must never hardcode a hex; use the semantic tokens instead. ====================================================================== */ /* Lime ramp (raw) */ --lime-100: #f4f7ea; /* palest lime wash */ --lime-200: #e6f0bd; --lime-300: #dbe9a6; /* lime tint for text/icons on dark bands */ --lime-400: #d8e783; --lime-500: #e3ff57; /* electric lime — primary accent */ --lime-600: #5f8068; /* electric lime, deeper edge */ --lime-700: #a9cf1f; --lime-800: #4f6d10; /* AA-safe lime on white */ --lime-950: #171d05; /* ink on lime surfaces */ /* Neutral ramp (raw) */ --neutral-0: #ffffff; --neutral-50: #fbfcfb; --neutral-100: #f4f5f0; --neutral-150: #eef0e8; --neutral-200: #e9ece2; --neutral-600: #4c5751; --neutral-800: #1c2523; --neutral-900: #14170e; --neutral-950: #111408; /* --- Semantic accent tokens --- */ --heading: var(--neutral-900); /* headings on light */ --brand: var(--neutral-950); /* deep ink: reserved moments */ --brand-mid: var(--lime-800); /* icons, links, highlights (AA on white) */ --accent-a: var(--lime-500); /* CTA gradient start */ --accent-b: var(--lime-600); /* CTA gradient end */ --accent-ink: var(--lime-950); /* text/icon color on lime surfaces */ --accent-glow: rgba(95, 128, 104, 0.38); --cta-green-start: #36bd79; --cta-green-mid: #17825a; --cta-green-end: #0b4530; --accent-on-dark: rgba(95, 128, 104, 0.9); /* lime text/icons on dark bands */ --accent-on-dark-soft: var(--lime-300); /* secondary lime on dark bands */ --accent-pale: var(--lime-100); /* lime wash text on dark bands */ --accent-chip-bg: var(--lime-200); /* pale lime chips on light */ /* --- Semantic surfaces --- */ --tint: var(--neutral-100); /* neutral page base */ --surface-light-top: var(--neutral-50); /* light band gradient start */ --surface-light-bot: var(--neutral-150);/* light band gradient end */ --surface-tint-top: var(--neutral-0); /* tinted band gradient start */ --surface-tint-bot: var(--neutral-200); /* tinted band gradient end */ /* Aurora mesh washes — strong enough for the glass blur to visibly refract, still composited to pale neutral washes over the light base */ --aurora-1: rgba(215, 248, 105, 0.44); --aurora-2: rgba(140, 152, 118, 0.40); --aurora-3: rgba(230, 250, 160, 0.42); /* Ink (--muted holds ≥4.5:1 even over the strongest aurora wash) */ --ink: #1c2523; --muted: #4c5751; --on-dark: #f3f6f4; --on-dark-muted: #bcc7c1; /* Glass surfaces */ --glass: rgba(255, 255, 255, 0.52); /* decorative / chips */ --glass-strong: rgba(255, 255, 255, 0.82); /* text-bearing cards */ --glass-border: rgba(22, 32, 28, 0.10); --glass-blur: 24px; --glass-dark: rgba(21, 27, 25, 0.90); /* neutral charcoal band */ --glass-dark-border: rgba(255, 255, 255, 0.16); --hero-panel: rgba(14, 20, 18, 0.80); /* dark glass over the photo — ≥0.80 keeps body text AA-readable over bright photos */ /* Specular rim: top highlight + faint inner frost */ --specular: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 0 0 1px rgba(255, 255, 255, 0.28); --specular-dark: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.05); /* Feedback */ --success: #127a4e; --error: #bb3a2b; --star: #7a4300; /* Shape & elevation */ --radius-xl: 30px; --radius-card: 22px; --radius-btn: 999px; --shadow-soft: 0 4px 16px rgba(12, 42, 32, 0.07), 0 14px 44px rgba(12, 42, 32, 0.10); --shadow-lifted: 0 10px 30px rgba(12, 42, 32, 0.15), 0 26px 72px rgba(12, 42, 32, 0.18); /* Type — system stack renders SF Pro on Apple devices */ --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Layout */ --container: 73rem; --section-gap: clamp(3.5rem, 6vw, 5.75rem); --header-clear: 94px; /* fixed-header clearance for anchor jumps */ --hero-pad-b: 4.5rem; /* hero bottom padding — single source of truth */ --hero-form-gap: 1.25rem; /* guaranteed beat between hero panel and form card */ } /* Cheaper blur on small screens — imperceptible at 375px, kinder to GPUs */ @media (max-width: 720px) { :root { --glass-blur: 14px; } } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-clear) + 0.75rem); scroll-padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); } body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background-color: var(--tint); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } /* Aurora mesh: fixed, behind everything; glass panels refract it */ .aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(44rem 32rem at 12% 6%, var(--aurora-1), transparent 65%), radial-gradient(40rem 30rem at 88% 14%, var(--aurora-2), transparent 65%), radial-gradient(46rem 36rem at 20% 88%, var(--aurora-3), transparent 65%), radial-gradient(38rem 30rem at 78% 70%, var(--aurora-1), transparent 65%), linear-gradient(180deg, var(--surface-tint-top) 0%, var(--tint) 48%, var(--surface-tint-bot) 100%); } img, svg, video { max-width: 100%; height: auto; display: block; } /* wrappers are layout-transparent: sizing rules on the inner behave exactly as if it were a direct child */ picture { display: contents; } h1, h2, h3, h4 { line-height: 1.08; margin: 0 0 0.6em; color: var(--heading); font-weight: 800; letter-spacing: -0.022em; text-wrap: balance; } h1 { font-size: clamp(2.25rem, 5.4vw, 4rem); } h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 760; } h3 { font-size: 1.25rem; letter-spacing: -0.008em; } h3, h4 { font-weight: 650; } p { margin: 0 0 1em; max-width: 65ch; } a { color: var(--brand-mid); } :focus-visible { outline: 3px solid var(--brand-mid); outline-offset: 2px; border-radius: 6px; } /* Dark surfaces: the brand-green ring is invisible on near-black glass */ .glass-dark :focus-visible, .hero-copy-panel :focus-visible { outline-color: #fff; } .container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; } /* One shared vertical beat between sections */ section, .cta-strip { padding-block: 0 var(--section-gap); } .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); } .section-head.centered { margin-inline: auto; text-align: center; } .section-head.centered p { margin-inline: auto; } .section-head p { color: var(--muted); font-size: 1.1rem; } .kicker { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-mid); margin-bottom: 0.9rem; } .section-cta { text-align: center; margin-top: 2.5rem; } .nowrap { white-space: nowrap; } /* keeps license/credential numbers whole */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 100; padding: 0.7rem 1.2rem; background: var(--heading); color: #fff; border-radius: var(--radius-btn); font-weight: 700; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus-visible { top: 0.75rem; } /* JS-availability gates: .js-only shows only when main.js booted, .no-js-only only when it didn't (the head boot script manages html.js) */ html:not(.js) .js-only { display: none; } html.js .no-js-only { display: none; } /* ---------- Glass primitives ---------- */ .glass, .glass-strong { background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7); backdrop-filter: blur(var(--glass-blur)) saturate(1.7); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--specular), var(--shadow-soft); } .glass-dark { background: var(--glass-dark); border: 1px solid var(--glass-dark-border); border-radius: var(--radius-xl); box-shadow: var(--specular-dark), var(--shadow-lifted); color: var(--on-dark); } .glass-dark h2, .glass-dark h3 { color: var(--on-dark); } .glass-dark p { color: var(--on-dark-muted); } /* ---------- Buttons & pills ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.78rem 1.55rem; min-height: 44px; border: 0; border-radius: var(--radius-btn); font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.005em; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; position: relative; transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; } .btn:active { transform: scale(0.975); } .btn-primary { color: #fff; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px rgba(60, 80, 10, 0.22), 0 10px 26px var(--accent-glow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 10px rgba(10, 60, 42, 0.28), 0 14px 34px var(--accent-glow); } .btn-primary:active { transform: scale(0.975); } .btn-glass { color: var(--heading); background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 2px 10px rgba(12, 42, 32, 0.10); } .btn-glass:hover { background: rgba(255, 255, 255, 0.78); } /* On dark surfaces the glass button flips to frosted-dark */ .glass-dark .btn-glass, .hero-copy-panel .btn-glass { color: #fff; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .glass-dark .btn-glass:hover, .hero-copy-panel .btn-glass:hover { background: rgba(255, 255, 255, 0.22); } .btn-lg { padding: 0.95rem 1.9rem; font-size: 1.0625rem; } .btn-block { width: 100%; } .chip { display: inline-flex; align-items: center; padding: 0.28rem 0.85rem; border-radius: var(--radius-btn); background: rgba(255, 255, 255, 0.6); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85); font-size: 0.9rem; font-weight: 600; color: var(--heading); } .stars { color: var(--star); letter-spacing: 0.08em; } /* ══════════════════ SECTION: header ══════════════════ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: 0.75rem; } .header-pill { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem 0.6rem 1.25rem; border-radius: var(--radius-btn); background: rgba(255, 255, 255, 0.66); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8); backdrop-filter: blur(var(--glass-blur)) saturate(1.8); border: 1px solid var(--glass-border); box-shadow: var(--specular), 0 6px 24px rgba(12, 42, 32, 0.10); transition: box-shadow 0.25s ease; } .site-header.scrolled .header-pill { box-shadow: var(--specular), 0 10px 34px rgba(12, 42, 32, 0.18); } .header-logo img { width: clamp(150px, 18vw, 220px); height: auto; } .header-badge { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 650; color: var(--heading); white-space: nowrap; } .header-badge .icon { color: var(--brand-mid); flex: none; } .header-actions { display: flex; align-items: center; gap: 0.9rem; } .header-phone { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--heading); } .header-phone .icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px var(--accent-glow); flex: none; } .header-phone-text { display: flex; flex-direction: column; line-height: 1.25; } .phone-label { font-size: 0.75rem; font-weight: 600; color: var(--heading); } .phone-number { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; } @media (max-width: 900px) { .header-badge { display: none; } } @media (max-width: 640px) { .phone-label { display: none; } .header-cta { display: none; } /* the sticky bar covers mobile CTA */ .header-pill { padding: 0.25rem 0.9rem; } /* absorbs the 44px tap target below */ .header-phone { min-height: 44px; } } @media (max-width: 480px) { .header-logo img { width: 118px; } .phone-number { font-size: 0.95rem; } .header-phone .icon-wrap { width: 34px; height: 34px; } } /* ══════════════════ SECTION: hero ══════════════════ */ .hero { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--header-clear) + 1.5rem) 0 var(--hero-pad-b); } .hero-media { position: absolute; inset: 0; overflow: hidden; } .hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 13, 0.32) 0%, rgba(10, 14, 13, 0.08) 45%, rgba(10, 14, 13, 0.38) 100%); } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; } /* Two hero columns only when JS booted (it's what docks the form card into the right column) — no-JS/broken-JS desktops get a clean single column with the form card below the hero instead of a phantom gap */ @media (min-width: 980px) { html.js .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr); } } .hero-copy-panel { padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--radius-xl); background: var(--hero-panel); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5); backdrop-filter: blur(var(--glass-blur)) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: var(--specular-dark), var(--shadow-lifted); color: var(--on-dark); max-width: 44rem; } .hero-copy-panel h1 { color: #fff; margin-bottom: 0.35em; } .hero-copy-panel h1 .grad { background: linear-gradient(92deg, var(--accent-a), var(--accent-b)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { color: var(--on-dark-muted); font-size: 1.15rem; margin-bottom: 1.1rem; } .hero-rating { display: inline-flex; align-items: center; flex-wrap: wrap; /* narrow screens: the count drops to its own line */ gap: 0.15rem 0.5rem; padding: 0.4rem 1rem; margin-bottom: 1.2rem; border-radius: var(--radius-btn); background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.12); font-size: 0.95rem; } .hero-rating .count { white-space: nowrap; } /* wraps as a whole, never mid-phrase */ .hero-rating strong { font-size: 1.05rem; } .hero-rating .count { color: var(--on-dark); } .hero-area-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 1.05rem; margin: 0 0 1.1rem; border-radius: var(--radius-btn); background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.12); font-size: 0.95rem; color: var(--on-dark); max-width: 100%; } .hero-area-pill .icon { color: var(--accent-on-dark); flex: none; } .hero-points { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.55rem; } .hero-points li { display: flex; align-items: baseline; gap: 0.65rem; font-weight: 600; } .hero-points .icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); color: #fff; flex: none; transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.1rem; } /* The hidden attribute must always win over the display rule below — the pill only ever shows when main.js computed a real open/closed state */ .open-now[hidden] { display: none !important; } .open-now { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 1.1rem; font-size: 0.95rem; font-weight: 650; color: var(--on-dark); } .open-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-b); box-shadow: 0 0 0 0 rgba(53, 214, 141, 0.55); animation: openPulse 2.4s ease-out infinite; flex: none; } @keyframes openPulse { 0% { box-shadow: 0 0 0 0 rgba(53, 214, 141, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(53, 214, 141, 0); } 100% { box-shadow: 0 0 0 0 rgba(53, 214, 141, 0); } } .hero-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; } .trust-item { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.8rem; border-radius: var(--radius-btn); background: rgba(255, 255, 255, 0.11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.10); font-size: 0.875rem; font-weight: 600; color: var(--on-dark); } .hero-trust .icon, .owner-chips .icon { color: var(--accent-on-dark); flex: none; } /* Mobile hero: portrait photo fills the screen; panel hugs the bottom */ @media (max-width: 979px) { .hero { align-items: flex-end; padding-top: calc(var(--header-clear) + 0.5rem); } .hero-copy-panel { max-width: 100%; } } @media (max-width: 640px) { :root { --hero-pad-b: 3.5rem; } .hero-sub { font-size: 1.05rem; } .hero-points li { font-size: 0.98rem; } .hero-actions .btn { flex: 1 1 100%; } } /* ══════════════════ SECTION: hero-form (lead-form slot) ══════════════════ */ /* <980px: the card sits here, after the hero, pulled up to overlap the photo's bottom edge. ≥980px: main.js docks the card inside the hero; this wrap then holds nothing. If JS never runs, the card simply stays here at every width — fully functional. */ .hero-form-wrap { position: relative; z-index: 5; margin-top: calc(var(--hero-form-gap) - var(--hero-pad-b)); padding-bottom: var(--section-gap); } /* Docked state — main.js toggles .is-docked whenever the card actually sits in the hero dock. The overlap margin and padding then reset, so the hero's own bottom padding provides the beat before the next section (without this, the leftover negative margin can pull the next section over the hero photo at ~1000-1100px). */ .hero-form-wrap.is-docked { margin-top: 0; padding-bottom: 0; } .hero-form-card { background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7); backdrop-filter: blur(var(--glass-blur)) saturate(1.7); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--specular), var(--shadow-lifted); padding: clamp(1.5rem, 3vw, 2.25rem); max-width: 34rem; margin-inline: auto; } .hero-form-card h2 { font-size: 1.55rem; margin-bottom: 0.4rem; } .form-privacy { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); margin-bottom: 1.25rem; } .form-privacy .icon { color: var(--brand-mid); flex: none; transform: translateY(2px); } .form-speed-note { font-size: 0.9rem; color: var(--muted); text-align: center; margin: 1rem 0 0; } /* Docked position (main.js moves the card here at ≥980px). While empty (mobile/tablet/no-JS) the dock must not render — as a grid item it would otherwise add a phantom gap row inside the hero. The div has no whitespace children, so :empty matches until the card is docked. */ .hero-form-dock { min-width: 0; } .hero-form-dock:empty { display: none; } .hero-form-dock .hero-form-card { margin-inline: auto 0; } /* Form styling targets BOTH the mock form and any injected live form: bare inputs inside the slot inherit the design with no classes. */ [data-slot="lead-form"] { position: relative; } [data-slot="lead-form"] form { display: grid; gap: 0.95rem; } [data-slot="lead-form"] label { display: block; font-size: 0.92rem; font-weight: 700; color: var(--heading); margin-bottom: 0.3rem; } [data-slot="lead-form"] label .optional { font-weight: 500; color: var(--muted); } [data-slot="lead-form"] input, [data-slot="lead-form"] select, [data-slot="lead-form"] textarea { width: 100%; padding: 0.72rem 0.95rem; font-family: inherit; font-size: 1.0625rem; /* ≥16px prevents iOS focus zoom */ color: var(--ink); background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(22, 32, 28, 0.16); border-radius: 14px; box-shadow: inset 0 1px 2px rgba(12, 42, 32, 0.05); transition: border-color 0.15s ease, box-shadow 0.15s ease; } [data-slot="lead-form"] input:focus, [data-slot="lead-form"] select:focus, [data-slot="lead-form"] textarea:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px rgba(18, 146, 95, 0.22); } [data-slot="lead-form"] input[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 3px rgba(187, 58, 43, 0.15); } [data-slot="lead-form"] ::placeholder { color: var(--muted); opacity: 1; } [data-slot="lead-form"] .field { min-width: 0; } .field-error { color: var(--error); font-size: 0.88rem; font-weight: 600; margin: 0.35rem 0 0; } .microcopy { color: var(--muted); font-size: 0.85rem; margin: 0.35rem 0 0; } /* Mock-form success panel (spec for the injected form's success state) */ .form-success { display: none; text-align: center; padding: 1.5rem 0.5rem 0.5rem; } .form-success.visible { display: block; } .lead-form.submitted { display: none; } .form-success:focus { outline: none; } .success-icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; margin-bottom: 1rem; color: #fff; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 26px var(--accent-glow); } .success-title { font-size: 1.35rem; } .success-copy { color: var(--muted); margin-inline: auto; } /* ---------- Insertion-point preview chrome (hidden when slots-live) ---------- */ [data-slot] { position: relative; } .ip-tag { position: absolute; top: -0.65rem; left: 1rem; z-index: 3; padding: 0.1rem 0.7rem; border-radius: var(--radius-btn); background: #7c3aed; color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; white-space: nowrap; } body:not(.slots-live) [data-slot] { outline: 2px dashed rgba(124, 58, 237, 0.55); outline-offset: 6px; border-radius: 8px; } body.slots-live .ip-tag { display: none; } body.slots-live [data-slot] { outline: none; } /* ══════════════════ SECTION: trust-strip ══════════════════ */ /* At ≥980px (hero photo edge exposed below the docked form) the badge row rides up over the hero, overlapping the photo's bottom edge by roughly half a card height — same layering trick as the mobile form card. */ .trust-strip { position: relative; z-index: 6; } @media (min-width: 980px) { /* Only lift when main.js actually docked the form card into the hero — otherwise this eats the form card's own section gap instead of the photo. */ html.js .trust-strip { margin-top: -2.8rem; } /* ≈ half the badge-row height */ } /* Explicit column counts (1 → 2+2 → 4) so four badges never strand an orphan on its own row the way auto-fit does at in-between widths */ .trust-strip-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; } @media (min-width: 540px) { .trust-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 980px) { .trust-strip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .trust-badge { display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1.2rem; border-radius: var(--radius-card); background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); border: 1px solid var(--glass-border); box-shadow: var(--specular), 0 4px 14px rgba(12, 42, 32, 0.06); } .trust-badge .icon { color: var(--brand-mid); flex: none; } /* Direct child only — nested [data-bind] spans must stay inline, or the bound values break onto their own lines */ .trust-badge > span { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .trust-badge strong { font-size: 0.98rem; color: var(--heading); } .trust-badge small { font-size: 0.82rem; color: var(--muted); } /* ══════════════════ SECTION: emergency ══════════════════ */ .emergency-card { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3.5vw, 2.5rem); } .emergency-copy { flex: 1 1 22rem; } .emergency-copy h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin-bottom: 0.3rem; } .emergency-copy p { margin: 0; } /* The long "Call Now — (number)" label must never overflow tiny screens */ .emergency-card .btn { max-width: 100%; } @media (max-width: 460px) { .emergency-card .btn-lg { white-space: normal; text-align: center; width: 100%; } } .pulse-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-b); box-shadow: 0 0 0 0 rgba(53, 214, 141, 0.55); animation: openPulse 2.4s ease-out infinite; flex: none; } /* ══════════════════ SECTION: services (cards) ══════════════════ */ .card-grid { display: grid; gap: 1.15rem; } /* 1 → 2 → 4 columns: keeps 4 or 8 cards perfectly balanced (6 shows as 4+2) */ .card-grid.cols-4 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 600px) { .card-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Photo-led service cards: real service photo on top, copy below. The photo is clipped to the card radius by overflow: hidden. */ .card { display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); border: 1px solid var(--glass-border); box-shadow: var(--specular), var(--shadow-soft); transition: transform 0.22s ease, box-shadow 0.22s ease; } @media (hover: hover) { .card:hover { transform: translateY(-4px); box-shadow: var(--specular), var(--shadow-lifted); } } .card-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; /* 16:10 intrinsic ratio keeps the crop even where aspect-ratio is unsupported */ /* opaque hairline covers the sub-pixel seam under a fractional-height photo, so the aurora can't bleed through the glass card as a faint colored line below the image (most visible on the first services row) */ box-shadow: 0 1px 0 0 #fbfcfd; } .card-body { padding: 1.15rem 1.5rem 1.35rem; } .card h3 { margin-bottom: 0.4rem; } .card p { margin: 0; color: var(--muted); font-size: 0.99rem; } /* ══════════════════ SECTION: results (before/after + gallery) ══════════════════ */ .ba-slider { --ba-pos: 50%; position: relative; margin-inline: auto; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16 / 9; max-height: 620px; box-shadow: var(--shadow-lifted); border: 1px solid rgba(255, 255, 255, 0.4); } @media (max-width: 1023px) { .ba-slider { aspect-ratio: 4 / 3; } } @media (max-width: 767px) { .ba-slider { aspect-ratio: 1 / 1; } } /* Engines without aspect-ratio (iOS ≤14): the absolutely-positioned images would collapse the box — give it an explicit height instead */ @supports not (aspect-ratio: 1) { .ba-slider { height: 56vw; max-height: 620px; } @media (max-width: 767px) { .ba-slider { height: 92vw; } } } .ba-slider .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ba-before-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); } .ba-label { position: absolute; top: 1rem; z-index: 2; padding: 0.25rem 0.85rem; border-radius: var(--radius-btn); background: rgba(14, 20, 18, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; } .ba-label.before { left: 1rem; } .ba-label.after { right: 1rem; } .ba-divider { position: absolute; top: 0; bottom: 0; left: var(--ba-pos); width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 0 12px rgba(0, 0, 0, 0.35); pointer-events: none; } .ba-handle { position: absolute; top: 50%; left: var(--ba-pos); transform: translate(-50%, -50%); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 18px rgba(0, 0, 0, 0.28); color: var(--heading); pointer-events: none; } .ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; /* pan-y keeps vertical swipes scrolling the page (no touch dead-zone); horizontal drags still drive the range natively */ touch-action: pan-y pinch-zoom; -webkit-appearance: none; appearance: none; } /* White ring — the handle floats over photos where brand-green vanishes */ .ba-range:focus-visible ~ .ba-handle { outline: 3px solid #fff; outline-offset: 3px; } /* No JS = nothing drives --ba-pos: hide the interactive affordances and leave an honest static 50/50 comparison (labels + divider stay) */ html:not(.js) .ba-range, html:not(.js) .ba-handle { display: none; } .ba-caption { text-align: center; color: var(--muted); font-size: 0.95rem; margin: 0.9rem auto 3rem; } .gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; } @media (max-width: 1023px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .gallery-grid { grid-template-columns: 1fr; } } .gallery-link { position: relative; display: block; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-soft); border: 1px solid rgba(255, 255, 255, 0.45); } .gallery-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } @media (hover: hover) { .gallery-link:hover img { transform: scale(1.04); } } .gallery-zoom { position: absolute; right: 0.8rem; bottom: 0.8rem; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(14, 20, 18, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); } /* Lightbox */ /* Browsers without support render it as a plain block — keep the closed lightbox invisible there (gallery links open in a new tab instead) */ dialog:not([open]) { display: none; } .lightbox { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; } .lightbox::backdrop { background: rgba(10, 14, 13, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .lightbox-inner { position: relative; display: flex; flex-direction: column; align-items: center; } .lightbox-img { max-width: min(92vw, 1200px); max-height: 80vh; width: auto; height: auto; border-radius: var(--radius-card); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5); background: #23302b; } .lightbox-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; } .lightbox-btn:hover { background: rgba(255, 255, 255, 0.28); } .lightbox-close { top: -0.4rem; right: -0.4rem; transform: translate(50%, -50%); } .lightbox-prev { left: 0.6rem; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 0.6rem; top: 50%; transform: translateY(-50%); } @media (max-width: 640px) { .lightbox-close { top: 0.4rem; right: 0.4rem; transform: none; } } /* ══════════════════ SECTION: video ══════════════════ */ .video-frame { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lifted); border: 1px solid rgba(255, 255, 255, 0.4); max-width: 62rem; margin-inline: auto; background: #10201a; } .video-frame video { width: 100%; height: auto; aspect-ratio: 16 / 9; } /* ══════════════════ SECTION: project-preview (slot) ══════════════════ */ /* The hosting app injects the AI preview app into the slot; the card only provides the glass surface and the centered 320–560px column the widget needs. The mock inside is preview-only chrome (replaced at publish). */ .preview-slot { position: relative; /* anchors the .ip-tag preview label */ width: 100%; max-width: 34rem; /* 544px — inside the widget's 320–560px band */ margin-inline: auto; padding: 1.5rem; border-radius: var(--radius-card); } .preview-mock { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 360px; text-align: center; color: var(--muted); } .preview-mock-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 20px; color: var(--brand-mid); background: linear-gradient(180deg, rgba(18, 146, 95, 0.14), rgba(18, 146, 95, 0.07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(18, 146, 95, 0.12); } .preview-mock-title { margin: 0.9rem 0 0.3rem; font-weight: 800; color: var(--heading); } .preview-mock-copy { margin: 0; max-width: 34ch; font-size: 0.95rem; } /* ══════════════════ SECTION: stats ══════════════════ */ .stats-card { padding: clamp(2rem, 4.5vw, 3.5rem); } .stats-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } /* Four stats: 2×2 on small screens, one row of 4 from tablet up */ .stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; text-align: center; } @media (min-width: 768px) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat-number { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.1; } .stat-number [data-bind] { color: inherit; } .stat-label { color: var(--on-dark-muted); font-weight: 600; font-size: 0.95rem; margin-top: 0.3rem; } /* ══════════════════ SECTION: cta-strip ══════════════════ */ .cta-strip-card { padding: clamp(1.75rem, 4vw, 2.5rem); text-align: center; } .cta-strip-card h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); margin-bottom: 1.1rem; } .cta-strip-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; } .or-call { color: var(--muted); font-weight: 600; } .or-call a { font-weight: 800; text-decoration: none; } /* ══════════════════ SECTION: reviews ══════════════════ */ .review-summary { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; font-size: 1.05rem; color: var(--muted); margin: -1.5rem auto 2rem; text-align: center; } .review-summary strong { color: var(--heading); font-size: 1.15rem; } /* Three mock cards: 1 column, then 3 — never a stranded 2+1 layout. (Only preview chrome — the live widget replaces this grid.) */ .review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; } @media (min-width: 820px) { .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .review-card { padding: 1.5rem 1.4rem; border-radius: var(--radius-card); background: var(--glass-strong); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6); backdrop-filter: blur(var(--glass-blur)) saturate(1.6); border: 1px solid var(--glass-border); box-shadow: var(--specular), var(--shadow-soft); } .review-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.7rem; } .review-avatar { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(180deg, rgba(18, 146, 95, 0.18), rgba(18, 146, 95, 0.10)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(18, 146, 95, 0.14); color: var(--brand-mid); font-weight: 800; font-size: 0.95rem; flex: none; } .review-name { font-weight: 750; color: var(--heading); } .review-loc { font-size: 0.85rem; color: var(--muted); } .review-stars { display: flex; align-items: center; gap: 0.6rem; color: var(--star); font-size: 0.95rem; margin-bottom: 0.6rem; } .review-date { color: var(--muted); font-size: 0.85rem; } .review-card blockquote { margin: 0; color: var(--ink); font-size: 0.99rem; } /* ══════════════════ SECTION: comparison ══════════════════ */ /* Two side-by-side cards: ours carries the accent ring and reads first; the "typical company" card is visually muted. Stacks below 820px. */ .compare-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; align-items: stretch; max-width: 60rem; margin-inline: auto; } @media (min-width: 820px) { .compare-duo { grid-template-columns: 1.08fr 0.92fr; } } .compare-col { padding: clamp(1.5rem, 3vw, 2.1rem); border-radius: var(--radius-card); } .compare-col-us { background: var(--glass-strong); box-shadow: var(--specular), inset 0 0 0 2px rgba(18, 146, 95, 0.35), var(--shadow-lifted); } .compare-col-them { background: var(--glass); } .compare-col-title { display: flex; align-items: center; gap: 0.6rem; font-size: 1.15rem; margin-bottom: 1.1rem; } .compare-col-us .compare-col-title { color: var(--brand-mid); } .compare-col-them .compare-col-title { color: var(--muted); } .compare-col-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } .compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; } .compare-list li { display: flex; gap: 0.7rem; align-items: baseline; font-size: 0.99rem; } .compare-list li > span:last-child { min-width: 0; } .compare-col-us .compare-list li { color: var(--ink); } .compare-col-us .compare-list strong { color: var(--heading); } .compare-col-them .compare-list li { color: var(--muted); } .compare-list .tick, .compare-list .cross { transform: translateY(4px); } .tick, .cross { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 0.35rem; border-radius: 50%; font-size: 0.8rem; font-weight: 800; vertical-align: -0.3em; } .tick { background: rgba(160, 200, 40, 0.22); color: var(--brand-mid); } .cross { background: rgba(120, 130, 126, 0.14); color: #55605b; } /* ══════════════════ SECTION: process ══════════════════ */ /* Exactly three steps: 1 column, then 3 — never a stranded 2+1 layout */ .process-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; } @media (max-width: 819px) { .process-grid { gap: 2.6rem; } } /* clear the -1.1rem step badge */ @media (min-width: 820px) { .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .process-step { position: relative; padding: 2.1rem 1.6rem 1.6rem; border-radius: var(--radius-card); } .step-number { position: absolute; top: -1.1rem; left: 1.4rem; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); color: #fff; font-weight: 800; font-size: 1.15rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px var(--accent-glow); } .process-step h3 { margin: 0.4rem 0 0.45rem; } .process-step p { margin: 0; color: var(--muted); font-size: 0.99rem; } .process-grid { padding-top: 1.1rem; } /* ══════════════════ SECTION: owner ══════════════════ */ .owner-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(1.5rem, 3.5vw, 2.75rem); align-items: center; } @media (min-width: 768px) { .owner-card { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); } } .owner-photo { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-card); box-shadow: var(--shadow-soft); border: 1px solid rgba(255, 255, 255, 0.5); margin-inline: auto; } .owner-copy h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); } .owner-copy p { color: var(--ink); } .owner-sign { font-weight: 750; color: var(--heading); } .owner-chips { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .owner-chips .trust-item { /* text-only chips: inline-block so the flex gap never pads the words apart */ display: inline-block; background: rgba(18, 146, 95, 0.10); color: var(--heading); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(18, 146, 95, 0.12); } /* ══════════════════ SECTION: team ══════════════════ */ /* Expanded-bio cards: 1 column on phones, 2 per row from 768px — any EVEN member count lands balanced, never an orphan row. From 1024px each card turns sideways (portrait left, bio right) so the longer bios read comfortably without towering cards. */ .team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; justify-items: center; } .team-card { display: flex; flex-direction: column; width: 100%; max-width: 26rem; /* keeps single-column portraits sane on large phones */ padding: 0; overflow: hidden; /* clips the portrait to the card radius */ border-radius: var(--radius-card); } .team-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; /* 4:5 intrinsic ratio keeps the crop even where aspect-ratio is unsupported */ } .team-body { padding: 1.1rem 1.25rem 1.3rem; } @media (min-width: 768px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team-card { max-width: none; } } @media (min-width: 1024px) { .team-card { flex-direction: row; align-items: stretch; } .team-photo { width: 40%; max-width: 15rem; aspect-ratio: auto; /* stretch fills the card's full height; object-fit keeps the crop centered */ flex-shrink: 0; } .team-body { padding: 1.4rem 1.5rem; align-self: center; } } .team-name { margin: 0 0 0.2rem; font-size: 1.15rem; } .team-role { margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; color: var(--brand-mid); } .team-bio { margin: 0; font-size: 0.92rem; color: var(--muted); } /* ══════════════════ SECTION: offer ══════════════════ */ .offer-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem; padding: clamp(1.75rem, 4vw, 3rem); } .offer-tag { display: inline-block; padding: 0.3rem 0.9rem; margin-bottom: 0.9rem; border-radius: var(--radius-btn); background: rgba(53, 214, 141, 0.16); box-shadow: inset 0 0 0 1px rgba(53, 214, 141, 0.3); color: var(--accent-on-dark); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .offer-card h2 { margin-bottom: 0.4rem; } .offer-card p { max-width: 38rem; } .offer-fine { font-size: 0.85rem; opacity: 0.85; margin-bottom: 0; } .offer-cta { display: flex; flex-direction: column; gap: 0.8rem; align-items: stretch; min-width: 15rem; } /* Variant switch: only the variant matching data-offer-mode renders */ .offer-variant { display: none; } [data-offer-mode="discount"] .variant-discount { display: block; } [data-offer-mode="seasonal"] .variant-seasonal { display: block; } [data-offer-mode="financing"] .variant-financing { display: block; } [data-offer-mode="scarcity"] .variant-scarcity { display: block; } /* ══════════════════ SECTION: guarantee ══════════════════ */ /* Capped + centered: the card hugs its content instead of stretching the full container width and leaving dead space beside the text */ .guarantee-card { display: flex; align-items: flex-start; gap: 1.5rem; padding: clamp(1.75rem, 4vw, 2.75rem); max-width: 56rem; margin-inline: auto; } .guarantee-shield { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 24px; color: var(--brand-mid); background: linear-gradient(180deg, rgba(18, 146, 95, 0.15), rgba(18, 146, 95, 0.07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 1px rgba(18, 146, 95, 0.14); flex: none; } .guarantee-card h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); } .guarantee-card p { margin: 0; color: var(--muted); } @media (max-width: 640px) { .guarantee-card { flex-direction: column; } } /* ══════════════════ SECTION: area (gbp card + map slot) ══════════════════ */ .gbp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; align-items: stretch; } @media (min-width: 900px) { .gbp-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } } .gbp-card { display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius-card); } .gbp-name-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; } .gbp-name-row h3 { margin: 0; font-size: 1.3rem; } .gbp-pin { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; color: var(--brand-mid); background: linear-gradient(180deg, rgba(18, 146, 95, 0.15), rgba(18, 146, 95, 0.07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(18, 146, 95, 0.12); flex: none; } .gbp-info-list { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.85rem; } .gbp-info-list li { display: flex; align-items: baseline; gap: 0.7rem; } .gbp-info-list .icon { color: var(--brand-mid); flex: none; transform: translateY(3px); } .gbp-info-list a { font-weight: 750; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .gbp-hours-week { display: grid; gap: 0.15rem; font-size: 0.95rem; width: 100%; max-width: 21rem; } .gbp-hours-week div { display: flex; justify-content: space-between; gap: 1rem; } .gbp-hours-week span:first-child { color: var(--muted); } .area-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .area-chips.in-card { margin-bottom: 1.4rem; } .gbp-card-cta { margin-top: auto; } .map-frame { position: relative; min-height: 340px; border-radius: var(--radius-card); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: var(--shadow-soft); background: #e8ede9; } .map-frame > img, .map-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } @media (max-width: 899px) { .map-frame { min-height: 340px; height: 46vw; max-height: 420px; } } /* ══════════════════ SECTION: faq ══════════════════ */ .faq-list { max-width: 46rem; margin-inline: auto; display: grid; gap: 0.8rem; } .faq-item { border-radius: var(--radius-card); padding: 0; overflow: hidden; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; font-weight: 700; color: var(--heading); cursor: pointer; list-style: none; min-height: 44px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-chevron { flex: none; color: var(--brand-mid); transition: transform 0.25s ease; } .faq-item[open] .faq-chevron { transform: rotate(180deg); } .faq-body { padding: 0 1.35rem 1.15rem; } .faq-body p { margin: 0; color: var(--muted); } /* ══════════════════ SECTION: final-cta ══════════════════ */ .final-card { text-align: center; padding: clamp(2.25rem, 5vw, 3.75rem); } .final-card h2 { font-size: clamp(1.8rem, 3.8vw, 2.8rem); } .final-sub { margin-inline: auto; font-size: 1.1rem; } .final-actions { justify-content: center; margin-top: 1.4rem; } .final-phone-line { margin: 1.1rem auto 0; color: var(--on-dark-muted); } .final-phone-line a { color: var(--accent-on-dark); font-weight: 800; text-decoration: none; } /* ══════════════════ SECTION: footer ══════════════════ */ .site-footer { padding-bottom: 2rem; } .footer-card { display: flex; flex-direction: column; gap: 0.9rem; align-items: center; text-align: center; padding: 1.75rem 1.5rem; border-radius: var(--radius-xl); font-size: 0.92rem; color: var(--muted); } .footer-nap { display: flex; flex-direction: column; gap: 0.2rem; align-items: center; } .footer-biz-name { font-weight: 800; color: var(--heading); font-size: 1.05rem; } .footer-phone { color: var(--brand-mid); font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; } .footer-legal a { color: var(--muted); display: inline-flex; align-items: center; min-height: 44px; } @media (max-width: 979px) { .site-footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); } } /* ══════════════════ SECTION: sticky-bar ══════════════════ */ .sticky-bar { position: fixed; left: 50%; bottom: calc(0.8rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; gap: 0.6rem; padding: 0.55rem; border-radius: var(--radius-btn); background: rgba(255, 255, 255, 0.66); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8); backdrop-filter: blur(var(--glass-blur)) saturate(1.8); border: 1px solid var(--glass-border); box-shadow: var(--specular), 0 12px 34px rgba(12, 42, 32, 0.22); transition: transform 0.28s ease, opacity 0.28s ease; width: max-content; max-width: calc(100vw - 1.5rem); } .sticky-bar .btn { flex: none; } @media (max-width: 360px) { .sticky-bar { gap: 0.4rem; padding: 0.45rem; } .sticky-bar .btn { padding-inline: 1.1rem; font-size: 0.95rem; } } .sticky-bar.hidden-bar { transform: translateX(-50%) translateY(140%); opacity: 0; pointer-events: none; } @media (min-width: 980px) { .sticky-bar { display: none; } html { scroll-padding-bottom: 0; } } /* ══════════════════ Thank-you page ══════════════════ */ .thanks-section { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 3rem 0; } .thanks-card { max-width: 38rem; margin-inline: auto; text-align: center; padding: clamp(2rem, 5vw, 3.25rem); } .thanks-icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; margin-bottom: 1.4rem; color: #fff; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 30px var(--accent-glow); } .thanks-sub { color: var(--muted); font-size: 1.1rem; margin-inline: auto; } .thanks-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.9rem; text-align: left; } .thanks-steps li { display: flex; gap: 0.9rem; align-items: baseline; } .thanks-step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, rgba(160, 200, 40, 0.22), rgba(18, 146, 95, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(18, 146, 95, 0.14); color: var(--brand-mid); font-weight: 800; font-size: 0.9rem; flex: none; transform: translateY(4px); } /* ══════════════════ Reveal-on-scroll (JS-gated, subtle, one-time) ══════════════════ */ html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.38s ease, transform 0.38s ease; } html.js .reveal.in { opacity: 1; transform: none; } /* SAFETY NET (hosting-app contract): anything injected INSIDE a slot is always visible, even if it carries a copied .reveal class the observer never saw — never remove this rule */ html.js [data-slot] .reveal { opacity: 1; transform: none; } /* ══════════════════ Degradation & preference fallbacks ══════════════════ */ /* No backdrop-filter → near-solid fills, same hierarchy */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .glass-strong, .card, .review-card, .hero-form-card, .trust-badge, .header-pill, .sticky-bar { background: rgba(255, 255, 255, 0.94); } .btn-glass { background: rgba(255, 255, 255, 0.94); } .hero-copy-panel, .hero-copy-panel .btn-glass, .glass-dark .btn-glass { background: rgba(14, 20, 18, 0.88); } .glass-dark .btn-glass, .hero-copy-panel .btn-glass { background: rgba(255, 255, 255, 0.14); } } /* Reduced transparency → same, by preference */ @media (prefers-reduced-transparency: reduce) { .glass, .glass-strong, .card, .review-card, .hero-form-card, .trust-badge, .header-pill, .sticky-bar { background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: none; backdrop-filter: none; } .hero-copy-panel { background: rgba(14, 20, 18, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* Reduced motion → no reveals, no sweeps, no pulses, no smooth scroll */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .reveal { opacity: 1; transform: none; transition: none; } .open-dot, .pulse-dot { animation: none; } .btn, .card, .gallery-link img, .faq-chevron, .sticky-bar { transition: none; } .btn-primary:hover, .card:hover { transform: none; } } /* Forced colors (Windows High Contrast) — keep structure visible */ @media (forced-colors: active) { .glass, .glass-strong, .glass-dark, .card, .review-card, .hero-form-card, .header-pill, .sticky-bar, .trust-badge, .faq-item, .compare-card, .hero-copy-panel { border: 1px solid CanvasText; } .btn { border: 1px solid CanvasText; } .aurora { display: none; } /* box-shadow focus rings are stripped in forced colors — restore outlines */ [data-slot="lead-form"] input:focus, [data-slot="lead-form"] select:focus, [data-slot="lead-form"] textarea:focus { outline: 2px solid Highlight; } } /* Print — quote-friendly, no chrome */ @media print { .aurora, .site-header, .sticky-bar, .ip-tag, .skip-link, .lightbox, video { display: none !important; } body { background: #fff; color: #000; } .hero { min-height: 0; padding: 1rem 0; } .hero-media { display: none; } .hero-copy-panel, .glass, .glass-strong, .glass-dark, .card, .review-card, .hero-form-card { background: #fff !important; color: #000 !important; box-shadow: none !important; border: 1px solid #999 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .hero-copy-panel h1, .glass-dark h2, .glass-dark h3, .glass-dark p, .stat-number, .stat-label { color: #000 !important; } section, .cta-strip { padding-block: 0 1.5rem; } } /* Hero service chips */ .hero-chips{ list-style:none; margin:0.9rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:0.5rem; } .hero-chips li{ display:inline-flex; align-items:center; padding:0.42rem 0.85rem; border-radius:999px; font-size:0.95rem; font-weight:600; line-height:1; color:#fff; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } @media (max-width:600px){ .hero-chips li{ font-size:0.85rem; padding:0.36rem 0.7rem; } } /* Google review badge */ .trust-badge--google { background: rgba(255,255,255,0.9); border: 1px solid rgba(22,32,28,0.08); box-shadow: var(--specular), 0 8px 22px rgba(12,42,32,0.10); } .trust-badge--google .g-mark { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.14); } .trust-badge--google .g-body { display: flex; flex-direction: column; line-height: 1.25; } .trust-badge--google .g-top { display: flex; align-items: center; gap: 0.42rem; flex-wrap: wrap; } .trust-badge--google .g-score { font-size: 1.22rem; font-weight: 800; letter-spacing: -0.01em; color: var(--heading); } .trust-badge--google .g-stars { color: #f5a623; font-size: 0.95rem; letter-spacing: 0.06em; } .trust-badge--google .g-on { font-size: 0.86rem; font-weight: 600; color: var(--muted); } .trust-badge--google small { font-size: 0.82rem; color: var(--muted); } /* ══════════════════ Hero project strip (on dark hero) ══════════════════ */ .hero-strip{ margin-top:1.5rem; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent); } .hstrip-track{ display:flex; gap:0.85rem; width:max-content; animation:hstrip 42s linear infinite; } .hero-strip:hover .hstrip-track{ animation-play-state:paused; } .hstrip-item{ flex:none; width:200px; aspect-ratio:4/3; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,0.18); box-shadow:0 14px 32px rgba(0,0,0,0.45); background:rgba(255,255,255,0.06); } .hstrip-item img{ width:100%; height:100%; object-fit:cover; display:block; } @keyframes hstrip{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion:reduce){ .hstrip-track{ animation:none; } .hero-strip{ overflow-x:auto; } } @media (max-width:600px){ .hstrip-item{ width:150px; border-radius:14px; } } /* ══════════════════ Auto-scrolling project strip ══════════════════ */ .strip-viewport{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); } .strip-track{ list-style:none; margin:0; padding:0.35rem 0; display:flex; gap:1rem; width:max-content; animation:strip-scroll 60s linear infinite; will-change:transform; } .strip-viewport:hover .strip-track, .strip-viewport:focus-within .strip-track{ animation-play-state:paused; } .strip-track .gallery-item{ margin:0; flex:0 0 clamp(240px, 31vw, 420px); } .strip-track .gallery-link{ display:block; position:relative; overflow:hidden; border-radius:18px; aspect-ratio:4/3; box-shadow:0 16px 38px rgba(16,35,28,0.16); } .strip-track .gallery-link img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.7s cubic-bezier(0.22,0.61,0.36,1); } .strip-track .gallery-link:hover img{ transform:scale(1.05); } @keyframes strip-scroll{ from{ transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } } .strip-hint{ display:none; } /* Mobile: real swipe carousel with snap, no auto-scroll */ @media (max-width:860px){ .strip-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-inline:1px; } .strip-viewport::-webkit-scrollbar{ display:none; } .strip-track{ animation:none; gap:0.7rem; padding-inline:0.15rem; width:auto; } .strip-track .gallery-item{ flex:0 0 82vw; max-width:82vw; scroll-snap-align:center; } .strip-track .gallery-item[aria-hidden="true"]{ display:none; } .strip-track .gallery-link{ aspect-ratio:4/3; border-radius:14px; } .strip-track .gallery-zoom{ display:none; } .strip-hint{ display:block; margin:0.7rem 0 0; text-align:center; font-size:0.85rem; letter-spacing:0.02em; opacity:0.6; } } @media (prefers-reduced-motion:reduce){ .strip-track{ animation:none; } .strip-viewport{ overflow-x:auto; scroll-snap-type:x mandatory; } .strip-track .gallery-item{ scroll-snap-align:center; } .strip-track .gallery-item[aria-hidden="true"]{ display:none; } } } /* ══════════════════ Hero CTA + trust refinement ══════════════════ */ .hero-rating{ gap:0.2rem 0.6rem; padding:0.55rem 1.1rem; margin-bottom:1.15rem; font-size:1rem; background:rgba(255,255,255,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0 0 1px rgba(255,255,255,0.2), 0 8px 22px rgba(6,26,19,0.25); } .hero-rating .stars{ color:#ffc53d; font-size:1.05rem; letter-spacing:0.06em; text-shadow:0 1px 2px rgba(0,0,0,0.25); } .hero-rating strong{ font-size:1.2rem; font-weight:800; color:#fff; letter-spacing:-0.01em; } .hero-rating .count{ font-size:0.9rem; font-weight:600; opacity:0.9; } /* Actions: equal, generous, predictable at every width */ .hero-actions{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-bottom:1.25rem; max-width:34rem; } .hero-actions .btn{ flex:1 1 14rem; min-width:0; justify-content:center; padding:1.05rem 1.5rem; font-size:1.075rem; font-weight:750; letter-spacing:-0.005em; white-space:nowrap; } .hero-actions .btn-primary{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(60,80,10,0.26), 0 16px 38px var(--accent-glow); } .hero-copy-panel .hero-actions .btn-glass{ background:rgba(255,255,255,0.16); box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0 0 1.5px rgba(255,255,255,0.34); } .hero-copy-panel .hero-actions .btn-glass:hover{ background:rgba(255,255,255,0.26); } /* Trust chips: one consistent rhythm, readable on small screens */ .hero-trust{ gap:0.5rem; } .hero-trust .trust-item{ padding:0.42rem 0.9rem; font-size:0.9rem; background:rgba(255,255,255,0.14); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2), inset 0 0 0 1px rgba(255,255,255,0.14); } @media (max-width:640px){ .hero-actions{ grid-template-columns:1fr; max-width:none; } .hero-actions .btn{ padding:1.1rem 1.25rem; font-size:1.05rem; } .hero-rating{ justify-content:center; padding:0.5rem 0.95rem; font-size:0.95rem; } .hero-rating strong{ font-size:1.1rem; } .hero-rating .count{ font-size:0.85rem; } .hero-trust{ gap:0.4rem; } .hero-trust .trust-item{ font-size:0.82rem; padding:0.36rem 0.7rem; } } /* ============================================================ SPACE CONSTRUCTION — 2026 refresh: alternating bands, badges, gallery, before/after, offer stack, mobile form fixes ============================================================ */ :root { --sc-green: #0a6b5b; --sc-green-dk: #063d38; --sc-tint: #eef5f3; } /* ---------- alternating section bands ---------- */ [data-section="services"], [data-section="comparison"], [data-section="area"] { background: var(--sc-tint); } [data-section="before-after"], [data-section="project-preview"], [data-section="reviews"], [data-section="guarantee"] { background: #fff; } [data-section="gallery"], [data-section="video"], [data-section="process"], [data-section="faq"], [data-section="video-reviews"] { background: linear-gradient(165deg, var(--sc-green) 0%, var(--sc-green-dk) 100%); color: var(--accent-pale); } [data-section="gallery"] h2, [data-section="video"] h2, [data-section="process"] h2, [data-section="faq"] h2, [data-section="video-reviews"] h2, [data-section="gallery"] h3, [data-section="process"] h3, [data-section="faq"] h3, [data-section="video-reviews"] h3 { color: #fff; } [data-section="gallery"] .section-head p, [data-section="video"] .section-head p, [data-section="process"] .section-head p, [data-section="faq"] .section-head p, [data-section="video-reviews"] .section-head p, [data-section="process"] .process-step p { color: rgba(255,255,255,0.82); } [data-section="gallery"] .kicker, [data-section="video"] .kicker, [data-section="process"] .kicker, [data-section="faq"] .kicker, [data-section="video-reviews"] .kicker { color: var(--accent-on-dark); } [data-section="process"] .glass, [data-section="faq"] .glass { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.16); color: var(--accent-pale); backdrop-filter: blur(6px); } [data-section="faq"] summary { color: #fff; } [data-section="faq"] .faq-body, [data-section="faq"] .faq-body p { color: rgba(255,255,255,0.85); } [data-section="process"] .step-number { background: rgba(255,255,255,0.16); color: #fff; } /* breathing room so the services block isn't glued to the hero */ [data-section="services"] { padding-top: clamp(3.5rem, 7vw, 6rem); } [data-section="results"] { padding-bottom: clamp(2.5rem, 5vw, 4rem); } /* ---------- header financing badge ---------- */ .header-badge--fin .icon { color: var(--brand-mid); } @media (max-width: 1180px) { .header-badge--fin { display: none; } } /* ---------- hero rating with Google mark ---------- */ .hero-rating .g-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.18); flex: none; } .hero-area-pill { margin-top: 0.9rem; } .hero-trust--bubbles .trust-item { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.26); border-radius: 999px; padding: 0.42rem 0.8rem; backdrop-filter: blur(6px); } /* ---------- trust strip: white cards + colorful marks ---------- */ .trust-strip-row { gap: 0.9rem; flex-wrap: wrap; } .trust-strip .trust-badge { background: #fff; border: 1px solid rgba(16,40,32,0.09); border-radius: 16px; box-shadow: 0 8px 22px -14px rgba(12,40,30,0.35); padding: 0.85rem 1.05rem; display: flex; align-items: center; gap: 0.7rem; flex: 1 1 210px; } .trust-strip .trust-badge strong { display: block; font-size: 0.95rem; color: var(--heading, #12211c); } .trust-strip .trust-badge small { display: block; font-size: 0.78rem; opacity: 0.7; } .tb-mark { width: 40px; height: 40px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; } .tb-mark--shield { background: #e8f1ff; color: #1a73e8; } .tb-mark--star { background: #fff5e0; color: #f4b400; } .tb-mark--home { background: var(--accent-chip-bg); color: var(--brand-mid); } .tb-mark--card { background: #f1ecff; color: #6b4dd6; } .trust-badge--google .g-mark { width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid rgba(16,40,32,0.1); display: inline-flex; align-items: center; justify-content: center; flex: none; } .trust-badge--google .g-stars { color: #f4b400; letter-spacing: 0.5px; } /* ---------- lead form: cleaner frame + mobile ---------- */ .hero-form-card { border: 1px solid rgba(16,40,32,0.10); border-radius: 22px; box-shadow: 0 30px 60px -34px rgba(10,40,30,0.45); background: #fff; } .hero-form-card .lead-form input, .hero-form-card .lead-form textarea { background: #fbfcfb; border: 1px solid rgba(16,40,32,0.16); border-radius: 12px; font-size: 16px; padding: 0.85rem 0.95rem; width: 100%; } .bh-preview__phone--solo { display: block; } .bh-preview__phone--solo input { width: 100%; } @media (max-width: 760px) { .hero-form-card { padding: 1.15rem; border-radius: 18px; } .hero-form-card h2 { font-size: 1.45rem; } .hero-form-card .lead-form { display: grid; grid-template-columns: 1fr; gap: 0.7rem; } .hero-form-card .lead-form .btn { width: 100%; } .hero-form-card .form-privacy { font-size: 0.8rem; } } /* ---------- gallery grid ---------- */ .gal-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .gal-tile { margin: 0; position: relative; border-radius: 18px; overflow: hidden; background: #0b1f18; } .gal-tile img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .6s ease; } .gal-tile:hover img { transform: scale(1.05); } .gal-tile figcaption { position: absolute; inset: auto 0 0 0; padding: 1.4rem 1rem 0.85rem; background: linear-gradient(180deg, transparent, rgba(6,20,15,0.82)); color: #fff; display: flex; flex-direction: column; gap: 0.1rem; } .gal-tile figcaption strong { font-size: 0.98rem; } .gal-tile figcaption span { font-size: 0.8rem; opacity: 0.85; } /* ---------- before / after ---------- */ .ba-grid { display: grid; gap: 1.25rem; } .ba-card { border: 1px solid rgba(16,40,32,0.1); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px -30px rgba(10,40,30,0.5); } .ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(16,40,32,0.12); } .ba-half { position: relative; } .ba-half img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .ba-tag { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2; font-size: 0.7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: 999px; color: #fff; } .ba-tag--before { background: rgba(20,24,22,0.78); } .ba-tag--after { background: var(--sc-green); } .ba-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: baseline; padding: 0.85rem 1.1rem; } .ba-meta strong { font-size: 1rem; } .ba-meta span { font-size: 0.85rem; opacity: 0.7; } @media (min-width: 900px) { .ba-grid { grid-template-columns: repeat(3, 1fr); } } /* ---------- client video slots ---------- */ .vr-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .vr-slot { aspect-ratio: 16/9; border-radius: 18px; background: rgba(255,255,255,0.08); border: 1px dashed rgba(255,255,255,0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; color: rgba(255,255,255,0.85); text-align: center; padding: 1rem; } .vr-play { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.16); display: grid; place-items: center; font-size: 1.1rem; } .vr-note { font-size: 0.85rem; max-width: 22ch; } /* ---------- offer stack ---------- */ .offer-stack .offer-lead { margin-bottom: 0.9rem; } .offer-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.55rem; } .offer-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 1rem; line-height: 1.5; } .offer-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-b); color: var(--accent-ink); font-size: 0.8rem; font-weight: 800; display: grid; place-items: center; margin-top: 2px; } .offer-guarantee { border-left: 3px solid var(--accent-b); padding: 0.6rem 0 0.6rem 0.9rem; margin: 0 0 0.8rem; font-size: 0.97rem; } .vr-slot--wide { max-width: 960px; margin: 0 auto; } @media (max-width: 720px) { .lead-form .field, .lead-form .form-row, .lead-form input, .lead-form textarea { width: 100% !important; grid-column: 1 / -1 !important; } } /* ===== Brands & Awards ===== */ .brands-subhead { text-align:center; margin: 56px 0 24px; font-size: clamp(20px,2.4vw,28px); font-weight:800; color:var(--heading); } .brand-grid, .award-grid { list-style:none; margin:32px 0 0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(6,1fr); } .brand-card { background:#fff; border:1px solid rgba(16,54,38,.09); border-radius:16px; padding:22px 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:104px; box-shadow:0 8px 24px -18px rgba(9,40,27,.5); } .brand-name { font-weight:800; letter-spacing:-.02em; font-size:19px; color:var(--neutral-950); } .brand-sub { font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:#7b8b83; font-weight:700; } .award-grid { grid-template-columns:repeat(3,1fr); gap:18px; } .award-card { background:#fff; border:1px solid rgba(16,54,38,.09); border-radius:18px; padding:20px; display:flex; align-items:center; gap:16px; box-shadow:0 12px 30px -22px rgba(9,40,27,.6); } .aw-icon { flex:0 0 auto; width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:#f3f6f4; } .aw-body { display:flex; flex-direction:column; line-height:1.3; } .aw-body strong { font-size:16px; color:var(--heading); font-weight:800; } .aw-body span { font-size:13px; color:#69786f; } .aw-mark { font-weight:900; font-size:14px; letter-spacing:-.02em; color:#fff; padding:5px 8px; border-radius:8px; } .aw-angi { background:#ff6153; } .aw-houzz { background:#4dbc15; } .aw-yelp { background:#d32323; } .aw-bbb { background:#005a78; } .aw-cslb { background:var(--neutral-950); font-size:12px; } @media (max-width: 980px) { .brand-grid { grid-template-columns:repeat(3,1fr); } .award-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width: 620px) { .brand-grid { grid-template-columns:repeat(2,1fr); } .award-grid { grid-template-columns:1fr; } } /* ── Hero testimonials rotator ─────────────────────────────────────── */ .testimonials-strip { padding: 2.5rem 0 0.5rem; } .tq-card { position: relative; background: #fff; border: 1px solid rgba(11, 61, 43, 0.1); border-radius: 22px; box-shadow: 0 18px 44px -28px rgba(11, 61, 43, 0.35); padding: 1.5rem 1.25rem 1.1rem; } .tq-head { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: baseline; justify-content: space-between; margin-bottom: 0.85rem; } .tq-title { font-size: clamp(1.15rem, 3.6vw, 1.5rem); margin: 0; letter-spacing: -0.01em; } .tq-rating { margin: 0; font-size: 0.92rem; color: rgba(11, 61, 43, 0.7); } .tq-rating strong { color: var(--brand-mid); } .tq-viewport { position: relative; min-height: 170px; } .tq-slide { margin: 0; position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s; } .tq-slide.is-active { opacity: 1; visibility: visible; transform: none; position: relative; } .tq-stars { color: #f5a623; letter-spacing: 2px; font-size: 1rem; } .tq-quote { margin: 0.5rem 0 0.9rem; font-size: clamp(1rem, 2.9vw, 1.18rem); line-height: 1.55; font-weight: 600; } .tq-meta { display: flex; flex-direction: column; gap: 0.15rem; } .tq-name { font-weight: 800; } .tq-sub { font-size: 0.86rem; color: rgba(11, 61, 43, 0.65); } .tq-dots { display: flex; gap: 0.45rem; justify-content: center; margin-top: 0.9rem; } .tq-dot { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; cursor: pointer; background: rgba(11, 61, 43, 0.2); transition: background 0.2s ease, width 0.2s ease; } .tq-dot.is-active { background: var(--brand-mid); width: 26px; } @media (min-width: 720px) { .tq-card { padding: 1.9rem 2rem 1.4rem; } .tq-viewport { min-height: 150px; } } @media (prefers-reduced-motion: reduce) { .tq-slide { transition: none; } } /* ── Mini FAQ under hero ───────────────────────────────────────────── */ .mini-faq { padding: 2.75rem 0 0.5rem; } .mini-faq-head { text-align: center; max-width: 44ch; margin: 0 auto 1.35rem; } .mini-faq-eyebrow { margin: 0 0 0.35rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-mid); } .mini-faq-title { margin: 0; font-size: clamp(1.4rem, 4.4vw, 2rem); letter-spacing: -0.02em; } .mini-faq-grid { display: grid; gap: 0.7rem; } .mini-faq-item { background: #fff; border: 1px solid rgba(11, 61, 43, 0.11); border-radius: 16px; box-shadow: 0 12px 30px -26px rgba(11, 61, 43, 0.4); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .mini-faq-item[open] { border-color: rgba(14, 106, 73, 0.35); box-shadow: 0 16px 36px -26px rgba(11, 61, 43, 0.5); } .mini-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; min-height: 56px; font-weight: 750; font-size: 1.02rem; cursor: pointer; list-style: none; } .mini-faq-q::-webkit-details-marker { display: none; } .mini-faq-q:hover { color: var(--brand-mid); } .mini-faq-chevron { flex: none; color: var(--brand-mid); transition: transform 0.25s ease; } .mini-faq-item[open] .mini-faq-chevron { transform: rotate(180deg); } .mini-faq-a { padding: 0 1.15rem 1.1rem; } .mini-faq-a p { margin: 0; color: rgba(11, 61, 43, 0.78); line-height: 1.6; } .mini-faq-cta { margin-top: 1.35rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; justify-content: center; text-align: center; } .mini-faq-cta p { margin: 0; font-weight: 650; color: rgba(11, 61, 43, 0.8); } @media (min-width: 860px) { .mini-faq-grid { grid-template-columns: 1fr 1fr; align-items: start; } } @media (prefers-reduced-motion: reduce) { .mini-faq-chevron { transition: none; } } /* ============================================================ 2026 differentiation pass: hero offer, county chips, softer bands, compact brands band ============================================================ */ /* hero: offer card */ .hero-offer { margin-top: 1rem; border-radius: 18px; padding: 0.95rem 1.05rem 0.9rem; background: linear-gradient(150deg, rgba(16,166,132,0.26), rgba(6,47,42,0.55)); border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(10px); box-shadow: 0 22px 48px -30px rgba(0,0,0,0.6); } .hero-offer-tag { display: inline-block; font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: 0.55rem; } .hero-offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; } .hero-offer-list li { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.94rem; line-height: 1.45; color: var(--on-dark); } .hero-offer-list li::before { content: "✓"; color: #6fe3bd; font-weight: 900; flex: none; } .ho-amt { font-weight: 850; color: #fff; } .hero-offer-promise { margin: 0.7rem 0 0; padding-top: 0.65rem; border-top: 1px solid rgba(255,255,255,0.18); font-size: 0.86rem; line-height: 1.5; color: var(--on-dark-muted); } .hero-offer-promise strong { color: #fff; } /* hero: counties as separate chips */ .hero-area { margin-top: 1rem; } .hero-area-label { display: block; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 0.45rem; } .hero-counties { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; } .hero-counties li { font-size: 0.82rem; font-weight: 700; color: var(--on-dark); background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); border-radius: 10px; padding: 0.32rem 0.6rem; backdrop-filter: blur(6px); } /* trust strip additions */ .tb-mark--fb { background: #e7f0fe; color: #1877f2; } /* softer bands — kill the pale white */ [data-section="before-after"], [data-section="reviews"] { background: linear-gradient(180deg, var(--surface-light-top) 0%, var(--surface-light-bot) 100%); } [data-section="project-preview"] { background: #f6faf8; } [data-section="guarantee"] { background: #f1f7f5; } [data-section="brands"] { background: linear-gradient(180deg, var(--surface-light-bot) 0%, var(--surface-light-top) 100%); } /* compact brands + awards band */ .band-compact { padding-top: clamp(2.5rem, 5vw, 3.75rem); padding-bottom: clamp(2.5rem, 5vw, 3.75rem); } .band-compact .brand-grid { gap: 0.6rem; } .band-compact .brand-card { padding: 0.7rem 0.6rem; } .band-compact .brands-subhead { margin-top: 1.5rem; font-size: 1.05rem; } .band-compact .award-grid { gap: 0.6rem; } .band-compact .award-card { padding: 0.65rem 0.75rem; } .band-compact .award-card strong { font-size: 0.9rem; } .band-compact .award-card span { font-size: 0.76rem; } .aw-fb { background: #1877f2; color: #fff; font-weight: 900; font-family: Georgia, serif; width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; } /* awards: real badge images */ .badge-grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 720px) { .badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1080px) { .badge-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .badge-card { background: #fff; border: 1px solid rgba(6,47,42,0.09); border-radius: 14px; padding: 0.7rem 0.8rem; display: grid; place-items: center; box-shadow: 0 12px 26px -22px rgba(6,47,42,0.5); } .badge-card img { width: 100%; height: 48px; object-fit: contain; } /* ══════════════ V2 — modern type + clean hero ══════════════ */ h1, h2, h3, h4, .ho2-title, .ho2-amt, .hr-num, .phone-number, .btn { font-family: var(--font-display); letter-spacing: -0.02em; } h1 { font-weight: 800; } h2, h3 { font-weight: 700; } /* Flat header — no competitor pill */ .site-header { padding-top: 0; } .header-pill { border-radius: 0; border: 0; border-bottom: 1px solid rgba(255,255,255,0.14); background: rgba(6, 33, 29, 0.42); box-shadow: none; padding: 0.55rem 1.25rem; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); } .site-header .container { padding-inline: 0; max-width: none; } .site-header.scrolled .header-pill { background: rgba(6, 33, 29, 0.92); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } .header-badge, .phone-label, .phone-number { color: #fff; } /* Hero shell */ .hero { min-height: 0; padding-bottom: 2.5rem; } .hero-grid { align-items: start; } .hero-copy-panel { background: none !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; } .hero-copy-panel h1 { font-size: clamp(2.35rem, 5.6vw, 4rem); line-height: 1.02; margin: 0.9rem 0 0.7rem; text-wrap: balance; } .hero-lede { color: rgba(255,255,255,0.86); font-size: 1.075rem; max-width: 34rem; margin: 0 0 1.1rem; } /* Review row */ .hero-reviews { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; } .hr-score { display: flex; align-items: baseline; gap: 0.4rem; } .hr-num { font-size: 1.65rem; font-weight: 800; color: #fff; line-height: 1; } .hr-stars { color: #ffc94d; font-size: 1rem; letter-spacing: 0.06em; } .hr-meta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-width: 0; } .hr-logos { display: inline-flex; align-items: center; gap: 0.3rem; } .hr-logo { width: 28px; height: 28px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .hr-text { font-size: 0.875rem; line-height: 1.35; color: rgba(255,255,255,0.82); max-width: 22rem; } .hr-text strong { color: #fff; } /* Service chips — flatter, no glass bubbles */ .hero-chips { gap: 0.4rem 0.45rem; margin-bottom: 1.35rem; } .hero-chips li { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 8px; padding: 0.3rem 0.6rem; font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.92); letter-spacing: 0.01em; } /* Offer card */ .hero-offer2 { border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(244,252,248,0.97)); color: var(--heading); padding: 1rem 1.1rem 1.05rem; box-shadow: 0 18px 44px rgba(0,0,0,0.28); max-width: 36rem; margin-bottom: 1.25rem; } .ho2-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.8rem; } .ho2-badge { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); padding: 0.25rem 0.5rem; border-radius: 6px; } .ho2-title { font-size: 1.12rem; font-weight: 800; } .ho2-note { font-size: 0.8rem; font-weight: 600; color: var(--muted); } .ho2-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.05rem 0; border-top: 1px solid rgba(6,47,42,0.10); } .ho2-grid li { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid rgba(6,47,42,0.10); } .ho2-grid li:nth-child(odd) { border-right: 1px solid rgba(6,47,42,0.10); } .ho2-grid li:nth-child(even) { padding-left: 0.85rem; } .ho2-amt { font-size: 1rem; font-weight: 800; color: var(--brand-mid); letter-spacing: -0.01em; } .ho2-lbl { font-size: 0.88rem; line-height: 1.35; font-weight: 700; color: var(--muted); } .ho2-promise { margin: 0.8rem 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--muted); } .ho2-promise strong { color: var(--heading); } .ho2-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.7rem; font-size: 0.85rem; font-weight: 800; color: var(--brand-green-700, #14664c); text-decoration: none; border-bottom: 2px solid color-mix(in oklab, var(--accent-a) 65%, transparent); } .ho2-link:hover { color: var(--heading); } /* Counties — bold, no bubble */ .hero-area2 { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 1.35rem; } .ha2-label, .ha2-suffix { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.6); } .ha2-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem; margin: 0; padding: 0; } .ha2-list li { font-family: var(--font-display); font-size: clamp(0.95rem, 1.5vw, 1.1rem); font-weight: 800; color: #fff; position: relative; } .ha2-list li + li::before { content: ""; position: absolute; left: -0.4rem; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--accent-b); transform: translateY(-50%); } /* Three hero shots — the first thing customers see */ .hero-shots { list-style: none; margin: 1.5rem 0 0.6rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0.6rem; } .hero-shots li { margin: 0; } .hero-shots img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 14px 34px rgba(0,0,0,0.3); } .hero-shots-note { margin: 0; font-size: 0.82rem; color: rgba(255,255,255,0.72); } .hero-shots-note a { color: var(--accent-on-dark); } @media (max-width: 860px) { .hero-copy-panel h1 { font-size: clamp(2.1rem, 8.5vw, 2.9rem); } .ho2-grid { grid-template-columns: 1fr; } .ho2-grid li:nth-child(odd) { border-right: 0; } .ho2-grid li:nth-child(even) { padding-left: 0; } .hr-text { max-width: 100%; font-size: 0.82rem; } .hero-shots { gap: 0.45rem; } .hero-shots img { border-radius: 11px; } } /* Hero legibility + density pass */ .hero-scrim { background: linear-gradient(180deg, rgba(4,26,23,0.86) 0%, rgba(4,26,23,0.62) 38%, rgba(4,26,23,0.78) 100%), linear-gradient(90deg, rgba(4,26,23,0.72) 0%, rgba(4,26,23,0.25) 70%); } .hero-offer2 { padding: 0.85rem 0.95rem 0.9rem; } .ho2-grid li { padding-top: 0.5rem; padding-bottom: 0.5rem; } .ho2-amt { font-size: 0.95rem; } .ho2-lbl { font-size: 0.85rem; } .ho2-promise { font-size: 0.8rem; } .hero-area2 { gap: 0.35rem 0.5rem; } @media (max-width: 860px) { .hero-copy-panel h1 { font-size: clamp(1.95rem, 7.6vw, 2.6rem); margin-bottom: 0.55rem; } .hero-lede { font-size: 0.98rem; margin-bottom: 0.9rem; } .hero-chips { margin-bottom: 1rem; } .hero-chips li { font-size: 0.76rem; padding: 0.26rem 0.5rem; } .hero-offer2 { margin-bottom: 1rem; } .ha2-list li { font-size: 0.95rem; } .hero { padding-bottom: 1.75rem; } } .hero-area2 { display: block; } .ha2-label { display: block; margin-bottom: 0.3rem; } .ha2-list { gap: 0.2rem 0.85rem; } /* ---------- Lime accent: dark ink on all lime surfaces ---------- */ .btn-primary, .header-phone-icon, .hero-points .icon, .success-icon, .compare-col-icon, .step-number, .thanks-icon, .ho2-badge, .compare-cta .btn-primary { color: var(--accent-ink); } .btn-primary { text-shadow: none; } /* ---------- Multi-platform review badge ---------- */ .trust-badge--platforms .tb-logos { display: inline-flex; align-items: center; flex: none; } .trust-badge--platforms .tb-logo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 26, 12, 0.14), inset 0 0 0 1px rgba(20, 26, 12, 0.07); } .trust-badge--platforms .tb-logo + .tb-logo { margin-left: -10px; } .trust-badge--platforms .tb-logo:nth-child(1) { z-index: 3; } .trust-badge--platforms .tb-logo:nth-child(2) { z-index: 2; } .trust-badge--platforms .tb-logo:nth-child(3) { z-index: 1; } .trust-badge--platforms .tb-logos { flex-direction: row !important; flex-wrap: nowrap; gap: 0; width: auto; height: auto; background: none; box-shadow: none; padding: 0; } /* ===== Real brand logo wall ===== */ .brand-grid--logos { grid-template-columns:repeat(6,1fr); gap:14px; margin-top:28px; } .brand-grid--logos .brand-card { background:linear-gradient(180deg,#fff, #f7faf7); border:1px solid rgba(16,54,38,.10); border-radius:18px; padding:20px 16px 14px; min-height:128px; gap:12px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .brand-grid--logos .brand-card:hover { transform:translateY(-4px); border-color:rgba(16,54,38,.18); box-shadow:0 22px 44px -26px rgba(9,40,27,.55); } .brand-logo { display:flex; align-items:center; justify-content:center; width:100%; height:52px; } .brand-logo img { max-width:100%; max-height:52px; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.62; transition:filter .25s ease, opacity .25s ease; } .brand-grid--logos .brand-card:hover .brand-logo img { filter:none; opacity:1; } .brand-grid--logos .brand-sub { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#8a978f; font-weight:700; text-align:center; line-height:1.4; } @media (max-width: 980px) { .brand-grid--logos { grid-template-columns:repeat(3,1fr); } } @media (max-width: 620px) { .brand-grid--logos { grid-template-columns:repeat(2,1fr); gap:10px; } .brand-grid--logos .brand-card { min-height:104px; padding:16px 12px 12px; } .brand-logo, .brand-logo img { height:38px; max-height:38px; } } /* ========================================================================== Hero v3 — centered layout, clean photo strip, richer offer card ========================================================================== */ /* Center the hero row: the form dock now lives inside the container grid. */ .hero { justify-content: center; } .hero > .container.hero-grid { margin-inline: auto; } /* ---------- Serving row ---------- */ .hero-area3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.5rem; margin: 0 0 1.15rem; } .ha3-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.62); } .ha3-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; } .ha3-list li { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; color: rgba(255,255,255,0.94); padding: 0.3rem 0.65rem; border: 1px solid rgba(255,255,255,0.26); border-radius: 999px; background: rgba(255,255,255,0.08); } /* ---------- Offer card ---------- */ .hero-offer3 { position: relative; margin: 0 0 1.15rem; padding: 1.1rem 1.15rem 1.15rem; border-radius: 20px; color: var(--accent-pale); background: radial-gradient(120% 140% at 100% 0%, rgba(95, 128, 104, 0.22) 0%, rgba(95, 128, 104, 0) 58%), linear-gradient(165deg, rgba(16,22,10,0.92) 0%, rgba(24,32,14,0.94) 100%); border: 1px solid rgba(95, 128, 104, 0.32); box-shadow: 0 22px 48px -26px rgba(0,0,0,0.65); overflow: hidden; } .hero-offer3::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent-a), var(--accent-b)); } .ho3-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; } .ho3-flag { font-size: 0.66rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); padding: 0.28rem 0.6rem; border-radius: 6px; } .ho3-deadline { display: inline-flex; align-items: center; gap: 0.34rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; color: var(--accent-on-dark-soft); padding: 0.26rem 0.6rem; border: 1px solid rgba(219,233,166,0.34); border-radius: 999px; } .ho3-title { font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0.75rem 0 0.3rem; color: #fff; } .ho3-sub { margin: 0 0 0.9rem; font-size: 0.86rem; line-height: 1.5; color: rgba(244,247,234,0.74); } .ho3-list { list-style: none; margin: 0 0 0.9rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; } .ho3-list li { display: flex; align-items: flex-start; gap: 0.5rem; } .ho3-check { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 999px; color: var(--accent-ink); background: linear-gradient(135deg, var(--accent-a), var(--accent-b)); } .ho3-text { display: grid; gap: 0.1rem; min-width: 0; } .ho3-text strong { font-size: 0.9rem; font-weight: 800; color: #fff; letter-spacing: -0.005em; } .ho3-text span { font-size: 0.78rem; line-height: 1.4; color: rgba(244,247,234,0.68); } .ho3-promise { margin: 0 0 0.95rem; padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; line-height: 1.5; color: rgba(244,247,234,0.7); } .ho3-promise strong { color: var(--accent-on-dark-soft); } .ho3-cta { width: 100%; justify-content: center; } /* ---------- Clean photo strip (3-up, auto paging) ---------- */ .shots-panel { margin: 1.35rem 0 0; padding: 0.9rem 0.9rem 0.75rem; border-radius: 20px; background: rgba(255,255,255,0.94); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 24px 54px -30px rgba(10,18,6,0.55); } .shots-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0 0.15rem 0.65rem; } .shots-eyebrow { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand-mid); } .shots-link { font-size: 0.78rem; font-weight: 700; color: var(--heading); text-decoration: none; border-bottom: 1px solid rgba(25,29,18,0.28); } .shots-link:hover { border-bottom-color: var(--brand-mid); color: var(--brand-mid); } .shots-viewport { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .shots-viewport::-webkit-scrollbar { display: none; } .shots-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; } .shots-slide figure { margin: 0; } .shots-slide img { display: block; width: 100%; height: clamp(96px, 13vw, 158px); object-fit: cover; border-radius: 13px; background: #e9ece2; } .shots-dots { display: flex; justify-content: center; gap: 0.35rem; margin-top: 0.7rem; } .shots-dot { width: 22px; height: 5px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(25,29,18,0.16); transition: background 0.2s ease, width 0.2s ease; } .shots-dot.is-on { background: var(--brand-mid); width: 32px; } @media (max-width: 979px) { .ho3-list { grid-template-columns: 1fr; } .shots-panel { margin-top: 1.1rem; } } @media (max-width: 560px) { .hero-offer3 { padding: 0.95rem 0.95rem 1rem; border-radius: 18px; } .ho3-title { margin-top: 0.65rem; } .shots-panel { padding: 0.7rem 0.7rem 0.6rem; border-radius: 17px; } .shots-slide { gap: 0.4rem; } .shots-slide img { height: 92px; border-radius: 11px; } .ha3-list li { font-size: 0.78rem; padding: 0.26rem 0.55rem; } } /* Accent unification: no mint/teal leftovers */ .hero h1 .grad, .hero-copy-panel h1 .grad { color: var(--accent-on-dark); background: none; -webkit-text-fill-color: currentColor; } .hero-area-pill .icon, .hero-trust .icon, .owner-chips .icon, .final-phone-line a { color: var(--accent-on-dark); } [data-slot="lead-form"] .lead-form .btn-primary { background: linear-gradient(135deg, var(--accent-a), var(--accent-b)) !important; border-color: var(--accent-b) !important; color: var(--accent-ink) !important; } /* ---------- Display type ---------- */ h1, h2, h3, .hero-title, .section-title, .sec-title, .offer-title, .cta-title, .faq-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; } h1 strong, h2 strong, .hero-title strong { font-weight: 800; } /* ---------- Hero: lighter photo, centered stack, review bubble ---------- */ .hero-scrim { background: linear-gradient(180deg, rgba(6,22,20,0.46) 0%, rgba(6,22,20,0.26) 42%, rgba(6,22,20,0.52) 100%); } .hero-copy-panel { max-width: 62rem; margin-inline: auto; text-align: center; } .hero-copy-panel h1 { margin-inline: auto; max-width: 22ch; text-shadow: 0 2px 18px rgba(0,0,0,0.35); } .hero-lede { margin-inline: auto; text-align: center; max-width: 40rem; color: rgba(255,255,255,0.94); } .hero-reviews { justify-content: center; margin-inline: auto; width: max-content; max-width: 100%; gap: 0.7rem; padding: 0.5rem 1rem 0.5rem 0.85rem; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: 0 10px 26px rgba(0,0,0,0.22); } .hero-reviews .hr-text { max-width: 20rem; text-align: left; } .hero-reviews .hr-num { font-size: 1.35rem; } .hero-chips { justify-content: center; } .hero-area3 { justify-content: center; } .shots-panel { margin-inline: auto; } .hero-offer3 { margin-inline: auto; text-align: left; } .hero-offer3 .ho3-cta { display: block; } /* Logo readability in the dark header pill */ .header-logo { display: inline-flex; align-items: center; background: #fff; border-radius: 12px; padding: 0.4rem 0.7rem; box-shadow: 0 4px 14px rgba(0,0,0,0.18); } .header-logo img { display: block; width: clamp(122px, 14vw, 168px); } @media (max-width: 860px) { .hero-reviews { width: 100%; justify-content: center; padding: 0.6rem 0.8rem; } .hero-reviews .hr-text { text-align: center; max-width: 100%; } .hero-reviews .hr-meta { justify-content: center; } .header-logo { padding: 0.32rem 0.55rem; } } @media (min-width: 980px) { html.js .hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; } .hero-form-dock { width: 100%; max-width: 34rem; margin-inline: auto; } .hero-form-dock .hero-form-card { margin-inline: auto !important; } } @media (max-width: 860px) { .hero-reviews { border-radius: 20px; width: max-content; max-width: 100%; flex-direction: column; gap: 0.35rem; } .hero-reviews .hr-text { font-size: 0.8rem; } } /* ═══════════ Clean light header: logo left, phone right ═══════════ */ .site-header { padding-top: 0; } .site-header .container { padding-inline: 0; max-width: none; } .header-pill { border-radius: 0; border: 0; border-bottom: 1px solid rgba(25,29,18,0.10); background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 2px 14px rgba(16,24,10,0.06); padding: 0.5rem clamp(0.9rem, 4vw, 2rem); justify-content: space-between; } .site-header.scrolled .header-pill { background: #fff; box-shadow: 0 6px 22px rgba(16,24,10,0.12); } .header-logo { background: none !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; } .header-logo img { width: clamp(126px, 15vw, 190px); } .header-badge, .header-cta { display: none !important; } .header-actions { gap: 0.6rem; margin-left: auto; } .header-phone { color: var(--heading); } .header-phone .phone-label, .header-phone .phone-number { color: var(--heading); } /* ═══════════ Hero copy bubble ═══════════ */ .hero-copy-panel { background: rgba(9, 22, 16, 0.52) !important; -webkit-backdrop-filter: blur(18px) saturate(1.4) !important; backdrop-filter: blur(18px) saturate(1.4) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 40px 90px -40px rgba(0,0,0,0.7) !important; border-radius: 30px !important; padding: clamp(1.15rem, 3.4vw, 2.1rem) clamp(1.1rem, 3.4vw, 2.25rem) clamp(1.35rem, 3.4vw, 2.1rem) !important; text-align: center; max-width: 62rem; margin-inline: auto; } .hero-copy-panel .hero-lede { margin-inline: auto; } .hero-copy-panel .hero-chips, .hero-copy-panel .hero-reviews { justify-content: center; } /* ═══════════ Staggered 3-up photo strip (center raised) ═══════════ */ .shots-panel { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } .shots-panel-head { display: none; } .shots-slide { align-items: end; gap: clamp(0.4rem, 1.4vw, 0.8rem); padding: 0.9rem 0.1rem 0.2rem; } .shots-fig img { height: clamp(112px, 15vw, 190px); border-radius: 18px; box-shadow: 0 22px 46px -24px rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.85); } .shots-fig--mid img { height: clamp(140px, 19vw, 236px); border-radius: 20px; } .shots-dot { background: rgba(255,255,255,0.35); } .shots-dot.is-on { background: var(--accent-on-dark, #d9ee5a); } @media (max-width: 560px) { .shots-fig img { height: 96px; border-radius: 14px; } .shots-fig--mid img { height: 122px; border-radius: 16px; } .hero-copy-panel { border-radius: 24px !important; } } .hero-grid > * { min-width: 0; } .hero-copy-panel { min-width: 0 !important; width: 100%; } .hero-copy-panel h1 { overflow-wrap: break-word; } .shots-panel, .shots-viewport, .shots-slide { min-width: 0; max-width: 100%; } .shots-slide { flex: 0 0 100%; } /* ══════════════ V3 — flow, bubbles, geo band, sticky bar ══════════════ */ /* one dark surface for every dark band — no second green in the palette */ :root { --sc-green: #232c1c; --sc-green-dk: #14170e; --sc-tint: var(--neutral-100); } [data-section="gallery"], [data-section="video"], [data-section="process"], [data-section="faq"], [data-section="testimonials"], [data-section="hero-testimonials"], [data-section="video-reviews"] { background: linear-gradient(168deg, #262f20 0%, #14170e 100%); } /* soft transition into/out of the dark bands */ [data-section="gallery"] { border-top: 1px solid rgba(255,255,255,0.10); } /* dark bubbles: a touch lighter so they read on bright backgrounds */ .glass-dark { background: linear-gradient(180deg, rgba(30,52,44,0.86) 0%, rgba(22,42,35,0.90) 100%); border-color: rgba(255,255,255,0.14); } .hero-copy-panel { background: linear-gradient(180deg, rgba(68,78,63,0.80) 0%, rgba(48,59,46,0.86) 100%) !important; border-color: rgba(255,255,255,0.30) !important; box-shadow: 0 30px 72px -34px rgba(0,0,0,0.54), inset 0 1px 0 rgba(255,255,255,0.18) !important; } /* bubbles shouldn't sit flush on the band edge */ .stats-band, .guarantee-section, .cta-strip, .final-cta, .testimonials-strip { padding-top: clamp(2.75rem, 6vw, 4.5rem); padding-bottom: clamp(2.75rem, 6vw, 4.5rem); } .stats-card { padding: clamp(1.9rem, 4vw, 3rem); } /* brand + award logos in full colour (no grayscale) */ .brand-logo img, .badge-card img { filter: none !important; opacity: 1 !important; } .brand-grid--logos .brand-card:hover .brand-logo img { filter: none; opacity: 1; } /* bigger hero project photos — closer to the bathroom reference */ .shots-fig img { height: clamp(160px, 21vw, 260px); border-radius: 20px; } .shots-fig--mid img { height: clamp(196px, 26vw, 320px); border-radius: 22px; } @media (max-width: 560px) { .shots-fig img { height: 132px; border-radius: 16px; } .shots-fig--mid img { height: 164px; border-radius: 18px; } } /* ---------- service-area band ---------- */ .geo-band { padding: clamp(1.1rem, 3vw, 1.6rem) 0; background: linear-gradient(180deg, #14705d 0%, #126554 100%); } .geo-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; text-align: center; } .geo-pin { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.14); color: var(--accent-on-dark, #d9ee5a); flex: none; } .geo-copy { display: grid; gap: 0.15rem; text-align: left; } .geo-copy strong { color: #fff; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.01em; } .geo-copy span { color: rgba(255,255,255,0.78); font-size: 0.86rem; } .geo-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; } .geo-pills li { font-size: 0.82rem; font-weight: 700; color: #fff; padding: 0.34rem 0.75rem; border-radius: 999px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.22); } @media (max-width: 640px) { .geo-copy { text-align: center; } .geo-inner { flex-direction: column; } } /* ---------- sticky bar v2 (full-width, own look) ---------- */ .sticky-bar--v2 { left: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none; border-radius: 0; padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(18,32,26,0.94) 0%, rgba(13,25,20,0.97) 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 0; border-top: 1px solid rgba(255,255,255,0.12); box-shadow: 0 -12px 30px rgba(0,0,0,0.28); gap: 0.5rem; } .sticky-bar--v2 .btn { flex: 1 1 0; min-width: 0; font-size: 0.95rem; padding-inline: 0.6rem; } .sticky-bar--v2 .sticky-quote { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); } .sticky-bar--v2.hidden-bar { transform: translateY(140%); } /* lead form now lives near the bottom of the page — no hero overlap */ .hero-form-wrap { margin-top: 0 !important; padding-block: clamp(2.5rem, 6vw, 4.5rem) !important; } /* ══════════════ V4 — bright hero bubble, floating header, sticky bar ══════════════ */ /* Hero review bubble: bright white glass with ink text */ .hero-reviews { background: rgba(255,255,255,0.99) !important; border: 1px solid var(--neutral-0) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 14px 34px rgba(0,0,0,0.28) !important; } .hero-reviews .hr-num, .hero-reviews .hr-text, .hero-reviews .hr-text strong { color: var(--neutral-900) !important; } .hero-reviews .hr-stars { color: #f2a900; } .hero-reviews .hr-logo { background: #fff; box-shadow: 0 1px 4px rgba(16,24,10,0.18); } /* Header: floating rounded bar instead of a full-width square slab */ .site-header { padding-top: clamp(0.5rem, 1.6vw, 0.9rem); } .site-header .container { padding-inline: clamp(0.75rem, 3vw, 1.5rem); max-width: 82rem; margin-inline: auto; } .header-pill { border-radius: var(--radius-btn); border: 1px solid rgba(25,29,18,0.08); border-bottom: 1px solid rgba(25,29,18,0.08); background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 10px 30px rgba(16,24,10,0.12); padding: 0.45rem clamp(0.85rem, 2.4vw, 1.35rem); } .site-header.scrolled .header-pill { background: rgba(255,255,255,0.97); box-shadow: 0 12px 32px rgba(16,24,10,0.16); } /* Sticky bar: outline "Call Now" + lime "Book a Consultation" */ .sticky-bar--v2 .sticky-call { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); } .sticky-bar--v2 .sticky-book { background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); color: var(--accent-ink); border: 0; box-shadow: 0 8px 22px var(--accent-glow); } /* Hero review bubble: logos on top, then 4.9/5 + stars, then the count */ .hero-reviews { flex-direction: column !important; align-items: center; gap: 0.3rem !important; padding: 0.7rem 1.15rem !important; border-radius: 22px !important; text-align: center; } .hr-logos-row { display: flex; justify-content: center; } .hero-reviews .hr-score { align-items: center; gap: 0.3rem; } .hero-reviews .hr-num { font-size: 1.5rem; } .hr-outof { font-size: 1rem; font-weight: 700; color: var(--neutral-600); margin-right: 0.15rem; } .hero-reviews .hr-stars { font-size: 1.05rem; } .hero-reviews .hr-text { margin: 0; text-align: center !important; max-width: 22rem !important; font-size: 0.88rem; } /* Header phone: dark circle so the icon actually reads */ .header-phone .icon-wrap { background: var(--neutral-900) !important; color: var(--lime-500) !important; box-shadow: 0 4px 12px rgba(16,24,10,0.22) !important; border: 0 !important; } .header-phone .icon-wrap svg { stroke: var(--lime-500); } /* Hero review bubble v5 — logos, big stars + score on one line, clean copy */ .hero-reviews { gap: 0.42rem !important; padding: 0.75rem 1.3rem !important; } .hr-logos-row { margin-bottom: 0.05rem; } .hero-reviews .hr-logo { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 50%; } .hr-main { display: flex; align-items: center; gap: 0.55rem; } .hero-reviews .hr-stars { font-size: 1.15rem; letter-spacing: 0.08em; color: #f2a900; line-height: 1; } .hero-reviews .hr-score { display: flex; align-items: baseline; gap: 0.28rem; } .hero-reviews .hr-num { font-size: 1.35rem; font-weight: 800; line-height: 1; } .hero-reviews .hr-outof { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-600); margin: 0; } .hero-reviews .hr-text { font-size: 0.86rem; letter-spacing: 0.01em; } /* Hero services: gentle staggered movement without turning them into bubbles */ @keyframes service-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .hero-chips li { animation: service-drift 3.2s ease-in-out infinite; box-shadow: 0 6px 14px rgba(0,0,0,0.10); } .hero-chips li:nth-child(2n) { animation-delay: -0.8s; } .hero-chips li:nth-child(3n) { animation-delay: -1.6s; } .hero-chips li:nth-child(4n) { animation-delay: -2.4s; } @media (prefers-reduced-motion: reduce) { .hero-chips li { animation: none; } } /* ══════════════ V6 — tighter palette, animated CTAs, brighter service band ══════════════ */ :root { /* one green family + one lime accent + ink. Nothing else. */ --brand-green-500: #16745f; --brand-green-600: #115d4c; --brand-green-700: #0d4b3d; } /* --- 1. Colored bands all share ONE green (no more near-black green) --- */ .band-green, [data-section="gallery"], .stats-band, .cta-strip, .final-cta, .testimonials-strip, .guarantee-section { background: linear-gradient(180deg, var(--brand-green-500) 0%, var(--brand-green-700) 100%) !important; } .band-green .kicker, .stats-band .kicker, .final-cta .kicker { color: rgba(95, 128, 104, 0.9) !important; } /* --- 2. Service-area band: brighter, pins on every county --- */ .geo-band { background: linear-gradient(180deg, #1a8b70 0%, #13735e 100%); padding: clamp(1.4rem, 3.6vw, 2.1rem) 0; border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(0,0,0,0.14); } .geo-pin { background: var(--lime-500); color: var(--lime-950); width: 48px; height: 48px; } .geo-copy strong { font-size: clamp(1.1rem, 3.4vw, 1.35rem); } .geo-copy span { color: rgba(255,255,255,0.9); } .geo-pills { gap: 0.5rem; } .geo-pills li { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.34); padding: 0.42rem 0.85rem; font-size: 0.86rem; } .geo-pills .geo-pin-sm { color: rgba(95, 128, 104, 0.9); flex: none; } /* --- 3. Sticky CTAs: colors swapped + animated --- */ .sticky-bar--v2 .sticky-call { background: linear-gradient(180deg, var(--accent-a), var(--accent-b)) !important; color: var(--accent-ink) !important; border: 0 !important; box-shadow: 0 8px 22px var(--accent-glow); } .sticky-bar--v2 .sticky-book { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,0.55) !important; box-shadow: none !important; } @keyframes cta-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(95, 128, 104,0.28); } 50% { transform: scale(1.035); box-shadow: 0 12px 30px rgba(95, 128, 104,0.5); } } @keyframes cta-glow { 0%, 100% { border-color: rgba(255,255,255,0.45); box-shadow: 0 0 0 0 rgba(255,255,255,0.18); } 50% { border-color: rgba(95, 128, 104, 0.9); box-shadow: 0 0 0 4px rgba(95, 128, 104,0.14); } } .cta-pulse { animation: cta-pulse 2.2s ease-in-out infinite; } .cta-glow { animation: cta-glow 2.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cta-pulse, .cta-glow { animation: none; } } /* header phone: shimmering lime ring on the dark circle */ .header-phone.cta-glow { border-radius: 999px; padding-inline: 0.35rem; } .header-phone.cta-glow .icon-wrap { animation: cta-pulse 2.4s ease-in-out infinite; } /* --- 4. Review bubble: 4.9/5 bold, before the stars --- */ .hr-main { gap: 0.5rem; } .hero-reviews .hr-score { align-items: baseline; gap: 0.02rem; } .hero-reviews .hr-num { font-size: 1.5rem; font-weight: 800; } .hr-slash { font-size: 1.5rem; font-weight: 800; color: var(--neutral-900); line-height: 1; } .hr-outof { display: none !important; } /* --- 5. Hero copy bubble: deep green glass instead of olive grey --- */ .hero-copy-panel { background: linear-gradient(180deg, rgba(22,116,95,0.60) 0%, rgba(13,75,61,0.74) 100%) !important; border-color: rgba(95, 128, 104,0.28) !important; box-shadow: 0 30px 72px -34px rgba(6,28,22,0.6), inset 0 1px 0 rgba(255,255,255,0.22) !important; } /* --- 6. Service chips: no motion --- */ .hero-chips li { animation: none !important; } /* hero copy bubble — brighter green glass */ .hero-copy-panel { background: linear-gradient(180deg, rgba(41,150,124,0.62) 0%, rgba(24,111,91,0.72) 100%) !important; border-color: rgba(95, 128, 104,0.42) !important; box-shadow: 0 26px 64px -30px rgba(6,28,22,0.5), inset 0 1px 0 rgba(255,255,255,0.3) !important; } /* review bubble — compact, secondary, not the hero's focal point */ .hero-reviews { display: inline-flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 0.55rem !important; width: auto !important; max-width: max-content !important; margin-inline: auto !important; padding: 0.34rem 0.7rem !important; border-radius: 999px !important; background: rgba(255,255,255,0.9) !important; box-shadow: 0 6px 16px rgba(0,0,0,0.16) !important; } .hr-logos-row { margin: 0; } .hero-reviews .hr-logo { width: 17px; height: 17px; box-shadow: none; } .hero-reviews .hr-logo svg { width: 13px; height: 13px; } .hr-logos { gap: 0.18rem; } .hr-main { gap: 0.3rem; } .hero-reviews .hr-num, .hr-slash { font-size: 0.86rem !important; } .hero-reviews .hr-stars { font-size: 0.72rem; letter-spacing: 0.04em; } .hero-reviews .hr-text { font-size: 0.72rem !important; color: var(--neutral-600) !important; max-width: none !important; } .hero-reviews .hr-text strong { font-weight: 700; color: var(--neutral-700) !important; } @media (max-width: 420px) { .hero-reviews .hr-text { font-size: 0.68rem !important; } } /* hero copy bubble — cooler forest/emerald green */ .hero-copy-panel { background: linear-gradient(180deg, rgba(26,92,84,0.66) 0%, rgba(13,62,58,0.78) 100%) !important; border-color: rgba(255,255,255,0.26) !important; box-shadow: 0 26px 64px -30px rgba(4,24,22,0.52), inset 0 1px 0 rgba(255,255,255,0.26) !important; } /* keep the review pill on one tight line */ .hero-reviews { flex-wrap: nowrap !important; gap: 0.45rem !important; } .hero-reviews .hr-text { white-space: nowrap; font-size: 0.7rem !important; } /* hero bubble: brighter panel + high-contrast rating pill at every size */ .hero-copy-panel { background: linear-gradient(180deg, rgba(30,102,92,0.76) 0%, rgba(16,71,65,0.86) 100%) !important; border-color: rgba(255,255,255,0.34) !important; } .hero-reviews { background: #fff !important; border: 1px solid rgba(16,24,10,0.10) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.22) !important; padding: 0.4rem 0.85rem !important; } .hero-reviews .hr-num, .hero-reviews .hr-slash { color: #0d1b12 !important; font-size: 0.95rem !important; font-weight: 800 !important; } .hero-reviews .hr-stars { color: #f59e0b !important; font-size: 0.82rem !important; letter-spacing: 0.05em; } .hero-reviews .hr-text { color: #3f4a3f !important; font-size: 0.75rem !important; font-weight: 600; } .hero-reviews .hr-text strong { color: #0d1b12 !important; } @media (max-width: 400px) { .hero-reviews { padding: 0.36rem 0.7rem !important; gap: 0.36rem !important; } .hero-reviews .hr-num, .hero-reviews .hr-slash { font-size: 0.9rem !important; } .hero-reviews .hr-stars { font-size: 0.76rem !important; } .hero-reviews .hr-text { font-size: 0.7rem !important; } } /* hero rating pill: typographic polish — bold score, clean rhythm */ .hero-reviews { gap: 0.5rem !important; align-items: center !important; line-height: 1 !important; } .hero-reviews .hr-main { display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; line-height: 1 !important; } .hero-reviews .hr-num { font-weight: 800 !important; letter-spacing: -0.015em !important; line-height: 1 !important; font-variant-numeric: tabular-nums; } .hero-reviews .hr-slash { font-weight: 700 !important; opacity: 0.7 !important; line-height: 1 !important; } .hero-reviews .hr-stars { line-height: 1 !important; letter-spacing: 0.06em !important; margin-top: -1px; } .hero-reviews .hr-text { line-height: 1.15 !important; letter-spacing: 0.005em !important; } /* hero bubble: whisper-soft glass shine */ .hero-copy-panel { position: relative; overflow: hidden; isolation: isolate; } .hero-copy-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 22%, rgba(255,255,255,0) 55%), radial-gradient(120% 70% at 18% -10%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 60%); } .hero-copy-panel > * { position: relative; z-index: 1; } /* ══════════════ V7: header slab + lime-tinted service chips ══════════════ */ /* Header: edge-to-edge square bar — logo left, CTA right */ .site-header { padding-top: 0 !important; } .site-header .container { max-width: none !important; margin-inline: 0 !important; padding-inline: 0 !important; } .header-pill { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-bottom: 1px solid rgba(25,29,18,0.10) !important; background: rgba(255,255,255,0.96) !important; box-shadow: 0 2px 14px rgba(16,24,10,0.08) !important; padding: 0.55rem clamp(1rem, 4vw, 2.25rem) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 0.75rem !important; } .site-header.scrolled .header-pill { background: rgba(255,255,255,0.99) !important; box-shadow: 0 3px 18px rgba(16,24,10,0.12) !important; } .header-pill .header-logo { margin-right: auto; } .header-pill .header-phone, .header-pill .btn { margin-left: auto; } @media (max-width: 900px) { .header-pill .header-badge { display: none !important; } } /* Service chips: subtle lime pop so they read on the dark hero */ .hero-chips li { border-radius: 999px !important; padding: 0.34rem 0.72rem !important; color: #f4ffd6 !important; background: linear-gradient(180deg, color-mix(in oklab, var(--accent-a) 20%, transparent), color-mix(in oklab, var(--accent-a) 9%, transparent)) !important; border: 1px solid color-mix(in oklab, var(--accent-a) 42%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 10px color-mix(in oklab, var(--accent-a) 14%, transparent) !important; letter-spacing: 0.01em; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .hero-chips li:hover { color: var(--accent-ink) !important; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)) !important; border-color: transparent !important; } /* ══════════════ V8: full-bleed header + hero brightness + summer offer ══════════════ */ .site-header .container { width: 100% !important; max-width: none !important; margin-inline: 0 !important; padding-inline: 0 !important; } /* brighter photo hero: lighter scrim so the new daylight shot reads */ .hero-scrim { background: linear-gradient(180deg, rgba(12,26,16,0.42) 0%, rgba(12,26,16,0.22) 42%, rgba(12,26,16,0.46) 100%) !important; } .hero-img { object-position: center 60%; } @media (max-width: 767px) { .hero-img { object-position: center 55%; } } /* ---------- Summer offer ---------- */ .offer-section--v8 { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-gap); } .offer-hype { position: relative; text-align: center; border-radius: 28px; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.1rem, 3.5vw, 3rem); color: #fff; background: radial-gradient(120% 90% at 50% -10%, color-mix(in oklab, var(--accent-a) 26%, transparent) 0%, transparent 62%), linear-gradient(180deg, var(--brand-green-500) 0%, var(--brand-green-700) 100%); border: 1px solid color-mix(in oklab, var(--accent-a) 45%, transparent); box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 80px -32px rgba(6,20,14,0.7), 0 0 60px -12px color-mix(in oklab, var(--accent-a) 34%, transparent); animation: offer-halo 3.6s ease-in-out infinite; } @keyframes offer-halo { 0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 80px -32px rgba(6,20,14,0.7), 0 0 50px -16px color-mix(in oklab, var(--accent-a) 28%, transparent); } 50% { box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 30px 80px -32px rgba(6,20,14,0.7), 0 0 90px -8px color-mix(in oklab, var(--accent-a) 48%, transparent); } } @media (prefers-reduced-motion: reduce) { .offer-hype, .oe-dot, .btn-lock { animation: none !important; } } .offer-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime-950); background: var(--accent-a); padding: 0.4rem 0.9rem; border-radius: 999px; } .oe-dot { width: 8px; height: 8px; border-radius: 50%; background: #b3231f; animation: cta-pulse 1.6s ease-in-out infinite; } .offer-mega { margin: 0.85rem 0 0; font-size: clamp(2.4rem, 11vw, 4.6rem); line-height: 0.95; letter-spacing: -0.03em; font-weight: 900; color: #fff; text-transform: uppercase; } .offer-mega-hl { color: var(--accent-a); text-shadow: 0 0 28px color-mix(in oklab, var(--accent-a) 45%, transparent); } .offer-sub { margin: 0.9rem auto 0; max-width: 46rem; font-size: clamp(1rem, 2.6vw, 1.18rem); color: rgba(255,255,255,0.86); } .offer-deadline-line { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: fit-content; margin: 1rem auto 0; padding: 0.7rem 1.35rem; border-radius: 999px; background: var(--accent-a); color: var(--accent-ink); font-size: clamp(1rem, 3.5vw, 1.25rem); font-weight: 800; box-shadow: 0 10px 30px -12px var(--accent-glow); animation: deadline-glow 2.2s ease-in-out infinite; } .offer-deadline-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.75) 50%, transparent 75%); transform: translateX(-120%); animation: deadline-shine 3.2s ease-in-out infinite; pointer-events: none; } @keyframes deadline-glow { 0%, 100% { box-shadow: 0 8px 22px -14px color-mix(in oklab, var(--accent-a) 60%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent-a) 22%, transparent), 0 16px 42px -12px color-mix(in oklab, var(--accent-a) 90%, transparent); } } @keyframes deadline-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .offer-deadline-line .offer-deadline { color: inherit; border: 0; font-weight: 900; } .offer-clock-label { margin: 1.25rem 0 0; color: var(--on-dark); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .offer-deadline { color: var(--accent-a); font-weight: 900; border-bottom: 2px solid color-mix(in oklab, var(--accent-a) 70%, transparent); } .offer-clock { display: flex; justify-content: center; align-items: flex-end; gap: 0.35rem; margin-top: 0.55rem; } .oc-cell { min-width: clamp(58px, 16vw, 86px); padding: 0.7rem 0.35rem 0.55rem; border-radius: 12px; background: var(--neutral-0); color: var(--heading); border: 2px solid color-mix(in oklab, var(--accent-a) 55%, transparent); box-shadow: 0 10px 28px -16px var(--accent-glow); } .oc-num { display: block; font-size: clamp(1.55rem, 6vw, 2.25rem); font-weight: 900; line-height: 1; color: var(--heading); font-variant-numeric: tabular-nums; } .oc-lbl { display: block; margin-top: 0.3rem; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-green-700); } .oc-sep { font-size: 1.4rem; font-weight: 800; color: rgba(255,255,255,0.4); padding-bottom: 1.1rem; } /* compact clock used next to the "Offer ends" note in the hero offer block */ .offer-clock--mini { position: relative; justify-content: center; align-items: stretch; gap: 0.25rem; margin: 0.85rem auto 0; flex-wrap: nowrap; width: fit-content; padding: 0.45rem 0.6rem; border-radius: 16px; background: linear-gradient(180deg, #0f3a25, #082018); border: 1.5px solid color-mix(in oklab, var(--accent-a, #c2d44d) 65%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-a, #c2d44d) 16%, transparent), 0 14px 34px -18px rgba(0,0,0,0.75); animation: mini-clock-pulse 2.6s ease-in-out infinite; } @keyframes mini-clock-pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-a, #c2d44d) 14%, transparent), 0 14px 34px -18px rgba(0,0,0,0.75); } 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent-a, #c2d44d) 22%, transparent), 0 18px 40px -16px rgba(0,0,0,0.8); } } .offer-clock--mini .oc-cell { min-width: clamp(46px, 12vw, 60px); padding: 0.3rem 0.3rem 0.28rem; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); } .offer-clock--mini .oc-num { font-size: clamp(1.05rem, 3.8vw, 1.4rem); color: var(--accent-a, #c2d44d); text-shadow: 0 0 14px color-mix(in oklab, var(--accent-a, #c2d44d) 55%, transparent); } .offer-clock--mini .oc-lbl { margin-top: 0.1rem; font-size: 0.5rem; letter-spacing: 0.12em; color: rgba(255,255,255,0.68); } .offer-clock--mini .oc-sep { display: flex; align-items: center; padding: 0 0.05rem 0.35rem; font-size: 1rem; color: color-mix(in oklab, var(--accent-a, #c2d44d) 70%, transparent); animation: mini-clock-blink 1s steps(1, end) infinite; } @keyframes mini-clock-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .offer-clock--mini, .offer-clock--mini .oc-sep { animation: none; } } .offer-cards { list-style: none; margin: clamp(1.5rem, 4vw, 2.25rem) 0 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: 1fr; text-align: left; } @media (min-width: 720px) { .offer-cards { grid-template-columns: repeat(3, 1fr); } .offer-cardlet--wide { grid-column: 1 / -1; } } .offer-cardlet { position: relative; padding: 1rem 1rem 1.05rem 1rem; border-radius: 18px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); } .oc-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-a); color: var(--lime-950); font-weight: 900; font-size: 0.82rem; } .oc-kicker { margin: 0.55rem 0 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .oc-title { margin: 0.35rem 0 0.25rem; font-size: 1.12rem; font-weight: 800; color: #fff; } .oc-title em { font-style: normal; font-weight: 700; font-size: 0.86rem; color: var(--accent-a); } .oc-copy { margin: 0; font-size: 0.92rem; color: rgba(255,255,255,0.8); } .oc-copy em { color: var(--accent-a); font-style: normal; font-weight: 700; } .offer-cards--center { text-align: center; } .offer-cards--center .offer-cardlet { display: flex; flex-direction: column; align-items: center; padding: 1.15rem 1.1rem 1.25rem; } .offer-cards--center .oc-badge { width: 52px; height: 52px; font-size: 1.5rem; background: linear-gradient(180deg, var(--accent-a), color-mix(in oklab, var(--accent-a) 78%, #0d1a12)); color: var(--accent-ink, #16210f); border: 1px solid color-mix(in oklab, #fff 55%, transparent); box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent-a) 16%, transparent), 0 12px 26px -14px color-mix(in oklab, var(--accent-a) 85%, transparent); } .offer-cards--center .oc-copy { max-width: 34rem; margin-inline: auto; } .oc-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.8rem; } .oc-pick { margin: 0; text-align: center; } .oc-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #fff; } .oc-pick figcaption { margin-top: 0.35rem; font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.85); } .beatit { margin-top: clamp(1.6rem, 4vw, 2.4rem); padding: clamp(1.25rem, 3.5vw, 2rem) 1rem; border-radius: 22px; text-align: center; background: linear-gradient(180deg, color-mix(in oklab, var(--accent-a) 16%, transparent), rgba(255,255,255,0.04)); border: 1px dashed color-mix(in oklab, var(--accent-a) 55%, transparent); } .beatit-kicker { margin: 0; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; color: color-mix(in oklab, var(--accent-a) 85%, #fff); } .beatit-title { margin: 0.35rem 0 0; font-size: clamp(1.9rem, 8vw, 3.1rem); font-weight: 900; line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; color: #fff; } .beatit-copy { margin: 0.8rem auto 0; max-width: 40rem; font-size: clamp(0.98rem, 2.6vw, 1.1rem); color: rgba(255,255,255,0.88); } .beatit-copy strong { color: #fff; } .beatit-prize { margin: 0.6rem 0 0; font-size: clamp(1.6rem, 7vw, 2.5rem); font-weight: 900; color: var(--accent-a); text-shadow: 0 0 26px color-mix(in oklab, var(--accent-a) 50%, transparent); } .beatit-fine { margin: 0.5rem 0 0; font-size: 0.84rem; color: rgba(255,255,255,0.66); } .offer-lock { margin-top: clamp(1.4rem, 4vw, 2rem); display: flex; flex-direction: column; align-items: center; gap: 0.7rem; } .btn-lock { width: min(100%, 26rem); justify-content: center; background: var(--accent-a); color: var(--lime-950); font-weight: 900; font-size: 1.06rem; padding: 0.95rem 1.4rem; border-radius: 999px; border: 0; box-shadow: 0 12px 34px -12px color-mix(in oklab, var(--accent-a) 70%, transparent); animation: lock-glow 2.4s ease-in-out infinite; } @keyframes lock-glow { 0%, 100% { transform: translateY(0); box-shadow: 0 10px 28px -14px color-mix(in oklab, var(--accent-a) 60%, transparent); } 50% { transform: translateY(-2px); box-shadow: 0 18px 44px -12px color-mix(in oklab, var(--accent-a) 85%, transparent); } } .btn-lock-ghost { width: min(100%, 26rem); justify-content: center; background: transparent; color: #fff; font-weight: 700; border: 1.5px solid rgba(255,255,255,0.45); border-radius: 999px; padding: 0.8rem 1.4rem; } .offer-hype .offer-fine { margin: 0.5rem auto 0; max-width: 42rem; font-size: 0.76rem; color: rgba(255,255,255,0.6); } /* ---------- Free signature gift (emoji cards) ---------- */ .oc-gifts { display: grid; gap: 0.75rem; margin-top: 1rem; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 860px) { .oc-gifts { grid-template-columns: 1fr auto 1fr; } } .oc-gift { position: relative; overflow: hidden; text-align: center; padding: 2rem 1.15rem 1.4rem; border-radius: 22px; background: radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--accent-a) 14%, #fff), #fff 62%); color: var(--heading); border: 1px solid color-mix(in oklab, var(--accent-a) 40%, transparent); box-shadow: 0 22px 48px -28px rgba(8,20,14,0.55), inset 0 1px 0 #fff; transition: transform 0.35s ease, box-shadow 0.35s ease; } .oc-gift:hover { transform: translateY(-4px); box-shadow: 0 28px 56px -26px rgba(8,20,14,0.6); } .oc-gift-ribbon { position: absolute; top: 0.9rem; left: 50%; transform: translateX(-50%); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-ink, #16210f); background: var(--accent-a); padding: 0.28rem 0.7rem; border-radius: 999px; box-shadow: 0 6px 18px -10px color-mix(in oklab, var(--accent-a) 90%, transparent); } .oc-gift-emoji, .oc-gift-icon { display: inline-flex; align-items: center; justify-content: center; margin-top: 1rem; width: 84px; height: 84px; border-radius: 50%; font-size: 2rem; line-height: 1; background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--accent-a) 18%, #fff)); border: 1px solid color-mix(in oklab, var(--accent-a) 55%, transparent); box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent-a) 10%, transparent), 0 14px 30px -18px rgba(8,20,14,0.5); } .oc-gift-icon img { width: 52px; height: 52px; object-fit: contain; display: block; } .oc-gift-name { margin: 0.9rem 0 0; font-size: clamp(1.08rem, 3.4vw, 1.3rem); font-weight: 900; color: var(--heading); letter-spacing: -0.015em; text-wrap: balance; } .oc-gift-rule { display: block; width: 42px; height: 3px; margin: 0.6rem auto 0.55rem; border-radius: 999px; background: var(--accent-a); } .oc-gift-copy { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; } .oc-gift-or { align-self: center; justify-self: center; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--lime-950); background: var(--accent-a); padding: 0.35rem 0.7rem; border-radius: 999px; } /* ---------- Hero headline / lede typography ---------- */ .hero-h1 { display: flex; flex-direction: column; align-items: center; gap: 0.18em; text-wrap: balance; max-width: none !important; } .hero-h1 .h1-line { display: block; } .hero-h1 .h1-kicker { font-size: clamp(0.78rem, 3.2vw, 0.95rem); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-on-dark, #dff37a); margin-bottom: 0.25em; text-shadow: none; } .hero-h1 .h1-main { font-size: clamp(2.25rem, 9.2vw, 4.05rem); line-height: 1.03; letter-spacing: -0.028em; font-weight: 800; max-width: 21ch; margin-inline: auto; } .hero-h1 .h1-tag { font-size: clamp(1.72rem, 7.2vw, 3rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 900; margin-top: 0.1em; } /* ---------- Hero headline entrance + living shimmer ---------- */ @keyframes h1-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes h1-kicker-in { from { opacity: 0; letter-spacing: 0.42em; transform: translate3d(0, 8px, 0); } to { opacity: 1; letter-spacing: 0.2em; transform: none; } } @keyframes h1-kicker-shine { 0%, 55% { background-position: -160% 0; } 100% { background-position: 260% 0; } } @keyframes h1-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes h1-tag-glow { 0%, 100% { text-shadow: 0 0 0 rgba(95, 128, 104, 0); } 50% { text-shadow: 0 0 26px rgba(95, 128, 104, 0.35); } } .hero-h1 .h1-line { opacity: 0; animation: h1-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-h1 .h1-kicker { position: relative; animation: h1-kicker-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; background-image: linear-gradient(100deg, transparent 0%, transparent 38%, rgba(255,255,255,0.95) 50%, transparent 62%, transparent 100%); background-size: 220% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; } /* ---- SoCal underline: tweak these three knobs ---- --uline-thickness : line height (try 1px – 4px) --uline-opacity : overall strength (0 – 1) --uline-fade : opacity at the two ends (0 = fully faded tips, 1 = solid edge-to-edge) --uline-offset : vertical distance below the word -------------------------------------------------- */ .hero-h1 .h1-uline { position: relative; display: inline-block; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; hyphens: none; --uline-thickness: 3px; --uline-opacity: 1; --uline-fade: 0; --uline-offset: -0.12em; } .hero-h1 .h1-uline::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--uline-offset); width: 100%; height: var(--uline-thickness); transform-origin: left center; transform: scaleX(0); opacity: var(--uline-opacity); border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent-a, #dff37a) calc(var(--uline-fade) * 100%), transparent), var(--accent-a, #dff37a) 30%, var(--accent-a, #dff37a) 70%, color-mix(in srgb, var(--accent-a, #dff37a) calc(var(--uline-fade) * 100%), transparent)); animation: h1-underline 0.9s 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero-h1 .h1-main { animation-delay: 0.18s; } .hero-h1 .h1-tag { animation-delay: 0.36s; } /* second pass: gentle looping life once the entrance settles */ .hero-h1 .h1-kicker { animation: h1-kicker-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards, h1-kicker-shine 6.5s 1.6s ease-in-out infinite; } .hero-h1 .h1-tag { animation: h1-rise 0.85s 0.36s cubic-bezier(0.16, 1, 0.3, 1) forwards, h1-tag-glow 5s 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .hero-h1 .h1-line, .hero-h1 .h1-kicker, .hero-h1 .h1-tag { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; } .hero-h1 .h1-uline::after { animation: none !important; transform: scaleX(1); } } .hero-copy-panel .hero-lede { max-width: 34ch; margin-inline: auto; text-wrap: pretty; font-size: clamp(0.98rem, 3.5vw, 1.1rem); line-height: 1.6; } @media (min-width: 768px) { .hero-copy-panel .hero-lede { max-width: 46ch; } } .hero-lede .lede-strong { display: inline; font-weight: 700; color: #fff; } /* ---------- Closing CTA + footer: light neutral, same family as the header ---------- */ .final-cta { background: linear-gradient(180deg, #f8f9f5 0%, #eef0e8 100%) !important; border-top: 1px solid rgba(19,58,48,0.08); } .final-cta .final-card, .final-cta .glass-dark { background: #fff !important; border: 1px solid rgba(19,58,48,0.10) !important; box-shadow: 0 26px 60px -34px rgba(19,58,48,0.22), inset 0 1px 0 #fff !important; } .final-cta .final-card h2, .final-cta .final-card strong { color: var(--heading) !important; } .final-cta .final-sub, .final-cta .final-card p { color: var(--muted) !important; } .final-cta .final-card a[href^="tel"] { color: var(--brand-mid) !important; } .final-cta .kicker { color: var(--brand-mid) !important; } .site-footer { background: linear-gradient(180deg, #eef0e8 0%, #f4f5f0 100%); } .site-footer .footer-card { background: #fff; border: 1px solid rgba(19,58,48,0.08); } /* ---------- Sticky header retracts on scroll ---------- */ .site-header { transition: transform 0.28s ease, opacity 0.22s ease; will-change: transform; } .site-header.header-hidden { transform: translateY(-105%); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } /* ══════════════ V9: hero offer teaser + hero-scale Summer Offer ══════════════ */ /* --- Hero teaser (links down to the offer) --- */ .hero-teaser { display: block; text-align: center; text-decoration: none; margin-top: clamp(1rem, 3vw, 1.4rem); padding: 0.95rem 1.1rem 1rem; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)); border: 1px solid color-mix(in oklab, var(--accent-a) 55%, transparent); box-shadow: 0 18px 40px -26px rgba(6,20,14,0.7), 0 0 34px -14px var(--accent-glow); transition: transform 0.2s ease, box-shadow 0.2s ease; } .hero-teaser:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -24px rgba(6,20,14,0.75), 0 0 46px -10px var(--accent-glow); } .htz-flag { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime-950); background: var(--accent-a); padding: 0.32rem 0.75rem; border-radius: 999px; } .htz-dot { width: 7px; height: 7px; border-radius: 50%; background: #b3231f; animation: cta-pulse 1.6s ease-in-out infinite; } .htz-head { display: block; margin-top: 0.6rem; font-size: clamp(1rem, 4vw, 1.22rem); font-weight: 800; color: #fff; line-height: 1.3; text-wrap: balance; } .htz-head strong { color: var(--accent-a); } .htz-sub { display: block; margin-top: 0.35rem; font-size: 0.85rem; line-height: 1.5; color: rgba(255,255,255,0.82); } .htz-sub strong { color: var(--accent-a); } .htz-cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; font-size: 0.9rem; font-weight: 900; color: var(--accent-a); border-bottom: 2px solid color-mix(in oklab, var(--accent-a) 60%, transparent); padding-bottom: 2px; } @media (prefers-reduced-motion: reduce) { .htz-dot { animation: none !important; } } /* --- Offer section v9 (inherits v8 visuals) --- */ .offer-section--v9 { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-gap); scroll-margin-top: 90px; } .promise-bar { margin: 0 0 clamp(1.25rem, 3.5vw, 1.9rem); padding: clamp(0.9rem, 3vw, 1.25rem) 1rem; border-radius: 18px; text-align: center; background: linear-gradient(180deg, color-mix(in oklab, var(--accent-a) 20%, transparent), rgba(255,255,255,0.05)); border: 1px dashed color-mix(in oklab, var(--accent-a) 60%, transparent); } .pb-title { margin: 0; font-size: clamp(1.35rem, 6vw, 2.15rem); font-weight: 900; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.02em; color: #fff; } .pb-title span { color: var(--accent-a); text-shadow: 0 0 24px color-mix(in oklab, var(--accent-a) 50%, transparent); } .pb-copy { margin: 0.5rem auto 0; max-width: 44rem; font-size: clamp(0.9rem, 2.4vw, 1rem); color: rgba(255,255,255,0.86); } .offer-huge { margin: 0.9rem 0 0; font-size: clamp(3.2rem, 17vw, 7rem); line-height: 0.86; letter-spacing: -0.045em; font-weight: 900; color: #fff; text-transform: uppercase; } .offer-endline { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.9rem auto 0; padding: 0.6rem 1.15rem; border-radius: 999px; background: var(--accent-a); color: var(--accent-ink); font-size: clamp(1.15rem, 5vw, 1.8rem); font-weight: 800; line-height: 1; box-shadow: 0 12px 34px -12px var(--accent-glow); animation: lock-glow 2.6s ease-in-out infinite; } .offer-endline strong { font-weight: 900; } .offer-section--v9 .offer-sub strong { color: var(--accent-a); font-weight: 800; } .offer-lock-nudge { margin: 0 0 0.2rem; font-size: 0.92rem; color: rgba(255,255,255,0.85); } .offer-lock-nudge strong { color: var(--accent-a); } @media (prefers-reduced-motion: reduce) { .offer-endline { animation: none !important; } } /* ══════════════ Sticky bottom bar — light header-style surface ══════════════ */ .sticky-bar--v2 { background: linear-gradient(180deg, rgba(248,249,245,0.97) 0%, rgba(238,240,233,0.98) 100%) !important; border-top: 1px solid rgba(25,29,18,0.12) !important; box-shadow: 0 -8px 26px rgba(16,24,10,0.14) !important; } .sticky-bar--v2 .sticky-quote { background: transparent !important; color: #1b2016 !important; border: 1.5px solid rgba(25,29,18,0.28) !important; } .sticky-bar--v2 .sticky-book { color: #1b2016 !important; border: 1.5px solid rgba(25,29,18,0.28) !important; } /* offer card amounts — brighter, more noticeable */ /* offer card amounts — bigger + brighter green */ .hero-offer2 .ho2-amt { font-size: 1.3rem !important; font-weight: 900 !important; line-height: 1.15 !important; background: linear-gradient(100deg, #14512a 0%, #2c7a1a 48%, #17542b 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } @media (max-width: 600px) { .hero-offer2 .ho2-amt { font-size: 1.18rem !important; } } /* sticky bottom: transparent outline buttons on the light surface (restored) */ .sticky-bar--v2 .sticky-book, .sticky-bar--v2 .sticky-quote { background: transparent !important; color: #1b2016 !important; border: 1.5px solid rgba(25,29,18,0.28) !important; } /* ══════════════ Service chips → CTA modal ══════════════ */ .hero-chips li { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } .hero-chips .chip-cta { font: inherit; cursor: pointer; border-radius: 999px; padding: 0.36rem 0.78rem; color: #f4ffd6; background: linear-gradient(180deg, color-mix(in oklab, var(--accent-a) 20%, transparent), color-mix(in oklab, var(--accent-a) 9%, transparent)); border: 1px solid color-mix(in oklab, var(--accent-a) 42%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 10px color-mix(in oklab, var(--accent-a) 14%, transparent); letter-spacing: 0.01em; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; } .hero-chips .chip-cta:hover, .hero-chips .chip-cta:focus-visible { color: var(--accent-ink); background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); border-color: transparent; transform: translateY(-1px); } @media (max-width:600px){ .hero-chips .chip-cta{ font-size:0.8rem; padding:0.3rem 0.6rem; } } .chip-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 1.1rem; background: rgba(10,13,8,0.62); backdrop-filter: blur(6px); animation: chipModalIn .18s ease-out; } @keyframes chipModalIn { from { opacity: 0 } to { opacity: 1 } } .chip-modal__card { position: relative; width: 100%; max-width: 27rem; text-align: center; border-radius: 22px; padding: 1.6rem 1.35rem 1.4rem; background: linear-gradient(180deg,#ffffff 0%,#f5f7ef 100%); border: 1px solid rgba(25,29,18,0.1); box-shadow: 0 30px 70px -20px rgba(8,14,4,0.6); } .chip-modal__eyebrow { margin: 0 0 0.3rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #4f7d18; } .chip-modal__title { margin: 0 0 0.4rem; font-size: 1.5rem; line-height: 1.15; font-weight: 900; color: #14170f; } .chip-modal__text { margin: 0 0 1.1rem; font-size: 0.95rem; line-height: 1.5; color: #4b5142; } .chip-modal__actions { display: grid; gap: 0.55rem; } .chip-modal__btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: 999px; padding: 0.82rem 1rem; font-weight: 800; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; } .chip-modal__btn--primary { background: #14170f; color: #fff; } .chip-modal__btn--ghost { background: transparent; color: #14170f; border-color: rgba(25,29,18,0.28); } .chip-modal__note { margin: 0.85rem 0 0; font-size: 0.78rem; color: #6a7060; } .chip-modal__close { position: absolute; top: 0.55rem; right: 0.65rem; width: 2rem; height: 2rem; border-radius: 999px; border: 0; background: rgba(20,23,15,0.07); color: #14170f; font-size: 1.15rem; line-height: 1; cursor: pointer; } /* ══════════════ Hero offer card: glowing animated deadline ══════════════ */ .hero-offer2 .ho2-note { position: relative; overflow: hidden; display: inline-flex !important; align-items: center; gap: 0.35rem; margin-top: 0.4rem; padding: 0.4rem 0.85rem !important; border-radius: 999px; background: linear-gradient(135deg, #d51616, #ff4b1f) !important; color: #fff !important; font-size: 0.95rem !important; font-weight: 800 !important; letter-spacing: 0.01em; box-shadow: 0 8px 24px -9px rgba(213,22,22,0.8); animation: ho2-note-pulse 2s ease-in-out infinite; } .hero-offer2 .ho2-note::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.28); animation: ho2-dot 1.2s ease-in-out infinite; } @keyframes ho2-dot { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } } .hero-offer2 .ho2-note::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,0.6) 50%, transparent 75%); transform: translateX(-130%); animation: ho2-note-shine 3s ease-in-out infinite; pointer-events: none; } .hero-offer2 .ho2-note strong { color: #fff !important; font-weight: 900 !important; text-decoration: underline; text-underline-offset: 3px; } @keyframes ho2-note-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 8px 22px -12px rgba(255,90,43,0.7); } 50% { transform: scale(1.035); box-shadow: 0 0 0 6px rgba(255,120,50,0.18), 0 14px 34px -10px rgba(255,90,43,0.95); } } @keyframes ho2-note-shine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } } @media (prefers-reduced-motion: reduce) { .hero-offer2 .ho2-note, .hero-offer2 .ho2-note::after { animation: none !important; } } /* Hero offer badge — larger, more prominent */ .hero-offer2 .ho2-badge { font-size: 0.86rem !important; letter-spacing: 0.09em; padding: 0.4rem 0.8rem !important; border-radius: 999px !important; box-shadow: 0 6px 18px -8px var(--accent-glow); } @media (max-width: 420px) { .hero-offer2 .ho2-badge { font-size: 0.8rem !important; } } /* Summer offer link — animated gradient underline + sliding arrow */ .ho2-link { position: relative; border-bottom: 0 !important; color: #0f5f3f !important; padding-bottom: 0.3rem; overflow: hidden; } .ho2-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #0f8a4a 0%, #35c46a 35%, #ffb020 65%, #0f8a4a 100%); background-size: 220% 100%; animation: ho2LinkSweep 2.6s linear infinite; } .ho2-link .ho2-arrow, .ho2-link::first-letter { } .ho2-link { will-change: transform; } .ho2-link:hover { color: #0b4a31 !important; } @keyframes ho2LinkSweep { 0% { background-position: 0% 0; } 100% { background-position: -220% 0; } } .ho2-arrow { display: inline-block; animation: ho2ArrowSlide 1.4s ease-in-out infinite; } @keyframes ho2ArrowSlide { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } } /* Offer card header — clean centered stack (badge / title) */ .hero-offer2 .ho2-head { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; } /* Offer title — clean, bold, larger */ .hero-offer2 .ho2-title { text-align: center; font-size: clamp(1.24rem, 4.2vw, 1.55rem) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -0.01em; color: var(--ink, #1b2016) !important; -webkit-text-fill-color: currentColor; background: none !important; animation: none !important; text-wrap: balance; } /* deadline pill now sits after the promise line */ .hero-offer2 .ho2-note { margin: 0.15rem auto 0.6rem !important; } .hero-offer2 .ho2-note { display: flex !important; width: fit-content; } .hero-offer2 .ho2-promise { margin-bottom: 0.55rem; } /* ══════════════ Bottom offer section: contrast + warm gift palette ══════════════ */ /* cardlets read as distinct dark tiles against the green panel */ .offer-section--v8 .offer-cardlet { background: linear-gradient(180deg, rgba(9,22,15,0.72), rgba(9,22,15,0.9)) !important; border: 1px solid rgba(255,255,255,0.2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 20px 40px -26px rgba(3,10,6,0.85) !important; } .offer-section--v8 .offer-cardlet--wide { background: linear-gradient(180deg, rgba(6,17,11,0.82), rgba(6,17,11,0.94)) !important; } .offer-section--v8 .oc-copy { color: rgba(255,255,255,0.86) !important; } /* emoji badges: soft neutral disc, no lime flood */ .offer-section--v8 .offer-cards--center .oc-badge { background: linear-gradient(180deg, #ffffff, #e9eee6) !important; border: 1px solid rgba(255,255,255,0.7) !important; box-shadow: 0 0 0 4px rgba(255,255,255,0.1), 0 12px 26px -16px rgba(0,0,0,0.6) !important; } /* ---- gift cards: warm amber treatment ---- */ .oc-gift { padding: 2.1rem 1.2rem 1.5rem !important; background: radial-gradient(130% 85% at 50% 0%, #fff6e4 0%, #ffffff 58%) !important; border: 1px solid rgba(196,132,26,0.42) !important; box-shadow: 0 24px 52px -28px rgba(8,20,14,0.6), inset 0 1px 0 #fff, 0 0 0 1px rgba(255,255,255,0.5) !important; } .oc-gift::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #b45309, #f0a52a 45%, #ffd580 70%, #b45309); } .oc-gift-ribbon { background: linear-gradient(135deg, #b45309, #e79a22) !important; color: #fff !important; box-shadow: 0 8px 18px -10px rgba(180,83,9,0.85) !important; } .oc-gift-emoji, .oc-gift-icon { width: 92px !important; height: 92px !important; background: linear-gradient(180deg, #fffaf0, #f6e3c2) !important; border: 1px solid rgba(196,132,26,0.45) !important; box-shadow: 0 0 0 6px rgba(240,165,42,0.12), 0 16px 30px -20px rgba(90,50,5,0.55) !important; } .oc-gift-icon img { width: 58px !important; height: 58px !important; } .oc-gift-rule { width: 54px !important; height: 3px !important; background: linear-gradient(90deg, #b45309, #f0a52a) !important; } .oc-gift-or { color: #fff !important; background: linear-gradient(135deg, #1d2a1e, #33452f) !important; border: 1px solid rgba(255,255,255,0.25); box-shadow: 0 10px 22px -14px rgba(0,0,0,0.8); } /* ══════════════ Bottom offer: contrast, scan-speed type, interaction ══════════════ */ /* --- tiles: deeper ink, crisper edge, alive on hover/focus --- */ .offer-section--v8 .offer-cardlet { background: linear-gradient(180deg, rgba(7,19,13,0.86), rgba(4,13,9,0.94)) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), 0 22px 44px -28px rgba(2,8,5,0.9) !important; transition: transform 0.3s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .offer-section--v8 .offer-cardlet::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--accent-a) 16%, transparent), transparent 70%); opacity: 0; transition: opacity 0.3s ease; } .offer-section--v8 .offer-cardlet:hover, .offer-section--v8 .offer-cardlet:focus-within { transform: translateY(-3px); border-color: color-mix(in oklab, var(--accent-a) 52%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 26px 52px -26px rgba(2,8,5,0.95), 0 0 0 1px color-mix(in oklab, var(--accent-a) 30%, transparent) !important; } .offer-section--v8 .offer-cardlet:hover::after, .offer-section--v8 .offer-cardlet:focus-within::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { .offer-section--v8 .offer-cardlet:hover, .offer-section--v8 .offer-cardlet:focus-within { transform: none; } } /* --- type: headline first, detail second --- */ .offer-section--v8 .oc-title { font-size: clamp(1.35rem, 5.2vw, 1.72rem) !important; font-weight: 900 !important; line-height: 1.05; letter-spacing: -0.025em; margin: 0.75rem 0 0.4rem !important; color: #fff !important; text-wrap: balance; } .offer-section--v8 .offer-cardlet--wide .oc-title { font-size: clamp(1.2rem, 4.2vw, 1.5rem) !important; } .offer-section--v8 .oc-title em { display: block; margin-top: 0.3rem; font-size: 0.74rem !important; font-weight: 800 !important; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in oklab, var(--accent-a) 88%, #fff) !important; } .offer-section--v8 .oc-copy { font-size: 0.9rem !important; line-height: 1.5; color: rgba(240,247,238,0.8) !important; } .offer-section--v8 .oc-copy em { display: block; margin-top: 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in oklab, var(--accent-a) 85%, #fff) !important; } .offer-section--v8 .oc-kicker { color: color-mix(in oklab, var(--accent-a) 90%, #fff) !important; } .offer-section--v8 .oc-lbl { color: #2f4a17 !important; } /* --- icon discs: bright, warm-neutral, higher separation --- */ .offer-section--v8 .offer-cards--center .oc-badge { background: radial-gradient(85% 85% at 50% 22%, #ffffff, #dfe7d8) !important; border: 1px solid rgba(255,255,255,0.85) !important; box-shadow: 0 0 0 5px rgba(255,255,255,0.08), 0 14px 28px -16px rgba(0,0,0,0.75) !important; transition: transform 0.3s ease, box-shadow 0.3s ease; } .offer-section--v8 .offer-cardlet:hover .oc-badge { transform: scale(1.06) rotate(-3deg); box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent-a) 14%, transparent), 0 16px 32px -16px rgba(0,0,0,0.8) !important; } /* ══════════════ Gift cards: side-by-side layout, warm ivory panel ══════════════ */ .offer-section--v8 .oc-gifts { gap: 0.9rem; margin-top: 1.1rem; } .offer-section--v8 .oc-gift { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.95rem; text-align: left; padding: 1.6rem 1.15rem 1.25rem !important; border-radius: 20px !important; background: linear-gradient(150deg, #fffdf7 0%, #fdf3e2 58%, #f7e9cf 100%) !important; border: 1px solid rgba(150,98,16,0.34) !important; box-shadow: 0 26px 50px -30px rgba(6,16,10,0.7), inset 0 1px 0 rgba(255,255,255,0.9) !important; transition: transform 0.35s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease; } .offer-section--v8 .oc-gift::before { height: 3px; background: linear-gradient(90deg, #8a4b06, #d98c12 40%, #f6c266 68%, #8a4b06); } .offer-section--v8 .oc-gift:hover, .offer-section--v8 .oc-gift:focus-within { transform: translateY(-5px); border-color: rgba(150,98,16,0.6) !important; box-shadow: 0 34px 60px -28px rgba(6,16,10,0.75), inset 0 1px 0 #fff, 0 0 0 3px rgba(217,140,18,0.16) !important; } @media (prefers-reduced-motion: reduce) { .offer-section--v8 .oc-gift:hover { transform: none; } } .offer-section--v8 .oc-gift-ribbon { top: 0; left: auto; right: 0; transform: none; border-radius: 0 20px 0 14px !important; padding: 0.34rem 0.8rem 0.3rem !important; font-size: 0.58rem !important; letter-spacing: 0.2em; background: linear-gradient(135deg, #7c3f04, #c9820f) !important; } .offer-section--v8 .oc-gift-icon { grid-row: 1 / span 3; margin-top: 0 !important; width: 78px !important; height: 78px !important; border-radius: 18px !important; background: linear-gradient(165deg, #ffffff, #f3dfba) !important; border: 1px solid rgba(150,98,16,0.32) !important; box-shadow: inset 0 1px 0 #fff, 0 12px 24px -16px rgba(80,44,4,0.55) !important; } .offer-section--v8 .oc-gift-icon img { width: 50px !important; height: 50px !important; } .offer-section--v8 .oc-gift-name { margin: 0 !important; font-size: clamp(1.02rem, 3.2vw, 1.18rem) !important; line-height: 1.15; color: #24170a !important; } .offer-section--v8 .oc-gift-rule { margin: 0.45rem 0 0.4rem !important; width: 40px !important; background: linear-gradient(90deg, #8a4b06, #e0a12c) !important; } .offer-section--v8 .oc-gift-copy { font-size: 0.85rem !important; line-height: 1.5; color: #5b4a33 !important; } .offer-section--v8 .oc-gift-or { font-size: 0.68rem !important; background: linear-gradient(135deg, #f7fbf0, #dfe8d3) !important; color: #16210f !important; border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 10px 22px -14px rgba(0,0,0,0.7); } /* ══════════════ V9 — light mint bands (reference: soft green gradient) ══════════════ */ .ho2-nowrap { white-space: nowrap; } /* Shared light-mint gradient background */ .geo-band, [data-section="results"], .video-section, [data-section="video-reviews"], .stats-band, [data-section="process"] { background: linear-gradient(180deg, #dff0e2 0%, #eef8ee 55%, #f6fbf5 100%) !important; color: #16241b !important; } /* geo + results read as ONE section */ .geo-band { border-top: 1px solid rgba(17, 93, 76, 0.12); border-bottom: 0 !important; padding-bottom: clamp(1.4rem, 4vw, 2.2rem) !important; } [data-section="results"] { padding-top: clamp(1.4rem, 4vw, 2.2rem) !important; } /* Text + element recolor inside the light bands */ .geo-band .geo-copy strong, .geo-band .geo-copy span, .video-section h2, .video-section p, [data-section="video-reviews"] h2, [data-section="video-reviews"] p, .stats-band h2, .stats-band p, [data-section="process"] h2, [data-section="process"] p, [data-section="results"] h2, [data-section="results"] p { color: #16241b !important; } .geo-band .geo-copy span, .video-section p, [data-section="video-reviews"] p, .stats-band p, [data-section="process"] p, [data-section="results"] p { color: #3d5546 !important; } .geo-band .kicker, .video-section .kicker, [data-section="video-reviews"] .kicker, .stats-band .kicker, [data-section="process"] .kicker, [data-section="results"] .kicker { color: #11705a !important; } /* County pills on light background */ .geo-pills li { background: #ffffff !important; border: 1px solid rgba(17, 93, 76, 0.2) !important; color: #16241b !important; box-shadow: 0 2px 8px rgba(17, 93, 76, 0.07); } .geo-pills .geo-pin-sm { color: #11705a !important; } .geo-pin { background: linear-gradient(180deg, #16745f, #0d4b3d) !important; color: #fff !important; } /* Cards inside the light bands */ .stats-band .stats-card, .video-section .glass, .video-section .glass-dark, [data-section="video-reviews"] .glass, [data-section="video-reviews"] .glass-dark, [data-section="process"] .glass, [data-section="process"] .glass-dark { background: rgba(255, 255, 255, 0.92) !important; border: 1px solid rgba(17, 93, 76, 0.14) !important; box-shadow: 0 14px 34px rgba(17, 93, 76, 0.1) !important; color: #16241b !important; } .stats-band .stat-row strong, .stats-band .stat-row .stat-num, [data-section="process"] .process-step h3, [data-section="process"] .process-step p, [data-section="video-reviews"] .glass * , .stats-band .stats-card * { color: inherit; } .stats-band .stat-row strong { color: #11705a !important; } [data-section="process"] .step-number { background: linear-gradient(180deg, #16745f, #0d4b3d) !important; color: #fff !important; border-color: transparent !important; } .stats-band .stat-number { color: #11705a !important; -webkit-text-fill-color: #11705a; background: none !important; } .stats-band .stat-label { color: #3d5546 !important; } .video-section .vr-slot, [data-section="video-reviews"] .vr-slot { background: rgba(255,255,255,0.7) !important; border: 1px dashed rgba(17,93,76,0.28) !important; } .video-section .vr-note, .video-section .vr-play, [data-section="video-reviews"] .vr-note, [data-section="video-reviews"] .vr-play { color: #3d5546 !important; } /* ══════════════ Sticky bar buttons — hover / focus / press states ══════════════ */ .sticky-bar--v2 .sticky-call, .sticky-bar--v2 .sticky-book, .sticky-bar--v2 .sticky-quote { transition: transform 0.18s ease, box-shadow 0.22s ease, background-color 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease; } @media (hover: hover) { .sticky-bar--v2 .sticky-call:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 28px var(--accent-glow, rgba(108, 174, 31, 0.45)); } .sticky-bar--v2 .sticky-book:hover, .sticky-bar--v2 .sticky-quote:hover { transform: translateY(-2px); background: rgba(17, 93, 76, 0.1) !important; border-color: rgba(17, 93, 76, 0.6) !important; color: #0d4b3d !important; box-shadow: 0 10px 24px rgba(17, 93, 76, 0.18); } } .sticky-bar--v2 .sticky-call:focus-visible, .sticky-bar--v2 .sticky-book:focus-visible, .sticky-bar--v2 .sticky-quote:focus-visible { outline: 2px solid #0d4b3d; outline-offset: 3px; } .sticky-bar--v2 .sticky-call:active, .sticky-bar--v2 .sticky-book:active, .sticky-bar--v2 .sticky-quote:active { transform: translateY(0) scale(0.985); box-shadow: 0 4px 12px rgba(17, 93, 76, 0.2); } /* ══════════════ Service chip modal: refreshed CTA colors ══════════════ */ .chip-modal__btn--primary { background: linear-gradient(180deg, #1c7a4a, #145c37) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 24px rgba(20, 92, 55, 0.3); } .chip-modal__btn--ghost { background: #f3f8ef !important; color: #145c37 !important; border-color: rgba(20, 92, 55, 0.4) !important; } @media (hover: hover) { .chip-modal__btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); } .chip-modal__btn--ghost:hover { background: #e6f2e2 !important; border-color: rgba(20, 92, 55, 0.7) !important; } } .chip-modal__btn { transition: transform 0.16s ease, filter 0.2s ease, background 0.2s ease, border-color 0.2s ease; } /* ══════════ Shared CTA palette (from consultation modal) ══════════ */ .cta-strip .btn-primary, .final-cta .btn-primary, .hero-form-wrap button[type="submit"], .hero-form-wrap .btn-primary { background: linear-gradient(180deg, #1c7a4a, #145c37) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 24px rgba(20, 92, 55, 0.3); transition: transform 0.16s ease, filter 0.2s ease; } .cta-strip .btn-secondary, .final-cta .btn-secondary, .guarantee-section .btn-primary { background: #f3f8ef !important; color: #145c37 !important; border: 1.5px solid rgba(20, 92, 55, 0.4) !important; box-shadow: none !important; transition: transform 0.16s ease, background 0.2s ease, border-color 0.2s ease; } @media (hover: hover) { .cta-strip .btn-primary:hover, .final-cta .btn-primary:hover, .hero-form-wrap button[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); } .cta-strip .btn-secondary:hover, .final-cta .btn-secondary:hover, .guarantee-section .btn-primary:hover { background: #e6f2e2 !important; border-color: rgba(20, 92, 55, 0.7) !important; } } /* Requested section refinements — hero intentionally excluded */ .hero-offer2 .ho2-or { display: inline-block; margin-block: 0.16rem; font-size: 0.82em; font-weight: 800; } [data-section="gallery"] { background: linear-gradient(160deg, #526146 0%, #3d4b34 52%, #303c29 100%) !important; } [data-section="reviews"], [data-section="testimonials"], [data-section="hero-testimonials"] { background: linear-gradient(160deg, #627257 0%, #4a5940 55%, #394630 100%) !important; } /* Bottom offer tiles: lighter sage surfaces with strong dark type */ .offer-section--v8 .offer-cardlet, .offer-section--v8 .offer-cardlet--wide { background: linear-gradient(155deg, #f7faF2 0%, #e5eedc 100%) !important; border-color: rgba(20, 92, 55, 0.24) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 20px 42px -28px rgba(8,35,22,0.55) !important; } .offer-section--v8 .oc-title { color: #173522 !important; } .offer-section--v8 .oc-copy { color: #405548 !important; } .offer-section--v8 .oc-title em, .offer-section--v8 .oc-copy em, .offer-section--v8 .oc-kicker { color: #1c7a4a !important; } .offer-section--v8 .offer-cardlet:hover, .offer-section--v8 .offer-cardlet:focus-within { border-color: rgba(28,122,74,0.55) !important; box-shadow: inset 0 1px 0 #fff, 0 26px 50px -27px rgba(8,35,22,0.48), 0 0 0 2px rgba(28,122,74,0.12) !important; } /* Bottom deadline matches the urgent red treatment used in the hero */ .offer-section--v8 .offer-deadline-line { position: relative; overflow: hidden; width: fit-content; margin-inline: auto; padding: 0.58rem 1rem !important; border-radius: 999px; background: linear-gradient(135deg, #d51616, #ff4b1f) !important; color: #fff !important; box-shadow: 0 8px 24px -9px rgba(213,22,22,0.8); animation: ho2-note-pulse 2s ease-in-out infinite; } .offer-section--v8 .offer-deadline-line strong { color: #fff !important; } /* Bottom lock-in actions use the consultation popup palette */ .offer-section--v8 .btn-lock { background: linear-gradient(180deg, #1c7a4a, #145c37) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 10px 24px rgba(20,92,55,0.3) !important; } .offer-section--v8 .btn-lock-ghost { background: #f3f8ef !important; color: #145c37 !important; border: 1.5px solid rgba(20,92,55,0.4) !important; } @media (hover: hover) { .offer-section--v8 .btn-lock:hover { filter: brightness(1.08); transform: translateY(-1px); } .offer-section--v8 .btn-lock-ghost:hover { background: #e6f2e2 !important; border-color: rgba(20,92,55,0.7) !important; } } @media (prefers-reduced-motion: reduce) { .offer-section--v8 .offer-deadline-line { animation: none !important; } } /* ══════════════ Offer badges, lock-in CTAs & sticky bar (final pass) ══════════════ */ /* Emoji discs: dark disc so the emoji pops off it */ .offer-section--v8 .offer-cards--center .oc-badge, .offer-section--v8 .oc-badge { background: radial-gradient(85% 85% at 50% 20%, #123a26, #06170f) !important; border: 1px solid color-mix(in oklab, var(--accent-a) 55%, transparent) !important; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-a) 18%, transparent), 0 14px 28px -16px rgba(0,0,0,0.8) !important; color: #fff !important; font-size: 1.6rem !important; line-height: 1 !important; text-shadow: 0 1px 6px rgba(0,0,0,0.45); } .offer-section--v8 .offer-cardlet:hover .oc-badge { box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent-a) 30%, transparent), 0 16px 32px -16px rgba(0,0,0,0.85) !important; } /* Lock-in button: white/grey pill with black type for max contrast */ .offer-section--v8 .btn-lock { background: linear-gradient(180deg, #ffffff, #e9ecea) !important; color: #101613 !important; border: 1px solid rgba(255,255,255,0.9) !important; box-shadow: 0 12px 28px -12px rgba(0,0,0,0.55) !important; } @media (hover: hover) { .offer-section--v8 .btn-lock:hover { background: linear-gradient(180deg, #ffffff, #f5f7f6) !important; transform: translateY(-1px); } } .offer-section--v8 .offer-lock-or { margin: 0.15rem 0 0; display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.82); } .offer-section--v8 .btn-lock-call { background: #f3f8ef !important; color: #145c37 !important; border: 1.5px solid rgba(20,92,55,0.4) !important; font-weight: 800; padding: 0.6rem 1.15rem !important; border-radius: 999px; box-shadow: none !important; } @media (hover: hover) { .offer-section--v8 .btn-lock-call:hover { background: #e6f2e2 !important; border-color: rgba(20,92,55,0.7) !important; } } /* Sticky bar: back to the dark background */ .sticky-bar--v2 { background: linear-gradient(180deg, rgba(16,22,15,0.96) 0%, rgba(9,14,9,0.98) 100%) !important; border-top: 1px solid rgba(255,255,255,0.12) !important; box-shadow: 0 -10px 30px rgba(0,0,0,0.42) !important; } .sticky-bar--v2 .sticky-book, .sticky-bar--v2 .sticky-quote { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,0.5) !important; } @media (hover: hover) { .sticky-bar--v2 .sticky-book:hover, .sticky-bar--v2 .sticky-quote:hover { background: rgba(255,255,255,0.12) !important; border-color: #fff !important; color: #fff !important; } } /* ══════════════ Reviews strip: photo background ══════════════ */ .testimonials-strip { position: relative; isolation: isolate; padding: 3rem 0 2.25rem !important; overflow: hidden; } .testimonials-strip::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/__l5e/assets-v1/9e0fd866-3dae-4dc9-93ad-c83dc9d5c534/sc-gallery-2.webp") center/cover no-repeat; } .testimonials-strip::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(246,251,245,0.9) 0%, rgba(232,242,231,0.86) 55%, rgba(246,251,245,0.94) 100%); backdrop-filter: blur(2px); } .testimonials-strip .tq-card { background: rgba(255,255,255,0.94) !important; backdrop-filter: blur(6px); box-shadow: 0 26px 60px -30px rgba(11,61,43,0.5) !important; } /* Scarcity line: clear, prominent, no financing mention */ .hero-offer2 .ho2-promise--limit { display: block; margin: 0.65rem 0 0; padding: 0.8rem 0.95rem; border-radius: 14px; background: linear-gradient(180deg, rgba(230,251,82,0.32), rgba(95, 128, 104, 0.18)); border: 1px solid rgba(20,92,55,0.22); border-left: 5px solid #c2d44d; box-shadow: 0 6px 16px rgba(15,47,29,0.10); color: #0f2f1d; font-size: clamp(1rem, 2.6vw, 1.12rem); font-weight: 700; line-height: 1.42; text-align: center; text-wrap: balance; } .hero-offer2 .ho2-promise--limit strong { font-weight: 900; color: #0b2415; text-wrap: balance; } .hero-offer2 .ho2-promise-sub { display: block; margin-top: 0.2rem; font-size: 0.82rem; font-weight: 600; opacity: 0.75; text-wrap: balance; } /* ══════════════ Hero offer — clean, high-contrast final design ══════════════ */ .hero-offer2 { position: relative; overflow: hidden; padding: clamp(1.1rem, 3vw, 1.4rem) !important; border: 1px solid rgba(20, 92, 55, 0.22) !important; border-top: 5px solid #1c7a4a !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 24px 54px -28px rgba(4, 32, 19, 0.72) !important; } .hero-offer2::before { content: none !important; } .hero-offer2 .ho2-head { gap: 0.4rem !important; margin-bottom: 1rem !important; } .hero-offer2 .ho2-title { font-size: clamp(1.45rem, 4.5vw, 1.9rem) !important; color: #123c27 !important; } .hero-offer2 .ho2-grid { gap: 0.6rem !important; border: 0 !important; } .hero-offer2 .ho2-grid li, .hero-offer2 .ho2-grid li:nth-child(odd), .hero-offer2 .ho2-grid li:nth-child(even) { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; min-width: 0; padding: 0.85rem 0.8rem !important; border: 1px solid rgba(20, 92, 55, 0.16) !important; border-radius: 10px; background: #f2f7ef; text-align: center; } /* Icon row (centered, no category label) */ .hero-offer2 .ho2-top { display: flex; align-items: center; justify-content: center; margin-bottom: 0.1rem; } .hero-offer2 .ho2-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 7px; background: #dcead0; color: #1a6039; line-height: 1; } .hero-offer2 .ho2-ico svg { display: block; } .hero-offer2 .ho2-tag { color: #2f6a45; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } .hero-offer2 .ho2-amt { font-size: clamp(1.42rem, 4.2vw, 1.72rem) !important; font-weight: 900 !important; line-height: 1.12 !important; letter-spacing: 0; color: #114a2c !important; background: none !important; -webkit-text-fill-color: currentColor !important; } .hero-offer2 .ho2-lbl { color: #36483d !important; font-size: 0.88rem !important; font-weight: 600 !important; line-height: 1.36 !important; } /* Scarcity note: intentionally different from the offer tiles — dark panel, ivory text */ /* Scarcity note: light lime panel (restored previous design) */ .hero-offer2 .ho2-promise--limit { display: block; margin: 0.95rem 0 0 !important; padding: 0.85rem 0.95rem !important; border: 1px solid rgba(20,92,55,0.22) !important; border-left: 5px solid #c2d44d !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(230,251,82,0.32), rgba(95, 128, 104, 0.18)) !important; box-shadow: 0 6px 16px rgba(15,47,29,0.10) !important; color: #0f2f1d !important; font-size: clamp(1rem, 2.6vw, 1.12rem) !important; font-weight: 700 !important; line-height: 1.42 !important; text-align: center !important; text-wrap: balance; } .hero-offer2 .ho2-promise--limit strong { color: #0b2415 !important; font-weight: 900; text-wrap: balance; } .hero-offer2 .ho2-promise--limit .ho2-promise-sub { color: #24422f !important; font-size: 0.86rem !important; font-weight: 600 !important; opacity: 0.85 !important; } .hero-offer2 .ho2-note { margin: 0.7rem auto 0.45rem !important; padding: 0.38rem 0.72rem !important; animation: none !important; box-shadow: none !important; } .hero-offer2 .ho2-note::after { content: none !important; animation: none !important; } .hero-offer2 .ho2-note strong, .hero-offer2 .ho2-title, .hero-offer2 .ho2-title * { text-decoration: none !important; border-bottom: 0 !important; } /* Full-offer link: colorful gradient underline (restored) */ .hero-offer2 .ho2-link { position: relative; display: inline-block; padding-bottom: 0.28rem !important; color: #145c37 !important; font-weight: 800; text-decoration: none !important; border-bottom: 0 !important; } .hero-offer2 .ho2-link::after { content: "" !important; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #145c37, #7fbf3f 42%, #e6fb52 68%, #f5a524) !important; animation: none !important; } .hero-offer2 .ho2-link:hover::after { height: 4px; } @media (max-width: 600px) { .hero-offer2 .ho2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; } .hero-offer2 .ho2-grid li { padding: 0.7rem 0.62rem !important; } .hero-offer2 .ho2-ico { width: 1.3rem; height: 1.3rem; font-size: 0.75rem; } .hero-offer2 .ho2-tag { font-size: 0.62rem; letter-spacing: 0.07em; } .hero-offer2 .ho2-amt { font-size: 1.3rem !important; } .hero-offer2 .ho2-lbl { font-size: 0.84rem !important; } .hero-offer2 .ho2-nowrap { display: block; white-space: normal !important; text-wrap: balance; } .hero-offer2 .ho2-promise--limit { font-size: 0.94rem !important; padding: 0.8rem 0.8rem !important; } .hero-offer2 .ho2-promise--limit .ho2-promise-sub { font-size: 0.84rem !important; } } .offer-section--v8 .offer-fine--limit { font-size: 0.95rem; line-height: 1.5; text-align: center; opacity: 1; } .offer-section--v8 .offer-fine--limit strong { font-weight: 800; } /* ══════════════ V10 — ONE page surface (soft mint → white), two accent bands ══════════════ Reference: a single continuous light-mint gradient page, with only the two CTA bands (mid-page strip + final CTA) in deep green. Nothing else is tinted. */ :root { --page-top: #e2f0e5; --page-mid: #eef7ee; --page-bot: #f7fbf6; --ink: #16241b; --ink-soft: #46584c; } html, body { background: linear-gradient(180deg, var(--page-top) 0%, var(--page-mid) 38%, var(--page-bot) 100%) !important; background-attachment: fixed !important; color: var(--ink); } /* every band becomes part of the same surface */ .band, .band-light, .band-green, .geo-band, .stats-band, .video-section, .guarantee-section, .mini-faq, .comparison, .hero-form-wrap, .site-footer, [data-section="results"], [data-section="services"], [data-section="brands"], [data-section="gallery"], [data-section="before-after"], [data-section="video"], [data-section="project-preview"], [data-section="video-reviews"], [data-section="reviews"], [data-section="comparison"], [data-section="process"], [data-section="guarantee"], [data-section="area"], [data-section="faq"] { background: transparent !important; border-top: 0 !important; border-bottom: 0 !important; color: var(--ink) !important; } /* ink text everywhere on the light surface */ .band-green h2, .band-green h3, .band-green p, .band-green li, .stats-band h2, .stats-band h3, .stats-band p, .guarantee-section h2, .guarantee-section h3, .guarantee-section p, [data-section="gallery"] h2, [data-section="gallery"] h3, [data-section="gallery"] p, [data-section="faq"] h2, [data-section="faq"] h3, [data-section="faq"] summary, [data-section="faq"] .faq-body, [data-section="faq"] .faq-body p, [data-section="video"] h2, [data-section="video"] h3, [data-section="video"] p, [data-section="video-reviews"] h2, [data-section="video-reviews"] h3, [data-section="video-reviews"] p, [data-section="gallery"] .section-head p, [data-section="faq"] .section-head p, [data-section="video"] .section-head p, [data-section="video-reviews"] .section-head p { color: var(--ink) !important; -webkit-text-fill-color: var(--ink); } .band-green .section-head p, .stats-band .section-head p, .guarantee-section .section-head p, [data-section="gallery"] .section-head p, [data-section="faq"] .section-head p { color: var(--ink-soft) !important; } .band-green .kicker, .stats-band .kicker, .guarantee-section .kicker, [data-section="gallery"] .kicker, [data-section="faq"] .kicker, [data-section="video"] .kicker, [data-section="video-reviews"] .kicker { color: #11705a !important; } /* cards on the light surface: white glass, soft green edge */ .band-green .glass, .band-green .glass-dark, .stats-band .stats-card, .guarantee-section .glass, .guarantee-section .glass-dark, [data-section="gallery"] .glass, [data-section="gallery"] .glass-dark, [data-section="faq"] .glass, [data-section="faq"] .glass-dark, [data-section="video"] .glass, [data-section="video"] .glass-dark, [data-section="video-reviews"] .glass, [data-section="video-reviews"] .glass-dark { background: rgba(255,255,255,0.92) !important; border: 1px solid rgba(17,93,76,0.14) !important; color: var(--ink) !important; box-shadow: 0 22px 48px -30px rgba(11,61,43,0.35) !important; } /* the only two colored bands left — deep green, full-width CTA moments */ .cta-strip, .final-cta { background: linear-gradient(180deg, #16745f 0%, #0d4b3d 100%) !important; color: #fff !important; } .cta-strip h2, .cta-strip h3, .cta-strip p, .final-cta h2, .final-cta h3, .final-cta p { color: #fff !important; -webkit-text-fill-color: #fff; } .cta-strip .kicker, .final-cta .kicker { color: #d9ee5a !important; } /* footer sits on the same surface, separated by a hairline only */ .site-footer { border-top: 1px solid rgba(17,93,76,0.12) !important; } /* ══════════════ Hero offer amounts — larger, no highlight tile ══════════════ */ .hero-offer2 .ho2-amt { font-size: 1.6rem !important; letter-spacing: -0.025em !important; } @media (max-width: 600px) { .hero-offer2 .ho2-amt { font-size: 1.42rem !important; } } /* ══════════════ Before/After: tinted cards instead of plain white ══════════════ */ [data-section="before-after"] .ba-card { background: linear-gradient(165deg, #10382a 0%, #0b2a20 55%, #123c26 100%) !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 20px 40px -26px rgba(6,26,18,0.55) !important; } [data-section="before-after"] .ba-pair { background: rgba(255,255,255,0.14); } [data-section="before-after"] .ba-meta strong { color: #f4fbe8; } [data-section="before-after"] .ba-meta span { color: rgba(233,246,224,0.78); opacity: 1; } [data-section="before-after"] .ba-tag--after { background: linear-gradient(180deg, #7cc328, #3f8c1c); color: #0d2410; } [data-section="before-after"] .ba-card:hover { transform: translateY(-3px); transition: transform .25s ease; } @media (min-width: 900px) { [data-section="before-after"] .ba-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 700px) and (max-width: 899px) { [data-section="before-after"] .ba-grid { grid-template-columns: repeat(2, 1fr); } } [data-section="video-reviews"] .vr-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* avoid single-word orphan lines on address text */ .footer-nap [data-bind="address"], .gbp-card [data-bind="address"], [data-section="area"] li span, .footer-nap { text-wrap: balance; } /* ============ Font lab (design tool) ============ */ .fontlab { position: fixed; top: 92px; right: 12px; z-index: 9999; font-family: var(--font); } .fontlab__toggle { border: 1px solid rgba(14,106,73,0.25); background: rgba(255,255,255,0.94); color: #0e6a49; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.01em; padding: 8px 12px; border-radius: 999px; cursor: pointer; box-shadow: 0 6px 18px rgba(16,32,24,0.14); backdrop-filter: blur(8px); } .fontlab__toggle:hover { background: #fff; box-shadow: 0 8px 22px rgba(16,32,24,0.2); } .fontlab__panel { margin-top: 8px; width: 268px; max-height: 76vh; overflow-y: auto; background: #fff; border: 1px solid rgba(16,32,24,0.12); border-radius: 14px; padding: 14px; box-shadow: 0 18px 44px rgba(16,32,24,0.22); display: grid; gap: 10px; } .fontlab__pairs { display: grid; gap: 6px; } .fontlab__pair { display: grid; gap: 2px; text-align: left; cursor: pointer; padding: 8px 10px; border-radius: 10px; background: #f6f9f4; border: 1px solid rgba(16,32,24,0.10); } .fontlab__pair:hover { background: #eef5ea; } .fontlab__pair.is-active { border-color: #0e6a49; background: #e6f4ec; box-shadow: inset 0 0 0 1px #0e6a49; } .fontlab__pair strong { font-size: 0.95rem; line-height: 1.15; color: #12241b; } .fontlab__pair em { font-style: normal; font-size: 0.72rem; color: #5c6b62; } .fontlab__row { display: grid; gap: 4px; } .fontlab__label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #5c6b62; } .fontlab__select { width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(16,32,24,0.18); font-size: 0.86rem; font-weight: 600; color: #16241d; background: #fbfcfb; } .fontlab__preview { display: grid; gap: 3px; padding: 10px; border-radius: 10px; background: #f4f8f2; } .fontlab__preview strong { font-size: 1.05rem; line-height: 1.15; color: #0e6a49; } .fontlab__preview span { font-size: 0.78rem; line-height: 1.4; color: #46564d; } .fontlab__reset { border: none; background: none; padding: 0; text-align: left; cursor: pointer; font-size: 0.76rem; font-weight: 700; color: #7a8a80; text-decoration: underline; } @media (max-width: 700px) { .fontlab { top: auto; bottom: 96px; right: 10px; } } /* ══════════════════════════════════════════════════════════════ ROUND 12 — CTA system, clickable offer zones, B/W before-after ══════════════════════════════════════════════════════════════ */ /* ---- 1. Two alternating CTA looks: lime/black and black/white ---- */ .btn-yellow { background: linear-gradient(180deg, #e6fb52, #cfe63c) !important; color: #10190a !important; -webkit-text-fill-color: #10190a; border: 1px solid rgba(16,25,10,0.18) !important; font-weight: 900 !important; text-shadow: none !important; box-shadow: 0 10px 26px -12px rgba(160,200,40,0.65) !important; } .btn-ink { background: linear-gradient(180deg, #1c2420, #0c110e) !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid rgba(255,255,255,0.14) !important; font-weight: 800 !important; box-shadow: 0 12px 28px -14px rgba(6,12,8,0.7) !important; } @media (hover: hover) { .btn-yellow:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn-ink:hover { background: linear-gradient(180deg, #2a3430, #141a16) !important; transform: translateY(-1px); } } .btn-yellow:focus-visible, .btn-ink:focus-visible { outline: 3px solid #0a7d68; outline-offset: 3px; } /* ---- 2. Clickable offer / badge zones behave like CTAs ---- */ [data-cta] { cursor: pointer; } [data-cta]:focus-visible { outline: 3px solid #0a7d68; outline-offset: 3px; border-radius: 12px; } @media (hover: hover) { .hero-offer2 .ho2-grid > li[data-cta]:hover { transform: translateY(-2px); transition: transform .2s ease; } .header-badge[data-cta]:hover { filter: brightness(1.04); } } /* ---- 3. Before / after: white cards, plain black & white tags ---- */ [data-section="before-after"] .ba-card { background: #fff !important; border: 1px solid rgba(17,93,76,0.14) !important; box-shadow: 0 20px 44px -30px rgba(11,61,43,0.32) !important; } [data-section="before-after"] .ba-pair { background: rgba(17,93,76,0.08); } [data-section="before-after"] .ba-meta strong { color: var(--heading) !important; } [data-section="before-after"] .ba-meta span { color: var(--muted) !important; opacity: 1; } [data-section="before-after"] .ba-tag--before { background: #0d100e !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.25); } [data-section="before-after"] .ba-tag--after { background: #fff !important; color: #0d100e !important; border: 1px solid rgba(13,16,14,0.18); } /* ---- 4. CTA strip headline: dark text on a light band ---- */ .cta-strip { background: linear-gradient(180deg, #eef4e6 0%, #e3ecdb 100%) !important; color: var(--ink) !important; } .cta-strip h2, .cta-strip h3, .cta-strip p { color: #0b1410 !important; -webkit-text-fill-color: #0b1410; } .cta-strip .kicker { color: #14603f !important; } .cta-strip .or-call, .cta-strip .or-call a { color: #0b1410 !important; } .cta-strip .glass.cta-strip-card { background: rgba(255,255,255,0.7) !important; border: 1px solid rgba(17,93,76,0.14) !important; } /* ---- 5. Comparison ticks & crosses: identical size, top aligned ---- */ .compare-list li { align-items: flex-start !important; } .compare-list .tick, .compare-list .cross { flex: 0 0 auto; width: 22px !important; height: 22px !important; min-width: 22px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 999px; font-size: 0.78rem !important; line-height: 1 !important; font-weight: 900; transform: translateY(1px) !important; } /* ---- 6. Google mark next to review headings ---- */ .kicker--google { display: inline-flex; align-items: center; gap: 0.4rem; } .rs-google { display: inline-flex; align-items: center; vertical-align: middle; margin-right: 0.4rem; } .review-summary .rs-google { transform: translateY(2px); } /* ---- 7. Offer lock stack: "Or" on its own line, contrasting buttons ---- */ .offer-section--v8 .offer-lock-or { margin: 0.15rem 0 0 !important; font-size: 0.82rem !important; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,0.78) !important; } .offer-section--v8 .btn-lock, .offer-section--v8 .btn-lock-call { background-image: none; } .offer-section--v8 .btn-lock { background: linear-gradient(180deg, #e6fb52, #cfe63c) !important; color: #10190a !important; -webkit-text-fill-color: #10190a; border: 1px solid rgba(16,25,10,0.18) !important; } .offer-section--v8 .btn-lock-call { background: linear-gradient(180deg, #1c2420, #0c110e) !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid rgba(255,255,255,0.28) !important; } @media (hover: hover) { .offer-section--v8 .btn-lock:hover { filter: brightness(1.06); transform: translateY(-1px); } .offer-section--v8 .btn-lock-call:hover { background: linear-gradient(180deg, #2a3430, #141a16) !important; } } /* ---- 8. Limited slots fine print: small, bold, quiet ---- */ .offer-fine--limit { margin-top: 0.9rem !important; font-size: 0.74rem !important; line-height: 1.5; letter-spacing: 0.04em; color: rgba(255,255,255,0.7) !important; } .offer-fine--limit .ofl-strong { display: inline-block; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: #e6fb52; } /* ---- 9. Sticky bar: back to grey ---- */ .sticky-bar--v2 { background: linear-gradient(180deg, rgba(247,249,246,0.97) 0%, rgba(232,236,230,0.98) 100%) !important; border-top: 1px solid rgba(17,93,76,0.16) !important; box-shadow: 0 -10px 30px rgba(20,40,30,0.16) !important; } .sticky-bar--v2 .sticky-book, .sticky-bar--v2 .sticky-quote { background: #fff !important; color: #0b1410 !important; -webkit-text-fill-color: #0b1410; border: 1.5px solid rgba(13,20,16,0.35) !important; } @media (hover: hover) { .sticky-bar--v2 .sticky-book:hover, .sticky-bar--v2 .sticky-quote:hover { background: #0c110e !important; color: #fff !important; -webkit-text-fill-color: #fff; border-color: #0c110e !important; } } /* ══════════════════════════════════════════════════════════════ ROUND 13 — red header phone, single top button colour, green/white comparison marks, louder deadline glow, footer gap ══════════════════════════════════════════════════════════════ */ /* ---- 1. Header phone: compact deep-blue pill ---- */ .header-phone, .header-phone.cta-glow { padding: 0.28rem 0.8rem 0.28rem 0.32rem !important; border-radius: 999px !important; background: linear-gradient(180deg, #1b211c, #0a0d0b) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: 0 8px 20px -12px rgba(6,10,8,0.85), inset 0 1px 0 rgba(255,255,255,0.16) !important; animation: none !important; } .header-phone:hover { filter: brightness(1.06); } .header-phone, .header-phone .phone-label, .header-phone .phone-number, .site-header.scrolled .header-phone, .site-header.scrolled .header-phone .phone-label, .site-header.scrolled .header-phone .phone-number { color: #fff !important; -webkit-text-fill-color: #fff; } .header-phone .phone-number { font-size: 1.02rem !important; font-weight: 800 !important; letter-spacing: -0.01em; } .header-phone .phone-label { font-size: 0.64rem !important; opacity: 0.88; letter-spacing: 0.02em; } .header-phone .icon-wrap { width: 30px !important; height: 30px !important; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)) !important; border: 0 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important; animation: none !important; } .header-phone .icon-wrap svg { stroke: var(--accent-ink) !important; color: var(--accent-ink) !important; width: 17px; height: 17px; } @media (max-width: 480px) { .header-phone .phone-number { font-size: 0.95rem !important; } .header-phone .icon-wrap { width: 28px !important; height: 28px !important; } } /* ---- 2. Top-of-page buttons: one calm colour, no rainbow ---- */ .site-header .header-cta, .site-header .btn-yellow { background: linear-gradient(180deg, #1c2420, #0c110e) !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 12px 26px -14px rgba(6,12,8,0.7) !important; animation: none !important; } .header-badge .icon { color: #14603f !important; } .header-badge--fin .icon { color: #14603f !important; } /* ---- 3. Comparison marks: green & white only ---- */ .compare-list .tick, .compare-col-icon { background: #14603f !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 0 !important; } .compare-col-icon svg { stroke: #fff !important; } .compare-list .cross { background: #fff !important; color: #14603f !important; -webkit-text-fill-color: #14603f; border: 1.5px solid rgba(20,96,63,0.45) !important; } /* ---- 4. Deadline: stronger glow ---- */ .hero-offer2 .ho2-note { box-shadow: 0 0 0 5px rgba(224,32,32,0.16), 0 14px 34px -10px rgba(213,22,22,0.95) !important; } @keyframes ho2-note-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(224,32,32,0.14), 0 10px 26px -12px rgba(255,90,43,0.8); } 50% { transform: scale(1.045); box-shadow: 0 0 0 9px rgba(255,120,50,0.22), 0 18px 44px -8px rgba(255,60,20,1); } } .offer-section--v8 .offer-deadline-line { animation: deadline-glow 1.8s ease-in-out infinite !important; } /* ---- 5. Last section: tighten the gap above the footer ---- */ .hero-form-wrap { padding-bottom: clamp(1rem, 2.5vw, 1.75rem) !important; } .site-footer { padding-top: clamp(1rem, 2.5vw, 1.75rem) !important; } /* ---- Round 14: comparison column titles look distinct from list ticks ---- */ .compare-col-title { align-items: center; gap: 0.7rem; font-size: clamp(1.18rem, 2.6vw, 1.42rem); letter-spacing: -0.015em; padding-bottom: 0.85rem; margin-bottom: 1.1rem; border-bottom: 1px solid rgba(20, 96, 63, 0.16); } .compare-col-us .compare-col-title, .compare-col-them .compare-col-title { color: #16241c; } .compare-tag { display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0.28rem 0.68rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; } .compare-tag--us { background: #14603f; color: #fff; } .compare-tag--them { background: #fff; color: #14603f; box-shadow: inset 0 0 0 1.5px rgba(20, 96, 63, 0.35); } /* ---- Service CTA modal: per-service ad copy ---- */ .chip-modal__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; } .chip-modal__list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; color: #16241c; } .chip-modal__tick { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #14603f; color: #fff; font-size: 0.7rem; font-weight: 800; margin-top: 0.1rem; } .chip-modal__offer { margin: 0 0 1.1rem; padding: 0.7rem 0.85rem; border-radius: 14px; background: rgba(215, 236, 120, 0.28); box-shadow: inset 0 0 0 1px rgba(20, 96, 63, 0.16); font-size: 0.9rem; color: #16241c; } .chip-modal__offer strong { color: #0f4d33; } /* ══════════════ V8: hero panel — even, see-through green all the way down ══════════════ */ /* The panel used to darken toward the bottom until the photo disappeared. Keep the same light, translucent green from top to bottom so the backyard photo stays visible behind the whole hero block. */ .hero-copy-panel { background: linear-gradient(180deg, rgba(34,110,98,0.52) 0%, rgba(32,106,95,0.54) 55%, rgba(30,102,92,0.56) 100%) !important; -webkit-backdrop-filter: blur(10px) saturate(1.25) !important; backdrop-filter: blur(10px) saturate(1.25) !important; border-color: rgba(255,255,255,0.30) !important; box-shadow: 0 26px 64px -32px rgba(4,24,22,0.45), inset 0 1px 0 rgba(255,255,255,0.24) !important; } /* text stays legible over the lighter glass */ .hero-copy-panel h1, .hero-copy-panel .hero-lede, .hero-copy-panel .hero-sub { text-shadow: 0 2px 14px rgba(4,20,16,0.45); } /* ══════════════ Sticky bar call button: match the header phone CTA ══════════════ */ /* black pill, white label, lime-yellow phone icon — same palette as the header */ .sticky-bar--v2 .sticky-call { background: linear-gradient(180deg, #1b211c, #0a0d0b) !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 8px 20px -12px rgba(6,10,8,0.85), inset 0 1px 0 rgba(255,255,255,0.16) !important; animation: none !important; } .sticky-bar--v2 .sticky-call svg { stroke: var(--accent-a) !important; color: var(--accent-a) !important; } @media (hover: hover) { .sticky-bar--v2 .sticky-call:hover { filter: brightness(1.08); background: linear-gradient(180deg, #1b211c, #0a0d0b) !important; } } /* ══════════════ V9: hero clarity pass — less blur, crisper edges ══════════════ */ /* Too many stacked frosted layers made the hero read as mushy. Drop the backdrop blur to near-zero and lean on solid-ish fills instead. */ .hero-copy-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: linear-gradient(180deg, rgba(24,92,82,0.80) 0%, rgba(18,78,70,0.86) 100%) !important; border-color: rgba(255,255,255,0.22) !important; box-shadow: 0 24px 60px -34px rgba(4,24,22,0.55) !important; } /* kill the glossy sheen overlay */ .hero-copy-panel::before { display: none !important; } /* crisp text instead of glow */ .hero-copy-panel h1, .hero-copy-panel .hero-lede, .hero-copy-panel .hero-sub { text-shadow: 0 1px 2px rgba(0,0,0,0.28) !important; } /* chips / counties / offer card: solid fills, no blur */ .hero-chips li, .hero-counties li { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(255,255,255,0.16) !important; border-color: rgba(255,255,255,0.34) !important; } .hero-offer { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: linear-gradient(160deg, rgba(9,60,52,0.72), rgba(6,44,40,0.80)) !important; } .hero-rating { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(255,255,255,0.22) !important; } /* photo itself: keep it sharp */ .hero-img { filter: none !important; } .hero-scrim { background: linear-gradient(180deg, rgba(6,22,20,0.34) 0%, rgba(6,22,20,0.18) 45%, rgba(6,22,20,0.44) 100%) !important; } /* V10: hero offer card centered in the hero panel on desktop */ .hero-copy-panel .hero-offer2 { margin-left: auto !important; margin-right: auto !important; max-width: 40rem; width: 100%; } /* ---------- Aerial / bird's-eye section ---------- */ .aerial-section{padding:clamp(48px,7vw,88px) 0;background:#fff} .aer-group{margin-top:40px} .aer-group-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:clamp(1.35rem,3.2vw,2rem);font-weight:900;line-height:1.15;letter-spacing:-.02em;margin:0 0 16px;padding:0 0 12px 16px;color:#0f1b14;border-left:6px solid #c2d44d;border-bottom:1px solid rgba(15,27,20,.12)} .aer-group-title span{font-size:clamp(.95rem,1.9vw,1.1rem);font-weight:700;color:#3f5a48;background:#eef6cf;border-radius:999px;padding:5px 12px;letter-spacing:0} .aer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .aer-fig{position:relative;margin:0;border-radius:16px;overflow:hidden;background:#eef1ee;box-shadow:0 10px 30px rgba(16,32,24,.12)} .aer-fig img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease} .aer-fig:hover img{transform:scale(1.03)} .aer-tag{position:absolute;left:10px;top:10px;padding:5px 11px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:#0f1b14;color:#fff} .aer-fig--wide .aer-tag{background:#fff;color:#0f1b14} @media (max-width:640px){.aer-grid{grid-template-columns:1fr}} /* ---- Pronounced Before/After + Drone pills ---- */ [data-section="before-after"] .ba-tag, .aer-tag { font-size: .8rem !important; font-weight: 900 !important; letter-spacing: .07em !important; padding: .42rem .85rem !important; border-radius: 999px !important; box-shadow: 0 6px 16px rgba(8,20,12,.28) !important; } [data-section="before-after"] .ba-tag--before, .aer-fig .aer-tag { background: #fff !important; color: #0d100e !important; border: 1px solid rgba(13,16,14,.18) !important; } [data-section="before-after"] .ba-tag--after, .aer-fig .aer-tag--done { background: linear-gradient(180deg, #eaf75f, #cfe23f) !important; color: #0d100e !important; border: 1px solid rgba(13,16,14,.22) !important; } /* ---- Clickable county pills (call CTA) ---- */ .geo-pills li { padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; } .geo-pill-link { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 999px; background: linear-gradient(180deg, #167a63, #0f5a49); color: #fff !important; font-weight: 800; font-size: .9rem; text-decoration: none; border: 1px solid rgba(255,255,255,.28); box-shadow: 0 6px 16px rgba(8,20,12,.18); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .geo-pill-link:hover, .geo-pill-link:focus-visible { background: linear-gradient(180deg, #eaf75f, #cfe23f); color: #0d100e !important; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(8,20,12,.3); } .geo-pills .geo-pill-link .geo-pin-sm { color: #eaf75f !important; } .geo-pills .geo-pill-link:hover .geo-pin-sm, .geo-pills .geo-pill-link:focus-visible .geo-pin-sm { color: #0d100e !important; } /* ---- customer testimonial videos (owner 2026-08-11) ---- */ .tvid-row{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px 2px 14px; scrollbar-width:thin; } .tvid-card{ flex:0 0 min(260px,74%); scroll-snap-align:center; margin:0; display:flex; flex-direction:column; gap:10px; } .tvid-video{ width:100%; aspect-ratio:9/16; border-radius:18px; background:#0d1a10; object-fit:cover; display:block; box-shadow:0 10px 30px rgba(0,0,0,.14); } .tvid-cap{display:flex; flex-direction:column; gap:2px; text-align:center;} .tvid-name{font-weight:800; font-size:1rem;} .tvid-meta{font-size:.82rem; opacity:.7;} @media (min-width:900px){ .tvid-row{overflow:visible; justify-content:center; flex-wrap:nowrap;} .tvid-card{flex:1 1 0; min-width:0; max-width:230px;} } /* ---- written reviews: platform logo badge + photo avatars (owner 2026-08-11) ---- */ [data-slot="reviews-widget"] .review-source{ margin-left:auto; flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid rgba(15,27,20,.10); border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.08); } [data-slot="reviews-widget"] .review-source svg{display:block;} [data-slot="reviews-widget"] img.review-avatar--photo{ flex:none; width:38px; height:38px; border-radius:50%; object-fit:cover; background:#e7ece8; } /* ============ Comparison board (v2 design) ============ */ .vs-board { border-radius: var(--radius-card); overflow: hidden; border: 1px solid rgba(20, 40, 30, 0.12); background: #fff; box-shadow: 0 18px 44px -30px rgba(15, 40, 25, 0.35); } .vs-head, .vs-row { display: grid; grid-template-columns: minmax(150px, 0.8fr) 1.35fr 1.35fr; } .vs-head { background: linear-gradient(180deg, #0f2a1c, #12351f); color: #fff; font-weight: 800; font-size: 1.02rem; } .vs-head > span { padding: 1rem 1.1rem; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .vs-head-them { color: rgba(255, 255, 255, 0.66); font-weight: 700; } .vs-badge { display: inline-block; padding: 0.18rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; } .vs-badge--us { background: linear-gradient(135deg, #f2e35a, #cfe04f); color: #101a12; } .vs-badge--them { background: rgba(255, 255, 255, 0.16); color: #fff; } .vs-row + .vs-row, .vs-head + .vs-row { border-top: 1px solid rgba(20, 40, 30, 0.1); } .vs-cat { padding: 1.05rem 1.1rem; font-weight: 800; color: var(--heading); background: rgba(160, 200, 40, 0.07); display: flex; align-items: center; font-size: 0.98rem; } .vs-cell { padding: 1.05rem 1.1rem; display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.97rem; line-height: 1.5; } .vs-cell p { margin: 0; } .vs-cell--us { color: var(--ink); border-left: 1px solid rgba(20, 40, 30, 0.1); } .vs-cell--them { color: var(--muted); border-left: 1px solid rgba(20, 40, 30, 0.1); background: rgba(20, 30, 25, 0.025); } .vs-mark { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.82rem; font-weight: 900; line-height: 1; } .vs-mark--yes { background: #165c33; color: #fff; } .vs-mark--no { background: rgba(20, 30, 25, 0.09); color: #7a8580; } .vs-cell-lbl { display: none; } @media (max-width: 819px) { .vs-head { display: none; } .vs-head + .vs-row { border-top: 0; } .vs-row { grid-template-columns: 1fr; } .vs-cat { background: linear-gradient(180deg, #0f2a1c, #12351f); color: #fff; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; padding: 0.6rem 1rem; } .vs-cell { border-left: 0; padding: 0.85rem 1rem; } .vs-cell--us { border-top: 0; } .vs-cell-lbl { display: inline-block; flex: none; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.16rem 0.5rem; border-radius: 999px; margin-top: 0.1rem; } .vs-cell--us .vs-cell-lbl { background: linear-gradient(135deg, #f2e35a, #cfe04f); color: #101a12; } .vs-cell--them .vs-cell-lbl { background: rgba(20, 30, 25, 0.08); color: #6b7671; } } /* ============ Build rail (process v2) ============ */ .build-rail { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; position: relative; } .build-rail::before { content: ""; position: absolute; left: 1.65rem; top: 1.6rem; bottom: 1.6rem; width: 2px; background: linear-gradient(180deg, #165c33, rgba(22, 92, 51, 0.15)); } .build-step { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; gap: clamp(0.9rem, 2vw, 1.6rem); padding: 0 0 clamp(1.6rem, 3vw, 2.3rem); } .build-step:last-child { padding-bottom: 0; } .bs-num { position: relative; z-index: 1; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #0f2a1c, #17512f); color: #dfeae1; font-weight: 900; font-size: 1.05rem; box-shadow: 0 0 0 6px #fff; } .bs-body { background: #fff; border: 1px solid rgba(20, 40, 30, 0.12); border-left: 4px solid #cfe04f; border-radius: 14px; padding: clamp(0.95rem, 2vw, 1.35rem) clamp(1rem, 2.2vw, 1.5rem); box-shadow: 0 14px 34px -28px rgba(15, 40, 25, 0.4); } .bs-body h3 { margin: 0 0 0.4rem; font-size: clamp(1.06rem, 2.2vw, 1.28rem); color: var(--heading); } .bs-body p { margin: 0; color: var(--ink); } /* county pills inside the service-area card */ .area-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; } /* ============ Logo v2 sizing (square lockup) ============ */ .header-logo img { width: auto !important; height: clamp(42px, 4.6vw, 62px); } @media (max-width: 640px) { .header-logo img { height: 40px; } } /* ============ Footer v2 ============ */ .site-footer--v2 { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%); } .site-footer--v2 .footer-shell { background: linear-gradient(165deg, #0e2719 0%, #143a24 100%); border-radius: clamp(18px, 2.4vw, 26px); padding: clamp(1.5rem, 3.2vw, 2.6rem); color: rgba(255, 255, 255, 0.82); box-shadow: 0 26px 60px -38px rgba(10, 35, 20, 0.7); } .footer-shell { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); grid-template-columns: 1fr; } @media (min-width: 860px) { .footer-shell { grid-template-columns: 1.5fr 1fr 1fr; align-items: start; } } .footer-logo { display: block; width: auto; height: clamp(64px, 7vw, 86px); filter: brightness(0) invert(1); margin-bottom: 0.9rem; } .footer-tagline { margin: 0 0 1rem; color: rgba(255, 255, 255, 0.72); max-width: 38ch; font-size: 0.96rem; } .footer-lic { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(230, 251, 82, 0.35); color: #fff; font-size: 0.88rem; font-weight: 700; } .footer-lic svg { color: #e2ef62; flex: none; } .footer-lic strong { color: #e2ef62; } .footer-col-title { margin: 0 0 0.8rem; font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: #cfe04f; } .footer-line { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0 0 0.6rem; color: rgba(255, 255, 255, 0.8); font-size: 0.96rem; text-decoration: none; } .footer-line svg { flex: none; color: #cfe04f; transform: translateY(2px); } .footer-line--link { color: #fff; font-weight: 800; min-height: 44px; align-items: center; } .footer-line--link:hover { color: #e6fb52; } .footer-hours { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } .footer-cta { margin-top: 0.6rem; } .footer-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; } .footer-areas li { color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; padding-left: 0.9rem; position: relative; } .footer-areas li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: #cfe04f; } .footer-base { margin-top: clamp(1rem, 2vw, 1.5rem); padding: 0 clamp(0.4rem, 1.5vw, 1rem); display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: space-between; align-items: center; font-size: 0.86rem; color: #5c6b62; } .site-footer--v2 .footer-legal { display: inline-flex; gap: 1.1rem; } .site-footer--v2 .footer-legal a { color: #2c4a38; text-decoration: none; font-weight: 700; } .site-footer--v2 .footer-legal a:hover { color: #0f2a1c; text-decoration: underline; } /* ---- testimonial videos: grid instead of side-scroll (owner 2026-08-11) ---- */ .tvid-row{ display:grid !important; overflow:visible !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:4px 0 6px; } .tvid-card{ flex:none !important; max-width:none !important; width:100%; } .tvid-video{ aspect-ratio:9/14; border-radius:16px; } @media (min-width:640px){ .tvid-row{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } } @media (min-width:1024px){ .tvid-row{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; } } /* ---- glowing: summer offer badge + "Built Once, Built Right" ---- */ @keyframes ho2BadgeGlow{ 0%,100%{ box-shadow:0 0 0 rgba(95, 128, 104, 0), 0 6px 18px -12px rgba(20,40,25,.35); } 50% { box-shadow:0 0 26px rgba(95, 128, 104, .85), 0 0 54px rgba(95, 128, 104, .35); } } .hero-offer2 .ho2-badge{ animation:ho2BadgeGlow 2.4s ease-in-out infinite !important; text-shadow:0 0 12px rgba(255,255,255,.45); } @keyframes h1TagGlowStrong{ 0%,100%{ text-shadow:0 0 10px rgba(95, 128, 104, .35), 0 2px 6px rgba(0,0,0,.35); } 50% { text-shadow:0 0 26px rgba(95, 128, 104, .95), 0 0 58px rgba(95, 128, 104, .55), 0 2px 6px rgba(0,0,0,.35); } } .hero-h1 .h1-tag{ animation:h1-rise .85s .36s cubic-bezier(0.16,1,0.3,1) forwards, h1TagGlowStrong 2.8s 1.2s ease-in-out infinite !important; } @media (prefers-reduced-motion: reduce){ .hero-offer2 .ho2-badge{ animation:none !important; } } /* ============ Reviews rotator v3 (avatar + platform badge) ============ */ .testimonials-strip { padding: 3rem 0 1.25rem; } .tq-viewport { min-height: 210px; } @media (min-width: 720px) { .tq-viewport { min-height: 175px; } } .tq-top { display: flex; align-items: center; gap: 0.75rem; } img.tq-face { flex: none; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: #e7ece8; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(22, 92, 51, 0.18); } .tq-topmeta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .tq-topmeta .tq-stars { font-size: 1.05rem; letter-spacing: 3px; } .tq-verified { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: rgba(11, 61, 43, 0.6); } .tq-plat { margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid rgba(15, 27, 20, 0.1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .tq-plat svg { display: block; } .tq-slide .tq-quote { margin: 0.85rem 0 0; font-weight: 600; } /* ============ The Difference (v3 two-card design) ============ */ .diff-grid { display: grid; gap: clamp(0.9rem, 2vw, 1.4rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 860px) { .diff-grid { grid-template-columns: 1fr 1fr; } } .diff-card { border-radius: 22px; padding: clamp(1.1rem, 2.4vw, 1.6rem); border: 1px solid rgba(20, 40, 30, 0.12); background: #fff; } .diff-card--us { background: linear-gradient(170deg, #0f2a1c 0%, #16512f 100%); border-color: rgba(95, 128, 104, 0.35); box-shadow: 0 26px 60px -34px rgba(11, 61, 43, 0.75); color: #f4fbf1; } .diff-card--them { background: #f6f8f5; box-shadow: none; } .dc-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; } .dc-head h3 { margin: 0; font-size: clamp(1.05rem, 2.8vw, 1.3rem); letter-spacing: -0.01em; } .diff-card--us .dc-head h3 { color: #fff; } .diff-card--them .dc-head h3 { color: #6b7671; } .dc-tag { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .dc-tag--us { background: linear-gradient(135deg, #f2e35a, #cfe04f); color: #101a12; } .dc-tag--them { background: rgba(20, 30, 25, 0.1); color: #6b7671; } .dc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .dc-item { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.55rem 0 0; } .dc-item + .dc-item { border-top: 1px solid rgba(20, 40, 30, 0.09); } .diff-card--us .dc-item + .dc-item { border-top-color: rgba(255, 255, 255, 0.12); } .dc-item div { display: flex; flex-direction: column; gap: 0.12rem; } .dc-item strong { font-size: 1rem; font-weight: 800; } .dc-item span:last-child { font-size: 0.9rem; line-height: 1.45; } .diff-card--us .dc-item span:last-child { color: rgba(244, 251, 241, 0.78); } .diff-card--them .dc-item strong { color: #47514c; } .diff-card--them .dc-item span:last-child { color: #7a8580; } .dc-mark { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.85rem; font-weight: 900; line-height: 1; } .dc-mark--us { background: linear-gradient(135deg, #f2e35a, #cfe04f); color: #101a12; } .dc-mark--them { background: rgba(20, 30, 25, 0.09); color: #8b9591; } .tq-slide { transition: opacity .3s ease, transform .3s ease, visibility .3s; } /* ---- stats tile inside the video testimonial grid ---- */ .tvid-stats{ grid-column: span 1; display:flex; flex-direction:column; justify-content:center; gap:.7rem; padding:1rem .9rem; border-radius:16px; background:linear-gradient(170deg,#0f2a1c 0%,#16512f 100%); border:1px solid rgba(95, 128, 104, .3); box-shadow:0 20px 50px -32px rgba(11,61,43,.7); color:#f4fbf1; text-align:left; } .tvs-head h2{ margin:0; font-size:clamp(.98rem,3.2vw,1.15rem); line-height:1.25; color:#fff; letter-spacing:-.01em; } .tvs-head p{ margin:.35rem 0 0; font-size:.8rem; line-height:1.4; color:rgba(244,251,241,.75); } .tvs-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem .5rem; } .tvs-stat{ display:flex; flex-direction:column; gap:.1rem; } .tvs-num{ font-weight:900; font-size:clamp(1.05rem,4vw,1.35rem); color:#dfeae1; line-height:1.1; } .tvs-num [data-bind]{ color:inherit; } .tvs-lbl{ font-size:.72rem; font-weight:600; color:rgba(244,251,241,.72); line-height:1.25; } @media (min-width:1024px){ .tvid-stats{ grid-column:span 5; flex-direction:row; align-items:center; gap:2rem; padding:1.3rem 1.6rem; } .tvs-head{ flex:1 1 40%; } .tvs-head h2{ font-size:1.25rem; } .tvs-grid{ flex:1 1 60%; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; } .tvs-num{ font-size:1.5rem; } } .tvid-stats .tvs-head h2{ color:#ffffff !important; -webkit-text-fill-color:#ffffff; } .tvid-stats .tvs-head p{ color:rgba(244,251,241,.8) !important; } .tvid-stats .tvs-num, .tvid-stats .tvs-num [data-bind]{ color:#dfeae1 !important; -webkit-text-fill-color:#dfeae1; } .tvid-stats .tvs-lbl{ color:rgba(244,251,241,.78) !important; } .tvid-stats .tvs-head p{ color:#cfe8cf !important; -webkit-text-fill-color:#cfe8cf; opacity:1 !important; } /* ---- complimentary design concept section ---- */ .dc-value{ color:#11705a; white-space:nowrap; } .dc-card{ max-width:880px; margin:0 auto; background:#fff; border:1px solid rgba(17,112,90,.14); border-top:5px solid #11705a; border-radius:22px; padding:1.4rem 1.2rem 1.6rem; box-shadow:0 34px 70px -46px rgba(11,61,43,.45); } .dc-steps{ list-style:none; margin:0 0 1.2rem; padding:0 0 1.1rem; display:grid; gap:.6rem; border-bottom:1px solid rgba(17,112,90,.14); } .dc-steps li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.92rem; color:#2c4a38; font-weight:600; line-height:1.4; } .dc-step-n{ flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:#11705a; color:#dfeae1; font-weight:900; font-size:.8rem; display:grid; place-items:center; } .dc-form{ display:grid; grid-template-columns:1fr; gap:.85rem; } .dc-form .field{ display:flex; flex-direction:column; gap:.3rem; } .dc-form label{ font-size:.82rem; font-weight:800; color:#1f3a2c; } .dc-form input[type=text], .dc-form input[type=email], .dc-form input[type=tel], .dc-form textarea{ width:100%; padding:.75rem .85rem; border-radius:12px; border:1px solid rgba(17,112,90,.25); background:#fbfdfa; font:inherit; color:#12241a; } .dc-form input:focus, .dc-form textarea:focus{ outline:none; border-color:#11705a; box-shadow:0 0 0 3px rgba(17,112,90,.14); } .dc-drop{ position:relative; border:2px dashed rgba(17,112,90,.35); border-radius:14px; background:#f4faf5; padding:1.1rem; text-align:center; } .dc-drop input[type=file]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; } .dc-droplabel{ font-weight:800; color:#11705a; font-size:.92rem; } .dc-submit{ margin-top:.2rem; text-align:center; } .dc-submit .btn{ width:100%; } .dc-note{ margin-top:.6rem; } @media (min-width:720px){ .dc-card{ padding:1.8rem 1.9rem 2rem; } .dc-steps{ grid-template-columns:repeat(3,1fr); gap:1rem; } .dc-form{ grid-template-columns:1fr 1fr; gap:1rem; } .dc-full{ grid-column:1 / -1; } .dc-submit .btn{ width:auto; min-width:320px; } } .dc-note{ max-width:560px; margin-left:auto; margin-right:auto; } /* ---- Us vs Them: aligned comparison board (v9) ---- */ .vsx{ max-width:1000px; margin:0 auto; display:grid; gap:.75rem; } .vsx-legend{ display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.3rem; } .vsx-chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .85rem; border-radius:999px; font-weight:800; font-size:.85rem; } .vsx-chip--us{ background:linear-gradient(135deg,#0f2a1c,#16512f); color:#fff; } .vsx-chip--them{ background:#eef0ee; color:#6b7a70; border:1px solid rgba(0,0,0,.07); } .vsx-chip-tag{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:.15rem .45rem; border-radius:999px; } .vsx-chip--us .vsx-chip-tag{ background:#dfeae1; color:#0f2a1c; } .vsx-chip--them .vsx-chip-tag{ background:#fff; color:#8a9990; border:1px solid rgba(0,0,0,.08); } .vsx-vs{ font-weight:900; color:#8a9990; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; } .vsx-row{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; background:#fff; border:1px solid rgba(17,112,90,.12); border-radius:18px; padding:.85rem .8rem; box-shadow:0 20px 44px -40px rgba(11,61,43,.5); } .vsx-topic{ grid-column:1 / -1; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:900; color:#11705a; } .vsx-cell{ display:flex; gap:.5rem; align-items:flex-start; padding:.7rem .7rem; border-radius:14px; } .vsx-cell strong{ display:block; font-size:.92rem; line-height:1.25; } .vsx-cell span:not(.vsx-mark){ display:block; font-size:.8rem; line-height:1.4; margin-top:.2rem; } .vsx-cell--us{ background:linear-gradient(160deg,#0f2a1c,#16512f); color:#f4fbf1; } .vsx-cell--us strong{ color:#fff; } .vsx-cell--us span:not(.vsx-mark){ color:#cfe8cf; } .vsx-cell--them{ background:#f4f5f4; color:#6b7a70; border:1px dashed rgba(0,0,0,.1); } .vsx-cell--them strong{ color:#5d6b62; text-decoration:line-through; text-decoration-color:rgba(200,60,60,.5); } .vsx-cell--them span:not(.vsx-mark){ color:#8a9990; } .vsx-mark{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:900; margin-top:1px; } .vsx-mark--us{ background:#dfeae1; color:#0f2a1c; } .vsx-mark--them{ background:#fff; color:#c14a4a; border:1px solid rgba(193,74,74,.3); } @media (min-width:820px){ .vsx-row{ grid-template-columns:170px 1fr 1fr; align-items:stretch; gap:.9rem; padding:.7rem .9rem; } .vsx-topic{ grid-column:auto; display:flex; align-items:center; font-size:.78rem; } .vsx-cell{ padding:.8rem .9rem; } } /* ══════════════════════════════════════════════════════════════ ROUND 13 — one CTA system, 3-step flow, drone build→done flow, testimonial closer tile, livelier design-concept card ══════════════════════════════════════════════════════════════ */ /* ---- 1. ONE primary CTA everywhere: deep emerald + white, lime hairline. Reads on bright or photo backgrounds; the black/lime phone pill stays as the secondary "call" look. ---- */ body .btn-primary, body .btn-yellow, body .site-header .btn-yellow, body .cta-strip .btn-primary, body .final-cta .btn-primary, body .hero-form-wrap button[type="submit"], body .hero-form-wrap .btn-primary, body .dc-submit .btn, body .sticky-book, body .chip-modal__btn--primary { background: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; border: 1px solid rgba(95, 128, 104, 0.55) !important; font-weight: 900 !important; text-shadow: none !important; box-shadow: 0 14px 30px -14px rgba(9, 60, 40, 0.6), inset 0 1px 0 rgba(255,255,255,0.14) !important; } @media (hover: hover) { body .btn-primary:hover, body .btn-yellow:hover, body .dc-submit .btn:hover, body .sticky-book:hover, body .chip-modal__btn--primary:hover { background: linear-gradient(110deg, #43cb86 0%, #1c9767 48%, #0d5238 100%) !important; border-color: #dfeae1 !important; transform: translateY(-1px); } } body .btn-primary:focus-visible, body .btn-yellow:focus-visible { outline: 3px solid #0d5238; outline-offset: 3px; } /* ---- 2. Drone gallery: build → arrow → completed trio ---- */ .aer-flow { display: grid; gap: 12px; } .aer-fig--lead img { aspect-ratio: 16/9; filter: saturate(0.82) contrast(1.02); } .aer-fig--lead { outline: 2px dashed rgba(15, 27, 20, 0.28); outline-offset: 3px; } .aer-flow > .aer-fig--lead + .aer-fig--lead { margin-top: -2px; } @media (min-width: 641px){ .aer-flow { grid-template-columns: repeat(2, minmax(0,1fr)); } .aer-flow > .aer-step { grid-column: 1 / -1; } } .aer-step { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; } .aer-step-line { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(15,27,20,0) 0%, rgba(15,27,20,.22) 60%, rgba(15,27,20,.22) 100%); } .aer-step-line:last-child { background: linear-gradient(270deg, rgba(15,27,20,0) 0%, rgba(15,27,20,.22) 60%, rgba(15,27,20,.22) 100%); } .aer-step-pill { display: inline-flex; align-items: center; gap: .6rem; padding: 9px 18px 9px 12px; border-radius: 999px; background: linear-gradient(180deg, #123a29, #0b2419); color: #f6fbef; font-weight: 900; font-size: clamp(.78rem, 1.7vw, .95rem); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 12px 26px rgba(11, 36, 25, .28); } .aer-step-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: linear-gradient(180deg, #eaf75f, #cfe23f); color: #0d100e; font-size: 1rem; font-weight: 900; line-height: 1; animation: aerStepBob 1.8s ease-in-out infinite; } @keyframes aerStepBob { 0%,100%{ transform: translateY(-2px); } 50%{ transform: translateY(2px); } } @media (prefers-reduced-motion: reduce){ .aer-step-ico { animation: none; } } .aer-grid--done .aer-fig { box-shadow: 0 14px 34px rgba(16, 32, 24, 0.18); border: 2px solid rgba(207, 226, 63, 0.9); } .aer-tag { display: inline-flex; align-items: center; gap: .35rem; } .aer-tag-ico { font-size: .95em; line-height: 1; } .aer-fig .aer-tag--build { background: #ffffff !important; color: #0d100e !important; border: 1px solid rgba(13,16,14,.9) !important; border-bottom-width: 3px !important; } .aer-fig .aer-tag--done { background: linear-gradient(180deg, #eaf75f, #cfe23f) !important; color: #0d100e !important; border: 1px solid rgba(13,16,14,.28) !important; box-shadow: 0 6px 18px rgba(190, 214, 60, .55) !important; } @media (min-width: 641px) { .aer-grid--done { grid-template-columns: repeat(3, minmax(0,1fr)); } } /* ---- 3. How it works: three clean cards ---- */ .flow3 { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: f3; } @media (min-width: 860px) { .flow3 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; } } .flow3-card { position: relative; background: #fff; border: 1px solid rgba(13, 82, 56, 0.14); border-top: 5px solid #0d5238; border-radius: 20px; padding: 2.1rem 1.25rem 1.35rem; box-shadow: 0 26px 60px -40px rgba(11, 61, 43, 0.45); } .f3-num { position: absolute; top: -1.05rem; left: 1.15rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #17825a, #0b4530); color: #dfeae1; font-weight: 900; font-size: 1.05rem; box-shadow: 0 0 0 5px #fff, 0 10px 22px -10px rgba(9,60,40,.6); } .flow3-card h3 { margin: .35rem 0 .5rem; font-size: clamp(1.08rem, 2.4vw, 1.3rem); font-weight: 900; color: #0f1b14; letter-spacing: -.01em; } .flow3-card p { margin: 0; font-size: .95rem; line-height: 1.55; color: #40564a; } /* Material photography is intentionally separate from the written steps. */ .material-gallery { max-width: 1120px; margin: 2rem auto 0; } .material-gallery-track { list-style: none; margin: 0; padding: 0 0 .65rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--cta-green-mid) transparent; } .material-gallery-track li { min-width: 0; } .material-gallery-track img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; border: 1px solid rgba(13,82,56,.12); box-shadow: 0 16px 32px -26px rgba(11,61,43,.55); } @media (min-width: 900px) { .material-gallery-track { grid-auto-flow: initial; grid-template-columns: repeat(6, minmax(0,1fr)); overflow: visible; } } /* ---- 4. Testimonial closer tile ---- */ .tvs-kicker { display: inline-block; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #dfeae1; margin-bottom: .35rem; } .tvs-list { list-style: none; margin: 0 0 .85rem; padding: 0; display: grid; gap: .35rem; } .tvs-list li { position: relative; padding-left: 1.15rem; font-size: .82rem; font-weight: 600; color: #e9f5e6; line-height: 1.4; } .tvs-list li::before { content: "\2713"; position: absolute; left: 0; color: #dfeae1; font-weight: 900; } .tvs-cta { display: grid; gap: .45rem; justify-items: start; } .tvs-next { margin: 0; font-size: .92rem; font-weight: 800; color: #fff; line-height: 1.35; } .tvs-cta .tvs-btn { width: 100%; text-align: center; } .tvs-orcall { font-size: .8rem; color: #cfe8cf; } .tvs-orcall a { color: #dfeae1; font-weight: 800; text-decoration: none; } @media (min-width: 1024px) { .tvid-stats { align-items: stretch; gap: 1.6rem; } .tvs-head, .tvs-mid { flex: 1 1 33%; } .tvs-cta { flex: 0 0 22%; align-content: center; } .tvs-mid .tvs-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ---- 5. Design concept card: more alive ---- */ .dc-card--v2 { background: linear-gradient(180deg, #f4fbf3 0%, #ffffff 42%); border: 1px solid rgba(17, 112, 90, 0.18); border-top: 0; padding-top: 0; overflow: hidden; } .dc-ribbon { margin: 0 -1.2rem 1.15rem; padding: .8rem 1.2rem; background: linear-gradient(120deg, #0b4530 0%, #17825a 55%, #2aa878 100%); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .dc-ribbon-val { background: linear-gradient(180deg, #eaf75f, #cfe23f); color: #0d100e; font-weight: 900; font-size: .82rem; letter-spacing: .02em; padding: .3rem .7rem; border-radius: 999px; } .dc-ribbon-txt { font-size: .84rem; font-weight: 700; color: #eaf7ee; } .dc-card--v2 .dc-steps { border-bottom: 1px dashed rgba(17,112,90,.28); } .dc-card--v2 .dc-steps li { background: #fff; border: 1px solid rgba(17,112,90,.12); border-radius: 14px; padding: .6rem .7rem; box-shadow: 0 10px 24px -22px rgba(11,61,43,.5); } .dc-card--v2 .dc-step-n { background: linear-gradient(160deg, #17825a, #0b4530); } .dc-card--v2 .dc-drop { background: linear-gradient(180deg, #eef8ee, #f9fdf8); border-color: rgba(17,112,90,.45); } @media (min-width: 720px) { .dc-card--v2 .dc-steps { grid-template-columns: repeat(3, minmax(0,1fr)); } .dc-card--v2 .dc-form { grid-template-columns: repeat(2, minmax(0,1fr)); } .dc-card--v2 .dc-full { grid-column: 1 / -1; } } /* stats tile: no overflow on phones */ .tvid-stats { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 1023px) { .tvid-stats { grid-column: 1 / -1; } } .tvs-cta { width: 100%; justify-items: stretch; } .tvid-stats .tvs-next { color: #ffffff !important; -webkit-text-fill-color: #ffffff; } .tvid-stats .tvs-btn { width: 100%; } /* ---- How it works v2: photo steps + material samples ---- */ .proc2 { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 900px) { .proc2 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; } } .proc2-card { position: relative; background: #fff; border: 1px solid rgba(13,82,56,.14); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -42px rgba(11,61,43,.5); display: flex; flex-direction: column; } .proc2-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #eef3ec; } .proc2-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .proc2-step { position: absolute; top: .7rem; left: .7rem; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .6rem; border-radius: 999px; background: rgba(9,32,22,.82); color: #eaf75f; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(6px); } .proc2-body { padding: 1.1rem 1.15rem 1.3rem; display: grid; gap: .5rem; } .proc2-body h3 { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.32rem); font-weight: 900; color: #0f1b14; letter-spacing: -.01em; } .proc2-body p { margin: 0; font-size: .95rem; line-height: 1.55; color: #40564a; } .proc2-list { list-style: none; margin: .15rem 0 0; padding: 0; display: grid; gap: .3rem; } .proc2-list li { position: relative; padding-left: 1.2rem; font-size: .86rem; font-weight: 650; color: #24382d; line-height: 1.45; } .proc2-list li::before { content: "\2713"; position: absolute; left: 0; color: #17825a; font-weight: 900; } .samples2 { margin: 2.4rem auto 0; max-width: 1120px; background: linear-gradient(165deg, #0e3325, #071b13); border-radius: 26px; padding: 1.6rem 1.15rem 1.5rem; box-shadow: 0 40px 80px -50px rgba(7,32,22,.85); } @media (min-width: 900px) { .samples2 { padding: 2rem 1.9rem 1.9rem; } } .samples2-head { text-align: center; max-width: 640px; margin: 0 auto 1.2rem; } .samples2-kicker { display: inline-block; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #eaf75f; margin-bottom: .4rem; } .samples2-head h3 { margin: 0 0 .45rem; color: #fff; font-size: clamp(1.25rem, 3vw, 1.7rem); font-weight: 900; letter-spacing: -.015em; } .samples2-head p { margin: 0; color: #cfe2d6; font-size: .95rem; line-height: 1.55; } .samples2-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 700px) { .samples2-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } } .samples2-grid li { border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(234,247,95,.16); } .samples2-grid figure { margin: 0; } .samples2-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .samples2-grid figcaption { padding: .5rem .55rem .6rem; font-size: .74rem; font-weight: 800; letter-spacing: .02em; color: #eef7e9; text-align: center; } .samples2-foot { margin: 1.2rem auto 0; text-align: center; } .samples2-foot p { margin: 0 0 .8rem; color: #dcecd9; font-size: .92rem; font-weight: 650; } /* ---- light panels: replace dark-green blocks with the page's light section wash ---- */ .samples2 { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; border: 1px solid rgba(20, 40, 30, 0.10); box-shadow: 0 26px 60px -46px rgba(11, 61, 43, 0.35) !important; } .samples2-kicker { color: #14603f !important; } .samples2-head h3 { color: #0f1b14 !important; } .samples2-head p, .samples2-foot p { color: #40564a !important; } .samples2-grid li { background: #fff !important; border-color: rgba(20, 40, 30, 0.12) !important; } .samples2-grid figcaption { color: #24382d !important; } .tvid-stats { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; border-color: rgba(20, 40, 30, 0.12) !important; box-shadow: 0 20px 50px -40px rgba(11, 61, 43, 0.35) !important; color: #14251b !important; } .tvs-head h2 { color: #0f1b14 !important; } .tvs-head p { color: #40564a !important; } .diff-card--us { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; border-color: rgba(20, 40, 30, 0.14) !important; box-shadow: 0 26px 60px -44px rgba(11, 61, 43, 0.35) !important; color: #14251b !important; } .diff-card--us .dc-step-lbl, .diff-card--us h3, .diff-card--us p, .diff-card--us li { color: #1a2c22 !important; } .vs-head, .vs-cat, .vsx-cell--us { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; color: #0f1b14 !important; } .vs-head > span, .vs-cat { border-color: rgba(20,40,30,.12); } /* ---- light surface for the former dark green sections ---- */ [data-section="gallery"], [data-section="reviews"], [data-section="testimonials"], [data-section="hero-testimonials"] { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; } [data-section="gallery"] h2, [data-section="gallery"] h3, [data-section="gallery"] p, [data-section="hero-testimonials"] h2, [data-section="hero-testimonials"] h3, [data-section="hero-testimonials"] p, [data-section="hero-testimonials"] li, [data-section="reviews"] h2, [data-section="reviews"] h3, [data-section="reviews"] p { color: #0f1b14 !important; -webkit-text-fill-color: #0f1b14; } [data-section="gallery"] .section-head p, [data-section="hero-testimonials"] .section-head p, [data-section="reviews"] .section-head p { color: #40564a !important; -webkit-text-fill-color: #40564a; } [data-section="gallery"] .kicker, [data-section="hero-testimonials"] .kicker, [data-section="reviews"] .kicker { color: #11705a !important; -webkit-text-fill-color: #11705a; } .testimonials-strip::before { display: none !important; } .testimonials-strip::after { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; backdrop-filter: none !important; } .site-footer--v2 .footer-shell { background: linear-gradient(180deg, #eef1e7 0%, #f5f6f1 100%) !important; border: 1px solid rgba(20, 40, 30, 0.12); color: #24382d !important; box-shadow: 0 26px 60px -46px rgba(11, 61, 43, 0.35) !important; } .site-footer--v2 .footer-shell h3, .site-footer--v2 .footer-shell strong, .site-footer--v2 .footer-shell a { color: #0f1b14 !important; } .site-footer--v2 .footer-shell p, .site-footer--v2 .footer-shell small, .site-footer--v2 .footer-shell li, .site-footer--v2 .footer-shell span { color: #40564a !important; } .site-footer--v2 .footer-logo { filter: brightness(0) saturate(0) opacity(0.88) !important; } .site-footer--v2 .footer-lic { background: rgba(17,112,90,.08) !important; border-color: rgba(17,112,90,.28) !important; } .site-footer--v2 .footer-shell svg { color: #11705a !important; stroke: currentColor; } .site-footer--v2 .footer-col li::marker { color: #11705a; } /* ---- Mobile galleries: auto-moving 2-row photo wall (no manual scrolling) ---- */ @media (max-width: 860px) { .strip-viewport { overflow: hidden !important; scroll-snap-type: none !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .strip-track { display: grid !important; grid-auto-flow: column; grid-auto-columns: 30vw; grid-template-rows: repeat(3, 1fr); gap: 0.34rem !important; width: max-content !important; animation: strip-scroll 42s linear infinite !important; } .strip-track .gallery-item { flex: none !important; max-width: none !important; display: block !important; scroll-snap-align: none !important; } .strip-track .gallery-link { aspect-ratio: 1 / 1; border-radius: 12px; box-shadow: 0 10px 22px rgba(16, 35, 28, 0.18); } .strip-hint { display: none !important; } } /* ---- ROUND: centered section copy, brighter $750 tag, clearer Us-vs-Them ---- */ .tvid-stats .tvs-head, .tvid-stats .tvs-head h2, .tvid-stats .tvs-head p, .tvid-stats .tvs-kicker { text-align: center; } .tvid-stats .tvs-head { display: block; } .tvid-stats .tvs-cta { text-align: center; } .section-head.centered, .section-head.centered h2, .section-head.centered p { text-align: center; } #preview-heading { text-align: center; } .dc-value { color: #0f1b14 !important; background: linear-gradient(180deg, #f0ff7a, #cfe04f); padding: 0.04em 0.34em; border-radius: 0.38em; box-shadow: 0 6px 16px -12px rgba(11, 61, 43, 0.6); } .dc-card--v2 .dc-form { margin-top: 0.4rem; } /* Us vs Them: bigger labels, clearer sides */ .vsx-legend { gap: 0.75rem; margin-bottom: 0.6rem; } .vsx-chip { font-size: 0.98rem; padding: 0.6rem 1rem; } .vsx-vs { font-size: 0.95rem; color: #2c4a38; } .vsx-topic { font-size: 0.86rem !important; letter-spacing: 0.1em; color: #0f2a1c !important; } .vsx-cell strong { font-size: 1.04rem !important; } .vsx-cell span:not(.vsx-mark) { font-size: 0.92rem !important; } @media (min-width: 820px) { .vsx-topic { font-size: 0.98rem !important; letter-spacing: 0.04em; text-transform: none; } .vsx-row { grid-template-columns: 200px 1fr 1fr; } } @media (max-width: 819px) { .vsx-row { grid-template-columns: 1fr; gap: 0.5rem; } .vsx-cell { padding: 0.8rem 0.85rem; } .vsx-cell::before { order: -1; flex: 0 0 auto; align-self: flex-start; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.12em; padding: 0.22rem 0.45rem; border-radius: 999px; } .vsx-cell--us::before { content: "US"; background: #dfeae1; color: #0f2a1c; } .vsx-cell--them::before { content: "THEM"; background: #fff; color: #8a9990; border: 1px solid rgba(0,0,0,.1); } } /* Us column must stay high-contrast dark green with light text */ .vsx-cell--us { background: linear-gradient(160deg, #0f2a1c, #16512f) !important; } .vsx-cell--us strong { color: #ffffff !important; -webkit-text-fill-color: #ffffff; } .vsx-cell--us span:not(.vsx-mark) { color: #d6ecd8 !important; -webkit-text-fill-color: #d6ecd8; } .vsx-cell--them { background: #f4f5f4 !important; } .vsx-cell--them strong { color: #56635b !important; -webkit-text-fill-color: #56635b; } .vsx-cell--them span:not(.vsx-mark) { color: #7f8b83 !important; -webkit-text-fill-color: #7f8b83; } @media (max-width: 819px) { .vsx-legend { flex-direction: column; gap: 0.4rem; } .vsx-legend .vsx-chip { width: 100%; justify-content: center; } } /* "Why Homeowners Pick Us" tile now sits on the light wash — dark type */ .tvid-stats .tvs-kicker { color: #11705a !important; -webkit-text-fill-color: #11705a; } .tvid-stats .tvs-head h2 { color: #0f1b14 !important; -webkit-text-fill-color: #0f1b14; } .tvid-stats .tvs-head p { color: #3d5147 !important; -webkit-text-fill-color: #3d5147; } .tvid-stats .tvs-list li { color: #1f3a2c !important; -webkit-text-fill-color: #1f3a2c; } .tvid-stats .tvs-num, .tvid-stats .tvs-num [data-bind] { color: #11705a !important; -webkit-text-fill-color: #11705a; } .tvid-stats .tvs-lbl { color: #4a5c52 !important; -webkit-text-fill-color: #4a5c52; } .tvid-stats .tvs-next { color: #0f1b14 !important; -webkit-text-fill-color: #0f1b14; font-weight: 800; } .tvid-stats .tvs-orcall { color: #3d5147 !important; } .tvid-stats .tvs-orcall a { color: #11705a !important; -webkit-text-fill-color: #11705a; } /* ---- Headline: keep the tagline crisp, no glow pulse ---- */ .hero-h1 .h1-tag { animation: h1-rise .85s .36s cubic-bezier(0.16,1,0.3,1) forwards !important; text-shadow: 0 2px 8px rgba(0,0,0,.38) !important; } /* ---- Mobile galleries: denser 3-row photo wall, more work visible at a glance ---- */ @media (max-width: 860px) { .strip-track .gallery-link { border-radius: 10px; box-shadow: 0 6px 14px rgba(16,35,28,.16); } .strip-track .gallery-item figcaption, .strip-track .gallery-item .gallery-cap { display: none !important; } .strip-viewport { padding-block: 0.1rem; } } /* ================= Turn every remaining yellow CTA into the green gradient ============ */ body .btn-lock, body .offer-section--v8 .btn-lock, body .btn-primary.cta-pulse, body .btn-yellow.btn-lock, body .footer-cta, body .gbp-card-cta { background: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; background-image: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; border: 1px solid rgba(95, 128, 104, 0.55) !important; text-shadow: none !important; box-shadow: 0 14px 30px -14px rgba(9, 60, 40, 0.6), inset 0 1px 0 rgba(255,255,255,0.14) !important; } @media (hover: hover) { body .btn-lock:hover, body .btn-primary.cta-pulse:hover, body .footer-cta:hover { background-image: linear-gradient(110deg, #43cb86 0%, #1c9767 48%, #0d5238 100%) !important; transform: translateY(-1px); } } /* ================= Footer contact bubble ============ */ .footer-col--contact { text-align: center; } .footer-col--contact .footer-col-title { margin-bottom: 0.35rem; } .footer-col--contact .footer-line { justify-content: center; } .footer-hours-week { display: grid; gap: 0.15rem; margin: 0.55rem auto 0.7rem; max-width: 20rem; font-size: 0.92rem; width: 100%; } .footer-hours-week > div { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.12rem 0; border-bottom: 1px solid rgba(20, 60, 40, 0.1); } .footer-hours-week > div:last-child { border-bottom: 0; } .footer-col--contact .footer-areas { margin: 0.5rem auto 0.9rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.55rem; list-style: none; padding: 0; } .footer-col--contact .footer-areas li { font-size: 0.86rem; padding: 0.18rem 0.6rem; border-radius: 999px; border: 1px solid rgba(20, 60, 40, 0.16); } .footer-col--contact .footer-cta { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto; } .footer-base--in { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(20, 60, 40, 0.12); } .footer-base--in .footer-legal { display: inline-flex; gap: 1rem; justify-content: center; } body [data-slot="lead-form"] .lead-form .btn-primary, body [data-slot="project-preview"] .btn-primary, body [data-slot="lead-form"] .btn-primary { background: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; border: 1px solid rgba(95, 128, 104, 0.55) !important; } .footer-shell > .footer-base--in { grid-column: 1 / -1; width: 100%; } /* ============ Aerial: big arrow between build and finished ============ */ .aer-step--arrow { display: flex; align-items: center; justify-content: center; margin: 0.6rem 0 0.9rem; } .aer-step--arrow .aer-arrow { display: inline-flex; align-items: center; justify-content: center; width: clamp(58px, 12vw, 82px); height: clamp(58px, 12vw, 82px); border-radius: 999px; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1; font-weight: 700; color: #17240c; background: linear-gradient(160deg, #dfeae1 0%, #c3d5c8 100%); box-shadow: 0 16px 32px -18px rgba(60, 80, 10, 0.65); animation: aer-bob 2.4s ease-in-out infinite; } @keyframes aer-bob { 0%,100%{transform:translateY(-4px)} 50%{transform:translateY(5px)} } @media (prefers-reduced-motion: reduce) { .aer-step--arrow .aer-arrow { animation: none; } } /* Each drone project reads as its own card */ .aer-group--card { background: #ffffff; border: 1px solid rgba(20, 50, 35, 0.12); border-radius: clamp(16px, 2.2vw, 24px); padding: clamp(1rem, 2.6vw, 1.75rem); box-shadow: 0 24px 50px -40px rgba(11, 61, 43, 0.45); } .aer-group--card + .aer-group--card { margin-top: clamp(1.4rem, 3.4vw, 2.4rem); } .aer-group--card .aer-group-title { text-align: center; margin: 0 0 0.9rem; font-size: clamp(1.05rem, 2.4vw, 1.3rem); } /* ============ How It Works: small material tiles ============ */ .material-gallery--tiles { margin: 0 auto 1.2rem; max-width: 760px; } .material-gallery--tiles .material-gallery-track { display: grid !important; grid-auto-flow: row !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0.5rem; overflow: visible !important; list-style: none; padding: 0; margin: 0; } .material-gallery--tiles .material-gallery-track img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; min-width: 0; } @media (min-width: 700px) { .material-gallery--tiles .material-gallery-track { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } .process-lede { text-align: center; max-width: 44rem; margin: 0 auto 1.5rem; color: #40564a; } /* ============ Review carousel name ============ */ .tq-name { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.7rem; text-align: center; align-items: center; } .tq-name strong { font-size: 1rem; } .tq-name span { font-size: 0.85rem; opacity: 0.72; } .footer-email { word-break: break-word; } /* ═══════════ Always-visible license pill in the pinned header ═══════════ */ .site-header.header-hidden { transform: none !important; opacity: 1 !important; pointer-events: auto !important; } .header-license { display: inline-flex !important; align-items: center; gap: 0.4rem; margin-left: 0.6rem; padding: 0.34rem 0.7rem; border-radius: 999px; border: 1px solid rgba(25, 40, 20, 0.12); background: linear-gradient(180deg, #f7fbe9 0%, #eef6d8 100%); color: #1d2a13; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.005em; line-height: 1.1; white-space: nowrap; } .header-license .icon { color: #2f7d4f; flex: none; } .header-license strong { font-weight: 800; } @media (max-width: 1024px) { .header-license .hl-long { display: none; } } @media (max-width: 620px) { .header-license { margin-left: 0.4rem; padding: 0.26rem 0.5rem; font-size: 0.68rem; gap: 0.28rem; } .header-license .icon { width: 13px; height: 13px; } } @media (max-width: 400px) { .header-license { font-size: 0.62rem; padding: 0.22rem 0.42rem; } } /* Footer contact rows: email + two phone lines, simple and left-aligned */ .footer-contact-list { display: grid; gap: 0.15rem; margin: 1rem 0 0.4rem; text-align: left; justify-items: start; } .footer-contact-row { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0; min-height: 40px; color: var(--heading); font-weight: 800; font-size: 1rem; text-decoration: none; word-break: break-word; } .footer-contact-row svg { flex: none; color: #2f7d4f; } .footer-contact-row:hover { text-decoration: underline; } .footer-contact-list a:first-child { font-size: 0.92rem; font-weight: 700; } /* ══════════════ Header CTA: match the sticky bar call button ══════════════ */ body .site-header .header-cta, body .site-header .btn-yellow.header-cta { background: linear-gradient(180deg, #1b211c, #0a0d0b) !important; color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: 0 8px 20px -12px rgba(6,10,8,0.85), inset 0 1px 0 rgba(255,255,255,0.16) !important; animation: none !important; } @media (hover: hover) { body .site-header .header-cta:hover { filter: brightness(1.08); } } /* ---- Round 20: every "Get My Free … Quote" section CTA uses the green gradient ---- */ body .section-cta .btn-ink, body .section-cta .btn.btn-ink { background: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; border: 1px solid rgba(95, 128, 104, 0.55) !important; font-weight: 900 !important; text-shadow: none !important; box-shadow: 0 14px 30px -14px rgba(9, 60, 40, 0.6), inset 0 1px 0 rgba(255,255,255,0.14) !important; } @media (hover: hover) { body .section-cta .btn-ink:hover { filter: brightness(1.05); transform: translateY(-1px); } } /* ---- Round 20b: call-first section CTAs ---- */ body .section-cta { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } body .section-call-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; } body .section-call-btn .section-call-ico { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; } body .section-cta-alt { font-size: 0.9rem; font-weight: 700; color: #14532d; text-decoration: underline; text-underline-offset: 3px; text-align: center; } body .section-cta-alt:hover { color: #0a7d68; } /* ══════════════════════════════════════════════════════════════ ROUND 21 — one CTA system: green-gradient "Call" + ghost "Book My Free Visit" (same palette as the consultation modal) ══════════════════════════════════════════════════════════════ */ /* Ghost book-a-visit button, matches .chip-modal__btn--ghost */ body .btn-visit-cta, body .sticky-book, body .site-header .header-cta, body .footer-cta { background: #f3f8ef !important; color: #145c37 !important; -webkit-text-fill-color: #145c37; border: 1.5px solid rgba(20, 92, 55, 0.4) !important; box-shadow: none !important; font-weight: 800 !important; text-shadow: none !important; animation: none !important; } body .btn-visit-cta { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.8rem 1.5rem; font-size: 1rem; text-decoration: none; } @media (hover: hover) { body .btn-visit-cta:hover, body .sticky-book:hover, body .site-header .header-cta:hover, body .footer-cta:hover { background: #e6f2e2 !important; border-color: rgba(20, 92, 55, 0.7) !important; filter: none; } } /* Header phone pill + sticky call: the shared CTA green gradient */ body .header-phone, body .header-phone.cta-glow, body .sticky-bar--v2 .sticky-call { background: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; border: 1px solid rgba(95, 128, 104, 0.55) !important; box-shadow: 0 14px 30px -14px rgba(9, 60, 40, 0.6), inset 0 1px 0 rgba(255,255,255,0.14) !important; color: #fff !important; } body .header-phone .icon-wrap { background: rgba(255,255,255,0.16) !important; box-shadow: none !important; } body .header-phone .icon-wrap svg { stroke: #fff !important; color: #fff !important; } @media (hover: hover) { body .sticky-bar--v2 .sticky-call:hover { filter: brightness(1.06); background: linear-gradient(110deg, var(--cta-green-start) 0%, var(--cta-green-mid) 48%, var(--cta-green-end) 100%) !important; } } /* ---- Material samples: 3 per row, two rows (no horizontal scroll) ---- */ .material-gallery--rows3 { max-width: 900px; margin: 1.5rem auto 1.75rem; } .material-gallery--rows3 .material-gallery-track { grid-auto-flow: row !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-columns: auto !important; overflow: visible !important; gap: 10px; padding-bottom: 0; } /* ---- Interleaved review duo: one video + one written review ---- */ .revduo { padding: 1.5rem 0 2.25rem; } .revduo-grid { display: grid; gap: 14px; align-items: stretch; max-width: 1020px; margin: 0 auto; } @media (min-width: 820px) { .revduo-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 20px; } } .revduo-grid--solo { grid-template-columns: 1fr; max-width: 420px; } @media (min-width: 820px) { .revduo-grid--solo { grid-template-columns: 1fr; max-width: 440px; } } .revduo-grid--solo .revduo-video video { aspect-ratio: 9 / 13; max-height: 430px; } .revduo-video, .revduo-quote { margin: 0; background: #fff; border: 1px solid rgba(13,82,56,.12); border-radius: 18px; box-shadow: 0 22px 40px -30px rgba(11,61,43,.55); overflow: hidden; } .revduo-video video { display: block; width: 100%; aspect-ratio: 9 / 12; object-fit: cover; max-height: 430px; background: #0d1c14; } .revduo-video figcaption { padding: .65rem .85rem .8rem; font-size: .82rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #0f1b14; text-align: center; } .revduo-quote { display: flex; flex-direction: column; justify-content: center; gap: .7rem; padding: 1.25rem 1.25rem 1.4rem; } .revduo-top { display: flex; align-items: center; gap: .6rem; } .revduo-face { width: 46px; height: 46px; border-radius: 999px; object-fit: cover; flex: none; } .revduo-meta { display: flex; flex-direction: column; line-height: 1.2; } .revduo-stars { color: #f2b01e; font-size: .95rem; letter-spacing: .06em; } .revduo-verified { font-size: .72rem; font-weight: 700; color: #5d7369; } .revduo-plat { margin-left: auto; display: inline-flex; } .revduo-quote blockquote { margin: 0; font-size: clamp(.98rem, 2.4vw, 1.12rem); line-height: 1.55; color: #16281f; font-weight: 600; } .revduo-quote figcaption { display: flex; flex-direction: column; font-size: .84rem; color: #4b6357; } .revduo-quote figcaption strong { color: #0f1b14; font-size: .92rem; } /* Stats-only variant of the old video row */ .tvid-row--stats { display: block !important; } /* ---- Before/After: smaller cards + smaller tag pills ---- */ [data-section="before-after"] .ba-tag { font-size: 0.6rem !important; padding: 0.2rem 0.45rem !important; top: 0.5rem !important; left: 0.5rem !important; letter-spacing: .06em !important; } [data-section="before-after"] .ba-card { border-radius: 16px !important; } [data-section="before-after"] .ba-meta { padding: 0.6rem 0.8rem !important; gap: 0.2rem 0.6rem !important; } [data-section="before-after"] .ba-meta strong { font-size: 0.9rem !important; } [data-section="before-after"] .ba-meta span { font-size: 0.78rem !important; } @media (min-width: 900px) { [data-section="before-after"] .ba-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1rem !important; } } /* Offer lock-in CTA: single white call button */ body .offer-lock .btn-lock-white { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; background: linear-gradient(180deg, #ffffff, #f4f6f3) !important; background-image: linear-gradient(180deg, #ffffff, #f4f6f3) !important; color: #0f1b14 !important; -webkit-text-fill-color: #0f1b14; border: 1px solid rgba(15,27,20,.16) !important; box-shadow: 0 16px 32px -18px rgba(9,40,26,.55), inset 0 1px 0 #fff !important; font-weight: 900; } @media (hover: hover) { body .offer-lock .btn-lock-white:hover { background-image: linear-gradient(180deg,#ffffff,#eef2ec) !important; transform: translateY(-1px); } } /* Keep footer email on one line */ .footer-contact-row[href^="mailto:"] { white-space: nowrap; } .footer-contact-row[href^="mailto:"] span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; } @media (max-width: 420px) { .footer-contact-row[href^="mailto:"] span { font-size: 0.78rem; letter-spacing: -0.01em; } } /* ---------- Unified review avatars (carousel + duo cards) ---------- */ img.tq-face, img.revduo-face { flex: none; display: block; width: 56px; height: 56px; aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; object-position: 50% 25%; background: #e7ece8; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(22, 92, 51, 0.16), 0 3px 12px rgba(15, 27, 20, 0.16); } img.tq-face { margin: 0 auto 0.7rem; } .tq-top img.tq-face { margin: 0; } @media (max-width: 640px) { img.tq-face, img.revduo-face { width: 48px; height: 48px; } } /* ---------- Original yellow-green telephone icon on every call CTA ---------- */ a[href^="tel:"]:not(.footer-contact-row) svg:not(.geo-pin-sm), a[href^="tel:"]:not(.footer-contact-row) .icon-wrap svg { stroke: var(--lime-500) !important; color: var(--lime-500) !important; fill: none !important; } /* footer contact phone rows keep their original green icon */ .footer-contact-row[href^="tel:"] svg { stroke: #2f7d4f !important; color: #2f7d4f !important; } /* ---------- Breathing motion on every CTA button ---------- */ @keyframes cta-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.028); } } @keyframes cta-breathe-glow { 0%, 100% { box-shadow: 0 6px 18px rgba(15, 27, 20, 0.18), 0 0 0 0 rgba(95, 128, 104, 0.45); } 50% { box-shadow: 0 12px 30px rgba(15, 27, 20, 0.26), 0 0 0 10px rgba(95, 128, 104, 0); } } body a.btn, body button.btn, body a.header-phone, body a.sticky-call, body button.chip-cta { animation: cta-breathe 2.6s ease-in-out infinite, cta-breathe-glow 2.6s ease-in-out infinite !important; will-change: transform, box-shadow; } /* stagger so the page doesn't pulse in unison */ body a.btn:nth-of-type(even), body button.btn:nth-of-type(even), body button.chip-cta:nth-of-type(even) { animation-delay: 0.85s, 0.85s !important; } body a.sticky-call { animation-delay: 0.4s, 0.4s !important; } @keyframes cta-breathe-glow-strong { 0%, 100% { box-shadow: 0 12px 30px rgba(15, 27, 20, 0.3), 0 0 22px rgba(95, 128, 104, 0.55), 0 0 0 0 rgba(95, 128, 104, 0.6); } 50% { box-shadow: 0 18px 44px rgba(15, 27, 20, 0.38), 0 0 34px rgba(95, 128, 104, 0.85), 0 0 0 14px rgba(95, 128, 104, 0); } } body a.btn:hover, body button.btn:hover, body a.header-phone:hover, body a.sticky-call:hover, body button.chip-cta:hover, body .site-header a.header-phone.cta-glow:hover, body .site-header a.btn.header-cta:hover, body .sticky-bar--v2 a.btn.sticky-call:hover, body a.btn.cta-glow:hover, body a.btn.cta-pulse:hover, body a.btn.btn-lg:hover, body button.btn.btn-lg:hover { animation: cta-breathe 1.9s ease-in-out infinite, cta-breathe-glow-strong 1.9s ease-in-out infinite !important; filter: brightness(1.06) saturate(1.05); } @media (prefers-reduced-motion: reduce) { body a.btn, body button.btn, body a.header-phone, body a.sticky-call, body button.chip-cta { animation: none !important; } } /* breathing motion: win over per-component animation resets */ body .site-header a.header-phone.cta-glow, body .site-header a.btn.header-cta, body .sticky-bar--v2 a.btn.sticky-call, body a.btn.cta-glow, body a.btn.cta-pulse, body a.btn.btn-lg, body button.btn.btn-lg { animation: cta-breathe 2.6s ease-in-out infinite, cta-breathe-glow 2.6s ease-in-out infinite !important; } @media (prefers-reduced-motion: reduce) { body .site-header a.header-phone.cta-glow, body .site-header a.btn.header-cta, body .sticky-bar--v2 a.btn.sticky-call, body a.btn.cta-glow, body a.btn.cta-pulse, body a.btn.btn-lg, body button.btn.btn-lg { animation: none !important; } } /* ══════════════ Sticky bar CTAs: stronger, visible breathing ══════════════ */ @keyframes sticky-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.045); } } @keyframes sticky-breathe-glow { 0%, 100% { box-shadow: 0 8px 20px rgba(15, 27, 20, 0.28), 0 0 0 0 rgba(95, 128, 104, 0.55); } 50% { box-shadow: 0 16px 34px rgba(15, 27, 20, 0.34), 0 0 0 12px rgba(95, 128, 104, 0); } } body .sticky-bar--v2 a.btn.sticky-call, body .sticky-bar--v2 a.btn.sticky-book, body .sticky-bar--v2 a.btn.sticky-quote, body .sticky-bar--v2 button.btn.sticky-book, body .sticky-bar--v2 button.btn.sticky-quote { animation: sticky-breathe 2.2s ease-in-out infinite, sticky-breathe-glow 2.2s ease-in-out infinite !important; will-change: transform, box-shadow; } body .sticky-bar--v2 a.btn.sticky-book, body .sticky-bar--v2 a.btn.sticky-quote, body .sticky-bar--v2 button.btn.sticky-book, body .sticky-bar--v2 button.btn.sticky-quote { animation-delay: 1.1s, 1.1s !important; } @media (hover: hover) { body .sticky-bar--v2 a.btn.sticky-call:hover, body .sticky-bar--v2 a.btn.sticky-book:hover, body .sticky-bar--v2 a.btn.sticky-quote:hover { animation: sticky-breathe 1.5s ease-in-out infinite, cta-breathe-glow-strong 1.5s ease-in-out infinite !important; } } @media (prefers-reduced-motion: reduce) { body .sticky-bar--v2 a.btn.sticky-call, body .sticky-bar--v2 a.btn.sticky-book, body .sticky-bar--v2 a.btn.sticky-quote, body .sticky-bar--v2 button.btn.sticky-book, body .sticky-bar--v2 button.btn.sticky-quote { animation: none !important; } } /* Sticky bar: only the "Call Now" button breathes; the secondary buttons stay still. */ body .sticky-bar--v2 a.btn.sticky-book, body .sticky-bar--v2 a.btn.sticky-quote, body .sticky-bar--v2 button.btn.sticky-book, body .sticky-bar--v2 button.btn.sticky-quote, body .sticky-bar--v2 a.btn.sticky-book:hover, body .sticky-bar--v2 a.btn.sticky-quote:hover, body .sticky-bar--v2 button.btn.sticky-book:hover, body .sticky-bar--v2 button.btn.sticky-quote:hover { animation: none !important; transform: none !important; will-change: auto; } /* Lower sticky "Call Now" stays completely still. */ body .sticky-bar--v2 a.btn.sticky-call, body .sticky-bar--v2 a.sticky-call, body .sticky-bar--v2 a.btn.sticky-call:hover, body .sticky-bar--v2 a.sticky-call:hover { animation: none !important; transform: none !important; will-change: auto; } /* ---------- Hero credential line (license number) ---------- */ .hero-cred { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 0.3rem; margin: 0 0 0.6rem; padding: 0; border: 0; background: none; backdrop-filter: none; color: rgba(255, 255, 255, 0.85); font-size: 0.76rem; font-weight: 650; letter-spacing: 0.01em; } .hero-cred .icon { color: var(--lime-500); flex: none; width: 13px; height: 13px; } .hero-cred-dot { opacity: 0.45; } .hero-cred-lic { font-variant-numeric: tabular-nums; color: var(--lime-500); letter-spacing: 0.02em; } @media (max-width: 600px) { .hero-cred { font-size: 0.68rem; margin-bottom: 0.45rem; gap: 0.26rem; } } /* ---------- Google-style initial avatar for reviews without a photo ---------- */ .tq-initial { flex: none; display: grid; place-items: center; width: 56px; height: 56px; aspect-ratio: 1 / 1; border-radius: 50%; background: linear-gradient(160deg, #2f7d4f, #1d5c39); color: #fff; font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: 0; text-transform: uppercase; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(22, 92, 51, 0.16), 0 3px 12px rgba(15, 27, 20, 0.16); } .tq-top .tq-initial { margin: 0; } @media (max-width: 640px) { .tq-initial { width: 48px; height: 48px; font-size: 1.3rem; } } /* ---- Header phone pill: center the label over the number ---- */ body .header-phone { align-items: center !important; gap: 0.55rem !important; } body .header-phone .header-phone-text { align-items: center !important; text-align: center !important; line-height: 1.15 !important; } body .header-phone .phone-label { display: block !important; letter-spacing: 0.03em !important; } /* ══════════════════════════════════════════════════════════════ Countdown clock — redesigned: mono "flip card" tiles ══════════════════════════════════════════════════════════════ */ .offer-clock .oc-num, .offer-clock--mini .oc-num { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace !important; font-weight: 800 !important; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } body .offer-clock:not(.offer-clock--mini) .oc-num { color: #ff4646 !important; text-shadow: 0 0 18px rgba(255, 70, 70, 0.35) !important; } /* Mini clock: single editorial bar, no boxes around digits */ body .offer-clock--mini { display: inline-flex !important; align-items: stretch !important; gap: 0 !important; padding: 0.7rem 0.35rem 0.25rem !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; margin: 0.9rem auto 0 !important; position: relative; overflow: visible; } body .offer-clock--mini::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 62px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #0f3a25, var(--lime-500)); } body .offer-clock--mini .oc-cell { position: relative; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; min-width: clamp(50px, 12.5vw, 66px); padding: 0.1rem 0.55rem 0 !important; overflow: visible; } body .offer-clock--mini .oc-cell::after { content: ""; position: absolute; right: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(15, 58, 37, 0.12); height: auto; left: auto; } body .offer-clock--mini .oc-cell:last-of-type::after { display: none; } body .offer-clock--mini .oc-num { font-size: clamp(1.4rem, 5.2vw, 1.85rem) !important; color: #d92121 !important; text-shadow: none !important; line-height: 1.05 !important; } body .offer-clock--mini .oc-lbl { margin-top: 0.1rem !important; font-size: 0.5rem !important; font-weight: 800 !important; letter-spacing: 0.18em !important; text-transform: uppercase; color: rgba(15, 58, 37, 0.55) !important; } body .offer-clock--mini .oc-sep { display: none !important; } /* Photo upload preview */ .dc-drop.has-file{ border-style:solid; border-color:rgba(17,112,90,.6); background:#eef8ee; } .dc-drop .dc-preview{ position:relative; z-index:2; display:flex; align-items:center; gap:.7rem; margin-top:.75rem; text-align:left; background:#fff; border:1px solid rgba(17,112,90,.2); border-radius:12px; padding:.5rem .6rem; } .dc-preview-img{ width:56px; height:56px; object-fit:cover; border-radius:9px; flex:0 0 auto; } .dc-preview-meta{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; } .dc-preview-name{ font-size:.85rem; font-weight:800; color:#0f2a1c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dc-preview-size{ font-size:.75rem; color:rgba(15,42,28,.6); font-weight:600; } .dc-preview-remove{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; border:1px solid rgba(17,112,90,.3); background:#fff; color:#11705a; font-size:1.1rem; line-height:1; cursor:pointer; } .dc-preview-remove:hover{ background:#e6f4ec; } /* Mobile design-concept form: keep every grid item inside the card. The generic phone form rule used grid-column on these fields without first giving them min-width:0, so their intrinsic width pushed 28px past the card edge on narrow screens. */ @media (max-width: 719px) { [data-section="project-preview"] .container { width: min(100% - 1.5rem, var(--container)); } .dc-card, .dc-form, .dc-form .field, .dc-drop, .dc-submit { min-width: 0; max-width: 100%; } .dc-card { width: 100%; padding: 0 0.9rem 1.25rem; border-radius: 16px; } .dc-ribbon { margin: 0 -0.9rem 1rem; padding: 0.75rem 0.9rem; } .dc-form { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; } .dc-form .field, .dc-form .dc-full { width: 100% !important; grid-column: auto !important; } .dc-form input[type="text"], .dc-form input[type="email"], .dc-form input[type="tel"], .dc-form textarea, .dc-drop { width: 100%; max-width: 100%; } .dc-drop { padding: 1rem 0.75rem; } .dc-preview-meta { max-width: calc(100% - 98px); } .dc-submit .btn { min-width: 0; white-space: normal; } } /* ---- testimonial videos: fill the card edge-to-edge (no black bars) while keeping the burned-in captions visible — match the clip's own 9:16 box and anchor the crop to the bottom so subtitles are never cut (owner 2026-08-12). ---- */ .revduo-video video, .tvid-video{ object-fit: cover !important; object-position: 50% 100% !important; background: #0b1710; } .revduo-video video{ aspect-ratio: 9 / 16 !important; max-height: 560px !important; } .revduo-grid--solo .revduo-video video{ aspect-ratio: 9 / 16 !important; max-height: 560px !important; } /* main.js refines aspect-ratio/object-position per clip once metadata loads */ .tvid-video{ aspect-ratio: 9 / 16 !important; } /* ---- drone walkthrough: center the whole flow (owner 2026-08-12) ---- */ .aer-group--card .aer-group-title{ justify-content:center; text-align:center; border-left:0; padding-left:0; } .aer-flow{ grid-template-columns:1fr !important; max-width:820px; margin-left:auto; margin-right:auto; justify-items:center; } .aer-flow > *{ width:100%; } .aer-flow > .aer-fig--lead{ max-width:640px; } .aer-flow > .aer-step{ grid-column:1 / -1 !important; justify-self:center; } .aer-grid--done{ max-width:820px; margin-left:auto; margin-right:auto; } /* ---- logo is a click-to-call link (owner 2026-08-12) ---- */ a.header-logo, a.footer-logo-link{ display:inline-flex; align-items:center; cursor:pointer; text-decoration:none; } a.header-logo:focus-visible, a.footer-logo-link:focus-visible{ outline:2px solid #c2d44d; outline-offset:3px; border-radius:8px; } a.header-logo:hover img, a.footer-logo-link:hover img{ transform:scale(1.03); transition:transform .25s ease; } /* ---------- CTA weight: slightly lighter across all buttons ---------- */ .btn, .btn-primary, .btn-glass, .btn-lg, .hero-actions .btn, .sticky-bar .btn, .sticky-bar--v2 .btn, .compare-cta .btn-primary, [data-slot="lead-form"] .lead-form .btn-primary, .section-cta .btn, .btn-lock { font-weight: 500; } /* ---------- Sticky bottom bar: glowing Call Now CTA ---------- NOTE: earlier rules set box-shadow with !important on .sticky-call, and an animation can never beat an !important declaration — so the glow is animated with filter: drop-shadow() plus a pulsing ring pseudo-element instead. */ @keyframes sticky-cta-glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(95, 128, 104, 0.7)); transform: scale(1); } 50% { filter: drop-shadow(0 0 20px rgba(95, 128, 104, 1)) drop-shadow(0 0 40px rgba(95, 128, 104, 0.95)) brightness(1.06); transform: scale(1.035); } } @keyframes sticky-cta-ring { 0% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(95, 128, 104, 0.95); } 70% { opacity: 0; transform: scale(1.1); box-shadow: 0 0 0 20px rgba(95, 128, 104, 0); } 100% { opacity: 0; transform: scale(1.1); box-shadow: 0 0 0 20px rgba(95, 128, 104, 0); } } body .sticky-bar--v2 a.sticky-call, body .sticky-bar a.sticky-call { position: relative; overflow: visible; animation: sticky-cta-glow 1.6s ease-in-out infinite !important; } body .sticky-bar--v2 a.sticky-call::after, body .sticky-bar a.sticky-call::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: sticky-cta-ring 1.6s ease-out infinite; } @media (prefers-reduced-motion: reduce) { body .sticky-bar--v2 a.sticky-call, body .sticky-bar a.sticky-call { animation: none !important; filter: none !important; } body .sticky-bar--v2 a.sticky-call::after, body .sticky-bar a.sticky-call::after { animation: none; display: none; } } /* ── We vs. typical contractor: 3-column comparison table ───────── */ .vstab{ max-width: 980px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(15, 40, 30, .10); box-shadow: 0 18px 46px -28px rgba(15, 40, 30, .35); } .vstab-row{ display: grid; grid-template-columns: 1.05fr 1.15fr 1.05fr; border-top: 1px solid rgba(15, 40, 30, .08); } .vstab-row:first-child{ border-top: 0; } .vstab-cell{ padding: 1.05rem 1.15rem; font-size: .98rem; line-height: 1.45; color: #2c3a34; display: flex; align-items: flex-start; gap: .5rem; } .vstab-cell--us{ background: rgba(14, 106, 73, .05); } .vstab-row--head{ border-top: 0; border-bottom: 2px solid rgba(14, 106, 73, .28); } .vstab-row--head .vstab-cell{ font-weight: 700; color: #f4fbf3; font-size: .82rem; letter-spacing: .085em; text-transform: uppercase; padding-block: .85rem; background: linear-gradient(180deg, #14442f, #0e2f22); align-items: center; } .vstab-row--head .vstab-cell--us{ background: linear-gradient(180deg, #0e6a49, #0b5238); box-shadow: inset 0 -3px 0 rgba(95, 128, 104,.85); color: #fff; } .vstab-row--head .vstab-cell--them{ color: rgba(244,251,243,.72); } .vstab-row--head .vstab-cell strong{ color: inherit; font-weight: 700; } .vstab-cell--topic{ font-weight: 600; color: #12211b; } .vstab-cell--them{ color: #5c6a63; } .vstab-tick{ color: #0e6a49; font-weight: 800; flex: 0 0 auto; line-height: 1.45; } @media (max-width: 640px){ .vstab{ border-radius: 14px; } .vstab-row{ grid-template-columns: 1fr 1fr 1fr; } .vstab-cell{ padding: .8rem .7rem; font-size: .86rem; } .vstab-row--head .vstab-cell{ font-size: .68rem; letter-spacing: .05em; padding: .7rem .55rem; } } /* comparison table: two-line cell content */ .vstab-cell > div{ display: flex; flex-direction: column; gap: .18rem; min-width: 0; } .vstab-cell strong{ font-weight: 600; color: #12211b; line-height: 1.25; } .vstab-cell--them strong{ color: #5c6a63; } .vstab-cell span:not(.vstab-tick){ display: block; } .vstab-cell > div > span{ font-size: .82rem; color: #6b7a72; line-height: 1.4; } .vstab-cell{ align-items: flex-start; } @media (max-width: 640px){ .vstab-cell > div > span{ font-size: .74rem; } } /* ══════════════ Global lime CTA glow (all primary calls-to-action) ══════════════ */ @keyframes cta-lime-glow { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), 0 10px 26px -6px rgba(95, 128, 104,0.42), 0 0 16px 1px rgba(95, 128, 104,0.20); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), 0 16px 40px -6px rgba(95, 128, 104,0.70), 0 0 34px 5px rgba(95, 128, 104,0.40); } } .btn-primary, .dc-form button[type="submit"], .lead-form button[type="submit"], .hero-actions .btn-primary, .sticky-bar--v2 .sticky-call { animation: cta-lime-glow 2.6s ease-in-out infinite; transition: box-shadow .22s ease, transform .16s ease, filter .22s ease; } .btn-primary:hover, .dc-form button[type="submit"]:hover, .lead-form button[type="submit"]:hover, .hero-actions .btn-primary:hover, .sticky-bar--v2 .sticky-call:hover { animation: none; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 20px 48px -8px rgba(95, 128, 104,0.78), 0 0 44px 8px rgba(95, 128, 104,0.48); } .btn-primary:active, .dc-form button[type="submit"]:active, .lead-form button[type="submit"]:active, .hero-actions .btn-primary:active, .sticky-bar--v2 .sticky-call:active { animation: none; transform: translateY(0) scale(0.98); box-shadow: inset 0 2px 6px rgba(0,0,0,0.14), 0 6px 18px -4px rgba(95, 128, 104,0.55), 0 0 22px 3px rgba(95, 128, 104,0.34); } .btn-primary:focus-visible, .dc-form button[type="submit"]:focus-visible, .lead-form button[type="submit"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(95, 128, 104,0.55), 0 16px 40px -8px rgba(95, 128, 104,0.6); } /* header / hero top CTAs get a soft lime halo too */ .header-cta, .header-phone, .hero-teaser, .btn-glass.cta-glow { filter: drop-shadow(0 0 14px rgba(95, 128, 104,0.38)); transition: filter .22s ease, transform .16s ease; } .header-cta:hover, .header-phone:hover, .hero-teaser:hover, .btn-glass.cta-glow:hover { filter: drop-shadow(0 0 22px rgba(95, 128, 104,0.55)); } .header-cta:active, .header-phone:active, .hero-teaser:active { transform: scale(0.98); filter: drop-shadow(0 0 12px rgba(95, 128, 104,0.45)); } @media (prefers-reduced-motion: reduce) { .btn-primary, .dc-form button[type="submit"], .lead-form button[type="submit"], .sticky-bar--v2 .sticky-call { animation: none; } } /* ══════════════ Header (top sticky) CTAs: larger tap targets ══════════════ */ body .site-header .header-phone { padding: 0.72rem 1.15rem !important; border-radius: 999px !important; gap: 0.6rem !important; } body .site-header .header-phone .icon-wrap { width: 2.15rem !important; height: 2.15rem !important; } body .site-header .header-phone .phone-label { font-size: 0.82rem !important; } body .site-header .header-phone .phone-number { font-size: 1.06rem !important; font-weight: 800 !important; } body .site-header .header-cta, body .site-header .btn-yellow.header-cta { padding: 0.78rem 1.35rem !important; font-size: 1.02rem !important; border-radius: 999px !important; } body .site-header .header-cta svg { width: 20px !important; height: 20px !important; } @media (max-width: 720px) { body .site-header .header-phone { padding: 0.68rem 0.95rem !important; } body .site-header .header-phone .icon-wrap { width: 2rem !important; height: 2rem !important; } body .site-header .header-phone .phone-label { font-size: 0.76rem !important; } body .site-header .header-phone .phone-number { font-size: 1rem !important; } body .site-header .header-cta, body .site-header .btn-yellow.header-cta { padding: 0.72rem 1.1rem !important; font-size: 0.97rem !important; } } /* ========================================================================== FLOORING THEME — Sun Development palette: sun orange + deep navy ink on a soft off-white page. Only the token block is retargeted; components follow. ========================================================================== */ .theme-floor { /* Anthropologie deep-green ramp replaces the lime ramp */ --lime-100: #f4f6f8; --lime-200: #e6ecf1; --lime-300: #a9bccd; --lime-400: #3c6289; --lime-500: #16324f; /* Deep green — primary accent */ --lime-600: #122a42; --lime-700: #0e2338; --lime-800: #0e2338; /* AA-safe on white */ --lime-950: #0e2338; /* navy ink on orange surfaces */ --neutral-50: #fbfbfa; --neutral-100: #f4f3f1; --neutral-150: #ecebe8; --neutral-200: #e0dfdb; --neutral-600: #5a5a57; --neutral-800: #16324f; --neutral-900: #16324f; --neutral-950: #091826; --accent-glow: rgba(22, 50, 79, 0.38); --cta-green-start: #3c6289; --cta-green-mid: #16324f; --cta-green-end: #0e2338; --aurora-1: rgba(22, 50, 79, 0.32); --aurora-2: rgba(22, 50, 79, 0.22); --aurora-3: rgba(230, 236, 241, 0.44); } /* Flooring theme: retint the green surfaces that carry literal hexes. */ .theme-floor { --brand-green-500: #16324f; --brand-green-600: #122a42; --brand-green-700: #0e2338; --sc-green: #16324f; --sc-green-dk: #0b1f31; --hero-panel: rgba(11, 31, 49, 0.82); --success: #122a42; } .theme-floor .hero-copy-panel { background: linear-gradient(180deg, rgba(22, 50, 79, 0.86) 0%, rgba(9, 24, 38, 0.92) 100%) !important; } .theme-floor [data-section="gallery"], .theme-floor [data-section="video"], .theme-floor [data-section="process"], .theme-floor [data-section="faq"], .theme-floor [data-section="testimonials"], .theme-floor [data-section="hero-testimonials"], .theme-floor [data-section="video-reviews"], .theme-floor .band-green, .theme-floor .stats-band { background: linear-gradient(168deg, #1b3d5c 0%, #0b1f31 100%) !important; } .theme-floor .geo-band { background: linear-gradient(180deg, #1e4a6f 0%, #16324f 100%) !important; } .theme-floor .vstab-row--head, .theme-floor .offer-section--v8 .oc-title { color: #16324f !important; } .theme-floor .btn-ink, .theme-floor .cta-glow, .theme-floor button[type="submit"], .theme-floor .section-call-btn { background: linear-gradient(180deg, #3c6289 0%, #16324f 55%, #0e2338 100%) !important; color: #ffffff !important; } /* Flooring theme: soft off-white page surface. */ .theme-floor { --page-top: #f2efe8; --page-mid: #f5f3ef; --page-bot: #ffffff; --ink: #242424; --ink-soft: #5a5a5a; } html.theme-floor, .theme-floor body { background: linear-gradient(180deg, var(--page-top) 0%, var(--page-mid) 38%, var(--page-bot) 100%) !important; } .theme-floor [data-section="hero-testimonials"], .theme-floor [data-section="trust-strip"], .theme-floor [data-section="cta-strip"] { background: linear-gradient(180deg, #efeeeb 0%, #f8f7f5 100%) !important; } /* Flooring theme: recolor the hero offer card (hardcoded greens -> navy/orange). */ .theme-floor .hero-offer2 { border-color: rgba(22, 35, 46, 0.16) !important; border-top-color: #16324f !important; background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 24px 54px -28px rgba(16, 26, 35, 0.55) !important; } .theme-floor .hero-offer2 .ho2-title { color: #16324f !important; } .theme-floor .hero-offer2 .ho2-grid li, .theme-floor .hero-offer2 .ho2-grid li:nth-child(odd), .theme-floor .hero-offer2 .ho2-grid li:nth-child(even) { border-color: rgba(22, 35, 46, 0.14) !important; background: #f6f5f3 !important; } .theme-floor .hero-offer2 .ho2-ico { background: #e6ecf1 !important; color: #0e2338 !important; } .theme-floor .hero-offer2 .ho2-tag { color: #0e2338 !important; } .theme-floor .hero-offer2 .ho2-amt { background: none !important; -webkit-text-fill-color: currentColor !important; color: #16324f !important; } .theme-floor .hero-offer2 .ho2-lbl { color: #5a5a57 !important; } .theme-floor .hero-offer2 .ho2-promise--limit { border-color: rgba(22, 35, 46, 0.16) !important; border-left-color: #16324f !important; background: linear-gradient(180deg, rgba(184, 137, 90, 0.20), rgba(22, 50, 79, 0.06)) !important; box-shadow: 0 6px 16px rgba(16, 26, 35, 0.09) !important; color: #16324f !important; } .theme-floor .hero-offer2 .ho2-promise--limit strong { color: #091826 !important; } .theme-floor .hero-offer2 .ho2-promise--limit .ho2-promise-sub { color: #5a5a57 !important; } .theme-floor .hero-offer2 .ho2-link { color: #0e2338 !important; } .theme-floor .hero-offer2 .ho2-link:hover { color: #16324f !important; } .theme-floor .hero-offer2 .ho2-or { color: #0e2338 !important; } .theme-floor .offer-lock .ofl-strong, .theme-floor .offer-lock-nudge strong { color: #3c6289 !important; } /* Flooring theme: legible text on the dark navy bands + orange step badges. */ .theme-floor [data-section="process"] > .container > .section-head > h2, .theme-floor [data-section="process"] > .container > .section-head > .kicker, .theme-floor [data-section="process"] > .container > .section-head > p, .theme-floor [data-section="faq"] > .container > .section-head > h2, .theme-floor [data-section="video"] > .container > .section-head > h2, .theme-floor [data-section="hero-testimonials"] > .container > .section-head > h2 { -webkit-text-fill-color: currentColor !important; background: none !important; } .theme-floor [data-section="process"] > .container > .section-head > h2, .theme-floor [data-section="faq"] > .container > .section-head > h2, .theme-floor [data-section="video"] > .container > .section-head > h2, .theme-floor [data-section="hero-testimonials"] > .container > .section-head > h2 { color: #fbfbfa !important; } .theme-floor [data-section="process"] > .container > .section-head > .kicker, .theme-floor [data-section="faq"] > .container > .section-head > .kicker, .theme-floor [data-section="video"] > .container > .section-head > .kicker { color: #3c6289 !important; } .theme-floor [data-section="process"] > .container > .section-head > p { color: rgba(251, 251, 250, 0.82) !important; } .theme-floor .f3-num { background: linear-gradient(160deg, #3c6289, #0e2338) !important; color: #091826 !important; -webkit-text-fill-color: #091826 !important; } .theme-floor .f3-card { border-top-color: #16324f !important; } .theme-floor .f3-card h3 { color: #16324f !important; } .theme-floor .f3-card p { color: #5a5a57 !important; } /* Flooring theme: comparison table + cookie bar in navy/orange. */ .theme-floor .vstab-row--head { background: linear-gradient(120deg, #16324f, #1b3d5c) !important; } .theme-floor .vstab-row--head .vstab-cell--us { background: linear-gradient(120deg, #0e2338, #16324f) !important; color: #fff !important; } .theme-floor .vstab-cell--us { background: rgba(22, 50, 79, 0.06) !important; } .theme-floor .vstab-tick { color: #0e2338 !important; } .theme-floor .vstab-cell--topic, .theme-floor .vstab-cell strong { color: #16324f !important; } .theme-floor .cookie-btn-accept { background: linear-gradient(135deg, #16324f, #0e2338) !important; } .theme-floor .cookie-consent a { color: #0e2338 !important; } .theme-floor .vstab-row--head .vstab-cell { background: linear-gradient(180deg, #1b3d5c, #16324f) !important; color: #f7f7f5 !important; } .theme-floor .vstab-row--head .vstab-cell--us { background: linear-gradient(180deg, #16324f, #0e2338) !important; box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.45) !important; color: #fff !important; } .theme-floor .vstab-row--head { border-bottom-color: rgba(22, 50, 79, 0.32) !important; } /* Flooring theme: footer accents in navy/orange. */ .theme-floor .site-footer--v2 .footer-lic { background: rgba(22, 50, 79, 0.09) !important; border-color: rgba(22, 50, 79, 0.30) !important; } .theme-floor .site-footer--v2 .footer-shell svg { color: #0e2338 !important; } .theme-floor .footer-contact-row svg { color: #0e2338 !important; } .theme-floor .site-footer--v2 .footer-shell h3, .theme-floor .site-footer--v2 .footer-shell strong, .theme-floor .site-footer--v2 .footer-shell a { color: #16324f !important; } .theme-floor .site-footer--v2 .footer-shell p, .theme-floor .site-footer--v2 .footer-shell small, .theme-floor .site-footer--v2 .footer-shell li, .theme-floor .site-footer--v2 .footer-shell span { color: #5a5a57 !important; } .theme-floor .footer-col--contact .footer-areas li { background: rgba(22, 50, 79, 0.08) !important; border-color: rgba(22, 50, 79, 0.24) !important; color: #16324f !important; } .theme-floor .footer-areas li::before { background: #16324f !important; color: #16324f !important; } .theme-floor .footer-contact-row svg, .theme-floor .footer-contact-row svg * { stroke: #0e2338 !important; color: #0e2338 !important; } /* Flooring theme: clear the leftover lime chips inside the hero offer card. */ .theme-floor .hero-offer2 .ho2-badge, .theme-floor .ho2-badge { background: linear-gradient(135deg, #16324f, #0e2338) !important; color: #f4f6f8 !important; border-color: rgba(22, 50, 79, 0.4) !important; } .theme-floor .hero-offer2 .ho2-promise--limit, .theme-floor .ho2-promise--limit { background: rgba(22, 50, 79, 0.08) !important; border-left-color: #16324f !important; } .theme-floor .hero-offer2 .ho2-promise--limit strong { color: #0e2338 !important; } /* ========================================================================== FLOORING THEME — final palette: deep forest #16324F, warm oak #B8895A, cream #F5F3EF, charcoal #242424, white. ========================================================================== */ .theme-floor { --neutral-50: #ffffff; --neutral-100: #f5f3ef; --neutral-150: #f2efe8; --neutral-200: #e6e1d6; --neutral-600: #5a5a5a; --oak: #b8895a; --oak-dk: #a97b46; } .theme-floor [data-section="hero-testimonials"], .theme-floor [data-section="trust-strip"], .theme-floor [data-section="cta-strip"] { background: linear-gradient(180deg, #f2efe8 0%, #ffffff 100%) !important; } /* Charcoal body copy + headings on the cream surfaces. */ .theme-floor .band-light h2, .theme-floor .band-light h3, .theme-floor .f3-card h3, .theme-floor .vstab-cell--topic, .theme-floor .vstab-cell strong, .theme-floor .hero-offer2 .ho2-title, .theme-floor .hero-offer2 .ho2-amt, .theme-floor .site-footer--v2 .footer-shell h3, .theme-floor .site-footer--v2 .footer-shell strong, .theme-floor .site-footer--v2 .footer-shell a { color: #242424 !important; } .theme-floor .band-light p, .theme-floor .f3-card p, .theme-floor .hero-offer2 .ho2-lbl, .theme-floor .site-footer--v2 .footer-shell p, .theme-floor .site-footer--v2 .footer-shell small, .theme-floor .site-footer--v2 .footer-shell li, .theme-floor .site-footer--v2 .footer-shell span { color: #5a5a5a !important; } /* Warm oak as the secondary accent: kickers, step numbers, ticks, chips. */ .theme-floor .band-light .kicker, .theme-floor [data-section="process"] > .container > .section-head > .kicker, .theme-floor [data-section="faq"] > .container > .section-head > .kicker, .theme-floor [data-section="video"] > .container > .section-head > .kicker, .theme-floor .offer-lock .ofl-strong, .theme-floor .offer-lock-nudge strong { color: #b8895a !important; } .theme-floor .f3-num { background: linear-gradient(160deg, #b8895a, #a97b46) !important; color: #242424 !important; -webkit-text-fill-color: #242424 !important; } .theme-floor .vstab-tick { color: #16324f !important; } .theme-floor .hero-offer2 { border-top-color: #b8895a !important; } .theme-floor .hero-offer2 .ho2-ico { background: #f2ead9 !important; color: #a97b46 !important; } .theme-floor .hero-offer2 .ho2-tag { color: #a97b46 !important; } .theme-floor .hero-offer2 .ho2-promise--limit { background: rgba(184, 137, 90, 0.14) !important; border-left-color: #b8895a !important; color: #242424 !important; } .theme-floor .hero-offer2 .ho2-promise--limit strong { color: #242424 !important; } .theme-floor .hero-offer2 .ho2-link, .theme-floor .hero-offer2 .ho2-or { color: #16324f !important; } /* CTAs: deep forest green with white type. */ .theme-floor .btn-ink, .theme-floor .cta-glow, .theme-floor button[type="submit"], .theme-floor .section-call-btn, .theme-floor .cookie-btn-accept { background: linear-gradient(180deg, #1e4a6f 0%, #16324f 60%, #0e2338 100%) !important; color: #ffffff !important; border-color: rgba(22, 50, 79, 0.45) !important; } .theme-floor .btn-ink svg, .theme-floor .cta-glow svg, .theme-floor .section-call-btn svg { color: #b8895a !important; } /* Hero panel: oak kicker + readable credential line on the dark green. */ .theme-floor .hero-copy-panel .kicker, .theme-floor .hero-kicker { color: #b8895a !important; -webkit-text-fill-color: #b8895a !important; background: none !important; } .theme-floor .hero-copy-panel .hero-lic, .theme-floor .hero-copy-panel .hero-lic * { color: rgba(245, 243, 239, 0.86) !important; } .theme-floor .hero-copy-panel .hero-lic strong { color: #f5f3ef !important; } /* ========================================================================== FLOORING THEME — Cryonex-inspired pass: near-black ink sections, cool light page surface, and a warm GOLD gradient replacing the lime/oak accent. ========================================================================== */ .theme-floor { --ink-900: #1b232d; --ink-800: #232d38; --gold-300: #f3d99a; --gold-400: #e8c46f; --gold-500: #d1a247; --gold-600: #b3842f; --page-top: #eef2f5; --page-mid: #f5f7f9; --page-bot: #ffffff; --oak: #d1a247; --oak-dk: #b3842f; --accent-glow: rgba(209, 162, 71, 0.35); } html.theme-floor, .theme-floor body { background: linear-gradient(180deg, #eef2f5 0%, #f5f7f9 40%, #ffffff 100%) !important; } /* Dark bands: deep neutral ink instead of navy */ .theme-floor .hero-copy-panel { background: linear-gradient(180deg, rgba(27, 35, 45, 0.88) 0%, rgba(15, 20, 26, 0.94) 100%) !important; } .theme-floor [data-section="gallery"], .theme-floor [data-section="video"], .theme-floor [data-section="process"], .theme-floor [data-section="faq"], .theme-floor [data-section="testimonials"], .theme-floor [data-section="hero-testimonials"], .theme-floor [data-section="video-reviews"], .theme-floor .band-green, .theme-floor .stats-band { background: linear-gradient(168deg, #232d38 0%, #141a21 100%) !important; } .theme-floor .geo-band { background: linear-gradient(180deg, #2a3542 0%, #1b232d 100%) !important; } .theme-floor [data-section="hero-testimonials"], .theme-floor [data-section="trust-strip"], .theme-floor [data-section="cta-strip"] { background: linear-gradient(180deg, #eef2f5 0%, #ffffff 100%) !important; } .theme-floor [data-section="hero-testimonials"] { background: linear-gradient(168deg, #232d38 0%, #141a21 100%) !important; } /* GOLD gradient CTAs with dark ink type */ .theme-floor .btn-ink, .theme-floor .cta-glow, .theme-floor button[type="submit"], .theme-floor .section-call-btn, .theme-floor .cookie-btn-accept { background: linear-gradient(135deg, #f3d99a 0%, #e8c46f 38%, #d1a247 70%, #b3842f 100%) !important; color: #1b232d !important; border-color: rgba(179, 132, 47, 0.55) !important; box-shadow: 0 14px 30px -14px rgba(179, 132, 47, 0.65) !important; } .theme-floor .btn-ink svg, .theme-floor .cta-glow svg, .theme-floor .section-call-btn svg, .theme-floor button[type="submit"] svg { color: #1b232d !important; } /* Gold as the secondary accent everywhere the oak/navy tint was used */ .theme-floor .hero-copy-panel .kicker, .theme-floor .hero-kicker, .theme-floor .band-light .kicker, .theme-floor [data-section="process"] > .container > .section-head > .kicker, .theme-floor [data-section="faq"] > .container > .section-head > .kicker, .theme-floor [data-section="video"] > .container > .section-head > .kicker, .theme-floor .offer-lock .ofl-strong, .theme-floor .offer-lock-nudge strong, .theme-floor .vstab-tick { color: #b3842f !important; -webkit-text-fill-color: #b3842f !important; background: none !important; } .theme-floor .f3-num { background: linear-gradient(160deg, #f3d99a, #d1a247) !important; color: #1b232d !important; -webkit-text-fill-color: #1b232d !important; } .theme-floor .f3-card { border-top-color: #d1a247 !important; } .theme-floor .f3-card h3, .theme-floor .band-light h2, .theme-floor .band-light h3 { color: #1b232d !important; } /* Hero offer card: ink type, gold trim */ .theme-floor .hero-offer2 { border-top-color: #d1a247 !important; } .theme-floor .hero-offer2 .ho2-title, .theme-floor .hero-offer2 .ho2-amt { color: #1b232d !important; } .theme-floor .hero-offer2 .ho2-ico { background: #f7edd6 !important; color: #b3842f !important; } .theme-floor .hero-offer2 .ho2-tag { color: #b3842f !important; } .theme-floor .hero-offer2 .ho2-badge, .theme-floor .ho2-badge { background: linear-gradient(135deg, #f3d99a, #d1a247) !important; color: #1b232d !important; border-color: rgba(179, 132, 47, 0.45) !important; } .theme-floor .hero-offer2 .ho2-promise--limit, .theme-floor .ho2-promise--limit { background: rgba(209, 162, 71, 0.14) !important; border-left-color: #d1a247 !important; color: #1b232d !important; } .theme-floor .hero-offer2 .ho2-link, .theme-floor .hero-offer2 .ho2-or { color: #b3842f !important; } /* Comparison table + footer in ink/gold */ .theme-floor .vstab-row--head .vstab-cell { background: linear-gradient(180deg, #2a3542, #1b232d) !important; color: #f5f7f9 !important; } .theme-floor .vstab-row--head .vstab-cell--us { background: linear-gradient(180deg, #d1a247, #b3842f) !important; color: #1b232d !important; } .theme-floor .vstab-cell--us { background: rgba(209, 162, 71, 0.08) !important; } .theme-floor .vstab-cell--topic, .theme-floor .vstab-cell strong { color: #1b232d !important; } .theme-floor .site-footer--v2 .footer-lic { background: rgba(209, 162, 71, 0.12) !important; border-color: rgba(179, 132, 47, 0.35) !important; } .theme-floor .site-footer--v2 .footer-shell svg, .theme-floor .footer-contact-row svg, .theme-floor .footer-contact-row svg * { color: #b3842f !important; stroke: #b3842f !important; } .theme-floor .site-footer--v2 .footer-shell h3, .theme-floor .site-footer--v2 .footer-shell strong, .theme-floor .site-footer--v2 .footer-shell a { color: #1b232d !important; } .theme-floor .footer-col--contact .footer-areas li { background: rgba(27, 35, 45, 0.06) !important; border-color: rgba(27, 35, 45, 0.18) !important; color: #1b232d !important; } .theme-floor .footer-areas li::before { background: #d1a247 !important; color: #d1a247 !important; } .theme-floor .cookie-consent a { color: #b3842f !important; } /* Flooring theme: header pill + hero accents on the gold gradient. */ html.theme-floor body .site-header .header-cta, html.theme-floor body .site-header a.btn.header-cta, html.theme-floor body .site-header .btn-yellow.header-cta { background: linear-gradient(135deg, #f3d99a 0%, #e8c46f 38%, #d1a247 70%, #b3842f 100%) !important; color: #1b232d !important; border-color: rgba(179, 132, 47, 0.5) !important; box-shadow: 0 14px 30px -14px rgba(179, 132, 47, 0.6) !important; } html.theme-floor body .site-header .header-cta svg, html.theme-floor body .site-header .header-cta strong, html.theme-floor body .site-header .header-cta span { color: #1b232d !important; } .theme-floor .hero-h1 .h1-kicker, .theme-floor .hero-h1 .h1-tag, .theme-floor .hero-h1 .h1-uline, .theme-floor .hero-copy-panel .hero-sub-accent, .theme-floor .hero-sub-accent, .theme-floor .hero-copy-panel .hero-lic strong { color: #e8c46f !important; -webkit-text-fill-color: #e8c46f !important; background: none !important; } .theme-floor .hero-copy-panel .hero-lic, .theme-floor .hero-copy-panel .hero-lic * { color: rgba(245, 247, 249, 0.9) !important; } .theme-floor .hero-copy-panel .hero-lic svg, .theme-floor .hero-copy-panel .hero-lic svg * { color: #e8c46f !important; stroke: #e8c46f !important; } .theme-floor .sticky-bar .btn, .theme-floor #sticky-bar a[href^="tel:"] { background: linear-gradient(135deg, #f3d99a, #d1a247) !important; color: #1b232d !important; } .theme-floor .hero-h1 .h1-main { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: none !important; } html.theme-floor body .site-header .header-phone, html.theme-floor body .site-header .header-phone.cta-glow, html.theme-floor body .sticky-bar--v2 .sticky-call { background: linear-gradient(135deg, #f3d99a 0%, #e8c46f 38%, #d1a247 70%, #b3842f 100%) !important; color: #1b232d !important; -webkit-text-fill-color: #1b232d !important; border-color: rgba(179, 132, 47, 0.5) !important; } html.theme-floor body .sticky-bar--v2 .sticky-call svg, html.theme-floor body .site-header .header-phone svg { color: #1b232d !important; } .theme-floor .hero-lic, .theme-floor .hero-lic *, .theme-floor .hero-cred, .theme-floor .hero-cred * { color: rgba(245, 247, 249, 0.9) !important; -webkit-text-fill-color: rgba(245, 247, 249, 0.9) !important; background: none !important; } .theme-floor .hero-lic svg, .theme-floor .hero-lic svg *, .theme-floor .hero-cred svg, .theme-floor .hero-cred svg * { color: #e8c46f !important; stroke: #e8c46f !important; -webkit-text-fill-color: #e8c46f !important; } html.theme-floor body a.btn.btn-ink, html.theme-floor body a.btn.btn-ink.btn-lg, html.theme-floor body a.btn.section-call-btn, html.theme-floor body .btn.cta-glow, html.theme-floor body button.btn-ink, html.theme-floor body button[type="submit"] { background: linear-gradient(135deg, #f3d99a 0%, #e8c46f 38%, #d1a247 70%, #b3842f 100%) !important; color: #1b232d !important; -webkit-text-fill-color: #1b232d !important; border-color: rgba(179, 132, 47, 0.5) !important; } html.theme-floor body a.btn.btn-ink svg, html.theme-floor body a.btn.section-call-btn svg, html.theme-floor body button[type="submit"] svg, html.theme-floor body a.btn.btn-ink span, html.theme-floor body a.btn.section-call-btn span { color: #1b232d !important; -webkit-text-fill-color: #1b232d !important; } /* ========================================================================== FLOORING THEME — FINAL palette (POKOO reference): muted slate-sage #6D878E family, soft #F6F6F6 / #FFFFFF surfaces, near-black #141414 type. No green anywhere. This block wins over every earlier theme pass. ========================================================================== */ .theme-floor { --sage-100: #eef2f3; --sage-200: #acbbbf; --sage-300: #8fa5aa; --sage-500: #6d878e; --sage-600: #566f76; --sage-700: #435a60; --sage-900: #2b3a3f; --lime-100: #eef2f3; --lime-200: #dde5e7; --lime-300: #acbbbf; --lime-400: #8fa5aa; --lime-500: #6d878e; --lime-600: #566f76; --lime-700: #435a60; --lime-800: #435a60; --lime-950: #2b3a3f; --brand-green-500: #6d878e; --brand-green-600: #566f76; --brand-green-700: #435a60; --sc-green: #6d878e; --sc-green-dk: #435a60; --success: #566f76; --hero-panel: rgba(43, 58, 63, 0.82); --neutral-50: #ffffff; --neutral-100: #f6f6f6; --neutral-150: #f0f0ee; --neutral-200: #e0e0dc; --neutral-600: #5a5f61; --neutral-800: #141414; --neutral-900: #141414; --neutral-950: #141414; --oak: #6d878e; --oak-dk: #566f76; --gold-300: #acbbbf; --gold-400: #8fa5aa; --gold-500: #6d878e; --gold-600: #566f76; --ink: #141414; --ink-soft: #5a5f61; --ink-900: #2b3a3f; --ink-800: #435a60; --page-top: #f6f6f6; --page-mid: #fafafa; --page-bot: #ffffff; --accent-glow: rgba(109, 135, 142, 0.35); --cta-green-start: #8fa5aa; --cta-green-mid: #6d878e; --cta-green-end: #566f76; --aurora-1: rgba(109, 135, 142, 0.28); --aurora-2: rgba(109, 135, 142, 0.18); --aurora-3: rgba(224, 224, 220, 0.44); } html.theme-floor, .theme-floor body { background: linear-gradient(180deg, #f6f6f6 0%, #fafafa 42%, #ffffff 100%) !important; } /* Dark bands: muted slate-sage */ .theme-floor .hero-copy-panel { background: linear-gradient(180deg, rgba(67, 90, 96, 0.88) 0%, rgba(30, 41, 45, 0.94) 100%) !important; } .theme-floor [data-section="gallery"], .theme-floor [data-section="video"], .theme-floor [data-section="process"], .theme-floor [data-section="faq"], .theme-floor [data-section="testimonials"], .theme-floor [data-section="hero-testimonials"], .theme-floor [data-section="video-reviews"], .theme-floor .band-green, .theme-floor .stats-band { background: linear-gradient(168deg, #6d878e 0%, #435a60 100%) !important; } .theme-floor .geo-band { background: linear-gradient(180deg, #7c959b 0%, #566f76 100%) !important; } .theme-floor [data-section="trust-strip"], .theme-floor [data-section="cta-strip"] { background: linear-gradient(180deg, #f0f0ee 0%, #ffffff 100%) !important; } /* CTAs: solid slate-sage with white type */ .theme-floor .btn-ink, .theme-floor .cta-glow, .theme-floor button[type="submit"], .theme-floor .section-call-btn, .theme-floor .cookie-btn-accept, .theme-floor .btn-yellow, .theme-floor .header-cta, .theme-floor .site-header .btn-yellow.header-cta, .theme-floor .sticky-cta .btn-ink { background: linear-gradient(180deg, #7c959b 0%, #6d878e 55%, #566f76 100%) !important; color: #ffffff !important; border-color: rgba(67, 90, 96, 0.5) !important; box-shadow: 0 14px 30px -16px rgba(43, 58, 63, 0.55) !important; } .theme-floor .btn-ink svg, .theme-floor .cta-glow svg, .theme-floor .section-call-btn svg, .theme-floor .header-cta svg, .theme-floor button[type="submit"] svg { color: #ffffff !important; } /* Accents: light sage on dark, deep sage on light */ .theme-floor .hero-copy-panel .kicker, .theme-floor .hero-kicker, .theme-floor [data-section="process"] > .container > .section-head > .kicker, .theme-floor [data-section="faq"] > .container > .section-head > .kicker, .theme-floor [data-section="video"] > .container > .section-head > .kicker { color: #dce6e8 !important; -webkit-text-fill-color: #dce6e8 !important; background: none !important; } .theme-floor .band-light .kicker, .theme-floor .offer-lock .ofl-strong, .theme-floor .offer-lock-nudge strong, .theme-floor .vstab-tick { color: #566f76 !important; -webkit-text-fill-color: #566f76 !important; background: none !important; } .theme-floor .f3-num { background: linear-gradient(160deg, #8fa5aa, #566f76) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .theme-floor .f3-card { border-top-color: #6d878e !important; } .theme-floor .f3-card h3, .theme-floor .band-light h2, .theme-floor .band-light h3 { color: #141414 !important; } .theme-floor .band-light p, .theme-floor .f3-card p { color: #5a5f61 !important; } /* Hero offer card */ .theme-floor .hero-offer2 { border-top-color: #6d878e !important; } .theme-floor .hero-offer2 .ho2-title, .theme-floor .hero-offer2 .ho2-amt { color: #141414 !important; } .theme-floor .hero-offer2 .ho2-ico { background: #eef2f3 !important; color: #435a60 !important; } .theme-floor .hero-offer2 .ho2-tag { color: #566f76 !important; } .theme-floor .hero-offer2 .ho2-badge, .theme-floor .ho2-badge { background: linear-gradient(135deg, #6d878e, #435a60) !important; color: #ffffff !important; border-color: rgba(67, 90, 96, 0.45) !important; } .theme-floor .hero-offer2 .ho2-promise--limit, .theme-floor .ho2-promise--limit { background: rgba(109, 135, 142, 0.12) !important; border-left-color: #6d878e !important; color: #141414 !important; } .theme-floor .hero-offer2 .ho2-promise--limit strong { color: #141414 !important; } .theme-floor .hero-offer2 .ho2-link, .theme-floor .hero-offer2 .ho2-or { color: #435a60 !important; } /* Comparison table + footer accents */ .theme-floor .vstab-row--head, .theme-floor .vstab-row--head .vstab-cell { background: linear-gradient(180deg, #7c959b, #566f76) !important; color: #ffffff !important; } .theme-floor .vstab-row--head .vstab-cell--us { background: linear-gradient(180deg, #566f76, #2b3a3f) !important; color: #ffffff !important; } .theme-floor .vstab-cell--us { background: rgba(109, 135, 142, 0.07) !important; } .theme-floor .vstab-cell--topic, .theme-floor .vstab-cell strong { color: #141414 !important; } .theme-floor .cookie-consent a { color: #435a60 !important; } .theme-floor .site-footer--v2 .footer-lic { background: rgba(109, 135, 142, 0.09) !important; border-color: rgba(109, 135, 142, 0.3) !important; } .theme-floor .site-footer--v2 .footer-shell svg, .theme-floor .footer-contact-row svg, .theme-floor .footer-contact-row svg * { color: #566f76 !important; stroke: #566f76 !important; } .theme-floor .site-footer--v2 .footer-shell h3, .theme-floor .site-footer--v2 .footer-shell strong, .theme-floor .site-footer--v2 .footer-shell a { color: #141414 !important; } .theme-floor .footer-col--contact .footer-areas li { background: rgba(109, 135, 142, 0.08) !important; border-color: rgba(109, 135, 142, 0.24) !important; color: #435a60 !important; } .theme-floor .footer-areas li::before { background: #6d878e !important; color: #6d878e !important; } /* FINAL sage pass — override the high-specificity gold rules above. */ html.theme-floor body .site-header .header-cta, html.theme-floor body .site-header a.btn.header-cta, html.theme-floor body .site-header .btn-yellow.header-cta, html.theme-floor body .site-header .header-phone, html.theme-floor body .site-header .header-phone.cta-glow, html.theme-floor body .sticky-bar--v2 .sticky-call, html.theme-floor body .sticky-bar .btn, html.theme-floor body a.btn.btn-ink, html.theme-floor body a.btn.btn-ink.btn-lg, html.theme-floor body a.btn.section-call-btn, html.theme-floor body .btn.cta-glow, html.theme-floor body button.btn-ink, html.theme-floor body button[type="submit"] { background: linear-gradient(180deg, #7c959b 0%, #6d878e 55%, #566f76 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: rgba(67, 90, 96, 0.5) !important; box-shadow: 0 14px 30px -16px rgba(43, 58, 63, 0.5) !important; } html.theme-floor body .site-header .header-cta svg, html.theme-floor body .site-header .header-cta strong, html.theme-floor body .site-header .header-cta span, html.theme-floor body .site-header .header-phone svg, html.theme-floor body .sticky-bar--v2 .sticky-call svg, html.theme-floor body a.btn.btn-ink svg, html.theme-floor body a.btn.section-call-btn svg, html.theme-floor body button[type="submit"] svg, html.theme-floor body a.btn.btn-ink span, html.theme-floor body a.btn.section-call-btn span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; stroke: #ffffff !important; } html.theme-floor body .hero-h1 .h1-kicker, html.theme-floor body .hero-h1 .h1-tag, html.theme-floor body .hero-h1 .h1-uline, html.theme-floor body .hero-copy-panel .hero-sub-accent, html.theme-floor body .hero-sub-accent, html.theme-floor body .hero-copy-panel .hero-lic strong { color: #dce6e8 !important; -webkit-text-fill-color: #dce6e8 !important; background: none !important; } html.theme-floor body .hero-lic svg, html.theme-floor body .hero-lic svg *, html.theme-floor body .hero-cred svg, html.theme-floor body .hero-cred svg *, html.theme-floor body .hero-copy-panel .hero-lic svg, html.theme-floor body .hero-copy-panel .hero-lic svg * { color: #dce6e8 !important; stroke: #dce6e8 !important; -webkit-text-fill-color: #dce6e8 !important; } html.theme-floor body .vstab-row--head .vstab-cell--us { background: linear-gradient(180deg, #566f76, #2b3a3f) !important; color: #ffffff !important; } html.theme-floor body .vstab-cell--us { background: rgba(109, 135, 142, 0.07) !important; } html.theme-floor body .footer-areas li::before { background: #6d878e !important; color: #6d878e !important; } html.theme-floor body .site-footer--v2 .footer-shell svg, html.theme-floor body .footer-contact-row svg, html.theme-floor body .footer-contact-row svg * { color: #566f76 !important; stroke: #566f76 !important; } html.theme-floor body .cookie-consent a { color: #435a60 !important; } html.theme-floor body .site-footer--v2 .footer-lic { background: rgba(109, 135, 142, 0.1) !important; border-color: rgba(109, 135, 142, 0.3) !important; } html.theme-floor body .hero-chips li, html.theme-floor body .hero-chips li * { color: #f2f6f7 !important; -webkit-text-fill-color: #f2f6f7 !important; border-color: rgba(242, 246, 247, 0.34) !important; background: rgba(43, 58, 63, 0.28) !important; } /* ========================================================================== FLOORING THEME — FINAL palette: mint off-white #ECF4ED, sage #ADC4B3, brick red #A4464F (gradient CTAs + dark bands), white. No forest green. ========================================================================== */ .theme-floor { --mint-50: #f4faf5; --mint-100: #ecf4ed; --sage-200: #cfdfd2; --sage-300: #adc4b3; --sage-500: #76927d; --brick-300: #d08d94; --brick-500: #b8555e; --brick: #a4464f; --brick-dk: #83343c; --brick-900: #63262d; --lime-100: #ecf4ed; --lime-200: #cfdfd2; --lime-300: #adc4b3; --lime-400: #d08d94; --lime-500: #a4464f; --lime-600: #933d46; --lime-700: #83343c; --lime-800: #83343c; --lime-950: #63262d; --brand-green-500: #a4464f; --brand-green-600: #933d46; --brand-green-700: #83343c; --sc-green: #a4464f; --sc-green-dk: #83343c; --success: #933d46; --hero-panel: rgba(99, 38, 45, 0.82); --neutral-50: #ffffff; --neutral-100: #ecf4ed; --neutral-150: #e4eee6; --neutral-200: #cfdfd2; --neutral-600: #6b5a5c; --neutral-800: #3a2a2d; --neutral-900: #2b2022; --neutral-950: #1f1719; --oak: #a4464f; --oak-dk: #83343c; --gold-300: #cfdfd2; --gold-400: #adc4b3; --gold-500: #a4464f; --gold-600: #933d46; --ink: #2b2022; --ink-soft: #6b5a5c; --ink-900: #2b2022; --ink-800: #3a2a2d; --page-top: #ecf4ed; --page-mid: #f4faf5; --page-bot: #ffffff; --accent-glow: rgba(164, 70, 79, 0.32); --cta-green-start: #b8555e; --cta-green-mid: #a4464f; --cta-green-end: #83343c; --aurora-1: rgba(173, 196, 179, 0.32); --aurora-2: rgba(164, 70, 79, 0.16); --aurora-3: rgba(236, 244, 237, 0.5); } html.theme-floor, .theme-floor body { background: linear-gradient(180deg, #ecf4ed 0%, #f4faf5 42%, #ffffff 100%) !important; } .theme-floor .hero-copy-panel { background: linear-gradient(180deg, rgba(99, 38, 45, 0.86) 0%, rgba(43, 20, 23, 0.94) 100%) !important; } .theme-floor [data-section="gallery"], .theme-floor [data-section="video"], .theme-floor [data-section="process"], .theme-floor [data-section="faq"], .theme-floor [data-section="testimonials"], .theme-floor [data-section="hero-testimonials"], .theme-floor [data-section="video-reviews"], .theme-floor .band-green, .theme-floor .stats-band { background: linear-gradient(168deg, #a4464f 0%, #63262d 100%) !important; } .theme-floor .geo-band { background: linear-gradient(180deg, #b8555e 0%, #83343c 100%) !important; } .theme-floor [data-section="trust-strip"], .theme-floor [data-section="cta-strip"] { background: linear-gradient(180deg, #e4eee6 0%, #ffffff 100%) !important; } /* CTAs: brick red gradient with white type */ html.theme-floor body .site-header .header-cta, html.theme-floor body .site-header a.btn.header-cta, html.theme-floor body .site-header .btn-yellow.header-cta, html.theme-floor body .site-header .header-phone, html.theme-floor body .site-header .header-phone.cta-glow, html.theme-floor body .sticky-bar--v2 .sticky-call, html.theme-floor body .sticky-bar .btn, html.theme-floor body a.btn.btn-ink, html.theme-floor body a.btn.btn-ink.btn-lg, html.theme-floor body a.btn.section-call-btn, html.theme-floor body .btn.cta-glow, html.theme-floor body button.btn-ink, html.theme-floor body button[type="submit"], .theme-floor .cookie-btn-accept { background: linear-gradient(135deg, #c26670 0%, #a4464f 52%, #83343c 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: rgba(131, 52, 60, 0.55) !important; box-shadow: 0 14px 30px -16px rgba(99, 38, 45, 0.55) !important; } html.theme-floor body .site-header .header-cta svg, html.theme-floor body .site-header .header-cta strong, html.theme-floor body .site-header .header-cta span, html.theme-floor body .site-header .header-phone svg, html.theme-floor body .sticky-bar--v2 .sticky-call svg, html.theme-floor body a.btn.btn-ink svg, html.theme-floor body a.btn.section-call-btn svg, html.theme-floor body button[type="submit"] svg, html.theme-floor body a.btn.btn-ink span, html.theme-floor body a.btn.section-call-btn span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; stroke: #ffffff !important; } /* Accents: sage on dark, brick on light */ html.theme-floor body .hero-h1 .h1-kicker, html.theme-floor body .hero-h1 .h1-tag, html.theme-floor body .hero-h1 .h1-uline, html.theme-floor body .hero-copy-panel .hero-sub-accent, html.theme-floor body .hero-sub-accent, html.theme-floor body .hero-copy-panel .hero-lic strong { color: #adc4b3 !important; -webkit-text-fill-color: #adc4b3 !important; background: none !important; } html.theme-floor body .hero-chips li, html.theme-floor body .hero-chips li * { color: #ecf4ed !important; -webkit-text-fill-color: #ecf4ed !important; border-color: rgba(173, 196, 179, 0.4) !important; background: rgba(99, 38, 45, 0.32) !important; } html.theme-floor body .hero-lic svg, html.theme-floor body .hero-lic svg *, html.theme-floor body .hero-cred svg, html.theme-floor body .hero-cred svg *, html.theme-floor body .hero-copy-panel .hero-lic svg, html.theme-floor body .hero-copy-panel .hero-lic svg * { color: #adc4b3 !important; stroke: #adc4b3 !important; -webkit-text-fill-color: #adc4b3 !important; } .theme-floor [data-section="process"] > .container > .section-head > .kicker, .theme-floor [data-section="faq"] > .container > .section-head > .kicker, .theme-floor [data-section="video"] > .container > .section-head > .kicker { color: #ecf4ed !important; -webkit-text-fill-color: #ecf4ed !important; background: none !important; } .theme-floor .band-light .kicker, .theme-floor .offer-lock .ofl-strong, .theme-floor .offer-lock-nudge strong { color: #a4464f !important; -webkit-text-fill-color: #a4464f !important; background: none !important; } .theme-floor .vstab-tick { color: #a4464f !important; -webkit-text-fill-color: #a4464f !important; } .theme-floor .f3-num { background: linear-gradient(160deg, #b8555e, #83343c) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .theme-floor .f3-card { border-top-color: #a4464f !important; } .theme-floor .f3-card h3, .theme-floor .band-light h2, .theme-floor .band-light h3 { color: #2b2022 !important; } .theme-floor .band-light p, .theme-floor .f3-card p { color: #6b5a5c !important; } /* Hero offer card */ .theme-floor .hero-offer2 { border-top-color: #a4464f !important; } .theme-floor .hero-offer2 .ho2-title, .theme-floor .hero-offer2 .ho2-amt { color: #2b2022 !important; } .theme-floor .hero-offer2 .ho2-ico { background: #e4eee6 !important; color: #a4464f !important; } .theme-floor .hero-offer2 .ho2-tag { color: #a4464f !important; } .theme-floor .hero-offer2 .ho2-badge, .theme-floor .ho2-badge { background: linear-gradient(135deg, #b8555e, #83343c) !important; color: #ffffff !important; border-color: rgba(131, 52, 60, 0.45) !important; } .theme-floor .hero-offer2 .ho2-promise--limit, .theme-floor .ho2-promise--limit { background: rgba(173, 196, 179, 0.22) !important; border-left-color: #a4464f !important; color: #2b2022 !important; } .theme-floor .hero-offer2 .ho2-promise--limit strong { color: #a4464f !important; } .theme-floor .hero-offer2 .ho2-link, .theme-floor .hero-offer2 .ho2-or { color: #a4464f !important; } /* Comparison table + footer */ .theme-floor .vstab-row--head, .theme-floor .vstab-row--head .vstab-cell, html.theme-floor body .vstab-row--head .vstab-cell { background: linear-gradient(180deg, #b8555e, #a4464f) !important; color: #ffffff !important; } html.theme-floor body .vstab-row--head .vstab-cell--us, .theme-floor .vstab-row--head .vstab-cell--us { background: linear-gradient(180deg, #a4464f, #63262d) !important; color: #ffffff !important; } html.theme-floor body .vstab-cell--us { background: rgba(173, 196, 179, 0.16) !important; } .theme-floor .vstab-cell--topic, .theme-floor .vstab-cell strong { color: #2b2022 !important; } html.theme-floor body .cookie-consent a { color: #a4464f !important; } html.theme-floor body .site-footer--v2 .footer-lic { background: rgba(173, 196, 179, 0.22) !important; border-color: rgba(164, 70, 79, 0.3) !important; } html.theme-floor body .site-footer--v2 .footer-shell svg, html.theme-floor body .footer-contact-row svg, html.theme-floor body .footer-contact-row svg * { color: #a4464f !important; stroke: #a4464f !important; } .theme-floor .site-footer--v2 .footer-shell h3, .theme-floor .site-footer--v2 .footer-shell strong, .theme-floor .site-footer--v2 .footer-shell a { color: #2b2022 !important; } .theme-floor .site-footer--v2 .footer-shell p, .theme-floor .site-footer--v2 .footer-shell small, .theme-floor .site-footer--v2 .footer-shell li, .theme-floor .site-footer--v2 .footer-shell span { color: #6b5a5c !important; } .theme-floor .footer-col--contact .footer-areas li { background: rgba(173, 196, 179, 0.2) !important; border-color: rgba(164, 70, 79, 0.24) !important; color: #2b2022 !important; } html.theme-floor body .footer-areas li::before { background: #a4464f !important; color: #a4464f !important; } /* Hero panel: mint/sage instead of brick red */ .theme-floor .hero-copy-panel, html.theme-floor body .hero-copy-panel { background: linear-gradient(180deg, rgba(236, 244, 237, 0.94) 0%, rgba(255, 255, 255, 0.96) 100%) !important; border-color: rgba(173, 196, 179, 0.55) !important; } html.theme-floor body .hero-copy-panel, html.theme-floor body .hero-copy-panel p, html.theme-floor body .hero-copy-panel strong, html.theme-floor body .hero-copy-panel .hero-h1, html.theme-floor body .hero-copy-panel .hero-h1 * { color: #2b2022 !important; -webkit-text-fill-color: #2b2022 !important; } html.theme-floor body .hero-copy-panel .hero-h1 .h1-kicker, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag, html.theme-floor body .hero-copy-panel .hero-sub-accent, html.theme-floor body .hero-copy-panel .hero-lic strong { color: #76927d !important; -webkit-text-fill-color: #76927d !important; } html.theme-floor body .hero-copy-panel .hero-h1 .h1-uline { color: #76927d !important; -webkit-text-fill-color: #76927d !important; } html.theme-floor body .hero-copy-panel .hero-lic, html.theme-floor body .hero-copy-panel .hero-cred { color: #6b5a5c !important; -webkit-text-fill-color: #6b5a5c !important; } html.theme-floor body .hero-copy-panel .hero-lic svg, html.theme-floor body .hero-copy-panel .hero-lic svg *, html.theme-floor body .hero-copy-panel .hero-cred svg, html.theme-floor body .hero-copy-panel .hero-cred svg * { color: #76927d !important; stroke: #76927d !important; -webkit-text-fill-color: #76927d !important; } html.theme-floor body .hero-copy-panel .hero-chips li, html.theme-floor body .hero-copy-panel .hero-chips li * { color: #2b2022 !important; -webkit-text-fill-color: #2b2022 !important; background: rgba(173, 196, 179, 0.22) !important; border-color: rgba(118, 146, 125, 0.45) !important; } html.theme-floor body .hero-copy-panel .hero-lic, html.theme-floor body .hero-copy-panel .hero-lic *, html.theme-floor body .hero-copy-panel .hero-cred, html.theme-floor body .hero-copy-panel .hero-cred * { color: #4a3c3e !important; -webkit-text-fill-color: #4a3c3e !important; text-shadow: none !important; opacity: 1 !important; } /* ========================================================================== FLOORING THEME — readability correction: mint/sage surfaces, brick CTAs only. ========================================================================== */ .theme-floor { --floor-mint: #ecf4ed; --floor-mint-light: #f7fbf8; --floor-sage: #adc4b3; --floor-sage-deep: #76927d; --floor-brick: #a4464f; --floor-brick-mid: #b8555e; --floor-brick-dark: #83343c; --floor-ink: #2b2022; --floor-muted: #5f5557; --accent-glow: rgba(164, 70, 79, 0.28); } html.theme-floor body .hero-scrim { background: linear-gradient( 180deg, rgba(31, 23, 25, 0.18) 0%, rgba(31, 23, 25, 0.04) 44%, rgba(31, 23, 25, 0.22) 100% ) !important; } .theme-floor .hero-copy-panel, html.theme-floor body .hero-copy-panel { background: linear-gradient(180deg, rgba(236, 244, 237, 0.74) 0%, rgba(255, 255, 255, 0.78) 100%) !important; border-color: rgba(173, 196, 179, 0.74) !important; box-shadow: 0 24px 58px -34px rgba(43, 32, 34, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important; } html.theme-floor body .hero-copy-panel, html.theme-floor body .hero-copy-panel p, html.theme-floor body .hero-copy-panel strong, html.theme-floor body .hero-copy-panel .hero-h1, html.theme-floor body .hero-copy-panel .hero-h1 * { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; text-shadow: none !important; } html.theme-floor body .hero-copy-panel .hero-h1 .h1-kicker, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag, html.theme-floor body .hero-copy-panel .hero-h1 .h1-uline, html.theme-floor body .hero-copy-panel .hero-sub-accent { color: #5f8068 !important; -webkit-text-fill-color: #5f8068 !important; background: none !important; } html.theme-floor body .hero-copy-panel .hero-chips li { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; } html.theme-floor body .hero-copy-panel .hero-chips .chip-cta { background: rgba(255, 255, 255, 0.72) !important; border: 1px solid rgba(118, 146, 125, 0.58) !important; color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px -16px rgba(43, 32, 34, 0.32) !important; } html.theme-floor body .hero-copy-panel .hero-chips .chip-cta:hover, html.theme-floor body .hero-copy-panel .hero-chips .chip-cta:focus-visible { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick), var(--floor-brick-dark)) !important; border-color: rgba(131, 52, 60, 0.72) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html.theme-floor body .hero-lic, html.theme-floor body .hero-lic *, html.theme-floor body .hero-cred, html.theme-floor body .hero-cred * { color: var(--floor-muted) !important; -webkit-text-fill-color: var(--floor-muted) !important; } html.theme-floor body .hero-lic svg, html.theme-floor body .hero-lic svg *, html.theme-floor body .hero-cred svg, html.theme-floor body .hero-cred svg * { color: #5f8068 !important; stroke: #5f8068 !important; -webkit-text-fill-color: #5f8068 !important; } html.theme-floor body .hero-reviews { background: rgba(255, 255, 255, 0.86) !important; border: 1px solid rgba(118, 146, 125, 0.34) !important; box-shadow: 0 10px 24px -18px rgba(43, 32, 34, 0.34) !important; } html.theme-floor body .hero-reviews .hr-num, html.theme-floor body .hero-reviews .hr-slash, html.theme-floor body .hero-reviews .hr-text, html.theme-floor body .hero-reviews .hr-text strong { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; } html.theme-floor body .hero-reviews .hr-stars, .theme-floor .stars, .theme-floor .review-stars, .theme-floor .trust-badge--google .g-stars { color: #f5a623 !important; -webkit-text-fill-color: #f5a623 !important; } .theme-floor .geo-band, .theme-floor [data-section="process"], .theme-floor [data-section="hero-testimonials"], .theme-floor [data-section="video-reviews"], .theme-floor [data-section="project-preview"], .theme-floor .offer-section--v8, .theme-floor [data-section="faq"] { background: linear-gradient(180deg, var(--floor-mint) 0%, var(--floor-mint-light) 58%, #ffffff 100%) !important; color: var(--floor-ink) !important; } .theme-floor .geo-band .geo-copy strong, .theme-floor .geo-band .geo-copy span, .theme-floor [data-section="process"] h2, .theme-floor [data-section="process"] h3, .theme-floor [data-section="process"] p, .theme-floor [data-section="hero-testimonials"] h2, .theme-floor [data-section="hero-testimonials"] h3, .theme-floor [data-section="hero-testimonials"] p, .theme-floor [data-section="video-reviews"] h2, .theme-floor [data-section="video-reviews"] h3, .theme-floor [data-section="video-reviews"] p, .theme-floor [data-section="project-preview"] h2, .theme-floor [data-section="project-preview"] p, .theme-floor [data-section="faq"] h2, .theme-floor [data-section="faq"] h3, .theme-floor [data-section="faq"] summary, .theme-floor [data-section="faq"] p { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; background: none !important; } .theme-floor .geo-band .geo-copy span, .theme-floor [data-section="process"] p, .theme-floor [data-section="hero-testimonials"] .section-head p, .theme-floor [data-section="video-reviews"] .section-head p, .theme-floor [data-section="project-preview"] .section-head p, .theme-floor [data-section="faq"] .section-head p, .theme-floor [data-section="faq"] .faq-body, .theme-floor [data-section="faq"] .faq-body p { color: var(--floor-muted) !important; -webkit-text-fill-color: var(--floor-muted) !important; } .theme-floor .geo-band .kicker, .theme-floor [data-section="process"] .kicker, .theme-floor [data-section="hero-testimonials"] .kicker, .theme-floor [data-section="video-reviews"] .kicker, .theme-floor [data-section="project-preview"] .kicker, .theme-floor [data-section="faq"] .kicker, .theme-floor .dc-value, .theme-floor .tvs-kicker { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; background: none !important; } .theme-floor .geo-pin, .theme-floor .f3-num, .theme-floor .dc-step-n, .theme-floor .vsx-mark--us { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick), var(--floor-brick-dark)) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: rgba(131, 52, 60, 0.45) !important; } .theme-floor .geo-pills li, .theme-floor .flow3-card, .theme-floor [data-section="process"] .glass, .theme-floor [data-section="faq"] .glass, .theme-floor [data-section="faq"] .faq-item, .theme-floor .tq-card, .theme-floor .review-card, .theme-floor .tvid-stats, .theme-floor .stats-card { background: rgba(255, 255, 255, 0.9) !important; border-color: rgba(118, 146, 125, 0.24) !important; color: var(--floor-ink) !important; box-shadow: 0 18px 42px -34px rgba(43, 32, 34, 0.34) !important; } .theme-floor .geo-pills .geo-pin-sm, .theme-floor .tvs-list li::before, .theme-floor .vstab-tick { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; } .theme-floor .dc-card, .theme-floor .dc-card--v2 { background: linear-gradient(180deg, #ffffff 0%, var(--floor-mint) 100%) !important; border-color: rgba(118, 146, 125, 0.28) !important; box-shadow: 0 28px 64px -46px rgba(43, 32, 34, 0.32) !important; } .theme-floor .dc-ribbon { background: linear-gradient(120deg, #ffffff 0%, var(--floor-mint) 54%, var(--floor-sage) 100%) !important; color: var(--floor-ink) !important; border-bottom: 1px solid rgba(118, 146, 125, 0.24) !important; } .theme-floor .dc-ribbon-val { background: rgba(255, 255, 255, 0.88) !important; color: var(--floor-brick) !important; border: 1px solid rgba(164, 70, 79, 0.28) !important; } .theme-floor .dc-ribbon-txt, .theme-floor .dc-steps li, .theme-floor .dc-form label, .theme-floor .dc-droplabel { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; } .theme-floor .dc-card--v2 .dc-steps, .theme-floor .dc-card--v2 .dc-steps li, .theme-floor .dc-drop, .theme-floor .dc-card--v2 .dc-drop, .theme-floor .dc-form input[type=text], .theme-floor .dc-form input[type=email], .theme-floor .dc-form input[type=tel], .theme-floor .dc-form textarea { background: rgba(255, 255, 255, 0.84) !important; border-color: rgba(118, 146, 125, 0.32) !important; color: var(--floor-ink) !important; } .theme-floor .offer-hype { color: var(--floor-ink) !important; background: linear-gradient(180deg, #ffffff 0%, var(--floor-mint) 100%) !important; border-color: rgba(118, 146, 125, 0.34) !important; box-shadow: 0 30px 70px -46px rgba(43, 32, 34, 0.35) !important; animation: none !important; } .theme-floor .offer-eyebrow { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick), var(--floor-brick-dark)) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .theme-floor .offer-mega, .theme-floor .offer-sub, .theme-floor .offer-clock-label, .theme-floor .offer-cardlet, .theme-floor .offer-cardlet .oc-title, .theme-floor .offer-cardlet .oc-copy, .theme-floor .beatit-title, .theme-floor .beatit-copy, .theme-floor .beatit-fine, .theme-floor .offer-fine { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; } .theme-floor .offer-mega-hl, .theme-floor .offer-deadline, .theme-floor .beatit-prize, .theme-floor .oc-kicker, .theme-floor .oc-copy em { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; background: none !important; text-shadow: none !important; } .theme-floor .offer-cardlet, .theme-floor .beatit { background: rgba(255, 255, 255, 0.72) !important; border-color: rgba(118, 146, 125, 0.24) !important; } .theme-floor .oc-badge, .theme-floor .offer-cards--center .oc-badge { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick), var(--floor-brick-dark)) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .theme-floor .offer-deadline-line { background: rgba(255, 255, 255, 0.86) !important; border: 1px solid rgba(164, 70, 79, 0.34) !important; color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; } .theme-floor .offer-clock--mini, .theme-floor .offer-clock { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(236, 244, 237, 0.92)) !important; border: 1px solid rgba(164, 70, 79, 0.32) !important; box-shadow: 0 0 0 5px rgba(164, 70, 79, 0.08), 0 16px 40px -26px rgba(43, 32, 34, 0.45) !important; } .theme-floor .offer-clock .oc-cell, .theme-floor .offer-clock--mini .oc-cell { background: #ffffff !important; border-color: rgba(164, 70, 79, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 22px -18px rgba(43, 32, 34, 0.32) !important; } .theme-floor .offer-clock .oc-num, .theme-floor .offer-clock--mini .oc-num { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; text-shadow: none !important; } .theme-floor .offer-clock .oc-lbl, .theme-floor .offer-clock--mini .oc-lbl, .theme-floor .offer-clock .oc-sep, .theme-floor .offer-clock--mini .oc-sep { color: var(--floor-muted) !important; -webkit-text-fill-color: var(--floor-muted) !important; } .theme-floor .hero-offer2 .ho2-promise--limit, .theme-floor .ho2-promise--limit { background: linear-gradient(180deg, rgba(236, 244, 237, 0.92), rgba(255, 255, 255, 0.96)) !important; border-color: rgba(118, 146, 125, 0.34) !important; border-left-color: var(--floor-brick) !important; color: var(--floor-ink) !important; } .theme-floor .hero-offer2 .ho2-promise--limit strong { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; } .theme-floor [data-section="process"] > .container > .section-head > h2, .theme-floor [data-section="process"] > .container > .section-head > .kicker, .theme-floor [data-section="process"] > .container > .section-head > p, .theme-floor [data-section="faq"] > .container > .section-head > h2, .theme-floor [data-section="faq"] > .container > .section-head > .kicker, .theme-floor [data-section="faq"] > .container > .section-head > p, .theme-floor [data-section="video"] > .container > .section-head > h2, .theme-floor [data-section="video"] > .container > .section-head > .kicker, .theme-floor [data-section="hero-testimonials"] > .container > .section-head > h2, .theme-floor [data-section="hero-testimonials"] > .container > .section-head > .kicker, .theme-floor [data-section="hero-testimonials"] > .container > .section-head > p { background: none !important; text-shadow: none !important; } .theme-floor [data-section="process"] > .container > .section-head > h2, .theme-floor [data-section="faq"] > .container > .section-head > h2, .theme-floor [data-section="video"] > .container > .section-head > h2, .theme-floor [data-section="hero-testimonials"] > .container > .section-head > h2 { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; } .theme-floor [data-section="process"] > .container > .section-head > .kicker, .theme-floor [data-section="faq"] > .container > .section-head > .kicker, .theme-floor [data-section="video"] > .container > .section-head > .kicker, .theme-floor [data-section="hero-testimonials"] > .container > .section-head > .kicker { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; } /* Hero tagline (Hardwood · Vinyl · Tile · Carpet) — lighter weight */ html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag { font-weight: 500 !important; letter-spacing: .01em !important; } /* Hero bubble: slightly more opaque so the license badge stays readable */ html.theme-floor body .hero-copy-panel { background: linear-gradient(180deg, rgba(236, 244, 237, 0.88) 0%, rgba(255, 255, 255, 0.92) 100%) !important; } html.theme-floor body .hero-copy-panel .hero-badge, html.theme-floor body .hero-copy-panel .hero-badge *, html.theme-floor body .hero-copy-panel .hero-lic, html.theme-floor body .hero-copy-panel .hero-lic * { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; text-shadow: none !important; } /* Hero tagline — restrained one-line eyebrow instead of a big sage headline */ html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag { display: block !important; font-size: clamp(0.72rem, 2.9vw, 0.9rem) !important; line-height: 1.35 !important; font-weight: 800 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; margin-top: .55rem !important; white-space: normal !important; } /* ============================================================ Flooring theme — offer clock, geo band, value badge, CTA strip ============================================================ */ /* Countdown: bold brick tiles instead of faint grey text */ html.theme-floor body .offer-clock { display: flex !important; align-items: stretch !important; justify-content: center !important; gap: .4rem !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: .9rem auto !important; } html.theme-floor body .offer-clock .oc-cell { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-width: 62px !important; padding: .5rem .55rem .42rem !important; border-radius: 14px !important; background: linear-gradient(160deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border: 1px solid rgba(255,255,255,.22) !important; box-shadow: 0 10px 22px -12px rgba(131,52,60,.65), inset 0 1px 0 rgba(255,255,255,.28) !important; } html.theme-floor body .offer-clock .oc-num { font-size: clamp(1.35rem, 5.2vw, 1.85rem) !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -.02em !important; font-variant-numeric: tabular-nums !important; color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.25) !important; } html.theme-floor body .offer-clock .oc-lbl { margin-top: .18rem !important; font-size: .58rem !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: rgba(255,255,255,.86) !important; -webkit-text-fill-color: rgba(255,255,255,.86) !important; } html.theme-floor body .offer-clock .oc-sep { display: flex !important; align-items: center !important; font-size: 1.2rem !important; font-weight: 800 !important; color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; opacity: .55 !important; } /* "Offer ends August 31" — small confident pill */ html.theme-floor body .ho2-note { display: inline-flex !important; align-items: center !important; gap: .38rem !important; padding: .4rem .8rem !important; border-radius: 999px !important; background: #fff !important; border: 1.5px solid var(--floor-brick) !important; color: var(--floor-brick-dark) !important; -webkit-text-fill-color: var(--floor-brick-dark) !important; font-size: .8rem !important; font-weight: 700 !important; letter-spacing: .01em !important; box-shadow: 0 8px 18px -14px rgba(131,52,60,.6) !important; } html.theme-floor body .ho2-note strong { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; font-weight: 800 !important; } /* Geo band — mint surface, brick accents, no grey-on-grey */ html.theme-floor body .geo-band { background: linear-gradient(180deg, var(--floor-mint-light), var(--floor-mint)) !important; border-top: 1px solid rgba(173,196,179,.55) !important; border-bottom: 1px solid rgba(173,196,179,.55) !important; } html.theme-floor body .geo-band .geo-inner { background: transparent !important; border: 0 !important; box-shadow: none !important; } html.theme-floor body .geo-band .geo-pin { color: #fff !important; background: linear-gradient(160deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border-radius: 14px !important; padding: .5rem !important; box-shadow: 0 10px 20px -14px rgba(131,52,60,.7) !important; } html.theme-floor body .geo-band .geo-copy strong { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; } html.theme-floor body .geo-band .geo-copy span { color: var(--floor-muted) !important; -webkit-text-fill-color: var(--floor-muted) !important; } html.theme-floor body .geo-band .geo-pill-link { background: #fff !important; border: 1px solid rgba(164,70,79,.28) !important; color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; font-weight: 650 !important; box-shadow: 0 6px 16px -14px rgba(43,32,34,.5) !important; transition: background .18s ease, color .18s ease, transform .18s ease !important; } html.theme-floor body .geo-band .geo-pill-link .geo-pin-sm { color: var(--floor-brick) !important; } html.theme-floor body .geo-band .geo-pill-link:hover { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; transform: translateY(-2px) !important; } html.theme-floor body .geo-band .geo-pill-link:hover .geo-pin-sm { color: #fff !important; } /* "$750 Value" — brick gradient chip on the heading */ html.theme-floor body .dc-value { display: inline-block !important; padding: .1em .5em !important; border-radius: 10px !important; background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 0 12px 24px -18px rgba(131,52,60,.8) !important; } /* Final CTA strip — mint/sage card, brick gradient button */ html.theme-floor body .cta-strip { background: linear-gradient(180deg, #fff, var(--floor-mint)) !important; } html.theme-floor body .cta-strip .cta-strip-card { background: linear-gradient(150deg, #ffffff 0%, var(--floor-mint) 100%) !important; border: 1px solid rgba(173,196,179,.6) !important; box-shadow: 0 30px 60px -40px rgba(43,32,34,.4) !important; } html.theme-floor body .cta-strip .cta-strip-card h2 { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; } html.theme-floor body .cta-strip .btn, html.theme-floor body .cta-strip .btn-yellow { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 0 16px 30px -18px rgba(131,52,60,.75) !important; } html.theme-floor body .cta-strip .btn:hover, html.theme-floor body .cta-strip .btn-yellow:hover { background: linear-gradient(135deg, var(--floor-brick), #6f2b32) !important; } /* ============================================================ Flooring theme — URGENT offer section, comparison, testimonials (appended last: wins over the earlier flooring overrides) ============================================================ */ html.theme-floor body { --floor-amber: #ffc25a; --floor-amber-deep: #f59623; --floor-night: #221a1c; } /* ---------- Offer section: dark, urgent, amber-on-night ---------- */ html.theme-floor body .offer-section--v8 { background: radial-gradient(120% 70% at 50% -10%, rgba(164, 70, 79, 0.55) 0%, rgba(34, 26, 28, 0) 62%), linear-gradient(180deg, #2a1f21 0%, #1b1415 100%) !important; color: #fff !important; } html.theme-floor body .offer-section--v8 .offer-hype { background: linear-gradient(170deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)) !important; border: 1px solid rgba(255, 194, 90, 0.28) !important; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; color: #fff !important; } html.theme-floor body .offer-section--v8 .offer-mega, html.theme-floor body .offer-section--v8 .offer-sub, html.theme-floor body .offer-section--v8 .offer-clock-label, html.theme-floor body .offer-section--v8 .offer-fine, html.theme-floor body .offer-section--v8 .oc-title, html.theme-floor body .offer-section--v8 .oc-copy, html.theme-floor body .offer-section--v8 .oc-gift-name, html.theme-floor body .offer-section--v8 .oc-gift-copy, html.theme-floor body .offer-section--v8 .beatit-title, html.theme-floor body .offer-section--v8 .beatit-copy, html.theme-floor body .offer-section--v8 .beatit-fine { color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: none !important; background: none !important; } html.theme-floor body .offer-section--v8 .offer-sub, html.theme-floor body .offer-section--v8 .oc-copy, html.theme-floor body .offer-section--v8 .oc-gift-copy, html.theme-floor body .offer-section--v8 .beatit-copy, html.theme-floor body .offer-section--v8 .beatit-fine, html.theme-floor body .offer-section--v8 .offer-fine { color: rgba(255, 255, 255, 0.76) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.76) !important; } /* "Summer Event" + accents in warm amber */ html.theme-floor body .offer-section--v8 .offer-mega-hl, html.theme-floor body .offer-section--v8 .beatit-prize, html.theme-floor body .offer-section--v8 .beatit-prize span, html.theme-floor body .offer-section--v8 .oc-kicker, html.theme-floor body .offer-section--v8 .beatit-kicker { color: var(--floor-amber) !important; -webkit-text-fill-color: var(--floor-amber) !important; background: none !important; text-shadow: 0 0 26px rgba(255, 194, 90, 0.35) !important; } /* Eyebrow: live pulsing "limited time" badge */ html.theme-floor body .offer-section--v8 .offer-eyebrow { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border: 1px solid rgba(255, 194, 90, 0.5) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 0 0 0 0 rgba(255, 194, 90, 0.5) !important; animation: floorUrgentRing 2s ease-out infinite !important; } html.theme-floor body .offer-section--v8 .offer-eyebrow .oe-dot { background: var(--floor-amber) !important; box-shadow: 0 0 10px var(--floor-amber) !important; animation: floorBlink 1s steps(1, end) infinite !important; } @keyframes floorUrgentRing { 0% { box-shadow: 0 0 0 0 rgba(255, 194, 90, 0.45); } 70% { box-shadow: 0 0 0 14px rgba(255, 194, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 194, 90, 0); } } @keyframes floorBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .2; } } @keyframes floorTick { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* Countdown: compact tiles that fit mobile, amber digits, ticking seconds */ html.theme-floor body .offer-clock { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: center !important; gap: .28rem !important; max-width: 100% !important; padding: 0 !important; margin: .7rem auto .2rem !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html.theme-floor body .offer-clock .oc-cell { flex: 0 1 auto !important; min-width: 0 !important; width: clamp(48px, 15vw, 64px) !important; padding: .42rem .3rem .34rem !important; border-radius: 12px !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.25)) !important; border: 1px solid rgba(255, 194, 90, 0.38) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 26px -18px rgba(0, 0, 0, 0.9) !important; } html.theme-floor body .offer-clock .oc-num { font-size: clamp(1.15rem, 4.6vw, 1.6rem) !important; color: var(--floor-amber) !important; -webkit-text-fill-color: var(--floor-amber) !important; text-shadow: 0 0 18px rgba(255, 194, 90, 0.45) !important; } html.theme-floor body .offer-clock .oc-lbl { font-size: .52rem !important; letter-spacing: .14em !important; color: rgba(255, 255, 255, 0.7) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important; } html.theme-floor body .offer-clock .oc-cell:last-of-type .oc-num { animation: floorTick 1s ease-in-out infinite !important; } html.theme-floor body .offer-clock .oc-sep { font-size: 1rem !important; color: rgba(255, 194, 90, 0.7) !important; -webkit-text-fill-color: rgba(255, 194, 90, 0.7) !important; opacity: 1 !important; animation: floorBlink 1s steps(1, end) infinite !important; } html.theme-floor body .offer-section--v8 .offer-clock-label { color: rgba(255, 255, 255, 0.72) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.72) !important; } /* "Offer ends August 31" — hot amber pill */ html.theme-floor body .offer-section--v8 .offer-deadline-line { display: inline-flex !important; align-items: center !important; gap: .4rem !important; background: linear-gradient(135deg, var(--floor-amber), var(--floor-amber-deep)) !important; border: 0 !important; border-radius: 999px !important; padding: .42rem .95rem !important; color: #2a1b12 !important; -webkit-text-fill-color: #2a1b12 !important; font-weight: 800 !important; box-shadow: 0 14px 30px -16px rgba(245, 150, 35, 0.9) !important; animation: floorUrgentRing 2.4s ease-out infinite !important; } html.theme-floor body .offer-section--v8 .offer-deadline-line .offer-deadline, html.theme-floor body .offer-section--v8 .offer-deadline-line strong { color: #2a1b12 !important; -webkit-text-fill-color: #2a1b12 !important; text-shadow: none !important; } /* Cardlets, gifts and price promise on the dark band */ html.theme-floor body .offer-section--v8 .offer-cardlet, html.theme-floor body .offer-section--v8 .beatit, html.theme-floor body .offer-section--v8 .oc-gift { background: linear-gradient(170deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #fff !important; box-shadow: 0 26px 54px -40px rgba(0, 0, 0, 0.9) !important; } html.theme-floor body .offer-section--v8 .offer-cardlet:hover, html.theme-floor body .offer-section--v8 .oc-gift:hover { border-color: rgba(255, 194, 90, 0.55) !important; background: linear-gradient(170deg, rgba(255, 194, 90, 0.14), rgba(255, 255, 255, 0.04)) !important; } html.theme-floor body .offer-section--v8 .oc-badge, html.theme-floor body .offer-section--v8 .oc-gift-ribbon { background: linear-gradient(135deg, var(--floor-amber), var(--floor-amber-deep)) !important; color: #2a1b12 !important; -webkit-text-fill-color: #2a1b12 !important; border-color: transparent !important; } html.theme-floor body .offer-section--v8 .oc-gift-icon { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.16) !important; overflow: hidden !important; } html.theme-floor body .offer-section--v8 .oc-gift-icon img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 12px !important; } html.theme-floor body .offer-section--v8 .oc-gift-or { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: transparent !important; } html.theme-floor body .offer-section--v8 .oc-gift-rule { background: linear-gradient(90deg, var(--floor-amber), transparent) !important; } /* ($750 value) — red chip, white type */ html.theme-floor body .offer-section--v8 .oc-copy em { display: inline-block !important; font-style: normal !important; padding: .12em .55em !important; margin-top: .35rem !important; border-radius: 999px !important; background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800 !important; } html.theme-floor body .offer-section--v8 .offer-lock .btn, html.theme-floor body .offer-section--v8 .btn-lock-white { background: linear-gradient(135deg, var(--floor-amber), var(--floor-amber-deep)) !important; border-color: transparent !important; color: #2a1b12 !important; -webkit-text-fill-color: #2a1b12 !important; box-shadow: 0 18px 36px -18px rgba(245, 150, 35, 0.85) !important; } html.theme-floor body .offer-section--v8 .offer-lock .btn:hover, html.theme-floor body .offer-section--v8 .btn-lock-white:hover { background: linear-gradient(135deg, #ffd486, var(--floor-amber-deep)) !important; } html.theme-floor body .offer-section--v8 .offer-lock .ofl-strong, html.theme-floor body .offer-section--v8 .offer-lock-nudge strong, html.theme-floor body .offer-section--v8 .offer-lock-nudge { color: var(--floor-amber) !important; -webkit-text-fill-color: var(--floor-amber) !important; } /* ---------- Comparison: "the average contractor" column stays grey ---------- */ html.theme-floor body .vstab .vstab-cell--them { background: #f0efec !important; color: #6a6265 !important; -webkit-text-fill-color: #6a6265 !important; } html.theme-floor body .vstab .vstab-cell--them strong { color: #4c4547 !important; -webkit-text-fill-color: #4c4547 !important; } html.theme-floor body .vstab .vstab-row:hover .vstab-cell--them, html.theme-floor body .vstab .vstab-cell--them:hover { background: #e7e5e1 !important; } html.theme-floor body .vstab .vstab-row:hover, html.theme-floor body .vstab .vstab-row:hover .vstab-cell--us, html.theme-floor body .vstab .vstab-row:hover .vstab-cell--topic { background: rgba(236, 244, 237, 0.6) !important; } /* ---------- Testimonials band: no red wall ---------- */ html.theme-floor body .video-section, html.theme-floor body [data-section="video"] { background: linear-gradient(180deg, #ffffff 0%, var(--floor-mint) 100%) !important; color: var(--floor-ink) !important; } html.theme-floor body .video-section h2, html.theme-floor body .video-section h3, html.theme-floor body .video-section .tvs-num, html.theme-floor body .video-section .tvs-head h2, html.theme-floor body .video-section .tvs-next { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; background: none !important; } html.theme-floor body .video-section p, html.theme-floor body .video-section .tvs-lbl, html.theme-floor body .video-section .tvs-head p, html.theme-floor body .video-section .tvs-list li { color: var(--floor-muted) !important; -webkit-text-fill-color: var(--floor-muted) !important; opacity: 1 !important; } html.theme-floor body .video-section .kicker, html.theme-floor body .video-section .tvs-kicker, html.theme-floor body .video-section .tvs-num, html.theme-floor body .video-section .tvs-num [data-bind] { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; } html.theme-floor body .video-section .tvid-stats, html.theme-floor body .video-section .glass, html.theme-floor body .video-section .review-card { background: rgba(255, 255, 255, 0.92) !important; border-color: rgba(173, 196, 179, 0.55) !important; box-shadow: 0 24px 50px -40px rgba(43, 32, 34, 0.4) !important; } /* ---------- No green hover anywhere on this theme ---------- */ html.theme-floor body .btn-primary, html.theme-floor body .dc-submit .btn-primary, html.theme-floor body .section-cta .btn-primary { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } html.theme-floor body .btn-primary:hover, html.theme-floor body .btn-primary:focus-visible, html.theme-floor body .dc-submit .btn-primary:hover, html.theme-floor body .section-cta .btn-primary:hover, html.theme-floor body .btn-ink:hover, html.theme-floor body .btn-yellow:hover { background: linear-gradient(135deg, var(--floor-brick), #6f2b32) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } @media (prefers-reduced-motion: reduce) { html.theme-floor body .offer-section--v8 .offer-eyebrow, html.theme-floor body .offer-section--v8 .offer-deadline-line, html.theme-floor body .offer-clock .oc-sep, html.theme-floor body .offer-clock .oc-cell:last-of-type .oc-num, html.theme-floor body .offer-section--v8 .offer-eyebrow .oe-dot { animation: none !important; } } /* ============================================================ Flooring hero — bolder material line + accent-colored chips ============================================================ */ /* "Hardwood · Vinyl · Tile · Carpet" back to the bold headline treatment */ html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag { display: block !important; font-size: clamp(1.35rem, 6vw, 2.1rem) !important; line-height: 1.12 !important; font-weight: 600 !important; letter-spacing: -0.01em !important; text-transform: none !important; color: #5f8068 !important; -webkit-text-fill-color: #5f8068 !important; margin-top: .35rem !important; white-space: normal !important; } /* Hero chips take the headline accent color */ html.theme-floor body .hero-copy-panel .hero-chips .chip-cta { background: linear-gradient(135deg, #6d8f75, #4f6f58) !important; border: 1px solid rgba(79, 111, 88, 0.9) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 10px 22px -16px rgba(43, 60, 47, 0.75) !important; } html.theme-floor body .hero-copy-panel .hero-chips .chip-cta:hover, html.theme-floor body .hero-copy-panel .hero-chips .chip-cta:focus-visible { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border-color: rgba(131, 52, 60, 0.8) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* ============================================================ Offer + countdown: mobile fit and August 31 urgency hierarchy ============================================================ */ html.theme-floor body .offer-section--v8 .offer-hype { padding-inline: 1rem !important; } html.theme-floor body .offer-section--v8 .offer-mega { font-size: clamp(1.9rem, 9.2vw, 3.4rem) !important; line-height: 1.03 !important; letter-spacing: -0.02em !important; margin: .45rem 0 .5rem !important; } html.theme-floor body .offer-section--v8 .offer-sub { font-size: clamp(.92rem, 3.6vw, 1.02rem) !important; line-height: 1.5 !important; max-width: 34rem !important; margin-inline: auto !important; } /* Eyebrow reads as the deadline first */ html.theme-floor body .offer-section--v8 .offer-eyebrow { font-size: .66rem !important; letter-spacing: .13em !important; padding: .34rem .8rem !important; white-space: normal !important; text-align: center !important; line-height: 1.35 !important; } /* Countdown label */ html.theme-floor body .offer-section--v8 .offer-clock-label { margin: 1rem 0 0 !important; font-size: .62rem !important; letter-spacing: .16em !important; } /* Countdown: one row, never clipped, never oversized on mobile */ html.theme-floor body .offer-clock { gap: .3rem !important; width: 100% !important; max-width: 22rem !important; margin: .55rem auto .55rem !important; overflow: visible !important; } html.theme-floor body .offer-clock .oc-cell { flex: 1 1 0 !important; width: auto !important; max-width: 4.4rem !important; padding: .38rem .18rem .3rem !important; } html.theme-floor body .offer-clock .oc-num { font-size: clamp(1.05rem, 5.4vw, 1.55rem) !important; line-height: 1.05 !important; } html.theme-floor body .offer-clock .oc-lbl { font-size: .5rem !important; letter-spacing: .1em !important; } html.theme-floor body .offer-clock .oc-sep { flex: 0 0 auto !important; align-self: center !important; font-size: .85rem !important; } /* Deadline pill: clear, readable, no emoji tofu */ html.theme-floor body .offer-section--v8 .offer-deadline-line { flex-wrap: wrap !important; justify-content: center !important; gap: .3rem !important; padding: .46rem 1rem !important; font-size: clamp(.8rem, 3.4vw, .95rem) !important; line-height: 1.25 !important; max-width: 20rem !important; margin: .2rem auto .3rem !important; text-align: center !important; } html.theme-floor body .offer-section--v8 .offer-deadline-line .odl-lead, html.theme-floor body .offer-section--v8 .offer-deadline-line .odl-tail { color: #2a1b12 !important; -webkit-text-fill-color: #2a1b12 !important; font-weight: 700 !important; } html.theme-floor body .offer-section--v8 .offer-deadline-line .offer-deadline { font-weight: 900 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; } @media (max-width: 480px) { html.theme-floor body .offer-clock { gap: .22rem !important; } html.theme-floor body .offer-clock .oc-sep { font-size: .72rem !important; } html.theme-floor body .offer-section--v8 .offer-cards { gap: .6rem !important; } html.theme-floor body .offer-section--v8 .offer-cardlet { padding: .95rem .85rem !important; } html.theme-floor body .offer-section--v8 .oc-title { font-size: 1.15rem !important; } } /* ---------- Hero mini countdown + deadline note: on-theme, mobile-tight ---------- */ html.theme-floor body .hero-offer2 .offer-clock--mini { gap: .26rem !important; max-width: 19rem !important; margin: .55rem auto .5rem !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-cell { flex: 1 1 0 !important; width: auto !important; max-width: 4rem !important; padding: .3rem .16rem .26rem !important; border-radius: 11px !important; background: linear-gradient(180deg, #ffffff, #eef4ef) !important; border: 1px solid rgba(164, 70, 79, 0.32) !important; box-shadow: 0 10px 22px -18px rgba(43, 32, 34, 0.6) !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-num { font-size: clamp(1rem, 4.8vw, 1.3rem) !important; color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; text-shadow: none !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-lbl { font-size: .48rem !important; letter-spacing: .1em !important; color: #6b6266 !important; -webkit-text-fill-color: #6b6266 !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-sep { color: rgba(164, 70, 79, 0.6) !important; -webkit-text-fill-color: rgba(164, 70, 79, 0.6) !important; font-size: .8rem !important; } /* "Book by August 31" — solid red pill, no hollow outline */ html.theme-floor body .hero-offer2 .ho2-note { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-weight: 800 !important; padding: .34rem .9rem !important; border-radius: 999px !important; box-shadow: 0 12px 26px -16px rgba(99, 38, 45, 0.75) !important; } html.theme-floor body .hero-offer2 .ho2-note strong { color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px !important; } html.theme-floor body .hero-offer2 .ho2-badge { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: transparent !important; } /* Kill the leftover green→orange rainbow rule under the hero offer link */ html.theme-floor body .hero-offer2 .ho2-link, html.theme-floor body .hero-offer2 .ho2-link::after, html.theme-floor body .hero-offer2 .ho2-link::before { background-image: linear-gradient(90deg, var(--floor-brick), rgba(95, 128, 104, 0.85)) !important; } html.theme-floor body .hero-offer2 .ho2-link { background-image: none !important; color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; } html.theme-floor body .hero-offer2 .ho2-ico, html.theme-floor body .hero-offer2 .ho2-ico svg { color: var(--floor-brick) !important; background: rgba(164, 70, 79, 0.1) !important; } /* Cookie banner: no green type on this theme */ html.theme-floor body .cookie-btn-essential, html.theme-floor body .cookie-banner .cookie-btn:not(.cookie-btn-accept) { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; border-color: rgba(164, 70, 79, 0.35) !important; } /* ============================================================ Hero material line — editorial serif with diamond marks ============================================================ */ html.theme-floor body .hero-h1 .h1-tag--editorial { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; column-gap: 1.35rem !important; row-gap: .5rem !important; margin-top: .7rem !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: clamp(1rem, 2.1vw, 1.35rem) !important; font-weight: 600 !important; line-height: 1.1 !important; letter-spacing: .25em !important; text-transform: uppercase !important; color: #5f8068 !important; -webkit-text-fill-color: #5f8068 !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; text-shadow: none !important; animation: none !important; filter: none !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { transition: color .3s ease, -webkit-text-fill-color .3s ease; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word:hover { color: var(--floor-ink, #2b2022) !important; -webkit-text-fill-color: var(--floor-ink, #2b2022) !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia { display: block !important; width: 5px !important; height: 5px !important; background: rgba(95, 128, 104, 0.4) !important; transform: rotate(45deg) !important; flex: 0 0 auto !important; } @media (max-width: 640px) { html.theme-floor body .hero-h1 .h1-tag--editorial { column-gap: .85rem !important; letter-spacing: .18em !important; font-size: .95rem !important; } } html.theme-floor body .hero-h1 .h1-tag--editorial { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { display: inline-block !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; } html.theme-floor body .hero-h1 .h1-tag--editorial { opacity: 1 !important; transform: none !important; height: auto !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: 1.1 !important; opacity: 1 !important; transform: none !important; animation: none !important; } html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial .h1-tag-word { color: #5f8068 !important; -webkit-text-fill-color: #5f8068 !important; font-size: clamp(1rem, 2.1vw, 1.35rem) !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 600 !important; letter-spacing: .25em !important; } html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial .h1-tag-word:hover { color: var(--floor-ink, #2b2022) !important; -webkit-text-fill-color: var(--floor-ink, #2b2022) !important; } @media (max-width: 640px) { html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial .h1-tag-word { font-size: .95rem !important; letter-spacing: .18em !important; } } html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial { display: flex !important; flex-wrap: wrap !important; align-items: center !important; column-gap: 1.35rem !important; row-gap: .5rem !important; } html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial .h1-tag-word { display: inline-block !important; flex: 0 0 auto !important; width: auto !important; text-align: left !important; } html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial .h1-tag-dia { display: block !important; flex: 0 0 auto !important; width: 5px !important; height: 5px !important; transform: rotate(45deg) !important; background: rgba(95, 128, 104, 0.42) !important; } /* Geo band — sage green accents instead of brick red */ html.theme-floor body .geo-band .geo-pin { background: linear-gradient(160deg, #6f9179, #46614e) !important; box-shadow: 0 10px 20px -14px rgba(70,97,78,.75) !important; } html.theme-floor body .geo-band .geo-pill-link { border: 1px solid rgba(95,128,104,.34) !important; } html.theme-floor body .geo-band .geo-pill-link .geo-pin-sm { color: #5f8068 !important; } html.theme-floor body .geo-band .geo-pill-link:hover, html.theme-floor body .geo-band .geo-pill-link:focus-visible { background: linear-gradient(135deg, #6f9179, #46614e) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } html.theme-floor body .geo-band .geo-pill-link:hover .geo-pin-sm, html.theme-floor body .geo-band .geo-pill-link:focus-visible .geo-pin-sm { color: #fff !important; } /* "$750 value" ribbon chip — brick red bubble, white text */ html.theme-floor body .dc-ribbon .dc-ribbon-val { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 0 10px 22px -16px rgba(131,52,60,.85) !important; } /* ============================================================ Offer section — back to the light brick/mint treatment (removes the dark charcoal + amber look) ============================================================ */ html.theme-floor body .offer-section--v8 { background: linear-gradient(180deg, #ffffff 0%, var(--floor-mint) 100%) !important; color: var(--floor-ink) !important; } html.theme-floor body .offer-section--v8 .offer-hype { background: linear-gradient(160deg, #ffffff 0%, var(--floor-mint-light) 100%) !important; border: 1px solid rgba(173,196,179,.6) !important; box-shadow: 0 34px 70px -46px rgba(43,32,34,.32) !important; color: var(--floor-ink) !important; } html.theme-floor body .offer-section--v8 .offer-mega, html.theme-floor body .offer-section--v8 .oc-title, html.theme-floor body .offer-section--v8 .oc-gift-name, html.theme-floor body .offer-section--v8 .beatit-title, html.theme-floor body .offer-section--v8 .offer-clock-label { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; text-shadow: none !important; background: none !important; } html.theme-floor body .offer-section--v8 .offer-sub, html.theme-floor body .offer-section--v8 .oc-copy, html.theme-floor body .offer-section--v8 .oc-gift-copy, html.theme-floor body .offer-section--v8 .beatit-copy, html.theme-floor body .offer-section--v8 .beatit-fine, html.theme-floor body .offer-section--v8 .offer-fine { color: var(--floor-muted) !important; -webkit-text-fill-color: var(--floor-muted) !important; } /* Highlights back to brick red */ html.theme-floor body .offer-section--v8 .offer-mega-hl, html.theme-floor body .offer-section--v8 .beatit-prize, html.theme-floor body .offer-section--v8 .beatit-prize span, html.theme-floor body .offer-section--v8 .oc-kicker, html.theme-floor body .offer-section--v8 .beatit-kicker { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; background: none !important; text-shadow: none !important; } html.theme-floor body .offer-section--v8 .offer-eyebrow { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } html.theme-floor body .offer-section--v8 .offer-eyebrow .oe-dot { background: #fff !important; box-shadow: none !important; } /* Cards + gift tiles back to light surfaces */ html.theme-floor body .offer-section--v8 .offer-cardlet, html.theme-floor body .offer-section--v8 .oc-gift, html.theme-floor body .offer-section--v8 .beatit { background: linear-gradient(170deg, #ffffff 0%, var(--floor-mint-light) 100%) !important; border: 1px solid rgba(173,196,179,.6) !important; box-shadow: 0 18px 40px -34px rgba(43,32,34,.35) !important; color: var(--floor-ink) !important; } html.theme-floor body .offer-section--v8 .oc-badge, html.theme-floor body .offer-section--v8 .oc-gift-flag { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important; } /* Countdown tiles: white tiles, brick digits */ html.theme-floor body .offer-clock .oc-cell { background: linear-gradient(180deg, #ffffff, var(--floor-mint)) !important; border: 1px solid rgba(164,70,79,.22) !important; box-shadow: 0 12px 26px -22px rgba(43,32,34,.5) !important; } html.theme-floor body .offer-clock .oc-num { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; text-shadow: none !important; } html.theme-floor body .offer-clock .oc-lab, html.theme-floor body .offer-clock .oc-sep { color: var(--floor-muted) !important; -webkit-text-fill-color: var(--floor-muted) !important; } /* "Book by August 31" pill back to brick red */ html.theme-floor body .offer-section--v8 .offer-deadline, html.theme-floor body .offer-section--v8 .offer-ends, html.theme-floor body .offer-section--v8 .offer-endnote { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important; animation: none !important; } /* Offer section — remove remaining amber, fix countdown labels */ html.theme-floor body .offer-section--v8 .offer-clock .oc-lab { color: var(--floor-muted) !important; -webkit-text-fill-color: var(--floor-muted) !important; opacity: 1 !important; } html.theme-floor body .offer-section--v8 .offer-note, html.theme-floor body .offer-section--v8 .offer-deadline-note, html.theme-floor body .offer-section--v8 [class*="offer-book"] { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important; } html.theme-floor body .offer-section--v8 .btn, html.theme-floor body .offer-section--v8 .btn-yellow, html.theme-floor body .offer-section--v8 .offer-cta { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important; } html.theme-floor body .offer-section--v8 .btn svg, html.theme-floor body .offer-section--v8 .btn span { color: #fff !important; -webkit-text-fill-color: #fff !important; } html.theme-floor body .offer-section--v8 .offer-scarcity, html.theme-floor body .offer-section--v8 .offer-slots { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; } html.theme-floor body .offer-section--v8 .oc-gift-flag, html.theme-floor body .offer-section--v8 .oc-gift::before, html.theme-floor body .offer-section--v8 .oc-gift-name::after { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; } /* Offer section — final amber cleanup */ html.theme-floor body .offer-section--v8 .offer-deadline-line, html.theme-floor body .offer-section--v8 .oc-gift-ribbon, html.theme-floor body .offer-section--v8 .btn-lock-white { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important; } html.theme-floor body .offer-section--v8 .offer-deadline-line *, html.theme-floor body .offer-section--v8 .btn-lock-white * { color: #fff !important; -webkit-text-fill-color: #fff !important; } html.theme-floor body .offer-section--v8 .oc-gift-rule { background: linear-gradient(90deg, var(--floor-brick), rgba(0,0,0,0)) !important; } html.theme-floor body .offer-section--v8 .ofl-strong { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; } html.theme-floor body .offer-section--v8 .offer-clock .oc-cell span:last-child, html.theme-floor body .offer-section--v8 .offer-clock .oc-cell small { color: var(--floor-muted) !important; -webkit-text-fill-color: var(--floor-muted) !important; opacity: 1 !important; } html.theme-floor body .offer-section--v8 .offer-lock .btn, html.theme-floor body .offer-section--v8 .offer-lock .btn-lock-white, html.theme-floor body .offer-section--v8 .offer-lock .btn:hover, html.theme-floor body .offer-section--v8 .offer-lock .btn-lock-white:hover { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 0 18px 36px -20px rgba(131,52,60,.85) !important; } html.theme-floor body .offer-section--v8 .offer-lock .btn * { color: #fff !important; -webkit-text-fill-color: #fff !important; } html.theme-floor body .offer-section--v8 .offer-lock .ofl-strong, html.theme-floor body .offer-section--v8 .offer-lock-nudge strong, html.theme-floor body .offer-section--v8 .offer-lock-nudge { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; } /* ── Trust strip: center each badge + tidy Google row ── */ .trust-strip .trust-strip-row { align-items: stretch; } .trust-strip .trust-badge { justify-content: center; align-items: center; text-align: left; gap: 0.7rem; padding-left: clamp(0.8rem, 1.6vw, 1.1rem); padding-right: clamp(0.8rem, 1.6vw, 1.1rem); } .trust-strip .trust-badge > .g-body { flex: 0 1 auto; } .trust-strip .trust-badge strong { font-size: 0.95rem; line-height: 1.25; } .trust-strip .trust-badge--google .g-top { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .trust-strip .trust-badge--google .g-on { margin-left: 0.1rem; } @media (max-width: 979px) { .trust-strip .trust-badge { justify-content: flex-start; } } @media (min-width: 980px) { .trust-strip .trust-badge strong { font-size: 0.88rem; letter-spacing: -0.005em; white-space: nowrap; } .trust-strip .trust-badge small { font-size: 0.78rem; white-space: nowrap; } .trust-strip .trust-badge--google .g-score { font-size: 1.05rem; } } /* ── Hero material line v2: clean sans, tighter tracking, bar separators ── */ html.theme-floor body .hero-h1 .h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial { font-family: inherit !important; font-size: clamp(.8rem, 1.35vw, 1rem) !important; font-weight: 700 !important; letter-spacing: .12em !important; column-gap: .8rem !important; row-gap: .45rem !important; margin-top: .85rem !important; color: #4a6a52 !important; -webkit-text-fill-color: #4a6a52 !important; } html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { font-family: inherit !important; font-size: inherit !important; font-weight: 700 !important; letter-spacing: .12em !important; color: #4a6a52 !important; -webkit-text-fill-color: #4a6a52 !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia { width: 1px !important; height: 11px !important; border-radius: 0 !important; transform: none !important; background: rgba(74, 106, 82, 0.42) !important; } @media (max-width: 640px) { html.theme-floor body .hero-h1 .h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial .h1-tag-word { font-size: .74rem !important; letter-spacing: .1em !important; } html.theme-floor body .hero-h1 .h1-tag--editorial { column-gap: .6rem !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia { height: 9px !important; } } /* ── Offer link: back to dark ink, simple underline (no red tint) ── */ html.theme-floor body .hero-offer2 .ho2-link, html.theme-floor body .hero-offer2 .ho2-link:visited { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; background-image: none !important; } html.theme-floor body .hero-offer2 .ho2-link::after { background: rgba(43, 32, 34, 0.35) !important; background-image: none !important; } html.theme-floor body .hero-offer2 .ho2-link:hover, html.theme-floor body .hero-offer2 .ho2-link:hover::after { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; } /* ── "Book by August 31": soft mint ticket instead of solid red pill ── */ html.theme-floor body .hero-offer2 .ho2-note, html.theme-floor body .ho2-note { display: inline-flex !important; align-items: center !important; gap: .4rem !important; background: linear-gradient(135deg, #ffffff, var(--floor-mint-light)) !important; border: 1px solid rgba(95, 128, 104, .45) !important; border-left: 4px solid var(--floor-brick) !important; border-radius: 4px 999px 999px 4px !important; padding: .38rem .95rem .38rem .8rem !important; color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; font-size: .78rem !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: uppercase !important; box-shadow: 0 8px 20px -16px rgba(43,32,34,.55) !important; } html.theme-floor body .hero-offer2 .ho2-note strong, html.theme-floor body .ho2-note strong { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; font-weight: 900 !important; text-decoration: none !important; letter-spacing: .01em !important; } /* ── Hero material line v3: soft chips ── */ html.theme-floor body .hero-h1 .h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial { column-gap: .4rem !important; row-gap: .4rem !important; letter-spacing: .06em !important; font-size: clamp(.68rem, 1.05vw, .78rem) !important; text-transform: uppercase !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial .h1-tag-word { padding: .3rem .68rem !important; border-radius: 999px !important; background: rgba(95, 128, 104, .12) !important; border: 1px solid rgba(95, 128, 104, .28) !important; color: #3f5c47 !important; -webkit-text-fill-color: #3f5c47 !important; font-size: inherit !important; font-weight: 700 !important; letter-spacing: .06em !important; transition: background .25s ease, color .25s ease, border-color .25s ease !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word:hover { background: rgba(95, 128, 104, .95) !important; border-color: rgba(95, 128, 104, .95) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia { display: none !important; } @media (max-width: 640px) { html.theme-floor body .hero-h1 .h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial .h1-tag-word { font-size: .66rem !important; letter-spacing: .05em !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { padding: .26rem .55rem !important; } } html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial .h1-tag-dia { display: none !important; } /* ── Offer deadline line: mint ticket (no black-on-red) ── */ html.theme-floor body .offer-section--v8 .offer-deadline-line { display: inline-flex !important; align-items: center !important; gap: .35rem !important; flex-wrap: wrap !important; justify-content: center !important; background: linear-gradient(135deg, #ffffff, var(--floor-mint-light)) !important; background-image: linear-gradient(135deg, #ffffff, var(--floor-mint-light)) !important; border: 1px solid rgba(95, 128, 104, .45) !important; border-left: 4px solid var(--floor-brick) !important; border-radius: 4px 999px 999px 4px !important; padding: .42rem 1rem .42rem .85rem !important; color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; box-shadow: 0 10px 24px -18px rgba(43,32,34,.55) !important; animation: none !important; text-shadow: none !important; } html.theme-floor body .offer-section--v8 .offer-deadline-line::after, html.theme-floor body .offer-section--v8 .offer-deadline-line::before { display: none !important; } html.theme-floor body .offer-section--v8 .offer-deadline-line, html.theme-floor body .offer-section--v8 .offer-deadline-line .odl-lead, html.theme-floor body .offer-section--v8 .offer-deadline-line .odl-tail { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; } html.theme-floor body .offer-section--v8 .offer-deadline-line strong, html.theme-floor body .offer-section--v8 .offer-deadline-line .offer-deadline { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; background: none !important; background-image: none !important; font-weight: 900 !important; } /* ── Hero material line v4: plain gentle text, one line, no chips ── */ html.theme-floor body .hero-h1 .h1-line.h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: .5rem !important; margin-top: .7rem !important; font-family: inherit !important; background: none !important; border: 0 !important; padding: 0 !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { display: inline !important; background: none !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; font-family: inherit !important; font-size: clamp(.82rem, 1.25vw, 1rem) !important; font-weight: 400 !important; font-style: normal !important; text-transform: none !important; letter-spacing: .01em !important; line-height: 1.3 !important; white-space: nowrap !important; transition: none !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word:hover { background: none !important; color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial .h1-tag-dia { display: inline-block !important; width: 3px !important; height: 3px !important; border-radius: 50% !important; transform: none !important; background: rgba(43, 32, 34, .38) !important; box-shadow: none !important; border: 0 !important; margin: 0 !important; flex: 0 0 auto !important; } @media (max-width: 560px) { html.theme-floor body .hero-h1 .h1-tag--editorial { gap: .42rem !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { font-size: .78rem !important; } } html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word { display: inline !important; background: none !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; font-family: inherit !important; font-size: clamp(.82rem, 1.25vw, 1rem) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: .01em !important; white-space: nowrap !important; } @media (max-width: 560px) { html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word { font-size: .78rem !important; } } /* ── Hero material line v5: centered, luxury serif, plain black, zero chips ── */ html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial, html.theme-floor body .hero-h1 .h1-line.h1-tag--editorial { display: block !important; text-align: center !important; width: 100% !important; background: none !important; border: 0 !important; padding: 0 !important; margin-top: .8rem !important; white-space: nowrap !important; } html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { display: inline !important; background: none !important; background-image: none !important; background-color: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; color: #14181d !important; -webkit-text-fill-color: #14181d !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: clamp(.95rem, 1.55vw, 1.2rem) !important; font-weight: 500 !important; font-style: normal !important; text-transform: none !important; letter-spacing: .04em !important; line-height: 1.35 !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word:hover { background: none !important; color: #14181d !important; -webkit-text-fill-color: #14181d !important; } html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-dia, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-dia, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia { display: inline !important; width: auto !important; height: auto !important; border-radius: 0 !important; background: none !important; transform: none !important; box-shadow: none !important; border: 0 !important; margin: 0 !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia::before { content: " · " !important; color: rgba(20,24,29,.45) !important; -webkit-text-fill-color: rgba(20,24,29,.45) !important; font-family: "Cormorant Garamond", Georgia, serif !important; } @media (max-width: 560px) { html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { font-size: .92rem !important; letter-spacing: .03em !important; } } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia { padding: 0 .3em !important; } /* ── Hero material line v6: larger, modern sans, clearly readable ── */ html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { font-family: "Sora", "Figtree", system-ui, sans-serif !important; font-size: clamp(1.02rem, 1.9vw, 1.42rem) !important; font-weight: 500 !important; letter-spacing: .015em !important; color: #10151a !important; -webkit-text-fill-color: #10151a !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia::before { content: "·" !important; font-family: "Sora", "Figtree", system-ui, sans-serif !important; color: rgba(16,21,26,.55) !important; -webkit-text-fill-color: rgba(16,21,26,.55) !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia { padding: 0 .42em !important; } @media (max-width: 560px) { html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { font-size: 1rem !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia { padding: 0 .3em !important; } } /* ── Hero material line v7: stronger contrast, no bubbles, readable at a glance ── */ html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial, html.theme-floor body .hero-h1 .h1-line.h1-tag--editorial { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 0 !important; opacity: 1 !important; margin-top: 1rem !important; line-height: 1.2 !important; } html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { font-family: Avenir, "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif !important; font-size: clamp(1.18rem, 2.25vw, 1.62rem) !important; font-weight: 650 !important; letter-spacing: .03em !important; line-height: 1.2 !important; color: #05070a !important; -webkit-text-fill-color: #05070a !important; opacity: 1 !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word:hover { color: #05070a !important; -webkit-text-fill-color: #05070a !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia::before { content: "·" !important; font-family: Avenir, "Avenir Next", "Helvetica Neue", Arial, system-ui, sans-serif !important; font-size: .95em !important; color: rgba(5,7,10,.82) !important; -webkit-text-fill-color: rgba(5,7,10,.82) !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia { padding: 0 .48em !important; } @media (max-width: 560px) { html.theme-floor body .hero-h1 .h1-line.h1-tag--editorial { margin-top: .85rem !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { font-size: clamp(.98rem, 4.15vw, 1.12rem) !important; letter-spacing: .012em !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia { padding: 0 .25em !important; } } /* ========================================================================== CTA GLOW — header + sticky bar + general buttons (sage/brick halo) ========================================================================== */ html.theme-floor body .site-header .header-phone, html.theme-floor body .site-header .header-cta, html.theme-floor body .site-header .btn, html.theme-floor body .sticky-bar .btn, html.theme-floor body .sticky-bar--v2 .sticky-call, html.theme-floor body .btn-primary { position: relative; transition: box-shadow .28s ease, transform .18s ease, filter .18s ease !important; } /* resting soft glow on the top CTA + sticky CTA */ html.theme-floor body .site-header .header-phone, html.theme-floor body .site-header .header-cta, html.theme-floor body .sticky-bar .btn, html.theme-floor body .sticky-bar--v2 .sticky-call { box-shadow: 0 0 0 1px rgba(95, 128, 104, .18), 0 0 18px -4px rgba(95, 128, 104, .45), 0 10px 26px -18px rgba(43, 32, 34, .5) !important; } /* hover glow — brick red for primary actions */ html.theme-floor body .site-header .header-phone:hover, html.theme-floor body .site-header .header-cta:hover, html.theme-floor body .site-header .btn:hover, html.theme-floor body .sticky-bar .btn:hover, html.theme-floor body .sticky-bar--v2 .sticky-call:hover, html.theme-floor body .btn-primary:hover { transform: translateY(-1px) !important; filter: brightness(1.04); box-shadow: 0 0 0 3px rgba(164, 70, 79, .16), 0 0 26px 0 rgba(164, 70, 79, .45), 0 0 60px -14px rgba(95, 128, 104, .55), 0 18px 38px -22px rgba(43, 32, 34, .55) !important; } html.theme-floor body .site-header .header-phone:focus-visible, html.theme-floor body .sticky-bar--v2 .sticky-call:focus-visible, html.theme-floor body .btn-primary:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(95, 128, 104, .35), 0 0 28px 0 rgba(164, 70, 79, .4) !important; } @media (prefers-reduced-motion: reduce) { html.theme-floor body .btn-primary:hover, html.theme-floor body .site-header .header-phone:hover, html.theme-floor body .sticky-bar--v2 .sticky-call:hover { transform: none !important; } } /* ── Hero material line v8: back to the original gentle version ── */ html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial, html.theme-floor body .hero-h1 .h1-line.h1-tag--editorial { margin-top: .75rem !important; justify-content: center !important; } html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { font-family: inherit !important; font-size: clamp(.84rem, 1.3vw, 1.02rem) !important; font-weight: 400 !important; letter-spacing: .012em !important; line-height: 1.3 !important; color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word:hover { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia::before { content: "·" !important; font-family: inherit !important; font-size: 1em !important; color: rgba(43, 32, 34, .45) !important; -webkit-text-fill-color: rgba(43, 32, 34, .45) !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia { padding: 0 .34em !important; } @media (max-width: 560px) { html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { font-size: .8rem !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia { padding: 0 .26em !important; } } /* materials line: a touch bolder */ html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { font-weight: 600 !important; } /* ── Animated CTA glow: hero + sticky + primary buttons ── */ @keyframes floorCtaGlow { 0%, 100% { box-shadow: 0 0 0 1px rgba(95, 128, 104, .2), 0 0 16px -2px rgba(164, 70, 79, .38), 0 12px 28px -20px rgba(43, 32, 34, .5); } 50% { box-shadow: 0 0 0 3px rgba(164, 70, 79, .14), 0 0 30px 2px rgba(164, 70, 79, .55), 0 0 62px -12px rgba(95, 128, 104, .5), 0 16px 34px -22px rgba(43, 32, 34, .55); } } html.theme-floor body .hero-actions .btn-primary, html.theme-floor body .site-header .header-phone, html.theme-floor body .site-header .header-cta, html.theme-floor body .sticky-bar .btn, html.theme-floor body .sticky-bar--v2 .sticky-call, html.theme-floor body .final-cta .btn-primary, html.theme-floor body .cta-strip .btn-primary { animation: floorCtaGlow 2.8s ease-in-out infinite !important; } html.theme-floor body .hero-actions .btn-primary:hover, html.theme-floor body .site-header .header-phone:hover, html.theme-floor body .site-header .header-cta:hover, html.theme-floor body .sticky-bar .btn:hover, html.theme-floor body .sticky-bar--v2 .sticky-call:hover, html.theme-floor body .final-cta .btn-primary:hover, html.theme-floor body .cta-strip .btn-primary:hover { animation: none !important; box-shadow: 0 0 0 3px rgba(164, 70, 79, .18), 0 0 34px 2px rgba(164, 70, 79, .55), 0 0 70px -10px rgba(95, 128, 104, .6), 0 20px 40px -22px rgba(43, 32, 34, .58) !important; } @media (prefers-reduced-motion: reduce) { html.theme-floor body .hero-actions .btn-primary, html.theme-floor body .site-header .header-phone, html.theme-floor body .sticky-bar--v2 .sticky-call { animation: none !important; } } /* ── Materials line: soft glow ── */ @keyframes floorMatGlow { 0%, 100% { text-shadow: 0 0 6px rgba(95,128,104,.28), 0 0 14px rgba(255,255,255,.5); } 50% { text-shadow: 0 0 12px rgba(95,128,104,.55), 0 0 26px rgba(164,70,79,.28), 0 0 20px rgba(255,255,255,.6); } } html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { animation: floorMatGlow 3.2s ease-in-out infinite !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia::before { text-shadow: 0 0 8px rgba(95,128,104,.4) !important; } @media (prefers-reduced-motion: reduce) { html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { animation: none !important; text-shadow: 0 0 10px rgba(95,128,104,.4) !important; } } /* ── Trust strip: fully centered badges ── */ html.theme-floor body .trust-strip .trust-strip-row { justify-content: center !important; align-items: center !important; text-align: center !important; } html.theme-floor body .trust-strip { padding-top: clamp(3.5rem, 7vw, 5rem) !important; padding-bottom: clamp(3.5rem, 7vw, 5rem) !important; } html.theme-floor body .trust-strip .trust-badge { justify-content: center !important; align-items: center !important; text-align: center !important; } html.theme-floor body .trust-strip .trust-badge strong, html.theme-floor body .trust-strip .trust-badge small, html.theme-floor body .trust-strip .trust-badge > .g-body { text-align: center !important; } html.theme-floor body .trust-strip .trust-badge--google .g-top { justify-content: center !important; } @media (max-width: 760px) { html.theme-floor body .trust-strip .trust-strip-row { flex-direction: column !important; align-items: center !important; } html.theme-floor body .trust-strip .trust-badge { width: 100% !important; justify-content: center !important; text-align: center !important; } } /* ── Final visibility pass: countdown clock + material-line glow ── */ html.theme-floor body .hero-offer2 .offer-clock--mini, html.theme-floor body .offer-section--v8 .offer-clock { gap: clamp(.34rem, 1.2vw, .58rem) !important; filter: drop-shadow(0 0 18px rgba(95, 128, 104, .34)) !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-cell, html.theme-floor body .offer-section--v8 .offer-clock .oc-cell { background: linear-gradient(180deg, #ffffff 0%, #f8fbf7 48%, var(--floor-mint-light) 100%) !important; border: 1px solid rgba(95, 128, 104, .52) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .82) inset, 0 0 18px rgba(95, 128, 104, .22), 0 14px 28px -20px rgba(43, 32, 34, .55) !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-num, html.theme-floor body .offer-section--v8 .offer-clock .oc-num { color: var(--floor-brick-dark) !important; -webkit-text-fill-color: var(--floor-brick-dark) !important; font-weight: 950 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 16px rgba(164, 70, 79, .24) !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-lbl, html.theme-floor body .offer-section--v8 .offer-clock .oc-lbl, html.theme-floor body .offer-section--v8 .offer-clock .oc-lab, html.theme-floor body .offer-section--v8 .offer-clock .oc-cell small, html.theme-floor body .offer-section--v8 .offer-clock .oc-cell span:last-child { color: var(--floor-ink) !important; -webkit-text-fill-color: var(--floor-ink) !important; opacity: 1 !important; font-weight: 850 !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-sep, html.theme-floor body .offer-section--v8 .offer-clock .oc-sep { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; opacity: 1 !important; text-shadow: 0 0 12px rgba(164, 70, 79, .42) !important; } @media (max-width: 560px) { html.theme-floor body .hero-offer2 .offer-clock--mini, html.theme-floor body .offer-section--v8 .offer-clock { gap: .22rem !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-cell, html.theme-floor body .offer-section--v8 .offer-clock .oc-cell { padding: .42rem .12rem .34rem !important; min-width: 0 !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-num, html.theme-floor body .offer-section--v8 .offer-clock .oc-num { font-size: clamp(1.15rem, 7vw, 1.42rem) !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-lbl, html.theme-floor body .offer-section--v8 .offer-clock .oc-lbl, html.theme-floor body .offer-section--v8 .offer-clock .oc-lab, html.theme-floor body .offer-section--v8 .offer-clock .oc-cell small, html.theme-floor body .offer-section--v8 .offer-clock .oc-cell span:last-child { font-size: .52rem !important; letter-spacing: .08em !important; } } @keyframes floorMaterialReadableGlow { 0%, 100% { text-shadow: 0 0 3px rgba(255, 255, 255, .95), 0 0 10px rgba(95, 128, 104, .45), 0 0 22px rgba(95, 128, 104, .30); } 50% { text-shadow: 0 0 4px rgba(255, 255, 255, 1), 0 0 16px rgba(95, 128, 104, .72), 0 0 34px rgba(95, 128, 104, .46), 0 0 42px rgba(164, 70, 79, .22); } } html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial, html.theme-floor body .hero-h1 .h1-line.h1-tag--editorial { filter: drop-shadow(0 0 14px rgba(95, 128, 104, .46)) drop-shadow(0 0 26px rgba(255, 255, 255, .52)) !important; } html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { color: #090d10 !important; -webkit-text-fill-color: #090d10 !important; font-weight: 650 !important; text-shadow: 0 0 3px rgba(255, 255, 255, .98), 0 0 12px rgba(95, 128, 104, .58), 0 0 28px rgba(95, 128, 104, .42) !important; animation: floorMaterialReadableGlow 2.6s ease-in-out infinite !important; } html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia::before { color: rgba(9, 13, 16, .72) !important; -webkit-text-fill-color: rgba(9, 13, 16, .72) !important; text-shadow: 0 0 10px rgba(95, 128, 104, .55) !important; } @media (prefers-reduced-motion: reduce) { html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word { animation: none !important; text-shadow: 0 0 3px rgba(255, 255, 255, .95), 0 0 16px rgba(95, 128, 104, .62) !important; } } /* ── Hero offer badge: keep it on a single line ── */ html.theme-floor body .hero-offer2 .ho2-badge, html.theme-floor body .ho2-badge { white-space: nowrap !important; } /* No pulsing glow on the header CTAs — keep it calm up top */ html.theme-floor body .site-header .header-phone, html.theme-floor body .site-header .header-cta { animation: none !important; } /* Materials line: no glow at all — plain gentle ink text */ html.theme-floor body .hero-h1 .h1-tag--editorial, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-tag--editorial .h1-tag-word { animation: none !important; text-shadow: none !important; } /* ── Header CTAs: on-palette, high contrast, calm hover ── */ html.theme-floor body .site-header .header-cta { background: linear-gradient(135deg, #6d8f76, #46634f) !important; border: 1px solid rgba(38, 62, 46, .35) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 8px 18px -14px rgba(38, 62, 46, .6) !important; transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease !important; } html.theme-floor body .site-header .header-cta:hover { background: linear-gradient(135deg, #5c8067, #3a5442) !important; transform: translateY(-1px) !important; box-shadow: 0 12px 22px -14px rgba(38, 62, 46, .7) !important; } html.theme-floor body .site-header .header-phone { background: #ffffff !important; border: 1px solid rgba(95, 128, 104, .45) !important; color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; box-shadow: none !important; transition: background .18s ease, transform .18s ease, border-color .18s ease, color .18s ease !important; } html.theme-floor body .site-header .header-phone:hover { background: var(--floor-mint-light) !important; border-color: rgba(164, 70, 79, .5) !important; color: var(--floor-brick-dark) !important; -webkit-text-fill-color: var(--floor-brick-dark) !important; transform: translateY(-1px) !important; box-shadow: none !important; } html.theme-floor body .site-header .header-phone svg, html.theme-floor body .site-header .header-cta svg { color: currentColor !important; } /* ── Final CTA/timer interaction cleanup ─────────────────────── Header phone behaves like a normal CTA: stable white text on red, no white-on-white hover. Countdown tiles are red with white numbers. Material line has zero glow. */ html.theme-floor body .site-header a.header-phone, html.theme-floor body .site-header a.header-phone.cta-glow { isolation: isolate; overflow: hidden; background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border: 1px solid rgba(131, 52, 60, .55) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 12px 26px -16px rgba(131, 52, 60, .8), inset 0 1px 0 rgba(255,255,255,.18) !important; animation: none !important; filter: none !important; transition: transform .18s ease, background .18s ease, box-shadow .18s ease, filter .18s ease !important; } html.theme-floor body .site-header a.header-phone .phone-label, html.theme-floor body .site-header a.header-phone .phone-number, html.theme-floor body .site-header a.header-phone:hover .phone-label, html.theme-floor body .site-header a.header-phone:hover .phone-number, html.theme-floor body .site-header.scrolled a.header-phone .phone-label, html.theme-floor body .site-header.scrolled a.header-phone .phone-number { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html.theme-floor body .site-header a.header-phone .icon-wrap { background: rgba(255,255,255,.16) !important; color: #ffffff !important; box-shadow: none !important; } html.theme-floor body .site-header a.header-phone .icon-wrap svg, html.theme-floor body .site-header a.header-phone:hover .icon-wrap svg { stroke: #ffffff !important; color: #ffffff !important; } html.theme-floor body .site-header a.header-phone::before { content: ""; position: absolute; inset: -40% auto -40% -55%; z-index: -1; width: 45%; transform: skewX(-18deg) translateX(-120%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); opacity: 0; pointer-events: none; } @media (hover: hover) { html.theme-floor body .site-header a.header-phone:hover, html.theme-floor body .site-header a.header-phone.cta-glow:hover { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; transform: translateY(-1px) !important; filter: brightness(1.05) !important; box-shadow: 0 16px 30px -16px rgba(131, 52, 60, .9), inset 0 1px 0 rgba(255,255,255,.2) !important; } html.theme-floor body .site-header a.header-phone:hover::before { opacity: 1; animation: ctaSweepLeftRight .72s ease-out both; } } @keyframes ctaSweepLeftRight { from { transform: skewX(-18deg) translateX(-120%); } to { transform: skewX(-18deg) translateX(360%); } } /* Keep the comparison-table header from changing on hover. */ html.theme-floor body .vstab .vstab-row--head:hover, html.theme-floor body .vstab .vstab-row--head:hover .vstab-cell, html.theme-floor body .vstab .vstab-row--head .vstab-cell:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html.theme-floor body .vstab .vstab-row--head:hover .vstab-cell--topic, html.theme-floor body .vstab .vstab-row--head .vstab-cell--topic:hover, html.theme-floor body .vstab .vstab-row--head:hover .vstab-cell--them, html.theme-floor body .vstab .vstab-row--head .vstab-cell--them:hover { background: linear-gradient(180deg, #b8555e, #a4464f) !important; } html.theme-floor body .vstab .vstab-row--head:hover .vstab-cell--us, html.theme-floor body .vstab .vstab-row--head .vstab-cell--us:hover { background: linear-gradient(180deg, #a4464f, #63262d) !important; } /* Phone icons on CTA buttons must stay visible on red/green CTA surfaces. */ html.theme-floor body a[href^="tel:"]:not(.footer-contact-row).btn svg, html.theme-floor body a[href^="tel:"]:not(.footer-contact-row).cta-glow svg, html.theme-floor body a[href^="tel:"]:not(.footer-contact-row).section-call-btn svg, html.theme-floor body a[href^="tel:"]:not(.footer-contact-row).sticky-call svg, html.theme-floor body .btn-primary svg, html.theme-floor body .btn-lock svg, html.theme-floor body .section-call-btn .section-call-ico { stroke: #ffffff !important; color: #ffffff !important; } /* Countdown clock: red tiles, white numbers, readable labels. */ html.theme-floor body .hero-offer2 .offer-clock--mini, html.theme-floor body .offer-section--v8 .offer-clock { filter: drop-shadow(0 12px 24px rgba(131, 52, 60, .22)) !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-cell, html.theme-floor body .offer-section--v8 .offer-clock .oc-cell { background: linear-gradient(135deg, var(--floor-brick-mid), var(--floor-brick-dark)) !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 24px -16px rgba(131, 52, 60, .85) !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-num, html.theme-floor body .offer-section--v8 .offer-clock .oc-num { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: none !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-lbl, html.theme-floor body .offer-section--v8 .offer-clock .oc-lbl, html.theme-floor body .offer-section--v8 .offer-clock .oc-lab, html.theme-floor body .offer-section--v8 .offer-clock .oc-cell small, html.theme-floor body .offer-section--v8 .offer-clock .oc-cell span:last-child { color: rgba(255,255,255,.88) !important; -webkit-text-fill-color: rgba(255,255,255,.88) !important; text-shadow: none !important; } html.theme-floor body .hero-offer2 .offer-clock--mini .oc-sep, html.theme-floor body .offer-section--v8 .offer-clock .oc-sep { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; text-shadow: none !important; } /* Material line: plain text only, no animation/filter/text glow. */ html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial, html.theme-floor body .hero-h1 .h1-line.h1-tag--editorial, html.theme-floor body .hero-section .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-copy-panel .hero-h1 .h1-line.h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-word, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia, html.theme-floor body .hero-h1 .h1-tag--editorial .h1-tag-dia::before { animation: none !important; filter: none !important; text-shadow: none !important; box-shadow: none !important; } /* Hero kicker — lighter weight */ html.theme-floor body .hero-h1 .h1-kicker, html.theme-floor body .hero-copy .hero-h1 .h1-kicker { font-weight: 400 !important; } /* ── Hero offer badge: animated shimmer + soft pulse ── */ @keyframes ho2BadgeSweep { 0% { background-position: 200% 50%; } 100% { background-position: -100% 50%; } } @keyframes ho2BadgePulse { 0%, 100% { box-shadow: 0 10px 22px -16px rgba(38, 62, 46, .8), 0 0 0 0 rgba(109, 143, 118, .45); } 55% { box-shadow: 0 10px 22px -16px rgba(38, 62, 46, .8), 0 0 0 7px rgba(109, 143, 118, 0); } } @keyframes ho2DotBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } } html.theme-floor body .hero-offer2 .ho2-badge, html.theme-floor body .ho2-badge { position: relative !important; overflow: hidden !important; animation: ho2BadgePulse 2.4s ease-in-out infinite !important; } html.theme-floor body .hero-offer2 .ho2-badge::before, html.theme-floor body .ho2-badge::before { content: "" !important; position: absolute !important; inset: 0 !important; display: block !important; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) !important; background-size: 220% 100% !important; animation: ho2BadgeSweep 2.8s linear infinite !important; pointer-events: none !important; } html.theme-floor body .hero-offer2 .ho2-badge::after, html.theme-floor body .ho2-badge::after { content: "" !important; position: static !important; display: none !important; } /* ── "Book by August 31" ticket: richer brick/green treatment ── */ html.theme-floor body .hero-offer2 .ho2-note, html.theme-floor body .ho2-note, html.theme-floor body .offer-section--v8 .offer-deadline-line { background: linear-gradient(135deg, #fff 0%, #fdeef0 62%, var(--floor-mint-light) 100%) !important; background-image: linear-gradient(135deg, #fff 0%, #fdeef0 62%, var(--floor-mint-light) 100%) !important; border: 1px solid rgba(164, 70, 79, .38) !important; border-left: 5px solid var(--floor-brick) !important; box-shadow: 0 12px 26px -18px rgba(164, 70, 79, .6) !important; transition: transform .18s ease, box-shadow .22s ease !important; } html.theme-floor body .hero-offer2 .ho2-note:hover, html.theme-floor body .offer-section--v8 .offer-deadline-line:hover { transform: translateY(-1px) !important; box-shadow: 0 16px 30px -18px rgba(164, 70, 79, .7) !important; } html.theme-floor body .hero-offer2 .ho2-note strong, html.theme-floor body .ho2-note strong { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; font-weight: 900 !important; letter-spacing: -.01em !important; } /* ── "See the full Summer Offer →": stronger, less pale ── */ html.theme-floor body .hero-offer2 .ho2-link, html.theme-floor body .hero-offer2 .ho2-link:visited { color: var(--floor-brick) !important; -webkit-text-fill-color: var(--floor-brick) !important; font-weight: 800 !important; letter-spacing: -.01em !important; } html.theme-floor body .hero-offer2 .ho2-link::after { background: var(--floor-brick) !important; height: 2px !important; opacity: .85 !important; } html.theme-floor body .hero-offer2 .ho2-link:hover, html.theme-floor body .hero-offer2 .ho2-link:hover::after { color: #7f3239 !important; -webkit-text-fill-color: #7f3239 !important; background: #7f3239 !important; opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { html.theme-floor body .ho2-badge, html.theme-floor body .ho2-badge::before { animation: none !important; } } /* ── Deadline motion: make August 31 notices clearly animated, not static ── */ @keyframes floorDeadlineSweep { 0% { background-position: 180% 50%; } 100% { background-position: -120% 50%; } } @keyframes floorDeadlineLift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.015); } } @keyframes floorDeadlineDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .42; transform: scale(.72); } } html.theme-floor body .hero-offer2 .ho2-badge, html.theme-floor body .ho2-badge { display: inline-flex !important; align-items: center !important; gap: .45rem !important; isolation: isolate !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: linear-gradient(135deg, #6d8f76 0%, #557960 42%, #a4464f 100%) !important; background-size: 180% 100% !important; border: 1px solid rgba(255,255,255,.38) !important; animation: floorDeadlineSweep 4.2s linear infinite, floorDeadlineLift 2.2s ease-in-out infinite !important; } html.theme-floor body .hero-offer2 .ho2-badge::after, html.theme-floor body .ho2-badge::after { content: "" !important; position: static !important; display: inline-block !important; width: .42rem !important; height: .42rem !important; flex: 0 0 .42rem !important; border-radius: 999px !important; background: #ffffff !important; opacity: 1 !important; animation: floorDeadlineDot 1.15s ease-in-out infinite !important; } html.theme-floor body .hero-offer2 .ho2-badge::before, html.theme-floor body .ho2-badge::before { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.48) 50%, transparent 70%) !important; animation: ho2BadgeSweep 2.4s linear infinite !important; } html.theme-floor body .hero-offer2 .ho2-note, html.theme-floor body .ho2-note { display: inline-flex !important; align-items: center !important; gap: .45rem !important; overflow: hidden !important; isolation: isolate !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: linear-gradient(135deg, #a4464f 0%, #7f3239 54%, #5f8068 100%) !important; background-image: linear-gradient(135deg, #a4464f 0%, #7f3239 54%, #5f8068 100%) !important; background-size: 190% 100% !important; border: 1px solid rgba(255,255,255,.36) !important; border-left: 0 !important; box-shadow: 0 12px 26px -16px rgba(127,50,57,.75), inset 0 1px 0 rgba(255,255,255,.18) !important; animation: floorDeadlineSweep 4s linear infinite, floorDeadlineLift 2s ease-in-out infinite !important; } html.theme-floor body .hero-offer2 .ho2-note::before, html.theme-floor body .ho2-note::before { content: "" !important; display: inline-block !important; width: .46rem !important; height: .46rem !important; flex: 0 0 .46rem !important; border-radius: 999px !important; background: #ffffff !important; box-shadow: none !important; animation: floorDeadlineDot 1.15s ease-in-out infinite !important; } html.theme-floor body .hero-offer2 .ho2-note::after, html.theme-floor body .ho2-note::after { content: "" !important; position: absolute !important; inset: 0 !important; display: block !important; background: linear-gradient(100deg, transparent 28%, rgba(255,255,255,.44) 50%, transparent 72%) !important; transform: translateX(-130%) !important; animation: ho2-note-shine 2.7s ease-in-out infinite !important; pointer-events: none !important; } html.theme-floor body .hero-offer2 .ho2-note strong, html.theme-floor body .ho2-note strong, html.theme-floor body .hero-offer2 .ho2-note .ho2-note-label, html.theme-floor body .ho2-note .ho2-note-label { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none !important; position: relative !important; z-index: 1 !important; } @media (prefers-reduced-motion: reduce) { html.theme-floor body .ho2-badge, html.theme-floor body .ho2-badge::before, html.theme-floor body .ho2-badge::after, html.theme-floor body .ho2-note, html.theme-floor body .ho2-note::before, html.theme-floor body .ho2-note::after { animation: none !important; } } /* ===== job-site videos + before/after bands (flooring) ===== */ .fvid-grid{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(1rem,2.5vw,1.75rem); grid-template-columns:repeat(auto-fit, minmax(min(300px,100%), 1fr)); max-width:56rem; margin-inline:auto; } .fvid-card{ margin:0; background:#fff; border:1px solid rgba(31,58,44,.10); border-radius:20px; overflow:hidden; box-shadow:0 18px 44px -28px rgba(20,40,30,.35); } .fvid-player{ display:block; width:100%; aspect-ratio:9/16; max-height:70vh; background:#0b0f0d; object-fit:cover; } .fvid-meta{ display:flex; flex-direction:column; gap:.2rem; padding:.9rem 1.1rem 1.05rem; } .fvid-meta strong{ font-size:1.02rem; color:var(--floor-ink,#12201a); } .fvid-meta span{ font-size:.9rem; color:var(--muted,#5d6b64); } .floor-ba{ background:linear-gradient(180deg,#ECF4ED 0%,#ffffff 100%); } .fba-grid{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(1rem,2.5vw,1.75rem); grid-template-columns:repeat(auto-fit, minmax(min(320px,100%), 1fr)); } .fba-card{ position:relative; margin:0; } .fba-card .gallery-link{ display:block; border-radius:20px; overflow:hidden; border:1px solid rgba(31,58,44,.12); box-shadow:0 20px 46px -30px rgba(20,40,30,.4); background:#fff; } .fba-card img{ display:block; width:100%; height:auto; transition:transform .5s ease; } .fba-card .gallery-link:hover img{ transform:scale(1.03); } .fba-tag{ position:absolute; left:.85rem; top:.85rem; z-index:2; padding:.34rem .72rem; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,#A4464F,#8d3a43); box-shadow:0 8px 20px -10px rgba(164,70,79,.7); } @media (max-width:640px){ .fvid-player{ max-height:66vh; } } .fvid-grid:has(> .fvid-card:only-child){ max-width:24rem; } /* ── Compact video band: two smaller thumbnails side by side ── */ html.theme-floor body .fvid-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:.85rem !important; max-width:34rem !important; } html.theme-floor body .fvid-card{ border-radius:16px !important; } html.theme-floor body .fvid-player{ aspect-ratio:9/14 !important; max-height:42vh !important; } html.theme-floor body .fvid-meta{ padding:.6rem .75rem .75rem !important; } html.theme-floor body .fvid-meta strong{ font-size:.86rem !important; line-height:1.25 !important; } html.theme-floor body .fvid-meta span{ font-size:.76rem !important; line-height:1.35 !important; } @media (min-width:900px){ html.theme-floor body .fvid-grid{ max-width:40rem !important; gap:1.25rem !important; } html.theme-floor body .fvid-player{ max-height:52vh !important; } } .fba-card .gallery-link{ aspect-ratio:auto !important; height:auto !important; padding:0 !important; } .fba-card .gallery-link img{ aspect-ratio:auto !important; height:auto !important; object-fit:contain; } /* --- hero photo trio: sage-green frame instead of white --- */ .shots-fig img { border: 2px solid #5f8068 !important; box-shadow: 0 22px 46px -24px rgba(0,0,0,0.6), 0 0 0 4px rgba(95,128,104,0.28) !important; } /* ── Sticky header CTA: gentle float + soft glow, stronger on hover ── */ @keyframes floorHeaderCtaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } } @keyframes floorHeaderCtaGlow { 0%, 100% { box-shadow: 0 8px 18px -14px rgba(38, 62, 46, .6), 0 0 0 rgba(109, 143, 118, 0); } 50% { box-shadow: 0 12px 24px -14px rgba(38, 62, 46, .7), 0 0 18px rgba(109, 143, 118, .55); } } html.theme-floor body .site-header .header-cta { animation: floorHeaderCtaFloat 3.2s ease-in-out infinite, floorHeaderCtaGlow 3.2s ease-in-out infinite !important; will-change: transform, box-shadow; } html.theme-floor body .site-header .header-cta:hover, html.theme-floor body .site-header .header-cta:focus-visible { animation: none !important; transform: translateY(-2px) !important; box-shadow: 0 14px 26px -12px rgba(38, 62, 46, .75), 0 0 24px rgba(109, 143, 118, .7) !important; } @media (prefers-reduced-motion: reduce) { html.theme-floor body .site-header .header-cta { animation: none !important; } } /* ── Hero kicker "Every Floor, One Crew, One Price": brick red, not green-on-green ── */ html.theme-floor body .hero-h1 .h1-line.h1-kicker, html.theme-floor body .hero-copy-panel .hero-h1 .h1-kicker { color: #A4464F !important; -webkit-text-fill-color: #A4464F !important; background: none !important; text-shadow: none !important; } /* ========================================================================== SUMMER OFFER SECTION — editorial redesign Cream stage, hairline-framed cards, serif headline, brick accents. ========================================================================== */ html.theme-floor body .offer-section--v8 { background: linear-gradient(180deg, #FBF9F4 0%, #F2EFE7 55%, #ECF4ED 100%) !important; border-top: 1px solid rgba(9, 13, 16, .08) !important; border-bottom: 1px solid rgba(9, 13, 16, .08) !important; } html.theme-floor body .offer-section--v8 .offer-hype { background: #fff !important; border: 1px solid rgba(9, 13, 16, .1) !important; border-radius: 22px !important; box-shadow: 0 30px 70px -50px rgba(9, 13, 16, .55) !important; padding: clamp(1.1rem, 4vw, 2.4rem) !important; position: relative; overflow: hidden; } html.theme-floor body .offer-section--v8 .offer-hype::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #A4464F 0%, #A4464F 55%, #5f8068 55%, #5f8068 100%); } /* Eyebrow → quiet sage rule, not a heavy pill */ html.theme-floor body .offer-section--v8 .offer-eyebrow { display: inline-flex !important; align-items: center; gap: .5rem; background: transparent !important; color: #5f8068 !important; -webkit-text-fill-color: #5f8068 !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: .55rem !important; font-size: .68rem !important; font-weight: 800 !important; letter-spacing: .2em !important; text-transform: uppercase !important; white-space: nowrap !important; } html.theme-floor body .offer-section--v8 .offer-eyebrow .oe-dot { width: 7px !important; height: 7px !important; border-radius: 999px !important; background: #A4464F !important; box-shadow: 0 0 0 4px rgba(164, 70, 79, .16) !important; } /* Headline: editorial serif */ html.theme-floor body .offer-section--v8 .offer-mega { font-family: "Cormorant Garamond", Georgia, serif !important; font-weight: 600 !important; font-size: clamp(2.1rem, 9vw, 3.6rem) !important; line-height: 1.03 !important; letter-spacing: -.01em !important; color: #090d10 !important; -webkit-text-fill-color: #090d10 !important; text-shadow: none !important; margin: 0 0 .5rem !important; } html.theme-floor body .offer-section--v8 .offer-mega .offer-mega-hl { display: inline-block; background: none !important; color: #A4464F !important; -webkit-text-fill-color: #A4464F !important; font-style: italic !important; } html.theme-floor body .offer-section--v8 .offer-sub { color: rgba(9, 13, 16, .68) !important; -webkit-text-fill-color: rgba(9, 13, 16, .68) !important; font-size: .95rem !important; max-width: 46ch; margin-inline: auto !important; } html.theme-floor body .offer-section--v8 .offer-clock-label { color: #5f8068 !important; -webkit-text-fill-color: #5f8068 !important; font-size: .72rem !important; font-weight: 800 !important; letter-spacing: .14em !important; text-transform: uppercase !important; } /* Countdown: compact brick tiles, white numerals */ html.theme-floor body .offer-section--v8 .offer-clock { gap: .3rem !important; margin: .5rem auto .8rem !important; } html.theme-floor body .offer-section--v8 .offer-clock .oc-cell { background: linear-gradient(180deg, #A4464F, #8d3a43) !important; border: 0 !important; border-radius: 12px !important; min-width: 3.35rem !important; padding: .45rem .3rem .35rem !important; box-shadow: 0 10px 20px -14px rgba(164, 70, 79, .8) !important; } html.theme-floor body .offer-section--v8 .offer-clock .oc-num { color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 1.35rem !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; line-height: 1 !important; text-shadow: none !important; } html.theme-floor body .offer-section--v8 .offer-clock .oc-lbl { color: rgba(255, 255, 255, .82) !important; -webkit-text-fill-color: rgba(255, 255, 255, .82) !important; font-size: .56rem !important; letter-spacing: .16em !important; } html.theme-floor body .offer-section--v8 .offer-clock .oc-sep { color: rgba(9, 13, 16, .25) !important; -webkit-text-fill-color: rgba(9, 13, 16, .25) !important; font-size: 1rem !important; } /* Deadline line: single tidy ticket */ html.theme-floor body .offer-section--v8 .offer-deadline-line { display: inline-flex !important; align-items: baseline; gap: .35rem; background: #ECF4ED !important; border: 1px dashed rgba(95, 128, 104, .55) !important; border-left-width: 1px !important; border-radius: 999px !important; padding: .45rem 1rem !important; margin: 0 auto 1.1rem !important; box-shadow: none !important; animation: none !important; } html.theme-floor body .offer-section--v8 .offer-deadline-line::before, html.theme-floor body .offer-section--v8 .offer-deadline-line::after { display: none !important; } html.theme-floor body .offer-section--v8 .offer-deadline-line .odl-lead, html.theme-floor body .offer-section--v8 .offer-deadline-line .odl-tail { color: rgba(9, 13, 16, .6) !important; -webkit-text-fill-color: rgba(9, 13, 16, .6) !important; font-size: .78rem !important; font-weight: 600 !important; letter-spacing: .02em !important; } html.theme-floor body .offer-section--v8 .offer-deadline-line .offer-deadline { color: #A4464F !important; -webkit-text-fill-color: #A4464F !important; font-size: .92rem !important; font-weight: 800 !important; } /* Cardlets: hairline grid, brick figure, ink copy */ html.theme-floor body .offer-section--v8 .offer-cards { gap: .7rem !important; } html.theme-floor body .offer-section--v8 .offer-cardlet { background: #FBF9F4 !important; border: 1px solid rgba(9, 13, 16, .1) !important; border-radius: 14px !important; box-shadow: none !important; padding: .95rem .9rem !important; transition: border-color .18s ease, transform .18s ease, background .18s ease !important; } html.theme-floor body .offer-section--v8 .offer-cardlet:hover { background: #fff !important; border-color: rgba(164, 70, 79, .45) !important; transform: translateY(-2px) !important; } html.theme-floor body .offer-section--v8 .offer-cardlet .oc-badge { background: rgba(164, 70, 79, .1) !important; color: #A4464F !important; -webkit-text-fill-color: #A4464F !important; border: 0 !important; box-shadow: none !important; } html.theme-floor body .offer-section--v8 .offer-cardlet .oc-title { color: #090d10 !important; -webkit-text-fill-color: #090d10 !important; font-size: 1.02rem !important; line-height: 1.2 !important; } html.theme-floor body .offer-section--v8 .offer-cardlet .oc-copy, html.theme-floor body .offer-section--v8 .offer-cardlet .oc-copy strong { color: rgba(9, 13, 16, .68) !important; -webkit-text-fill-color: rgba(9, 13, 16, .68) !important; font-size: .84rem !important; line-height: 1.4 !important; } html.theme-floor body .offer-section--v8 .offer-cardlet .oc-copy em { display: inline-block; margin-top: .3rem; background: linear-gradient(135deg, #A4464F, #8d3a43) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-style: normal !important; font-weight: 800 !important; font-size: .72rem !important; padding: .18rem .55rem !important; border-radius: 999px !important; } html.theme-floor body .offer-section--v8 .offer-cardlet .oc-kicker { color: #5f8068 !important; -webkit-text-fill-color: #5f8068 !important; font-size: .68rem !important; letter-spacing: .16em !important; text-transform: uppercase !important; } html.theme-floor body .offer-section--v8 .oc-gift { background: #fff !important; border: 1px solid rgba(95, 128, 104, .3) !important; border-radius: 12px !important; box-shadow: none !important; } html.theme-floor body .offer-section--v8 .oc-gift-ribbon { background: linear-gradient(135deg, #5f8068, #46634f) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } html.theme-floor body .offer-section--v8 .oc-gift-or { color: #A4464F !important; -webkit-text-fill-color: #A4464F !important; background: #ECF4ED !important; border: 1px solid rgba(95, 128, 104, .35) !important; } html.theme-floor body .offer-section--v8 .oc-gift-name { color: #090d10 !important; -webkit-text-fill-color: #090d10 !important; } html.theme-floor body .offer-section--v8 .oc-gift-copy { color: rgba(9, 13, 16, .65) !important; -webkit-text-fill-color: rgba(9, 13, 16, .65) !important; } /* Price promise: ink block for contrast, mint type */ html.theme-floor body .offer-section--v8 .beatit { background: linear-gradient(160deg, #12201a, #0b1310) !important; border: 1px solid rgba(95, 128, 104, .35) !important; border-radius: 16px !important; } html.theme-floor body .offer-section--v8 .beatit-kicker { color: #9dbaa5 !important; -webkit-text-fill-color: #9dbaa5 !important; } html.theme-floor body .offer-section--v8 .beatit-title, html.theme-floor body .offer-section--v8 .beatit-title span { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; } html.theme-floor body .offer-section--v8 .beatit-copy, html.theme-floor body .offer-section--v8 .beatit-fine { color: rgba(255, 255, 255, .74) !important; -webkit-text-fill-color: rgba(255, 255, 255, .74) !important; } html.theme-floor body .offer-section--v8 .beatit-prize, html.theme-floor body .offer-section--v8 .beatit-prize span { color: #fff !important; -webkit-text-fill-color: #fff !important; } html.theme-floor body .offer-section--v8 .beatit-prize span { background: linear-gradient(135deg, #A4464F, #8d3a43) !important; padding: .1rem .5rem !important; border-radius: 8px !important; } /* Final CTA + fine print */ html.theme-floor body .offer-section--v8 .offer-lock .btn { background: linear-gradient(135deg, #A4464F, #8d3a43) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: 0 !important; box-shadow: 0 16px 30px -18px rgba(164, 70, 79, .8) !important; } html.theme-floor body .offer-section--v8 .offer-lock .btn svg { color: #fff !important; } html.theme-floor body .offer-section--v8 .offer-fine--limit { color: rgba(9, 13, 16, .6) !important; -webkit-text-fill-color: rgba(9, 13, 16, .6) !important; } html.theme-floor body .offer-section--v8 .offer-fine--limit .ofl-strong { color: #A4464F !important; -webkit-text-fill-color: #A4464F !important; } @media (max-width:520px){ html.theme-floor body .offer-section--v8 .offer-eyebrow { white-space: normal !important; font-size: .6rem !important; letter-spacing: .12em !important; justify-content: center !important; text-align: center !important; } } /* ---- Offer teaser: sample board grid ---- */ .offer-section--teaser .offer-samples { list-style: none; margin: 20px auto 26px; padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .offer-section--teaser .offer-samples li { margin: 0; overflow: hidden; border-radius: 12px; border: 1px solid rgba(95, 128, 104, .35); box-shadow: 0 6px 18px rgba(27, 35, 45, .10); background: #fff; } .offer-section--teaser .offer-samples img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; } @media (max-width: 640px) { .offer-section--teaser .offer-samples { gap: 7px; max-width: 100%; } .offer-section--teaser .offer-samples li { border-radius: 9px; } } /* Hero promise line */ .hero-h1 .h1-promise { display: block; margin-top: 10px; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-style: italic; font-size: clamp(1.05rem, 2.6vw, 1.6rem); line-height: 1.3; letter-spacing: 0.01em; color: #A4464F; } @media (max-width: 640px) { .hero-h1 .h1-promise { margin-top: 8px; font-size: 1.05rem; } } /* Owner-on-every-job band */ .floor-owner .fown-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .floor-owner .fown-card { background: #fff; border: 1px solid rgba(95, 128, 104, 0.35); border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px rgba(27, 35, 45, 0.1); } .floor-owner .fown-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%; } .floor-owner .fown-meta { padding: 16px 18px 20px; display: block; } .floor-owner .fown-meta strong { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.3rem; color: #1b232d; margin-bottom: 6px; } .floor-owner .fown-meta span { display: block; font-size: 0.95rem; line-height: 1.55; color: #46525c; } @media (max-width: 780px) { .floor-owner .fown-grid { grid-template-columns: 1fr; gap: 16px; } } /* Hero headline: promise kicker + balanced wrapping */ .hero-h1 .h1-kicker--promise { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-style: italic; letter-spacing: 0.01em; color: #A4464F; text-transform: none; } .hero-h1 .h1-main { text-wrap: balance; } .hero-h1 .h1-nb { white-space: nowrap; } @media (max-width: 640px) { .hero-h1 .h1-main br { display: none; } } /* Hero headline wrapping: avoid orphan words on small screens */ @media (max-width: 720px) { .hero-h1 .h1-nb { white-space: normal; } .hero-h1 .h1-main { text-wrap: balance; max-width: 22ch; margin-inline: auto; } } /* Hero headline: centered, balanced, never overflowing */ .hero-h1 .h1-main { display: block; text-wrap: balance; white-space: normal !important; text-align: center; max-width: 18ch; margin-inline: auto; overflow-wrap: break-word; } .hero-h1 .h1-nb { white-space: normal !important; } .hero-h1 .h1-main br { display: inline !important; } @media (max-width: 720px) { .hero-h1 .h1-main { max-width: 16ch; } } /* Hero promise line: stronger presence */ .hero-h1 .h1-kicker--promise { font-size: clamp(1.35rem, 3.4vw, 2rem) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; color: #8E323C !important; text-shadow: 0 1px 0 rgba(255,255,255,0.85); margin-bottom: 4px; } @media (max-width: 640px) { .hero-h1 .h1-kicker--promise { font-size: 1.3rem !important; } } /* Hero rating: both number and /5 in the same near-black */ .hero-reviews .hr-score, .hero-reviews .hr-num, .hero-reviews .hr-slash { color: #1b232d !important; opacity: 1 !important; -webkit-text-fill-color: #1b232d; } /* Deadline ticket: light sweeping from left to right */ .offer-deadline-line { position: relative; overflow: hidden; isolation: isolate; } .offer-deadline-line::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( 100deg, transparent 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.85) 50%, rgba(164, 70, 79, 0.18) 58%, rgba(255, 255, 255, 0) 72%, transparent 100% ); background-size: 220% 100%; background-repeat: no-repeat; animation: offerDeadlineSweep 2.8s linear infinite; mix-blend-mode: screen; } @keyframes offerDeadlineSweep { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } } @media (prefers-reduced-motion: reduce) { .offer-deadline-line::after { animation: none; opacity: 0; } } /* Hero headline: avoid one-word lines on phones */ .hero-h1 .h1-main { max-width: 24ch; text-wrap: balance; } @media (max-width: 720px) { .hero-h1 .h1-main { max-width: 100% !important; font-size: clamp(1.65rem, 8.4vw, 2.35rem) !important; line-height: 1.14 !important; letter-spacing: -0.01em !important; text-wrap: balance; hyphens: none; } } @media (max-width: 720px) { .hero-h1 .h1-main { font-size: clamp(1.55rem, 7.4vw, 2.05rem) !important; line-height: 1.17 !important; } } /* Why Choose Us — owner band */ .floor-owner .fown-split { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center; } .floor-owner .fown-photos { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; } .floor-owner .fown-photo { margin: 0; border-radius: 16px; overflow: hidden; border: 2px solid #5f8068; box-shadow: 0 18px 40px -24px rgba(27, 35, 45, 0.45); background: #fff; } .floor-owner .fown-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; } .floor-owner .fown-copy .kicker { margin-bottom: 0.5rem; } .floor-owner .fown-copy h2 { margin: 0 0 0.75rem; } .floor-owner .fown-lead { margin: 0 0 1.35rem; font-size: 1.05rem; } .floor-owner .fown-points { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1rem; } .floor-owner .fown-points li { position: relative; padding: 0.9rem 1rem 0.9rem 2.6rem; border-radius: 14px; background: #fff; border: 1px solid rgba(95, 128, 104, 0.28); box-shadow: 0 10px 26px -22px rgba(27, 35, 45, 0.5); } .floor-owner .fown-points li::before { content: ""; position: absolute; left: 1rem; top: 1.25rem; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #A4464F, #8E323C); } .floor-owner .fown-points strong { display: block; color: #1b232d; font-size: 1.02rem; margin-bottom: 0.2rem; } .floor-owner .fown-points span { display: block; color: rgba(27, 35, 45, 0.78); } .floor-owner .section-cta { margin-top: 0; text-align: left; } @media (max-width: 900px) { .floor-owner .fown-split { grid-template-columns: 1fr; } .floor-owner .fown-copy { text-align: center; } .floor-owner .fown-points li { text-align: left; } .floor-owner .section-cta { text-align: center; } } /* Owner notes woven between material sections */ .floor-ownernote .fon-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; } .floor-ownernote--flip .fon-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .floor-ownernote--flip .fon-photo { order: 2; } .floor-ownernote .fon-photo { margin: 0; border-radius: 18px; overflow: hidden; border: 2px solid #5f8068; box-shadow: 0 22px 48px -28px rgba(27, 35, 45, 0.5); background: #fff; } .floor-ownernote .fon-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .floor-ownernote .fon-copy .kicker { display: block; margin-bottom: 0.5rem; } .floor-ownernote .fon-copy h2 { margin: 0 0 0.85rem; } .floor-ownernote .fon-copy p { margin: 0 0 1.5rem; font-size: 1.04rem; } .floor-ownernote .section-cta { margin-top: 0; text-align: left; } @media (max-width: 900px) { .floor-ownernote .fon-split, .floor-ownernote--flip .fon-split { grid-template-columns: 1fr; } .floor-ownernote--flip .fon-photo { order: 0; } .floor-ownernote .fon-copy { text-align: center; } .floor-ownernote .section-cta { text-align: center; } } /* ===== Offer teaser: perks + See the Offer button ===== */ .offer-section--teaser .offer-teaser-perks{ list-style:none;margin:18px auto 0;padding:0;display:grid;gap:10px; grid-template-columns:repeat(3,minmax(0,1fr));max-width:820px; } .offer-section--teaser .offer-teaser-perks li{ background:linear-gradient(180deg,#ffffff,#ECF4ED); border:1px solid rgba(95,128,104,.35);border-radius:14px; padding:14px 12px;text-align:center; box-shadow:0 6px 18px rgba(27,35,45,.08); } .offer-section--teaser .offer-teaser-perks strong{ display:block;font-family:"Cormorant Garamond",Georgia,serif; font-size:1.28rem;line-height:1.15;color:#A4464F;letter-spacing:.2px; } .offer-section--teaser .offer-teaser-perks span{ display:block;margin-top:5px;font-size:.8rem;line-height:1.35;color:#1b232d;opacity:.85; } .offer-section--teaser .offer-teaser-cta{margin-top:20px;text-align:center;} .offer-section--teaser .offer-see-btn{ min-width:260px;font-size:1.06rem;letter-spacing:.4px; background:linear-gradient(135deg,#A4464F,#8E323C)!important;color:#fff!important; border:0;box-shadow:0 10px 26px rgba(164,70,79,.34); } .offer-section--teaser .offer-see-btn:hover{ background:linear-gradient(135deg,#b8505a,#A4464F)!important;color:#fff!important; box-shadow:0 0 0 4px rgba(164,70,79,.16),0 14px 32px rgba(164,70,79,.42); } @media (max-width:640px){ .offer-section--teaser .offer-teaser-perks{grid-template-columns:1fr;max-width:420px;} .offer-section--teaser .offer-see-btn{min-width:0;width:100%;} } /* Three-image strip — brushed silver frames */ .hero-shots li { position: relative; border-radius: 16px; padding: 2px; background: linear-gradient(145deg, #e8ecef 0%, #a8b1b8 28%, #f3f5f7 52%, #8f989f 76%, #d7dde1 100%); box-shadow: 0 14px 34px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.14); } .hero-shots img { border: 0; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(20,24,28,0.35); } @media (max-width: 860px) { .hero-shots li { border-radius: 13px; padding: 1.5px; } .hero-shots img { border-radius: 11px; } } /* CTA label type — slightly smaller and less heavy */ html.theme-floor body .btn, html.theme-floor body .btn-lg, html.theme-floor body .btn span { font-weight: 600 !important; letter-spacing: 0.005em !important; } html.theme-floor body .btn-lg { font-size: 0.95rem !important; } html.theme-floor body .btn:not(.btn-lg) { font-size: 0.9rem !important; } /* Three-image strip frames — brick red */ .hero-shots li { background: linear-gradient(145deg, #c25a63 0%, #A4464F 45%, #8d3a42 100%); box-shadow: 0 14px 34px rgba(0,0,0,0.32), 0 0 0 1px rgba(164,70,79,0.45); } /* ── Header phone: run the existing left-to-right hover shine permanently ── */ @keyframes floorHeaderPhoneSweep { 0% { transform: skewX(-18deg) translateX(-120%); } 34% { transform: skewX(-18deg) translateX(360%); } 100% { transform: skewX(-18deg) translateX(360%); } } html.theme-floor body .site-header a.header-phone::before, html.theme-floor body .site-header a.header-phone:hover::before, html.theme-floor body .site-header a.header-phone:focus-visible::before { opacity: 1 !important; animation: floorHeaderPhoneSweep 2.6s ease-in-out infinite !important; will-change: transform; } html.theme-floor body .site-header .header-phone:hover, html.theme-floor body .site-header .header-phone:focus-visible { background: var(--floor-mint-light) !important; border-color: rgba(164, 70, 79, .6) !important; transform: translateY(-2px) !important; box-shadow: 0 14px 26px -12px rgba(164, 70, 79, .65), 0 0 24px rgba(164, 70, 79, .45) !important; } @media (prefers-reduced-motion: reduce) { html.theme-floor body .site-header a.header-phone::before { animation: none !important; opacity: 0 !important; } } /* ============================================================ Cookie consent — brand green buttons (not brick red) ============================================================ */ html.theme-floor body .cookie-consent .cookie-btn-accept, html.theme-floor body .cookie-btn-accept { background: linear-gradient(135deg, #5f8068 0%, #3f6349 55%, #2f4f39 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border-color: rgba(47, 79, 57, .55) !important; box-shadow: 0 12px 26px -14px rgba(37, 62, 45, .6) !important; } html.theme-floor body .cookie-consent .cookie-btn-accept:hover { box-shadow: 0 16px 30px -14px rgba(37, 62, 45, .72) !important; } html.theme-floor body .cookie-consent .cookie-btn-ghost, html.theme-floor body .cookie-btn-essential, html.theme-floor body .cookie-banner .cookie-btn:not(.cookie-btn-accept) { color: #3f6349 !important; -webkit-text-fill-color: #3f6349 !important; border-color: rgba(63, 99, 73, .38) !important; background: transparent !important; } html.theme-floor body .cookie-consent .cookie-btn-ghost:hover { background: rgba(63, 99, 73, .08) !important; } html.theme-floor body .cookie-consent a.cookie-consent-link { color: #3f6349 !important; -webkit-text-fill-color: #3f6349 !important; } html.theme-floor body .cookie-consent .cookie-consent-icon { background: rgba(63, 99, 73, .12) !important; color: #3f6349 !important; }