/* 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 (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 a { color: var(--highlight-color); text-decoration: none; } .theme-sector-2 a:hover { color: #fff; text-shadow: 0 0 5px var(--highlight-color); } .theme-sector-2 .btn, .theme-sector-2 .panel { 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); }