/* Base — reset, body defaults, typography */ /* ========== SELF-HOSTED FONTS ========== */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/hanken-grotesk-400-1f96358d.woff2") format("woff2"); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/hanken-grotesk-500-0da6d705.woff2") format("woff2"); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/hanken-grotesk-600-2e88b567.woff2") format("woff2"); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/hanken-grotesk-700-36d7fd0b.woff2") format("woff2"); } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/hanken-grotesk-800-89d46301.woff2") format("woff2"); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/jetbrains-mono-400-849c32ea.woff2") format("woff2"); } /* ========== BASE ========== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); color: var(--color-text); background: var(--color-white); line-height: 1.286; letter-spacing: -0.014em; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ========== TYPOGRAPHY ========== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-text); } h1 { font-size: var(--text-4xl); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } h2 { font-size: var(--text-2xl); font-weight: 800; line-height: 1.083; letter-spacing: -0.014em; } h3 { font-size: var(--text-xl); font-weight: 700; line-height: 1.083; letter-spacing: -0.014em; } h4 { font-size: var(--text-lg); font-weight: 600; line-height: 1.083; letter-spacing: -0.014em; } /* ========== ACCESSIBILITY ========== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only-focusable:focus { position: static; width: auto; height: auto; padding: var(--space-2) var(--space-4); margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--color-primary); color: var(--color-white); z-index: 9999; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Form inputs have their own focus styles in forms.css */ input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } /* ========== STICKY-HEADER SCROLL OFFSET ========== */ /* Anchor jumps (#estimate, #services, etc.) land below the sticky .site-top. Header is ~5rem; banner adds ~2.5rem when present. 1rem of breathing room keeps the target from hugging the sticky edge. scroll-padding-top must be set on the scroll container (html), not body — body is not a scroll container in standard document flow. data-has-banner lives on so the attribute selector matches the scroll container directly. */ html { scroll-padding-top: 6rem; } html[data-has-banner="true"] { scroll-padding-top: 9rem; }