/* ═══════════════════════════════════════════════════════════ VAPORWAVE THEME Activate: add data-style="vaporwave" to . Retro-computing vaporwave, not pastel romance — the genre's actual reference points (CRT/VHS hardware, terminal readouts, neon signage) rather than a soft rounded gradient poster. Orbitron — geometric, squared, heavy — carries display type; VT323 keeps the terminal-mono voice on small labels/tags. A tight 2–8px radius scale, hard-edged offset "chrome" type instead of a diffuse glow, camera-reticle corner brackets on the effect display and cards, and a scanline+graticule grid in place of the plain dot pattern. Palette is unchanged — hot lantern pink + sunset glow + aqua neon on periwinkle day / indigo night — this is a redesign of execution, not concept. Owns its palette, type scale and radius scale outright; only the class contract in base.css is shared. ═══════════════════════════════════════════════════════════ */ /* ── Vaporwave light (pastel lavender day) ── */ /* ── Vaporwave palette ── lantern-and-neon: the colours of lit windows and signage at dusk, not the origin theme's daylight SaaS set. ── */ html[data-style='vaporwave'] { --p-accent-1: #3fe0e6; --p-accent-2: #ff4fc3; --p-accent-3: #ffd166; --p-accent-4: #b47cff; --p-accent-5: #6ea8ff; --p-accent-6: #ff6b8a; --p-accent-7: #7bf1a8; --p-accent-8: #ff9d6c; --p-info: #6ea8ff; --p-success: #7bf1a8; --p-warn: #ffd166; --p-danger: #ff6b8a; --p-on-accent: #14103a; /* Neons are pale; pull accent text further toward the ink. */ --ink-mix: 22%; /* Orbitron is a geometric, squared-off display face — heavy weight, no air needed the way the delicate serif it replaced required. Slightly smaller top step than before: Orbitron's caps run wide, so the same apparent mass arrives at a smaller size. */ --t-h1: clamp(2.5rem, 1.3rem + 5.6vw, 4.75rem); --t-h2: clamp(1.6rem, 1.15rem + 2.2vw, 2.5rem); --t-lh-display: 1.12; --t-lh-body: 1.6; --t-track-display: 0; --t-track-heading: 0; /* Tight, evenly-stepped corners — a circuit-board squareness, not the brutalist/win95 hard zero. Retuned down from the softest scale of any theme (0.35–1.25rem) to the tightest short of those two. */ --r-xs: 0.125rem; --r-sm: 0.25rem; --r-md: 0.375rem; --r-lg: 0.5rem; } html[data-style='vaporwave'] { --c-bg: #c9c5f4; --c-surface: #f5f2fd; --c-border: #d9d2f5; --c-muted: #524a8a; --c-text: #2a2560; --c-text-sub: #423c7a; --c-dot: #bdb9ec; --c-nav-bg: rgba(245, 242, 253, 0.85); --c-accent: #c11a86; --c-accent-2: #b3400f; --c-accent-3: #137a86; /* Text/icons sitting ON a --c-accent fill. Never reuse --c-bg here: white clears the hot pink at 5.6:1, near-black would not (4.2:1). */ --c-on-accent: #ffffff; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-accent); --c-grad-h1-to: var(--c-accent-2); } /* ── Vaporwave dark (neon night city) ── */ html[data-style='vaporwave'][data-theme='dark'] { --c-bg: #17153a; --c-surface: #211d4d; --c-border: #3a3470; --c-muted: #9089c9; --c-text: #e9e5fb; --c-text-sub: #bdb5e8; --c-dot: #262255; --c-nav-bg: rgba(23, 21, 58, 0.85); --c-accent: #ff4fc3; --c-accent-2: #ff9d6c; --c-accent-3: #3fe0e6; /* Neon pink is bright, so near-white text fails — warm near-black clears it at 6.5:1. */ --c-on-accent: #1c0a14; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-accent); --c-grad-h1-to: var(--c-accent-2); } /* ── Vaporwave dark (system preference) ── */ @media (prefers-color-scheme: dark) { html[data-style='vaporwave']:not([data-theme]) { --c-bg: #17153a; --c-surface: #211d4d; --c-border: #3a3470; --c-muted: #9089c9; --c-text: #e9e5fb; --c-text-sub: #bdb5e8; --c-dot: #262255; --c-nav-bg: rgba(23, 21, 58, 0.85); --c-accent: #ff4fc3; --c-accent-2: #ff9d6c; --c-accent-3: #3fe0e6; --c-on-accent: #1c0a14; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-accent); --c-grad-h1-to: var(--c-accent-2); } } /* ══════════════════════════════════════════════════════════ VAPORWAVE STYLE OVERRIDES Applied to html[data-style='vaporwave'] ══════════════════════════════════════════════════════════ */ /* ── Orbitron for headings: geometric, squared, heavy — a computer-display face, not a romantic one. h3 stays one step lighter than h1/h2 since it carries card and section titles at small sizes, where 800 gets clumpy. ── */ html[data-style='vaporwave'] h1, html[data-style='vaporwave'] h2 { font-family: 'Orbitron', 'Archivo Black', sans-serif; font-weight: 800; } html[data-style='vaporwave'] h3 { font-family: 'Orbitron', 'Archivo Black', sans-serif; font-weight: 700; } /* ── VT323 retro mono for tiny labels/tags — the terminal-caption voice ── */ html[data-style='vaporwave'] .section-label, html[data-style='vaporwave'] .tag { font-family: 'VT323', 'PT Mono', monospace; font-size: var(--t-sm); letter-spacing: 0.14em; } /* ── Gradient headline: indigo → hot pink → sunset glow, chromatic-split instead of soft-lit. Two hard, unblurred offset copies in opposite directions and opposing hues read as a mis-tracked VHS / RGB-split glitch — genre-accurate, and the opposite of a diffuse halo. This is the theme's one signature move; it repeats on cards and the primary button below and nowhere else, so it stays legible instead of becoming wallpaper. ── */ html[data-style='vaporwave'] .gradient-text { font-family: 'Orbitron', 'Archivo Black', sans-serif; font-weight: 800; text-shadow: -2px 0 0 color-mix(in srgb, var(--c-accent-3) 65%, transparent), 2px 0 0 color-mix(in srgb, var(--c-accent) 55%, transparent); } /* ── Cards: the same chromatic-split shadow as the headline, on hover ── */ html[data-style='vaporwave'] .card, html[data-style='vaporwave'] .link-card { border-color: var(--c-border); box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } html[data-style='vaporwave'] .card:hover, html[data-style='vaporwave'] .link-card:hover { transform: translate(-3px, -3px); border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-border)); box-shadow: 4px 4px 0 color-mix(in srgb, var(--c-accent) 60%, transparent), -2px -2px 0 color-mix(in srgb, var(--c-accent-3) 40%, transparent); } /* ── Effect stage: always-on corner brackets, camera-reticle / instrument- display framing. The one place this theme's "retro tech" premise is always visible rather than only on hover — brackets in front of the halo blobs (z-index) so they stay crisp instead of blurring into them. ── */ html[data-style='vaporwave'] .effect-stage::before, html[data-style='vaporwave'] .effect-stage::after { content: ''; position: absolute; width: 1rem; height: 1rem; pointer-events: none; z-index: 1; } html[data-style='vaporwave'] .effect-stage::before { top: 0.6rem; left: 0.6rem; border-top: 2px solid var(--c-accent); border-left: 2px solid var(--c-accent); } html[data-style='vaporwave'] .effect-stage::after { bottom: 0.6rem; right: 0.6rem; border-bottom: 2px solid var(--c-accent-3); border-right: 2px solid var(--c-accent-3); } /* The dot grid is softened through --c-dot above, never through opacity on .dot-grid: that element also carries the effect caption, and fading the box fades the text with it (measured 3.21:1 in light mode). */ /* ── Backdrop: a monitor graticule + scanlines instead of a plain dot tile — an oscilloscope/CRT display grid, earned by the effect-stage already being styled as a screen. Scanlines tint from --c-text so they invert correctly between modes; the graticule reuses --c-dot, same token the origin theme's plain dots read from. ── */ html[data-style='vaporwave'] .dot-grid { background-image: repeating-linear-gradient( to bottom, color-mix(in srgb, var(--c-text) 7%, transparent) 0px, color-mix(in srgb, var(--c-text) 7%, transparent) 1px, transparent 1px, transparent 3px ), repeating-linear-gradient(to right, var(--c-dot) 0px, var(--c-dot) 1px, transparent 1px, transparent 28px), repeating-linear-gradient(to bottom, var(--c-dot) 0px, var(--c-dot) 1px, transparent 1px, transparent 28px); } /* ── Halos: tightened from a hazy bokeh cloud toward a more concentrated neon-tube glow — still leans in harder than any other theme, just less diffuse. ── */ html[data-style='vaporwave'] .halo { filter: blur(44px); opacity: 0.38; } html[data-style='vaporwave'][data-theme='dark'] .halo { opacity: 0.48; } @media (prefers-color-scheme: dark) { html[data-style='vaporwave']:not([data-theme]) .halo { opacity: 0.48; } } /* ── Buttons: primary gets the same chromatic-split shadow as cards and the headline — one repeated signature, not a fourth new effect. ── */ html[data-style='vaporwave'] .btn-primary { box-shadow: 0 0 0 rgba(0, 0, 0, 0); transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } html[data-style='vaporwave'] .btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 color-mix(in srgb, var(--c-accent) 60%, transparent), -2px -2px 0 color-mix(in srgb, var(--c-accent-3) 35%, transparent); } html[data-style='vaporwave'] .btn-outlined:hover { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent); } html[data-style='vaporwave'] .btn-icon:hover, html[data-style='vaporwave'] .theme-toggle:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 18%, transparent); } /* ══ Forms ══════════════════════════════════════════════════ */ html[data-style='vaporwave'] .field-label { font-weight: 500; color: var(--c-text-sub); } html[data-style='vaporwave'] .field-hint { color: var(--c-muted); } /* background-color, not the shorthand — the shorthand would wipe the chevron background-image base.css draws on .select */ html[data-style='vaporwave'] .input, html[data-style='vaporwave'] .select { background-color: var(--c-surface); border: 1px solid var(--c-border); color: var(--c-text); transition: border-color 0.2s ease, box-shadow 0.2s ease; } html[data-style='vaporwave'] .input::placeholder { color: var(--c-muted); } html[data-style='vaporwave'] .input:focus, html[data-style='vaporwave'] .select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 22%, transparent); } /* Checkbox: tight-square, pink fill + check when ticked, no glow */ html[data-style='vaporwave'] .checkbox { appearance: none; width: 1.15rem; height: 1.15rem; border: 1px solid var(--c-border); background: var(--c-surface); display: inline-grid; place-content: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } html[data-style='vaporwave'] .checkbox::before { content: ''; width: 0.6rem; height: 0.6rem; transform: scale(0); transition: transform 0.12s ease; background: var(--c-on-accent); clip-path: polygon(14% 44%, 0 63%, 39% 100%, 100% 20%, 82% 4%, 37% 65%); } html[data-style='vaporwave'] .checkbox:checked { background: var(--c-accent); border-color: var(--c-accent); } html[data-style='vaporwave'] .checkbox:checked::before { transform: scale(1); } /* Radio: solid dot, no glow — the fill itself is the feedback */ html[data-style='vaporwave'] .radio { appearance: none; width: 1.15rem; height: 1.15rem; border: 1px solid var(--c-border); background: var(--c-surface); display: inline-grid; place-content: center; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; } html[data-style='vaporwave'] .radio::before { content: ''; width: 0.55rem; height: 0.55rem; transform: scale(0); transition: transform 0.12s ease; background: var(--c-accent); } html[data-style='vaporwave'] .radio:checked { border-color: var(--c-accent); } html[data-style='vaporwave'] .radio:checked::before { transform: scale(1); } /* Switch: pill track, solid fill when on — no glow */ html[data-style='vaporwave'] .switch { appearance: none; width: 2.75rem; height: 1.5rem; border: 1px solid var(--c-border); background: var(--c-border); position: relative; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } html[data-style='vaporwave'] .switch::before { content: ''; position: absolute; top: 0.14rem; left: 0.14rem; width: 1.1rem; height: 1.1rem; background: var(--c-surface); transition: transform 0.2s ease, box-shadow 0.2s ease; } html[data-style='vaporwave'] .switch:checked { background: var(--c-accent); border-color: var(--c-accent); } html[data-style='vaporwave'] .switch:checked::before { transform: translateX(1.25rem); background: var(--c-on-accent); } /* ══ Feedback ═══════════════════════════════════════════════ */ /* Alerts: pastel-tinted from the shared --p-* palette */ html[data-style='vaporwave'] .alert { border: 1px solid transparent; } html[data-style='vaporwave'] .alert-title { font-weight: 600; } html[data-style='vaporwave'] .alert-info { background: color-mix(in srgb, var(--p-info) 12%, var(--c-surface)); border-color: color-mix(in srgb, var(--p-info) 30%, transparent); color: var(--c-text); } html[data-style='vaporwave'] .alert-success { background: color-mix(in srgb, var(--p-success) 14%, var(--c-surface)); border-color: color-mix(in srgb, var(--p-success) 32%, transparent); color: var(--c-text); } html[data-style='vaporwave'] .alert-warn { background: color-mix(in srgb, var(--p-warn) 16%, var(--c-surface)); border-color: color-mix(in srgb, var(--p-warn) 34%, transparent); color: var(--c-text); } html[data-style='vaporwave'] .alert-error { background: color-mix(in srgb, var(--p-danger) 12%, var(--c-surface)); border-color: color-mix(in srgb, var(--p-danger) 30%, transparent); color: var(--c-text); } /* Progress: track in surface, accent→sunset gradient fill, no glow. The gradient is painted across the full bar and scaled with it by base's transform, so the sweep always spans exactly the filled portion instead of being cropped out of a wider ramp. */ html[data-style='vaporwave'] .progress { background: var(--c-border); overflow: hidden; } html[data-style='vaporwave'] .progress-bar { background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2)); } /* Skeleton: lavender shimmer sweep */ html[data-style='vaporwave'] .skeleton { background: var(--c-border); background-image: linear-gradient( 100deg, transparent 0%, color-mix(in srgb, var(--c-surface) 80%, white) 50%, transparent 100% ); background-size: 200% 100%; background-repeat: no-repeat; animation: vw-shimmer 1.6s ease-in-out infinite; } @keyframes vw-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } } @media (prefers-reduced-motion: reduce) { html[data-style='vaporwave'] .skeleton { animation: none; background-image: none; background-color: var(--c-border); } } /* Spinner: pink ring; reduced-motion → static ¾ arc, still visible */ html[data-style='vaporwave'] .spinner { width: 1.25rem; height: 1.25rem; border: 0.15rem solid color-mix(in srgb, var(--c-accent) 20%, transparent); border-top-color: var(--c-accent); animation: vw-spin 0.7s linear infinite; } @keyframes vw-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { html[data-style='vaporwave'] .spinner { animation: none; border-color: color-mix(in srgb, var(--c-accent) 20%, transparent); border-top-color: var(--c-accent); border-right-color: var(--c-accent); } } /* ══ Navigation ═════════════════════════════════════════════ */ /* Tabs: gradient underline on the active tab */ html[data-style='vaporwave'] .tabs { border-bottom-color: var(--c-border); } html[data-style='vaporwave'] .tab { color: var(--c-text-sub); transition: color 0.2s ease; } html[data-style='vaporwave'] .tab:hover { color: var(--c-text); } /* Active tab keeps AA text (--c-text; the hot pink fails 4.5:1 as small text on the periwinkle bg) — the neon lives in the gradient underline, painted on base's ::after so there is exactly one line. */ html[data-style='vaporwave'] .tab-active { color: var(--c-text); } html[data-style='vaporwave'] .tab-active::after { background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2)); } /* Breadcrumbs: separators inherit --c-muted (already AA); accent on hover */ html[data-style='vaporwave'] .breadcrumbs a { color: var(--c-text-sub); transition: color 0.2s ease; } html[data-style='vaporwave'] .breadcrumbs a:hover { color: var(--c-accent); } html[data-style='vaporwave'] .breadcrumbs [aria-current='page'] { color: var(--c-text); } /* Pagination: solid accent fill on the active page, no glow */ html[data-style='vaporwave'] .page { border: 1px solid var(--c-border); color: var(--c-text-sub); transition: border-color 0.2s ease, color 0.2s ease; } html[data-style='vaporwave'] .page:hover { border-color: var(--c-accent); color: var(--c-accent); } html[data-style='vaporwave'] .page-active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }