@layer pages { /* ============================================================ ForgeLine homeowner landing â€” pipeline stylesheet. Moved from public/main/forgeline-home.css (Step 2 of the landing integration) and namespaced under `.fl-landing` so its styles can't collide with the app design system once the page uses the app layout. Global-only here (this file is loaded just on the landing): - @keyframes (names are landing-specific) - html scroll behavior - .reveal-on-scroll (the `.reveal-ready` flag is toggled on ) ============================================================ */ /* ---------- keyframes (global) ---------- */ @keyframes gridDrift { to { background-position: 64px 64px; } } @keyframes sweep { 0% { transform: translateX(-12%); opacity: 0; } 30% { opacity: 0.55; } 70% { opacity: 0.55; } 100% { transform: translateX(12%); opacity: 0; } } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } } @keyframes hero-globe-badge-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(15,23,42,0.34), 0 12px 24px rgba(2,6,23,0.24), 0 0 14px var(--badge-glow, rgba(96,165,250,0.2)); } 50% { box-shadow: 0 0 0 1px rgba(15,23,42,0.34), 0 14px 28px rgba(2,6,23,0.3), 0 0 24px var(--badge-glow, rgba(96,165,250,0.38)); } } /* Coverage-list dot pulse — a gentle breathing GLOW on the globe's own 1.8s cadence. The colour comes from the element's --dot-halo / --dot-glow, so this one keyframe serves live/soon/coming; the 4px halo stays put and the outer glow breathes (3px -> 9px). */ @keyframes region-dot-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--dot-halo, transparent), 0 0 3px 0 var(--dot-glow, transparent); } 50% { box-shadow: 0 0 0 4px var(--dot-halo, transparent), 0 0 9px 1px var(--dot-glow, transparent); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes qualification-trade-option-in { to { opacity: 1; transform: translateY(0); } } @keyframes fl-breathe { 0%,100% { opacity: .82; filter: brightness(.95); } 50% { opacity: 1; filter: brightness(1.3); } } @keyframes fl-spark { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 12% { left: 100%; opacity: 0; } 100% { left: 100%; opacity: 0; } } @keyframes fl-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* Mobile menu panel + its staggered rows, mirroring the /partners dropdown (marketing-nav-item-in in layers/base.css). Top-level for the same reason as the hero rotator below â€” nested inside .fl-landing they would be dropped. */ @keyframes mnav-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes mnav-item-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* Hero title word-rotator flip (used by .forge-hero__title-rotator-track). MUST live at the TOP LEVEL: the .forge-hero* rules below are nested inside `.fl-landing { }`, and an @keyframes nested inside a style rule is invalid CSS — the browser drops it, silently killing the rotation. */ @keyframes forge-hero-title-rotate-down { 0%, 16% { transform: translateY(-80%); } 22%, 38% { transform: translateY(-60%); } 44%, 60% { transform: translateY(-40%); } 66%, 82% { transform: translateY(-20%); } 88%, 100% { transform: translateY(0%); } } /* The hero title word-rotator flip lived here until v3 Step 4. It was removed with the rotator itself (plan PART 16.3): a rotator is locked to one line by its fixed height, which the split hero's narrower text column could not accommodate. /partners keeps its own copy in pages/pages/network_home.css - that page is a different layout and stylesheet and is unaffected. */ /* ---------- page scroll behavior ---------- */ /* overflow-x: clip on the viewport itself. The .fl-landing (body) already sets overflow-x: hidden, but overflow on doesn't reliably stop page-level horizontal scroll (it propagates to ), so decorative bleed like the coverage globe (width:140%) still scrolled. Clip at the root; `clip` avoids turning into a scroll container (keeps sticky/anchor scrolling intact). main.css is /main-only, so this is scoped to the landing page. */ html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 84px; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- reveal-on-scroll (global: `.reveal-ready` lives on ) ---------- */ .reveal { transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1); } .reveal-ready .reveal:not(.in) { opacity: 0; transform: translateY(26px); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-ready .reveal:not(.in) { opacity: 1 !important; transform: none !important; } } /* ============================================================ Everything else is scoped under `.fl-landing` ============================================================ */ .fl-landing { /* design tokens (scoped so they don't override app tokens) */ --warm-bg: #eef1f8; --warm-bg-deep: #e1e7f4; --warm-border: #dde3f1; --charcoal: #212529; /* Shared bar/panel surface. The scrolled nav, the nav while the menu is open, and the mobile drawer must read as ONE piece of chrome â€” the drawer used to be an unrelated navy (rgba(11,18,32,.94)) against the bar's charcoal, which showed as a colour seam between them. Single token so they can't drift. */ --nav-surface: rgba(33,37,41,0.92); --nav-surface-blur: blur(12px) saturate(1.4); --nav-surface-line: rgba(148,163,184,0.22); --card-dark: linear-gradient(157deg, #1d2536 0%, #0f1524 100%); --card-dark-bd: rgba(255,255,255,0.08); --line: #e5e7eb; --ink: #0f172a; --ink-body: #334155; --ink-muted: #64748b; --ink-subtle: #94a3b8; --blue: #2563eb; --blue-hover: #1d4ed8; --blue-soft: #eff4ff; --blue-line: #d7e3fb; --green: #16a34a; --green-soft: #ecfdf3; --navy: #0b1220; --navy-2: #111a2e; --shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --shadow-card: 0 10px 30px rgba(15,23,42,0.07); --shadow-lift: 0 18px 44px rgba(15,23,42,0.13); --shadow-blue: 0 12px 26px rgba(37,99,235,0.22); --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; --maxw: 1240px; --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --fl-core: #dbe8ff; --fl-glow: #4f8bff; --fl-deep: #2563eb; /* fonts (was provided by the dropped _ds token bundle; IBM Plex Sans loaded in the landing layout head) */ --font-display: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* marketing accents used by the coverage globe badges */ --home-accent-green: #22c55e; --home-accent-amber: #f59e0b; --home-accent-gold: #fbbf24; --home-accent-violet: #a78bfa; /* base (was the global body{} / element resets) */ box-sizing: border-box; font-family: var(--font-body, system-ui, sans-serif); color: var(--ink-body); background: #fff; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; & *, & *::before, & *::after { box-sizing: border-box; } & * { margin: 0; padding: 0; } & h1, & h2, & h3, & h4, & .display { font-family: var(--font-display, "IBM Plex Sans", system-ui, sans-serif); } & a { color: inherit; text-decoration: none; } & img { max-width: 100%; display: block; } & button { font-family: inherit; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .section { padding: 96px 0; position: relative; } .section--warm { background: linear-gradient(180deg, #eef1f8 0%, #f4f6fb 100%); } .section--warm::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 12% 0%, rgba(37,99,235,0.05), transparent 38%), radial-gradient(circle at 92% 100%, rgba(122,166,245,0.06), transparent 40%); } .section--warm > .wrap { position: relative; z-index: 1; } .section-head { max-width: 680px; margin-bottom: 48px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } /* margin-top was 16px purely to clear the .eyebrow label that used to sit above every section title; with those gone it is now the first child, so the 16px would just be a stray gap at the top of each section head. */ .section-title { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 700; color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; margin: 0; } .section-sub { font-size: 1.0625rem; line-height: 1.65; color: var(--ink-muted); margin-top: 18px; max-width: 560px; } .section-head.center .section-sub { margin-left: auto; margin-right: auto; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0.85rem 1.4rem; border-radius: var(--r-sm); border: 1.5px solid transparent; font-size: 0.95rem; font-weight: 600; line-height: 1; cursor: pointer; transition: transform .16s var(--ease-spring), background .16s ease, border-color .16s ease, box-shadow .16s ease; white-space: nowrap; } .btn i { font-size: 1.05em; } /* primary button â€” matches the marketing home "Check Market Availability" CTA */ .btn-primary { border: 1px solid rgba(147,197,253,0.6); background: linear-gradient(140deg, rgba(37,99,235,0.95), rgba(29,78,216,0.95)); color: #eff6ff; font-weight: 700; box-shadow: 0 12px 24px rgba(30,64,175,0.36); } .btn-primary:hover { border-color: rgba(191,219,254,0.78); background: linear-gradient(140deg, rgba(59,130,246,0.98), rgba(37,99,235,0.98)); color: #eff6ff; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(30,64,175,0.42); } .btn-primary:active { transform: translateY(0); } .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(147,197,253,0.38), 0 12px 24px rgba(30,64,175,0.36); } .btn-secondary { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn-secondary:hover { border-color: #cbd5e1; transform: translateY(-2px); } .btn-ghost-dark { background: rgba(255,255,255,0.06); color: #e9eefb; border-color: rgba(148,163,184,0.4); backdrop-filter: blur(6px); } .btn-ghost-dark:hover { background: rgba(255,255,255,0.12); border-color: rgba(148,163,184,0.7); transform: translateY(-2px); } .btn-lg { padding: 1rem 1.7rem; font-size: 1rem; } .btn-block { width: 100%; } /* ---------- NAV ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; } .nav__inner { display: flex; align-items: center; gap: 28px; height: 72px; } .nav.scrolled { background: var(--nav-surface); backdrop-filter: var(--nav-surface-blur); border-bottom-color: var(--nav-surface-line); box-shadow: 0 2px 20px rgba(2,6,23,0.32); } .brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); } .brand img { width: 26px; height: 26px; border-radius: 6px; } .brand b { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; color: #eaf0fb; } .nav .nav__links a { color: #c3cee0; } .nav .nav__phone { color: #c3d2ee; } .nav__links { display: flex; gap: 28px; margin-left: 8px; } .nav__links a { font-size: 0.94rem; font-weight: 500; position: relative; transition: color .15s ease; } .nav__links a:hover { color: #fff; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: linear-gradient(90deg, var(--fl-glow, #4f8bff), var(--fl-core, #dbe8ff), var(--fl-glow, #4f8bff)); border-radius: 2px; transform: scaleX(0); transform-origin: left; box-shadow: 0 0 7px rgba(79,139,255,0.85), 0 0 16px rgba(37,99,235,0.5); transition: transform .2s var(--ease-spring); } .nav__links a:hover::after { transform: scaleX(1); } .nav__spacer { flex: 1; } .nav__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.94rem; transition: color .15s; } .nav__phone i { color: var(--blue); } .nav__cta { padding: 0.7rem 1.15rem; } /* Burger â€” ported from the /partners toggle (layers/layout/marketing_nav.css). Three bars are drawn from two pseudo-elements: ::before is the top bar and carries the middle one as a box-shadow 5px below it, ::after is the bottom. Opening collapses both to the same y, drops the shadow (middle bar vanishes) and counter-rotates them into an X. Bars only â€” no border or fill. The bars use currentColor, which still tracks the two nav states on its own: dark ink over the LIGHT hero (.on-hero) and light once scrolled. */ .nav__burger { display: none; align-items: center; justify-content: center; /* The 40x40 box is kept even though nothing is drawn on it â€” it is the tap target. flex-shrink:0 because .nav__inner is a flex row and the "Get a free quote" CTA squeezed this to 20px wide on a phone. */ width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 0; background: none; color: #eaf0fb; cursor: pointer; transition: color .25s ease, opacity .18s ease; } .nav__burger:hover { opacity: 0.7; } .nav__burger-icon { position: relative; display: block; width: 18px; height: 18px; } .nav__burger-icon::before, .nav__burger-icon::after { content: ""; position: absolute; left: 50%; width: 18px; height: 2px; border-radius: 999px; background: currentColor; transform: translateX(-50%); transform-origin: center; transition: top 220ms ease, transform 220ms ease, box-shadow 180ms ease; } .nav__burger-icon::before { top: 3px; box-shadow: 0 5px 0 currentColor; } .nav__burger-icon::after { top: 13px; } .nav__burger[aria-expanded="true"] .nav__burger-icon::before { top: 8px; box-shadow: none; transform: translateX(-50%) rotate(45deg); } .nav__burger[aria-expanded="true"] .nav__burger-icon::after { top: 8px; transform: translateX(-50%) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .nav__burger-icon::before, .nav__burger-icon::after { transition: none; } } /* ---------- HERO (network_home-style light hero, ported) ---------- Light gradient hero with the flip word-rotator title + combined search bar, adapted from the old app/views/pages/network_home + its CSS. The old `.hero` dark rules above are no longer used by _main_hero.html.erb. */ .forge-hero-section { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(620px 240px at 10% -14%, rgba(147,197,253,0.16), transparent 60%), radial-gradient(560px 220px at 90% -20%, rgba(56,189,248,0.12), transparent 58%), linear-gradient(180deg, #f5f9ff 0%, #edf4fd 54%, #e8f0fb 100%); } /* Content sits in the shared .wrap (max-width --maxw, centred). z-index:1 keeps the absolutely-positioned scroll cue and the overlaid nav above the section's gradient. */ .forge-hero-section > .wrap { position: relative; z-index: 1; } .forge-hero-section > .forge-hero__scroll { z-index: 1; } .forge-hero { width: 100%; display: grid; justify-items: center; text-align: center; gap: 20px; padding-top: 128px; padding-bottom: 92px; } .forge-hero__title { margin: 0; max-width: 22ch; width: 100%; color: var(--ink); letter-spacing: -0.04em; font-family: var(--font-display); font-size: clamp(3.15rem, 6.6vw, 5rem); line-height: 0.9; font-weight: 800; display: grid; justify-items: center; gap: 0.04em; } .forge-hero__title-line, .forge-hero__title-rotator { display: block; } .forge-hero__title-line { white-space: nowrap; } /* Desktop shows the wide copy set; the narrow one is swapped in at <=640px. */ .forge-hero__title-line--narrow, .forge-hero__title-rotator-item.is-narrow { display: none; } /* Rotator: the track flips through the phrases (10s loop, keyframes at top level); height is ONE row (1.14em) so the overflow mask shows a single line at a time. */ .forge-hero__title-rotator { position: relative; height: 1.14em; width: 100%; max-width: 100%; min-width: 0; padding-bottom: 0.14em; overflow: hidden; color: var(--blue-hover); } .forge-hero__title-rotator-track { display: grid; grid-auto-rows: 1fr; animation: forge-hero-title-rotate-down 10s cubic-bezier(0.76, 0, 0.24, 1) infinite; } .forge-hero__title-rotator-item { min-height: 1.14em; display: flex; align-items: flex-start; justify-content: center; line-height: 1; padding-bottom: 0.14em; white-space: nowrap; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-hover) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* Mobile-only lead image, arched like the reference layout. Hidden on desktop, where the hero is intentionally type-only. */ .forge-hero__media { display: none; } .forge-hero__copy { margin: 0; max-width: 640px; color: var(--ink-body); font-size: 1.14rem; line-height: 1.65; } .forge-hero__note { margin: 4px 0 0; color: var(--ink-muted); font-size: 0.96rem; line-height: 1.55; } .forge-hero__note a { color: var(--blue); font-weight: 600; } .forge-hero__note a:hover { color: var(--blue-hover); text-decoration: underline; } .forge-search-bar { width: min(860px, 100%); margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border: 1px solid rgba(15,23,42,0.1); background: #fff; border-radius: var(--r-sm); box-shadow: 0 8px 20px rgba(15,23,42,0.06); overflow: hidden; transition: box-shadow 180ms ease, border-color 180ms ease; } .forge-search-bar:focus-within { border-color: rgba(37,99,235,0.35); box-shadow: 0 16px 30px rgba(37,99,235,0.12); } .forge-search-field { display: flex; align-items: center; padding: 0; background: transparent; } .forge-search-field__input { width: 100%; height: 54px; padding: 0 20px; border: 0; background: transparent; appearance: none; color: var(--ink); font: inherit; font-size: 1rem; outline: none; } .forge-search-field__input::placeholder { color: var(--ink-subtle); } .forge-search-bar__button { min-width: 168px; height: 54px; margin: 0; padding: 0 22px; border: 0; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--blue); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; letter-spacing: -0.01em; cursor: pointer; transition: background .15s ease; } .forge-search-bar__button:hover { background: var(--blue-hover); } .forge-hero__trust { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 10px; flex-wrap: wrap; } .forge-hero__trust .item { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-body); font-size: 0.96rem; font-weight: 500; } .forge-hero__trust .item i { color: var(--green); font-size: 1.08rem; } .forge-hero__trust .divider { width: 1px; height: 18px; background: var(--line); } .forge-hero__scroll { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; color: var(--ink-muted); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; } .forge-hero__scroll i { font-size: 1.14rem; animation: bob 1.8s ease-in-out infinite; } /* Rotator respects reduced motion: freeze the track and show only the first phrase. */ @media (prefers-reduced-motion: reduce) { .forge-hero__title-rotator-track { animation: none; } .forge-hero__title-rotator-item:not(:first-child) { display: none; } } /* Nav overlays the hero; darken its text while it sits over the LIGHT hero (the .on-hero class is present until you scroll past 36px, then .scrolled restores the dark-bar / light-text treatment). */ .nav.on-hero .brand b { color: var(--ink); } .nav.on-hero .nav__links a { color: var(--ink-body); } .nav.on-hero .nav__links a:hover { color: var(--ink); } .nav.on-hero .nav__phone { color: var(--ink-body); } .nav.on-hero .nav__burger { color: var(--ink); } /* Open drawer sits directly beneath the bar, so the on-hero treatment (dark ink for the light hero) has to give way to the dark one or the bar reads as a stray light strip above the panel. */ .nav.on-hero:has(.nav__burger[aria-expanded="true"]) { background: var(--nav-surface); backdrop-filter: var(--nav-surface-blur); border-bottom-color: var(--nav-surface-line); } .nav.on-hero:has(.nav__burger[aria-expanded="true"]) .brand b, .nav.on-hero .nav__burger[aria-expanded="true"] { color: #eaf0fb; } /* No split-layout breakpoints — the hero is a single CENTRED column at every width (v3's .forge-hero-layout column ramp was removed with the 2026-07-27 revert to the centred rotator hero). The mobile block below is all that remains. */ @media (max-width: 640px) { .forge-hero { padding-top: 108px; padding-bottom: 76px; gap: 16px; } .forge-search-bar { grid-template-columns: 1fr; } .forge-search-bar__button { min-width: 0; border-top: 1px solid rgba(15,23,42,0.1); } /* Hero title on mobile. The desktop `clamp()` floor is 3.15rem (50.4px) and 6.6vw never reaches it below ~764px, so every phone rendered the title at 50px, and the long desktop phrases blew through the ~335px content box. The fix is copy, not geometry: the `--narrow` set is short enough to fit one line at this size, so the rotator stays a single-line flip and the headline is two lines total. Both sets keep `white-space: nowrap` from the base rule â€” wrapping is what has to be prevented here, and the widths are verified to fit down to 320px. Ceiling is 3.15rem, not 5rem, so this meets the desktop rule exactly at the breakpoint: desktop's own clamp floor is 3.15rem and 6.6vw doesn't overtake it until ~764px, so 641px renders 50.4px too. Without the cap, 9vw made 640px render 57.6px and the title visibly jumped DOWN a size on the way to 641px. */ .forge-hero__title { font-size: clamp(2.35rem, 9vw, 3.15rem); max-width: 100%; } .forge-hero__title-line--wide, .forge-hero__title-rotator-item.is-wide { display: none; } .forge-hero__title-line--narrow { display: block; } .forge-hero__title-rotator-item.is-narrow { display: flex; } /* Arched lead image, per the reference layout: a full semicircle on top (999px clamps to half the box) over a flat bottom edge. */ .forge-hero__media { display: block; width: min(300px, 70%); margin: 0 auto 4px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 999px 999px 0 0; } .forge-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Vertical hairlines between wrapped trust items read as stray floating bars once the row breaks, so stack and drop them. */ .forge-hero__trust { flex-direction: column; gap: 10px; } .forge-hero__trust .divider { display: none; } /* The cue is absolutely positioned to the section's bottom edge, which on a phone now sits below the fold rather than at the viewport edge. */ .forge-hero__scroll { display: none; } } /* ---------- STATS STRIP (matches the scrolled nav: --charcoal) ---------- */ .stats { background: var(--charcoal); position: relative; padding: 0; } .stats__inner { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,0.12); } .stat { padding: 40px 28px; text-align: center; border-right: 1px solid rgba(255,255,255,0.16); position: relative; } .stat:last-child { border-right: 0; } .stat__val { font-family: var(--font-display); font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1; } .stat__val .suffix { color: #bfdbfe; } .stat__lbl { margin-top: 10px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72); } /* ---------- SERVICES â€” inline cards (inclusions always visible) ---------- */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .svc { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--card-dark); border: 1px solid var(--card-dark-bd); border-radius: var(--r-lg); padding: 28px; box-shadow: 0 16px 34px rgba(2,6,23,0.22); transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-spring), border-color .3s ease; } .svc:hover { transform: translateY(-4px); border-color: rgba(122,166,245,0.42); box-shadow: 0 24px 46px rgba(2,6,23,0.36); } /* soft blue arc glow behind the icon, brightening on hover */ .svc::before { content: ""; position: absolute; top: -50px; left: -40px; width: 200px; height: 200px; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--ic, #2563eb) 34%, transparent), transparent 70%); opacity: .42; transition: opacity .35s ease; } .svc:hover::before { opacity: .9; } /* top hairline */ .svc::after { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); } .svc:nth-child(1) { --ic: #2563eb; } .svc:nth-child(2) { --ic: #a78bfa; } .svc:nth-child(3) { --ic: #22c55e; } .svc:nth-child(4) { --ic: #fbbf24; } .svc:nth-child(5) { --ic: #38bdf8; } .svc:nth-child(6) { --ic: #f59e0b; } .svc__icon { position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 1.55rem; margin-bottom: 18px; background: color-mix(in srgb, var(--ic, #2563eb) 16%, transparent); color: var(--ic, #2563eb); border: 1px solid color-mix(in srgb, var(--ic, #2563eb) 34%, transparent); } .svc h3 { position: relative; z-index: 1; align-self: flex-start; font-size: 1.3rem; font-weight: 700; color: #f4f7fc; letter-spacing: -0.02em; } /* forged glowing line draws under the title on hover */ .svc h3::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--fl-glow), var(--fl-core), var(--fl-glow)); box-shadow: 0 0 7px rgba(79,139,255,0.7), 0 0 16px rgba(37,99,235,0.45); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-spring); } .svc:hover h3::after, .svc:focus-within h3::after { transform: scaleX(1); } .svc__lead { position: relative; z-index: 1; color: #9fb0cc; font-size: 0.95rem; line-height: 1.55; margin-top: 12px; } .svc__list { position: relative; z-index: 1; list-style: none; display: flex; flex-direction: column; gap: 9px; margin-top: 18px; flex: 1; } .svc__list li { display: flex; gap: 9px; font-size: 0.9rem; color: #c6d4ec; line-height: 1.4; } .svc__list li i { color: #5ee08e; flex-shrink: 0; margin-top: 2px; } .svc .btn { position: relative; z-index: 1; margin-top: 22px; } /* ---------- GALLERY (pills styled like the marketing market tabs) ---------- */ .gallery__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; } .fpill { display: inline-flex; align-items: center; padding: 9px 20px; border-radius: 13px; border: 1px solid rgba(148,163,184,0.28); background: linear-gradient(165deg, rgba(15,23,42,0.88) 0%, rgba(17,24,39,0.92) 55%, rgba(8,15,29,0.96) 100%); color: #cdd9ee; font-size: 0.86rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; } .fpill:hover { border-color: rgba(148,163,184,0.5); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(2,6,23,0.32); } .fpill.active { border-color: rgba(125,211,252,0.6); color: #7dd3fc; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(56,189,248,0.16), 0 8px 20px rgba(2,6,23,0.32); transform: translateY(-1px); } .gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; grid-auto-flow: dense; } .gcell { border-radius: var(--r-md); overflow: hidden; background: var(--warm-bg); transition: opacity .35s ease, transform .35s ease; } .gcell img { display: block; width: 100%; height: 100%; object-fit: cover; } .gcell.span-6 { grid-column: span 6; } .gcell.span-4 { grid-column: span 4; } .gcell.span-8 { grid-column: span 8; } .gcell.tall { aspect-ratio: 4/5; } .gcell.wide { aspect-ratio: 16/10; } .gcell.sq { aspect-ratio: 1/1; } .gcell.hide { display: none; } /* ---------- COVERAGE â€” live globe + market list ---------- */ .coverage { display: grid; grid-template-columns: 1fr 0.92fr; gap: 48px; align-items: center; } /* Coverage status callout â€” populated by the hero "check your city" search */ .cov-result { margin: 22px 0 4px; } .cov-result:empty { display: none; margin: 0; } .cov-result__card { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--blue-line); background: var(--blue-soft); box-shadow: var(--shadow-sm); animation: fadeInUp .45s var(--ease-spring) both; } .cov-result__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; background: #fff; color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-line); } .cov-result__text { font-size: 0.98rem; line-height: 1.45; color: var(--ink); } .cov-result__text b { font-weight: 700; } .cov-result--active .cov-result__card { border-color: #bbf7d0; background: var(--green-soft); } .cov-result--active .cov-result__icon { color: var(--green); box-shadow: inset 0 0 0 1px #bbf7d0; } .cov-result--soon .cov-result__card { border-color: #fde68a; background: #fffbeb; } .cov-result--soon .cov-result__icon { color: #b45309; box-shadow: inset 0 0 0 1px #fde68a; } /* markets grouped by state (state tabs reuse the markets-tabs controller) */ .mk-tabs { margin-top: 22px; } .mk-tabbar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; } .mk-tab { padding: 7px 14px; border-radius: 10px; border: 1px solid rgba(148,163,184,0.28); background: linear-gradient(165deg, rgba(15,23,42,0.88), rgba(8,15,29,0.96)); color: #cdd9ee; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; } .mk-tab:hover { border-color: rgba(148,163,184,0.5); color: #fff; transform: translateY(-1px); } .mk-tab[aria-selected="true"] { border-color: rgba(125,211,252,0.6); color: #7dd3fc; box-shadow: 0 0 0 1px rgba(56,189,248,0.16), 0 8px 20px rgba(2,6,23,0.32); } .mk-panel[aria-hidden="true"] { display: none; } .region-list { display: flex; flex-direction: column; gap: 9px; height: 320px; overflow-y: auto; padding-right: 10px; color-scheme: light; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.55) rgba(148, 163, 184, 0.12); } .region { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease; } .region:hover { border-color: var(--blue-line); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .region:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.16); } .region.is-pinpoint { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px rgba(37,99,235,0.16); } /* PULSE like the globe's live nodes (2026-07-27): a gentle breathing glow on the same 1.8s ease-in-out cadence as the globe badge. The 4px ring is the old resting halo; the pulse adds an outer glow that breathes. Each status carries its own colour in --dot-halo / --dot-glow. */ .region__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; animation: region-dot-pulse 1.8s ease-in-out infinite; } .region__dot.live { background: var(--home-accent-green, #22c55e); --dot-halo: var(--green-soft); --dot-glow: rgba(34,197,94,0.55); } .region__dot.soon { background: var(--home-accent-amber, #f59e0b); --dot-halo: #fef3c7; --dot-glow: rgba(245,158,11,0.5); } .region__dot.coming { background: var(--home-accent-violet, #a78bfa); --dot-halo: rgba(167,139,250,0.16); --dot-glow: rgba(167,139,250,0.55); } @media (prefers-reduced-motion: reduce) { .region__dot { animation: none; box-shadow: 0 0 0 4px var(--dot-halo, transparent); } } .region__name { font-weight: 600; color: var(--ink); flex: 1; } .region__status { font-size: 0.8rem; font-weight: 600; color: var(--ink-muted); } /* live coverage globe (ported from the marketing hero) */ /* widen + shift the globe without disturbing the grid tracks (left panel stays put) */ .coverage-globe { position: relative; width: 140%; transform: translateX(8%); } .hero-globe-stage { position: relative; width: 100%; aspect-ratio: 1/1; display: grid; place-items: center; overflow: visible; isolation: isolate; } .hero-globe-stage::before { content: ""; position: absolute; inset: 8%; z-index: 0; border-radius: 999px; background: radial-gradient(circle at 54% 44%, rgba(30,41,59,0.34), transparent 48%), radial-gradient(circle at 34% 62%, rgba(125,211,252,0.08), transparent 42%); filter: blur(14px); opacity: 0.95; pointer-events: none; } .hero-globe-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; border-radius: 50%; filter: saturate(1.08) contrast(1.05); } .hero-globe-badges { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 50%; overflow: hidden; } .hero-globe-badge { position: absolute; width: 0; height: 0; border: 0; background: transparent; color: var(--badge-color, #bfdbfe); padding: 0; opacity: 0; pointer-events: none; transform: scale(0.94); transform-origin: 0 0; transition: opacity 180ms ease, transform 180ms ease; white-space: nowrap; } .hero-globe-badge.is-on-globe { opacity: 1; transform: scale(1); } .hero-globe-badge__leader { position: absolute; left: 0; top: -48px; width: 2px; height: 46px; transform: translateX(-50%); transform-origin: bottom center; background: linear-gradient(0deg, var(--badge-color, #bfdbfe), rgba(226,232,240,0.56), rgba(226,232,240,0.08)); border-radius: 999px; box-shadow: 0 0 8px var(--badge-glow, rgba(96,165,250,0.35)), 0 0 18px var(--badge-glow, rgba(96,165,250,0.22)); opacity: 0.62; transition: opacity 180ms ease; } .hero-globe-badge__panel { position: absolute; left: 0; top: -77px; min-width: 78px; padding: 6px 8px; border: 1px solid rgba(148,163,184,0.34); border-radius: 8px; background: rgba(15,23,42,0.88); box-shadow: 0 0 0 1px rgba(15,23,42,0.34), 0 12px 24px rgba(2,6,23,0.28), 0 0 14px var(--badge-glow, rgba(96,165,250,0.18)); opacity: 0; transform: translate(-50%, 4px) scale(0.96); transform-origin: center bottom; transition: opacity 180ms ease, transform 180ms ease; } .hero-globe-badge[data-callout-side="left"] .hero-globe-badge__panel { left: 0; right: auto; } .hero-globe-badge__city, .hero-globe-badge__status { display: block; line-height: 1; } .hero-globe-badge__city { color: #f8fafc; font-size: 10.5px; font-weight: 800; } .hero-globe-badge__status { margin-top: 4px; color: var(--badge-color, #bfdbfe); font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.94; } .hero-globe-badge.is-visible { pointer-events: auto; } .hero-globe-badge.is-visible .hero-globe-badge__leader { opacity: 0.96; } .hero-globe-badge.is-visible .hero-globe-badge__panel { opacity: 1; transform: translate(-50%, 0) scale(1); } .hero-globe-badge.is-featured .hero-globe-badge__panel { animation: hero-globe-badge-pulse 1.8s ease-in-out infinite; } .hero-globe-badge--live { --badge-color: var(--home-accent-green); --badge-glow: rgba(34,197,94,0.28); } .hero-globe-badge--amber { --badge-color: var(--home-accent-amber); --badge-glow: rgba(245,158,11,0.3); } .hero-globe-badge--gold { --badge-color: var(--home-accent-gold); --badge-glow: rgba(251,191,36,0.3); } .hero-globe-badge--violet { --badge-color: var(--home-accent-violet); --badge-glow: rgba(167,139,250,0.3); } .hero-globe-badge--blue { --badge-color: #60a5fa; --badge-glow: rgba(96,165,250,0.3); } /* ---------- INTAKE / QUOTE ---------- */ .intake { position: relative; overflow: hidden; background: radial-gradient(900px 420px at 88% -12%, rgba(56,189,248,0.10), transparent 60%), linear-gradient(170deg, #21252b 0%, #191c21 58%, #14161a 100%); } /* faint blueprint grid, fading out â€” echoes the hero fallback */ .intake::before { content:""; position:absolute; inset:-2px; pointer-events:none; background-image: linear-gradient(rgba(190,196,206,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(190,196,206,0.05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(circle at 72% 28%, #000 6%, transparent 70%); mask-image: radial-gradient(circle at 72% 28%, #000 6%, transparent 70%); } .intake__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 56px; align-items: start; max-width: 1080px; margin: 0 auto; } /* left persuasion column â€” "how it works" + trust (light copy on charcoal band) */ .intake__aside { padding-top: 4px; } .intake__aside .section-title { color: #f5f7fb; } .intake__aside .section-sub { margin-top: 16px; color: #aeb6c4; } .intake__steps { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .intake__steps li { display: flex; align-items: flex-start; gap: 16px; } .intake__step-num { flex-shrink: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 2px; min-width: 34px; font-size: 1.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: transparent; background: linear-gradient(160deg, #93c5fd, #3b82f6); -webkit-background-clip: text; background-clip: text; } /* short accent rule beneath each numeral */ .intake__step-num::after { content: ""; width: 20px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(96,165,250,0.9), rgba(96,165,250,0.15)); } .intake__steps li > div { display: flex; flex-direction: column; gap: 3px; } .intake__steps strong { color: #f5f7fb; font-weight: 650; font-size: 0.98rem; } .intake__steps span { color: #aab3c2; font-size: 0.9rem; line-height: 1.5; } .intake__trust { list-style: none; margin: 28px 0 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 13px; } .intake__trust li { display: flex; align-items: center; gap: 11px; color: #c4ccd8; font-size: 0.92rem; font-weight: 550; } .intake__trust i { color: #34d399; font-size: 1.05rem; flex-shrink: 0; } .form-fineprint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; color: #8aa0c4; font-size: 0.82rem; line-height: 1.45; text-align: center; } .form-fineprint i { color: #7dd3fc; font-size: 0.9rem; } .form-steps { display: flex; gap: 8px; margin-bottom: 26px; padding: 0 2px; } .form-steps .step { flex: 1; height: 4px; border-radius: 4px; background: var(--warm-bg-deep); overflow: hidden; } .form-steps .step.done { background: var(--blue); } .fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .fg { min-width: 0; } .fg.full { grid-column: 1 / -1; } /* floating-label fields â€” mirrors the /partners qualification form */ .form-floating { position: relative; } .form-floating > .form-control, .form-floating > .form-select { width: 100%; height: calc(3.5rem + 2px); min-height: calc(3.5rem + 2px); padding: 1rem 0.95rem; border: 1px solid rgba(148,163,184,0.44); border-radius: 12px; background: rgba(15,23,42,0.5); color: #f4f7fc; font-size: 0.96rem; font-family: inherit; line-height: 1.25; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; } .form-floating > .form-select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-top: 1.625rem; padding-bottom: 0.5rem; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23cbd5e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px; } .form-floating > .form-select option { color: #0f172a; } .form-floating > textarea.form-control { height: auto; min-height: 8rem; padding-top: 1.625rem; resize: vertical; } .form-floating > .form-control::placeholder { color: transparent; } .form-floating > .form-control:focus, .form-floating > .form-select:focus { border-color: rgba(125,211,252,0.78); background: rgba(15,23,42,0.62); color: #fff; box-shadow: 0 0 0 3px rgba(56,189,248,0.2); } .form-floating > label { position: absolute; top: 0; left: 0; height: 100%; max-width: 100%; padding: 1rem 0.95rem; color: #9fb0cc; font-size: 0.96rem; font-weight: 500; line-height: 1.25; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform-origin: 0 0; transition: opacity .12s ease, transform .12s ease, color .12s ease; } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { opacity: 0.85; color: #cdd9ee; transform: scale(0.82) translateY(-0.62rem) translateX(0.08rem); } .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) { padding-top: 1.625rem; padding-bottom: 0.5rem; } .form-foot { display: flex; align-items: center; margin-top: 18px; } .form-foot .btn { width: 100%; min-height: 54px; border-radius: 12px; } /* custom dropdown â€” ported from the /partners qualification trade-picker (driven by qualification_prefill.js via the data-trade-picker* hooks) */ .qualification-trade-picker { position: relative; } .qualification-trade-picker__button { position: relative; display: grid; align-content: center; gap: 2px; width: 100%; min-height: calc(3.5rem + 2px); padding: 0.75rem 3rem 0.6rem 0.95rem; border: 1px solid rgba(148, 163, 184, 0.44); border-radius: 12px; background: rgba(15, 23, 42, 0.5); color: #f8fbff; text-align: left; box-shadow: none; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; } .qualification-trade-picker__button:hover { border-color: rgba(147, 197, 253, 0.62); background: rgba(15, 23, 42, 0.58); } .qualification-trade-picker__button:focus-visible, .qualification-trade-picker.is-open .qualification-trade-picker__button { outline: none; border-color: rgba(125, 211, 252, 0.78); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2); background: rgba(15, 23, 42, 0.62); } .qualification-trade-picker__hint { display: block; order: -1; color: #9fb4d3; font-size: 12px; font-weight: 500; line-height: 1.2; } .qualification-trade-picker__label { display: block; color: #9fb0cc; font-size: 0.96rem; font-weight: 500; line-height: 1.25; } .qualification-trade-picker__button.has-value .qualification-trade-picker__label { color: #f8fbff; } .qualification-trade-picker__chevron { position: absolute; top: 50%; right: 1.1rem; width: 9px; height: 9px; border-right: 2px solid #cbd5e1; border-bottom: 2px solid #cbd5e1; transform: translateY(-62%) rotate(45deg); transition: transform 180ms ease; } .qualification-trade-picker.is-open .qualification-trade-picker__chevron { transform: translateY(-28%) rotate(225deg); } .qualification-trade-picker__list { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; display: grid; gap: 4px; max-height: 280px; overflow-y: auto; padding: 8px; border: 1px solid rgba(147, 197, 253, 0.45); border-radius: 12px; background: #0f172a; box-shadow: 0 18px 38px rgba(2, 6, 23, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(0.985); transform-origin: top center; transition: opacity 150ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 180ms; } .qualification-trade-picker.is-open .qualification-trade-picker__list { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; } .qualification-trade-picker__option { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #dbeafe; font-size: 14px; font-weight: 600; line-height: 1.25; text-align: left; cursor: pointer; opacity: 0; transform: translateY(-4px); transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } /* filtered-out options (e.g. cities not in the chosen state) â€” [hidden] alone loses to the display:flex above, so hide explicitly */ .qualification-trade-picker__option[hidden] { display: none; } .qualification-trade-picker.is-open .qualification-trade-picker__option { animation: qualification-trade-option-in 170ms ease both; } .qualification-trade-picker__option:hover, .qualification-trade-picker__option:focus-visible { outline: none; border-color: rgba(147, 197, 253, 0.34); background: rgba(37, 99, 235, 0.2); color: #f8fbff; } .qualification-trade-picker__option.is-selected { border-color: rgba(147, 197, 253, 0.52); background: rgba(37, 99, 235, 0.28); color: #eff6ff; } .qualification-trade-picker__option.is-selected::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #93c5fd; border-bottom: 2px solid #93c5fd; transform: rotate(-45deg) translateY(-1px); flex-shrink: 0; margin-left: 12px; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(1) { animation-delay: 12ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(2) { animation-delay: 24ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(3) { animation-delay: 36ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(4) { animation-delay: 48ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(5) { animation-delay: 60ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(6) { animation-delay: 72ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(7) { animation-delay: 84ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(8) { animation-delay: 96ms; } .qualification-trade-picker.is-open .qualification-trade-picker__option:nth-child(n+9) { animation-delay: 108ms; } @media (prefers-reduced-motion: reduce) { .qualification-trade-picker__button, .qualification-trade-picker__chevron, .qualification-trade-picker__list, .qualification-trade-picker__option { animation: none !important; transition: none !important; } .qualification-trade-picker.is-open .qualification-trade-picker__option { opacity: 1; transform: none; } } .form-success { text-align: center; padding: 30px 10px; display: none; } .form-success.show { display: block; animation: fadeInUp .4s ease; } .form-success .check { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-size: 2rem; } .form-success h3 { font-size: 1.5rem; color: var(--ink); font-weight: 700; } .form-success p { color: var(--ink-muted); margin-top: 10px; } /* ---------- QUOTE PANELS (mirrors marketing "Apply for Your City") ---------- */ .qpanel { position: relative; border: 1px solid rgba(148,163,184,0.32); border-radius: var(--r-lg); background: linear-gradient(165deg, rgba(15,23,42,0.92) 0%, rgba(17,24,39,0.95) 55%, rgba(8,15,29,0.97) 100%); box-shadow: 0 22px 50px rgba(15,23,42,0.20); padding: 32px; } .qpanel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(125,211,252,0.18); pointer-events: none; } /* ---- Charcoal "Request your free quote" card ---- A neutral charcoal panel (lighter / greyer than the near-black navy base) so it reads warm-dark on the light intake section. Scoped to .qpanel--form; the dark /partners qualification form lives in a separate stylesheet and is unaffected. */ .qpanel--form { background: linear-gradient(165deg, #2c3037 0%, #25282e 58%, #202329 100%); border-color: rgba(148,163,184,0.20); box-shadow: 0 26px 60px rgba(15,23,42,0.22); } .qpanel--form::before { border-color: rgba(255,255,255,0.05); } .qpanel--form .form-steps .step { background: rgba(255,255,255,0.12); } .qpanel--form .form-steps .step.done { background: linear-gradient(90deg, #3b82f6, #60a5fa); box-shadow: 0 0 10px rgba(59,130,246,0.45); } .qpanel--form .form-success h3 { color: #f4f7fc; } .qpanel--form .form-success p { color: #aab3c2; } .qpanel--form .form-errors { color: #fca5a5; font-size: 0.85rem; line-height: 1.45; margin-bottom: 14px; } .qpanel--form .form-fineprint { color: #aab3c2; } .qpanel--form .form-fineprint i { color: #7dd3fc; } /* floating-label fields â†’ charcoal */ .qpanel--form .form-floating > .form-control, .qpanel--form .form-floating > .form-select { background: rgba(255,255,255,0.05); border-color: rgba(148,163,184,0.30); color: #f4f7fc; } .qpanel--form .form-floating > .form-control:focus, .qpanel--form .form-floating > .form-select:focus { background: rgba(255,255,255,0.08); border-color: rgba(125,211,252,0.7); color: #fff; box-shadow: 0 0 0 3px rgba(56,189,248,0.18); } .qpanel--form .form-floating > label { color: #9aa3b2; } .qpanel--form .form-floating > .form-control:focus ~ label, .qpanel--form .form-floating > .form-control:not(:placeholder-shown) ~ label, .qpanel--form .form-floating > .form-select ~ label { color: #c4ccd8; } /* custom dropdowns â†’ charcoal */ .qpanel--form .qualification-trade-picker__button { background: rgba(255,255,255,0.05); border-color: rgba(148,163,184,0.30); color: #f4f7fc; } .qpanel--form .qualification-trade-picker__button:hover { border-color: rgba(147,197,253,0.5); background: rgba(255,255,255,0.07); } .qpanel--form .qualification-trade-picker__button:focus-visible, .qpanel--form .qualification-trade-picker.is-open .qualification-trade-picker__button { border-color: rgba(125,211,252,0.7); background: rgba(255,255,255,0.08); box-shadow: 0 0 0 3px rgba(56,189,248,0.18); } .qpanel--form .qualification-trade-picker__hint { color: #9aa3b2; } .qpanel--form .qualification-trade-picker__label { color: #9aa3b2; } .qpanel--form .qualification-trade-picker__button.has-value .qualification-trade-picker__label { color: #f4f7fc; } .qpanel--form .qualification-trade-picker__chevron { border-color: #cbd5e1; } .qpanel--form .qualification-trade-picker__list { background: #2c3037; border-color: rgba(147,197,253,0.34); box-shadow: 0 18px 38px rgba(2,6,23,0.4), inset 0 1px 0 rgba(255,255,255,0.05); } .qpanel--form .qualification-trade-picker__option { color: #d7dbe2; } .qpanel--form .qualification-trade-picker__option:hover, .qpanel--form .qualification-trade-picker__option:focus-visible { border-color: rgba(147,197,253,0.3); background: rgba(59,130,246,0.22); color: #fff; } .qpanel--form .qualification-trade-picker__option.is-selected { border-color: rgba(147,197,253,0.45); background: rgba(59,130,246,0.3); color: #eff6ff; } .qpanel--form .qualification-trade-picker__option.is-selected::after { border-color: #93c5fd; } /* city picker stays grayed out until a state is chosen */ .qpanel--form .qualification-trade-picker.is-disabled { opacity: 0.45; } .qpanel--form .qualification-trade-picker.is-disabled .qualification-trade-picker__button { cursor: not-allowed; } /* ---------- VISUALIZER â€” "Watch your space transform" ---------- */ .fx { max-width: 1040px; margin: 0 auto; } .fx__tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; } /* room toggle â€” matches the gallery filter pills (dark navy + blue active highlight) */ .fx__tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 13px; border: 1px solid rgba(148,163,184,0.28); background: linear-gradient(165deg, rgba(15,23,42,0.88) 0%, rgba(17,24,39,0.92) 55%, rgba(8,15,29,0.96) 100%); color: #cdd9ee; font-size: 0.9rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; } .fx__tab i { font-size: 1rem; } .fx__tab:hover { border-color: rgba(148,163,184,0.5); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(2,6,23,0.32); } .fx__tab.active { border-color: rgba(125,211,252,0.6); color: #7dd3fc; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(56,189,248,0.16), 0 8px 20px rgba(2,6,23,0.32); transform: translateY(-1px); } .fx__stage { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lift); border: 1px solid var(--line); background: var(--navy); cursor: ew-resize; user-select: none; touch-action: none; } .fx__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; } .fx__fallback { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; color: #5b6b86; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; background: linear-gradient(160deg, #0a1426, #0b1220); } .fx__tag { position: absolute; bottom: 16px; z-index: 3; padding: 6px 14px; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(8,14,26,0.78); color: #fff; backdrop-filter: blur(4px); pointer-events: none; } .fx__tag--before { left: 16px; } .fx__tag--after { right: 16px; background: var(--blue); } .fx__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; z-index: 4; pointer-events: none; } .fx__grip { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,0.08), 0 8px 22px rgba(2,6,23,0.45); display: grid; place-items: center; color: #334155; font-size: 1.1rem; } .fx__grip i { transform: rotate(90deg); } .fx__hint { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill); background: rgba(8,14,26,0.6); color: #cfe0ff; font-size: 0.78rem; font-weight: 600; backdrop-filter: blur(6px); transition: opacity .35s ease; } .fx.is-touched .fx__hint { opacity: 0; } .fx__caption { text-align: center; margin-top: 20px; color: var(--ink-muted); font-size: 0.98rem; } .fx__gallery { max-width: 1040px; margin: 56px auto 0; } /* ---------- FOOTER ---------- */ .footer { background: #1a1e24; color: #9fb2d4; padding: 64px 0 32px; } .footer__top { display: grid; grid-template-columns: minmax(280px, 1.6fr) minmax(160px, 0.8fr) minmax(180px, 0.9fr); gap: 56px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer__brand b { color: #fff; font-family: var(--font-display); font-size: 1.15rem; } .footer__brand p { margin-top: 16px; font-size: 0.94rem; line-height: 1.7; max-width: 420px; color: #b9c9e6; } .footer__contractor-cta { font-size: 0.9rem; } .footer__contractor-cta a { color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,0.35); transition: border-color .15s; } .footer__contractor-cta a:hover { border-color: #fff; } .footer__brand .brand { margin-bottom: 0; } .footer__brand .brand b { color: #fff; } .footer h5 { color: #e9eefb; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer ul a { font-size: 0.9rem; color: #b7c7e4; transition: color .15s; } .footer ul a:hover { color: #fff; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: 0.84rem; flex-wrap: wrap; gap: 12px; } .footer__legal { display: inline-flex; align-items: center; gap: 18px; } .footer__legal a { color: #b7c7e4; transition: color .15s; } .footer__legal a:hover { color: #fff; } /* ---------- FORGELINE forged glowing line (hero ignite + dividers + wordmark) ---------- */ .forge-line { position: relative; display: block; width: 100%; height: 2px; } .forge-line::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, transparent 0%, var(--fl-glow) 16%, var(--fl-core) 50%, var(--fl-glow) 84%, transparent 100%); box-shadow: 0 0 7px rgba(79,139,255,0.70), 0 0 20px rgba(37,99,235,0.45); animation: fl-breathe 4.6s ease-in-out infinite; } .forge-line__spark { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff 0%, var(--fl-core) 34%, var(--fl-glow) 68%, transparent 72%); box-shadow: 0 0 10px 3px rgba(120,170,255,0.9), 0 0 26px 9px rgba(37,99,235,0.55); animation: fl-spark 9s ease-in-out infinite; } /* ---------- mobile nav drawer ---------- */ /* Mobile menu â€” mirrors the /partners dropdown (.marketing-navbar__menu in layers/base.css + layers/layout/marketing_nav.css): a floating card that drops below the bar with bordered, rounded rows, replacing the full-bleed dark overlay this used to be. Chrome values track what /partners actually renders. Sitting below the 72px .nav__inner also leaves the burger uncovered, so it can be the close control instead of a separate X. */ .mnav { /* top = 72px bar + the 12px gap /partners uses (its margin-top). Left/right track .wrap's 20px mobile gutter so the panel lines up with page content â€” /partners sits at 16px because that is its own container's gutter. */ position: fixed; top: 84px; left: 20px; right: 20px; z-index: 200; display: none; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--nav-surface-line); border-radius: 14px; background: var(--nav-surface); backdrop-filter: var(--nav-surface-blur); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 20px 36px rgba(2,6,23,0.28); max-height: calc(100svh - 100px); overflow-y: auto; } .mnav.open { display: flex; animation: mnav-drop 240ms cubic-bezier(0.22, 1, 0.36, 1) both; } /* :not(.btn) keeps the "Get a free quote" CTA on its own button styling. */ .mnav a:not(.btn) { display: flex; align-items: center; min-height: 42px; padding: 9px 12px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: transparent; color: rgba(226,232,240,0.92); font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; } .mnav a:not(.btn):hover, .mnav a:not(.btn):focus-visible { background: rgba(255,255,255,0.05); border-color: rgba(147,197,253,0.4); color: #fff; } .mnav .btn { margin-top: 4px; } .mnav.open > * { animation: mnav-item-in 240ms ease both; } .mnav.open > *:nth-child(1) { animation-delay: 40ms; } .mnav.open > *:nth-child(2) { animation-delay: 80ms; } .mnav.open > *:nth-child(3) { animation-delay: 120ms; } .mnav.open > *:nth-child(4) { animation-delay: 160ms; } .mnav.open > *:nth-child(5) { animation-delay: 200ms; } .mnav.open > *:nth-child(6) { animation-delay: 240ms; } @media (prefers-reduced-motion: reduce) { .mnav.open, .mnav.open > * { animation: none; } } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .coverage, .intake__grid { grid-template-columns: 1fr; } .coverage__panel { order: 2; } /* Decorative live globe: hidden once the coverage layout stacks (mobile/narrow). */ .coverage-globe { display: none; } } /* Below ~490px the bar could not hold brand + "Get a free quote" + burger: the row overflowed to 389px and, because is overflow-x: clip, the burger was pushed clean off-screen and UNTAPPABLE at 320/360px. The brand also wrapped to two lines all the way up to 480px. Dropping the CTA from the bar fixes both, and costs nothing â€” the menu already carries the same "Get a free quote" button, which is exactly how /partners handles it. */ @media (max-width: 480px) { .nav__cta { display: none; } } @media (max-width: 760px) { .wrap { padding: 0 20px; } /* The trust row needs ~735px to hold all three items on one line, so between here and the 640px stack it wraps â€” leaving a hairline dangling at the end of the first line. Drop the dividers for the whole wrapped range. */ .forge-hero__trust .divider { display: none; } .section { padding: 68px 0; } .nav__links, .nav__phone { display: none; } .nav__burger { display: inline-flex; } .nav__spacer { flex: 1; } .nav__inner { gap: 12px; } .stats__inner { grid-template-columns: repeat(2, 1fr); } .stat { border-bottom: 1px solid rgba(255,255,255,0.16); } .stat:nth-child(even) { border-right: 0; } .stat:nth-last-child(-n+2) { border-bottom: 0; } .services-grid { grid-template-columns: 1fr; } .qpanel { padding: 24px; } .fgrid { grid-template-columns: 1fr; } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .gcell.span-6, .gcell.span-4, .gcell.span-8 { grid-column: span 1; } .footer__top { grid-template-columns: 1fr; gap: 30px; } } @media (prefers-reduced-motion: reduce) { & * { animation: none !important; } .forge-line::before { clip-path: none !important; } .forge-line__spark { display: none !important; } } } }