/* emergency.css — V2 emergency-services landing page (BJG-113). Single-CTA-path paid LP for crawldaddyrepairs.com. No nav, single funnel. Builds on tokens.css; reuses .btn / .field / .lead-form / .form-status / .container from components.css. LP-specific layout + the dark hero/process/footer live here. Hub mechanics per LP Hub Strategy §3 (logo + phone header, NAP-only footer, no nav). */ /* ---------- A/B harness (BJG-113) ---------- Variant B markup is hidden by default; lp.js sets data-ab on ASAP to swap. Default (no JS) = variant A, so there is no flash for the majority bucket. */ [data-ab-variant="b"] { display: none; } html[data-ab="b"] [data-ab-variant="a"] { display: none; } html[data-ab="b"] [data-ab-variant="b"] { display: revert; } /* ---------- emergency topbar ---------- */ .lp-topbar { background: var(--cde-navy-deep); color: var(--fg-on-dark-2); font-size: 0.82rem; } .lp-topbar .container { align-items: center; display: flex; gap: var(--s-3); justify-content: center; padding: var(--s-2) 0; text-align: center; } .lp-topbar strong { color: #fff; font-weight: 700; } .lp-topbar a { color: var(--cde-gold-bright); font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; } /* ---------- header (logo + phone, NO nav) ---------- */ .lp-header { background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(1.1) blur(4px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; } .lp-header .container { align-items: center; display: flex; gap: var(--s-4); justify-content: space-between; min-height: 72px; } .lp-header .lp-brand img { height: 44px; width: auto; } .lp-phone { align-items: center; color: var(--cde-red); display: inline-flex; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800; gap: var(--s-2); letter-spacing: 0.01em; white-space: nowrap; } .lp-phone:hover { color: var(--cde-red-deep); text-decoration: none; } .lp-phone svg { height: 20px; width: 20px; } /* ---------- hero ---------- */ .lp-hero { background: var(--cde-navy-deep); color: #fff; overflow: hidden; position: relative; } .lp-hero__bg { inset: 0; position: absolute; } .lp-hero__bg img { height: 100%; object-fit: cover; opacity: 0.3; width: 100%; } .lp-hero__overlay { inset: 0; position: absolute; background: linear-gradient( 180deg, rgba(11, 31, 50, 0.82) 0%, rgba(20, 48, 74, 0.55) 45%, rgba(11, 31, 50, 0.88) 100% ); } .lp-hero__inner { position: relative; padding: clamp(56px, 9vw, 104px) 0; text-align: center; } .lp-hero__inner .container { max-width: 880px; } .lp-eyebrow-pill { border: 1px solid rgba(245, 184, 46, 0.55); border-radius: var(--r-pill); color: var(--cde-gold-bright); display: inline-block; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; letter-spacing: var(--tracking-caps); margin-bottom: var(--s-5); padding: 6px 16px; text-transform: uppercase; } .lp-hero h1 { color: #fff; font-size: clamp(2.4rem, 7vw, 4.25rem); letter-spacing: -0.01em; line-height: 0.97; margin-bottom: var(--s-4); text-transform: uppercase; } .lp-hero__sub { color: var(--cde-gold-bright); font-family: var(--font-heading); font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 700; margin-bottom: var(--s-4); } .lp-hero__lead { color: rgba(255, 255, 255, 0.86); font-size: var(--fs-body-lg); line-height: var(--lh-normal); margin: 0 auto var(--s-7); max-width: 620px; } .lp-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; } .lp-hero__cta .btn { font-size: 0.95rem; padding: 16px 28px; } .lp-trust-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-7); } /* Direct children only — the nested .star span must NOT inherit the pill border/radius/padding (BJG-180: that produced an extra outline around the star). */ .lp-trust-pills > span { border: 1px solid rgba(245, 184, 46, 0.5); border-radius: var(--r-pill); font-family: var(--font-heading); font-size: 0.74rem; font-weight: 700; letter-spacing: var(--tracking-wide); padding: 7px 14px; text-transform: uppercase; } .lp-trust-pills .star { color: var(--cde-gold-bright); } /* ---------- section heads ---------- */ .lp-cream { background: var(--cde-cream); } .lp-head { margin: 0 auto var(--s-7); max-width: 720px; text-align: center; } .lp-head h2 { margin-bottom: var(--s-3); } .lp-head p { color: var(--fg2); font-size: var(--fs-body-lg); margin: 0; } .lp-eyebrow { color: var(--cde-gold-deep); font-family: var(--font-heading); font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: var(--tracking-caps); text-transform: uppercase; } /* ---------- problem cards ---------- */ .lp-problems { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-problem-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); color: var(--fg1); display: flex; flex-direction: column; overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .lp-problem-card:hover { box-shadow: var(--shadow-lg); color: var(--fg1); text-decoration: none; transform: translateY(-3px); } .lp-problem-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .lp-problem-card__body { padding: var(--s-5); } .lp-problem-card h3 { font-size: var(--fs-h5); line-height: var(--lh-snug); margin-bottom: var(--s-3); } .lp-problem-card p { color: var(--fg2); margin-bottom: var(--s-4); } .lp-arrow { color: var(--cde-red); font-family: var(--font-heading); font-size: 0.76rem; font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; } .lp-problem-card:hover .lp-arrow { text-decoration: underline; } /* ---------- services ---------- */ .lp-services { display: grid; gap: var(--s-7); grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-service { border-top: 4px solid var(--cde-gold); padding-top: var(--s-5); } .lp-service h3 { color: var(--cde-navy); font-size: 1.1rem; letter-spacing: var(--tracking-wide); margin-bottom: var(--s-4); text-transform: uppercase; } .lp-service ul { display: grid; gap: var(--s-3); list-style: none; margin: 0; padding: 0; } .lp-service li { align-items: flex-start; color: var(--fg2); display: flex; gap: var(--s-3); } .lp-service li::before { background: var(--cde-gold); content: ""; flex: 0 0 8px; height: 8px; margin-top: 9px; width: 8px; } /* ---------- why ---------- */ .lp-why { align-items: center; display: grid; gap: clamp(32px, 6vw, 64px); grid-template-columns: 1fr 1fr; } .lp-why__media { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .lp-why__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; } .lp-why h2 { margin-bottom: var(--s-6); } .lp-why ul { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; } .lp-why li { color: var(--fg2); display: flex; gap: var(--s-3); } .lp-why li svg { color: var(--cde-gold); flex: 0 0 22px; height: 22px; margin-top: 3px; width: 22px; } .lp-why li strong { color: var(--cde-navy); } /* ---------- reviews ---------- */ .lp-reviews-stars { color: var(--cde-gold); font-size: 1.8rem; letter-spacing: 0.18em; margin-bottom: var(--s-2); } .lp-reviews-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); } .lp-review { background: var(--cde-bone); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); } .lp-review__stars { color: var(--cde-gold); letter-spacing: 0.14em; margin-bottom: var(--s-3); } .lp-review p { color: var(--fg2); line-height: var(--lh-normal); margin-bottom: var(--s-4); } .lp-review cite { color: var(--cde-navy); font-family: var(--font-heading); font-size: 0.78rem; font-style: normal; font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; } .lp-reviews-link { margin-top: var(--s-6); text-align: center; } .lp-reviews-link a { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; } /* ---------- process (dark) ---------- */ .lp-process { background: var(--cde-navy-deep); color: #fff; } .lp-process .lp-eyebrow { color: var(--cde-gold-bright); } .lp-process .lp-head h2 { color: #fff; } .lp-steps { display: grid; gap: var(--s-6); grid-template-columns: repeat(4, 1fr); margin-bottom: var(--s-8); } .lp-step__num { color: var(--cde-gold-bright); font-family: var(--font-display); font-size: clamp(3.2rem, 6vw, 4.5rem); font-weight: 900; line-height: 1; } .lp-step__rule { background: rgba(245, 184, 46, 0.55); height: 2px; margin: var(--s-3) 0 var(--s-4); width: 44px; } .lp-step h3 { color: #fff; font-size: 1.05rem; letter-spacing: var(--tracking-wide); margin-bottom: var(--s-2); text-transform: uppercase; } .lp-step p { color: rgba(255, 255, 255, 0.72); font-size: var(--fs-body-sm); margin: 0; } /* BJG-182: copy sits ABOVE the image and the image spans the full card width, so it renders large and keeps its native aspect ratio (no distortion). */ .lp-beforeafter { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-lg); margin: 0 auto; max-width: 880px; padding: clamp(20px, 3vw, 32px); } .lp-beforeafter__copy { margin: 0 auto var(--s-6); max-width: 640px; text-align: center; } .lp-beforeafter img { border-radius: var(--r-md); display: block; height: auto; width: 100%; } .lp-beforeafter h3 { color: #fff; margin: var(--s-2) 0 var(--s-3); } .lp-beforeafter p { color: rgba(255, 255, 255, 0.82); margin: 0; } .lp-beforeafter .lp-eyebrow { color: var(--cde-gold-bright); } /* ---------- faq ---------- */ .lp-faq-wrap { margin: 0 auto; max-width: 820px; } .lp-faq { display: grid; gap: var(--s-3); } .lp-faq details { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: var(--s-4) var(--s-5); } .lp-faq summary { align-items: center; color: var(--cde-navy); cursor: pointer; display: flex; font-family: var(--font-heading); font-weight: 800; gap: var(--s-4); justify-content: space-between; list-style: none; } .lp-faq summary::-webkit-details-marker { display: none; } .lp-faq summary::after { color: var(--cde-gold-deep); content: "+"; font-size: 1.4rem; line-height: 1; } .lp-faq details[open] summary::after { content: "\2013"; } .lp-faq details p { color: var(--fg2); margin: var(--s-3) 0 0; } /* ---------- request form ---------- */ .lp-request-wrap { margin: 0 auto; max-width: 660px; } .lp-form-card { border-top: 6px solid var(--cde-gold); margin-top: var(--s-6); padding: clamp(20px, 4vw, 36px); } .lp-form-card .lead-form { gap: var(--s-4); } .lp-form-row { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; } .lp-form-card .btn-primary { font-size: 1rem; min-height: 52px; } .lp-form-fallback { color: var(--fg2); font-size: var(--fs-body-sm); margin-top: var(--s-5); text-align: center; } .lp-form-fallback a { font-weight: 800; } .lp-form-micro { color: var(--fg3); font-size: 0.78rem; margin: 0; text-align: center; } /* ---------- footer ---------- */ .lp-footer { background: var(--cde-navy-deep); color: var(--fg-on-dark-2); padding: var(--s-8) 0 var(--s-6); } .lp-footer__grid { display: grid; gap: var(--s-7); grid-template-columns: 1.3fr 1fr 1fr; } /* BJG-183: show the horizontal logo in full color (matches cd-home footer), not the white silhouette the brightness/invert filter produced. */ .lp-footer__logo { height: 56px; margin-bottom: var(--s-4); width: auto; } .lp-footer p { color: var(--fg-on-dark-2); font-size: var(--fs-body-sm); line-height: var(--lh-normal); } .lp-footer h3 { color: var(--cde-gold-bright); font-size: 0.74rem; letter-spacing: var(--tracking-caps); margin-bottom: var(--s-4); text-transform: uppercase; } .lp-footer__contact a { color: #fff; font-family: var(--font-heading); font-weight: 800; } .lp-footer__contact span { display: block; font-size: var(--fs-body-sm); margin-top: var(--s-2); } .lp-footer__bottom { border-top: 1px solid var(--border-on-dark); color: var(--fg-on-dark-3); display: flex; flex-wrap: wrap; font-size: 0.76rem; gap: var(--s-3); justify-content: space-between; letter-spacing: var(--tracking-wide); margin-top: var(--s-7); padding-top: var(--s-5); text-transform: uppercase; } .lp-footer__bottom a { color: var(--fg-on-dark-3); } .lp-footer__bottom a:hover { color: var(--cde-gold-bright); } /* ---------- mobile sticky call bar ---------- */ .lp-callbar { display: none; } /* ---------- responsive ---------- */ @media (max-width: 900px) { .lp-problems, .lp-services, .lp-why, .lp-reviews-grid, .lp-steps { grid-template-columns: 1fr; } .lp-why__media { order: -1; } .lp-steps { gap: var(--s-7); } } @media (max-width: 720px) { body { padding-bottom: 70px; } /* clearance for the sticky call bar */ .lp-topbar .container { flex-direction: column; gap: 2px; padding: var(--s-2) 0; } .lp-header .lp-brand img { height: 38px; } .lp-phone { font-size: 1rem; } .lp-phone .lp-phone__label { display: none; } /* keep just the number on small screens */ .lp-hero__cta .btn { width: 100%; } .lp-form-row { grid-template-columns: 1fr; } .lp-callbar { background: var(--cde-navy-deep); bottom: 0; box-shadow: 0 -8px 24px rgba(11, 31, 50, 0.28); display: grid; gap: var(--s-2); grid-template-columns: 1fr 1fr; left: 0; padding: var(--s-2) var(--s-3); position: fixed; right: 0; z-index: 60; } .lp-callbar .btn { min-height: 50px; width: 100%; } } /* Respect reduced-motion */ @media (prefers-reduced-motion: reduce) { .lp-problem-card { transition: none; } html { scroll-behavior: auto; } }