Files
dark-lord/app/globals.css
drjones 78a071ba02 Harden onion boot flow and deepen site surfaces
Add persistent onion key backup and restore, improve startup resilience, and flesh out the major site verticals with richer navigation, search coverage, and operator documentation.

Made-with: Cursor
2026-04-07 21:35:52 -07:00

294 lines
7.7 KiB
CSS

@import "tailwindcss";
:root {
--background: #0a0a0a;
--foreground: #f0f0f0;
--primary: #8b00ff;
--secondary: #00e0ff;
--accent: #ff0055;
--muted: #1a1a1a;
--card: rgba(20, 20, 30, 0.8);
--glass: rgba(255, 255, 255, 0.05);
--glass-strong: rgba(255, 255, 255, 0.075);
--ring: rgba(0, 255, 255, 0.35);
--shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.55);
--shadow-glass: 0 10px 40px rgba(0, 0, 0, 0.35);
--neon-cyan: #00ffff;
--neon-purple: #9d00ff;
--neon-pink: #ff00ff;
--neon-green: #00ff9d;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-rajdhani), system-ui, sans-serif;
--font-mono: var(--font-orbitron), monospace;
--color-primary: var(--primary);
--color-secondary: var(--secondary);
--color-accent: var(--accent);
--color-muted: var(--muted);
--color-card: var(--card);
--color-glass: var(--glass);
--color-neon-cyan: var(--neon-cyan);
--color-neon-purple: var(--neon-purple);
--color-neon-pink: var(--neon-pink);
--color-neon-green: var(--neon-green);
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--animate-glow: glow 1.5s ease-in-out infinite alternate;
--animate-float: float 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes glow {
from { filter: drop-shadow(0 0 2px var(--neon-cyan)); }
to { filter: drop-shadow(0 0 10px var(--neon-purple)); }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
overflow-x: hidden;
min-height: 100vh;
margin: 0;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image:
radial-gradient(1200px 700px at 15% 20%, rgba(157, 0, 255, 0.18) 0%, transparent 55%),
radial-gradient(900px 600px at 85% 65%, rgba(0, 255, 255, 0.16) 0%, transparent 55%),
radial-gradient(700px 450px at 65% 15%, rgba(255, 0, 255, 0.10) 0%, transparent 50%),
radial-gradient(900px 700px at 30% 85%, rgba(0, 255, 157, 0.10) 0%, transparent 55%),
linear-gradient(180deg, rgba(255,255,255,0.03), transparent 55%);
background-attachment: fixed;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -5;
opacity: 0.8;
background-image:
repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.02) 0px,
rgba(255, 255, 255, 0.02) 1px,
transparent 2px,
transparent 6px
),
repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.18) 0px,
rgba(0, 0, 0, 0.18) 1px,
transparent 2px,
transparent 8px
);
mix-blend-mode: soft-light;
}
/* Glass morphism */
.glass {
backdrop-filter: blur(10px);
background: var(--glass);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: var(--shadow-glass);
}
.glass:hover {
border-color: rgba(0, 255, 255, 0.18);
}
/* Neon text */
.neon-text {
text-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
}
/* Glowing border */
.glow-border {
border: 1px solid transparent;
background: linear-gradient(var(--card), var(--card)) padding-box,
linear-gradient(45deg, var(--neon-cyan), var(--neon-purple)) border-box;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--muted);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(var(--neon-cyan), var(--neon-purple));
border-radius: 4px;
}
/* Selection */
::selection {
background-color: var(--primary);
color: white;
}
/* ---- Luxury polish overrides (late-loaded) ---- */
a {
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 3px;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--muted);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(var(--neon-cyan), var(--neon-purple));
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(var(--neon-purple), var(--neon-pink));
}
::selection {
background-color: rgba(157, 0, 255, 0.55);
color: white;
}
.lux-title {
background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lux-panel {
background: var(--glass-strong);
box-shadow: var(--shadow-soft);
border: 1px solid rgba(255, 255, 255, 0.12);
}
/* ========== SATELLITE PAGE THEMES (distinct feel from main hub) ========== */
/* Editorial: warm paper, serif, magazine/blog */
.theme-editorial {
min-height: 100vh;
background: #f5f0e8;
color: #2c2420;
font-family: Georgia, "Times New Roman", serif;
}
.theme-editorial a { color: #6b4e71; }
.theme-editorial a:hover { color: #3d2d42; text-decoration: underline; }
.theme-editorial .theme-card {
background: #fffef9;
border: 1px solid #e0d9ce;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.theme-editorial .theme-accent { color: #6b4e71; }
.theme-editorial .theme-header { border-color: #e0d9ce; background: #fffef9; }
/* Terminal: CRT green/amber on black, monospace */
.theme-terminal {
min-height: 100vh;
background: #0d1117;
color: #7ee787;
font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
}
.theme-terminal::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,0.15) 2px,
rgba(0,0,0,0.15) 4px
);
opacity: 0.4;
}
.theme-terminal a { color: #f0883e; }
.theme-terminal a:hover { color: #ffb86c; }
.theme-terminal .theme-card {
background: rgba(13, 17, 23, 0.9);
border: 1px solid #30363d;
box-shadow: 0 0 0 1px rgba(126, 231, 135, 0.1);
}
.theme-terminal .theme-accent { color: #f0883e; }
.theme-terminal .theme-header { border-color: #30363d; background: rgba(13, 17, 23, 0.95); }
/* Zine: high contrast, bold, punk */
.theme-zine {
min-height: 100vh;
background: #0a0a0a;
color: #f5f5f5;
font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
letter-spacing: 0.02em;
}
.theme-zine a { color: #ff6b35; }
.theme-zine a:hover { color: #ff9f7a; }
.theme-zine .theme-card {
background: #141414;
border: 3px solid #333;
box-shadow: 4px 4px 0 #ff6b35;
}
.theme-zine .theme-accent { color: #ff6b35; }
.theme-zine .theme-header { border-color: #333; background: #0a0a0a; }
.theme-zine h1, .theme-zine h2 { font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; }
/* Institutional: cold blue-gray, formal gov/corp */
.theme-institutional {
min-height: 100vh;
background: #e8eef4;
color: #1a2332;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
.theme-institutional a { color: #1e5a8e; }
.theme-institutional a:hover { color: #0d3d66; text-decoration: underline; }
.theme-institutional .theme-card {
background: #fff;
border: 1px solid #c5d0dc;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.theme-institutional .theme-accent { color: #1e5a8e; }
.theme-institutional .theme-header { border-color: #c5d0dc; background: #fff; }
/* Nature: earthy green, organic (e.g. Trees Authority) */
.theme-nature {
min-height: 100vh;
background: #1a2f1a;
color: #c8e6c9;
font-family: "Gill Sans", "Trebuchet MS", sans-serif;
}
.theme-nature a { color: #81c784; }
.theme-nature a:hover { color: #a5d6a7; }
.theme-nature .theme-card {
background: rgba(27, 55, 27, 0.9);
border: 1px solid #2e7d32;
box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.theme-nature .theme-accent { color: #81c784; }
.theme-nature .theme-header { border-color: #2e7d32; background: rgba(26, 47, 26, 0.98); }