/* CDC Shared Theme Tokens - Centralized background (matches 403 style) - Subtle animated gradient drift - Reusable button gradients + focus tokens */ :root{ /* Background palette (matches the 403 look) */ --bg-deep: #0f172a; /* slate-900 */ --bg-blue: rgba(37,99,235,.85); /* blue-600 */ --bg-purple: rgba(124,58,237,.85);/* violet-600 */ /* Card surfaces */ --card: rgba(255,255,255,.92); --card-soft: linear-gradient(135deg, rgba(255,255,255,.75), rgba(241,245,249,.85)); /* Button gradients */ --grad-purple: linear-gradient(135deg,#7c3aed,#5b21b6); --grad-blue: linear-gradient(135deg,#2563eb,#1d4ed8); --grad-purple-blue: linear-gradient(135deg,#7c3aed,#2563eb); /* Focus ring */ --focus-ring: 0 0 0 3px rgba(37,99,235,.18); } /* Apply to */ body.app-bg{ background: var(--bg-deep); min-height: 100vh; position: relative; overflow: hidden; } /* The animated “drift” layer */ body.app-bg::before{ content:""; position:absolute; inset:-20%; z-index:0; /* This is the exact 403 background style, centralized */ background: radial-gradient(1200px 700px at 15% 40%, var(--bg-blue), rgba(15,23,42,.85) 55%), radial-gradient(900px 600px at 90% 10%, var(--bg-purple), rgba(15,23,42,.92) 60%); filter: saturate(1.05) contrast(1.02); transform: translate3d(0,0,0); animation: cdc-bg-drift 18s ease-in-out infinite; } /* Ensure your page content sits above the background layer */ body.app-bg > *{ position: relative; z-index: 1; } @keyframes cdc-bg-drift{ 0% { transform: translate3d(-2.2%, -1.6%, 0) scale(1.03); } 50% { transform: translate3d( 2.4%, 1.8%, 0) scale(1.06); } 100% { transform: translate3d(-2.2%, -1.6%, 0) scale(1.03); } } /* Optional helper classes you can reuse in templates */ .cdc-btn-purple{ background: var(--grad-purple); color:#fff; } .cdc-btn-blue{ background: var(--grad-blue); color:#fff; } .cdc-btn-purpleblue{ background: var(--grad-purple-blue); color:#fff; }