/* Shared stylesheet for all 8 sites this generator builds — 4 local-brand starter sites (KingstonSEO, KingstonWebDesigner, NiagaraSEO, NiagaraWebDesigner) and 4 national industry-vertical sites (DivorceSEO, DivorceWebDesigner, CampgroundSEO, CampgroundWebDesigner). One file, copied into each site's dist/ at deploy time. THREE VISUAL IDENTITIES, ONE SYSTEM. Christopher's own review (2026-09-02) found all 8 sites rendering pixel-identical despite selling to three genuinely different buyers. [data-vertical] on (set per-site in build-site.py's SITES config) selects one of three token sets below. Structure, components, and accessibility floor stay shared; color/type/texture/ornament differentiate. Never fork markup for this — if a change needs more than a token swap or a [data-vertical] selector override, that's a sign the component should stay shared and the *content* should differ instead. - "general" (default, :root) — Main Street ledger. Niagara/Kingston SEO+WebDesigner. Buyer distrusts polish that reads corporate; letterhead register stays close to today's, just sharpened. Warm cream, Georgia body + self-hosted Fraunces for display, terracotta accent. - "legal" — Classical (2026-09-06 redesign, from Christopher's own Claude Design mockup, replacing the earlier "Chancery" look). DivorceSEO/DivorceWebDesigner. Editorial, book-like register: warm near-white ground, Cormorant Garamond headings over Lora body, gold applied as stroke/rule rather than fill. Restraint still reads as competence here — no grain texture, no checkmarks (an en dash instead), gold stays scarce — but the letterhead-legal register gives way to something closer to a well-set legal journal. - "campground" — Industry (2026-09-06 redesign, from Christopher's own Claude Design mockup, replacing the earlier "Trailhead" look). CampgroundSEO/CampgroundWebDesigner. The same wireframe/technical system already applied to blueprint-kingston below (same steel-blue accent, same Barlow/Barlow Condensed pairing) — square corners, hairline borders, uppercase technical kickers. Shares its CSS with the `[data-vertical^="blueprint-"]` rules further down this file rather than duplicating them; see that block's comment. Zero-JS/no-third-party-embed constraint is load-bearing, not a preference: every site's own /privacy/ and /accessibility/ pages promise "no JavaScript, no third-party embeds, no tracking" as part of the sales pitch. All three display fonts below are self-hosted (OFL-licensed, /fonts/*.woff2, never a fonts.googleapis.com link) so that promise stays true. No carousels, no lightboxes, no client-side anything — differentiation comes from color, type, spacing, static layout, and image treatment only. */ :root { --navy: #123456; /* fixed brand anchor, never change — background use only, any vertical */ --navy-ink: #0d2740; /* fixed brand anchor, never change — background use only, any vertical */ /* "general" vertical tokens (the default — :root, no [data-vertical] needed) */ --paper: #faf6ee; --paper-raised: #ffffff; /* cards sit whiter than the page, like paper stock on a desk */ --ink: #201c14; --ink-muted: #6b6153; --line: #e0d5c0; --accent: #b5651d; /* 4.0:1 on --paper — borders/icons/≥18px-bold only, NOT body text */ --accent-deep: #8f4f16; /* 5.9:1 on --paper — safe for text-sized use (links, hover) */ --gold-hairline: #c9a54a; /* scarce — a rule, never a fill. */ --font-body: Georgia, "Times New Roman", serif; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --max-width: 42rem; /* text-on-paper roles, separate from the navy background tokens above: navy text on dark-mode paper computes to ~1.1-1.4:1, failing WCAG AA (4.5:1) — these stay navy in light mode and lighten in dark mode instead. */ --link: var(--navy); --link-strong: var(--navy-ink); } /* "legal" vertical — DivorceSEO / DivorceWebDesigner. "Classical" redesign (2026-09-06, from Christopher's own Claude Design mockup — the design system's own name for this look; the doc comment at the top of this file has the full context). Editorial and book-like: a warm near-white ground, Cormorant Garamond over Lora, gold as stroke/rule only (never a fill — the Classical system's own "don't fill cards or buttons" rule). --accent (#b68235) stays decorative-only (borders, hairlines, ≥18px bold text — 3.02:1 on --paper, not body-text safe); --accent-deep (#7d5411, 5.97:1 on --paper, 6.24:1 on --paper-raised) is the text-safe step used for links and the tier-price display. Both --link and --gold-hairline now resolve to this vertical's own accent (they inherited --navy/a neutral gold before this redesign) since gold IS the identity here — the previous "no ornament, navy only" overrides on .about-thesis, .own-band and .cta-btn-primary:hover are removed below for the same reason: they existed to keep gold OUT of a register that didn't want it, and this register wants exactly that gold hairline. */ [data-vertical="legal"] { --paper: #f3f2f2; --paper-raised: #f9f7f4; --ink: #201f1d; --ink-muted: #605d5d; --line: #d7d3d3; --accent: #b68235; --accent-deep: #7d5411; --gold-hairline: #b68235; --font-body: "Lora", Georgia, "Times New Roman", serif; --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --link: var(--accent-deep); --link-strong: #5a3b0a; } [data-vertical="legal"] h1, [data-vertical="legal"] h2 { font-weight: 600; } /* Classical is justified, book-set body copy — the one vertical that sets prose this way. */ [data-vertical="legal"] main p { text-align: justify; hyphens: auto; } /* "campground" vertical — CampgroundSEO / CampgroundWebDesigner. "Industry" redesign (2026-09-06, from Christopher's own Claude Design mockup) — the exact same wireframe/ technical design system already applied to blueprint-kingston further down this file (same steel-blue accent, same Barlow/Barlow Condensed pairing), reused here rather than re-derived because that's what the source mockup specified. The forest-green "Trailhead" look (leaf bullet, amber CTA-secondary, topographic-line body texture) is retired along with it; see the `[data-vertical^="blueprint-"]` rules below, which this vertical now shares selectors with instead of duplicating. */ [data-vertical="campground"] { --paper: #f2f2f3; --paper-raised: #e9e9ea; --ink: #1d1f20; --ink-muted: #5d5d60; --line: #d4d4d7; --accent: #5980a6; --accent-deep: #405c78; --gold-hairline: #54789c; --font-body: "Barlow", system-ui, sans-serif; --font-display: "Barlow Condensed", system-ui, sans-serif; --link: var(--accent-deep); --link-strong: #2f4458; } /* Self-hosted OFL fonts. Only Newsreader needs multiple faces (legal uses it for body text too, so it needs a real weight range); Fraunces/Bitter are display-only, one weight each. A browser fetches a face only when something actually renders with it — three unused @font-face blocks on the other two verticals cost nothing. */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/fraunces-600.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/newsreader-400.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/newsreader-600.woff2") format("woff2"); } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 500; font-display: swap; src: url("/fonts/newsreader-500i.woff2") format("woff2"); } @font-face { font-family: "Bitter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/bitter-700.woff2") format("woff2"); } /* "legal" vertical's 2026-09-06 "Classical" redesign — Cormorant Garamond and Lora ship from Google Fonts as variable files (the served .woff2 is identical across the 400/600 weight range we use), so one self-hosted file per family covers both weights, same pattern as the Inter variable file above. */ @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/cormorant-garamond-variable.woff2") format("woff2"); } @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/lora-variable.woff2") format("woff2"); } /* "blueprint" (KingstonWebDesigner/NiagaraWebDesigner) + "nocturne" (KingstonSEO/NiagaraSEO) verticals — self-hosted per the same zero-third-party rule as the fonts above; Inter ships as one variable file covering 400-700. */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-700.woff2") format("woff2"); } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-variable.woff2") format("woff2"); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); background-repeat: repeat; color: var(--ink); font-family: var(--font-body); font-size: 1.125rem; line-height: 1.65; } /* legal: flat ground, no grain — texture reads handmade/casual, wrong register for a liability-sensitive purchase */ [data-vertical="legal"] body { background-image: none; } /* campground's flat-ground/no-grain rule (the 2026-09-06 "Industry" redesign retires the topographic-contour-line texture along with the rest of the forest-green "Trailhead" look) lives with the rest of the shared blueprint/campground wireframe rules further down this file, since it shares that selector group rather than standing alone. */ a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover, a:focus { color: var(--accent-deep); } a:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; } .kicker { font-family: var(--font-body); font-variant: small-caps; letter-spacing: 0.08em; font-size: 0.85rem; font-weight: 700; color: var(--accent-deep); margin: 0 0 0.5rem; } /* legal: no kicker, or a very quiet one — this buyer doesn't need the page announced twice before the H1. build-site.py already omits "kicker" from the legal sites' config, so this rule is a defensive floor, not the primary mechanism. */ [data-vertical="legal"] .kicker { display: none; } header.site-header { background: var(--navy); color: #fff; padding: 1rem 1.25rem; } header.site-header .wrap { max-width: var(--max-width); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; } header.site-header a.brand { color: #fff; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; font-size: 1.2rem; text-decoration: none; } header.site-header a.phone { color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,0.6); border-radius: 2px; padding: 0.35rem 0.75rem; font-size: 0.95rem; white-space: nowrap; } header.site-header a.phone:hover, header.site-header a.phone:focus { background: #fff; color: var(--navy); } nav.site-nav { background: var(--paper-raised); border-bottom: 1px solid var(--line); } nav.site-nav .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0.65rem 1.25rem; display: flex; gap: 1.5rem; } nav.site-nav a { font-family: var(--font-body); font-size: 0.95rem; color: var(--ink-muted); text-decoration: none; } nav.site-nav a:hover, nav.site-nav a:focus { color: var(--accent-deep); } nav.site-nav a[aria-current="page"] { color: var(--link-strong); font-weight: 700; border-bottom: 2px solid var(--gold-hairline); padding-bottom: 2px; } main { max-width: var(--max-width); margin: 0 auto; padding: 3.5rem 1.25rem 4.5rem; } .dek { font-family: var(--font-body); font-style: italic; font-weight: 500; font-size: 1.375rem; line-height: 1.5; color: var(--ink-muted); margin-top: -0.25rem; } h1 { font-family: var(--font-display); font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.5rem; } h2 { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.3; letter-spacing: -0.005em; margin-top: 3.5rem; border-top: 1px solid var(--line); padding-top: 1.5rem; } main > h2:first-of-type { border-top: none; padding-top: 0; } .faq dt { font-family: var(--font-body); font-weight: 700; font-size: 1.375rem; margin-top: 2rem; } .faq dd { margin-left: 0; } main ul { padding-left: 1.25rem; margin: 0.75rem 0; } main ul li { margin-bottom: 0.4rem; } .price-callout { background: var(--paper-raised); border: 1px solid var(--line); border-top: 3px solid var(--gold-hairline); border-radius: 2px; box-shadow: none; padding: 2rem 2rem 2.25rem; margin: 2rem 0; } .price-callout.tier-better { border-bottom: 3px solid var(--gold-hairline); } /* legal: no colored top/bottom BAR — a single thin rule, quiet by design. Now drawn in the vertical's own gold-hairline accent (was navy pre-Classical-redesign) since gold is the identity here; the absence of a filled ornament, not the absence of color, is what keeps this quiet. */ [data-vertical="legal"] .price-callout { border-top: 1px solid var(--gold-hairline); } [data-vertical="legal"] .price-callout.tier-better { border-bottom: 1px solid var(--gold-hairline); } .price-callout--compact { padding: 1.25rem 1.5rem 1.5rem; margin: 1rem 0; } .price-callout--compact .tier-price { margin: 0.2rem 0 0.5rem; } .price-callout--compact .tier-note { font-size: 0.85rem; color: var(--ink-muted); margin: 0; } .price-callout .tier-label { font-family: var(--font-body); font-variant: small-caps; letter-spacing: 0.08em; font-weight: 700; font-size: 1rem; color: var(--ink-muted); margin: 0; } .price-callout .tier-price { font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--link-strong); margin: 0.2rem 0 1.1rem; } /* general + campground: the middle ("Better"/"Grow") tier gets a small colored numeral swatch so the three-card run reads as an ascending set at a glance. Legal opts out — see the no-ornament note above. */ [data-vertical="general"] .price-callout.tier-better .tier-price, [data-vertical="campground"] .price-callout.tier-better .tier-price, [data-vertical^="blueprint-"] .price-callout.tier-better .tier-price, [data-vertical^="nocturne-"] .price-callout.tier-better .tier-price { display: inline-block; background: var(--accent); color: #fff; padding: 0.1em 0.35em; border-radius: 2px; } [data-vertical="legal"] .price-callout.tier-better .tier-price { display: block; background: none; color: var(--link-strong); padding: 0; } .price-callout ul { list-style: none; padding-left: 0; margin: 0.75rem 0 0.25rem; } .price-callout ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; } .price-callout ul li::before { content: "\2713"; position: absolute; left: 0; color: var(--link); font-weight: 700; } /* legal: a plain en-dash reads like a retainer letter, not a sales page */ [data-vertical="legal"] .price-callout ul li::before { content: "\2013"; } /* campground's forest-green leaf-mark bullet is retired with the "Trailhead" look — the 2026-09-06 "Industry" redesign falls back to the shared checkmark bullet (a clean, technical mark fits this register better than a nature glyph would). */ .area-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 2px; padding: 1.25rem 1.5rem 1.5rem; margin: 1.25rem 0; } .area-card h2 { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.3; letter-spacing: normal; margin: 0 0 0.4rem; border-top: none; padding-top: 0; } .area-card h2 a { text-decoration: none; } .area-card h2 a:hover, .area-card h2 a:focus { text-decoration: underline; } .area-card p { margin: 0; color: var(--ink-muted); } /* .photo-compare — a before/after example pair, each photo full-width and stacked (not side-by-side — Christopher's own call after seeing the two-column version: full width reads the detail in each example better than a cramped side-by-side pair does). Fully token-driven like every other component in this file, so it re-skins automatically per vertical — first used on CampgroundSEO's /glamping-unique-stays/ page (2026-09-06). */ .photo-compare { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.75rem 0; } .photo-compare figure { margin: 0; } .photo-compare img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; } .photo-compare figcaption { font-family: var(--font-body); font-size: 0.9rem; color: var(--ink-muted); margin-top: 0.5rem; } .photo-compare-tag { display: inline-block; font-family: var(--font-body); font-variant: small-caps; letter-spacing: 0.06em; font-weight: 700; font-size: 0.8rem; padding: 0.05em 0.5em; border-radius: 2px; margin-right: 0.4em; } .photo-compare-tag--bad { color: var(--ink); background: var(--line); } .photo-compare-tag--good { color: #fff; background: var(--accent-deep); } /* wireframe verticals square off every other card in this file — match that here too */ [data-vertical^="blueprint-"] .photo-compare img, [data-vertical="campground"] .photo-compare img, [data-vertical^="blueprint-"] .photo-compare-tag, [data-vertical="campground"] .photo-compare-tag { border-radius: 0; } .about-figure { float: right; shape-outside: margin-box; width: 176px; margin: 0 0 1.5rem 1.75rem; } .about-photo { display: block; width: 176px; height: 176px; object-fit: cover; border: 1.5px solid var(--line); border-top: 3px solid var(--gold-hairline); border-radius: 2px; } .about-figure figcaption { font-family: var(--font-body); font-variant: small-caps; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--ink-muted); text-align: center; margin-top: 0.6rem; } @media (max-width: 600px) { .about-figure { float: none; width: auto; margin: 0 auto 1.5rem; } .about-photo { margin: 0 auto; } } .about-thesis { font-family: var(--font-body); font-style: italic; font-size: 1.375rem; line-height: 1.4; color: var(--link-strong); border-left: 3px solid var(--gold-hairline); padding-left: 1.25rem; margin: 2rem 0; } /* legal used a plain navy rule here pre-Classical-redesign; gold-hairline is now this vertical's own accent, so .about-thesis's shared gold-hairline border-left applies unmodified — no override needed. */ .about-map { margin: 2.5rem 0; } .about-map img { display: block; width: 100%; height: auto; border: 1.5px solid var(--line); border-top: 3px solid var(--gold-hairline); border-radius: 2px; } .about-map figcaption { font-family: var(--font-body); font-style: italic; font-size: 0.9rem; color: var(--ink-muted); text-align: center; margin-top: 0.6rem; } .own-band { background: linear-gradient(155deg, var(--navy) 0%, var(--navy-ink) 100%); color: #fff; border-top: 3px solid var(--gold-hairline); border-radius: 2px; padding: 2rem 2.25rem 2.25rem; margin: 3rem 0; } .own-band .own-mark { margin-bottom: 0.75rem; } .own-band p { margin: 0.5rem 0; } .own-band a { color: #fff; text-decoration-thickness: 1px; } .own-band a:hover, .own-band a:focus { color: #ffd9b0; } /* legal's own-band used a plain navy rule here pre-Classical-redesign; the shared 3px gold-hairline top border now applies unmodified, same reasoning as .about-thesis above. */ .cta-band { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); } .cta-band .cta-lead { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.25rem; margin: 0 0 1rem; } .cta-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; } .cta-btn { display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1.05rem; padding: 0.875rem 1.75rem; border-radius: 2px; text-decoration: none; } .cta-btn-primary { background: var(--navy); color: #fff; } .cta-btn-primary:hover, .cta-btn-primary:focus { background: var(--navy-ink); box-shadow: inset 0 -3px 0 var(--gold-hairline); } /* legal's hover used to suppress the shared inset gold-hairline shadow-line (per the no-ornament register); gold-hairline is now this vertical's own accent, so the shared hover treatment applies unmodified. campground's amber CTA-secondary override is retired with the "Trailhead" look for the same reason — the shared navy-bordered .cta-btn-secondary applies unmodified under the new steel-blue "Industry" register. */ .cta-btn-secondary { background: #fff; color: var(--navy); border: 2px solid var(--navy); padding: calc(0.875rem - 2px) calc(1.75rem - 2px); } .cta-btn-secondary:hover, .cta-btn-secondary:focus { background: var(--navy); color: #fff; } .cta-band .cta-note { margin: 0.85rem 0 0; font-size: 0.9rem; color: var(--ink-muted); } .legal-updated { font-size: 0.85rem; color: var(--ink-muted); font-style: italic; margin: 0 0 1.5rem; } .guide-cta-inline { border-left: 3px solid var(--gold-hairline); background: var(--bg-subtle, #f6f4ef); padding: 0.9rem 1.25rem; margin: 1.75rem 0; font-weight: 600; } .guide-cta-inline a { color: var(--navy); } [data-vertical="legal"] .guide-cta-inline { border-left-color: var(--gold-hairline); background: var(--paper-raised); } [data-vertical^="blueprint-"] .guide-cta-inline, [data-vertical^="nocturne-"] .guide-cta-inline, [data-vertical="campground"] .guide-cta-inline { background: var(--paper-raised); } footer.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 1.25rem 2.5rem; } footer.site-footer .wrap { max-width: var(--max-width); margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 0.9rem; color: var(--ink-muted); } footer.site-footer a { color: var(--ink-muted); } /* Never let a wide element (a code sample, a long URL) force horizontal scroll on the body */ img, table { max-width: 100%; } /* Dark mode: same content, dark ground, same navy accent per brand rule (never change the navy). DEFERRED, NOT AN OVERSIGHT: this :root block intentionally overrides EVERY vertical back to one shared dark palette (same cascade weight as [data-vertical], but declared later in the file, so it wins). Per-vertical dark accents (legal's burgundy, campground's green/amber) have NOT been contrast-verified against this dark ground — the 2026-09-02 design review explicitly flagged this as separate follow-up work rather than something to guess at here. Falling back to one shared, already-verified dark palette for all three verticals is the safe default until that verification happens — don't add per-vertical dark hex values without running the same luminance check documented below. */ @media (prefers-color-scheme: dark) { :root:not([data-vertical^="nocturne-"]) { --paper: #14181d; --paper-raised: #1e1a15; --ink: #ece7dd; --ink-muted: #b8ae9c; --line: #3a342a; /* verified against dark --paper/#14181d (8.00:1) and --paper-raised/#1e1a15 (9.73:1) — navy itself stays fixed as a background-only brand anchor */ --link: #7fb3e0; --link-strong: #9fc7e8; } body { background-image: none; } /* grain over dark navy reads muddy; flat ground instead */ header.site-header { background: var(--navy); } .price-callout { background: var(--paper-raised); } } /* "blueprint" and "nocturne" verticals — KingstonWebDesigner/NiagaraWebDesigner and KingstonSEO/NiagaraSEO (2026-09-06 redesign, from Christopher's own Claude Design mockups). Same doctrine as the three verticals above: every existing component (header/nav/kicker/h1-h2/.price-callout/.area-card/the .about- family/.own-band/the .cta- family/.faq/footer) is driven entirely by the --paper/--ink/--line/ --accent/--accent-deep/--gold-hairline/--font-body/--font-display/--link custom properties, so a full re-skin needs new token values only — no markup fork, no component-CSS duplication. header.site-header and the .cta-btn-primary / .own-band navy stay the fixed --navy brand anchor exactly like every other vertical (never overridden here either); only the surrounding paper/accent/type changes. WebDesigner keeps the light "blueprint" wireframe register (Barlow Condensed, square corners, hairline rules); SEO keeps the dark "Nocturne" register (Inter, rounded corners, glow). Kingston and Niagara share the same structure within each register and differ only by accent hue — Kingston stays cool (steel blue / blurple) per the source mockups, Niagara shifts to a warm- or-teal complementary family (teal / amber) so the two geo pairs read as distinct properties at a glance. Ramps are HSL-interpolated from each site's named accent hex, matching the lightness steps used elsewhere in this file. "campground" (CampgroundSEO/CampgroundWebDesigner, still keyed as [data-vertical= "campground"] rather than renamed to a "blueprint-*"/"industry-*" value — no reason to touch build-site.py's SITES config or force a dist-wide diff just to rename a key) shares this exact wireframe ruleset below via its own selector added to each ruleset, because its 2026-09-06 "Industry" redesign is, per the source mockup, the identical design system — same steel-blue accent (#5980a6), same Barlow/Barlow Condensed pairing — just applied to a national-industry pair instead of a geo pair. Unlike the geo pairs, CampgroundSEO and CampgroundWebDesigner intentionally do NOT contrast (no blueprint-vs- nocturne split) — Christopher's instruction was for the sister site to keep the same look, so both keep the single [data-vertical="campground"] token block above. */ [data-vertical^="blueprint-"] { --paper: #f2f2f3; --paper-raised: #e9e9ea; --ink: #1d1f20; --ink-muted: #5d5d60; --line: #d4d4d7; --font-body: "Barlow", system-ui, sans-serif; --font-display: "Barlow Condensed", system-ui, sans-serif; } /* "campground" (CampgroundSEO/CampgroundWebDesigner) shares this wireframe ruleset — its 2026-09-06 "Industry" redesign is the same design system as blueprint's, just applied to a national-industry pair instead of a geo pair; see the token block and comment near [data-vertical="campground"] above. */ [data-vertical^="blueprint-"] body, [data-vertical="campground"] body { background-image: none; /* wireframe register: flat ground, no grain */ font-size: 1.0625rem; } [data-vertical^="blueprint-"] h1, [data-vertical^="blueprint-"] h2, [data-vertical="campground"] h1, [data-vertical="campground"] h2 { letter-spacing: -0.01em; } [data-vertical^="blueprint-"] .kicker, [data-vertical="campground"] .kicker { font-variant: normal; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; } [data-vertical^="blueprint-"] .price-callout, [data-vertical^="blueprint-"] .area-card, [data-vertical="campground"] .price-callout, [data-vertical="campground"] .area-card { border-radius: 0; border-top-width: 1px; /* wireframe cards: uniform hairline, no colored bar */ } [data-vertical^="blueprint-"] .price-callout.tier-better, [data-vertical="campground"] .price-callout.tier-better { border-bottom-width: 1px; } [data-vertical="blueprint-kingston"] { --accent: #5980a6; --accent-deep: #405c78; --gold-hairline: #54789c; --link: var(--accent-deep); --link-strong: #2f4458; } [data-vertical="blueprint-niagara"] { --accent: #2f8a72; --accent-deep: #226553; --gold-hairline: #2f8971; --link: var(--accent-deep); --link-strong: #18463a; } [data-vertical^="nocturne-"] { --paper: #161826; --paper-raised: #232532; --ink: #e9e9ed; --ink-muted: #9397ab; --line: #3f424d; --font-body: "Inter", system-ui, sans-serif; --font-display: "Inter", system-ui, sans-serif; } [data-vertical^="nocturne-"] body { background-image: none; /* dark register: flat ground, no grain */ } [data-vertical^="nocturne-"] h1, [data-vertical^="nocturne-"] h2 { font-weight: 600; letter-spacing: -0.015em; } [data-vertical^="nocturne-"] .price-callout, [data-vertical^="nocturne-"] .area-card { border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,0.35); } [data-vertical^="nocturne-"] .about-photo, [data-vertical^="nocturne-"] .about-map img { border-radius: 10px; } /* the dark ground already carries presence on its own; the navy own-band needs a lift here so it doesn't read as a slightly-different-navy blur against a near-navy page — same accent-glow move the Nocturne mockup uses behind its own contact section. */ [data-vertical^="nocturne-"] .own-band { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 20px 60px color-mix(in srgb, var(--accent) 20%, transparent); } [data-vertical="nocturne-kingston"] { --accent: #9184d9; --accent-deep: #b5abfc; --gold-hairline: var(--accent); --link: #b5abfc; --link-strong: #c4bdeb; } [data-vertical="nocturne-niagara"] { --accent: #d9a24a; --accent-deep: #e6c289; --gold-hairline: var(--accent); --link: #e6c289; --link-strong: #f0dab7; }