/** * LII Claims public marketing site — visual system. Day/night. */ /* lii-shell.css is linked directly in HTML for reliable mobile load */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --red-deep: #92182F; --red: #B6243A; --red-mid: #C82841; --red-bright: #D1203C; --bg: #0A0608; --bg-2: #120C0E; --text: #F0EAE6; --text-2: #B8A8A0; --gray: #6A5A55; --line: rgba(182,45,63,.12); --line-strong: rgba(182,45,63,.24); --accent-glow: rgba(200,40,65,.35); --accent-glow-2: rgba(209,32,60,.22); --card-bg: #100A0C; --card-border: rgba(200,40,65,.2); --hero-scrim: linear-gradient(180deg, rgba(10,6,8,.72) 0%, rgba(10,6,8,.55) 45%, rgba(10,6,8,.88) 100%); --hero-scrim-side: linear-gradient(90deg, rgba(10,6,8,.85) 0%, rgba(10,6,8,.35) 55%, rgba(10,6,8,.75) 100%); --f-sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --f-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --f-serif: "Barlow Condensed", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fs-micro: clamp(10px, 2.6vw, 12px); --fs-label: clamp(11px, 2.8vw, 13px); --fs-body: clamp(15px, 4vw, 17px); --fs-lead: clamp(16px, 4.2vw, 24px); --fs-h3: clamp(18px, 5vw, 30px); --fs-h2: clamp(24px, 7vw, 56px); --fs-h1: clamp(34px, 9vw, 76px); --layout-content-max: 1760px; --layout-edge-min: clamp(1.25rem, 5vw, 3.5rem); --layout-edge: var(--layout-edge-min); --section-gap: clamp(3.5rem, 9vh, 8rem); --nav-h: 60px; --nav-logo-h: clamp(48px, 7.8vw, 72px); --nav-logo-drop: 40px; --nav-logo-lift: 15px; --nav-clearance: calc((var(--nav-h) / 2) + (var(--nav-logo-h) / 2) + var(--nav-logo-drop)); --subnav-h: 46px; --shell-clearance: calc(var(--nav-clearance) + var(--subnav-h)); --radius-lg: 18px; --radius-md: 12px; } [data-theme="day"] { --bg: #FAF7F4; --bg-2: #F0EBE6; --text: #2A2226; --text-2: #6A5A55; --gray: #9A8A82; --line: rgba(182,45,63,.08); --line-strong: rgba(182,45,63,.14); --accent-glow: rgba(200,40,65,.14); --accent-glow-2: rgba(209,32,60,.09); --card-bg: #FDFCFB; --card-border: rgba(200,40,65,.12); --hero-scrim: linear-gradient(180deg, rgba(250,247,244,.78) 0%, rgba(250,247,244,.55) 45%, rgba(250,247,244,.9) 100%); --hero-scrim-side: linear-gradient(90deg, rgba(250,247,244,.9) 0%, rgba(250,247,244,.4) 55%, rgba(250,247,244,.85) 100%); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--text); font: 400 var(--fs-body)/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; transition: background-color .8s; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(182,45,63,.3); color: var(--text); } body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 80px 80px; opacity: .35; mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 75%); } .atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .atmos-orb { position: absolute; border-radius: 50%; contain: strict; transition: opacity 1.2s; } .orb-a { top: -15%; left: -10%; width: 55%; height: 55%; background: radial-gradient(circle, var(--accent-glow), transparent 65%); opacity: .55; } .orb-b { bottom: -20%; right: -8%; width: 50%; height: 50%; background: radial-gradient(circle, var(--accent-glow-2), transparent 65%); opacity: .45; } main { position: relative; z-index: 2; } .wrap { width: 100%; max-width: none; margin: 0 auto; padding-inline: var(--layout-edge); } .center { text-align: center; } body.has-lii-shell { padding-top: var(--nav-clearance); } [id] { scroll-margin-top: calc(var(--nav-clearance) + 1rem); } /* Large desktops — content spans up to --layout-content-max, aligned with header/footer */ @media (min-width: 900px) { :root { --layout-edge: max(var(--layout-edge-min), calc((100vw - var(--layout-content-max)) / 2)); } } /* ─── Unified header shell (base rules in lii-shell.css) ─────────── */ .brand-logo { position: relative; display: flex; align-items: center; justify-content: center; } .brand-logo img { width: 100%; height: auto; display: block; } .brand-logo img.brand-logo__night { display: none; } [data-theme="night"] .brand-logo img.brand-logo__day { display: none; } [data-theme="night"] .brand-logo img.brand-logo__night { display: block; } [data-theme="night"] .brand-logo--flat img.brand-logo__night { filter: drop-shadow(0 0 14px rgba(209,32,60,.28)); } [data-theme="day"] .brand-logo--flat img.brand-logo__day { filter: drop-shadow(0 4px 14px rgba(182,45,63,.16)); } .brand-logo--nav img { height: var(--nav-logo-h); width: auto; } .brand-logo--flat { width: auto; max-width: min(100%, 300px); } .brand-logo--flat img { width: auto; height: auto; max-height: clamp(44px, 8vw, 56px); max-width: 100%; } .lii-shell__bar { background: rgba(10,6,8,.55); border-bottom-color: transparent; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; } .lii-shell.is-scrolled .lii-shell__bar, [data-theme="day"] .lii-shell.is-scrolled .lii-shell__bar { background: rgba(10,6,8,.9); border-bottom-color: var(--line-strong); box-shadow: 0 8px 32px rgba(0,0,0,.22); } [data-theme="day"] .lii-shell__bar { background: rgba(250,247,244,.55); } [data-theme="day"] .lii-shell.is-scrolled .lii-shell__bar { background: rgba(250,247,244,.94); box-shadow: 0 4px 24px rgba(182,45,63,.08); } .theme-toggle { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--card-border); border-radius: 50%; background: var(--card-bg); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-2); transition: all .3s; } .theme-toggle:hover { border-color: var(--red-mid); color: var(--red-mid); transform: scale(1.06); } .theme-toggle svg { width: 15px; height: 15px; } .theme-toggle .sun { display: none; } [data-theme="day"] .theme-toggle .moon { display: none; } [data-theme="day"] .theme-toggle .sun { display: block; } /* ─── Cinematic hero ─────────────────────────────────────────────── */ /* Cancel body shell padding so hero media sits under the fixed header (not a second band below it) */ main > .hero-cinema:first-child { margin-top: calc(-1 * var(--nav-clearance)); } .hero-cinema { position: relative; min-height: clamp(520px, 88vh, 920px); display: flex; align-items: center; justify-content: center; /* Matt 8/20: centre the hero text + CTAs vertically. The fixed header overlays the top of this section, so the visible area starts below the header, not at 0. Measured live, the lowest fixed header furniture sits at --nav-h (60px); --nav-clearance is 106px because it bakes in extra logo allowance, and using it here left the stack 46px low on desktop. Matching the top padding to the real header height and giving both ends the same breathing room puts the stack in the middle of what a reader actually sees. */ padding: calc(var(--nav-h) + 1.5rem) 0 1.5rem; overflow: hidden; } .hero-cinema--compact { min-height: clamp(380px, 62vh, 620px); align-items: center; } .hero-cinema--request { min-height: auto; align-items: center; padding: calc(var(--nav-clearance) + clamp(2rem, 5vh, 3.5rem)) 0 clamp(3rem, 7vh, 5rem); } .hero-cinema__media { position: absolute; inset: 0; z-index: 0; background: var(--bg-2); } .hero-cinema__video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); opacity: 0; transition: opacity .55s ease, filter .8s; } .hero-cinema__video.is-ready { opacity: 1; } [data-theme="day"] .hero-cinema__video { filter: saturate(.75) contrast(1.02) brightness(1.08); } .hero-cinema__overlay { position: absolute; inset: 0; background: var(--hero-scrim); pointer-events: none; } .hero-cinema__overlay::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 20%, rgba(200,40,65,.18), transparent 55%); mix-blend-mode: screen; opacity: .7; } .hero-cinema__content { position: relative; z-index: 2; width: 100%; } .hero-cinema__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.25rem; } .hero-cinema .eyebrow { justify-content: center; margin-bottom: .65rem; } .hero-cinema .eyebrow::before { display: none; } .hero-cinema .eyebrow::after { content: ''; width: 28px; height: 2px; background: var(--red-mid); } /* Hero-specific: bigger text, tighter stack */ .hero-cinema .section-title { font-size: var(--fs-h1); margin-bottom: .6rem; } .hero-cinema .lead { font-size: clamp(17px, 4.4vw, 26px); max-width: 54ch; } /* ─── Typography ─────────────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 700 clamp(13px, 3.2vw, 16px)/1 var(--f-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--red-mid); margin-bottom: 1.25rem; } [data-theme="day"] .eyebrow { color: var(--red); } .eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--red-mid); flex-shrink: 0; } .section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); } .section-head.center .eyebrow { justify-content: center; } .section-head.center .eyebrow::before { display: none; } .section-head.center .eyebrow::after { content: ''; width: 28px; height: 2px; background: var(--red-mid); } .section-title { font: 700 var(--fs-h2)/1.05 var(--f-serif); letter-spacing: .02em; } .lead { font: 400 var(--fs-lead)/1.55 var(--f-sans); color: var(--text-2); max-width: 58ch; } .center .lead { margin-inline: auto; } .hero-line { width: min(140px, 32vw); height: 2px; margin: 1.4rem auto 0; background: linear-gradient(90deg, transparent, var(--red-mid), transparent); } .hero-line--left { margin: 2rem 0 0; background: linear-gradient(90deg, var(--red-mid), transparent); } /* ─── Stats glass bar ────────────────────────────────────────────── */ .stats-panel { margin-top: -3.5rem; position: relative; z-index: 5; padding-bottom: clamp(1rem, 3vh, 2rem); } .stats-panel .wrap { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.25); padding: clamp(1.5rem, 4vw, 2.5rem) var(--layout-edge); } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2rem); } @media (min-width: 640px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { text-align: center; } .stat-num { font: 700 clamp(30px, 7vw, 52px)/1 var(--f-serif); letter-spacing: -.03em; background: linear-gradient(135deg, var(--red-mid), var(--red-bright)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-label { margin-top: .45rem; font: 600 var(--fs-micro)/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gray); } /* ─── Sections & reveal ──────────────────────────────────────────── */ .section { padding: var(--section-gap) 0; } .section--tight { padding: clamp(2rem, 5vh, 4rem) 0; } .section--dark { background: linear-gradient(180deg, transparent, rgba(146,24,47,.08), transparent); } [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; transition: none; } .hero-cinema__video { display: none; } .card:hover, .service-card:hover .service-card__img, .feature-card:hover .feature-card__img { transform: none; } .card, .atmos-orb, .hero-cinema__video, .theme-toggle, .btn, .map-region { transition: none; } .btn:hover { transform: none; } } /* ─── Cards ──────────────────────────────────────────────────────── */ .card-grid { display: grid; gap: clamp(1rem, 3vw, 1.75rem); grid-template-columns: 1fr; } @media (min-width: 640px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: clamp(1.25rem, 3vw, 2rem); transition: border-color .35s, box-shadow .35s, transform .35s; position: relative; overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--accent-glow), transparent 70%); opacity: 0; transition: opacity .35s; pointer-events: none; } .card:hover { border-color: var(--red-mid); box-shadow: 0 16px 48px -8px var(--accent-glow); transform: translateY(-3px); } .card:hover::before { opacity: 1; } .card h3 { font: 600 var(--fs-h3)/1.2 var(--f-serif); margin-bottom: .75rem; position: relative; z-index: 1; } .card p { color: var(--text-2); position: relative; z-index: 1; } .card-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font: 600 var(--fs-label)/1 var(--f-sans); color: var(--red-mid); letter-spacing: .04em; position: relative; z-index: 1; } .card-link::after { content: "→"; transition: transform .2s; } .card:hover .card-link::after { transform: translateX(4px); } /* Photo overlay cards — feature + service (shared legibility) */ .service-card { position: relative; overflow: hidden; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0; border-radius: var(--radius-lg); } .feature-card { padding: 0; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; } /* Full-bleed width, zoomed-out cover: oversize frame + top anchor (no letterbox edges) */ .feature-card__img, .service-card__img { position: absolute; top: -110px; bottom: 0; left: 50%; width: 122%; height: auto; max-width: none; transform: translateX(-50%); transform-origin: center top; object-fit: cover; object-position: top center; transition: transform .6s cubic-bezier(.22,1,.36,1); } /* Matt 8/28: these photos are shorter/wider than the old 16:9 shots — fill the card and center instead of the tall-image top-anchor crop, so nothing misaligns. */ .feature-card--pro-team .feature-card__img, .feature-card--rapid-response .feature-card__img { top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; transform: none; object-position: center; } .feature-card--pro-team:hover .feature-card__img, .feature-card--rapid-response:hover .feature-card__img { transform: scale(1.03); } /* Matt 8/28: the translateX(-50%) belongs ONLY to the top-anchored cards (left:50%). The pro-team/rapid-response images are full-bleed at left:0, so applying it on hover yanked them 50% of their width to the left. Exclude them here — their own hover rule above scales in place with no slide. */ .feature-card:not(.feature-card--pro-team):not(.feature-card--rapid-response):hover .feature-card__img, .service-card:hover .service-card__img { transform: translateX(-50%) scale(1.03); } .feature-card__scrim, .service-card__scrim { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(10,6,8,.08) 0%, rgba(10,6,8,.28) 32%, rgba(10,6,8,.78) 62%, rgba(146,24,47,.96) 100% ); } [data-theme="day"] .feature-card__scrim, [data-theme="day"] .service-card__scrim { background: linear-gradient( 180deg, rgba(250,247,244,.12) 0%, rgba(30,15,18,.38) 38%, rgba(25,8,12,.82) 65%, rgba(146,24,47,.94) 100% ); } .feature-card__body, .service-card__content { position: relative; z-index: 1; padding: clamp(1.35rem, 3vw, 2rem); color: #fff; } .feature-card__body h3, .service-card__content h3 { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); } .feature-card__body p, .service-card__content p { color: rgba(255,255,255,.94); text-shadow: 0 1px 10px rgba(0,0,0,.4); } .feature-card__body .card-link, .service-card__content .card-link { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); } /* Mobile: reset per-card image offsets — standard full-bleed cover */ @media (max-width: 899px) { .feature-card__img, .service-card__img { top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: 100%; transform: none; transform-origin: center center; object-fit: cover; object-position: center center; } .feature-card--pro-team .feature-card__img, .feature-card--rapid-response .feature-card__img { top: 0; } .feature-card:hover .feature-card__img, .service-card:hover .service-card__img { transform: scale(1.03); } } /* Media panels */ .media-panel { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } @media (min-width: 900px) { .media-panel { grid-template-columns: 1.05fr .95fr; } } @media (min-width: 900px) { .media-panel--reverse { direction: rtl; } .media-panel--reverse > * { direction: ltr; } } .media-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border); box-shadow: 0 24px 64px rgba(0,0,0,.28); aspect-ratio: 16 / 10; } .media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; } .media-frame--align-left img { object-position: right center; } .media-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); border-radius: inherit; } .media-frame__badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; font: 600 var(--fs-micro)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(200,40,65,.85); border: 1px solid rgba(255,255,255,.15); padding: .4rem .65rem; border-radius: 999px; } .media-frame__badge--stacked { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; border-radius: var(--radius-md); padding: .7rem .85rem; line-height: 1.3; text-transform: none; letter-spacing: .04em; } .media-frame__badge--stacked > span { display: block; } .media-frame__badge-em { margin-top: .25rem; padding-top: .45rem; border-top: 1px solid rgba(255,255,255,.28); font-size: .88em; letter-spacing: .07em; text-transform: uppercase; } .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } } /* ─── Request page: hero + form split ───────────────────────────── */ .request-split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } @media (min-width: 900px) { .request-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } } .request-split__hero { text-align: left; padding-top: clamp(0, 2vh, 1rem); } .hero-cinema--request .eyebrow { justify-content: flex-start; } .hero-cinema--request .eyebrow::before { display: block; } .hero-cinema--request .eyebrow::after { display: none; } .hero-cinema--request .lead { max-width: 42ch; margin-inline: 0; } .request-hero-points { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; gap: .65rem; } .request-hero-points li { position: relative; padding-left: 1.35rem; font: 500 var(--fs-body)/1.45 var(--f-sans); color: var(--text-2); } .request-hero-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--red-mid); box-shadow: 0 0 10px var(--accent-glow); } .request-hero-note { margin-top: 1.5rem; font: 400 var(--fs-micro)/1.5 var(--f-sans); color: var(--gray); } .request-hero-note a { color: var(--red-mid); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; } .request-form__title { font: 600 var(--fs-h3)/1.2 var(--f-serif); margin-bottom: 1.25rem; } .request-form__submit { width: 100%; } .request-reassurance { padding-top: clamp(2.5rem, 6vh, 4rem); } .request-reassurance__steps { margin-top: clamp(2rem, 5vw, 3rem); } .request-reassurance__pitch { margin-top: clamp(2.5rem, 6vw, 4rem); padding: clamp(2rem, 5vw, 3rem); text-align: center; border-radius: var(--radius-lg); border: 1px solid var(--card-border); background: radial-gradient(ellipse at 50% 0%, rgba(200,40,65,.12), transparent 58%), var(--card-bg); box-shadow: 0 20px 56px rgba(0,0,0,.14); } .request-reassurance__quote { font: 500 clamp(1.05rem, 2.4vw, 1.35rem)/1.55 var(--f-serif); color: var(--text); max-width: 52ch; margin: 0 auto; letter-spacing: .01em; } .request-reassurance__sig { margin-top: 1.25rem; font: 600 var(--fs-micro)/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); } .request-reassurance__signals { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem 1rem; margin-top: 1.75rem; } .request-reassurance__signals span { font: 600 var(--fs-micro)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); padding: .55rem .9rem; border-radius: 999px; border: 1px solid var(--card-border); background: rgba(255,255,255,.03); } [data-theme="day"] .request-reassurance__signals span { background: rgba(255,255,255,.65); } /* ─── Forms ──────────────────────────────────────────────────────── */ .form-panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 16px 48px rgba(0,0,0,.18); } .form-row { margin-bottom: 1rem; } .form-row label { display: block; font: 600 var(--fs-label)/1 var(--f-sans); margin-bottom: .4rem; color: var(--text-2); } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: .75rem .9rem; font: 400 var(--fs-body)/1.4 var(--f-sans); color: var(--text); background: var(--bg-2); border: 1px solid var(--card-border); border-radius: 8px; transition: border-color .2s, box-shadow .2s; } .form-row input:focus-visible, .form-row select:focus-visible, .form-row textarea:focus-visible, .carrier-portal__field input:focus-visible { outline: none; border-color: var(--red-mid); box-shadow: 0 0 0 3px var(--accent-glow); } .form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } } .form-row--full { grid-column: 1 / -1; } .req { color: var(--red-mid, #c82841); } .request-form__section-label { display: block; font: 600 var(--fs-label, 13px) / 1 var(--f-sans, 'Barlow', sans-serif); text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 0 0 .75rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: 600 var(--fs-label)/1 var(--f-sans); letter-spacing: .06em; text-transform: uppercase; padding: .9rem 1.6rem; border-radius: 8px; border: 1px solid var(--red-bright); background: var(--red-mid); color: #fff; cursor: pointer; transition: all .25s; } .btn:hover { background: var(--red-bright); box-shadow: 0 0 28px var(--accent-glow); transform: translateY(-1px); } .btn:focus-visible, .theme-toggle:focus-visible, .card-link:focus-visible, .footer-col a:focus-visible, .request-hero-note a:focus-visible, .carrier-portal__footnote a:focus-visible, .prose a:focus-visible { outline: 2px solid var(--red-mid); outline-offset: 3px; } .btn--outline { background: rgba(10,6,8,.35); color: #fff; border-color: rgba(255,255,255,.35); } [data-theme="day"] .btn--outline { background: rgba(255,255,255,.5); color: var(--red-mid); border-color: var(--card-border); } .btn--outline:hover { border-color: var(--red-mid); background: rgba(200,40,65,.12); color: var(--red-mid); } .hero-cinema .btn--outline { color: #fff; border-color: rgba(255,255,255,.4); } [data-theme="day"] .hero-cinema .btn--outline { color: var(--red-deep); background: rgba(255,255,255,.92); border-color: rgba(146,24,47,.42); box-shadow: 0 2px 12px rgba(42,34,38,.08); } [data-theme="day"] .hero-cinema .btn--outline:hover { color: #fff; background: var(--red-mid); border-color: var(--red-mid); box-shadow: 0 0 28px var(--accent-glow); } /* ─── Carrier portal login panel ─────────────────────────────────── */ .carrier-portal { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--card-border); box-shadow: 0 28px 80px -16px rgba(0,0,0,.45); } .carrier-portal__bg { position: absolute; inset: 0; } .carrier-portal__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.05); } .carrier-portal__overlay { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(10,6,8,.94) 0%, rgba(160,30,50,.82) 42%, rgba(10,6,8,.72) 100%), radial-gradient(ellipse at 78% 22%, rgba(209,32,60,.28), transparent 55%); } [data-theme="day"] .carrier-portal__overlay { background: linear-gradient(115deg, rgba(250,247,244,.94) 0%, rgba(182,45,63,.78) 44%, rgba(146,24,47,.84) 100%), radial-gradient(ellipse at 78% 22%, rgba(200,40,65,.22), transparent 55%); } .carrier-portal__grid { position: relative; z-index: 1; display: grid; gap: clamp(1.75rem, 4vw, 3rem); padding: clamp(2rem, 5vw, 3.5rem); align-items: center; } @media (min-width: 900px) { .carrier-portal__grid { grid-template-columns: 1.15fr .85fr; } } .carrier-portal__title { color: #fff; margin-bottom: 1rem; text-shadow: 0 2px 24px rgba(0,0,0,.35); } [data-theme="day"] .carrier-portal__title { color: #fff; } .carrier-portal__lead { color: rgba(255,255,255,.9); margin-bottom: 1.75rem; max-width: 52ch; } .carrier-portal__features { list-style: none; display: grid; gap: 1rem; margin-bottom: 2rem; } .carrier-portal__features li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; color: rgba(255,255,255,.9); font-size: var(--fs-label); line-height: 1.55; } .carrier-portal__features strong { color: #fff; font-weight: 600; } .carrier-portal__feature-icon { font: 700 var(--fs-micro)/1 var(--f-mono); letter-spacing: .08em; color: #fff; background: rgba(200,40,65,.55); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: .45rem .5rem; min-width: 2.25rem; text-align: center; box-shadow: 0 0 18px rgba(209,32,60,.35); } .carrier-portal__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .carrier-portal__metric { padding: .85rem .75rem; border-radius: var(--radius-md); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); } .carrier-portal__metric-num { display: block; font: 700 clamp(14px, 2.2vw, 18px)/1.2 var(--f-mono); color: #fff; margin-bottom: .35rem; } .carrier-portal__metric-label { display: block; font-size: var(--fs-micro); color: rgba(255,255,255,.72); letter-spacing: .03em; } .carrier-portal__panel { position: relative; padding: clamp(1.5rem, 3.5vw, 2.25rem); border-radius: var(--radius-lg); background: rgba(12,8,10,.72); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.35); } [data-theme="day"] .carrier-portal__panel { background: rgba(18,10,12,.78); } .carrier-portal__panel-glow { position: absolute; inset: -20% -10% auto; height: 55%; background: radial-gradient(ellipse at 50% 0%, rgba(209,32,60,.45), transparent 68%); pointer-events: none; opacity: .85; } .carrier-portal__panel-eyebrow { font: 600 var(--fs-micro)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,180,190,.95); margin-bottom: .65rem; } .carrier-portal__panel-title { font: 600 clamp(22px, 4vw, 32px)/1.15 var(--f-serif); color: #fff; margin-bottom: .75rem; } .carrier-portal__panel-copy { color: rgba(255,255,255,.86); margin-bottom: 1.35rem; font-size: var(--fs-label); line-height: 1.6; } .carrier-portal__form { display: grid; gap: .85rem; margin-bottom: .75rem; } .carrier-portal__field label { display: block; font: 600 var(--fs-micro)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: .4rem; } .carrier-portal__field input { width: 100%; padding: .72rem .85rem; font: 400 var(--fs-body)/1.4 var(--f-sans); color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; transition: border-color .2s, box-shadow .2s, background .2s; } .carrier-portal__field input::placeholder { color: rgba(255,255,255,.38); } .carrier-portal__field input:focus { outline: none; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.12); box-shadow: 0 0 0 3px rgba(200,40,65,.35); } .carrier-portal__cta { width: 100%; justify-content: center; margin-top: .15rem; } .carrier-portal__cta-secondary { display: inline-flex; width: 100%; justify-content: center; margin-bottom: 1rem; color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); } .carrier-portal__cta-secondary:hover { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.12); } .carrier-portal__footnote { font-size: var(--fs-micro); color: rgba(255,255,255,.62); line-height: 1.5; } .carrier-portal__footnote a { color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: 2px; } /* ─── Map ────────────────────────────────────────────────────────── */ .coverage-map { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 2rem); box-shadow: 0 16px 48px rgba(0,0,0,.15); } .coverage-map svg { width: 100%; max-height: 420px; margin: 0 auto; } /* Coverage map: red=everyday SC/NC/MS, blue=Nat Cat deploy, green=recruit priority */ .map-region { fill: rgba(200,40,65,.15); stroke: rgba(200,40,65,.4); stroke-width: 1.5; transition: fill .3s; } .map-region--primary { fill: rgba(185,30,48,.55); stroke: rgba(185,30,48,.8); } /* Red/Crimson — everyday coverage */ .map-region--primary:hover { fill: rgba(185,30,48,.72); } .map-region--deploy { fill: rgba(30,90,200,.28); stroke: rgba(30,90,200,.55); } /* Blue — Nat Cat deployment */ .map-region--deploy:hover { fill: rgba(30,90,200,.45); } .map-region--recruit { fill: rgba(30,160,70,.32); stroke: rgba(30,160,70,.6); } /* Green — recruit priority */ .map-region--recruit:hover { fill: rgba(30,160,70,.5); } .map-label { font: 600 11px/1 var(--f-mono); letter-spacing: .06em; fill: rgba(255,255,255,.85); pointer-events: none; } [data-theme="day"] .map-label { fill: rgba(42,34,38,.75); } .coverage-split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } @media (min-width: 900px) { .coverage-split { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); } } .coverage-map__legend { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1rem; font: 600 var(--fs-micro)/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); } .coverage-map__legend span { display: inline-flex; align-items: center; gap: .45rem; } .coverage-map__swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--red-mid); } .coverage-map__swatch--primary { background: rgba(185,30,48,.55); border-color: rgba(185,30,48,.8); } .coverage-map__swatch--deploy { background: rgba(30,90,200,.35); border-color: rgba(30,90,200,.7); } .coverage-map__swatch--recruit { background: rgba(30,160,70,.4); border-color: rgba(30,160,70,.7); } /* ─── Spacing & layout utilities ─────────────────────────────────── */ .lead--tight { margin-top: 1rem; } .lead--mb-sm { margin-bottom: 1.5rem; } .lead--mb-md { margin-bottom: 1.75rem; } .section-title--mb { margin-bottom: 1rem; } .section-head .lead { margin-top: 1rem; } .section-cta { margin-top: 2.5rem; } .media-panel .section-title { margin-bottom: 1rem; } .media-panel .lead { margin-bottom: 1.5rem; } .btn-group { display: flex; flex-wrap: wrap; gap: .75rem; } .btn--block { width: 100%; } .btn--block + .btn--block { margin-top: .75rem; } .cta-panel { max-width: 480px; margin-inline: auto; } .contact-stack > .card + .card { margin-top: 1rem; } .contact-stack .media-frame { margin-top: 1.5rem; } .panel-title { font: 600 var(--fs-h3)/1.2 var(--f-serif); margin-bottom: 1.25rem; } .text-muted { color: var(--text-2); } .prose a { color: var(--red-mid); font-weight: 600; transition: color .15s ease; } .prose a:hover { color: var(--red-bright); } /* Buttons inside body-copy blocks (.prose) must stay white-on-red like every other .btn on the site. Without this rule, the ".prose a" text-color rule above wins on specificity and paints the button's own label the same red as its background — the button is technically on the page, but its text is unreadable. This was the "Request Inspection button not visible on service pages" bug. */ .prose a.btn, .prose a.btn:hover { color: #fff; } [data-theme="day"] .prose a.btn--outline, [data-theme="day"] .prose a.btn--outline:hover { color: var(--red-mid); } .prose--offset { margin-top: 2.5rem; } /* ─── Process steps ─────────────────────────────────────────────── */ .process-step { text-align: center; padding: clamp(1.25rem, 3vw, 2rem); } .process-step__num { width: 44px; height: 44px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font: 700 var(--fs-label)/1 var(--f-mono); color: #fff; background: var(--red-mid); border: 1px solid var(--red-bright); box-shadow: 0 0 20px var(--accent-glow); } /* ─── Footer ─────────────────────────────────────────────────────── */ .site-footer { position: relative; z-index: 2; border-top: 1px solid var(--line-strong); padding: clamp(3.5rem, 9vh, 6.5rem) 0 clamp(2rem, 4vh, 3rem); margin-top: var(--section-gap); background: linear-gradient(180deg, transparent 0%, rgba(146,24,47,.05) 35%, rgba(146,24,47,.1) 100%); } .footer-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; } @media (min-width: 720px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } } @media (min-width: 1100px) { .footer-grid { grid-template-columns: minmax(280px, 1.75fr) repeat(3, 1fr); } } .footer-brand { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1.1rem; } .footer-logo-link { display: block; align-self: flex-start; } .footer-brand .brand-logo--flat { margin: 0; align-self: flex-start; justify-content: flex-start; } .footer-brand .brand-logo--flat img { max-height: clamp(52px, 7vw, 72px); width: auto; } .footer-brand p { color: var(--text-2); margin: 0; max-width: 44ch; font-size: var(--fs-label); line-height: 1.65; } .footer-col h4 { font: 600 var(--fs-label)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--red-mid); margin-bottom: 1.1rem; } .footer-col a { display: block; padding: .35rem 0; color: var(--text-2); font-size: var(--fs-label); transition: color .15s ease; } .footer-col a:hover { color: var(--red-mid); } .footer-bottom { margin-top: clamp(2.5rem, 5vh, 3.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: var(--fs-micro); color: var(--gray); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; } .footer-bottom a { color: inherit; transition: color .15s ease; } .footer-bottom a:hover { color: var(--red-mid); } /* ─── Prose ──────────────────────────────────────────────────────── */ .prose { max-width: 68ch; } .prose p { margin-bottom: 1.25rem; color: var(--text-2); } .prose h2 { font: 600 var(--fs-h3)/1.2 var(--f-serif); color: var(--text); margin: 2rem 0 1rem; } .prose ul { margin: 0 0 1.25rem 1.25rem; color: var(--text-2); } .prose li { margin-bottom: .5rem; } .prose strong { color: var(--text); } /* ── Hero user-type strip (one line, theme-aware — v4 2026-09-19) ─────────── */ .usertypes { display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: clamp(.55rem, 1.6vw, 1.5rem); margin: clamp(1.7rem, 4vw, 2.6rem) auto 0; max-width: 1040px; padding: 0 .8rem; overflow-x: auto; scrollbar-width: none; } .usertypes::-webkit-scrollbar { display: none; } .usertype { flex: 0 0 auto; width: 104px; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; opacity: .92; transition: color .25s, transform .25s cubic-bezier(.22,1,.36,1), opacity .25s; } .usertype:hover { color: var(--red-bright); opacity: 1; transform: translateY(-3px); } .usertype__icon { display: grid; place-items: center; } .usertype__icon svg { width: 32px; height: 32px; display: block; } .usertype__label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .03em; line-height: 1.25; text-align: center; color: inherit; } @media (max-width: 600px) { .usertypes { justify-content: flex-start; gap: .9rem; padding: 0 1rem .4rem; } .usertype { width: 88px; } .usertype__icon svg { width: 29px; height: 29px; } .usertype__label { font-size: 9.5px; } } @media (prefers-reduced-motion: reduce) { .usertype { transition: none; } .usertype:hover { transform: none; } }