/* ===================================================================== WALLZY BRAND LAYER (brand.css) Re-skins the site to the wallzy.digital identity: • "Prompt Spectrum" accent — Spark violet / Flux magenta / Render teal • Fonts — Syne (display), Space Grotesk (body), DM Mono (mono/labels) This file is always-on and overrides the legacy yellow accent. To revert the whole re-skin, remove the to this file in includes/header.php. ===================================================================== */ :root{ --void:#09090F; --void-mid:#111120; --void-surface:#1A1A2E; --spark:#7B5EFF; --spark-glow:#A48BFF; --flux:#FF4ECD; --flux-glow:#FF8DE3; --render:#00E5CC;--render-glow:#80F2E5; --dust:#8888AA; --ghost:#C8C8E0; --paper:#F0F0FF; --rail:#2A2A45; --rail-hover:#333360; --gradient-brand:linear-gradient(135deg,var(--spark) 0%,var(--flux) 50%,var(--render) 100%); --gradient-full:linear-gradient(90deg,var(--spark),var(--flux),var(--render)); --banana-yellow:var(--spark); /* legacy alias kept pointing at brand */ --font-display:'Syne',sans-serif; --font-body:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,sans-serif; --font-mono:'DM Mono','JetBrains Mono',ui-monospace,monospace; } /* ── Typography ────────────────────────────────────────────────── */ /* Tailwind puts `font-sans` on , so override the utility itself to make Space Grotesk the brand default sans everywhere. */ body,.font-sans{ font-family:var(--font-body) !important; } h1,h2,h3,h4,.font-display,.brand-display{ font-family:var(--font-display) !important; letter-spacing:-0.02em; } .font-mono{ font-family:var(--font-mono) !important; } code,kbd,samp{ font-family:var(--font-mono); } /* ── Accent remap: legacy yellow-* utilities → Spark violet ramp ── */ /* solid text */ .text-yellow-300{ color:#C9B8FF !important; } .text-yellow-400{ color:var(--spark-glow) !important; } .text-yellow-500,.text-yellow-600{ color:var(--spark) !important; } .text-yellow-500\/80{ color:rgba(123,94,255,.8) !important; } .text-yellow-500\/70{ color:rgba(123,94,255,.7) !important; } .hover\:text-yellow-300:hover,.hover\:text-yellow-400:hover{ color:var(--spark-glow) !important; } .hover\:text-yellow-500:hover{ color:var(--spark) !important; } /* solid bg */ .bg-yellow-400{ background-color:var(--spark-glow) !important; } .bg-yellow-500{ background-color:var(--spark) !important; } .bg-yellow-600,.bg-yellow-700{ background-color:#6A4DEB !important; } .hover\:bg-yellow-400:hover,.hover\:bg-yellow-500:hover{ background-color:var(--spark-glow) !important; } .hover\:bg-yellow-600:hover,.hover\:bg-yellow-700:hover{ background-color:#6A4DEB !important; } /* bg opacity */ .bg-yellow-500\/4{ background-color:rgba(123,94,255,.04) !important; } .bg-yellow-500\/5{ background-color:rgba(123,94,255,.05) !important; } .bg-yellow-500\/10{ background-color:rgba(123,94,255,.10) !important; } .bg-yellow-500\/20{ background-color:rgba(123,94,255,.20) !important; } .hover\:bg-yellow-500\/20:hover{ background-color:rgba(123,94,255,.20) !important; } .bg-yellow-900\/50{ background-color:rgba(42,28,102,.55) !important; } /* borders */ .border-yellow-400{ border-color:var(--spark-glow) !important; } .border-yellow-500,.border-yellow-600{ border-color:var(--spark) !important; } .border-yellow-500\/20{ border-color:rgba(123,94,255,.20) !important; } .border-yellow-500\/30{ border-color:rgba(123,94,255,.30) !important; } .border-yellow-500\/40{ border-color:rgba(123,94,255,.40) !important; } .border-yellow-500\/50{ border-color:rgba(123,94,255,.50) !important; } .border-yellow-700\/40{ border-color:rgba(86,56,201,.40) !important; } .border-yellow-800\/50{ border-color:rgba(63,42,148,.50) !important; } .hover\:border-yellow-400:hover{ border-color:var(--spark-glow) !important; } .hover\:border-yellow-500:hover{ border-color:var(--spark) !important; } .hover\:border-yellow-500\/30:hover{ border-color:rgba(123,94,255,.30) !important; } .hover\:border-yellow-500\/40:hover{ border-color:rgba(123,94,255,.40) !important; } .hover\:border-yellow-500\/50:hover{ border-color:rgba(123,94,255,.50) !important; } /* rings + shadows */ .ring-yellow-500{ --tw-ring-color:var(--spark) !important; } .ring-yellow-500\/50{ --tw-ring-color:rgba(123,94,255,.50) !important; } .shadow-yellow-500\/20,.hover\:shadow-yellow-500\/20:hover{ --tw-shadow-color:rgba(123,94,255,.30) !important; } /* gradient stops (from/via/to-yellow) */ .from-yellow-500{ --tw-gradient-from:var(--spark) !important; } .via-yellow-500{ --tw-gradient-via:var(--flux) !important; } .to-yellow-500{ --tw-gradient-to:var(--render) !important; } /* ── Brand helpers ─────────────────────────────────────────────── */ .brand-gradient-text{ background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .brand-glow{ box-shadow:0 0 40px rgba(123,94,255,.30); } /* ── Prompt Builder accent (force brand violet regardless of DB theme) ── */ #nbb{ --accent:var(--spark) !important; --ctx-color:var(--spark) !important; }