/* 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 */ 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 (Factory) --- */ .theme-sector-2 { --bg-color: #101010; --primary-color: #d1d1d1; /* Durasteel White/Grey */ --accent-color: #ff3333; /* Imperial Red */ --highlight-color: #0088ff; /* Console Blue */ --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 SYSTEMS (R&D Lab) --- */ .theme-sector-3 { --bg-color: #0a0a14; --primary-color: #a29bfe; /* Violet */ --accent-color: #6c5ce7; /* Deep Purple */ --highlight-color: #00d9ff; /* Holographic Cyan */ --font-main: var(--font-ui); } body.theme-sector-3, .theme-sector-3 .themed-container { background: radial-gradient(ellipse at 20% 0%, rgba(108, 92, 231, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(0, 217, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at center, #0f0f1a 0%, #050508 100%); /* Holographic Grid Overlay */ background-image: linear-gradient(rgba(162, 155, 254, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(162, 155, 254, 0.02) 1px, transparent 1px), radial-gradient(ellipse at 20% 0%, rgba(108, 92, 231, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(0, 217, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at center, #0f0f1a 0%, #050508 100%); background-size: 30px 30px, 30px 30px, 100% 100%, 100% 100%, 100% 100%; color: var(--primary-color); font-family: var(--font-main); min-height: 100vh; } .theme-sector-3 .btn, .theme-sector-3 .panel { background: rgba(20, 20, 40, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(162, 155, 254, 0.3); border-radius: 4px; color: #fff; box-shadow: 0 0 20px rgba(108, 92, 231, 0.15), inset 0 0 30px rgba(0, 0, 0, 0.3); } .theme-sector-3 .btn:hover { border-color: var(--highlight-color); box-shadow: 0 0 30px rgba(0, 217, 255, 0.3), inset 0 0 20px rgba(0, 217, 255, 0.1); } /* Sector 3 Shimmer Animation */ @keyframes sector3-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes sector3-pulse { 0%, 100% { box-shadow: 0 0 5px var(--primary-color), 0 0 10px rgba(162, 155, 254, 0.3); } 50% { box-shadow: 0 0 15px var(--primary-color), 0 0 30px rgba(162, 155, 254, 0.5); } } /* --- 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); }