/* * Optional color variants for the Kreante assessment. * Activated by setting `` or ``. * Default (no attribute) keeps the original Kreante indigo + gold palette. * * The overrides only touch the design tokens that already exist as CSS variables * in the assessment + hub stylesheets, plus a couple of hardcoded surfaces that * are used on backgrounds the theme repaints. */ /* ---------- Variant A: lime (energetic, agro-tech green) ---------- */ html[data-theme="lime"] { --bg: #F4F8E8; --panel: #ffffff; --ink: #14271A; --ink-soft: #2A3E2A; --muted: #5F6F5C; --line: #D7E3C9; --teal-900: #1A4D20; --teal-700: #2F7233; --teal-500: #4FA858; --teal-300: #BFE2A7; --teal-200: #D6EEC2; --teal-100: #ECF7DD; --gold: #65C400; --stage1: #ECF7DD; --stage2: #D6EEC2; --stage3: #BFE2A7; --stage4: #4FA858; --stage5: #1A4D20; --shadow: 0 8px 30px rgba(20, 39, 26, 0.10); } html[data-theme="lime"] .btn-primary:hover { background: #0F3415; } html[data-theme="lime"] .matrix td.cell.s1 { background: #ECF7DD; } html[data-theme="lime"] .matrix td.cell.s2 { background: #D6EEC2; } html[data-theme="lime"] .matrix td.cell.s3 { background: #BFE2A7; } html[data-theme="lime"] .matrix td.cell.s4 { background: #4FA858; color: white; } html[data-theme="lime"] .matrix td.cell.s5 { background: #1A4D20; color: white; } html[data-theme="lime"] .lead-fade { background: linear-gradient(180deg, rgba(244,248,232,0) 0%, rgba(244,248,232,0.55) 60%, rgba(244,248,232,0.9) 100%) !important; } html[data-theme="lime"] .magnet-card:hover { box-shadow: 0 12px 38px rgba(20, 39, 26, 0.18); } html[data-theme="lime"] .hub-footer a { border-bottom-color: #BFE2A7; } /* ---------- Variant B: sunset (warm aubergine + coral) ---------- */ html[data-theme="sunset"] { --bg: #FFF3EC; --panel: #ffffff; --ink: #2A0E2E; --ink-soft: #4A2150; --muted: #8A6F7A; --line: #F1D9CB; --teal-900: #3A0D3A; --teal-700: #6A2570; --teal-500: #9B4DA0; --teal-300: #DBB8DC; --teal-200: #EBD2EC; --teal-100: #F8E8F5; --gold: #FF6A3D; --stage1: #F8E8F5; --stage2: #EBD2EC; --stage3: #DBB8DC; --stage4: #9B4DA0; --stage5: #3A0D3A; --shadow: 0 8px 30px rgba(58, 13, 58, 0.12); } html[data-theme="sunset"] .btn-primary:hover { background: #20061F; } html[data-theme="sunset"] .matrix td.cell.s1 { background: #F8E8F5; } html[data-theme="sunset"] .matrix td.cell.s2 { background: #EBD2EC; } html[data-theme="sunset"] .matrix td.cell.s3 { background: #DBB8DC; } html[data-theme="sunset"] .matrix td.cell.s4 { background: #9B4DA0; color: white; } html[data-theme="sunset"] .matrix td.cell.s5 { background: #3A0D3A; color: white; } html[data-theme="sunset"] .lead-fade { background: linear-gradient(180deg, rgba(255,243,236,0) 0%, rgba(255,243,236,0.55) 60%, rgba(255,243,236,0.9) 100%) !important; } html[data-theme="sunset"] .magnet-card:hover { box-shadow: 0 12px 38px rgba(58, 13, 58, 0.18); } html[data-theme="sunset"] .hub-footer a { border-bottom-color: #DBB8DC; } /* ---------- Variant C: kreante-dark (presentation-style, Kreante purple) ---------- */ html[data-theme="kreante-dark"] { color-scheme: dark; --bg: #0F0A1F; --panel: #1A1340; --ink: #F5F0FF; --ink-soft: #D4CCE8; --muted: #9C92BC; --line: rgba(245, 240, 255, 0.12); --teal-900: #E5DAFF; --teal-700: #C8B5FF; --teal-500: #A78BFF; --teal-300: rgba(199, 181, 255, 0.50); --teal-200: rgba(199, 181, 255, 0.25); --teal-100: rgba(107, 78, 230, 0.18); --gold: #C8FF3D; --stage1: rgba(199, 181, 255, 0.10); --stage2: rgba(199, 181, 255, 0.20); --stage3: rgba(199, 181, 255, 0.35); --stage4: #6B4EE6; --stage5: #4A36A8; --shadow: 0 8px 30px rgba(0, 0, 0, 0.5); } /* Surfaces flip to deep indigo */ html[data-theme="kreante-dark"] .panel, html[data-theme="kreante-dark"] .lead-gate, html[data-theme="kreante-dark"] .rec-card, html[data-theme="kreante-dark"] .modal-card, html[data-theme="kreante-dark"] .magnet-card { background: #1A1340 !important; border-color: rgba(199, 181, 255, 0.18); } html[data-theme="kreante-dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.7); } html[data-theme="kreante-dark"] .lead-gate { background: linear-gradient(180deg, #1A1340 0%, #241B4F 100%); } /* Primary CTA, active language pill, etc. — Kreante purple instead of var(--teal-900) */ html[data-theme="kreante-dark"] .btn-primary, html[data-theme="kreante-dark"] .lang-switch button.active, html[data-theme="kreante-dark"] .hub-lang button.active, html[data-theme="kreante-dark"] .theme-switch button.active, html[data-theme="kreante-dark"] .toast { background: #6B4EE6 !important; color: #fff !important; border-color: #6B4EE6 !important; } html[data-theme="kreante-dark"] .btn-primary:hover { background: #5A3FC4 !important; } html[data-theme="kreante-dark"] .btn-ghost { color: #C8B5FF; border-color: rgba(199, 181, 255, 0.25); } html[data-theme="kreante-dark"] .btn-ghost:hover { background: rgba(107, 78, 230, 0.15); } /* Form fields */ html[data-theme="kreante-dark"] input, html[data-theme="kreante-dark"] select, html[data-theme="kreante-dark"] textarea { background: #241B4F !important; color: #F5F0FF !important; border-color: rgba(199, 181, 255, 0.20) !important; } html[data-theme="kreante-dark"] .size-pills label { background: #241B4F; color: #D4CCE8; border-color: rgba(199, 181, 255, 0.20); } html[data-theme="kreante-dark"] .size-pills input:checked + label { background: #6B4EE6; color: #fff; border-color: #6B4EE6; } /* Option cards */ html[data-theme="kreante-dark"] .option { background: #241B4F; border-color: transparent; } html[data-theme="kreante-dark"] .option .stage-num { background: #1A1340; color: #C8B5FF; border-color: rgba(199, 181, 255, 0.30); } html[data-theme="kreante-dark"] .option:hover:not(.selected) { border-color: #A78BFF; } html[data-theme="kreante-dark"] .option.selected { background: rgba(107, 78, 230, 0.22); border-color: #6B4EE6; } html[data-theme="kreante-dark"] .option.selected .stage-num { background: #6B4EE6; color: #fff; border-color: #6B4EE6; } html[data-theme="kreante-dark"] .option .stage-desc { color: #F5F0FF; } /* Score hero stays a purple gradient (already brand-friendly) */ html[data-theme="kreante-dark"] .score-hero { background: linear-gradient(135deg, #6B4EE6, #4F8EF7) !important; } /* Matrix cells */ html[data-theme="kreante-dark"] .matrix th { background: var(--teal-100); color: #F5F0FF; } html[data-theme="kreante-dark"] .matrix th.row { background: #6B4EE6; color: #fff; } html[data-theme="kreante-dark"] .matrix td.cell.s1 { background: rgba(199, 181, 255, 0.10); color: #F5F0FF; } html[data-theme="kreante-dark"] .matrix td.cell.s2 { background: rgba(199, 181, 255, 0.18); color: #F5F0FF; } html[data-theme="kreante-dark"] .matrix td.cell.s3 { background: rgba(199, 181, 255, 0.32); color: #F5F0FF; } html[data-theme="kreante-dark"] .matrix td.cell.s4 { background: #6B4EE6; color: #fff; } html[data-theme="kreante-dark"] .matrix td.cell.s5 { background: #4A36A8; color: #fff; } /* Lead-gate fade overlay */ html[data-theme="kreante-dark"] .lead-fade { background: linear-gradient(180deg, rgba(15,10,31,0) 0%, rgba(15,10,31,0.65) 60%, rgba(15,10,31,0.95) 100%) !important; } /* Brand sep + lang pill chrome */ html[data-theme="kreante-dark"] .brand-sep { background: rgba(199, 181, 255, 0.25); } html[data-theme="kreante-dark"] .lang-switch, html[data-theme="kreante-dark"] .hub-lang { background: rgba(255, 255, 255, 0.04); border-color: rgba(199, 181, 255, 0.18); box-shadow: none; } html[data-theme="kreante-dark"] .theme-switch { background: rgba(255, 255, 255, 0.04); border-color: rgba(199, 181, 255, 0.18); box-shadow: none; } /* Hub card hover */ html[data-theme="kreante-dark"] .magnet-card:hover { box-shadow: 0 12px 38px rgba(0, 0, 0, 0.6); transform: translateY(-2px); } html[data-theme="kreante-dark"] .magnet-time { background: rgba(107, 78, 230, 0.22); color: #C8B5FF; } html[data-theme="kreante-dark"] .hub-footer a { border-bottom-color: rgba(199, 181, 255, 0.4); } /* Theme switcher (hub only, hidden on assessments) */ .theme-switch { display: inline-flex; gap: 6px; background: rgba(255,255,255,0.6); border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: 0 8px 20px rgba(22, 2, 59, 0.08); } .theme-switch button { border: 0; background: transparent; border-radius: 999px; color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 7px 12px; text-transform: uppercase; transition: background 0.15s ease, color 0.15s ease; } .theme-switch button.active { background: var(--teal-900); color: #fff; }