/* GALACTIC CTF THEME LIBRARY Usage: */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;600&family=Share+Tech+Mono&family=VT323&display=swap'); :root { /* Common Fonts */ --font-ui: 'Rajdhani', sans-serif; --font-header: 'Orbitron', sans-serif; --font-mono: 'Share Tech Mono', monospace; --font-pixel: 'VT323', monospace; } /* Global Reset */ /* Global Reset */ html, body { margin: 0; padding: 0; min-height: 100vh; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .themed-container { width: 100%; max-width: 1000px; margin: 0 auto; padding: 20px; } .panel { width: 100%; margin-bottom: 20px; padding: 20px; } /* --- SECTOR 1: EMPIRE BASE (Administration) --- */ .theme-sector-1 { --bg-color: #1a1a1a; --primary-color: #ffb84d; /* Amber */ --accent-color: #cc8400; --font-main: var(--font-mono); --border-style: solid; } body.theme-sector-1, .theme-sector-1 .themed-container { background-color: var(--bg-color); color: var(--primary-color); font-family: var(--font-main); } .theme-sector-1 .btn, .theme-sector-1 .panel { border: 2px solid var(--primary-color); background: rgba(255, 184, 77, 0.1); box-shadow: 0 0 10px var(--primary-color); } /* --- SECTOR 2: KUAT YARDS (Neon/Cyberpunk) --- */ .theme-sector-2 { --bg-color: #0d0015; /* Dark Purple/Black */ --primary-color: #00e5ff; /* Cyan */ --accent-color: #d500f9; /* Neon Pink */ --highlight-color: #00e5ff; --font-main: var(--font-header); } body.theme-sector-2, .theme-sector-2 .themed-container { background-color: var(--bg-color); /* Imperial Wall Panel Pattern */ background-image: linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.5) 50%), linear-gradient(rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 100%); background-size: 100px 100%, 100% 50px; color: var(--primary-color); font-family: var(--font-main); min-height: 100vh; } .theme-sector-2 .btn, .theme-sector-2 .panel { background: #2b2b2b; border: none; box-shadow: 0 0 0 2px #444; /* Tech Border */ text-transform: uppercase; } /* --- SECTOR 3: SIENAR FLEET (Lab) --- */ .theme-sector-3 { --bg-color: #2c3e50; --primary-color: #a29bfe; /* Violet */ --accent-color: #6c5ce7; --font-main: var(--font-ui); } body.theme-sector-3, .theme-sector-3 .themed-container { background: radial-gradient(circle at center, #2c3e50, #000); color: var(--primary-color); font-family: var(--font-main); min-height: 100vh; } .theme-sector-3 .btn, .theme-sector-3 .panel { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px); border: 1px solid rgba(162, 155, 254, 0.5); border-radius: 20px; color: #fff; } /* --- SECTOR 4: ISB HQ (Intel) --- */ .theme-sector-4 { --bg-color: #000; --primary-color: #0f0; /* Terminal Green */ --font-main: var(--font-pixel); } body.theme-sector-4, .theme-sector-4 .themed-container { background-color: var(--bg-color); color: var(--primary-color); font-family: var(--font-main); } .theme-sector-4 .panel { border: 1px dashed var(--primary-color); padding: 10px; } /* --- SECTOR 5: DEATH STAR (Core) --- */ .theme-sector-5 { --bg-color: #050000; --primary-color: #ff3333; /* Sith Red */ --font-main: var(--font-header); } body.theme-sector-5, .theme-sector-5 .themed-container { background: var(--bg-color); color: var(--primary-color); font-family: var(--font-main); } .theme-sector-5 .btn, .theme-sector-5 .panel { border: 2px solid var(--primary-color); background: rgba(50, 0, 0, 0.8); clip-path: polygon(0 0, 100% 0, 100% 80%, 90% 100%, 0 100%); text-shadow: 0 0 10px var(--primary-color); } /* --- CYBERPUNK THEME (Used in Dashboard) --- */ .theme-cyberpunk { --bg-color: #0a0010; /* Very Dark Purple */ --primary-color: #00d2ff; /* Cyan */ --accent-color: #f500ff; /* Pink/Magenta */ --font-main: var(--font-ui); } body.theme-cyberpunk, .theme-cyberpunk .themed-container { background-color: var(--bg-color); background-image: linear-gradient(0deg, transparent 24%, rgba(213, 0, 249, .05) 25%, rgba(213, 0, 249, .05) 26%, transparent 27%, transparent 74%, rgba(213, 0, 249, .05) 75%, rgba(213, 0, 249, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(213, 0, 249, .05) 25%, rgba(213, 0, 249, .05) 26%, transparent 27%, transparent 74%, rgba(213, 0, 249, .05) 75%, rgba(213, 0, 249, .05) 76%, transparent 77%, transparent); background-size: 50px 50px; color: var(--primary-color); font-family: var(--font-main); } .theme-cyberpunk .panel { border: 1px solid var(--accent-color); box-shadow: 0 0 10px rgba(245, 0, 255, 0.2); border-radius: 10px; } .theme-cyberpunk .panel-header { border-bottom: 1px solid var(--accent-color); } .theme-cyberpunk .header-title { color: var(--primary-color); text-shadow: 0 0 5px var(--primary-color); } /* --- ANIMATION ENHANCEMENTS --- */ /* 1. Screen Shake */ @keyframes screen-shake { 0% { transform: translate(0, 0) rotate(0deg); } 10% { transform: translate(-5px, -5px) rotate(-1deg); } 20% { transform: translate(5px, 5px) rotate(1deg); } 30% { transform: translate(-5px, 5px) rotate(0deg); } 40% { transform: translate(5px, -5px) rotate(1deg); } 50% { transform: translate(-2px, 2px) rotate(-1deg); } 60% { transform: translate(2px, -2px) rotate(0deg); } 70% { transform: translate(0, 5px) rotate(-1deg); } 80% { transform: translate(-5px, 0) rotate(1deg); } 90% { transform: translate(2px, 1px) rotate(0deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .shake-active { animation: screen-shake 0.5s cubic-bezier(.36,.07,.19,.97) both; } /* 2. Glitch Text */ @keyframes glitch-skew { 0% { transform: skew(0deg); } 20% { transform: skew(-2deg); } 40% { transform: skew(2deg); } 60% { transform: skew(-1deg); } 80% { transform: skew(1deg); } 100% { transform: skew(0deg); } } @keyframes glitch-anim-1 { 0% { clip: rect(20px, 9999px, 10px, 0); } 20% { clip: rect(60px, 9999px, 80px, 0); } 40% { clip: rect(10px, 9999px, 50px, 0); } 60% { clip: rect(80px, 9999px, 20px, 0); } 80% { clip: rect(30px, 9999px, 70px, 0); } 100% { clip: rect(50px, 9999px, 90px, 0); } } @keyframes glitch-anim-2 { 0% { clip: rect(80px, 9999px, 30px, 0); } 20% { clip: rect(10px, 9999px, 40px, 0); } 40% { clip: rect(50px, 9999px, 20px, 0); } 60% { clip: rect(20px, 9999px, 60px, 0); } 80% { clip: rect(60px, 9999px, 10px, 0); } 100% { clip: rect(40px, 9999px, 80px, 0); } } .glitch-text { position: relative; animation: glitch-skew 1s infinite linear alternate-reverse; } .glitch-text::before { content: attr(data-text); position: absolute; left: -2px; text-shadow: 1px 0 #ff00c1; top: 0; color: white; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: glitch-anim-1 2s infinite linear alternate-reverse; } .glitch-text::after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -1px 0 #00fff9; top: 0; color: white; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: glitch-anim-2 3s infinite linear alternate-reverse; }