/* 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; } /* Laser Icon - Factory Style */ .theme-sector-2 .laser-icon { width: 50px; height: 35px; background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); border: 2px solid #444; border-left: 3px solid var(--accent-color); position: relative; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 51, 51, 0.3); } .theme-sector-2 .laser-icon::before { content: ''; position: absolute; width: 80%; height: 2px; background: linear-gradient(90deg, var(--accent-color), transparent); left: 10%; animation: factory-pulse 1.5s ease-in-out infinite; box-shadow: 0 0 10px var(--accent-color); } @keyframes factory-pulse { 0%, 100% { opacity: 0.6; transform: scaleX(0.8); } 50% { opacity: 1; transform: scaleX(1); } } /* --- SECTOR 3: SIENAR FLEET SYSTEMS (R&D Lab) --- */ .theme-cyan-main { --bg-color: #0a0a14; --primary-color: #00d9ff; /* Cyan */ --accent-color: #00ff88; /* Electric Green */ --highlight-color: #00ffff; /* Bright Cyan */ --font-main: var(--font-ui); } body.theme-cyan-main, .theme-cyan-main .themed-container { background: radial-gradient(ellipse at 20% 0%, rgba(0, 217, 255, 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(0, 217, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 217, 255, 0.02) 1px, transparent 1px), radial-gradient(ellipse at 20% 0%, rgba(0, 217, 255, 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-cyan-main .btn, .theme-cyan-main .panel { background: rgba(0, 10, 20, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(0, 217, 255, 0.3); border-radius: 4px; color: #fff; box-shadow: 0 0 20px rgba(0, 217, 255, 0.15), inset 0 0 30px rgba(0, 0, 0, 0.3); } .theme-cyan-main .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(0, 217, 255, 0.3); } 50% { box-shadow: 0 0 15px var(--primary-color), 0 0 30px rgba(0, 217, 255, 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); } /* Sector 3: Sienar Fleet Systems (Holographic Stealth Theme) */ /* ============================================ ANIMATIONS ============================================ */ @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 20px rgba(0, 217, 255, 0.3); } 50% { box-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 40px rgba(0, 217, 255, 0.5); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes border-glow { 0%, 100% { border-color: rgba(0, 217, 255, 0.5); } 50% { border-color: rgba(0, 217, 255, 0.8); } } @keyframes text-flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.8; } 94% { opacity: 1; } 97% { opacity: 0.9; } 98% { opacity: 1; } } @keyframes blink { 50% { opacity: 0; } } @keyframes data-pulse { 0%, 100% { color: var(--highlight-color); text-shadow: 0 0 5px var(--highlight-color); } 50% { color: #fff; text-shadow: 0 0 15px var(--highlight-color); } } /* ============================================ SCAN LINE OVERLAY ============================================ */ .scanline-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 217, 255, 0.03) 2px, rgba(0, 217, 255, 0.03) 4px); } .scanline-overlay::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 10px; background: linear-gradient(180deg, rgba(0, 217, 255, 0.15), transparent); animation: scanline 4s linear infinite; } /* ============================================ PAGE HEADER ============================================ */ .page-header { background: rgba(10, 10, 20, 0.95); border-bottom: 1px solid var(--primary-color); padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-header); box-shadow: 0 0 30px rgba(0, 217, 255, 0.3), 0 5px 20px rgba(0, 0, 0, 0.5); position: relative; } .page-header::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--highlight-color), var(--primary-color), var(--highlight-color), transparent); animation: shimmer 3s linear infinite; background-size: 200% 100%; } .brand-logo { color: var(--primary-color); font-size: 1.3em; letter-spacing: 3px; font-weight: 700; display: flex; align-items: center; gap: 12px; text-shadow: 0 0 10px var(--primary-color); animation: text-flicker 5s infinite; } .brand-logo::before { content: "⬡"; font-size: 1.4em; color: var(--highlight-color); animation: pulse-glow 2s ease-in-out infinite; text-shadow: 0 0 15px var(--highlight-color); } .top-nav { font-family: var(--font-mono); font-size: 0.8em; color: #666; letter-spacing: 1px; } .classified-text { color: var(--accent-color); font-weight: bold; animation: data-pulse 2s infinite; } /* ============================================ PAGE FOOTER ============================================ */ .page-footer { background: rgba(10, 10, 20, 0.95); border-top: 1px solid rgba(0, 217, 255, 0.5); padding: 12px 20px; text-align: center; font-size: 0.7em; font-family: var(--font-mono); position: fixed; bottom: 0; width: 100%; box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5); } .footer-content { display: flex; flex-direction: column; gap: 4px; } .footer-warning { color: var(--primary-color); letter-spacing: 2px; } .footer-classified { color: #444; font-size: 0.9em; } /* ============================================ CONTAINER ============================================ */ .container { max-width: 850px; margin: 40px auto 100px auto; padding: 20px; } /* ============================================ PANEL (Glassmorphism + Holographic) ============================================ */ .panel { background: rgba(0, 10, 20, 0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(0, 217, 255, 0.3); border-radius: 4px; padding: 30px; box-shadow: 0 0 40px rgba(0, 217, 255, 0.2), inset 0 0 60px rgba(0, 0, 0, 0.3); margin-bottom: 20px; position: relative; overflow: hidden; animation: border-glow 4s ease-in-out infinite; } /* Corner Brackets */ .panel::before, .panel::after { content: ""; position: absolute; width: 30px; height: 30px; border: 2px solid var(--highlight-color); pointer-events: none; } .panel::before { top: 10px; left: 10px; border-right: none; border-bottom: none; } .panel::after { bottom: 10px; right: 10px; border-left: none; border-top: none; } /* Holographic Grid Background */ .panel { background-image: linear-gradient(rgba(0, 217, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 217, 255, 0.03) 1px, transparent 1px); background-size: 25px 25px; } /* ============================================ PANEL HEADER ============================================ */ .panel-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0, 217, 255, 0.3); padding-bottom: 20px; margin-bottom: 25px; } .header-title { color: var(--primary-color); margin: 0; font-size: 1.4em; letter-spacing: 3px; font-family: var(--font-header); text-shadow: 0 0 20px rgba(0, 217, 255, 0.5); } .header-meta { font-family: var(--font-mono); color: #666; font-size: 0.8em; text-align: right; line-height: 1.6; } .sec-level { color: var(--highlight-color); font-weight: bold; } /* ============================================ INTERACTION ZONE ============================================ */ .interaction-zone { margin: 40px 0; text-align: center; } .zone-title { color: var(--highlight-color); margin-bottom: 10px; font-family: var(--font-header); font-size: 1.1em; letter-spacing: 2px; } .zone-desc { font-size: 0.9em; color: rgba(255, 255, 255, 0.6); margin-bottom: 30px; font-family: var(--font-ui); } /* ============================================ INPUT FIELDS ============================================ */ .input-group { position: relative; display: inline-block; width: 70%; margin-bottom: 25px; } .holo-input { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 217, 255, 0.4); color: #fff; padding: 14px 20px; width: 100%; font-family: var(--font-mono); text-align: center; font-size: 1em; letter-spacing: 2px; border-radius: 2px; transition: all 0.3s ease; } .holo-input::placeholder { color: rgba(0, 217, 255, 0.5); } .holo-input:focus { border-color: var(--highlight-color); outline: none; box-shadow: 0 0 20px rgba(0, 217, 255, 0.3), inset 0 0 20px rgba(0, 217, 255, 0.1); } .input-scanline { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--highlight-color), transparent); animation: scanline 2s linear infinite; pointer-events: none; opacity: 0.5; } /* ============================================ BUTTONS ============================================ */ .btn { background: rgba(0, 217, 255, 0.2); color: var(--primary-color); border: 1px solid rgba(0, 217, 255, 0.5); padding: 12px 30px; font-family: var(--font-header); text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; font-size: 0.95em; letter-spacing: 2px; position: relative; overflow: hidden; border-radius: 2px; } .btn:hover { background: rgba(0, 217, 255, 0.4); border-color: var(--highlight-color); box-shadow: 0 0 30px rgba(0, 217, 255, 0.4); color: #fff; } .btn-primary { background: linear-gradient(135deg, rgba(0, 217, 255, 0.3), rgba(0, 217, 255, 0.2)); border-color: var(--highlight-color); } .btn-primary:hover { background: linear-gradient(135deg, rgba(0, 217, 255, 0.5), rgba(0, 217, 255, 0.4)); } .holo-btn .btn-glow { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .holo-btn:hover .btn-glow { left: 100%; } /* ============================================ DATA GRID ============================================ */ .data-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin: 30px 0; } .data-cell { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 217, 255, 0.2); padding: 15px; text-align: center; border-radius: 2px; transition: all 0.3s ease; } .data-cell:hover { border-color: var(--highlight-color); box-shadow: 0 0 15px rgba(0, 217, 255, 0.2); } .data-label { display: block; font-family: var(--font-mono); font-size: 0.7em; color: #666; margin-bottom: 8px; letter-spacing: 1px; } .data-value { display: block; font-family: var(--font-header); font-size: 0.9em; color: var(--primary-color); letter-spacing: 1px; } .data-value.active { color: var(--highlight-color); animation: data-pulse 2s infinite; } /* ============================================ TERMINAL LOG ============================================ */ .terminal-log { background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 217, 255, 0.3); border-radius: 2px; padding: 15px; font-family: var(--font-mono); font-size: 0.8em; text-align: left; max-height: 150px; overflow-y: auto; margin-top: 25px; position: relative; } .log-header { color: var(--highlight-color); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(0, 217, 255, 0.2); font-size: 0.9em; } .log-entry { color: rgba(255, 255, 255, 0.7); margin-bottom: 6px; padding-left: 10px; border-left: 2px solid transparent; transition: all 0.2s ease; } .log-entry:hover { border-left-color: var(--highlight-color); background: rgba(0, 217, 255, 0.05); } .log-entry .status-ok { color: #00ff88; } .log-entry.warning { color: #ffaa00; border-left-color: #ffaa00; } .log-entry.error { color: #ff4444; border-left-color: #ff4444; } .cursor { animation: blink 1s infinite; color: var(--highlight-color); } /* ============================================ STATUS LINE ============================================ */ .status-line { border-top: 1px solid rgba(0, 217, 255, 0.2); padding-top: 15px; margin-top: 25px; font-size: 0.75em; color: #555; display: flex; justify-content: space-between; font-family: var(--font-mono); } .status-item { display: flex; align-items: center; gap: 6px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #444; } .status-dot.active { background: #00ff88; box-shadow: 0 0 10px #00ff88; animation: pulse-glow 2s infinite; } .status-value { color: #00ff88; } /* ============================================ SCROLLBAR STYLING ============================================ */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); } ::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--highlight-color); } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 768px) { .page-header { flex-direction: column; gap: 10px; text-align: center; } .data-grid { grid-template-columns: 1fr; } .input-group { width: 100%; } .status-line { flex-direction: column; gap: 10px; text-align: center; } } /* Custom Scrollbars */ ::-webkit-scrollbar { width: 6px; background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-thumb { background: var(--highlight-color); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #fff; box-shadow: 0 0 10px var(--highlight-color); }