/* Tweak-driven theme overrides. App.jsx toggles classes on based on the Tweaks panel; this stylesheet gives each class concrete visual changes. */ /* ---- Brush accent ---------------------------------------------------- */ body.accent-teal .brush { color: var(--lcc-teal); } body.accent-teal .brush::after { background: var(--lcc-teal); } body.accent-sun .brush { color: #C88A14; } /* sun reads as warm amber for type */ body.accent-sun .brush::after { background: var(--lcc-sun); opacity: 0.25; } /* The "Next up" event-card glow follows accent too */ body.accent-teal .event-card.next { box-shadow: var(--shadow-3), 0 0 32px -8px rgba(45,169,161,0.45), 0 0 60px -12px rgba(45,169,161,0.35) !important; border-color: var(--lcc-teal-300) !important; } body.accent-teal .event-card.next .event-date-band::after { background: radial-gradient(circle, rgba(45,169,161,0.45) 0%, transparent 70%) !important; } body.accent-teal .event-badge { background: var(--lcc-teal); } body.accent-sun .event-card.next { box-shadow: var(--shadow-3), 0 0 32px -8px rgba(246,185,59,0.5), 0 0 60px -12px rgba(246,185,59,0.4) !important; border-color: rgba(246,185,59,0.6) !important; } body.accent-sun .event-card.next .event-date-band::after { background: radial-gradient(circle, rgba(246,185,59,0.55) 0%, transparent 70%) !important; } body.accent-sun .event-badge { background: var(--lcc-sun); color: #533c0a; } /* ---- Hero watermark + stats toggles --------------------------------- */ body.no-watermark .hero-watermark { display: none; } body.no-stats .hero-stats { display: none; } /* ---- Values card variants ------------------------------------------- */ /* Magenta gradient version */ body.value-magenta .value-card { background: linear-gradient(135deg, #B1234E 0%, #E0376A 55%, #E96A92 100%); } body.value-magenta .value-card .value-card-bg { background: radial-gradient(circle at 110% -10%, rgba(91,49,146,0.35) 0%, transparent 50%), radial-gradient(circle at -10% 110%, rgba(14,35,71,0.30) 0%, transparent 50%); } body.value-magenta .value-card .value-dot { background: var(--lcc-sun); } /* Cream light version */ body.value-cream .value-card { background: var(--surface-card); color: var(--lcc-navy); border: 1px solid var(--line-soft); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.8); } body.value-cream .value-card .value-card-bg { background: radial-gradient(circle at 110% -10%, rgba(45,169,161,0.10) 0%, transparent 55%), radial-gradient(circle at -10% 110%, rgba(224,55,106,0.10) 0%, transparent 55%); } body.value-cream .value-card .eyebrow { color: var(--lcc-teal); } body.value-cream .value-card .eyebrow::before, body.value-cream .value-card .eyebrow::after { background: var(--lcc-teal); } body.value-cream .value-card .value-text { color: var(--fg-3); } body.value-cream .value-card .value-text strong { color: var(--lcc-navy); } body.value-cream .value-card .value-dot { background: var(--lcc-magenta); }