/* ============================================================================ Montivory — BRAND THEMES (multi-site theming layer) ---------------------------------------------------------------------------- One design system, many sites. Components stay identical; only BRANDING (accent colour + logo + gradient) changes per site. HOW IT WORKS - :root below = the DEFAULT brand (Montivory). Any page with no data-brand attribute renders in Montivory colours. - Each site gets ONE [data-brand=""] block that overrides only the brand-specific tokens. Structural tokens (spacing, radius, neutrals, status colours, text/border greys) are NOT touched — they stay shared. HOW TO USE ON A SITE 1. Put the site key on the root element: 2. That's it — buttons, links, focus rings, footers, gradients, and any element using var(--brand-logo) rebrand automatically. HOW TO ADD A NEW SITE - Copy one [data-brand] block below, rename the key, and set the 12 knobs. - Drop the site's logo files in assets/ and point the two --brand-logo-* tokens at them. - Add a one-line "// FOR: ONLY" comment so ownership is explicit. THE 12 BRAND KNOBS (everything a site is allowed to change) --brand-accent main interactive / CTA colour --brand-accent-hover accent hover --brand-accent-active accent pressed --brand-accent-muted accent tint (soft fills, active nav) --brand-on-accent text/icon ON the accent colour --brand-dark dark surface (footer, inverted panels) --brand-gradient-a dark-gradient start (text on it = white) --brand-gradient-b dark-gradient end (text on it = white) --brand-gradient-light-a light-gradient start (text = dark/white, btn = white) --brand-gradient-light-b light-gradient end --brand-accent-ink accent as TEXT/ICON on light surfaces — must clear 4.5:1 on white AND on --brand-background-body. Defaults to --brand-accent; override when the accent is too light to read (e.g. a gold). --brand-logo full wordmark for LIGHT backgrounds (url) --brand-logo-on-dark full wordmark for DARK backgrounds (url) --brand-font-display display family stack (hero/oversized type) --brand-font-heading heading family stack --brand-font-body body/UI/label family stack --brand-font-code monospace/code family stack NOTE ON FONTS: brand knobs only SELECT the family. The actual font FILES are loaded statically by tokens/fonts.css (@import) and cannot be scoped by data-brand — so every brand's fonts load on every page. When you add a brand with new fonts, add its @import line to fonts.css too. To load only one brand's fonts, drop a per-page in that template instead. ============================================================================ */ /* --------------------------------------------------------------------------- DEFAULT BRAND — Montivory (used when no data-brand is set) FOR: montivory.com ONLY — this is the design system's own brand set. --------------------------------------------------------------------------- */ :root { --brand-accent: var(--mtvr-mont-blue-100); /* #0064f0 */ --brand-accent-hover: var(--mtvr-mont-blue-80); /* #3383f3 */ --brand-accent-active: var(--mtvr-button-primary-press); /* #004db9 */ --brand-accent-muted: var(--mtvr-mont-blue-20); /* #cce0fc */ /* Ink for accent TEXT, links, icons and badge labels — not the fill colour. Mont Blue itself is only 3.83:1 on the accent-muted fill (#cce0fc), which fails AA for the navy Badge, accent Chip and any accent label on a tint. The press step is 5.66:1 there and 7.60:1 on white, and is already in the ramp, so nothing new is introduced. Fills stay --brand-accent. */ --brand-accent-ink: var(--mtvr-button-primary-press); /* #004db9 */ --brand-on-accent: var(--mtvr-white); --brand-dark: var(--mtvr-navy-100); /* #182b45 */ --brand-background-body: var(--mtvr-ivory); /* #eeefef */ --brand-gradient-a: #182b45; --brand-gradient-b: #0064f0; --brand-gradient-light-a: #0064f0; --brand-gradient-light-b: #00c8ff; /* 3-stop: navy-800 -> Mont Blue -> neutral-50 (dark top, light bottom). */ --brand-gradient-tri-full: linear-gradient(135deg, var(--navy-800) 0%, var(--mtvr-mont-blue-100) 55%, var(--neutral-50) 100%); /* @kind other */ --brand-gradient-hero: radial-gradient(120% 120% at 82% 0%, #e3edfd 0%, #ffffff 60%); /* @kind other */ /* This brand sets no rail knob — every brand shares the Mont Blue nav wash defined at :root below. Set --brand-gradient-sidebar here to opt out. */ --brand-logo: url('../assets/montivory-full-color.png'); /* @kind other */ --brand-logo-on-dark: url('../assets/montivory-full-white.png'); /* @kind other */ --brand-mark: url('../assets/montivory-mark-color.png'); /* @kind other */ --brand-mark-on-dark: url('../assets/montivory-mark-white.png'); /* @kind other */ /* Geist carries no Thai glyphs, so the browser falls back per CHARACTER to Noto Sans Thai — Latin stays Geist, Thai renders Noto, mixed lines split correctly, and no lang attribute or JS is involved. */ --brand-font-display: 'Geist', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --brand-font-heading: 'Geist', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --brand-font-body: 'Geist', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --brand-font-code: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* Montivory's friendly gradient names (alias the neutral slots below). */ --gradient-navy: var(--gradient-primary); /* @kind other */ --gradient-blue: var(--gradient-secondary); /* @kind other */ --gradient-navy-blue: var(--gradient-tertiary); /* @kind other */ } /* --------------------------------------------------------------------------- ADD A SITE HERE — copy the template, rename the key to the real site, set the 12 knobs, drop its logos in assets/, keep the "FOR: ONLY" comment. Uncomment to activate. [data-brand="site-key"] { --brand-accent: #......; --brand-accent-hover: #......; --brand-accent-active: #......; --brand-accent-muted: #......; --brand-on-accent: #ffffff; --brand-dark: #......; --brand-gradient-a: #......; --brand-gradient-b: #......; --brand-gradient-light-a: #......; --brand-gradient-light-b: #......; --brand-logo: --brand-logo-on-dark: --brand-font-display: 'Site Display', Georgia, serif; (optional; defaults to heading) --brand-font-heading: 'Site Serif', Georgia, serif; --brand-font-body: 'Site Sans', -apple-system, sans-serif; --brand-font-code: 'Site Mono', ui-monospace, monospace; } --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- Montivory Primary — Montivory with a serif voice. FOR: montivory-primary ONLY Identical to Montivory in every respect (accent, gradients, logos, spacing) EXCEPT display + heading type, which becomes Libre Baskerville. Nothing else is redeclared, so this brand inherits :root and cannot drift from Montivory. Libre Baskerville carries no Thai glyphs, so Noto Sans Thai follows it in the stack and Thai headings fall back per character, as elsewhere in the system. Libre Baskerville also runs large for its point size and ships only 400/700 — the optical-size and weight corrections are in typography.css, scoped here. --------------------------------------------------------------------------- */ /* The second selector is load-bearing, not decorative: dark.css's [data-theme="light"] restoration block ties with [data-brand="x"] on specificity and loads later, so a same-element pairing (, how the showcase and every template render) would repaint this brand in Montivory blue without it. */ [data-brand="montivory-primary"], [data-brand="montivory-primary"][data-theme="light"] { --brand-font-display: 'Libre Baskerville', 'Noto Sans Thai', Georgia, 'Times New Roman', serif; --brand-font-heading: 'Libre Baskerville', 'Noto Sans Thai', Georgia, 'Times New Roman', serif; } /* --------------------------------------------------------------------------- Mind — second brand. FOR: mind ONLY Fonts: Noto Sans Thai across headings/body/code (Thai + Latin). Logos: full wordmark + logomark, colour (light) & white (dark). --------------------------------------------------------------------------- */ /* The second selector is load-bearing, not decorative: dark.css's [data-theme="light"] restoration block ties with [data-brand="x"] on specificity and loads later, so a same-element pairing (, how the showcase and every template render) would repaint this brand in Montivory blue without it. */ [data-brand="mind"], [data-brand="mind"][data-theme="light"] { --brand-accent: #9236eb; --brand-accent-hover: #a355ef; /* derived: accent + ~14% white */ --brand-accent-active: #7a24c6; /* derived: accent + ~18% black */ --brand-accent-muted: #f6edff; --brand-on-accent: #ffffff; /* white — passes contrast on #9236eb */ /* Accent as TEXT: the fill is 4.68:1 on its own muted tint — under the floor for the accent Badge/Chip — so the press step serves as the ink (7.25:1 on white, 6.38:1 on the tint). Declared explicitly rather than left to the var(--brand-accent-ink, …) fallback: dark.css's light-restoration block supplies Montivory's #004db9 to any brand that omits this knob. */ --brand-accent-ink: #7a24c6; --brand-dark: #350a62; --brand-background-body: var(--neutral-50); /* #f2f2f2 */ --brand-gradient-a: #9236eb; --brand-gradient-b: #5207a2; --brand-gradient-light-a: #9236eb; /* fallback endpoints (unused: full below) */ --brand-gradient-light-b: #b483ea; --brand-gradient-light-full: linear-gradient(135deg, #9236eb 0%, #2e06ff 50%, #b483ea 100%); /* @kind other */ /* Mind's friendly gradient names (mind-only) — alias the neutral slots. */ --gradient-purple: var(--gradient-primary); /* @kind other */ --gradient-ai: var(--gradient-secondary); /* @kind other */ --brand-gradient-tri-full: linear-gradient(135deg, #350a62 0%, #9236eb 55%, var(--neutral-50) 100%); /* @kind other */ --brand-gradient-hero: radial-gradient(120% 120% at 82% 0%, #f6edff 0%, #ffffff 60%); /* @kind other */ /* Nav washes: without these Mind inherits the Mont Blue fallback in brands.css :root — a blue rail in a purple brand. The foot stops at #efe2ff, the deepest purple tint that still carries BOTH normal inks (secondary #666 is 4.65:1 there, primary 14.08:1), so Mind needs no --on-gradient-wash-muted override the way Montivory's darker blue foot does. */ --brand-gradient-sidebar: linear-gradient(160deg, #ffffff 0%, #ffffff 50%, #efe2ff 100%); /* @kind other */ --brand-gradient-nav-bar: linear-gradient(100deg, #ffffff 0%, #ffffff 50%, #efe2ff 100%); /* @kind other */ /* Logos: full wordmark + logomark, colour (light bg) & white (dark bg). */ --brand-logo: url('../assets/mind-full-color.png'); /* @kind other */ --brand-logo-on-dark: url('../assets/mind-full-white.png'); /* @kind other */ --brand-mark: url('../assets/mind-mark-color.png'); /* @kind other */ --brand-mark-on-dark: url('../assets/mind-mark-white.png'); /* @kind other */ --brand-font-heading: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --brand-font-body: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --brand-font-code: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* --------------------------------------------------------------------------- Beacon — third brand (GEO / AI-citation platform). FOR: beacon ONLY Gold accent on a cool-ink neutral. Fonts: Noto Sans Thai across display/headings/body (Thai + Latin). Logos: full wordmark + logomark, colour (light) & white (dark) — SVG. --------------------------------------------------------------------------- */ /* The second selector is load-bearing, not decorative: dark.css's [data-theme="light"] restoration block ties with [data-brand="x"] on specificity and loads later, so a same-element pairing (, how the showcase and every template render) would repaint this brand in Montivory blue without it. */ [data-brand="beacon"], [data-brand="beacon"][data-theme="light"] { --brand-accent: #f5a623; /* gold 500 */ --brand-accent-hover: #f7bc4e; /* gold 400 */ --brand-accent-active: #d98e12; /* gold 600 */ --brand-accent-muted: #fdecd0; /* gold 100 */ --brand-on-accent: #241a02; /* ink on gold — gold is too light for white */ --brand-accent-ink: #82540c; /* gold 800 — 6.5:1 on white, 6.0:1 on #f5f6fb (gold 500 is only 2.0:1) */ --brand-dark: #14161f; /* cool ink 900 */ --brand-background-body: #f5f6fb; /* cool ivory */ --brand-gradient-a: #14161f; --brand-gradient-b: #0a0f1e; --brand-gradient-light-a: #f5a623; --brand-gradient-light-b: #ffbe57; --brand-gradient-tri-full: linear-gradient(135deg, #fdecd0 0%, #ffffff 100%); /* @kind other */ --brand-gradient-hero: radial-gradient(120% 120% at 82% 0%, #fdecd0 0%, #ffffff 60%); /* @kind other */ /* Nav washes: without these Beacon inherits the Mont Blue fallback in brands.css :root — a blue rail in a gold brand. The foot is the brand's own accent tint, which still carries BOTH normal inks (secondary #666 is 4.94:1 there, primary 14.99:1), so no --on-gradient-wash-muted override. */ --brand-gradient-sidebar: linear-gradient(160deg, #ffffff 0%, #ffffff 50%, #fdecd0 100%); /* @kind other */ --brand-gradient-nav-bar: linear-gradient(100deg, #ffffff 0%, #ffffff 50%, #fdecd0 100%); /* @kind other */ /* Beacon's friendly gradient names (beacon-only) — alias the neutral slots. */ --gradient-night: var(--gradient-primary); /* @kind other */ --gradient-gold: var(--gradient-secondary); /* @kind other */ --gradient-wash: var(--gradient-tertiary); /* @kind other */ /* Beacon's gradients are light at every stop (gold → light gold, then a near-white wash), so both secondary and tertiary carry dark ink — there is no dark end for white to sit on, unlike Montivory's navy→blue and Mind's purple ramps. */ --on-gradient-secondary: var(--brand-dark); --on-gradient-secondary-alt: var(--brand-dark); --on-gradient-secondary-button: var(--brand-dark); --on-gradient-tertiary: var(--brand-dark); --on-gradient-tertiary-alt: var(--brand-dark); --on-gradient-tertiary-button: var(--brand-dark); /* Logos: full wordmark + logomark, colour (light bg) & white (dark bg). */ --brand-logo: url('../assets/beacon-full-color.svg'); /* @kind other */ --brand-logo-on-dark: url('../assets/beacon-full-white.svg'); /* @kind other */ --brand-mark: url('../assets/beacon-mark-color.svg'); /* @kind other */ --brand-mark-on-dark: url('../assets/beacon-mark-white.svg'); /* @kind other */ --brand-font-display: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --brand-font-heading: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --brand-font-body: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* --------------------------------------------------------------------------- Scorecard — fourth brand. FOR: scorecard ONLY Deep teal anchor with a bright mint accent. The mint is very light (1.83:1 against white), so on-accent ink is the anchor teal rather than white, and accent TEXT uses the anchor too — the fill is unusable as ink. The second green #3bae91 drives the press step and the gradient's mid stop. --------------------------------------------------------------------------- */ /* The second selector is load-bearing, not decorative: dark.css's [data-theme="light"] restoration block ties with [data-brand="x"] on specificity and loads later, so a same-element pairing (, how the showcase and every template render) would repaint this brand in Montivory blue without it. */ [data-brand="scorecard"], [data-brand="scorecard"][data-theme="light"] { --brand-accent: #22d8a9; /* brand secondary 2 — the button/CTA fill */ --brand-accent-hover: #3fe0b7; /* +14% white */ --brand-accent-active: #3bae91; /* brand secondary — the press step */ --brand-accent-muted: #e4faf5; /* accent at 12% — tint for badges/chips */ --brand-on-accent: #0c353b; /* anchor teal on the mint — 7.22:1; white is 1.83:1 and unusable */ /* Segmented control's active tab uses the same ink as buttons. */ --color-segmented-active-fg: #0c353b; /* Input hover + focus outlines follow the brand, not the upstream blue. */ --color-input-border-hover: #3bae91; --color-input-border-focus: #0c353b; --color-focus-ring: #0c353b; /* Accent as TEXT: the fill is unreadable as ink (1.83:1 on white), and even the darker #3bae91 only reaches 2.75:1 — so the anchor serves as the ink (13.22:1 on white, 11.80:1 on the muted tint). Using the brand's own primary beats inventing an intermediate green. */ --brand-accent-ink: #0c353b; --brand-dark: #0c353b; /* brand primary — inverted surfaces, gradient end */ --brand-background-body: #ececec; /* brand background */ /* Supplied gradients. primary = the anchor, dark→darker: a light→dark primary cannot carry a single label ink, and Sidebar's `primary` tone (its default) maps every ink to --on-gradient-primary, so one end would land at 1:1. secondary = the two greens, mint → teal green. */ --brand-gradient-a: #0c353b; --brand-gradient-b: #072023; --brand-gradient-light-a: #22d8a9; --brand-gradient-light-b: #3bae91; --brand-gradient-tri-full: linear-gradient(135deg, #0c353b 0%, #3bae91 55%, #22d8a9 100%); /* @kind other */ --brand-gradient-hero: radial-gradient(120% 120% at 82% 0%, #e4faf5 0%, #ececec 60%); /* @kind other */ /* Nav washes: without these the brand inherits the Mont Blue fallback below — a blue rail in a teal brand. The foot stops at #e4faf5, which still carries BOTH normal inks (secondary #666 is 5.27:1 there, primary 15.99:1), so no --on-gradient-wash-muted override is needed. */ --brand-gradient-sidebar: linear-gradient(160deg, #ffffff 0%, #ffffff 50%, #e4faf5 100%); /* @kind other */ --brand-gradient-nav-bar: linear-gradient(100deg, #ffffff 0%, #ffffff 50%, #e4faf5 100%); /* @kind other */ /* Friendly names (scorecard only). */ --gradient-teal: var(--gradient-primary); /* @kind other */ --gradient-mint: var(--gradient-secondary); /* @kind other */ /* The secondary gradient is light at both stops (mint → teal green), so it carries dark ink — there is no dark end for white to sit on, unlike the primary. The primary is dark throughout, so white reads at 13.22:1+. */ --on-gradient-secondary: var(--brand-dark); --on-gradient-secondary-alt: var(--brand-dark); --on-gradient-secondary-button: var(--brand-dark); /* Link colour is the anchor, not the accent — the mint is unreadable as text on a light surface. */ --color-text-link: #0c353b; /* The upstream Island Green ramp (#00e678) is a different green from this brand's mint. Re-point it inside this scope so nothing under data-brand="scorecard" can render the old green — categorical chart series, tags and any consumer still reading the ramp all follow the brand. */ --mtvr-green-100: #22d8a9; --mtvr-green-80: #4ee0bb; --mtvr-green-60: #7ae8cc; --mtvr-green-40: #a7f0de; --mtvr-green-20: #e4faf5; /* Logos: full wordmark + logomark, colour (light bg) & white (dark bg). */ --brand-logo: url('../assets/scorecard-full-color.png'); /* @kind other */ --brand-logo-on-dark: url('../assets/scorecard-full-white.png'); /* @kind other */ --brand-mark: url('../assets/scorecard-mark-color.png'); /* @kind other */ --brand-mark-on-dark: url('../assets/scorecard-mark-white.png'); /* @kind other */ --brand-font-display: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --brand-font-heading: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --brand-font-body: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ============================================================================ WIRING — semantic aliases point at the brand knobs. Declared on BOTH :root and [data-brand] so the var(--brand-*) references RECOMPUTE on each branded element. (A custom property that references a brand knob resolves at its declaring element and then inherits frozen — so if this only ran at :root, a [data-brand] override of the raw knobs would never reach the semantic aliases. Re-declaring here on [data-brand] forces recomputation with that brand's knobs.) Do NOT edit per site; only change the [data-brand] knobs above. ============================================================================ */ :root, [data-brand] { --color-accent: var(--brand-accent); --color-accent-hover: var(--brand-accent-hover); --color-accent-active: var(--brand-accent-active); --color-accent-muted: var(--brand-accent-muted); --color-on-accent: var(--brand-on-accent); /* Accent as TEXT/ICON on light surfaces — a light accent (gold) needs a darker ink than the fill colour to stay readable. Falls back to the accent itself, so brands with a dark accent are unaffected. */ --color-text-accent: var(--brand-accent-ink, var(--brand-accent)); --color-text-link: var(--brand-accent-ink, var(--brand-accent)); --color-icon-accent: var(--brand-accent-ink, var(--brand-accent)); --color-focus-ring: var(--brand-accent-ink, var(--brand-accent)); --color-background-inverted: var(--brand-dark); --color-background-body: var(--brand-background-body); /* Font families follow the brand too (recompute per [data-brand]). */ --font-family-body: var(--brand-font-body); --font-family-heading: var(--brand-font-heading); --font-family-display: var(--brand-font-display, var(--brand-font-heading)); --font-family-code: var(--brand-font-code); /* Brand-agnostic gradient SLOTS (used by shared components e.g. ). Each brand exposes friendly aliases pointing here: Montivory -> --gradient-navy / --gradient-blue Mind -> --gradient-purple / --gradient-ai primary = strong/first gradient (text & buttons on it MUST be white). secondary = softer/second gradient (text = brand-dark or white; btn white). Two-endpoint knobs by default; a brand may set --brand-gradient-dark-full / --brand-gradient-light-full to a complete gradient (e.g. 3+ stops). */ --gradient-primary: var(--brand-gradient-dark-full, linear-gradient(135deg, var(--brand-gradient-a) 0%, var(--brand-gradient-b) 100%)); --gradient-secondary: var(--brand-gradient-light-full, linear-gradient(135deg, var(--brand-gradient-light-a) 0%, var(--brand-gradient-light-b) 100%)); --gradient-tertiary: var(--brand-gradient-tri-full, var(--gradient-secondary)); --gradient-hero: var(--brand-gradient-hero, radial-gradient(120% 120% at 82% 0%, var(--brand-accent-muted) 0%, var(--color-background-surface) 60%)); /* NAV WASH — shared by every brand, not derived from the brand accent: white for the first half, then a slightly diagonal ramp into Mont Blue. The ramp stops at Mont Blue 20 so the dark inks still clear 4.5:1 at the foot; a saturated end needs gradient="primary" and its inverted ink set instead. A brand can still opt out by setting --brand-gradient-sidebar. -sidebar = tall rails (near-vertical); -nav-bar = wide short bars, where the same angle would compress into a 64px-tall band and read as a hard edge. */ --gradient-sidebar: var(--brand-gradient-sidebar, linear-gradient(160deg, var(--mtvr-white) 0%, var(--mtvr-white) 50%, var(--mtvr-mont-blue-20) 100%)); --gradient-nav-bar: var(--brand-gradient-nav-bar, linear-gradient(100deg, var(--mtvr-white) 0%, var(--mtvr-white) 50%, var(--mtvr-mont-blue-20) 100%)); /* Logo semantic aliases — components reference these, not the raw knobs. full = wordmark (header/footer); mark = logomark (favicon/mobile). -on-dark variants for dark surfaces. */ --logo-full: var(--brand-logo); --logo-full-on-dark: var(--brand-logo-on-dark); --logo-mark: var(--brand-mark); --logo-mark-on-dark: var(--brand-mark-on-dark); }