/* ===== THEME TOKENS — GENERATED by tools/new-site.py from brand.js ===== Edit the palettes in brand.js, not here. Anything hand-written between these two markers is overwritten on the next stamp. Light is the base. Dark arrives either from the system preference or from an explicit choice recorded on . The media query is scoped :not([data-theme="light"]) so a visitor who has deliberately chosen light is not overridden by their operating system. */ :root { color-scheme: light; --c-ink: 247 249 251; /* #F7F9FB */ --c-paper: 14 17 22; /* #0E1116 */ --c-line: 192 201 211; /* #C0C9D3 */ --c-mute: 99 115 131; /* #637383 */ --c-accent: 23 120 184; /* #1778B8 */ --c-accent-dk: 19 100 153; /* #136499 */ --c-accent-lt: 23 128 118; /* #178076 */ --c-heat: 203 69 18; /* #CB4512 */ --c-surface: 255 255 255; /* #FFFFFF */ --c-on-accent: 247 249 251; /* #F7F9FB */ --c-on-heat: 247 249 251; /* #F7F9FB */ } /* An inverted island: a section deliberately grounded in the opposite pole from the page around it, so the page keeps its alternating rhythm in BOTH themes. It takes the whole opposite palette rather than a few borrowed tokens — `bg-accent text-ink` only stays legible while accent and ink come from the SAME palette, so swapping the accent family on its own turns every button inside the island into 2.4:1. */ .invert { --c-ink: 10 14 18; /* #0A0E12 */ --c-paper: 237 243 246; /* #EDF3F6 */ --c-line: 24 34 44; /* #18222C */ --c-mute: 135 149 163; /* #8795A3 */ --c-accent: 77 171 233; /* #4DABE9 */ --c-accent-dk: 46 157 229; /* #2E9DE5 */ --c-accent-lt: 117 251 238; /* #75FBEE */ --c-heat: 236 96 42; /* #EC602A */ --c-surface: 19 19 22; /* #131316 */ --c-on-accent: 10 14 18; /* #0A0E12 */ --c-on-heat: 10 14 18; /* #0A0E12 */ color: rgb(var(--c-paper)); } /* An island inside an island returns to the page's own palette, so the alternation keeps working at any depth instead of stacking. */ .invert .invert { --c-ink: 247 249 251; /* #F7F9FB */ --c-paper: 14 17 22; /* #0E1116 */ --c-line: 192 201 211; /* #C0C9D3 */ --c-mute: 99 115 131; /* #637383 */ --c-accent: 23 120 184; /* #1778B8 */ --c-accent-dk: 19 100 153; /* #136499 */ --c-accent-lt: 23 128 118; /* #178076 */ --c-heat: 203 69 18; /* #CB4512 */ --c-surface: 255 255 255; /* #FFFFFF */ --c-on-accent: 247 249 251; /* #F7F9FB */ --c-on-heat: 247 249 251; /* #F7F9FB */ color: rgb(var(--c-paper)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --c-ink: 10 14 18; /* #0A0E12 */ --c-paper: 237 243 246; /* #EDF3F6 */ --c-line: 24 34 44; /* #18222C */ --c-mute: 135 149 163; /* #8795A3 */ --c-accent: 77 171 233; /* #4DABE9 */ --c-accent-dk: 46 157 229; /* #2E9DE5 */ --c-accent-lt: 117 251 238; /* #75FBEE */ --c-heat: 236 96 42; /* #EC602A */ --c-surface: 19 19 22; /* #131316 */ --c-on-accent: 10 14 18; /* #0A0E12 */ --c-on-heat: 10 14 18; /* #0A0E12 */ } :root:not([data-theme="light"]) .invert { --c-ink: 247 249 251; /* #F7F9FB */ --c-paper: 14 17 22; /* #0E1116 */ --c-line: 192 201 211; /* #C0C9D3 */ --c-mute: 99 115 131; /* #637383 */ --c-accent: 23 120 184; /* #1778B8 */ --c-accent-dk: 19 100 153; /* #136499 */ --c-accent-lt: 23 128 118; /* #178076 */ --c-heat: 203 69 18; /* #CB4512 */ --c-surface: 255 255 255; /* #FFFFFF */ --c-on-accent: 247 249 251; /* #F7F9FB */ --c-on-heat: 247 249 251; /* #F7F9FB */ color: rgb(var(--c-paper)); } :root:not([data-theme="light"]) .invert .invert { --c-ink: 10 14 18; /* #0A0E12 */ --c-paper: 237 243 246; /* #EDF3F6 */ --c-line: 24 34 44; /* #18222C */ --c-mute: 135 149 163; /* #8795A3 */ --c-accent: 77 171 233; /* #4DABE9 */ --c-accent-dk: 46 157 229; /* #2E9DE5 */ --c-accent-lt: 117 251 238; /* #75FBEE */ --c-heat: 236 96 42; /* #EC602A */ --c-surface: 19 19 22; /* #131316 */ --c-on-accent: 10 14 18; /* #0A0E12 */ --c-on-heat: 10 14 18; /* #0A0E12 */ color: rgb(var(--c-paper)); } } :root[data-theme="dark"] { color-scheme: dark; --c-ink: 10 14 18; /* #0A0E12 */ --c-paper: 237 243 246; /* #EDF3F6 */ --c-line: 24 34 44; /* #18222C */ --c-mute: 135 149 163; /* #8795A3 */ --c-accent: 77 171 233; /* #4DABE9 */ --c-accent-dk: 46 157 229; /* #2E9DE5 */ --c-accent-lt: 117 251 238; /* #75FBEE */ --c-heat: 236 96 42; /* #EC602A */ --c-surface: 19 19 22; /* #131316 */ --c-on-accent: 10 14 18; /* #0A0E12 */ --c-on-heat: 10 14 18; /* #0A0E12 */ } :root[data-theme="dark"] .invert { --c-ink: 247 249 251; /* #F7F9FB */ --c-paper: 14 17 22; /* #0E1116 */ --c-line: 192 201 211; /* #C0C9D3 */ --c-mute: 99 115 131; /* #637383 */ --c-accent: 23 120 184; /* #1778B8 */ --c-accent-dk: 19 100 153; /* #136499 */ --c-accent-lt: 23 128 118; /* #178076 */ --c-heat: 203 69 18; /* #CB4512 */ --c-surface: 255 255 255; /* #FFFFFF */ --c-on-accent: 247 249 251; /* #F7F9FB */ --c-on-heat: 247 249 251; /* #F7F9FB */ color: rgb(var(--c-paper)); } :root[data-theme="dark"] .invert .invert { --c-ink: 10 14 18; /* #0A0E12 */ --c-paper: 237 243 246; /* #EDF3F6 */ --c-line: 24 34 44; /* #18222C */ --c-mute: 135 149 163; /* #8795A3 */ --c-accent: 77 171 233; /* #4DABE9 */ --c-accent-dk: 46 157 229; /* #2E9DE5 */ --c-accent-lt: 117 251 238; /* #75FBEE */ --c-heat: 236 96 42; /* #EC602A */ --c-surface: 19 19 22; /* #131316 */ --c-on-accent: 10 14 18; /* #0A0E12 */ --c-on-heat: 10 14 18; /* #0A0E12 */ color: rgb(var(--c-paper)); } /* Permanently dark, in either theme. The hero, the photo bands and the lightbox carry a dark scrim burned into the artwork, so their text has to stay light whatever the rest of the page is doing. Re-declaring the tokens inside the scope means that markup needs no per-theme variant. */ .on-dark { color-scheme: dark; --c-ink: 10 14 18; /* #0A0E12 */ --c-paper: 237 243 246; /* #EDF3F6 */ --c-line: 24 34 44; /* #18222C */ --c-mute: 135 149 163; /* #8795A3 */ --c-accent: 77 171 233; /* #4DABE9 */ --c-accent-dk: 46 157 229; /* #2E9DE5 */ --c-accent-lt: 117 251 238; /* #75FBEE */ --c-heat: 236 96 42; /* #EC602A */ --c-surface: 19 19 22; /* #131316 */ --c-on-accent: 10 14 18; /* #0A0E12 */ --c-on-heat: 10 14 18; /* #0A0E12 */ /* `color` inherits its RESOLVED value, so redefining the variables here is not enough on its own: text with no explicit colour class would keep the value it inherited from . */ color: rgb(var(--c-paper)); } /* ===== end theme tokens ===== */ /* ===== Invoice state colours ===== Hand-written, NOT part of the generated block above: an invoice being overdue is a state, not branding, so these are not a client's to choose. They still have to theme — the dark set is ~2.7:1 on a white page — so each one is the lightest shade of its hue that clears 4.5:1 against its own tinted badge. */ :root { --c-due: 201 29 35; --c-paid: 35 121 55; --c-overdue: 167 71 19; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-due: 255 106 111; --c-paid: 95 207 126; --c-overdue: 255 154 92; } } :root[data-theme="dark"] { --c-due: 255 106 111; --c-paid: 95 207 126; --c-overdue: 255 154 92; } .on-dark { --c-due: 255 106 111; --c-paid: 95 207 126; --c-overdue: 255 154 92; } /* Badwound Climate Solutions LLC — shared styles for all pages */ html { scroll-behavior: smooth; } body { font-family: 'Public Sans', system-ui, sans-serif; background: rgb(var(--c-ink)); color: rgb(var(--c-paper)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Safety net: nothing may make the page scroll sideways. On phones a single over-wide element makes Safari zoom the whole page out to fit it, which looks like the site "shrank". No position:sticky is used, so this is safe. */ html, body { max-width: 100%; overflow-x: hidden; } /* Archivo Black is a wide black grotesque where the previous face was a condensed one. It ships weight 400 only, so hierarchy comes from size, case and spacing — never a heavier weight. Tighter tracking stops the wide letterforms sprawling at display sizes. */ .display { font-family: 'Archivo Black', Impact, sans-serif; letter-spacing: -0.02em; } /* Hero headline sizing. Uses clamp(), never raw vw. Rotating landscape→portrait on iOS can leave vw computed against the OLD (wider) viewport, so unbounded vw text stays landscape-sized in portrait and drags the page wider than the screen. The rem ceiling keeps it contained even if vw goes stale. */ .hero-h1 { font-size: clamp(2.05rem, 7.6vw, 5.5rem); } .hero-script { font-size: clamp(1.6rem, 5.4vw, 3.9rem); } .err-code { font-size: clamp(4.5rem, 19vw, 9rem); } /* Retired: the serif italic was the source brand's signature voice. The class stays only until the pages stop using it, and is no longer a serif — so nothing falls back to a face that is no longer loaded. */ .serif-it { font-family: 'Public Sans', system-ui, sans-serif; font-style: italic; font-weight: 400; } .grid-bg { background-image: linear-gradient(rgb(var(--c-paper) / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c-paper) / .04) 1px, transparent 1px); background-size: 56px 56px; } .noise::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; mix-blend-mode: overlay; opacity: .5; } .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); } .reveal.in { opacity: 1; transform: none; } .stat-num { font-feature-settings: "tnum"; } /* min-width:0 is load-bearing. Grid/flex items default to min-width:auto, so they refuse to shrink below their content's intrinsic width — and iOS Safari gives form controls a big intrinsic width (a