/* ═══════════════════════════════════════════════════════════════════
pyvendr-theme.css — Shared visual theme for pyvendr apps
Pure CSS — no Tailwind, no build step required.
Usage:
Theme switching:
document.documentElement.dataset.theme = 'void';
// options: dark | light | wasteland | mushroom | quest | void | blade | hyve
Per-app defaults:
Set `data-theme="hyve"` on to default to HyveBreak theme,
or omit for Solarcade Night (dark).
═══════════════════════════════════════════════════════════════════ */
/* ── Fonts ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');
/* ═══════════════════════════════════════════════════════════════════
TOKEN SYSTEM
Each theme sets these vars. Components use them — never raw colors.
Background: --bg, --bg-1/2/3 (radial gradient orbs)
Text: --text, --text-muted, --text-faint, --text-subtle
Surface: --surface, --surface-strong, --surface-elevated, --surface-overlay
Border: --border, --border-subtle, --border-strong
Interaction: --focus, --scanline
Glow: --orb-1, --orb-2, --shadow-1, --shadow-2
Layout: --header-bg
Fonts: --font-display, --font-pixel, --font-body
Geometry: --radius, --radius-lg, --max-width
═══════════════════════════════════════════════════════════════════ */
/* ── Default: Solarcade Night (dark / gold) ─────────────────────── */
:root {
color-scheme: dark;
--bg: #08060a;
--bg-1: rgba(255, 196, 72, 0.18);
--bg-2: rgba(255, 133, 27, 0.13);
--bg-3: rgba(72, 210, 178, 0.12);
--text: rgba(244, 246, 255, 0.92);
--text-muted: rgba(244, 246, 255, 0.65);
--text-faint: rgba(244, 246, 255, 0.5);
--text-subtle: rgba(244, 246, 255, 0.35);
--surface: rgba(255, 255, 255, 0.05);
--surface-strong: rgba(255, 255, 255, 0.08);
--surface-elevated:rgba(0, 0, 0, 0.2);
--surface-overlay: rgba(0, 0, 0, 0.7);
--border: rgba(255, 255, 255, 0.12);
--border-subtle: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 212, 122, 0.26);
--focus: rgba(255, 255, 255, 0.16);
--scanline: rgba(255, 255, 255, 0.04);
--orb-1: rgba(255, 196, 72, 0.48);
--orb-2: rgba(255, 133, 27, 0.34);
--shadow-1: rgba(255, 196, 72, 0.22);
--shadow-2: rgba(255, 133, 27, 0.16);
--header-bg: rgba(0, 0, 0, 0.2);
/* Font stack */
--font-display: 'Orbitron', 'Inter', system-ui, sans-serif;
--font-pixel: 'Press Start 2P', monospace;
--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
/* Geometry */
--radius: 12px;
--radius-lg: 20px;
--max-width: 1200px;
}
/* ── Light ──────────────────────────────────────────────────────── */
:root[data-theme='light'] {
color-scheme: light;
--bg: #fff8ef;
--bg-1: rgba(255, 196, 72, 0.2);
--bg-2: rgba(255, 133, 27, 0.14);
--bg-3: rgba(72, 210, 178, 0.12);
--text: rgba(11, 15, 26, 0.92);
--text-muted: rgba(11, 15, 26, 0.65);
--text-faint: rgba(11, 15, 26, 0.5);
--text-subtle: rgba(11, 15, 26, 0.35);
--surface: rgba(255, 255, 255, 0.85);
--surface-strong: rgba(11, 15, 26, 0.04);
--surface-elevated:rgba(11, 15, 26, 0.04);
--surface-overlay: rgba(255, 255, 255, 0.92);
--border: rgba(11, 15, 26, 0.08);
--border-subtle: rgba(11, 15, 26, 0.06);
--border-strong: rgba(239, 154, 46, 0.3);
--focus: rgba(11, 15, 26, 0.12);
--scanline: rgba(0, 0, 0, 0.03);
--orb-1: rgba(255, 196, 72, 0.26);
--orb-2: rgba(255, 133, 27, 0.18);
--shadow-1: rgba(255, 196, 72, 0.22);
--shadow-2: rgba(255, 133, 27, 0.18);
--header-bg: rgba(255, 255, 255, 0.65);
}
/* ── Wasteland (Dust Raid) ──────────────────────────────────────── */
:root[data-theme='wasteland'] {
color-scheme: dark;
--bg: #120d07;
--bg-1: rgba(255, 181, 66, 0.14);
--bg-2: rgba(182, 122, 56, 0.12);
--bg-3: rgba(78, 171, 113, 0.12);
--text: rgba(255, 240, 214, 0.92);
--text-muted: rgba(255, 240, 214, 0.68);
--text-faint: rgba(255, 240, 214, 0.5);
--text-subtle: rgba(255, 240, 214, 0.36);
--surface: rgba(27, 20, 12, 0.75);
--surface-strong: rgba(255, 181, 66, 0.12);
--surface-elevated:rgba(17, 12, 6, 0.6);
--surface-overlay: rgba(17, 12, 6, 0.92);
--border: rgba(255, 181, 66, 0.24);
--border-subtle: rgba(255, 181, 66, 0.14);
--border-strong: rgba(255, 181, 66, 0.38);
--focus: rgba(255, 181, 66, 0.2);
--scanline: rgba(255, 205, 129, 0.05);
--orb-1: rgba(255, 181, 66, 0.35);
--orb-2: rgba(78, 171, 113, 0.26);
--shadow-1: rgba(255, 181, 66, 0.25);
--shadow-2: rgba(182, 122, 56, 0.22);
--header-bg: rgba(17, 12, 6, 0.65);
}
/* ── Mushroom Run ───────────────────────────────────────────────── */
:root[data-theme='mushroom'] {
color-scheme: dark;
--bg: #17070b;
--bg-1: rgba(255, 73, 73, 0.2);
--bg-2: rgba(255, 208, 82, 0.16);
--bg-3: rgba(73, 184, 255, 0.14);
--text: rgba(255, 247, 240, 0.94);
--text-muted: rgba(255, 247, 240, 0.7);
--text-faint: rgba(255, 247, 240, 0.52);
--text-subtle: rgba(255, 247, 240, 0.36);
--surface: rgba(46, 11, 15, 0.72);
--surface-strong: rgba(255, 210, 82, 0.1);
--surface-elevated:rgba(27, 9, 11, 0.65);
--surface-overlay: rgba(27, 9, 11, 0.92);
--border: rgba(255, 214, 125, 0.22);
--border-subtle: rgba(255, 214, 125, 0.12);
--border-strong: rgba(255, 73, 73, 0.4);
--focus: rgba(255, 214, 125, 0.2);
--scanline: rgba(255, 255, 255, 0.05);
--orb-1: rgba(255, 73, 73, 0.38);
--orb-2: rgba(73, 184, 255, 0.28);
--shadow-1: rgba(255, 73, 73, 0.25);
--shadow-2: rgba(255, 208, 82, 0.22);
--header-bg: rgba(38, 9, 13, 0.68);
}
/* ── Quest Gold ─────────────────────────────────────────────────── */
:root[data-theme='quest'] {
color-scheme: dark;
--bg: #08110c;
--bg-1: rgba(129, 197, 83, 0.18);
--bg-2: rgba(235, 189, 87, 0.14);
--bg-3: rgba(74, 169, 226, 0.12);
--text: rgba(243, 241, 214, 0.94);
--text-muted: rgba(243, 241, 214, 0.7);
--text-faint: rgba(243, 241, 214, 0.5);
--text-subtle: rgba(243, 241, 214, 0.34);
--surface: rgba(12, 27, 18, 0.74);
--surface-strong: rgba(235, 189, 87, 0.12);
--surface-elevated:rgba(9, 19, 13, 0.68);
--surface-overlay: rgba(8, 17, 12, 0.92);
--border: rgba(190, 221, 146, 0.22);
--border-subtle: rgba(190, 221, 146, 0.12);
--border-strong: rgba(235, 189, 87, 0.34);
--focus: rgba(190, 221, 146, 0.18);
--scanline: rgba(243, 241, 214, 0.04);
--orb-1: rgba(129, 197, 83, 0.34);
--orb-2: rgba(235, 189, 87, 0.24);
--shadow-1: rgba(129, 197, 83, 0.22);
--shadow-2: rgba(235, 189, 87, 0.2);
--header-bg: rgba(8, 17, 12, 0.68);
}
/* ── Hunter Void (cyan/purple) ──────────────────────────────────── */
:root[data-theme='void'] {
color-scheme: dark;
--bg: #080612;
--bg-1: rgba(81, 236, 255, 0.18);
--bg-2: rgba(176, 94, 255, 0.16);
--bg-3: rgba(255, 105, 180, 0.1);
--text: rgba(227, 248, 255, 0.94);
--text-muted: rgba(227, 248, 255, 0.7);
--text-faint: rgba(227, 248, 255, 0.5);
--text-subtle: rgba(227, 248, 255, 0.34);
--surface: rgba(11, 10, 31, 0.76);
--surface-strong: rgba(81, 236, 255, 0.1);
--surface-elevated:rgba(9, 7, 23, 0.72);
--surface-overlay: rgba(8, 6, 18, 0.92);
--border: rgba(81, 236, 255, 0.2);
--border-subtle: rgba(81, 236, 255, 0.12);
--border-strong: rgba(176, 94, 255, 0.34);
--focus: rgba(81, 236, 255, 0.16);
--scanline: rgba(255, 255, 255, 0.04);
--orb-1: rgba(81, 236, 255, 0.34);
--orb-2: rgba(176, 94, 255, 0.28);
--shadow-1: rgba(81, 236, 255, 0.2);
--shadow-2: rgba(176, 94, 255, 0.24);
--header-bg: rgba(8, 6, 18, 0.7);
}
/* ── Hidden Blade (mono/red) ────────────────────────────────────── */
:root[data-theme='blade'] {
color-scheme: dark;
--bg: #0b0c10;
--bg-1: rgba(242, 242, 242, 0.12);
--bg-2: rgba(207, 46, 46, 0.16);
--bg-3: rgba(90, 120, 150, 0.1);
--text: rgba(241, 243, 245, 0.94);
--text-muted: rgba(241, 243, 245, 0.68);
--text-faint: rgba(241, 243, 245, 0.5);
--text-subtle: rgba(241, 243, 245, 0.34);
--surface: rgba(18, 20, 26, 0.78);
--surface-strong: rgba(255, 255, 255, 0.06);
--surface-elevated:rgba(9, 10, 14, 0.76);
--surface-overlay: rgba(9, 10, 14, 0.94);
--border: rgba(255, 255, 255, 0.12);
--border-subtle: rgba(255, 255, 255, 0.08);
--border-strong: rgba(207, 46, 46, 0.34);
--focus: rgba(255, 255, 255, 0.14);
--scanline: rgba(255, 255, 255, 0.03);
--orb-1: rgba(207, 46, 46, 0.24);
--orb-2: rgba(255, 255, 255, 0.16);
--shadow-1: rgba(207, 46, 46, 0.22);
--shadow-2: rgba(0, 0, 0, 0.28);
--header-bg: rgba(9, 10, 14, 0.72);
}
/* ── Hyve (HyveBreak / Hyve chain — cyan/purple arcade) ─────────── */
:root[data-theme='hyve'] {
color-scheme: dark;
--bg: #0D1117;
--bg-1: rgba(0, 212, 255, 0.10);
--bg-2: rgba(26, 75, 218, 0.08);
--bg-3: rgba(168, 85, 247, 0.07);
--text: rgba(255, 255, 255, 0.92);
--text-muted: rgba(255, 255, 255, 0.55);
--text-faint: rgba(255, 255, 255, 0.38);
--text-subtle: rgba(255, 255, 255, 0.25);
--surface: rgba(255, 255, 255, 0.04);
--surface-strong: rgba(255, 255, 255, 0.07);
--surface-elevated:rgba(0, 0, 0, 0.22);
--surface-overlay: rgba(13, 17, 23, 0.94);
--border: rgba(255, 255, 255, 0.08);
--border-subtle: rgba(255, 255, 255, 0.05);
--border-strong: rgba(0, 212, 255, 0.22);
--focus: rgba(0, 212, 255, 0.18);
--scanline: rgba(255, 255, 255, 0.025);
--orb-1: rgba(0, 212, 255, 0.40);
--orb-2: rgba(168, 85, 247, 0.30);
--shadow-1: rgba(0, 212, 255, 0.22);
--shadow-2: rgba(168, 85, 247, 0.20);
--header-bg: rgba(13, 17, 23, 0.75);
}
/* ═══════════════════════════════════════════════════════════════════
BASE RESET + BODY
═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100%;
}
body {
margin: 0;
min-height: 100vh;
color: var(--text);
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
overflow-x: hidden;
background:
radial-gradient(1200px 800px at 10% 10%, var(--bg-1), transparent 55%),
radial-gradient(900px 700px at 90% 30%, var(--bg-2), transparent 60%),
radial-gradient(900px 700px at 30% 90%, var(--bg-3), transparent 60%),
var(--bg);
transition: background 200ms ease, color 200ms ease;
}
/* Film grain overlay */
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(transparent 0, rgba(0,0,0,0.06) 100%),
url("data:image/svg+xml;utf8,");
mix-blend-mode: soft-light;
opacity: 0.3;
z-index: 0;
}
a { color: var(--text-muted); text-decoration: none; transition: color 0.18s; }
a:hover { color: var(--text); }
img { max-width: 100%; display: block; }
select { color: var(--text); background-color: var(--surface); }
select option, select optgroup { background: var(--surface-overlay); color: var(--text); }
/* ═══════════════════════════════════════════════════════════════════
UTILITY CLASSES
═══════════════════════════════════════════════════════════════════ */
/* ── Glass card ─────────────────────────────────────────────────── */
.glass {
position: relative;
isolation: isolate;
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.085), transparent 28%),
linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.028)),
var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.065),
0 16px 42px rgba(0, 0, 0, 0.24),
0 0 18px var(--shadow-1);
backdrop-filter: blur(16px) saturate(135%);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
/* ── Neon-border glow ───────────────────────────────────────────── */
.neon-border {
border: 1px solid var(--border-strong);
box-shadow: 0 0 25px var(--shadow-1);
}
/* ── Hover lift ─────────────────────────────────────────────────── */
.hover-lift {
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.hover-lift:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22), 0 0 18px var(--shadow-1);
}
/* ── Bloom / glow ───────────────────────────────────────────────── */
.bloom {
filter: drop-shadow(0 0 16px var(--shadow-1)) drop-shadow(0 0 22px var(--shadow-2));
}
/* ── Signal card (flat, no blur) ────────────────────────────────── */
.signal-card {
background:
linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022)),
var(--surface);
border: 1px solid var(--border);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
border-radius: var(--radius);
}
/* ── HUD chip (small labeled token) ────────────────────────────── */
.hud-chip {
border: 1px solid var(--border);
background:
radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.03));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 10px 22px rgba(0, 0, 0, 0.16);
backdrop-filter: blur(14px) saturate(130%);
border-radius: var(--radius);
}
/* ── Shell rail (section container) ────────────────────────────── */
.shell-rail {
border: 1px solid var(--border);
background:
radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 58%),
linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 16px 32px rgba(0,0,0,0.18);
backdrop-filter: blur(16px) saturate(135%);
border-radius: var(--radius-lg);
}
/* ── Panel glow (shimmer highlight) ────────────────────────────── */
.panel-glow {
position: relative;
overflow: hidden;
}
.panel-glow::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 32%, transparent 58%),
radial-gradient(circle at 85% 18%, rgba(255,255,255,0.06), transparent 24%);
opacity: 0.7;
}
/* ── State shell (bordered section) ────────────────────────────── */
.state-shell {
position: relative;
overflow: hidden;
border: 1px solid var(--border);
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 12px 30px rgba(0, 0, 0, 0.18);
border-radius: var(--radius);
}
.state-shell::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at top right, rgba(255,255,255,0.06), transparent 26%),
linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.04) 38%, transparent 62%);
opacity: 0.8;
}
/* ── State shimmer (loading skeleton) ──────────────────────────── */
@keyframes pv-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.state-shimmer {
position: relative;
overflow: hidden;
background: rgba(255,255,255,0.07);
border-radius: var(--radius);
}
.state-shimmer::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.16) 45%, transparent 100%);
animation: pv-shimmer 1.35s ease-in-out infinite;
}
/* ── CRT scanline overlay ───────────────────────────────────────── */
.crt::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
background: repeating-linear-gradient(
to bottom,
var(--scanline),
var(--scanline) 1px,
transparent 1px,
transparent 4px
);
mix-blend-mode: overlay;
opacity: 0.25;
}
/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.6rem 1.1rem;
border-radius: var(--radius);
font-weight: 600;
font-family: var(--font-body);
font-size: 0.875rem;
letter-spacing: 0.02em;
cursor: pointer;
border: none;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease,
background 180ms ease, color 180ms ease, opacity 180ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.btn-primary {
border: 1px solid var(--border-strong);
background:
linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)),
rgba(255,255,255,0.08);
color: var(--text);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 12px 28px rgba(0, 0, 0, 0.2),
0 0 18px var(--shadow-1);
}
.btn-primary:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
0 16px 36px rgba(0, 0, 0, 0.26),
0 0 24px var(--shadow-1);
}
.btn-accent {
background: linear-gradient(135deg, var(--orb-1), var(--orb-2));
color: #000;
font-weight: 700;
box-shadow: 0 8px 22px rgba(0,0,0,0.22), 0 0 16px var(--shadow-1);
}
.btn-accent:hover {
opacity: 0.88;
}
/* ── Tooltip ────────────────────────────────────────────────────── */
.tooltip-wrap {
position: relative;
display: inline-flex;
z-index: 90;
}
.tooltip-bubble {
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translate(-50%, 6px);
min-width: max-content;
max-width: 220px;
pointer-events: none;
opacity: 0;
border-radius: var(--radius);
border: 1px solid var(--border-strong);
background: var(--surface-overlay);
padding: 8px 10px;
font-size: 0.8rem;
color: var(--text);
box-shadow: 0 14px 32px rgba(0,0,0,0.28), 0 0 18px var(--shadow-1);
transition: opacity 160ms ease, transform 160ms ease;
z-index: 120;
}
.tooltip-bubble::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 10px;
height: 10px;
transform: translateX(-50%) rotate(45deg);
border-right: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
background: var(--surface-overlay);
}
.tooltip-wrap:hover .tooltip-bubble,
.tooltip-wrap:focus-within .tooltip-bubble {
opacity: 1;
transform: translate(-50%, 0);
}
/* ── Toast ──────────────────────────────────────────────────────── */
.toast-shell {
border: 1px solid var(--border-strong);
background: var(--surface-overlay);
color: var(--text);
box-shadow: 0 16px 36px rgba(0,0,0,0.3), 0 0 22px var(--shadow-1);
backdrop-filter: blur(16px);
border-radius: var(--radius);
}
.toast-shell[data-type="success"] {
border-color: rgba(52, 211, 153, 0.4);
box-shadow: 0 16px 36px rgba(0,0,0,0.3), 0 0 22px rgba(52,211,153,0.18);
}
.toast-shell[data-type="error"] {
border-color: rgba(251, 113, 133, 0.42);
box-shadow: 0 16px 36px rgba(0,0,0,0.3), 0 0 22px rgba(251,113,133,0.18);
}
.toast-shell[data-type="warning"] {
border-color: rgba(251, 191, 36, 0.42);
box-shadow: 0 16px 36px rgba(0,0,0,0.3), 0 0 22px rgba(251,191,36,0.18);
}
.toast-shell[data-type="info"],
.toast-shell[data-type="loading"] {
border-color: rgba(96, 165, 250, 0.35);
box-shadow: 0 16px 36px rgba(0,0,0,0.3), 0 0 22px rgba(96,165,250,0.16);
}
/* ── Footer link ────────────────────────────────────────────────── */
.footer-link {
color: var(--text-muted);
transition: color 160ms ease, transform 160ms ease;
display: inline-block;
}
.footer-link:hover {
color: var(--text);
transform: translateX(2px);
}
/* ── Theme picker (optional) ────────────────────────────────────── */
.pv-theme-picker {
display: inline-flex;
gap: 6px;
align-items: center;
}
.pv-theme-swatch {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid transparent;
cursor: pointer;
transition: transform 160ms ease, border-color 160ms ease;
}
.pv-theme-swatch:hover { transform: scale(1.2); }
.pv-theme-swatch.active { border-color: var(--text); }
/* ── Responsive adjustments ─────────────────────────────────────── */
@media (max-width: 767px) {
.glass {
border-radius: 18px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
0 12px 28px rgba(0,0,0,0.2),
0 0 14px var(--shadow-1);
}
.shell-rail {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
0 10px 22px rgba(0,0,0,0.16);
}
.btn { min-height: 42px; padding: 0.6rem 0.9rem; font-size: 0.83rem; }
.tooltip-bubble { display: none; }
}