/* =========================================== BUZZMART - ACCENT COLOR THEMES Diaktifkan lewat [data-accent="..."] di , dipilih dari Admin Panel > Settings > Tampilan & Tema. Catatan: variabel yang di-override di sini SAMA NAMANYA dengan variabel gold-theme asli di style.css (--gold-primary dkk), jadi seluruh komponen yang sudah memakai variabel itu (button, border, glow, icon, dsb) otomatis ikut berubah warna tanpa perlu sentuh CSS komponen satu-satu. =========================================== */ [data-accent="purple"] { --gold-primary: #b855f7; --gold-bright: #c084fc; --gold-deep: #9333ea; --gold-dark: #6b21a8; --amber: #d946ef; --border-gold: rgba(184, 85, 247, 0.25); --border-gold-strong: rgba(184, 85, 247, 0.5); --glow-gold: 0 0 20px rgba(184, 85, 247, 0.35); --glow-gold-soft: 0 0 12px rgba(192, 132, 252, 0.2); } [data-accent="purple"] body { background-image: radial-gradient(circle at 15% 0%, rgba(184, 85, 247, 0.08) 0%, transparent 45%), radial-gradient(circle at 85% 100%, rgba(217, 70, 239, 0.06) 0%, transparent 45%); } [data-accent="blue"] { --gold-primary: #3b9eff; --gold-bright: #60a5fa; --gold-deep: #2563eb; --gold-dark: #1d4ed8; --amber: #38bdf8; --border-gold: rgba(59, 158, 255, 0.25); --border-gold-strong: rgba(59, 158, 255, 0.5); --glow-gold: 0 0 20px rgba(59, 158, 255, 0.35); --glow-gold-soft: 0 0 12px rgba(96, 165, 250, 0.2); } [data-accent="blue"] body { background-image: radial-gradient(circle at 15% 0%, rgba(59, 158, 255, 0.08) 0%, transparent 45%), radial-gradient(circle at 85% 100%, rgba(56, 189, 248, 0.06) 0%, transparent 45%); } [data-accent="green"] { --gold-primary: #22c55e; --gold-bright: #4ade80; --gold-deep: #16a34a; --gold-dark: #15803d; --amber: #84cc16; --border-gold: rgba(34, 197, 94, 0.25); --border-gold-strong: rgba(34, 197, 94, 0.5); --glow-gold: 0 0 20px rgba(34, 197, 94, 0.35); --glow-gold-soft: 0 0 12px rgba(74, 222, 128, 0.2); } [data-accent="green"] body { background-image: radial-gradient(circle at 15% 0%, rgba(34, 197, 94, 0.08) 0%, transparent 45%), radial-gradient(circle at 85% 100%, rgba(132, 204, 22, 0.06) 0%, transparent 45%); } [data-accent="red"] { --gold-primary: #f43f5e; --gold-bright: #fb7185; --gold-deep: #e11d48; --gold-dark: #be123c; --amber: #fb923c; --border-gold: rgba(244, 63, 94, 0.25); --border-gold-strong: rgba(244, 63, 94, 0.5); --glow-gold: 0 0 20px rgba(244, 63, 94, 0.35); --glow-gold-soft: 0 0 12px rgba(251, 113, 133, 0.2); } [data-accent="red"] body { background-image: radial-gradient(circle at 15% 0%, rgba(244, 63, 94, 0.08) 0%, transparent 45%), radial-gradient(circle at 85% 100%, rgba(251, 146, 60, 0.06) 0%, transparent 45%); } /* Hero title gradient text ikut accent di tiap tema non-default */ [data-accent="purple"] .hero-title, [data-accent="blue"] .hero-title, [data-accent="green"] .hero-title, [data-accent="red"] .hero-title { background: linear-gradient(135deg, var(--gold-dark), var(--gold-deep) 60%, var(--gold-primary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }