/* ========================================================================== J. Parker Contracting — design system One stylesheet, no preprocessor, no framework. Contents 00 Fonts 01 Tokens 02 Reset & base 03 Typography 04 Layout primitives 05 Buttons & links 06 Header / navigation 07 Hero 08 Trust strip 09 Cards (service, project, review, area, step) 10 Sections & bands 11 Before / after slider 12 Accordion & tables 13 Forms 14 Footer 15 Sticky mobile action bar 16 Utilities 17 Motion, print, forced-colors ========================================================================== */ /* ------------------------------------------------------------------- 00 fonts */ /* Two self-hosted variable faces, latin subset only, ~83 KB combined. No third-party font request — nothing on the critical path leaves the origin. The "* Fallback" faces below are metric-matched to Arial/Helvetica using overrides computed from the real font tables (avg lowercase advance, hhea ascent/descent). That means the text occupies exactly the same space before and after the webfont loads, so `font-display: swap` costs no layout shift at all. */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-var.woff2") format("woff2-variations"), url("../fonts/archivo-latin-var.woff2") format("woff2"); font-weight: 100 900; 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+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-var.woff2") format("woff2-variations"), url("../fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 98.69%; ascent-override: 88.97%; descent-override: 21.28%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 101.75%; ascent-override: 95.21%; descent-override: 23.71%; line-gap-override: 0%; } /* ------------------------------------------------------------------ 01 tokens */ :root { /* --- brand ------------------------------------------------------------- Taken from the existing J. Parker identity: the logo mark is built from interlocking navy and orange chevrons. Sampled values were navy #052d88 and orange #d97320, with #b85810 as the shaded face of the orange chevron. Every pair below is contrast-checked. The orange used for text and for button fills is the deeper #b85810 (4.73:1 against white) rather than the brighter logo orange, which fails AA for body text. The bright logo orange survives as the accent on dark grounds, where it is comfortably legible. */ --brand: #b85810; /* orange, primary CTA fill · 4.73:1 on white */ --brand-bright: #a34d0c; /* hover — darkens, so contrast only improves */ --brand-deep: #8f430a; /* pressed */ --brand-tint: #fdf3ea; /* wash behind selected states */ --brand-logo: #d97320; /* the literal logo orange — marks only */ --brand-on-dark: #ef9b52; /* orange accent on navy · 7.10:1 */ --brand-text: #a85210; /* orange for small text · 5.41 white, 4.97 cream */ --navy: #052d88; /* the literal logo navy */ --navy-link: #14357e; /* navy as a text link on white · 11.4:1 */ /* --- neutrals: navy-tinted ink through warm cream --------------------- */ --ink: #101828; /* near-black with a navy cast */ --ink-2: #3d4756; /* secondary text · 9.4:1 */ --ink-3: #646e7c; /* meta, captions · 5.2:1 */ --paper: #ffffff; --paper-2: #f8f6f2; /* warm cream, alternating sections */ --paper-3: #efeae2; /* inset / image placeholder */ --line: #e5e0d9; /* warm hairline on light */ --line-strong: #cfc7bb; /* --- dark ground: deep navy, not neutral charcoal --------------------- */ --slate: #0a2050; /* dark section ground · white 15.7:1 */ --slate-2: #122a5e; /* raised surface on dark */ --slate-3: #1e3a72; /* border on dark */ --slate-deep: #071730; /* footer / deepest ground */ --on-dark: #dde4ef; /* body text on navy */ --on-dark-2: #c5d0e4; /* secondary on navy · 10.1:1 */ --on-dark-3: #9fb0cd; /* meta on navy · 7.2:1 */ /* --- semantic ------------------------------------------------------- */ --bg: var(--paper); --fg: var(--ink); --focus: #2f6fe4; /* --- type ----------------------------------------------------------- */ --font-display: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Fluid scale — 360px to 1280px viewport. */ --t-xs: 0.75rem; --t-sm: 0.8125rem; --t-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem); --t-md: clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem); --t-lg: clamp(1.1875rem, 1.10rem + 0.40vw, 1.375rem); --t-xl: clamp(1.375rem, 1.22rem + 0.70vw, 1.75rem); --t-2xl: clamp(1.625rem, 1.35rem + 1.20vw, 2.375rem); --t-3xl: clamp(2rem, 1.55rem + 2.00vw, 3.25rem); --t-4xl: clamp(2.375rem, 1.65rem + 3.20vw, 4.25rem); --t-5xl: clamp(2.5rem, 1.75rem + 3.30vw, 4.25rem); --lh-tight: 1.04; --lh-snug: 1.18; --lh-normal: 1.5; --lh-loose: 1.65; --tr-display: -0.022em; /* negative tracking on large display type */ --tr-label: 0.10em; /* eyebrow / label tracking */ /* --- space (4px base) ------------------------------------------------ */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 1.75rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-14: 3.5rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; /* Section rhythm scales with the viewport. */ --section-y: clamp(3.5rem, 2.4rem + 4.6vw, 7rem); --section-y-tight: clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem); /* --- structure -------------------------------------------------------- */ --wrap: 78rem; /* 1248px — standard content width */ --wrap-wide: 88rem; /* full-bleed-ish galleries */ --wrap-text: 44rem; /* long-form reading measure */ --gutter: clamp(1.125rem, 0.85rem + 1.4vw, 2.5rem); --r-sm: 4px; --r: 8px; --r-lg: 14px; --r-xl: 22px; --r-pill: 999px; /* Shadows are restrained — this design leans on hairlines, not elevation. */ --sh-sm: 0 1px 2px rgb(20 23 26 / 0.06), 0 1px 1px rgb(20 23 26 / 0.04); --sh: 0 4px 12px rgb(20 23 26 / 0.07), 0 1px 3px rgb(20 23 26 / 0.05); --sh-lg: 0 18px 44px rgb(20 23 26 / 0.13), 0 4px 12px rgb(20 23 26 / 0.07); --sh-brand: 0 6px 20px color-mix(in srgb, var(--brand) 26%, transparent); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 220ms; --header-h: 4.5rem; } @media (min-width: 60rem) { :root { --header-h: 5.5rem; } } /* --------------------------------------------------------- 02 reset & base */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Anchor targets clear the sticky header. */ scroll-padding-top: calc(var(--header-h) + 1rem); } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--t-base); line-height: var(--lh-normal); font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Room for the sticky mobile action bar so it never covers the footer. */ @media (max-width: 47.99rem) { body { padding-bottom: 4.25rem; } } img, svg, video, canvas, picture { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } ul, ol { padding: 0; list-style: none; } a { color: inherit; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-10) 0; } :target { scroll-margin-top: calc(var(--header-h) + 1rem); } /* One consistent focus ring everywhere, visible on light and dark grounds. */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } .on-dark :focus-visible, .footer :focus-visible { outline-color: #7fb2ff; } ::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); } .skip-link { position: absolute; left: var(--s-4); top: -4rem; z-index: 200; background: var(--ink); color: #fff; padding: var(--s-3) var(--s-5); border-radius: var(--r); font-weight: 600; transition: top var(--dur) var(--ease); } .skip-link:focus { top: var(--s-4); } /* ------------------------------------------------------------ 03 typography */ h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tr-display); text-wrap: balance; color: var(--ink); } h1 { font-size: var(--t-4xl); line-height: var(--lh-tight); font-weight: 800; } h2 { font-size: var(--t-3xl); line-height: 1.08; font-weight: 700; } h3 { font-size: var(--t-xl); letter-spacing: -0.015em; } h4 { font-size: var(--t-lg); letter-spacing: -0.01em; } h5 { font-size: var(--t-md); letter-spacing: -0.005em; } p { text-wrap: pretty; } strong, b { font-weight: 650; } /* Eyebrow — the small tracked label above a section heading. */ .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-size: var(--t-sm); font-weight: 650; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--brand-text); margin-bottom: var(--s-4); } .eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; flex: none; } .on-dark .eyebrow { color: var(--brand-on-dark); } .lede { font-size: var(--t-md); line-height: var(--lh-loose); color: var(--ink-2); max-width: 46ch; } .on-dark .lede { color: var(--on-dark-2); } .meta { font-size: var(--t-sm); color: var(--ink-3); letter-spacing: 0.01em; } /* Long-form article body. */ .prose { max-width: var(--wrap-text); } .prose > * + * { margin-top: var(--s-5); } .prose h2 { margin-top: var(--s-14); font-size: var(--t-2xl); } .prose h3 { margin-top: var(--s-10); } .prose h2 + *, .prose h3 + * { margin-top: var(--s-4); } .prose p { line-height: var(--lh-loose); color: var(--ink-2); } .prose li { line-height: var(--lh-loose); color: var(--ink-2); } .prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose a:hover { color: var(--brand-bright); text-decoration-thickness: 2px; } .prose ul:not(.check-list), .prose ol { padding-left: var(--s-6); } .prose ul:not(.check-list) li { list-style: none; position: relative; padding-left: var(--s-5); } .prose ul:not(.check-list) li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); } .prose ol { list-style: decimal; } .prose ol li { padding-left: var(--s-2); } .prose ol li::marker { color: var(--brand); font-weight: 700; font-family: var(--font-display); } .prose blockquote { border-left: 3px solid var(--brand); padding: var(--s-2) 0 var(--s-2) var(--s-6); font-size: var(--t-lg); line-height: 1.5; color: var(--ink); } /* ------------------------------------------------------ 04 layout primitives */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap-wide { max-width: var(--wrap-wide); } .wrap-text { max-width: calc(var(--wrap-text) + var(--gutter) * 2); } .section { padding-block: var(--section-y); } .section-tight { padding-block: var(--section-y-tight); } .section-head { max-width: 40rem; margin-bottom: var(--s-12); } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head.center .lede { margin-inline: auto; } .section-head > h2 + .lede, .section-head > h2 + p { margin-top: var(--s-5); } /* Heading on the left, a link or button on the right. */ .section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-10); } .section-head-row > div { max-width: 42rem; } .grid { display: grid; gap: var(--s-6); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); } /* Two-column: content beside media. */ .split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } @media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; } .split.split-6-5 { grid-template-columns: 6fr 5fr; } .split.split-5-6 { grid-template-columns: 5fr 6fr; } .split.top { align-items: start; } .split .media-first { order: -1; } } .stack > * + * { margin-top: var(--s-4); } .stack-lg > * + * { margin-top: var(--s-6); } /* Dark ground. Everything inside inverts. */ .on-dark { background: var(--slate); color: var(--on-dark); } .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5 { color: #fff; } .on-dark p { color: var(--on-dark-2); } .on-dark .meta { color: var(--on-dark-3); } .on-dark hr { border-color: var(--slate-3); } .on-paper { background: var(--paper-2); } /* Hairline separators between same-colored sections. */ .rule-top { border-top: 1px solid var(--line); } .on-dark.rule-top { border-top-color: var(--slate-3); } /* ---------------------------------------------------------- 05 buttons/links */ .btn { --btn-bg: var(--brand); --btn-fg: #fff; --btn-bd: var(--brand); display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: 0.9375rem var(--s-7); background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd); border-radius: var(--r); font-family: var(--font-display); font-size: var(--t-base); font-weight: 650; letter-spacing: -0.008em; text-decoration: none; text-align: center; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:hover { --btn-bg: var(--brand-bright); --btn-bd: var(--brand-bright); transform: translateY(-1px); box-shadow: var(--sh-brand); } .btn:active { transform: translateY(0); --btn-bg: var(--brand-deep); --btn-bd: var(--brand-deep); } .btn svg { width: 1.125em; height: 1.125em; flex: none; } /* Dark solid — used where the accent would compete with a photo. */ .btn-dark { --btn-bg: var(--ink); --btn-bd: var(--ink); } .btn-dark:hover { --btn-bg: #000; --btn-bd: #000; box-shadow: var(--sh-lg); } /* Outline on light. */ .btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-strong); } .btn-ghost:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); box-shadow: var(--sh); } /* Outline on dark / photography. */ .btn-outline { --btn-bg: rgb(255 255 255 / 0.06); --btn-fg: #fff; --btn-bd: rgb(255 255 255 / 0.42); backdrop-filter: blur(6px); } .btn-outline:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; box-shadow: var(--sh-lg); } .btn-white { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; } .btn-white:hover { --btn-bg: var(--paper-2); --btn-bd: var(--paper-2); box-shadow: var(--sh-lg); } .btn-lg { padding: 1.0625rem var(--s-8); font-size: var(--t-md); } .btn-sm { padding: 0.625rem var(--s-5); font-size: var(--t-sm); } .btn-block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .btn-row.center { justify-content: center; } /* Text link with an arrow that advances on hover. */ .link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: 650; color: var(--brand); text-decoration: none; letter-spacing: -0.008em; } .link-arrow { color: var(--brand-text); } .link-arrow::after { content: "→"; transition: transform var(--dur) var(--ease); } .link-arrow:hover { color: var(--brand-bright); } .link-arrow:hover::after { transform: translateX(4px); } .on-dark .link-arrow { color: var(--brand-on-dark); } .on-dark .link-arrow:hover { color: #fff; } /* Underline-on-hover inline link. */ .link-u { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color var(--dur) var(--ease); } .link-u:hover { text-decoration-color: currentColor; } /* ------------------------------------------------------------- 06 header/nav */ .header { position: sticky; top: 0; z-index: 100; background: rgb(255 255 255 / 0.88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .header.is-stuck { box-shadow: var(--sh); } /* Thin utility strip above the nav — phone, hours, license. */ .topbar { background: var(--slate-deep); color: var(--on-dark-2); font-size: var(--t-sm); } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 2.375rem; } .topbar a { text-decoration: none; } .topbar a:hover { color: #fff; } .topbar-items { display: flex; align-items: center; gap: var(--s-6); } .topbar-item { display: inline-flex; align-items: center; gap: var(--s-2); } .topbar-item svg { width: 0.9375rem; height: 0.9375rem; opacity: 0.7; flex: none; } .topbar .phone { color: #fff; font-family: var(--font-display); font-weight: 650; letter-spacing: -0.01em; } @media (max-width: 71.99rem) { .topbar { display: none; } } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: var(--header-h); min-width: 0; } .nav-links { min-width: 0; } .brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: none; } .brand img { height: 2.25rem; width: auto; flex: none; } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-name { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 800; letter-spacing: -0.005em; color: var(--ink); text-transform: uppercase; white-space: nowrap; } .brand-sub { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; white-space: nowrap; } @media (min-width: 60rem) { .brand img { height: 2.75rem; } .brand-name { font-size: 1.0625rem; } } .nav-links { display: none; align-items: center; gap: var(--s-1); } @media (min-width: 72rem) { .nav-links { display: flex; } } .nav-link { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-2) 0.625rem; border-radius: var(--r); font-family: var(--font-display); font-size: 0.9375rem; white-space: nowrap; font-weight: 600; letter-spacing: -0.005em; color: var(--ink-2); text-decoration: none; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav-link:hover { color: var(--ink); background: var(--paper-2); } .nav-link[aria-current="page"], .nav-link.is-active { color: var(--brand); } /* Dropdown — CSS-only on hover, JS-toggled on keyboard/touch. */ .nav-group { position: relative; } .nav-group > .nav-link svg { width: 0.75rem; height: 0.75rem; opacity: 0.6; transition: transform var(--dur) var(--ease); } .nav-group:hover > .nav-link svg, .nav-group.is-open > .nav-link svg { transform: rotate(180deg); } .nav-menu { position: absolute; top: calc(100% + 0.375rem); left: 0; min-width: 17rem; padding: var(--s-2); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); } .nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu, .nav-group.is-open .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-menu a { display: block; padding: var(--s-3) var(--s-4); border-radius: var(--r); text-decoration: none; transition: background var(--dur) var(--ease); } .nav-menu a:hover { background: var(--paper-2); } .nav-menu strong { display: block; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 650; color: var(--ink); letter-spacing: -0.01em; } .nav-menu span { display: block; font-size: var(--t-sm); color: var(--ink-3); margin-top: 1px; } .nav-menu hr { margin: var(--s-2) var(--s-3); } .nav-cta { display: none; align-items: center; gap: var(--s-3); flex: none; } @media (min-width: 72rem) { .nav-cta { display: flex; } } .nav-phone { display: inline-flex; align-items: center; gap: 0.375rem; text-decoration: none; white-space: nowrap; color: var(--ink); } .nav-phone svg { width: 1rem; height: 1rem; color: var(--brand); flex: none; } .nav-phone .number { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 750; letter-spacing: -0.02em; } .nav-phone:hover { color: var(--brand); } /* Hamburger */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem; border-radius: var(--r); color: var(--ink); } @media (min-width: 72rem) { .nav-toggle { display: none; } } .nav-toggle:hover { background: var(--paper-2); } .nav-toggle svg { width: 1.5rem; height: 1.5rem; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } /* Mobile panel */ .nav-panel { display: none; border-top: 1px solid var(--line); background: #fff; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; } .nav-panel.is-open { display: block; } @media (min-width: 72rem) { .nav-panel { display: none !important; } } .nav-panel .wrap { padding-block: var(--s-4) var(--s-6); } .nav-panel a { display: block; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: var(--t-md); font-weight: 650; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); } .nav-panel a[aria-current="page"] { color: var(--brand); } .nav-panel .sub { padding-left: var(--s-4); } .nav-panel .sub a { font-size: var(--t-base); font-weight: 550; color: var(--ink-2); } .nav-panel .panel-label { padding-top: var(--s-5); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-3); } .nav-panel .btn-row { margin-top: var(--s-6); } .nav-panel .btn { flex: 1 1 10rem; } /* When the mobile panel is open, lock the page behind it. */ body.nav-open { overflow: hidden; } /* ------------------------------------------------------------------ 07 hero */ .hero { position: relative; isolation: isolate; background: var(--slate); color: #fff; overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } /* Two-stop scrim: darkens the left where the copy sits, keeps the roof visible. */ .hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(6 16 34 / 0.72) 0%, rgb(6 16 34 / 0.34) 34%, rgb(6 16 34 / 0.62) 78%, rgb(6 16 34 / 0.86) 100%), linear-gradient(96deg, rgb(6 16 34 / 0.80) 0%, rgb(6 16 34 / 0.46) 46%, rgb(6 16 34 / 0.14) 100%); } .hero-inner { display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(32rem, 26rem + 24vw, 46rem); padding-block: clamp(4rem, 3rem + 6vw, 7rem); } .hero-copy { max-width: 44rem; } .hero h1 { color: #fff; font-size: var(--t-5xl); font-weight: 800; letter-spacing: -0.028em; line-height: 0.99; text-shadow: 0 2px 24px rgb(0 0 0 / 0.32); } .hero h1 em { font-style: normal; color: var(--brand-on-dark); } .hero .lede { margin-top: var(--s-6); font-size: var(--t-md); color: var(--on-dark-2); max-width: 38rem; text-shadow: 0 1px 12px rgb(0 0 0 / 0.4); } .hero .btn-row { margin-top: var(--s-8); } .hero-eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.4375rem var(--s-4); margin-bottom: var(--s-6); background: rgb(255 255 255 / 0.10); border: 1px solid rgb(255 255 255 / 0.24); border-radius: var(--r-pill); backdrop-filter: blur(8px); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.02em; color: #fff; } .hero-eyebrow svg { width: 1rem; height: 1rem; flex: none; } /* Compact hero used on interior pages. */ .hero-page { position: relative; isolation: isolate; background: var(--slate); color: #fff; padding-block: clamp(3rem, 2.2rem + 3.6vw, 5.5rem); overflow: hidden; } .hero-page .hero-media img { object-position: center 45%; } .hero-page .hero-scrim { background: linear-gradient(94deg, rgb(6 16 34 / 0.90) 0%, rgb(6 16 34 / 0.68) 52%, rgb(6 16 34 / 0.42) 100%); } .hero-page h1 { color: #fff; font-size: var(--t-4xl); max-width: 20ch; } .hero-page .lede { color: var(--on-dark-2); margin-top: var(--s-5); } .hero-page .btn-row { margin-top: var(--s-7); } /* Plain (no photo) variant. */ .hero-page.plain { background: var(--slate); } /* ---------------------------------------------------------- 08 trust strip */ .trust { background: var(--slate-deep); color: #fff; border-top: 3px solid var(--brand); } .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); } @media (min-width: 52rem) { .trust-grid { grid-template-columns: repeat(4, 1fr); } } .trust-item { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-6) var(--s-5); border-right: 1px solid rgb(255 255 255 / 0.10); border-bottom: 1px solid rgb(255 255 255 / 0.10); text-decoration: none; } @media (min-width: 52rem) { .trust-item { border-bottom: 0; padding-block: var(--s-7); } .trust-item:last-child { border-right: 0; } } @media (max-width: 51.99rem) { .trust-item:nth-child(2n) { border-right: 0; } .trust-item:nth-last-child(-n+2) { border-bottom: 0; } } .trust-item svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--brand-bright); margin-top: 2px; } .trust-item strong { display: block; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; } .trust-item span { display: block; font-size: var(--t-sm); color: var(--on-dark-3); margin-top: 2px; line-height: 1.4; } a.trust-item:hover { background: rgb(255 255 255 / 0.05); } a.trust-item:hover strong { color: var(--brand-on-dark); } /* ----------------------------------------------------------------- 09 cards */ .card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .card-link { text-decoration: none; } .card-link:hover { border-color: var(--line-strong); box-shadow: var(--sh-lg); transform: translateY(-3px); } .on-dark .card { background: var(--slate-2); border-color: var(--slate-3); } .on-dark .card-link:hover { border-color: #2c4c8c; } .card-body { padding: var(--s-6); display: flex; flex-direction: column; flex: 1; } .card-body > * + * { margin-top: var(--s-3); } .card-body .link-arrow { margin-top: auto; padding-top: var(--s-5); } /* --- service card: icon, name, blurb, list ------------------------------ */ .service-card .card-body { padding: var(--s-7); } .service-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--r); background: var(--brand-tint); color: var(--brand); margin-bottom: var(--s-2); } .service-icon svg { width: 1.5rem; height: 1.5rem; } .on-dark .service-icon { background: rgb(217 115 32 / 0.20); color: var(--brand-on-dark); } .service-card h3 { font-size: var(--t-lg); } .service-card p { color: var(--ink-2); font-size: var(--t-base); } .service-card .tag { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); } /* Featured service card — the roofing ones. Photo on top. */ .service-card.featured { border-color: var(--line-strong); } .service-card .card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-3); } .service-card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); } .card-link:hover .card-media img { transform: scale(1.04); } /* --- checklist inside a card ------------------------------------------- */ .check-list { display: grid; gap: var(--s-2); } .check-list li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-base); color: var(--ink-2); line-height: 1.45; } .check-list svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--brand); margin-top: 0.15em; } .on-dark .check-list li { color: var(--on-dark-2); } .on-dark .check-list svg { color: var(--brand-on-dark); } .check-list.two-col { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: var(--s-2) var(--s-5); } /* --- project card ------------------------------------------------------- */ .project-card { border-radius: var(--r-lg); } .project-card .card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); } .project-card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); } .project-card:hover .card-media img { transform: scale(1.05); } .project-card .card-tag { position: absolute; top: var(--s-4); left: var(--s-4); padding: 0.3125rem var(--s-3); background: rgb(7 23 48 / 0.90); backdrop-filter: blur(6px); border-radius: var(--r-sm); font-family: var(--font-display); font-size: var(--t-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; } .project-card h3 { font-size: var(--t-md); } .place { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; } .place svg { width: 0.875rem; height: 0.875rem; flex: none; } /* --- review card -------------------------------------------------------- */ .review-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-4); break-inside: avoid; } .on-dark .review-card { background: var(--slate-2); border-color: var(--slate-3); } .stars { display: inline-flex; gap: 2px; color: #d99413; } .stars svg { width: 1.0625rem; height: 1.0625rem; } .review-card blockquote { font-size: var(--t-base); line-height: var(--lh-loose); color: var(--ink-2); } .on-dark .review-card blockquote { color: var(--on-dark-2); } .review-card blockquote::before { content: "\201C"; } .review-card blockquote::after { content: "\201D"; } .review-meta { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; } .on-dark .review-meta { border-top-color: var(--slate-3); } .review-meta cite { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--ink); letter-spacing: -0.01em; } .on-dark .review-meta cite { color: #fff; } .review-source { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-xs); color: var(--ink-3); } .review-source svg { width: 0.875rem; height: 0.875rem; } /* Masonry-ish review columns on wide screens. */ .review-columns { columns: 1; column-gap: var(--s-6); } .review-columns > * { margin-bottom: var(--s-6); } @media (min-width: 46rem) { .review-columns { columns: 2; } } @media (min-width: 72rem) { .review-columns { columns: 3; } } /* Google rating block. */ .rating-block { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); } .on-dark .rating-block { background: var(--slate-2); border-color: var(--slate-3); } .rating-score { font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--ink); } .on-dark .rating-score { color: #fff; } /* --- step / process card ------------------------------------------------ */ .steps { counter-reset: step; display: grid; gap: var(--s-6); } @media (min-width: 48rem) { .steps.cols { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); } } .step { counter-increment: step; position: relative; padding-top: var(--s-6); border-top: 2px solid var(--line); } .on-dark .step { border-top-color: var(--slate-3); } .step::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: var(--t-sm); font-weight: 750; letter-spacing: var(--tr-label); color: var(--brand); margin-bottom: var(--s-3); } .on-dark .step::before { color: var(--brand-on-dark); } .step h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); } .step p { color: var(--ink-2); font-size: var(--t-base); } /* --- area pill ---------------------------------------------------------- */ .pill-row { display: flex; flex-wrap: wrap; gap: var(--s-2); } .pill { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.4375rem var(--s-4); background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 550; color: var(--ink-2); text-decoration: none; transition: all var(--dur) var(--ease); } .pill:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); } .on-dark .pill { background: var(--slate-2); border-color: var(--slate-3); color: var(--on-dark-2); } .on-dark .pill:hover { background: var(--slate-3); border-color: #2c4c8c; color: #fff; } /* --- stat ---------------------------------------------------------------- */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 45%), 1fr)); gap: var(--s-6); } .stat .num { display: block; font-family: var(--font-display); font-size: var(--t-3xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--brand); } .on-dark .stat .num { color: var(--brand-on-dark); } .stat .lbl { display: block; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--ink-3); line-height: 1.4; } .on-dark .stat .lbl { color: var(--on-dark-3); } /* --- callout / note ------------------------------------------------------ */ .callout { padding: var(--s-6); background: var(--paper-2); border-left: 3px solid var(--brand); border-radius: 0 var(--r) var(--r) 0; } .callout h3 { font-size: var(--t-md); margin-bottom: var(--s-2); } .callout p { color: var(--ink-2); } .on-dark .callout { background: var(--slate-2); } /* --- media frame --------------------------------------------------------- */ .frame { border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); box-shadow: var(--sh); } .frame img { width: 100%; height: auto; } .frame.tall { aspect-ratio: 4 / 5; } .frame.wide { aspect-ratio: 16 / 10; } .frame.square { aspect-ratio: 1; } .frame.tall img, .frame.wide img, .frame.square img { height: 100%; object-fit: cover; } figure.captioned figcaption { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; } /* ------------------------------------------------------- 10 sections/bands */ /* Full-width CTA band with photography behind. */ .cta-band { position: relative; isolation: isolate; background: var(--slate); color: #fff; overflow: hidden; padding-block: clamp(3.5rem, 2.6rem + 4vw, 6rem); } .cta-band .hero-media img { object-position: center 40%; } .cta-band .hero-scrim { background: linear-gradient(92deg, rgb(6 16 34 / 0.92) 0%, rgb(6 16 34 / 0.74) 55%, rgb(6 16 34 / 0.52) 100%); } .cta-band h2 { color: #fff; max-width: 22ch; } .cta-band p { color: var(--on-dark-2); max-width: 46ch; margin-top: var(--s-4); } .cta-band .btn-row { margin-top: var(--s-7); } /* Emergency / urgent note line. */ .urgent-note { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); font-size: var(--t-sm); color: var(--on-dark-2); } .urgent-note svg { width: 1rem; height: 1rem; color: var(--brand-on-dark); flex: none; } /* Breadcrumbs */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-3); padding-block: var(--s-4); } .crumbs a { text-decoration: none; color: var(--ink-3); } .crumbs a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); } .crumbs li + li::before { content: "/"; color: var(--line-strong); } .crumbs [aria-current="page"] { color: var(--ink-2); } .on-dark .crumbs, .on-dark .crumbs a { color: var(--on-dark-3); } .on-dark .crumbs a:hover { color: var(--brand-on-dark); } .on-dark .crumbs [aria-current="page"] { color: var(--on-dark-2); } .on-dark .crumbs li + li::before { color: var(--slate-3); } /* Gallery grid with a lightbox. */ .gallery { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); } .gallery figure { margin: 0; } .gallery a { display: block; border-radius: var(--r); overflow: hidden; background: var(--paper-3); aspect-ratio: 4 / 3; } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out), opacity var(--dur) var(--ease); } .gallery a:hover img { transform: scale(1.05); opacity: 0.92; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: var(--s-6); background: rgb(4 11 24 / 0.95); backdrop-filter: blur(4px); } .lightbox.is-open { display: flex; } .lightbox img { max-width: min(100%, 82rem); max-height: 86dvh; width: auto; border-radius: var(--r); box-shadow: var(--sh-lg); } .lightbox figcaption { color: var(--on-dark-2); text-align: center; margin-top: var(--s-4); font-size: var(--t-sm); } .lightbox-close { position: absolute; top: var(--s-5); right: var(--s-5); width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #fff; } .lightbox-close:hover { background: rgb(255 255 255 / 0.24); } .lightbox-close svg { width: 1.375rem; height: 1.375rem; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #fff; } .lightbox-nav:hover { background: rgb(255 255 255 / 0.24); } .lightbox-nav svg { width: 1.5rem; height: 1.5rem; } .lightbox-prev { left: var(--s-5); } .lightbox-next { right: var(--s-5); } @media (max-width: 40rem) { .lightbox-nav { width: 2.5rem; height: 2.5rem; } .lightbox-prev { left: var(--s-2); } .lightbox-next { right: var(--s-2); } } /* ------------------------------------------------- 11 before / after slider */ .ba { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); aspect-ratio: 3 / 2; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; } .ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* The "after" image is clipped to the right of the handle. */ .ba .ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); } .ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18); pointer-events: none; } .ba-handle { position: absolute; top: 50%; left: var(--pos, 50%); transform: translate(-50%, -50%); width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / 0.32); display: grid; place-items: center; color: var(--ink); } .ba-handle svg { width: 1.25rem; height: 1.25rem; } .ba-handle:focus-visible { outline-offset: 4px; } .ba-label { position: absolute; top: var(--s-4); padding: 0.25rem var(--s-3); background: rgb(7 23 48 / 0.82); backdrop-filter: blur(4px); border-radius: var(--r-sm); font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; pointer-events: none; } .ba-label.before { left: var(--s-4); } .ba-label.after { right: var(--s-4); } /* The range input is the accessible control; it sits invisibly over the frame. */ .ba input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; } /* ------------------------------------------------------ 12 accordion/tables */ .faq { display: grid; gap: var(--s-3); } .faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--dur) var(--ease); } .faq details[open] { border-color: var(--line-strong); } .on-dark .faq details { background: var(--slate-2); border-color: var(--slate-3); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); cursor: pointer; font-family: var(--font-display); font-size: var(--t-md); font-weight: 650; letter-spacing: -0.012em; color: var(--ink); list-style: none; } .on-dark .faq summary { color: #fff; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: 0.75rem; height: 0.75rem; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease); } .faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); } .faq summary:hover { background: var(--paper-2); } .on-dark .faq summary:hover { background: rgb(255 255 255 / 0.04); } .faq .answer { padding: 0 var(--s-6) var(--s-6); } .faq .answer > * + * { margin-top: var(--s-3); } .faq .answer p, .faq .answer li { color: var(--ink-2); line-height: var(--lh-loose); } .on-dark .faq .answer p, .on-dark .faq .answer li { color: var(--on-dark-2); } /* Spec table — used on project detail and service pages. */ .spec { width: 100%; border-collapse: collapse; font-size: var(--t-base); } .spec th, .spec td { text-align: left; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); vertical-align: top; } .spec th { width: 12rem; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); padding-right: var(--s-5); } .spec td { color: var(--ink-2); } .on-dark .spec th, .on-dark .spec td { border-bottom-color: var(--slate-3); } .on-dark .spec td { color: var(--on-dark-2); } @media (max-width: 36rem) { .spec th, .spec td { display: block; width: auto; } .spec th { border-bottom: 0; padding-bottom: var(--s-1); } .spec td { padding-top: 0; } } /* ----------------------------------------------------------------- 13 forms */ .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); box-shadow: var(--sh); } .on-dark .form-card { background: var(--slate-2); border-color: var(--slate-3); } .field { display: grid; gap: var(--s-2); } .field + .field, .field-row + .field, .field + .field-row, .field-row + .field-row { margin-top: var(--s-5); } .field-row { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); } .field label, .field .label { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.008em; color: var(--ink); } .on-dark .field label, .on-dark .field .label { color: #fff; } .field label .req { color: var(--brand); } .field .hint { font-size: var(--t-sm); color: var(--ink-3); } .on-dark .field .hint { color: var(--on-dark-3); } .input, .textarea, .select { width: 100%; padding: 0.8125rem var(--s-4); background: var(--paper); color: var(--ink); border: 1.5px solid var(--line-strong); border-radius: var(--r); font-size: var(--t-base); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); appearance: none; } .textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-normal); } .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23646e7c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-4) center; background-size: 0.75rem; padding-right: var(--s-10); } .input::placeholder, .textarea::placeholder { color: #8d97a5; } .input:hover, .textarea:hover, .select:hover { border-color: var(--ink-3); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); } .input:user-invalid, .textarea:user-invalid, .select:user-invalid { border-color: #c0392b; } .on-dark .input, .on-dark .textarea, .on-dark .select { background: var(--slate); color: #fff; border-color: var(--slate-3); } .on-dark .input::placeholder, .on-dark .textarea::placeholder { color: var(--on-dark-3); } /* Radio/checkbox card group — the "what do you need help with" selector. */ .choice-grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr)); } .choice { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--r); cursor: pointer; font-size: 0.9375rem; font-weight: 550; line-height: 1.3; transition: all var(--dur) var(--ease); } .choice input { position: absolute; opacity: 0; width: 0; height: 0; } .choice .dot { flex: none; width: 1.125rem; height: 1.125rem; border: 2px solid var(--line-strong); border-radius: 50%; transition: all var(--dur) var(--ease); } .choice:hover { border-color: var(--ink-3); } .choice:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); } .choice:has(input:checked) .dot { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px #fff; } .choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } .on-dark .choice { background: var(--slate); border-color: var(--slate-3); color: var(--on-dark-2); } .on-dark .choice:has(input:checked) { border-color: var(--brand-on-dark); background: rgb(217 115 32 / 0.18); color: #fff; } /* File input */ .file-drop { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); border: 1.5px dashed var(--line-strong); border-radius: var(--r); background: var(--paper-2); cursor: pointer; transition: all var(--dur) var(--ease); } .file-drop:hover { border-color: var(--brand); background: var(--brand-tint); } .file-drop svg { width: 1.5rem; height: 1.5rem; color: var(--ink-3); flex: none; } .file-drop strong { display: block; font-size: 0.9375rem; font-family: var(--font-display); } .file-drop span { display: block; font-size: var(--t-sm); color: var(--ink-3); } .on-dark .file-drop { background: var(--slate); border-color: var(--slate-3); } .form-footer { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); } .on-dark .form-footer { border-top-color: var(--slate-3); } .form-note { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; } .on-dark .form-note { color: var(--on-dark-3); } /* Honeypot — hidden from humans, catches naive bots. */ .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ---------------------------------------------------------------- 14 footer */ .footer { background: var(--slate-deep); color: var(--on-dark-3); font-size: 0.9375rem; } .footer a { text-decoration: none; color: inherit; } .footer a:hover { color: #fff; } .footer-main { display: grid; gap: var(--s-10); padding-block: var(--s-16) var(--s-12); } @media (min-width: 52rem) { .footer-main { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--s-8); } } .footer h3 { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: #fff; margin-bottom: var(--s-5); } .footer-links li + li { margin-top: var(--s-3); } .footer-brand img { height: 3rem; width: auto; margin-bottom: var(--s-5); } .footer-brand p { color: var(--on-dark-3); max-width: 30ch; line-height: var(--lh-loose); } .footer-contact li { display: flex; align-items: flex-start; gap: var(--s-3); line-height: 1.5; } .footer-contact li + li { margin-top: var(--s-4); } .footer-contact svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--brand-bright); margin-top: 0.1em; } .footer-contact .big { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 750; letter-spacing: -0.02em; color: #fff; } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-6); border-top: 1px solid rgb(255 255 255 / 0.10); font-size: var(--t-sm); } .footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-5); } .footer-license { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.03em; color: var(--on-dark-2); } /* --------------------------------------------------- 15 sticky mobile bar */ .actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: grid; grid-template-columns: repeat(3, 1fr); background: rgb(7 23 48 / 0.97); backdrop-filter: blur(12px); border-top: 1px solid rgb(255 255 255 / 0.12); padding-bottom: env(safe-area-inset-bottom); } @media (min-width: 48rem) { .actionbar { display: none; } } .actionbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0.625rem var(--s-2); min-height: 3.875rem; color: var(--on-dark); text-decoration: none; font-family: var(--font-display); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.01em; border-right: 1px solid rgb(255 255 255 / 0.10); } .actionbar a:last-child { border-right: 0; } .actionbar a svg { width: 1.25rem; height: 1.25rem; } .actionbar a:active { background: rgb(255 255 255 / 0.08); } .actionbar .primary { background: var(--brand); color: #fff; } .actionbar .primary:active { background: var(--brand-deep); } /* -------------------------------------------------------------- 16 utilities */ .center { text-align: center; } .nowrap { white-space: nowrap; } .mt-0 { margin-top: 0; } .mt-4 { margin-top: var(--s-4); } .mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); } .mt-10 { margin-top: var(--s-10); } .mt-12 { margin-top: var(--s-12); } .mb-0 { margin-bottom: 0; } .measure { max-width: 46ch; } .muted { color: var(--ink-3); } .on-dark .muted { color: var(--on-dark-3); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Scroll-in reveal. Opt-in per element; no-JS and reduced-motion both show it. */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); } .reveal.is-in { opacity: 1; transform: none; } .no-js .reveal { opacity: 1; transform: none; } /* --------------------------------------------- 17 motion / print / a11y */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } @media (forced-colors: active) { .btn { border: 2px solid currentColor; } .card, .review-card, .faq details { border: 1px solid currentColor; } .hero-scrim { display: none; } } @media print { .header, .actionbar, .cta-band, .nav-panel, .lightbox, .skip-link { display: none !important; } body { padding-bottom: 0; color: #000; background: #fff; font-size: 11pt; } .on-dark { background: #fff !important; color: #000 !important; } .on-dark h1, .on-dark h2, .on-dark h3, .on-dark p { color: #000 !important; } .section { padding-block: 1.5rem; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } a[href^="tel"]::after, a[href^="#"]::after, a[href^="mailto"]::after { content: ""; } .card, .review-card { break-inside: avoid; border: 1px solid #ccc; } h2, h3 { break-after: avoid; } } /* ------------------------------------------- 18 photo-free hero & placeholders */ /* The rebuild inherited no usable photography — the old site's images were stock, and the two genuine job photos are barely 250px wide. Rather than pass off a stock roof as J. Parker's work, the hero is typographic: a deep navy field with the chevron of the logo mark repeated across it at very low contrast. When real photos arrive, `picture()` finds them in the manifest and the photographic hero takes over automatically with no CSS change. */ .hero-plain { background: radial-gradient(120% 90% at 12% 0%, #123163 0%, transparent 60%), radial-gradient(90% 70% at 100% 100%, #0e2657 0%, transparent 55%), var(--slate); } /* A repeating chevron field, drawn with gradients rather than an SVG data URI — fewer bytes, and it scales with the section instead of tiling. */ .hero-pattern { position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(115deg, transparent 0 46px, rgb(255 255 255 / 0.028) 46px 47px, transparent 47px 94px), repeating-linear-gradient(-115deg, transparent 0 46px, rgb(255 255 255 / 0.028) 46px 47px, transparent 47px 94px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 88%); mask-image: linear-gradient(to bottom, #000 0%, transparent 88%); } /* A thin brand rule along the bottom of any photo-free hero. */ .hero-plain::after, .hero-page.plain::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--navy) 0%, var(--brand-logo) 55%, var(--brand) 100%); } .hero-page.plain { position: relative; background: radial-gradient(110% 130% at 8% 0%, #123163 0%, transparent 62%), var(--slate); } /* ---------------------------------------------------- 19 hero proof panel */ /* The homepage hero carries its own proof block rather than relying on the trust strip below the fold. Every line in it is independently checkable, which is the whole argument the site makes. */ .hero-grid { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4rem); align-items: end; } @media (min-width: 62rem) { .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr); } } .hero .hero-copy { max-width: 40rem; } .hero .hero-copy .urgent-note { margin-top: var(--s-6); } .hero-proof { padding: var(--s-6) var(--s-7) var(--s-7); background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.18); border-radius: var(--r-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgb(4 11 24 / 0.35); } .hero-proof-head { display: flex; align-items: center; gap: var(--s-4); padding-bottom: var(--s-5); border-bottom: 1px solid rgb(255 255 255 / 0.16); } .hero-proof-score { font-family: var(--font-display); font-size: 3rem; font-weight: 800; line-height: 0.9; letter-spacing: -0.035em; color: #fff; } .hero-proof-head .stars { display: flex; } .hero-proof-sub { display: block; margin-top: 3px; font-size: var(--t-sm); color: var(--on-dark-2); } .hero-proof-list { display: grid; gap: var(--s-3); margin-top: var(--s-5); } .hero-proof-list li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: 0.9375rem; line-height: 1.45; color: var(--on-dark-2); } .hero-proof-list svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.15em; color: var(--brand-on-dark); } .hero-proof-list strong { color: #fff; font-weight: 650; } .hero-proof-link { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-6); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 650; color: var(--brand-on-dark); text-decoration: none; } .hero-proof-link svg { width: 1em; height: 1em; transition: transform var(--dur) var(--ease); } .hero-proof-link:hover { color: #fff; } .hero-proof-link:hover svg { transform: translateX(4px); } /* With a proof panel beside it the hero no longer needs to be tall. */ .hero-plain .hero-inner { min-height: 0; } /* ------------------------------------------------------- 20 content rhythm */ /* The reset zeroes every margin, which is right for layout but leaves loose prose inside sections running together. `.prose` and `.card-body` set their own rhythm; this covers everything else — the split columns on the homepage, service pages and area pages, where paragraphs sit directly in a
. */ p + p { margin-top: var(--s-4); } .lede + p { margin-top: var(--s-5); } h2 + p, h3 + p, h4 + p { margin-top: var(--s-4); } h2 + .lede, h3 + .lede { margin-top: var(--s-5); } .eyebrow + h2, .eyebrow + h3 { margin-top: 0; } p + .check-list, .lede + .check-list, h3 + .check-list { margin-top: var(--s-5); } p + .btn-row, .lede + .btn-row, .check-list + .btn-row { margin-top: var(--s-7); } p + .spec, .lede + .spec { margin-top: var(--s-6); } p + .pill-row, .lede + .pill-row { margin-top: var(--s-5); } /* …but never inside a card or a quote, which have their own spacing. */ .card-body p + p { margin-top: var(--s-3); } .review-card p + p, .hero-proof p + p { margin-top: var(--s-3); } /* ------------------------------------------------------------- 21 fixes */ /* Inline SVGs carry no width/height attributes, so anywhere a component forgot to size them they fell back to the UA default and blew out the layout. These are the places that missed. */ .pill svg, .footer-license svg, .project-card .place svg, .card-body .place svg { width: 0.875rem; height: 0.875rem; flex: none; } .pill { white-space: nowrap; } .pill svg { opacity: 0.55; } .footer-license { white-space: nowrap; } /* `display: inline-flex` turned every text node in this line into its own flex item, so the sentence broke into columns as soon as it had to wrap. It needs to be ordinary inline text with an inline icon. */ .urgent-note { display: block; max-width: 46ch; } .urgent-note svg { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.4em; color: var(--brand-on-dark); } /* Keep the rating block from forcing the section heading row to wrap. */ .section-head-row .rating-block { max-width: 24rem; } .section-head-row .rating-block p { font-size: 0.9375rem; } /* Footer town list reads better in two columns once there are more than five. */ @media (min-width: 30rem) { .footer-towns { columns: 2; column-gap: var(--s-6); } .footer-towns li { break-inside: avoid; } } /* ------------------------------------------------- 22 CTA band, two columns */ .cta-band .cta-grid { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4rem); align-items: center; } @media (min-width: 62rem) { .cta-band .cta-grid { grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.9fr); } } .cta-ways { display: grid; gap: var(--s-3); padding: var(--s-6); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--r-lg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cta-way { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r); text-decoration: none; color: var(--on-dark-2); transition: background var(--dur) var(--ease); } .cta-way:hover { background: rgb(255 255 255 / 0.08); } .cta-way > svg { width: 1.375rem; height: 1.375rem; flex: none; color: var(--brand-on-dark); } .cta-way strong { display: block; font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; letter-spacing: -0.015em; color: #fff; } .cta-way span { display: block; font-size: var(--t-sm); margin-top: 1px; } /* -------------------------------------------------- 23 small-screen tidy */ /* On a narrow screen a wrapped button row leaves a ragged right edge, and these are the primary actions — they should be full-width tap targets. */ @media (max-width: 30rem) { .hero .btn-row .btn, .hero-page .btn-row .btn, .cta-band .btn-row .btn, .form-card .btn-row .btn { flex: 1 1 100%; } .hero-eyebrow { font-size: var(--t-xs); } } /* `.nav-panel a` sets display:block and a bottom rule for the menu links, which also caught the two buttons at the foot of the panel — the icon and the label ended up on separate lines. Put the button back. */ .nav-panel .btn-row a.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.9375rem var(--s-5); border: 1.5px solid var(--btn-bd); color: var(--btn-fg); font-size: var(--t-base); } /* ------------------------------------------------- 24 sticky page sidebar */ /* On a long service or guide page the contact panel should stay with the reader rather than scrolling away at the top. */ @media (min-width: 56rem) { .split.top > aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } } /* ---------------------------------------------- 25 narrow-viewport safety */ /* A grid track defaults to `min-width: auto`, so it grows to the widest min-content among its items. A single `white-space: nowrap` button with a long label was therefore widening the whole column past the viewport at 320px. Every grid track that holds prose gets `minmax(0, …)` and every grid child gets `min-width: 0`, so content wraps instead of pushing the page out. */ .split { grid-template-columns: minmax(0, 1fr); } .grid > *, .split > *, .field-row > *, .choice-grid > *, .steps > *, .trust-grid > *, .cta-grid > *, .hero-grid > * { min-width: 0; } /* Long unbroken strings — an email address, a URL — must never widen a page. */ body { overflow-wrap: break-word; } /* Buttons hold their label on one line at comfortable sizes, but on a phone a long label should wrap rather than force a scrollbar. */ @media (max-width: 34rem) { .btn { white-space: normal; } } /* The trust strip is two columns on a phone; let its labels wrap. */ .trust-item { min-width: 0; } .trust-item strong, .trust-item span { overflow-wrap: break-word; } /* ------------------------------------------------------ 26 contrast fixes */ /* Found by measuring computed colors against their real backgrounds on the rendered pages, rather than by eye. */ /* The review card's source line kept the light-ground gray when the card sat on a navy section — dark gray on dark navy. */ .on-dark .review-source { color: var(--on-dark-3); } /* `.meta` and breadcrumbs inside a dark hero were still using the light-ground grays. The heroes now carry `.on-dark`, which covers most of it; these pin the remaining two. */ .on-dark .meta, .hero-page .meta { color: var(--on-dark-3); } .hero-page .crumbs, .hero-page .crumbs a { color: var(--on-dark-3); } .hero-page .crumbs [aria-current="page"] { color: var(--on-dark-2); } .hero-page .crumbs li + li::before { color: var(--slate-3); } .hero-page .crumbs a:hover { color: var(--brand-on-dark); } /* Prose links keep the AA-safe orange too. */ .prose a { color: var(--brand-text); } .prose a:hover { color: var(--brand); } /* ------------------------------------------------------- 27 no-JS fallback */ /* `.no-js` is on and removed by site.js on load. Without JavaScript the hamburger cannot toggle anything, so the panel would leave a phone with no navigation at all. Show it as a plain stacked list instead and hide the button that does nothing. */ .no-js .nav-toggle { display: none; } .no-js .nav-panel { display: block; } @media (min-width: 72rem) { .no-js .nav-panel { display: none !important; } } /* The lazy map never loads without JS, so let the placeholder's