/* ============================================================================ econo-roofing.com — CANONICAL COMPONENTS (Direction B "Field Guide") Every rule is built from tokens.css. No hardcoded colors/radii/shadows. Targets the site's EXISTING class vocabulary (.sec, .eyebrow, .h-lg, .btn, .il-card, .faq-item, .nav-*, .sf-*) so a stylesheet swap upgrades pages in place. Ships alongside tokens.css; replaces homepage/shared/apple-refinements. All interactive components carry: hover, focus-visible, active, disabled, error, loading, empty. See design/direction.md. ============================================================================ */ /* ---------- 1. RESET & BASE ---------- */ *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ff-body); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img,svg,video { max-width: 100%; height: auto; display: block; } a { color: var(--red-ink); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--red-deep); } /* hero trust-chips wrap their label in a link — keep the chip's own (white) text, not red-ink (was ~1.26:1 on the near-black chip) */ .blog-hero__pill a, .contact-hero__pill a { color: inherit; } h1,h2,h3,h4 { font-family: var(--ff-display); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); margin: 0 0 var(--sp-4); color: var(--ink); } p { margin: 0 0 var(--sp-4); } ul,ol { margin: 0 0 var(--sp-4); } strong,b { font-weight: var(--fw-strong); } hr { border: 0; border-top: var(--border-hair); margin: var(--sp-6) 0; } /* global visible focus — AA, sitewide */ :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r); } ::selection { background: var(--red); color: #fff; } .visually-hidden { position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -60px; left: 8px; z-index: var(--z-toast); background: var(--ink); color: #fff; padding: 10px 16px; font-family: var(--ff-display); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: var(--tracking-caps); transition: top var(--dur) var(--ease); } .skip-link:focus { top: 8px; color: #fff; } /* ---------- 2. REVEAL (token-driven, no-JS + reduced-motion safe) ---------- */ /* content is visible by default; the reveal transition only applies when JS adds .js to . So a no-JS visitor always sees content (fixes audit blank-band). */ .rv,.rv-scale { opacity: 1; transform: none; } html.js .rv { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } html.js .rv-scale { opacity: 0; transform: scale(.97); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } html.js .rv.vis, html.js .rv-scale.vis { opacity: 1; transform: none; } html.js .rv.d1 { transition-delay: .06s; } html.js .rv.d2 { transition-delay: .12s; } html.js .rv.d3 { transition-delay: .18s; } @media (prefers-reduced-motion: reduce) { html.js .rv, html.js .rv-scale { opacity: 1!important; transform: none!important; } } /* ---------- 3. SECTION LAYOUT ---------- */ .sec { padding: var(--sp-sec) 0; position: relative; } .sec-sm { padding: var(--sp-sec-sm) 0; } .sec > .sec-inner, .sec-inner, .sec > .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-side); } /* pages that put content directly in .sec without an inner wrapper still get gutters */ .sec { padding-left: 0; padding-right: 0; } .sec--paper { background: var(--paper); color: var(--ink); } .sec--paper2 { background: var(--paper-2); color: var(--ink); } .sec--dark { background: var(--ink); color: var(--on-dark); } .sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4 { color: var(--on-dark); } .sec--dark p { color: var(--on-dark-2); } .sec--red { background: var(--red); color: #fff; } .sec--red h1,.sec--red h2,.sec--red h3 { color: #fff; } /* section header */ .sec-hdr { margin-bottom: var(--sp-7); max-width: var(--maxw-text); } .sec-hdr.ctr { margin-left: auto; margin-right: auto; text-align: center; } /* ---------- 4. TYPE UTILITIES ---------- */ .h-lg { font-family: var(--ff-display); font-weight: var(--fw-display); font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: var(--tracking-display); margin: 0 0 var(--sp-4); color: inherit; } .h-md { font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-h3); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--sp-3); } .h-sm { font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-h4); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin: 0 0 var(--sp-2); } .b-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink-2); margin: 0 0 var(--sp-4); } .b-md { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); margin: 0 0 var(--sp-3); } .sec--dark .b-lg,.sec--dark .b-md { color: var(--on-dark-2); } /* eyebrow — ONE shape: solid red inline block, white caps. */ .eyebrow { display: inline-block; background: var(--red); color: #fff !important; /* canonical red pill: white text ALWAYS — beats legacy `.x .eyebrow{color:red}` that predated the pill and caused red-on-red invisible labels */ font-family: var(--ff-display); font-weight: var(--fw-semi); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); padding: 5px 12px; border-radius: var(--r); margin: 0 0 var(--sp-4); line-height: 1.3; } .eyebrow--ink { background: var(--ink); } /* .form-eyebrow is a DIFFERENT component (red label, no pill) — leave it red-on-transparent */ /* short red rule under headers */ .rule-red { width: 48px; height: 3px; background: var(--red); border: 0; margin: var(--sp-4) 0; } .ctr .rule-red { margin-left: auto; margin-right: auto; } /* ---------- 5. BUTTONS — one system; every legacy CTA class maps here ---------- */ .btn, .nav-pill, .sf-cta-primary, .sf-cta-secondary, .fw-next, .fw-back, .form-submit-v2, .gw-pill, .btn--primary, .btn--secondary { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); text-decoration: none; padding: 14px 24px; min-height: 48px; border-radius: var(--r); border: 1.5px solid transparent; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease); white-space: nowrap; line-height: 1; } /* primary — solid red */ .btn--primary, .nav-pill, .sf-cta-primary, .fw-next, .form-submit-v2, .btn.is-primary { background: var(--red); color: #fff; border-color: var(--red); } .btn--primary:hover, .nav-pill:hover, .sf-cta-primary:hover, .fw-next:hover, .form-submit-v2:hover, .btn.is-primary:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; box-shadow: var(--lift); } .btn--primary:active, .nav-pill:active, .sf-cta-primary:active, .form-submit-v2:active { transform: translate(1px,1px); box-shadow: none; } /* secondary — ink outline on light */ .btn--secondary, .sf-cta-secondary, .fw-back, .gw-pill, .btn.is-secondary { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--secondary:hover, .sf-cta-secondary:hover, .fw-back:hover, .btn.is-secondary:hover { background: var(--ink); color: #fff; box-shadow: var(--lift-red); } /* on-dark secondary — white outline (for use inside .sec--dark and CTA banners) */ .sec--dark .btn--secondary, .cta-banner .btn--secondary, .btn--secondary-dark, .sec--dark .sf-cta-secondary { color: #fff; border-color: rgba(255,255,255,.6); background: transparent; } .sec--dark .btn--secondary:hover, .cta-banner .btn--secondary:hover, .btn--secondary-dark:hover { background: #fff; color: var(--ink); border-color: #fff; } /* ghost / text button */ .btn--ghost { background: transparent; border-color: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; } .btn--ghost:hover { color: var(--red); background: transparent; } /* legacy button color variants (global, not just inside .cta-banner) */ .btn-red { background: var(--red); color: #fff; border-color: var(--red); } .btn-red:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; box-shadow: var(--lift); } .btn-white { background: #fff; color: var(--ink); border-color: #fff; } .btn-white:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--lift-red); } .btn-glass { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } .btn-glass:hover { background: #fff; color: var(--ink); border-color: #fff; } /* on a light background, glass needs ink text to stay legible */ .sec--paper .btn-glass, .sec--paper2 .btn-glass { color: var(--ink); border-color: var(--ink); } .sec--paper .btn-glass:hover, .sec--paper2 .btn-glass:hover { background: var(--ink); color: #fff; } /* disabled */ .btn:disabled, .btn[aria-disabled="true"], .form-submit-v2:disabled, .fw-next:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; pointer-events: none; } /* loading */ .btn.is-loading, .form-submit-v2.is-loading { color: transparent!important; pointer-events: none; position: relative; } .btn.is-loading::after, .form-submit-v2.is-loading::after { content: ''; position: absolute; width: 18px; height: 18px; top: calc(50% - 9px); left: calc(50% - 9px); border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: btn-spin .6s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } @media (max-width: 479px) { .btn, .btn--primary, .btn--secondary, .sf-cta-primary, .sf-cta-secondary { width: 100%; } } /* ---------- 6. NAV — red brand bar, white logo, one primary CTA ---------- */ #nav { position: sticky; top: 0; z-index: var(--z-nav); display: flex; align-items: center; gap: var(--sp-5); background: var(--red); min-height: var(--nav-h); padding: 0 var(--sp-side); border-bottom: 2px solid var(--ink); } .nav-logo { display: inline-flex; align-items: center; } .nav-logo img { height: 40px; width: auto; } .nav-links { display: flex; align-items: center; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; margin-left: auto; } .nav-links > li { position: relative; } .nav-links > li > a { color: #fff; font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; } .nav-links > li > a:hover { color: var(--ink); } .dd-arrow { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; display: inline-block; } /* dropdown */ .dd { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--paper); border: var(--border); box-shadow: var(--lift-lg); list-style: none; margin: 6px 0 0; padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); z-index: var(--z-overlay); } .has-dd:hover .dd, .has-dd:focus-within .dd { opacity: 1; visibility: visible; transform: none; } .dd a { display: block; color: var(--ink); font-family: var(--ff-body); font-weight: var(--fw-medium); font-size: var(--fs-small); text-transform: none; letter-spacing: 0; padding: 8px 16px; } .dd a:hover { background: var(--paper-2); color: var(--red); } /* nav español link + instant-quote outline (target inline-styled quote link too via nav position) */ .nav-es { color: #fff; } .nav-links > li > a.nav-pill { color: #fff; } /* primary handled by button system */ /* instant-quote outline pill (currently inline-styled) → white outline on red bar */ .nav-quote, .nav-links a[href="/instant-quote/"] { color: #fff!important; border: 1.5px solid rgba(255,255,255,.55); border-radius: var(--r); padding: 7px 14px; font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .nav-links a[href="/instant-quote/"]:hover { background: #fff; color: var(--red)!important; } /* FREE INSPECTION primary (.nav-pill) rendered as solid ink so the CTA pops on the red bar */ .nav-pill { background: var(--ink); color: #fff; border-color: var(--ink); padding: 8px 16px; min-height: 0; } .nav-pill:hover { background: #fff; color: var(--red); border-color: #fff; box-shadow: none; } /* hamburger */ .ham,.hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; margin-left: auto; } .ham span,.hamburger span { display: block; width: 24px; height: 2px; background: #fff; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .ham.is-open span:nth-child(1),.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ham.is-open span:nth-child(2),.hamburger.is-open span:nth-child(2) { opacity: 0; } .ham.is-open span:nth-child(3),.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 980px) { .nav-links { display: none; } .ham,.hamburger { display: flex; } #nav { min-height: var(--nav-h-mob); } } /* mobile nav panel */ .mob-nav { position: fixed; inset: var(--nav-h-mob) 0 0 0; background: var(--paper); z-index: var(--z-overlay); transform: translateX(100%); transition: transform var(--dur-slow) var(--ease); overflow-y: auto; padding: var(--sp-4) var(--sp-side) var(--sp-9); } .mob-nav.open { transform: none; } .mob-section { border-bottom: var(--border-hair); } .mob-section-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: 0; padding: 16px 0; font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-h4); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink); cursor: pointer; } .mob-arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--ink); transition: transform var(--dur) var(--ease); } .mob-section.open .mob-arrow { transform: rotate(180deg); } .mob-section-links { list-style: none; margin: 0; padding: 0 0 12px; display: none; } .mob-section.open .mob-section-links { display: block; } .mob-link,.mob-section-links a { display: block; padding: 10px 0 10px 12px; color: var(--ink-2); font-size: var(--fs-body); } .mob-link:hover { color: var(--red); } /* CTA links inside the mobile nav panel (full-width, stacked) */ .mob-nav .mob-cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 50px; margin-top: var(--sp-3); background: var(--red); color: #fff; font-family: var(--ff-display); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--fs-small); border-radius: var(--r); text-decoration: none; } .mob-nav .mob-cta:hover { background: var(--red-deep); color: #fff; } /* sticky mobile call/quote bar (fixed, bottom) — dedicated class */ .mobile-call,.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: none; gap: 2px; } @media (max-width: 980px) { .mobile-call,.sticky-cta { display: flex; } } .mobile-call a,.sticky-cta a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); text-decoration: none; padding-bottom: env(safe-area-inset-bottom); } .mobile-call a:first-child,.sticky-cta a:first-child { background: var(--ink); color: #fff; } .mobile-call a:last-child,.sticky-cta a:last-child { background: var(--red); color: #fff; } /* ---------- FORM WIZARD (shared multi-step lead component; style only) ---------- */ .fw-step:not([data-fw-active]) { display: none; } .fw-options { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); margin: var(--sp-4) 0; } .fw-options-six { grid-template-columns: repeat(3,1fr); } @media (max-width: 640px) { .fw-options,.fw-options-six { grid-template-columns: 1fr; } } .fw-option,.fw-option-mini { position: relative; display: flex; align-items: flex-start; gap: var(--sp-3); border: var(--border); border-radius: var(--r); padding: var(--sp-4); cursor: pointer; background: var(--paper); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .fw-option:hover,.fw-option-mini:hover { box-shadow: var(--lift); } .fw-option input,.fw-option-mini input,.fw-option-icon-mini input { position: absolute; opacity: 0; width: 0; height: 0; } .fw-option:has(input:checked),.fw-option-mini:has(input:checked),.fw-option-icon-mini:has(input:checked) { border-color: var(--red); border-width: 2px; box-shadow: var(--lift-red); } .fw-option:focus-within,.fw-option-mini:focus-within { box-shadow: var(--ring); } .fw-option-icon,.fw-mini-svg { flex: none; width: 24px; height: 24px; color: var(--ink); } .fw-option-icon svg,.fw-mini-svg svg { width: 100%; height: 100%; stroke: currentColor; } .fw-option-label,.fw-mini-label { font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-body); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink); } .fw-option-sub { font-size: var(--fs-small); color: var(--ink-3); margin-top: 2px; } .fw-option-icon-mini { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; border: var(--border); border-radius: var(--r); padding: var(--sp-3); cursor: pointer; text-align: center; } .fw-mini-label { font-size: var(--fs-small); } .form-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; } .fw-nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-5); } .fw-step-count,.fw-progress { font-family: var(--ff-display); font-weight: var(--fw-semi); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-3); } .form-optional { color: var(--ink-3); font-size: var(--fs-small); font-weight: var(--fw-medium); } .form-call-alt-v2 { text-align: center; margin-top: var(--sp-4); color: var(--ink-3); font-size: var(--fs-small); } .form-call-alt-v2 a { font-weight: var(--fw-strong); } /* ---------- 6b. /es/ NAV — red brand bar (mandate #7; parallel content kept) ---------- */ nav.nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--red); border-bottom: 2px solid var(--ink); min-height: var(--nav-h); } nav.nav .nav-inner { display: flex; align-items: center; gap: var(--sp-5); max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--sp-side); min-height: var(--nav-h); } nav.nav .nav-logo { color: #fff; font-family: var(--ff-display); font-weight: var(--fw-display); font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: var(--tracking-caps); } nav.nav .nav-logo span { color: var(--ink); } nav.nav .nav-links { display: flex; align-items: center; gap: var(--sp-5); margin-left: auto; } nav.nav .nav-links > a { color: #fff; font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); } nav.nav .nav-links > a:hover { color: var(--ink); } nav.nav .nav-lang { border: 1.5px solid rgba(255,255,255,.55); border-radius: var(--r); padding: 6px 12px; } nav.nav .nav-lang:hover { background: #fff; color: var(--red); } nav.nav .nav-cta { background: var(--ink); color: #fff; border-radius: var(--r); padding: 9px 16px; } nav.nav .nav-cta:hover { background: #fff; color: var(--red); } nav.nav .es-ham span { background: #fff; } @media (max-width: 980px) { nav.nav .nav-links { display: none; } } /* ---------- 7. FOOTER — canonical (kills navy gradient + red-gradient rule) ---------- */ .site-footer,#footer.site-footer { background: var(--ink); color: var(--on-dark-2); padding: var(--sp-8) 0 var(--sp-6); font-size: var(--fs-small); line-height: var(--lh-body); } .sf-inner { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 var(--sp-side); } .sf-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-7); margin-bottom: var(--sp-7); } @media (max-width: 880px) { .sf-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } } @media (max-width: 479px) { .sf-grid { grid-template-columns: 1fr; gap: var(--sp-5); } } .sf-col h3 { font-family: var(--ff-display); font-size: var(--fs-eyebrow); font-weight: var(--fw-display); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: #fff; margin: 0 0 var(--sp-4); padding-top: 10px; position: relative; } .sf-col h3::before { content: ''; position: absolute; top: 0; left: 0; width: 28px; height: 2px; background: var(--red); border-radius: 0; } .sf-col ul { list-style: none; margin: 0; padding: 0; } .sf-col li { margin-bottom: var(--sp-2); } .sf-col a { color: var(--on-dark-2); text-decoration: none; transition: color var(--dur) var(--ease); } .sf-col a:hover { color: #fff; } .sf-link-all { color: var(--red); font-weight: var(--fw-strong); } .sf-link-all:hover { color: #fff; } .sf-area-total { display: block; color: var(--on-dark-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; margin: -8px 0 var(--sp-3); } .sf-area-cities a { color: var(--on-dark-2); } .sf-area-cities a:hover { color: #fff; } .sf-logo img { width: 160px; height: auto; filter: brightness(0) invert(1); } .sf-tagline { color: var(--on-dark-3); margin: 0 0 var(--sp-4); } .sf-phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-body-lg); text-decoration: none; } .sf-phone:hover { color: var(--red); } .sf-addr { color: var(--on-dark-2); font-style: normal; margin: var(--sp-3) 0 0; } .sf-bottom { border-top: 1px solid var(--hairline-d); margin-top: var(--sp-6); padding-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); } .sf-copy,.sf-legal { color: var(--on-dark-3); font-size: var(--fs-xs); } .sf-legal { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .sf-legal a { color: var(--on-dark-3); } .sf-legal a:hover { color: #fff; } .sf-trust { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .sf-stars { color: var(--red); letter-spacing: 1px; } .sf-trust-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hairline-d); color: #fff; padding: 5px 10px; border-radius: var(--r); font-size: var(--fs-xs); font-weight: var(--fw-strong); } /* pre-footer CTA band (.sf-hero-strip) — fixes the ~280px mobile dead-space bug */ .sf-hero-strip { background: var(--red); color: #fff; padding: var(--sp-8) var(--sp-side); text-align: center; } .sf-hero-text { max-width: var(--maxw-text); margin: 0 auto; } .sf-hero-h { color: #fff; font-size: var(--fs-h2); margin: 0 0 var(--sp-3); } .sf-hero-sub { color: rgba(255,255,255,.85); margin: 0 0 var(--sp-5); } .sf-hero-acts { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; } @media (max-width: 479px) { .sf-hero-acts { flex-direction: column; } .sf-hero-text { display: block; } } /* ---------- 8. CARDS / internal-links grid ---------- */ .il-grid,.il-inline { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: var(--sp-gap); } .il-card { display: flex; flex-direction: column; background: var(--paper); border: var(--border); border-radius: var(--r); padding: var(--sp-card); box-shadow: none; transition: box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease); color: var(--ink); } .il-card:hover { box-shadow: var(--lift-red); transform: translate(-1px,-1px); } .il-card:focus-visible { box-shadow: var(--ring); } .il-icon { width: 40px; height: 40px; color: var(--ink); margin-bottom: var(--sp-3); } .il-icon svg { width: 100%; height: 100%; stroke: currentColor; } .il-label { font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-h4); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin: 0 0 var(--sp-2); color: var(--ink); } .il-desc { color: var(--ink-2); font-size: var(--fs-small); margin: 0 0 var(--sp-3); flex: 1; } .il-arrow { margin-top: auto; font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--red); display: inline-flex; align-items: center; gap: 6px; } .il-card:hover .il-arrow { gap: 10px; } /* featured card marker */ .il-card--featured,.card--featured { border-color: var(--red); border-width: 2px; } /* ---------- 9. CHIPS ---------- */ .city-chip,.pt-pill { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1.5px solid var(--ink); color: var(--ink); border-radius: var(--r); padding: 7px 13px; font-family: var(--ff-display); font-weight: var(--fw-semi); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .city-chip:hover,.pt-pill:hover { background: var(--ink); color: #fff; } /* trust chip (dark fill, on light) */ .chip--dark,.trust-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: #fff; border-radius: var(--r); padding: 7px 12px; font-family: var(--ff-display); font-weight: var(--fw-semi); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); } /* breadcrumb */ .breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-small); color: var(--ink-3); margin: 0 0 var(--sp-4); } .breadcrumb a { color: var(--ink-3); font-weight: var(--fw-medium); } .breadcrumb a:hover { color: var(--red); } .breadcrumb-sep { color: var(--ink-3); opacity: .6; } .sec--dark .breadcrumb,.sec--dark .breadcrumb a { color: var(--on-dark-2); } /* dark-section text fix — where a section is dark (.sec--black / .sec--dark), any descendant text authored for a light bg (explicit dark color) must go light. Descendant specificity (0,2,0) beats the page's inline (0,1,0) child rules. */ .sec--black, .sec--dark, .sec--black *, .sec--dark * { color: var(--on-dark); } .sec--black .eyebrow, .sec--dark .eyebrow { color: #fff !important; } .sec--black a:not(.btn):not([class*="btn"]), .sec--dark a:not(.btn):not([class*="btn"]) { color: #fff; } .sec--black .svc-eeat__role, .sec--dark .svc-eeat__role, .sec--black [class*="__role"], .sec--black [class*="__sub"] { color: var(--on-dark-2); } /* red accents on dark stay red (numbers, stars) */ .sec--black .stat__num, .sec--dark .stat__num, .sec--black .sf-stars, .sec--black [class*="--red"] { color: var(--red); } /* property-manager / trust scan strip (mandate #6) */ .spec-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) 0; border-top: var(--border-hair); border-bottom: var(--border-hair); font-size: var(--fs-small); color: var(--ink-2); } .spec-strip > span { display: inline-flex; align-items: center; gap: 6px; } .spec-strip b { font-weight: var(--fw-strong); color: var(--ink); } .sec--dark .spec-strip { border-color: var(--hairline-d); color: var(--on-dark-2); } .sec--dark .spec-strip b { color: #fff; } /* ---------- 10. FAQ — one column, hairline rows, +/- disclosure ---------- */ .faq-item { border-bottom: var(--border-hair); } .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); background: transparent; border: 0; text-align: left; cursor: pointer; padding: var(--sp-5) 0; font-family: var(--ff-display); font-weight: var(--fw-heavy); font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--ink); } .faq-q:hover { color: var(--red); } .faq-arrow { position: relative; width: 18px; height: 18px; flex: none; } .faq-arrow::before,.faq-arrow::after { content: ''; position: absolute; background: var(--red); transition: transform var(--dur) var(--ease); } .faq-arrow::before { top: 8px; left: 0; width: 18px; height: 2px; } .faq-arrow::after { left: 8px; top: 0; width: 2px; height: 18px; } .faq-item.open .faq-arrow::after { transform: scaleY(0); } .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); } .faq-item.open .faq-a { max-height: 800px; } .faq-a-inner { padding: 0 0 var(--sp-5); color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--maxw-text); } /* no-JS: show answers (details/summary fallback handled in markup where present) */ html:not(.js) .faq-a { max-height: none; } /* ---------- 11. FORMS (style only — business logic untouched) ---------- */ .form-field { margin-bottom: var(--sp-4); } .form-field label { display: block; font-family: var(--ff-display); font-weight: var(--fw-semi); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink); margin-bottom: var(--sp-2); } .form-field input,.form-field textarea,.form-field select { width: 100%; font-family: var(--ff-body); font-size: var(--fs-body); color: var(--ink); background: var(--paper); border: var(--border); border-radius: var(--r); padding: 13px 14px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .form-field input::placeholder,.form-field textarea::placeholder { color: var(--ink-3); } .form-field input:focus,.form-field textarea:focus,.form-field select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(213,22,12,.15); } .form-field.is-error input,.form-field.is-error textarea,.form-field input[aria-invalid="true"] { border-color: var(--red); } .form-field .field-error { color: var(--red-ink); font-size: var(--fs-small); font-weight: var(--fw-strong); margin-top: 6px; } .form-field input:disabled,.form-field textarea:disabled { opacity: .55; cursor: not-allowed; background: var(--paper-2); } .form-eyebrow { font-family: var(--ff-display); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--red); font-size: var(--fs-eyebrow); } .form-headline { font-family: var(--ff-display); font-weight: var(--fw-display); font-size: var(--fs-h2); margin: var(--sp-2) 0 var(--sp-3); } .form-lede { color: var(--ink-2); margin: 0 0 var(--sp-5); } /* ---------- 12. CONTENT TABLES (warranty / comparison) ---------- */ .sec table,table.cmp { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--fs-small); } .sec th,table.cmp th { font-family: var(--ff-display); font-weight: var(--fw-heavy); text-transform: uppercase; letter-spacing: var(--tracking-caps); text-align: left; padding: 12px 14px; border-bottom: 2px solid var(--ink); color: var(--ink); } .sec td,table.cmp td { padding: 12px 14px; border-bottom: var(--border-hair); color: var(--ink-2); vertical-align: top; } .sec tr:last-child td { border-bottom: 0; } /* yes/no marks — NO green/red glyphs (kill-list). Ink check / hairline dash. */ .cmp-yes { color: var(--ink); font-weight: var(--fw-strong); } .cmp-no { color: var(--ink-3); } /* mobile: horizontal scroll wrapper, never clip */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---------- 13. CTA BANNER — solid red, no gradient/vignette ---------- */ .cta-banner,.topical-final.sec { background: var(--red); color: #fff; padding: var(--sp-8) var(--sp-side); text-align: center; position: relative; overflow: hidden; } .cta-banner .h-lg,.cta-banner h2,.topical-final h2 { color: #fff; } .cta-banner .b-lg,.cta-banner p,.topical-final p { color: rgba(255,255,255,.85); max-width: var(--maxw-text); margin-left: auto; margin-right: auto; } .cta-banner .cta-acts,.cta-acts { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-5); } .cta-banner .btn--primary,.cta-banner .btn-white { background: #fff; color: var(--red); border-color: #fff; } .cta-banner .btn--primary:hover,.cta-banner .btn-white:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .cta-banner .btn-glass,.cta-banner .btn--secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } .cta-banner .btn-glass:hover,.cta-banner .btn--secondary:hover { background: #fff; color: var(--red); border-color: #fff; } @media (max-width: 479px) { .cta-banner .cta-acts { flex-direction: column; } } /* photo-backed CTA variant (softer moments) */ .cta-photo { position: relative; padding: var(--sp-9) var(--sp-side); text-align: center; color: #fff; background-size: cover; background-position: center; } .cta-photo::before { content: ''; position: absolute; inset: 0; background: rgba(15,15,15,.62); } .cta-photo > * { position: relative; } /* ---------- 14. HAZARD DIVIDER (the ONE decorative element) ---------- */ .sec-divider { height: 14px; background: repeating-linear-gradient(-45deg, var(--ink) 0 18px, var(--red) 18px 36px); } /* ---------- 15. STATS ---------- */ .stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: var(--border); } @media (max-width: 640px) { .stats { grid-template-columns: repeat(2,1fr); } } .stat,.stat-block { padding: var(--sp-5) var(--sp-4); border-right: var(--border-hair); } .stat:last-child { border-right: 0; } .stat__num,.stat-num,.stat-block-num { font-family: var(--ff-display); font-weight: var(--fw-display); font-size: clamp(36px,5vw,56px); line-height: 1; color: var(--ink); } .stat__lbl,.stat-lbl { font-family: var(--ff-display); font-weight: var(--fw-semi); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-3); margin-top: var(--sp-2); } /* ---------- 16. BACK-TO-TOP / SCROLL PROGRESS ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: 0 50%; z-index: var(--z-toast); } .back-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; background: var(--ink); color: #fff; border: 0; border-radius: var(--r); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur); z-index: var(--z-sticky); cursor: pointer; } .back-top.vis { opacity: 1; visibility: visible; } .back-top svg { width: 20px; height: 20px; stroke: #fff; } @media (max-width: 980px) { .back-top { bottom: 68px; } } /* ---------- 17. A+ CONTRAST FIXES (lever 1) ---------- */ /* Dark hero (es + any dark .hero): bare

base text was inheriting --ink on a dark hero → invisible. White base; the more-specific .hero h1 .accent keeps its own color. */ .hero h1 { color: #fff; } /* /services/ dark "credentials" band: the four cert-tier labels were --ink on #1a1a1c cards. */ .svci-cred__tier { color: #fff; } /* Blog comparison tables: .sec th sets --ink, which lost the dark inline header row → th invisible. */ .sec tr[style*="background:var(--ink)"] th, .sec tr[style*="background:#000"] th { color: #fff; } /* Blog dark CTA band (.cta): bare/inline links + the outline secondary were black-on-black. */ .cta a { color: #fff; } .cta .cta-btn.secondary { color: #fff !important; -webkit-text-fill-color: #fff !important; border-color: rgba(255,255,255,.6) !important; } .cta .cta-btn.secondary:hover { background: #fff !important; color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; } /* Home service-area map: branded charcoal fallback so a failed tile load is never a gray void. */ .area-map-wrap { background: var(--ink); }