/* ============================================================
Chrome Wave Studios — Canonical Design Tokens
Extracted from vault/website/index.html (canonical 2026-05-09)
Use this as the single source of truth for all CWS pages.
============================================================ */
/* ---- 1. Reset ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ---- 2. CSS Variable Tokens ---- */
:root {
--bg: #000000;
--text: #ffffff;
--text-dim: rgba(255,255,255,0.55);
--accent: #00ff8c;
--accent-dark: #00cc6f;
--accent-glow: rgba(0,255,140,0.5);
--cyan: #00FFFF;
--gold: #FFA500;
--magenta: #ff00ff;
--border: rgba(0, 255, 140, 0.3);
--border-soft: rgba(0, 255, 140, 0.15);
--card-bg: rgba(0, 255, 140, 0.05);
--card-bg-hover: rgba(0, 255, 140, 0.1);
}
/* ---- 3. Google Fonts ----
Add to of any CWS page:
*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');
/* ---- 4. Background Layer (gradient + scanline) ---- */
body::before {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 50%, #0f0f1e 100%);
z-index: -2;
pointer-events: none;
}
body::after {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
background: repeating-linear-gradient(0deg,
rgba(0,0,0,0.15),
rgba(0,0,0,0.15) 1px,
transparent 1px,
transparent 2px);
z-index: 999;
}
/* ---- 5. Plasma Blob Background ---- */
.plasma-bg {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -1;
pointer-events: none;
opacity: 0.6;
mix-blend-mode: screen;
animation: plasma-shift 8s ease-in-out infinite;
}
.plasma-blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.4;
}
.blob-1 {
width: 400px; height: 400px;
background: radial-gradient(circle, #00ffff 0%, #00ff8c 50%, transparent 100%);
top: -100px; left: -100px;
animation: float-blob-1 12s ease-in-out infinite;
}
.blob-2 {
width: 350px; height: 350px;
background: radial-gradient(circle, #ff00ff 0%, #ff0080 50%, transparent 100%);
top: 50%; right: -80px;
animation: float-blob-2 14s ease-in-out infinite;
}
.blob-3 {
width: 380px; height: 380px;
background: radial-gradient(circle, #9d00ff 0%, #5500ff 50%, transparent 100%);
bottom: -100px; left: 50%;
animation: float-blob-3 16s ease-in-out infinite;
}
.blob-4 {
width: 320px; height: 320px;
background: radial-gradient(circle, #00d4ff 0%, #00ff88 50%, transparent 100%);
top: 30%; left: 10%;
animation: float-blob-4 13s ease-in-out infinite;
}
/* ---- 6. Keyframes ---- */
@keyframes plasma-shift {
0% { filter: hue-rotate(0deg) saturate(1) brightness(1); }
50% { filter: hue-rotate(45deg) saturate(1.2) brightness(1.1); }
100% { filter: hue-rotate(0deg) saturate(1) brightness(1); }
}
@keyframes float-blob-1 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(50px, -50px) scale(1.1); }
}
@keyframes float-blob-2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-50px, 80px) scale(1.05); }
}
@keyframes float-blob-3 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-80px, -60px) scale(1.08); }
}
@keyframes float-blob-4 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(100px, 50px) scale(1.06); }
}
/* ---- 7. Accessibility — Focus Visible ---- */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ---- 8. Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.plasma-bg,
.plasma-blob {
animation: none !important;
}
}