376 lines
11 KiB
CSS
376 lines
11 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
|
|
|
|
@import "tailwindcss";
|
|
|
|
/* ============================================================
|
|
TAILWIND V4 THEME — tokens that generate utility classes
|
|
============================================================ */
|
|
@theme {
|
|
/* Original palette — retained */
|
|
--color-pink: #B53082;
|
|
--color-purple: #381B57;
|
|
--color-orange: #F2963A;
|
|
--color-teal: #6DC3BB;
|
|
--color-beige: #C8B99A;
|
|
--color-navy: #0E1628;
|
|
--color-void: #07050F;
|
|
|
|
/* New palette */
|
|
--color-green: #00ed3f;
|
|
--color-amber: #ff8800;
|
|
--color-amber-light: #ffa238;
|
|
--color-red: #cc2200;
|
|
--color-blue: #4466cc;
|
|
--color-bone: #E0D5BE;
|
|
|
|
/* Neutral dark backgrounds */
|
|
--color-bg: #050505;
|
|
--color-surface: #0D0D0D;
|
|
--color-surface-raised: #141414;
|
|
|
|
/* Typography */
|
|
--font-mono: 'IBM Plex Mono', 'Space Mono', ui-monospace, 'Courier New', monospace;
|
|
|
|
/* Zero radius */
|
|
--radius: 0px;
|
|
}
|
|
|
|
/* ============================================================
|
|
SEMANTIC TOKENS — contextual roles mapped to palette
|
|
============================================================ */
|
|
:root {
|
|
/* Backgrounds — neutral dark, no color tint */
|
|
--background: #050505;
|
|
--surface: #0D0D0D;
|
|
--surface-raised: #141414;
|
|
|
|
/* Borders */
|
|
--border: #252525;
|
|
--border-active: #00ed3f;
|
|
|
|
/* Text */
|
|
--text-primary: #00ed3f;
|
|
--text-secondary: #E0D5BE;
|
|
/* SpaceWanderer tweak (v0.1.0): upstream default is #4A4A40 (HSL 60,7%,27%) — too dim for
|
|
secondary text on the near-black background. Brightened to HSL 60,8%,39% (+12pt lightness,
|
|
same warm-gray hue) so muted labels stay readable while remaining clearly muted. */
|
|
--text-muted: #6B6B5C;
|
|
--text-warning: #ff8800;
|
|
--text-danger: #cc2200;
|
|
|
|
/* Accent shortcuts */
|
|
--accent-primary: #00ed3f;
|
|
--accent-secondary: #4466cc;
|
|
--accent-warning: #ff8800;
|
|
|
|
/* Glow — original (kept for backward compat) */
|
|
--glow-teal: 0 0 8px #6DC3BB66, 0 0 20px #6DC3BB33;
|
|
--glow-pink: 0 0 8px #B5308266, 0 0 20px #B5308233;
|
|
--glow-orange: 0 0 8px #F2963A66, 0 0 20px #F2963A33;
|
|
|
|
/* Glow — new palette */
|
|
--glow-green: 0 0 8px #00ed3f66, 0 0 20px #00ed3f33;
|
|
--glow-amber: 0 0 8px #ff880066, 0 0 20px #ff880033;
|
|
--glow-red: 0 0 8px #cc220066, 0 0 20px #cc220033;
|
|
--glow-blue: 0 0 8px #4466cc66, 0 0 20px #4466cc33;
|
|
|
|
/* Text glow — original (kept) */
|
|
--text-glow-teal: 0 0 6px #6DC3BB99, 0 0 14px #6DC3BB55;
|
|
--text-glow-orange: 0 0 6px #F2963A99, 0 0 14px #F2963A55;
|
|
--text-glow-pink: 0 0 6px #B5308299, 0 0 14px #B5308255;
|
|
|
|
/* Text glow — new palette */
|
|
--text-glow-green: 0 0 6px #00ed3f99, 0 0 14px #00ed3f55;
|
|
--text-glow-amber: 0 0 6px #ff880099, 0 0 14px #ff880055;
|
|
--text-glow-red: 0 0 6px #cc220099, 0 0 14px #cc220055;
|
|
--text-glow-blue: 0 0 6px #4466cc99, 0 0 14px #4466cc55;
|
|
|
|
/* Corner notch clip-paths */
|
|
--clip-corner-sm: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
|
|
--clip-corner-md: polygon(10px 0%, 100% 0%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0% 100%, 0% 10px);
|
|
--clip-corner-lg: polygon(16px 0%, 100% 0%, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0% 100%, 0% 16px);
|
|
|
|
/* Geometry */
|
|
--border-width: 1px;
|
|
}
|
|
|
|
/* ============================================================
|
|
KEYFRAME ANIMATIONS
|
|
============================================================ */
|
|
@keyframes flicker {
|
|
0%, 89%, 91%, 93%, 100% { opacity: 1; }
|
|
90% { opacity: 0.4; }
|
|
92% { opacity: 0.8; }
|
|
94% { opacity: 0.6; }
|
|
}
|
|
|
|
@keyframes blink-cursor {
|
|
0%, 49% { opacity: 1; }
|
|
50%, 100% { opacity: 0; }
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0%, 100% { transform: translate(0); }
|
|
10% { transform: translate(-2px, 1px); }
|
|
20% { transform: translate(2px, -1px); }
|
|
30% { transform: translate(-1px, 2px); }
|
|
40% { transform: translate(1px, -1px); }
|
|
50% { transform: translate(0); }
|
|
}
|
|
|
|
@keyframes scanline-move {
|
|
0% { transform: translateY(-100%); }
|
|
100% { transform: translateY(100vh); }
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% { opacity: 0.6; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes data-scroll {
|
|
0% { transform: translateY(0); }
|
|
100% { transform: translateY(-50%); }
|
|
}
|
|
|
|
/* ============================================================
|
|
BASE RESET
|
|
============================================================ */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
html {
|
|
font-size: 14px;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--background);
|
|
color: var(--text-secondary);
|
|
font-family: var(--font-mono);
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Radix Tabs hides inactive content via the `hidden` attribute, but inline display styles (the
|
|
#36 pane-fill flex chain on the WORLD MAP tab) outrank the UA stylesheet — restore semantics. */
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
#root {
|
|
min-height: 100vh;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font-family: var(--font-mono);
|
|
font-size: inherit;
|
|
border-radius: 0;
|
|
}
|
|
|
|
a {
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-shadow: var(--text-glow-green);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-mono);
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: var(--background);
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border);
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--border-active);
|
|
box-shadow: var(--glow-green);
|
|
}
|
|
|
|
/* Text selection */
|
|
::selection {
|
|
background: #00ed3f;
|
|
color: #050505;
|
|
}
|
|
|
|
/* ============================================================
|
|
UTILITY CLASSES
|
|
============================================================ */
|
|
|
|
/* CRT scanline overlay — apply to panels/containers */
|
|
.scanlines {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.scanlines::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: repeating-linear-gradient(
|
|
to bottom,
|
|
transparent 0px,
|
|
transparent 3px,
|
|
rgba(0, 0, 0, 0.12) 3px,
|
|
rgba(0, 0, 0, 0.12) 4px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Phosphor flicker text */
|
|
.flicker {
|
|
animation: flicker 8s infinite;
|
|
}
|
|
|
|
/* Glitch on hover */
|
|
.glitch-hover:hover {
|
|
animation: glitch 0.3s ease-in-out;
|
|
}
|
|
|
|
/* Pulsing glow */
|
|
.pulse-glow {
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Corner notch variants */
|
|
.clip-corner-sm {
|
|
clip-path: var(--clip-corner-sm);
|
|
}
|
|
.clip-corner-md {
|
|
clip-path: var(--clip-corner-md);
|
|
}
|
|
.clip-corner-lg {
|
|
clip-path: var(--clip-corner-lg);
|
|
}
|
|
|
|
/* ============================================================
|
|
THEME: STAR WARS
|
|
Holographic blue primary · bone/gold warnings · teal info
|
|
Deep blue-black backgrounds
|
|
============================================================ */
|
|
[data-theme="star-wars"] {
|
|
/* Remap color primitives used by components */
|
|
--color-green: #1a6dff; /* blue hologram = "active" */
|
|
--color-amber: #E0D5BE; /* bone/gold = "warning" */
|
|
--color-red: #cc0000; /* Sith red = "danger" */
|
|
--color-blue: #6DC3BB; /* teal = "info" */
|
|
|
|
/* Backgrounds — deep blue-black */
|
|
--background: #020509;
|
|
--surface: #060E18;
|
|
--surface-raised: #0C1826;
|
|
|
|
/* Borders */
|
|
--border: #152030;
|
|
--border-active: #1a6dff;
|
|
|
|
/* Text */
|
|
--text-primary: #1a6dff;
|
|
--text-secondary: #E0D5BE;
|
|
--text-muted: #2A3A52;
|
|
--text-warning: #E0D5BE;
|
|
--text-danger: #cc0000;
|
|
|
|
/* Accent shortcuts */
|
|
--accent-primary: #1a6dff;
|
|
--accent-secondary: #6DC3BB;
|
|
--accent-warning: #E0D5BE;
|
|
|
|
/* Glow — remap green→blue, amber→bone, blue→teal */
|
|
--glow-green: 0 0 8px rgba(26,109,255,0.40), 0 0 20px rgba(26,109,255,0.20);
|
|
--glow-amber: 0 0 8px rgba(224,213,190,0.35), 0 0 20px rgba(224,213,190,0.15);
|
|
--glow-red: 0 0 8px rgba(204,0,0,0.40), 0 0 20px rgba(204,0,0,0.20);
|
|
--glow-blue: 0 0 8px rgba(109,195,187,0.40), 0 0 20px rgba(109,195,187,0.20);
|
|
|
|
/* Text glow — remap */
|
|
--text-glow-green: 0 0 6px rgba(26,109,255,0.60), 0 0 14px rgba(26,109,255,0.30);
|
|
--text-glow-amber: 0 0 6px rgba(224,213,190,0.55), 0 0 14px rgba(224,213,190,0.25);
|
|
--text-glow-red: 0 0 6px rgba(204,0,0,0.60), 0 0 14px rgba(204,0,0,0.30);
|
|
--text-glow-blue: 0 0 6px rgba(109,195,187,0.60), 0 0 14px rgba(109,195,187,0.30);
|
|
}
|
|
|
|
[data-theme="star-wars"] ::selection {
|
|
background: #1a6dff;
|
|
color: #020509;
|
|
}
|
|
|
|
/* ============================================================
|
|
THEME: ALIEN
|
|
Bone/ivory primary · amber warnings · acid green info
|
|
Warm organic dark backgrounds
|
|
============================================================ */
|
|
[data-theme="alien"] {
|
|
/* Remap color primitives used by components */
|
|
--color-green: #E0D5BE; /* bone = "active" (bleached, eerie) */
|
|
--color-amber: #ff8800; /* amber = "warning" (Nostromo lights) */
|
|
--color-red: #cc2200; /* blood red = "danger" */
|
|
--color-blue: #00ed3f; /* acid green = "info" (bioluminescent) */
|
|
|
|
/* Backgrounds — warm organic dark */
|
|
--background: #040302;
|
|
--surface: #080604;
|
|
--surface-raised: #0E0A06;
|
|
|
|
/* Borders */
|
|
--border: #201808;
|
|
--border-active: #E0D5BE;
|
|
|
|
/* Text */
|
|
--text-primary: #E0D5BE;
|
|
--text-secondary: #C8B99A;
|
|
--text-muted: #403020;
|
|
--text-warning: #ff8800;
|
|
--text-danger: #cc2200;
|
|
|
|
/* Accent shortcuts */
|
|
--accent-primary: #E0D5BE;
|
|
--accent-secondary: #00ed3f;
|
|
--accent-warning: #ff8800;
|
|
|
|
/* Glow — remap green→bone, blue→acid-green */
|
|
--glow-green: 0 0 8px rgba(224,213,190,0.35), 0 0 20px rgba(224,213,190,0.15);
|
|
--glow-amber: 0 0 8px rgba(255,136,0,0.40), 0 0 20px rgba(255,136,0,0.20);
|
|
--glow-red: 0 0 8px rgba(204,34,0,0.40), 0 0 20px rgba(204,34,0,0.20);
|
|
--glow-blue: 0 0 8px rgba(0,237,63,0.40), 0 0 20px rgba(0,237,63,0.20);
|
|
|
|
/* Text glow — remap */
|
|
--text-glow-green: 0 0 6px rgba(224,213,190,0.55), 0 0 14px rgba(224,213,190,0.25);
|
|
--text-glow-amber: 0 0 6px rgba(255,136,0,0.60), 0 0 14px rgba(255,136,0,0.30);
|
|
--text-glow-red: 0 0 6px rgba(204,34,0,0.60), 0 0 14px rgba(204,34,0,0.30);
|
|
--text-glow-blue: 0 0 6px rgba(0,237,63,0.60), 0 0 14px rgba(0,237,63,0.30);
|
|
}
|
|
|
|
[data-theme="alien"] ::selection {
|
|
background: #E0D5BE;
|
|
color: #040302;
|
|
}
|