/* =============================================================== FUTURISTIC THEME — shared across all pages Include via: And: Optional: =============================================================== */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=JetBrains+Mono:wght@400;700&display=swap'); :root { --fut-cyan: #00F0FF; --fut-magenta: #FF00AA; --fut-violet: #8B5CF6; --fut-gold: #FFD700; --fut-bg: #02000A; --fut-text: #E0F7FF; --fut-dim: #6B7A99; } body.fut-theme { background: var(--fut-bg) !important; color: var(--fut-text); font-family: 'Sarabun', system-ui, sans-serif; } /* ===== Background layers ===== */ .fut-video-bg { position: fixed; inset: 0; z-index: -4; background: radial-gradient(ellipse at 20% 30%, rgba(139,92,246,0.3) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(0,240,255,0.25) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(255,0,170,0.18) 0%, transparent 60%), linear-gradient(135deg, #02000A 0%, #0A0520 50%, #000510 100%); background-size: 200% 200%; animation: fut-bg 18s ease infinite; } @keyframes fut-bg { 0%,100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } } .fut-grid-bg { position: fixed; inset: 0; z-index: -3; background-image: linear-gradient(rgba(0,240,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,0.04) 1px, transparent 1px); background-size: 50px 50px; transform: perspective(500px) rotateX(60deg) translateY(30vh) scale(1.5); -webkit-mask-image: linear-gradient(to top, black 20%, transparent 80%); mask-image: linear-gradient(to top, black 20%, transparent 80%); animation: fut-grid 20s linear infinite; pointer-events: none; } @keyframes fut-grid { from { background-position: 0 0; } to { background-position: 0 50px; } } .fut-scanlines { position: fixed; inset: 0; z-index: -1; background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0,240,255,0.012) 2px, rgba(0,240,255,0.012) 4px); pointer-events: none; } #fut-particles { position: fixed; inset: 0; z-index: -2; pointer-events: none; } /* ===== Navbar ===== */ body.fut-theme .navbar { background: rgba(2,0,10,0.7) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,240,255,0.15) !important; } body.fut-theme .navbar-brand { font-family: 'Orbitron', monospace !important; font-weight: 900 !important; letter-spacing: 2px; background: linear-gradient(135deg, var(--fut-cyan) 0%, var(--fut-magenta) 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; text-shadow: none !important; } body.fut-theme .navbar-nav a { font-family: 'JetBrains Mono', monospace !important; font-size: 0.85rem !important; letter-spacing: 1px; color: var(--fut-dim) !important; transition: color 0.2s, text-shadow 0.2s; } body.fut-theme .navbar-nav a:hover { color: var(--fut-cyan) !important; text-shadow: 0 0 10px var(--fut-cyan); } body.fut-theme .navbar-nav a.active { color: var(--fut-cyan) !important; text-shadow: 0 0 10px var(--fut-cyan); } body.fut-theme .nav-credits { font-family: 'JetBrains Mono', monospace !important; padding: 0.35rem 0.9rem !important; border: 1px solid rgba(0,240,255,0.3) !important; background: rgba(0,240,255,0.05) !important; color: var(--fut-cyan) !important; border-radius: 2px !important; font-size: 0.8rem !important; } body.fut-theme .nav-credits #nav-credits { color: var(--fut-gold) !important; text-shadow: 0 0 8px rgba(255,215,0,0.4); font-weight: 700; } body.fut-theme .navbar-nav a[onclick*="logout"] { color: var(--fut-magenta) !important; } body.fut-theme .navbar-nav a[onclick*="logout"]:hover { text-shadow: 0 0 10px var(--fut-magenta); } /* ===== Generic cards ===== */ body.fut-theme .card { background: rgba(10,5,25,0.5) !important; border: 1px solid rgba(0,240,255,0.2) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 2px !important; position: relative; } body.fut-theme .card-title { font-family: 'Orbitron', monospace !important; letter-spacing: 2px !important; color: var(--fut-cyan) !important; } body.fut-theme .page-header h1, body.fut-theme h1, body.fut-theme h2, body.fut-theme h3 { font-family: 'Orbitron', sans-serif !important; letter-spacing: -0.5px !important; } body.fut-theme .page-header h1 { background: linear-gradient(135deg, var(--fut-cyan) 0%, var(--fut-magenta) 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; } body.fut-theme .page-header p, body.fut-theme .text-muted, body.fut-theme .text-secondary { color: var(--fut-dim) !important; } /* ===== Stat cards ===== */ body.fut-theme .stat-card { background: rgba(10,5,25,0.5) !important; border: 1px solid rgba(0,240,255,0.2) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 2px !important; position: relative; } body.fut-theme .stat-card::before, body.fut-theme .stat-card::after { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid var(--fut-cyan); pointer-events: none; } body.fut-theme .stat-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } body.fut-theme .stat-card::after { bottom: -1px; right: -1px; border-left: none; border-top: none; } body.fut-theme .stat-value { font-family: 'Orbitron', monospace !important; background: linear-gradient(180deg, var(--fut-text), var(--fut-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } body.fut-theme .stat-label { font-family: 'JetBrains Mono', monospace !important; letter-spacing: 2px; color: var(--fut-dim) !important; font-size: 0.7rem !important; text-transform: uppercase; } /* ===== Buttons ===== */ body.fut-theme .btn { border-radius: 2px !important; font-family: 'Orbitron', monospace !important; letter-spacing: 2px !important; transition: all 0.3s !important; } body.fut-theme .btn-primary { background: transparent !important; border: 1px solid var(--fut-cyan) !important; color: var(--fut-cyan) !important; position: relative; overflow: hidden; } body.fut-theme .btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--fut-cyan); transform: translateX(-100%); transition: transform 0.3s; z-index: -1; } body.fut-theme .btn-primary:hover { color: var(--fut-bg) !important; box-shadow: 0 0 25px var(--fut-cyan); } body.fut-theme .btn-primary:hover::before { transform: translateX(0); } body.fut-theme .btn-secondary, body.fut-theme .btn-outline { background: transparent !important; border: 1px solid rgba(0,240,255,0.3) !important; color: var(--fut-text) !important; } body.fut-theme .btn-secondary:hover, body.fut-theme .btn-outline:hover { border-color: var(--fut-magenta) !important; color: var(--fut-magenta) !important; box-shadow: 0 0 15px rgba(255,0,170,0.3); } body.fut-theme .btn-danger { background: transparent !important; border: 1px solid var(--fut-magenta) !important; color: var(--fut-magenta) !important; } /* ===== Form inputs ===== */ body.fut-theme .form-control, body.fut-theme input[type="text"], body.fut-theme input[type="email"], body.fut-theme input[type="password"], body.fut-theme input[type="number"], body.fut-theme textarea, body.fut-theme select { background: rgba(10,5,25,0.5) !important; border: 1px solid rgba(0,240,255,0.25) !important; border-radius: 2px !important; color: var(--fut-text) !important; font-family: 'JetBrains Mono', monospace !important; } body.fut-theme .form-control:focus, body.fut-theme input:focus, body.fut-theme textarea:focus, body.fut-theme select:focus { border-color: var(--fut-cyan) !important; box-shadow: 0 0 12px rgba(0,240,255,0.3) !important; outline: none !important; } body.fut-theme .form-label { font-family: 'JetBrains Mono', monospace !important; color: var(--fut-cyan) !important; letter-spacing: 1.5px; font-size: 0.8rem !important; } body.fut-theme .form-label::before { content: '// '; color: var(--fut-magenta); } /* ===== Tabs ===== */ body.fut-theme .tabs { border-bottom: 1px solid rgba(0,240,255,0.2) !important; } body.fut-theme .tab { font-family: 'Orbitron', monospace !important; letter-spacing: 2px !important; color: var(--fut-dim) !important; background: transparent !important; border: none !important; } body.fut-theme .tab.active { color: var(--fut-cyan) !important; border-bottom: 2px solid var(--fut-cyan) !important; text-shadow: 0 0 10px rgba(0,240,255,0.5); } /* ===== Tables ===== */ body.fut-theme .table-wrap, body.fut-theme table { background: rgba(10,5,25,0.4) !important; border: 1px solid rgba(0,240,255,0.15) !important; } body.fut-theme table { border-collapse: collapse; } body.fut-theme thead th { font-family: 'Orbitron', monospace !important; letter-spacing: 2px !important; color: var(--fut-cyan) !important; background: rgba(0,240,255,0.05) !important; border-bottom: 1px solid rgba(0,240,255,0.3) !important; font-size: 0.75rem !important; } body.fut-theme tbody td { border-bottom: 1px solid rgba(0,240,255,0.08) !important; color: var(--fut-text) !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.85rem !important; } body.fut-theme tbody tr:hover td { background: rgba(0,240,255,0.03) !important; } /* ===== Badges ===== */ body.fut-theme .badge { font-family: 'JetBrains Mono', monospace !important; border-radius: 2px !important; letter-spacing: 1px; border: 1px solid currentColor; background: transparent !important; padding: 0.2rem 0.5rem !important; } body.fut-theme .badge-success { color: var(--fut-cyan) !important; } body.fut-theme .badge-warning { color: var(--fut-gold) !important; } body.fut-theme .badge-danger { color: var(--fut-magenta) !important; } body.fut-theme .badge-info { color: var(--fut-violet) !important; } /* ===== Alerts ===== */ body.fut-theme .alert { background: rgba(10,5,25,0.6) !important; border: 1px solid rgba(0,240,255,0.2) !important; border-radius: 2px !important; border-left-width: 3px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 0.88rem !important; } body.fut-theme .alert-success { border-left-color: var(--fut-cyan) !important; color: var(--fut-cyan) !important; } body.fut-theme .alert-warning { border-left-color: var(--fut-gold) !important; color: var(--fut-gold) !important; } body.fut-theme .alert-danger { border-left-color: var(--fut-magenta) !important; color: var(--fut-magenta) !important; } body.fut-theme .alert-info { border-left-color: var(--fut-violet) !important; color: var(--fut-violet) !important; } /* ===== Progress ===== */ body.fut-theme .progress { background: rgba(10,5,25,0.6) !important; border: 1px solid rgba(0,240,255,0.15) !important; border-radius: 2px !important; height: 6px !important; } body.fut-theme .progress-bar { background: linear-gradient(90deg, var(--fut-cyan), var(--fut-magenta)) !important; box-shadow: 0 0 8px var(--fut-cyan); } /* ===== Container background no-op ===== */ body.fut-theme .container { background: transparent !important; } /* ===== Footer ===== */ body.fut-theme .footer { background: transparent !important; border-top: 1px solid rgba(0,240,255,0.15) !important; font-family: 'JetBrains Mono', monospace !important; color: var(--fut-dim) !important; } /* ===== Warning text (fallback) ===== */ body.fut-theme .text-warning { color: var(--fut-gold) !important; } body.fut-theme .text-success { color: var(--fut-cyan) !important; } body.fut-theme .text-danger { color: var(--fut-magenta) !important; } /* ===== Spinner ===== */ body.fut-theme .spinner { border-color: rgba(0,240,255,0.2) !important; border-top-color: var(--fut-cyan) !important; }