/* ========================================================================== ConvenientConnections — Design System Navy and gold carry the brand. Red is functional only: calls to action, the 24/7 emergency bar, and biohazard pages. It is not tied to any former partner mark. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts (self-hosted, latin subset — no third-party requests) -------------------------------------------------------------------------- */ @font-face { font-family: "Sora"; src: url("../fonts/sora-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------------------- 2. Tokens -------------------------------------------------------------------------- */ :root { /* ---- Brand ------------------------------------------------------------ Navy carries the structure, gold is the highlight, red is reserved for calls to action and for biohazard work. Gold never sets body text on a light background (2.25:1) — there it is a graphic element only. */ --navy-900: #0C1A2E; /* deepest: hero, footer */ --navy-800: #122741; /* dark sections */ --navy-700: #1B3557; /* cards sitting on a dark section */ --navy-600: #2A4A73; /* borders on dark */ --navy: #143054; /* navy text on light — 13.3:1 on white */ --navy-wash: #EBF1F8; /* tinted background */ --gold: #E0A21A; /* graphic accent on light backgrounds */ --gold-bright: #FFC42E;/* text/accent on navy — 11:1 */ --gold-wash: #FFF7E4; --red: #E51836; /* CTA + biohazard only */ --red-dark: #B8112A; --red-bright: #FF4D63; --red-wash: #FDEEF0; /* Ink is retained for the logo lockup and deep text */ --ink: #101215; --ink-soft: #1B1F24; --ink-line: #2A3038; /* ---- Themed accent ---------------------------------------------------- Default pages use navy + gold. Biohazard pages set .theme-biohazard on , which swaps the accent to red without touching any other rule. */ --accent: var(--navy); --accent-strong: var(--navy-800); --accent-wash: var(--navy-wash); --accent-on-dark: var(--gold-bright); --highlight: var(--gold); /* decorative bars and rules only */ /* Neutrals */ --paper: #FFFFFF; --paper-alt: #F6F7F9; --paper-alt2: #EBEEF2; --text: #24282D; --text-muted: #545C67; --text-faint: #6A727C; /* 4.87:1 on white — AA for body text */ --line: #DDE2E8; --line-strong: #C2C9D2; /* Typography */ --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem); --step-2: clamp(1.38rem, 1.24rem + 0.66vw, 1.75rem); --step-3: clamp(1.66rem, 1.42rem + 1.1vw, 2.3rem); --step-4: clamp(2rem, 1.6rem + 1.9vw, 3.1rem); --step-5: clamp(2.3rem, 1.75rem + 2.6vw, 3.65rem); /* Space */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --section-y: clamp(3.5rem, 2.2rem + 5vw, 6.5rem); /* Shape */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --shadow-sm: 0 1px 2px rgba(16, 18, 21, 0.06), 0 2px 8px rgba(16, 18, 21, 0.04); --shadow-md: 0 4px 12px rgba(16, 18, 21, 0.08), 0 12px 32px rgba(16, 18, 21, 0.07); --shadow-lg: 0 12px 28px rgba(16, 18, 21, 0.12), 0 32px 64px rgba(16, 18, 21, 0.1); --wrap: 1200px; --wrap-narrow: 760px; --wrap-header: 1400px; --header-h: 76px; } /* -------------------------------------------------------------------------- 3. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; } h1 { font-size: var(--step-5); letter-spacing: -0.035em; } h2 { font-size: var(--step-4); letter-spacing: -0.03em; } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } h5, h6 { font-size: var(--step-0); } p { margin: 0 0 var(--sp-4); } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; } img, svg, video { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; } li { margin-bottom: var(--sp-2); } li:last-child { margin-bottom: 0; } strong, b { font-weight: 700; color: var(--ink); } hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; } ::selection { background: var(--navy); color: #fff; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--navy-900); color: #fff; padding: var(--sp-3) var(--sp-5); font-weight: 600; border-radius: 0 0 var(--r-md) 0; } .skip-link:focus { left: 0; 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; } /* -------------------------------------------------------------------------- 4. Layout primitives -------------------------------------------------------------------------- */ .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } @media (max-width: 640px) { .wrap { width: min(100% - 2rem, var(--wrap)); } } .wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem); } .section--alt { background: var(--paper-alt); } .section--ink { background: var(--navy-900); color: #D7DBE0; } .section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4, .section--ink h5, .section--ink h6 { color: #fff; } /* Buttons and tiles carry their own colors — only body links get recolored, otherwise a primary button ends up red text on a red fill. */ .section--ink a:not(.btn):not(.tile) { color: var(--accent-on-dark); } .grid { display: grid; gap: var(--sp-5); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } /* Wider minimum so a set of four cards lands as 2x2 rather than 3 + orphan. */ .grid-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } /* The five trust points. A 230px minimum fits only four across at desktop width and strands the fifth alone on a second row; five need ~221px each. Kept separate from .grid-4 because that is shared with the steps component, which has four items and should keep its wider minimum. */ .grid-trust { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .stack > * + * { margin-top: var(--sp-4); } /* Section headers */ .section-head { max-width: 62ch; margin-bottom: var(--sp-7); } .section-head--center { margin-inline: auto; text-align: center; } .section-head p { font-size: var(--step-1); color: var(--text-muted); margin-bottom: 0; } .section--ink .section-head p, .section--ink .lede { color: #A9B6C6; } /* Block rather than inline-flex so long eyebrow text wraps on narrow phones instead of forcing the page to scroll sideways. */ .eyebrow { display: block; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-3); max-width: 100%; } .eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--highlight); vertical-align: middle; margin-right: var(--sp-2); margin-bottom: 2px; } .section--ink .eyebrow { color: var(--accent-on-dark); } .section-head--center .eyebrow::before { display: none; } .lede { font-size: var(--step-1); color: var(--text-muted); line-height: 1.6; } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.85rem 1.6rem; border: 2px solid transparent; border-radius: var(--r-md); font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--red); border-color: var(--red); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; box-shadow: var(--shadow-md); } .btn--ink { background: var(--navy-900); border-color: var(--ink); color: #fff; } .btn--ink:hover { background: var(--navy-700); border-color: var(--ink-soft); color: #fff; } .btn--outline { background: transparent; border-color: var(--line-strong); color: var(--ink); } .btn--outline:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-alt); } .btn--on-dark { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: #fff; } .btn--on-dark:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; } .btn--lg { padding: 1.05rem 2rem; font-size: 1.02rem; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } /* -------------------------------------------------------------------------- 6. Emergency bar -------------------------------------------------------------------------- */ .emergency-bar { background: var(--red); color: #fff; font-size: 0.875rem; position: relative; z-index: 60; } .emergency-bar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2) var(--sp-4); padding: 0.55rem 0; text-align: center; } .emergency-bar strong { color: #fff; font-family: var(--font-display); letter-spacing: 0.02em; } .emergency-bar a { color: #fff; font-weight: 700; text-underline-offset: 3px; white-space: nowrap; } .emergency-bar a:hover { color: #fff; } .emergency-bar__pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } } /* -------------------------------------------------------------------------- 7. Header & navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--line); } /* The header needs more room than the content column: brand + nav + phone + button together are wider than 1200px. */ .site-header .wrap { width: min(100% - 2.5rem, var(--wrap-header)); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink); flex: none; padding: var(--sp-2) 0; } .brand img { width: 70px; height: 44px; flex: none; } .brand__text { display: flex; flex-direction: column; line-height: 1.1; } .brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.03em; color: var(--ink); } .brand__tag { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; /* Widest part of the lockup — shown only where there is room for it. See the brand-sizing block near the breakpoints below. */ display: none; } /* Desktop nav */ .nav { display: none; } .nav__list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; } .nav__item { position: relative; margin: 0; } .nav__link { position: relative; display: inline-flex; align-items: center; gap: 0.28rem; padding: 0.6rem 0.5rem; border-radius: var(--r-sm); font-family: var(--font-display); font-size: 0.855rem; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; } .nav__link:hover { background: var(--paper-alt2); color: var(--ink); } .nav__link[aria-current="page"] { color: var(--accent); } .nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.2rem; height: 2px; background: var(--highlight); border-radius: 2px; } .nav__caret { width: 9px; height: 9px; transition: transform 0.2s ease; flex: none; } .nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); } .nav__panel { position: absolute; top: calc(100% + 6px); left: 0; min-width: 300px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--sp-3); list-style: none; margin: 0; display: none; } .nav__panel--wide { min-width: 620px; display: none; grid-template-columns: 1fr 1fr; gap: 2px; left: auto; right: 0; } .nav__item--open .nav__panel { display: block; } .nav__item--open .nav__panel--wide { display: grid; } .nav__panel li { margin: 0; } .nav__sublink { display: block; padding: 0.6rem 0.75rem; border-radius: var(--r-md); text-decoration: none; color: var(--ink); transition: background-color 0.15s ease; } .nav__sublink:hover { background: var(--paper-alt); color: var(--ink); } .nav__sublink[aria-current="page"] { background: var(--accent-wash); } .nav__sublink strong { display: block; font-family: var(--font-display); font-size: 0.87rem; font-weight: 600; line-height: 1.3; } .nav__sublink span { display: block; font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; } .header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; } .header-phone { display: none; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; color: var(--ink); text-decoration: none; white-space: nowrap; } .header-phone:hover { color: var(--accent); } .header-phone svg { width: 17px; height: 17px; flex: none; color: var(--accent-strong); } /* Mobile toggle */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 44px; padding: 0 11px; background: none; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; } .nav-toggle span { display: block; height: 2px; background: var(--navy-900); border-radius: 2px; transition: transform 0.22s ease, opacity 0.18s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer */ .mobile-nav { display: none; position: fixed; inset: 0; top: 0; z-index: 80; background: var(--paper); overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--sp-8); } .mobile-nav[data-open="true"] { display: block; } .mobile-nav__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--header-h); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 2; } .mobile-nav__list { list-style: none; margin: 0; padding: var(--sp-4) 0 0; } .mobile-nav__list li { margin: 0; } .mobile-nav__link { display: block; padding: 0.95rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink); text-decoration: none; } .mobile-nav__link[aria-current="page"] { color: var(--accent); } .mobile-nav__group > button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.95rem 0; border: 0; border-bottom: 1px solid var(--line); background: none; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink); cursor: pointer; text-align: left; } .mobile-nav__group > button svg { width: 13px; height: 13px; transition: transform 0.2s ease; } .mobile-nav__group > button[aria-expanded="true"] svg { transform: rotate(180deg); } .mobile-nav__sub { list-style: none; margin: 0; padding: 0 0 var(--sp-3) var(--sp-4); display: none; } .mobile-nav__group[data-open="true"] .mobile-nav__sub { display: block; } .mobile-nav__sub a { display: block; padding: 0.6rem 0; font-size: 0.95rem; color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--paper-alt2); } .mobile-nav__sub a:hover { color: var(--accent); } .mobile-nav__cta { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); } body[data-nav-open="true"] { overflow: hidden; } /* Breakpoints, smallest first so the cascade resolves in the right order. The desktop row only appears once brand + nav + phone + button genuinely fit; below that the drawer carries everything. */ @media (min-width: 620px) { .header-phone { display: inline-flex; } } /* Between mobile and full desktop the estimate button lives in the drawer, so the phone number stays the visible call to action. */ @media (max-width: 1239.98px) { .header-actions > .btn { display: none; } } @media (min-width: 1240px) { .nav { display: block; } .nav-toggle { display: none; } .header-phone { display: inline-flex; } .site-header .btn { padding-inline: 1.15rem; } } /* --- Brand lockup sizing ------------------------------------------------- The strapline appears only at widths where the header has room for it: not on small phones, and not between 1240px and 1400px where the full nav row, phone number and estimate button are all competing. */ @media (max-width: 460px) { .brand img { width: 48px; height: 30px; } .brand__name { font-size: 0.82rem; letter-spacing: -0.045em; } .brand { gap: 0.4rem; } .site-header__inner { gap: var(--sp-3); } } @media (min-width: 480px) and (max-width: 1239.98px) { .brand__tag { display: block; } } @media (min-width: 1400px) { .brand__tag { display: block; } } /* -------------------------------------------------------------------------- 8. Hero -------------------------------------------------------------------------- */ .hero { position: relative; background: var(--navy-900); color: #E4E8EC; overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 26, 46, 0.74) 0%, rgba(12, 26, 46, 0.88) 65%, rgba(12, 26, 46, 0.96) 100%), radial-gradient(1000px 520px at 12% 8%, rgba(42, 74, 115, 0.55), transparent 62%); } .hero__inner { padding-block: clamp(3.5rem, 2rem + 7vw, 7.5rem); max-width: 46rem; } .hero h1 { color: #fff; margin-bottom: var(--sp-5); } .hero__lede { font-size: var(--step-1); color: #C3CAD2; margin-bottom: var(--sp-6); max-width: 40rem; } .hero .eyebrow { color: var(--accent-on-dark); } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.875rem; color: #A9B2BC; } .hero__meta span { display: inline-flex; align-items: center; gap: var(--sp-2); } .hero__meta svg { width: 15px; height: 15px; color: var(--accent-on-dark); flex: none; } /* Gradient-only hero, used where no honest photograph exists for the subject */ .hero--plain::after { background: linear-gradient(160deg, var(--navy-900) 0%, #16304F 55%, var(--navy-800) 100%), radial-gradient(900px 480px at 88% 8%, rgba(255, 196, 46, 0.16), transparent 60%); } .hero--plain .hero__inner { padding-block: clamp(3rem, 2rem + 6vw, 6.5rem); } /* Compact page hero for interior pages */ .page-hero { position: relative; background: var(--navy-900); color: #D7DBE0; overflow: hidden; isolation: isolate; } .page-hero__media { position: absolute; inset: 0; z-index: -2; } .page-hero__media img { width: 100%; height: 100%; object-fit: cover; } /* A badge, not a photograph. Filling the hero crops the circle top and bottom; contain keeps it whole. The white keyline is what lets its black outer lettering read against the navy at all. */ .page-hero__media--mark img { object-fit: contain; object-position: center; padding: var(--sp-5); filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff); } .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 26, 46, 0.80) 0%, rgba(12, 26, 46, 0.90) 100%), radial-gradient(760px 380px at 8% 0%, rgba(42, 74, 115, 0.5), transparent 60%); } .page-hero__inner { padding-block: clamp(2.75rem, 1.9rem + 4vw, 5rem); max-width: 52rem; } .page-hero h1 { color: #fff; } /* The dark hero needs the light red, not the on-white red. */ .page-hero .eyebrow { color: var(--accent-on-dark); } .page-hero__lede { font-size: var(--step-1); color: #B9C1CA; max-width: 44rem; margin-bottom: 0; } .page-hero .btn-row { margin-top: var(--sp-6); } /* -------------------------------------------------------------------------- 9. Breadcrumbs -------------------------------------------------------------------------- */ .breadcrumbs { padding-block: var(--sp-4); border-bottom: 1px solid var(--line); background: var(--paper); } .breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; font-size: 0.82rem; color: var(--text-faint); } .breadcrumbs li { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; } .breadcrumbs li + li::before { content: "/"; color: var(--line-strong); } .breadcrumbs a { color: var(--text-muted); text-decoration: none; } .breadcrumbs a:hover { color: var(--accent); text-decoration: underline; } .breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; } /* -------------------------------------------------------------------------- 10. Cards -------------------------------------------------------------------------- */ .card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .card { position: relative; } .card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } .card__body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); } .card:has(h3 a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; } .card__body h3 a:focus-visible { outline: none; } .card__media { aspect-ratio: 16 / 10; background: var(--paper-alt2); overflow: hidden; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .card:hover .card__media img { transform: scale(1.04); } .card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; } .card__body h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); } .card__body h3 a { color: var(--ink); text-decoration: none; } .card__body h3 a:hover { color: var(--accent); } .card__body p { color: var(--text-muted); font-size: 0.94rem; } .card__link { margin-top: auto; padding-top: var(--sp-4); display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: var(--accent); text-decoration: none; } .card__link svg { width: 13px; height: 13px; transition: transform 0.2s ease; } .card:hover .card__link svg { transform: translateX(3px); } /* Large icon-led service card */ .feature-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: inherit; height: 100%; position: relative; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .feature-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--highlight); transform: scaleX(0); transform-origin: left; transition: transform 0.28s ease; } .feature-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; } .feature-card:hover::after { transform: scaleX(1); } .feature-card__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: var(--r-md); background: var(--accent-wash); color: var(--accent); flex: none; } .feature-card__body { display: block; } .feature-card__title { display: block; font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--sp-2); line-height: 1.2; } .feature-card__text { display: block; color: var(--text-muted); font-size: 0.97rem; line-height: 1.6; } .feature-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-size: 0.87rem; font-weight: 700; color: var(--accent); } .feature-card__link svg { transition: transform 0.2s ease; } .feature-card:hover .feature-card__link svg { transform: translateX(3px); } /* Compact service tile with icon */ .tile { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; height: 100%; } a.tile:hover { border-color: var(--accent-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); color: inherit; } .tile__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent-wash); color: var(--accent); flex: none; } .tile__icon svg { width: 21px; height: 21px; } .tile h3 { font-size: var(--step-0); margin-bottom: 0; letter-spacing: -0.01em; } .tile p { font-size: 0.9rem; color: var(--text-muted); margin: 0; } .section--ink .tile { background: var(--navy-700); border-color: var(--navy-600); } .section--ink .tile h3 { color: #fff; } .section--ink .tile p { color: #A9B2BC; } .section--ink a.tile:hover { border-color: var(--accent-on-dark); } .section--ink .tile__icon { background: rgba(255, 196, 46, 0.18); color: var(--accent-on-dark); } /* Numbered process steps */ .steps { counter-reset: step; } .step { position: relative; padding: var(--sp-5); padding-top: var(--sp-6); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); height: 100%; } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: var(--sp-4); left: var(--sp-5); font-family: var(--font-display); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; color: var(--accent-strong); } .step h3 { font-size: var(--step-1); margin-top: var(--sp-3); margin-bottom: var(--sp-2); } .step p { color: var(--text-muted); font-size: 0.94rem; margin: 0; } .section--alt .step { background: var(--paper); } /* On a dark section the card must go dark too. Without this the .section--ink heading rule paints the step title white on a white card — invisible. */ .section--ink .step { background: var(--navy-700); border-color: var(--navy-600); } .section--ink .step p { color: #A9B2BC; } .section--ink .step h3 { color: #fff; } /* Trust strip */ .trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-alt); } .trust-strip__grid { display: grid; /* 200px, not 230px: there are five trust points, and at desktop width the larger minimum only fits four, leaving the fifth stranded alone on a second row. Five need ~221px each here. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--sp-5); padding-block: var(--sp-6); } .trust-item { display: flex; gap: var(--sp-3); align-items: flex-start; } .trust-item svg { width: 20px; height: 20px; color: var(--accent-strong); flex: none; margin-top: 3px; } .trust-item strong { display: block; font-family: var(--font-display); font-size: 0.92rem; line-height: 1.3; margin-bottom: 2px; } .trust-item span { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; } /* -------------------------------------------------------------------------- 11. Split / media sections -------------------------------------------------------------------------- */ .split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } .split--reverse .split__media { order: 2; } } .split__media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); } .split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* Logos and badges, not photographs. The card treatment above draws a shadowed rectangle, which around artwork with a transparent background reads as a white box sitting behind the mark; the 4:3 cover crop also slices the top and bottom off a circular badge. */ .split__media--mark { border-radius: 0; overflow: visible; box-shadow: none; background: none; } .split__media--mark img { aspect-ratio: auto; object-fit: contain; width: 100%; height: auto; /* Fills its half of the split rather than sitting small in the middle of it. The column itself is the constraint, so this only caps it on very wide screens. */ max-width: 100%; margin-inline: auto; display: block; /* A white keyline traced around the artwork's alpha, so the badge's black outer lettering stays legible on a dark or mid-tone background instead of disappearing into it. Four offsets give an even outline; drop-shadow follows the transparency, which a border or outline would not. */ filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff); } .split__body h2 { margin-bottom: var(--sp-4); } /* Checklist */ .checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); } .checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; margin: 0; font-size: 0.97rem; } .checklist svg { width: 19px; height: 19px; color: var(--accent-strong); flex: none; margin-top: 4px; } .section--ink .checklist svg { color: var(--accent-on-dark); } /* Detail blocks (service page long-form) */ .detail-block { padding-block: var(--sp-6); border-top: 1px solid var(--line); } .detail-block:first-of-type { border-top: 0; padding-top: 0; } .detail-block h3 { font-size: var(--step-2); margin-bottom: var(--sp-3); } .detail-block p { color: var(--text-muted); } .detail-block p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 12. Accordion / FAQ -------------------------------------------------------------------------- */ .faq { display: grid; gap: var(--sp-3); } .faq details { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5); font-family: var(--font-display); font-size: var(--step-0); font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 11px; height: 11px; border-right: 2px solid var(--accent-strong); border-bottom: 2px solid var(--accent-strong); transform: rotate(45deg); transition: transform 0.2s ease; flex: none; margin-top: -4px; } .faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; } .faq summary:hover { background: var(--paper-alt); } .faq__answer { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-muted); } .faq__answer p:last-child { margin-bottom: 0; } /* Service scope accordion */ .scope-list summary { align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); } .scope__title { font-family: var(--font-display); font-weight: 700; } .scope__sub { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--text-muted); margin-right: auto; } .scope__body { padding: 0 var(--sp-5) var(--sp-5); } .scope__area h3 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-3); } .scope__area .checklist li { font-size: 0.92rem; align-items: flex-start; } .scope__area .checklist svg { width: 16px; height: 16px; margin-top: 3px; } /* Terms list */ .terms { margin: 0; display: grid; gap: var(--sp-5); } @media (min-width: 700px) { .terms { grid-template-columns: 1fr 1fr; } } .terms dt { font-family: var(--font-display); font-weight: 700; font-size: var(--step-0); color: var(--ink); margin-bottom: 0.35rem; } .terms dd { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; } /* -------------------------------------------------------------------------- 13. Forms -------------------------------------------------------------------------- */ .form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); box-shadow: var(--shadow-md); } .form-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; } @media (min-width: 620px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } } .field--full { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field label, .fieldset__legend { font-family: var(--font-display); font-size: 0.83rem; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; } .field .req { color: var(--red-dark); } .field .hint { font-size: 0.78rem; color: var(--text-faint); font-weight: 400; } input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], input[type="url"], select, textarea { width: 100%; padding: 0.72rem 0.85rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); color: var(--text); font-family: var(--font-body); font-size: 0.97rem; line-height: 1.5; transition: border-color 0.15s ease, box-shadow 0.15s ease; } textarea { min-height: 140px; resize: vertical; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23565E68' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 12px; padding-right: 2.4rem; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(20, 48, 84, 0.16); } input::placeholder, textarea::placeholder { color: var(--text-faint); } input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--red); background: var(--red-wash); } input[type="file"] { width: 100%; padding: 0.6rem 0.85rem; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--paper-alt); color: var(--text); font-family: var(--font-body); font-size: 0.92rem; cursor: pointer; } input[type="file"]:hover { border-color: var(--accent); } input[type="file"]::file-selector-button { margin-right: var(--sp-3); padding: 0.4rem 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; cursor: pointer; } input[type="file"]::file-selector-button:hover { border-color: var(--accent); } input[type="file"][aria-invalid="true"] { border-color: var(--red); background: var(--red-wash); } .fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; } .choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0.5rem; } .choice { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); cursor: pointer; font-size: 0.9rem; transition: border-color 0.15s ease, background-color 0.15s ease; } .choice:hover { border-color: var(--ink); } .choice input { accent-color: var(--accent-strong); width: 17px; height: 17px; flex: none; margin: 0; } .choice:has(input:checked) { border-color: var(--accent-strong); background: var(--accent-wash); } .choice:has(input:focus-visible) { outline: 3px solid var(--accent-strong); outline-offset: 2px; } .form-error { display: none; font-size: 0.82rem; color: var(--red-dark); font-weight: 600; } .field[data-invalid="true"] .form-error { display: block; } .form-note { font-size: 0.82rem; color: var(--text-faint); } .form-note a { color: var(--text-muted); } /* Honeypot — hidden from humans, visible to naive bots */ .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-status { display: none; padding: var(--sp-4); border-radius: var(--r-md); font-size: 0.92rem; margin-bottom: var(--sp-4); } .form-status[data-state="error"] { display: block; background: var(--red-wash); border: 1px solid var(--red); color: var(--red-dark); } .form-status[data-state="success"] { display: block; background: #EAF6EF; border: 1px solid #2E7D4F; color: #1D5C39; } /* -------------------------------------------------------------------------- 14. CTA band -------------------------------------------------------------------------- */ .cta-band { background: var(--navy-900); color: #D7DBE0; position: relative; overflow: hidden; isolation: isolate; } .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(760px 400px at 85% 20%, rgba(42, 74, 115, 0.55), transparent 62%); } .cta-band__inner { display: grid; gap: var(--sp-6); align-items: center; padding-block: clamp(2.75rem, 2rem + 3.5vw, 4.5rem); } @media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.35fr 1fr; } } .cta-band h2 { color: #fff; margin-bottom: var(--sp-3); } .cta-band p { color: #A9B2BC; margin-bottom: 0; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); } @media (min-width: 900px) { .cta-band__actions { justify-content: flex-end; } } .cta-phone { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; } .cta-phone span { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8D96A1; } .cta-phone strong { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); color: #fff; letter-spacing: -0.03em; } /* -------------------------------------------------------------------------- 15. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--navy-900); color: #98A1AC; font-size: 0.9rem; } .site-footer a { color: #C3CAD2; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .footer-main { display: grid; gap: var(--sp-7); padding-block: var(--sp-8) var(--sp-7); grid-template-columns: 1fr; } @media (min-width: 780px) { .footer-main { grid-template-columns: 1.4fr repeat(3, 1fr); } } .footer-brand__logo { display: inline-flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); /* The lockup is wider than a 320px viewport's content column, so let it wrap rather than push the page sideways. */ flex-wrap: wrap; max-width: 100%; } .footer-brand__logo img { width: 83px; height: 52px; flex: none; } @media (max-width: 460px) { .footer-brand__logo img { width: 66px; height: 41px; } .footer-brand__logo strong { font-size: 0.95rem; } } .footer-brand__logo strong { font-family: var(--font-display); font-size: 1.05rem; color: #fff; letter-spacing: -0.03em; line-height: 1.2; } .footer-brand p { color: #98A1AC; max-width: 34ch; margin-bottom: var(--sp-5); } .footer-col h2 { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #fff; margin-bottom: var(--sp-4); } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 0.6rem; } .footer-contact { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: 0.6rem; } .footer-contact li { display: flex; gap: var(--sp-3); align-items: flex-start; margin: 0; } .footer-contact svg { width: 16px; height: 16px; color: var(--accent-on-dark); flex: none; margin-top: 4px; } .socials { display: flex; gap: var(--sp-2); flex-wrap: wrap; } .socials a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-md); color: #C3CAD2; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .socials a:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } .socials svg { width: 18px; height: 18px; } .footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); padding-block: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; padding-block: var(--sp-5); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.82rem; } .footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; } .footer-bottom li { margin: 0; } /* -------------------------------------------------------------------------- 16. Article / prose -------------------------------------------------------------------------- */ .prose { max-width: 68ch; } .prose h2 { font-size: var(--step-3); margin-top: var(--sp-7); margin-bottom: var(--sp-4); } .prose h3 { font-size: var(--step-1); margin-top: var(--sp-6); margin-bottom: var(--sp-3); } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose p, .prose li { color: var(--text); line-height: 1.75; } .prose ul, .prose ol { margin-bottom: var(--sp-5); padding-left: 1.35rem; } .prose blockquote { margin: var(--sp-6) 0; padding: var(--sp-5); border-left: 3px solid var(--highlight); background: var(--paper-alt); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--step-1); color: var(--ink); } .prose blockquote p:last-child { margin-bottom: 0; } .article-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: 0.85rem; color: #A9B2BC; margin-top: var(--sp-5); } .article-meta span { display: inline-flex; align-items: center; gap: 0.4rem; } .callout { margin: var(--sp-6) 0; padding: var(--sp-5); border: 1px solid var(--line); border-left: 3px solid var(--highlight); border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--paper-alt); } .callout h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); margin-top: 0; } .callout p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 17. Misc utilities -------------------------------------------------------------------------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .m-0 { margin: 0; } .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); } /* Utility classes rather than inline style attributes: the Content-Security- Policy sets style-src 'self', which blocks inline styles outright. */ .align-start { align-items: start; } .justify-center { justify-content: center; } .footer-note { margin: 0; font-size: 0.82rem; max-width: 52ch; } .footer-subtle { color: #8A939D; } .logo-inline { max-width: 170px; } .plain-list { list-style: none; padding: 0; display: grid; gap: 0.5rem; max-width: 24rem; margin: var(--sp-6) auto; } .pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--accent-wash); color: var(--accent); font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .chips { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; } .chips li { margin: 0; padding: 0.35rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 0.85rem; color: var(--text-muted); } /* Town pills that link to their regional page. The pill is the hit area, so the anchor fills it rather than leaving a small target inside a bigger shape. */ /* Must out-specify `.chips li` (0,1,1) or the pill keeps its own padding and the anchor sits inside it, leaving dead edges on something that looks clickable. */ .chips li.chips__link { padding: 0; } .chips__link a { display: block; padding: 0.35rem 0.75rem; border-radius: inherit; color: inherit; text-decoration: none; } .chips__link:hover, .chips__link:focus-within { border-color: var(--line-strong); background: var(--paper-alt, var(--paper)); } .chips__link a:hover, .chips__link a:focus-visible { color: var(--text); } .area-card { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); height: 100%; } /* h4 as well as h3: on the Resources page these cards sit under a group heading, so the card title is a level deeper than it is on Service Areas. */ .area-card h3, .area-card h4 { font-size: var(--step-1); margin-bottom: var(--sp-2); } .area-card > p { color: var(--text-muted); font-size: 0.93rem; margin-bottom: var(--sp-4); } /* Region cards end with a link to that area's page. The city chips above it wrap to a different number of rows in every card, so left to itself the button lands at a different height in each one and the row looks broken. Pushing it down with margin-top:auto sits every button on the same line along the bottom of the row. Modifier rather than a change to .area-card, which is shared with the About and Resources pages. */ /* Policy blocks on Working With Us, and the per-page headings on the FAQ hub */ .policy + .policy { margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--line); } .policy h2 { font-size: var(--step-1); margin-bottom: var(--sp-3); } .faq-source { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); font-size: var(--step-0); margin: var(--sp-7) 0 var(--sp-3); } .faq-source a { font-size: 0.85rem; font-weight: 500; } /* "Full details" and "Checklist (PDF)" under an expanded scope */ .scope__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); } .area-card--cta { display: flex; flex-direction: column; } .area-card--cta .area-card__cta { margin-top: auto; margin-bottom: 0; padding-top: var(--sp-4); } .contact-panel { background: var(--navy-900); color: #C3CAD2; border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); height: 100%; } .contact-panel h2, .contact-panel h3 { color: #fff; } .contact-panel a { color: #fff; } .contact-panel dl { margin: 0; display: grid; gap: var(--sp-5); } .contact-panel dt { font-family: var(--font-display); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: 0.35rem; } .contact-panel dd { margin: 0; font-size: 1rem; line-height: 1.6; } .contact-panel__note { display: block; font-size: 0.82rem; color: #94A3B4; margin-top: 2px; } /* Stat row */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); } .stat strong { display: block; font-family: var(--font-display); font-size: var(--step-2); color: var(--navy); letter-spacing: -0.02em; line-height: 1.15; } .stat span { font-size: 0.88rem; color: var(--text-muted); } /* -------------------------------------------------------------------------- Reviews -------------------------------------------------------------------------- */ .rating-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-6); } .stars { display: inline-flex; gap: 2px; color: var(--gold); } .stars svg { width: 20px; height: 20px; } .rating-line__text { font-size: 0.95rem; color: var(--text-muted); } .rating-line__text strong { color: var(--ink); } .review { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); height: 100%; } .review__stars { color: var(--gold); display: inline-flex; gap: 2px; } .review__stars svg { width: 16px; height: 16px; } .review blockquote { margin: 0; padding: 0; border: 0; background: none; font-size: 1rem; line-height: 1.65; color: var(--text); font-family: var(--font-body); } .review figcaption { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--text-muted); } .review figcaption strong { display: block; font-family: var(--font-display); font-size: 0.92rem; color: var(--ink); } .google-link { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.7rem 1.15rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--paper); font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: var(--ink); text-decoration: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .google-link:hover { border-color: var(--navy); color: var(--ink); box-shadow: var(--shadow-sm); } .google-link svg { width: 18px; height: 18px; } /* -------------------------------------------------------------------------- Feature band — a single service given a little extra prominence -------------------------------------------------------------------------- */ .feature-band { position: relative; background: var(--navy-800); color: #C7D2E0; border-radius: var(--r-xl); padding: clamp(1.75rem, 1.3rem + 2vw, 3rem); overflow: hidden; isolation: isolate; } .feature-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(680px 340px at 88% 12%, rgba(255, 196, 46, 0.16), transparent 62%); } .feature-band__grid { display: grid; gap: var(--sp-6); align-items: center; } @media (min-width: 880px) { .feature-band__grid { grid-template-columns: 1.15fr 1fr; } } .feature-band h2 { color: #fff; margin-bottom: var(--sp-3); } .feature-band .eyebrow { color: var(--gold-bright); } .feature-band .eyebrow::before { background: var(--gold-bright); } .feature-band p { color: #B6C3D4; } .feature-band .checklist svg { color: var(--gold-bright); } .feature-band .stat strong { color: #fff; } .feature-band .stat span { color: #A9B6C6; } .feature-band .stat-row { border-top-color: rgba(255, 255, 255, 0.16); } .feature-band--alert::before { background: radial-gradient(680px 340px at 88% 12%, rgba(229, 24, 54, 0.22), transparent 62%); } .feature-band--alert .eyebrow, .feature-band--alert .checklist svg { color: var(--red-bright); } .feature-band--alert .eyebrow::before { background: var(--red-bright); } .gallery-item { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--paper); } .gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } /* Before/after composites are square, with the before stacked over the after. Cropping them to 4:3 slices through both halves. */ .gallery-item--natural img { aspect-ratio: auto; height: auto; object-fit: contain; } .gallery-item figcaption { padding: var(--sp-3) var(--sp-4); font-size: 0.85rem; color: var(--text-muted); } .band-media { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-md); } .badge-new { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--gold-bright); color: var(--navy-900); font-family: var(--font-display); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; } /* Print */ @media print { .emergency-bar, .site-header, .mobile-nav, .cta-band, .site-footer, .btn-row { display: none !important; } body { color: #000; } a { text-decoration: underline; } } /* -------------------------------------------------------------------------- 18. Biohazard theme Applied as a body class on remediation pages. Swaps the accent to red so that urgent work reads as urgent, while the rest of the site stays navy. -------------------------------------------------------------------------- */ body.theme-biohazard { --accent: var(--red-dark); --accent-strong: var(--red); --accent-wash: var(--red-wash); --accent-on-dark: var(--red-bright); --highlight: var(--red); }