/*! * consent-bar v1.3.0 - brand skins * * House-of-brands rule: operating brands do not inherit Hatched Stacks * visual DNA. What is shared here is the mechanism, not the look. Each * brand overrides tokens only. * * Apply with:
* or set data-cb-skin on and let it cascade. * * STATUS: only two brand kits under ~/social-ops/brands/ currently define * hex colors. The rest are placeholders and must be filled from the brand * kit before use. Do not guess brand colors here. */ /* --- thousand-oaks-brush-clearance -------------------------------- * * Source: ~/social-ops/brands/thousand-oaks-brush-clearance/kit/ * Deep chaparral green, ember accent, warm neutral ground. */ [data-cb-skin="brush-clearance"] { --cb-surface: #faf8f4; --cb-fg: #1d1b16; --cb-muted: #5d5a52; --cb-border: #ddd6c8; --cb-accent: #2f4d2c; --cb-accent-fg: #ffffff; --cb-accent-hover: #243a22; --cb-secondary-bg: transparent; --cb-secondary-fg: #243a22; --cb-secondary-border: #8b5a2b; --cb-focus: #7c2d12; --cb-radius: 6px; --cb-radius-sm: 5px; } /* --- california-adu-scout ----------------------------------------- * * Source: ~/social-ops/brands/california-adu-scout/kit/ * Deep pine to emerald ramp, cool neutral ground. */ [data-cb-skin="adu-scout"] { --cb-surface: #ffffff; --cb-fg: #10241f; --cb-muted: #4a5b56; --cb-border: #d5e0dc; --cb-accent: #0a4d39; --cb-accent-fg: #ffffff; --cb-accent-hover: #073f35; --cb-secondary-bg: transparent; --cb-secondary-fg: #0a4d39; --cb-secondary-border: #0f7355; --cb-focus: #096b51; --cb-radius: 10px; } /* --- neutral dark ------------------------------------------------- * * For brands running a dark site. Not brand-specific. */ [data-cb-skin="dark"] { --cb-surface: #12161a; --cb-fg: #f4f6f8; --cb-muted: #aab3bd; --cb-border: #29313a; --cb-accent: #ffffff; --cb-accent-fg: #12161a; --cb-accent-hover: #e6eaee; --cb-secondary-bg: transparent; --cb-secondary-fg: #f4f6f8; --cb-secondary-border: #4b555f; --cb-focus: #7ea6ff; --cb-overlay: rgba(0, 0, 0, .66); } [data-cb-skin="dark"] .cb-cat.is-locked { background: rgba(255, 255, 255, .04); } [data-cb-skin="dark"] .cb-switch-ui { background: #4b555f; } [data-cb-skin="dark"] .cb-close:hover { background: rgba(255, 255, 255, .08); } /* --- PLACEHOLDERS: fill from the brand kit before shipping --------- * pfas-free-kitchen, hatched-stacks, apto-tools * These three brand kits define no hex colors yet. Leaving them unstyled * is deliberate: an invented brand color is worse than a neutral one. * ------------------------------------------------------------------ */ /* --- deal-vetting (PROJ-0001, dealvetting.com) --------------------- * * Consumes the theme's own tokens and declares NO --dv-* property of * its own. Deal Vetting Design Standard v1.0 s3 makes * themes/deal-vetting/tokens.css the single definition site, and the * 2026-08-06 "two designs mashed together" defect was caused precisely * by a second file re-declaring --dv-* names. Do not add any here. * * Every var() carries a fallback so the notice still renders correctly * if it is ever loaded on a page where tokens.css did not load. * Fallbacks are the theme's DARK values, which is its default mode. */ [data-cb-skin="deal-vetting"] { --cb-font: var(--dv-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); --cb-surface: var(--dv-surface-raised, #18212b); --cb-fg: var(--dv-ink, #e6edf3); --cb-muted: var(--dv-ink-2, #b3c2cf); --cb-border: var(--dv-rule, #2a3742); --cb-accent: var(--dv-action, #2fe3c2); --cb-accent-fg: var(--dv-on-action, #04211c); --cb-accent-hover: var(--dv-action-hi, #5cf0d6); --cb-secondary-bg: transparent; --cb-secondary-fg: var(--dv-ink, #e6edf3); --cb-secondary-border: var(--dv-rule, #2a3742); --cb-focus: var(--dv-focus, #5cf0d6); --cb-radius: var(--dv-r-doc, 10px); --cb-radius-sm: var(--dv-r-control, 6px); --cb-overlay: rgba(4, 10, 14, .72); } /* The theme flips these tokens in light mode; the notice inherits that automatically because it reads the same variables. Only the neutral greys the component owns need a nudge. */ [data-cb-skin="deal-vetting"] .cb-cat.is-locked { background: var(--dv-surface-field, rgba(255,255,255,.04)); } [data-cb-skin="deal-vetting"] .cb-switch-ui { background: var(--dv-ink-3, #8a9baa); } [data-cb-skin="deal-vetting"] .cb-close:hover { background: var(--dv-surface-field, rgba(255,255,255,.08)); }