/* ============================================================ WEBSITE CREATOR — brands.css Applyable brand kits. Each just overrides the accent tokens (and sometimes fonts), so it layers on TOP of any light/dark theme. ------------------------------------------------------------ APPLY: Then use the matching background base + palette + ornaments noted on each kit. Add a new client by copying a block below. Load brands.css LAST (after tokens.css) so it wins. ============================================================ */ /* neutral = the kit's own neon identity (this is also the default in tokens.css) */ :root[data-brand="neutral"]{ --brand:#00e5ff; --brand-2:#a855f7; --accent:#ff2d95; --on-brand:#04121a; /* bg: mesh-ink / mesh-plasma · particles: neon/cyber · ornaments: #ic-* */ } /* ---- Géomission — forest green · gold · sunrise (eco / outdoors / adventure) ---- */ :root[data-brand="geomission"]{ --brand:#42AE01; --brand-2:#205C00; --accent:#FFCF06; --on-brand:#0a2400; --brand-grad:linear-gradient(92deg,#42AE01,#205C00 60%,#FFCF06); /* bg: mesh-forest / mesh-sunrise-sky + rays · particles: forest/sunrise ornaments: #gm-sunburst #gm-wordmark · glow-gold / glow-green palette: forest #205C00 · grass #42AE01 · gold #FFCF06 · red accent #ED2900 */ } /* ---- Jess · Mary Kay — pink · gold (beauty / luxury / feminine) ---- */ :root[data-brand="jess"]{ --brand:#e5348a; --brand-2:#c81e6f; --accent:#d4af37; --on-brand:#fff; --brand-grad:linear-gradient(100deg,#bd8f3e,#f0d79c 45%,#fff7e6,#f0d79c 60%,#bd8f3e); --serif:'Playfair Display',Georgia,'Times New Roman',serif; /* bg: mesh-blush + damask + beam · particles: goldPink/gold ornaments: #heart-emblem #flourish #floral-spray #bloom · glow-gold */ } /* ============ generic ready-to-use palettes (fast starts) ============ */ /* ocean — trustworthy SaaS / tech / finance */ :root[data-brand="ocean"]{ --brand:#00b4ff; --brand-2:#0066ff; --accent:#00ffc8; --on-brand:#00121c; --brand-grad:linear-gradient(92deg,#00b4ff,#0066ff 60%,#00ffc8); /* bg: mesh-ocean · particles: cyber · pattern: waves/graph */ } /* sunset — warm / creative / hospitality */ :root[data-brand="sunset"]{ --brand:#ff7828; --brand-2:#ff2d78; --accent:#ffd166; --on-brand:#1c0a00; --brand-grad:linear-gradient(92deg,#ff7828,#ff2d78 60%,#ffd166); /* bg: mesh-ember · particles: ember (mode:rise) · beam */ } /* royal — premium / editorial / fashion */ :root[data-brand="royal"]{ --brand:#a855f7; --brand-2:#7c3aed; --accent:#e2c17c; --on-brand:#12061f; --brand-grad:linear-gradient(92deg,#a855f7,#7c3aed 60%,#e2c17c); --serif:'Playfair Display',Georgia,serif; /* bg: mesh-royal / mesh-nebula · ornaments: #flourish #divider */ } /* forest — organic / wellness / sustainability */ :root[data-brand="forest"]{ --brand:#3f9f66; --brand-2:#1f6d43; --accent:#e8c170; --on-brand:#04180d; --brand-grad:linear-gradient(92deg,#3f9f66,#1f6d43 60%,#e8c170); /* bg: mesh-emerald · particles: emerald */ } /* mono — minimal / architecture / photography (accent = ink/paper) */ :root[data-brand="mono"]{ --brand:#e6e8ef; --brand-2:#9aa0b4; --accent:#00e5ff; --on-brand:#0a0a12; --brand-grad:linear-gradient(92deg,#e6e8ef,#9aa0b4); /* bg: mesh-noir / mesh-daylight · pattern: graph/diagonal */ } :root[data-theme="light"][data-brand="mono"]{ --brand:#1a1d28; --brand-2:#4a5065; --on-brand:#fff; } /* ============ themed style kits (v4) — drive the Builder's Style wheel ============ */ :root[data-brand="gothic"]{ --brand:#c0304a; --brand-2:#7a0f26; --accent:#c9a227; --on-brand:#fff; --brand-grad:linear-gradient(92deg,#c0304a,#7a0f26 60%,#c9a227); --serif:'Playfair Display',Georgia,serif; } :root[data-brand="nature"]{ --brand:#6aa73a; --brand-2:#3d6b1f; --accent:#d8a24a; --on-brand:#0c1806; --brand-grad:linear-gradient(92deg,#6aa73a,#3d6b1f 60%,#d8a24a); } :root[data-brand="space"]{ --brand:#8b6bff; --brand-2:#4a2fb0; --accent:#00e5ff; --on-brand:#0a0820; --brand-grad:linear-gradient(92deg,#8b6bff,#4a2fb0 55%,#00e5ff); } :root[data-brand="waterfall"]{ --brand:#19c9dc; --brand-2:#0a7ba0; --accent:#bff7ff; --on-brand:#03141a; --brand-grad:linear-gradient(92deg,#19c9dc,#0a7ba0 60%,#bff7ff); } :root[data-brand="cyberpunk"]{ --brand:#00e5ff; --brand-2:#ff2d95; --accent:#f7ff00; --on-brand:#08030f; --brand-grad:linear-gradient(92deg,#00e5ff,#ff2d95 55%,#f7ff00); } :root[data-brand="crypto"]{ --brand:#f7c948; --brand-2:#16b364; --accent:#ffffff; --on-brand:#12140c; --brand-grad:linear-gradient(92deg,#f7c948,#16b364 60%,#a8f0c8); } /* ---- Bitcoin — official orange #F7931A (used by BTC Trading Console) ---- */ :root[data-brand="bitcoin"]{ --brand:#F7931A; --brand-2:#e07d0c; --accent:#ffc266; --on-brand:#1a0c00; --brand-grad:linear-gradient(92deg,#F7931A,#ffb84d 55%,#ff8a1a); /* bg: mesh-ember · particles: ember/gold · watermark: bitcoin coin mark */ } :root[data-brand="spring"]{ --brand:#5bc46b; --brand-2:#e56aa8; --accent:#ffcf5a; --on-brand:#0c2010; --brand-grad:linear-gradient(92deg,#5bc46b,#e56aa8 60%,#ffcf5a); } :root[data-brand="winter"]{ --brand:#4f97d8; --brand-2:#2b5a8a; --accent:#9fd0ff; --on-brand:#eaf6ff; --brand-grad:linear-gradient(92deg,#4f97d8,#2b5a8a 60%,#9fd0ff); } :root[data-theme="light"][data-brand="winter"]{ --on-brand:#06253f; } :root[data-brand="summer"]{ --brand:#ff9e2c; --brand-2:#ff5e5e; --accent:#22c3ff; --on-brand:#241000; --brand-grad:linear-gradient(92deg,#ff9e2c,#ff5e5e 55%,#22c3ff); } :root[data-brand="angelic"]{ --brand:#d9b24a; --brand-2:#b8912f; --accent:#8fb4ff; --on-brand:#2a2410; --brand-grad:linear-gradient(92deg,#e9c96a,#d9b24a 50%,#cfd8ff); --serif:'Playfair Display',Georgia,serif; } /* ---- TruScan — verification teal (trust / security / scanning / truth) ---- */ :root[data-brand="truscan"]{ --brand:#34c2d1; --brand-2:#1f8f9c; --accent:#5fe0ef; --on-brand:#04222a; --brand-grad:linear-gradient(92deg,#34c2d1,#1f8f9c 55%,#5fe0ef); /* bg: mesh-ocean / mesh-noir + scanlines + grid-neon · particles: snow (mode:fall) / cyber ornaments: #ts-scan #ts-cam #ts-mic #ts-shield #ts-qr #ts-wave · glow-cyan · .scanbeam mono-data font pairs well: system-ui headings + ui-monospace for scores/timecodes */ }