/* ========================================================================== NorthHill HVAC & Colorworks — northhillhvac.xyz One stylesheet. No framework, no build step. LAYOUT: no visible navigation bar. The links live behind a single button at every width, including desktop, and open as a full-screen overlay — so the header is a wordmark, a phone number and one button, and the page below it is a run of oversized numbered full-bleed bands. 01 Design tokens 08 Hero & page headers 15 Footer & call bar 02 Reset & base 09 Cards & panels 16 Images & placeholders 03 Typography 10 Tables & steps 17 Motion 04 Bands & layout 11 Notes & CTA bands 18 Utilities 05 Eyebrows & heads 12 Service area & map 19 Responsive 06 Buttons & links 13 FAQ 07 Menu overlay 14 Forms ========================================================================== */ /* 01 Design tokens ======================================================= */ :root { --ink-950: #101010; --ink-900: #1a1a1a; --ink-800: #272727; --ink-700: #3a3a3a; --ink-600: #545454; --ink-500: #757575; --ink-400: #9a9a9a; --ink-300: #bdbdbd; --ink-200: #dcdcdc; --ink-100: #ededed; --concrete: #e9e7e3; --concrete-2: #dedbd5; --white: #ffffff; --rasp-900: #8a1f45; --rasp-800: #a82655; --rasp-700: #c22d63; --rasp-600: #d6336c; --rasp-300: #f0a0bf; --rasp-100: #fbe0eb; --steel-700: #35566b; --steel-100: #dde8ee; --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --step--2: clamp(0.73rem, 0.71rem + 0.1vw, 0.79rem); --step--1: clamp(0.88rem, 0.85rem + 0.14vw, 0.95rem); --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); --step-1: clamp(1.18rem, 1.08rem + 0.5vw, 1.5rem); --step-2: clamp(1.45rem, 1.25rem + 1vw, 2.15rem); --step-3: clamp(1.85rem, 1.5rem + 1.8vw, 3.1rem); --step-4: clamp(2.4rem, 1.8rem + 3vw, 4.4rem); --step-huge: clamp(4rem, 2rem + 10vw, 9rem); --sp-2: 0.8rem; --sp-3: 1.35rem; --sp-4: 2.1rem; --sp-5: 3.2rem; --band-y: clamp(3.25rem, 2rem + 5vw, 6rem); --r-sm: 3px; --r: 6px; --line: 1px solid var(--ink-200); --line-dark: 1px solid rgba(255, 255, 255, 0.16); --shadow: 0 14px 32px -24px rgba(16, 16, 16, 0.45); --shadow-lg: 0 30px 62px -34px rgba(16, 16, 16, 0.5); } /* 02 Reset & base ======================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--concrete); color: var(--ink-600); font-family: var(--font); font-size: var(--step-0); line-height: 1.72; -webkit-font-smoothing: antialiased; } body.is-locked { overflow: hidden; } img, svg, iframe, video { display: block; max-width: 100%; } img { height: auto; } a { color: var(--rasp-800); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--rasp-900); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--rasp-600); outline-offset: 3px; } .skip-link { position: absolute; left: 0; top: 0; z-index: 300; transform: translateY(-140%); background: var(--rasp-700); color: #fff; padding: 0.85rem 1.4rem; font-weight: 700; text-decoration: none; } .skip-link:focus { transform: translateY(0); } ::selection { background: var(--rasp-100); color: var(--ink-900); } /* 03 Typography ========================================================== */ h1, h2, h3 { margin: 0 0 0.45em; font-weight: 700; color: var(--ink-900); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; } h1 { font-size: var(--step-4); line-height: 1.02; } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-1); line-height: 1.24; letter-spacing: -0.025em; } h4 { margin: 0 0 0.5em; font-size: var(--step-0); font-weight: 700; color: var(--ink-900); } p { margin: 0 0 1.05em; max-width: 64ch; } p:last-child { margin-bottom: 0; } .lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-700); } strong, b { font-weight: 700; color: var(--ink-900); } ul, ol { margin: 0 0 1.05em; padding-left: 1.2em; } li { margin-bottom: 0.45em; } li:last-child { margin-bottom: 0; } /* 04 Bands & layout ===================================================== The page is a run of full-bleed bands. Each one carries an oversized number bled off the left edge, which is the device that replaces a nav bar as the thing telling you where you are. */ .wrap { width: min(100% - 2rem, 1180px); margin-inline: auto; } .wrap--narrow { width: min(100% - 2rem, 780px); margin-inline: auto; } .band { position: relative; padding-block: var(--band-y); overflow: hidden; } .band--concrete { background: var(--concrete); } .band--concrete2 { background: var(--concrete-2); } .band--white { background: var(--white); } .band--dark { background: var(--ink-900); color: var(--ink-300); } .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--white); } .band--dark strong { color: var(--white); } .band--rasp { background: var(--rasp-800); color: #fff; } .band--rasp h2, .band--rasp h3 { color: #fff; } .band--rasp strong { color: #fff; } /* The oversized number. Decorative — it repeats the numeral already in the heading's eyebrow, so it is hidden from assistive technology. */ .band__num { position: absolute; left: -0.06em; top: -0.08em; z-index: 0; font-size: var(--step-huge); font-weight: 700; line-height: 0.78; letter-spacing: -0.06em; color: var(--ink-900); opacity: 0.06; pointer-events: none; user-select: none; } .band--dark .band__num { color: #fff; opacity: 0.08; } .band--rasp .band__num { color: #fff; opacity: 0.16; } .band > .wrap { position: relative; z-index: 1; } .cols { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); } @media (min-width: 880px) { .cols { grid-template-columns: 1fr 1fr; align-items: start; } } @media (min-width: 880px) { .cols--wide { grid-template-columns: 1.25fr 1fr; } } .cols > * { min-width: 0; } .grid { display: grid; gap: var(--sp-3); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); } .grid > * { min-width: 0; } /* 05 Eyebrows & heads =================================================== */ .eyebrow { display: block; margin-bottom: 0.85rem; font-size: var(--step--2); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rasp-700); } .band--dark .eyebrow { color: var(--rasp-300); } .band--rasp .eyebrow { color: rgba(255,255,255,0.85); } .section-head { max-width: 56ch; margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); } .section-head p { font-size: var(--step-1); line-height: 1.5; color: var(--ink-600); } .band--dark .section-head p { color: var(--ink-300); } /* 06 Buttons & links ==================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex: none; padding: 0.82rem 1.5rem; border: 2px solid transparent; border-radius: var(--r-sm); font: inherit; font-weight: 700; font-size: var(--step--1); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .btn svg { width: 1.05em; height: 1.05em; flex: none; } .btn--rasp { background: var(--rasp-700); border-color: var(--rasp-700); color: #fff; } .btn--rasp:hover { background: var(--rasp-900); border-color: var(--rasp-900); color: #fff; } .btn--dark { background: var(--ink-900); border-color: var(--ink-900); color: #fff; } .btn--dark:hover { background: var(--ink-700); border-color: var(--ink-700); color: #fff; } .btn--white { background: #fff; border-color: #fff; color: var(--ink-900); } .btn--white:hover { background: var(--ink-100); border-color: var(--ink-100); } .btn--outline { background: transparent; border-color: var(--ink-300); color: var(--ink-900); } .btn--outline:hover { border-color: var(--ink-900); } .btn--ghost { background: transparent; border-color: rgba(255,255,255,0.42); color: #fff; } .btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; } .btn--lg { padding: 0.98rem 1.8rem; font-size: var(--step-0); } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.65rem; } .golink { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: var(--step--1); color: var(--rasp-800); text-decoration: none; } .golink svg { width: 1em; height: 1em; transition: transform 0.18s ease; } .golink:hover svg { transform: translateX(3px); } .band--dark .golink { color: var(--rasp-300); } /* 07 Menu overlay ======================================================= There is no nav bar at any width. The links are behind one button and open as a full-screen panel. The button keeps `aria-expanded` and the panel is an ordinary