@font-face { font-family: 'Orbitron'; font-weight: 900; font-style: normal; src: url('/orbitron-900.woff2') format('woff2'); font-display: swap; } /* ============================================================================= TUNNELCORE — Authelia Login Theme v2 Neon cyberpunk palette injected via Caddy intercept → Selectors confirmed from Authelia v4.39.19 source chunks. ============================================================================= */ /* ── Google Fonts — monospace stack ─────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap'); /* ── Variables ──────────────────────────────────────────────────────────────── */ :root { --tc-bg: #06000d; --tc-bg-surface: #0d0020; --tc-bg-card: #0e001f; --tc-bg-input: #030008; --tc-cyan: #00FFD1; --tc-magenta: #FF00E4; --tc-violet: #8A2BE2; --tc-dim-cyan: #00b394; --tc-dim-mag: #b300a0; --tc-text: #c8f0e8; --tc-text-dim: #6a9e90; --tc-border: #1a0040; --tc-border-glow: #8A2BE2; --tc-error: #ff4466; --tc-font: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace; --tc-glow-cyan: 0 0 8px #00FFD1, 0 0 20px rgba(0,255,209,0.4); --tc-glow-mag: 0 0 8px #FF00E4, 0 0 20px rgba(255,0,228,0.4); --tc-glow-violet: 0 0 6px #8A2BE2, 0 0 16px rgba(138,43,226,0.3); } /* ── Reset / Base ─────────────────────────────────────────────────────────── */ html, body { background-color: var(--tc-bg) !important; background-image: radial-gradient(ellipse at 20% 50%, rgba(26,0,51,0.5) 0%, transparent 60%), radial-gradient(ellipse at 80% 10%, rgba(0,0,51,0.3) 0%, transparent 50%), repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 4px ) !important; color: var(--tc-text) !important; font-family: var(--tc-font) !important; min-height: 100vh; } /* ── Scanline overlay ─────────────────────────────────────────────────────── */ #root::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0,0,0,0.09) 3px, rgba(0,0,0,0.09) 4px ); pointer-events: none; z-index: 9999; } #root { min-height: 100vh; display: flex; align-items: center; justify-content: center; } main { background: transparent !important; } /* ── TUNNELCORE logo (injected by sidecar) ─────────────────────────────────── */ .tc-logo { display: block; text-align: center; font-family: var(--tc-font) !important; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--tc-cyan) !important; text-shadow: var(--tc-glow-cyan); margin: 0 auto 1.6rem auto; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(138,43,226,0.4); position: relative; animation: tc-flicker 6s infinite; } /* Corner brackets on the logo */ .tc-logo::before, .tc-logo::after { content: ''; position: absolute; bottom: -1px; width: 8px; height: 8px; border-color: var(--tc-violet); border-style: solid; } .tc-logo::before { left: 0; border-width: 0 0 1px 1px; } .tc-logo::after { right: 0; border-width: 0 1px 1px 0; } @keyframes tc-flicker { 0%, 92%, 100% { opacity: 1; text-shadow: var(--tc-glow-cyan); } 93% { opacity: 0.85; text-shadow: none; } 94% { opacity: 1; text-shadow: var(--tc-glow-cyan); } 96% { opacity: 0.9; text-shadow: none; } 97% { opacity: 1; text-shadow: var(--tc-glow-cyan); } } /* ── Login Card ────────────────────────────────────────────────────────────── */ form { background: var(--tc-bg-card) !important; border: 1px solid var(--tc-border-glow) !important; box-shadow: 0 0 0 1px rgba(138,43,226,0.2), 0 0 40px rgba(138,43,226,0.15), inset 0 0 60px rgba(6,0,13,0.5) !important; border-radius: 3px !important; padding: 2.5rem 2rem !important; position: relative; } /* Corner bracket decoration on login card */ form::before, form::after { content: ''; position: absolute; width: 16px; height: 16px; border-color: var(--tc-cyan); border-style: solid; opacity: 0.6; } form::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; } form::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; } form > div, form > fieldset { background: transparent !important; } /* ── Typography / Headings ─────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--tc-font) !important; color: var(--tc-cyan) !important; text-shadow: var(--tc-glow-cyan) !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } h5 { font-size: 0.9rem !important; letter-spacing: 0.2em !important; margin-bottom: 1.4rem !important; border-bottom: 1px solid rgba(138,43,226,0.35) !important; padding-bottom: 0.75rem !important; } p, span { font-family: var(--tc-font) !important; color: var(--tc-text) !important; } /* ── INPUT FIELD FIX ───────────────────────────────────────────────────────── */ /* * Problem: MUI v5 OutlinedInput renders a
* wrapping the actual . MUI injects background via its theme CSS-in-JS which * can override class-based overrides. We target all three layers: wrapper div, * inner input, and the notched outline fieldset. * * Confirmed IDs from source: username-textfield, password-textfield * Confirmed MUI class prefixes: MuiInputBase-root, MuiOutlinedInput-root */ /* Layer 1: The MUI wrapper div */ [class*="MuiInputBase-root"], [class*="MuiOutlinedInput-root"] { background-color: var(--tc-bg-input) !important; color: var(--tc-cyan) !important; font-family: var(--tc-font) !important; font-size: 0.9rem !important; } /* Layer 2: The actual element — this is the visible text area */ #username-textfield, #password-textfield, input[type="text"], input[type="password"], input[type="email"] { background-color: transparent !important; /* parent div carries the bg */ color: #d4fff7 !important; font-family: var(--tc-font) !important; font-size: 0.9rem !important; letter-spacing: 0.05em !important; caret-color: var(--tc-magenta) !important; -webkit-text-fill-color: #d4fff7 !important; /* overrides autofill colour */ } /* Autofill override — browsers inject their own bg on autofill */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--tc-bg-input) inset !important; -webkit-text-fill-color: #d4fff7 !important; caret-color: var(--tc-magenta) !important; transition: background-color 5000s ease-in-out 0s; } /* Layer 3: The notched outline
— this IS the visible border */ [class*="MuiOutlinedInput-root"] fieldset, [class*="MuiOutlinedInput-notchedOutline"] { border-color: var(--tc-violet) !important; border-width: 1px !important; } [class*="MuiOutlinedInput-root"]:hover fieldset, [class*="MuiOutlinedInput-root"]:hover [class*="MuiOutlinedInput-notchedOutline"] { border-color: var(--tc-magenta) !important; } [class*="MuiOutlinedInput-root"][class*="Mui-focused"] fieldset, [class*="MuiOutlinedInput-root"][class*="Mui-focused"] [class*="MuiOutlinedInput-notchedOutline"] { border-color: var(--tc-cyan) !important; border-width: 1px !important; box-shadow: var(--tc-glow-cyan); } /* Fallback generic fieldset (non-MUI contexts) */ fieldset { border-color: var(--tc-violet) !important; } fieldset:focus-within { border-color: var(--tc-cyan) !important; } /* Layer 4: Floating label */ [class*="MuiInputLabel-root"], label { color: var(--tc-text-dim) !important; font-family: var(--tc-font) !important; font-size: 0.78rem !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } [class*="MuiInputLabel-root"][class*="Mui-focused"], label[class*="Mui-focused"], label.Mui-focused { color: var(--tc-cyan) !important; text-shadow: 0 0 6px rgba(0,255,209,0.5); } /* Shrunk label (floating above the field) */ [class*="MuiInputLabel-shrink"], [class*="MuiInputLabel"][data-shrink="true"] { color: var(--tc-cyan) !important; } /* ── HIDE: Language Switcher ───────────────────────────────────────────────── */ /* * Confirmed selector from layouts.Login.dacfW9rO.js source: * The top-bar component renders a button with id="language-button" * and a menu with id="language-menu". */ #language-button, #language-menu { display: none !important; visibility: hidden !important; } /* ── HIDE: "Powered by Authelia" footer ────────────────────────────────────── */ /* * Confirmed from layouts.Login.dacfW9rO.js: * Rendered as * The href resolves to the Authelia website at runtime. * We target by href substring (safe — no other authelia.com links on page). */ a[href*="authelia"] { display: none !important; } /* Hide the entire footer row (Grid container holding the powered-by link) */ /* The footer component is the first Grid row after the card content */ /* Fallback: hide any small text that says "Powered by" via content check */ /* Since we can't use :has() universally, also hide parent if link is gone */ /* Belt-and-suspenders: target by font size + color pattern Authelia uses */ /* This hides the containing Grid row when only the link remains */ /* ── Submit / SIGN IN Button ───────────────────────────────────────────────── */ button[type="submit"], [class*="MuiButton-contained"] { background: linear-gradient(135deg, #1a0040 0%, #2d006b 50%, #1a0040 100%) !important; border: 1px solid var(--tc-violet) !important; color: var(--tc-cyan) !important; font-family: var(--tc-font) !important; font-size: 0.82rem !important; font-weight: 600 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; box-shadow: var(--tc-glow-violet) !important; transition: all 0.2s ease !important; cursor: pointer !important; position: relative; overflow: hidden; } /* Sweep effect on hover */ button[type="submit"]::before, [class*="MuiButton-contained"]::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,255,209,0.12), transparent); transition: left 0.4s ease; } button[type="submit"]:hover::before, [class*="MuiButton-contained"]:hover::before { left: 100%; } button[type="submit"]:hover, [class*="MuiButton-contained"]:hover { background: linear-gradient(135deg, #2d006b 0%, #5500bb 50%, #2d006b 100%) !important; border-color: var(--tc-cyan) !important; box-shadow: var(--tc-glow-cyan) !important; color: #ffffff !important; } button[type="submit"]:active { transform: scale(0.98) !important; } button[type="submit"]:disabled { opacity: 0.4 !important; cursor: not-allowed !important; box-shadow: none !important; } /* ── Secondary buttons ─────────────────────────────────────────────────────── */ button:not([type="submit"]):not(#language-button) { background: transparent !important; color: var(--tc-text-dim) !important; font-family: var(--tc-font) !important; border-color: var(--tc-border) !important; } button:not([type="submit"]):not(#language-button):hover { color: var(--tc-magenta) !important; border-color: var(--tc-magenta) !important; } /* ── Links (e.g. "Reset password") ────────────────────────────────────────── */ a:not([href*="authelia"]) { color: var(--tc-violet) !important; font-family: var(--tc-font) !important; text-decoration: none !important; transition: color 0.15s ease, text-shadow 0.15s ease !important; position: relative; } a:not([href*="authelia"]):hover { color: var(--tc-cyan) !important; text-shadow: var(--tc-glow-cyan) !important; } /* Animated underline on reset-password link */ a:not([href*="authelia"])::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: var(--tc-cyan); transition: width 0.25s ease; box-shadow: var(--tc-glow-cyan); } a:not([href*="authelia"]):hover::after { width: 100%; } /* ── Checkbox (Remember me) ────────────────────────────────────────────────── */ input[type="checkbox"] { accent-color: var(--tc-violet) !important; } /* MUI Checkbox SVG icons */ svg[data-testid="CheckBoxOutlineBlankIcon"], svg[data-testid="CheckBoxIcon"] { color: var(--tc-violet) !important; } [class*="MuiCheckbox-root"] { color: var(--tc-violet) !important; } [class*="MuiCheckbox-root"][class*="Mui-checked"] { color: var(--tc-cyan) !important; } [class*="MuiFormControlLabel-label"] { color: var(--tc-text-dim) !important; font-family: var(--tc-font) !important; font-size: 0.78rem !important; letter-spacing: 0.05em !important; } /* ── Notifications / Alerts ────────────────────────────────────────────────── */ [role="alert"], [role="status"] { font-family: var(--tc-font) !important; font-size: 0.78rem !important; letter-spacing: 0.04em !important; } /* Error state */ [class*="Mui-error"], p.Mui-error { color: var(--tc-error) !important; font-family: var(--tc-font) !important; } /* ── MUI Paper ─────────────────────────────────────────────────────────────── */ [class*="MuiPaper-root"] { background-color: var(--tc-bg-card) !important; border: 1px solid rgba(138,43,226,0.35) !important; box-shadow: 0 0 0 1px rgba(138,43,226,0.2), 0 0 30px rgba(138,43,226,0.12) !important; } [class*="MuiContainer-root"] { background: transparent !important; } /* ── MUI Typography ────────────────────────────────────────────────────────── */ [class*="MuiTypography-root"] { font-family: var(--tc-font) !important; color: var(--tc-text) !important; } [class*="MuiTypography-h5"], [class*="MuiTypography-h4"] { color: var(--tc-cyan) !important; text-shadow: var(--tc-glow-cyan) !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; } /* ── Loading spinner ───────────────────────────────────────────────────────── */ [class*="MuiCircularProgress-root"] { color: var(--tc-cyan) !important; } /* ── Dividers ──────────────────────────────────────────────────────────────── */ hr, [class*="MuiDivider-root"] { border-color: rgba(138,43,226,0.35) !important; opacity: 0.6 !important; } /* ── Menu / Select dropdowns (language menu fallback) ──────────────────────── */ [class*="MuiMenu-paper"], [class*="MuiPopover-paper"] { background-color: var(--tc-bg-surface) !important; border: 1px solid var(--tc-border-glow) !important; } [class*="MuiMenuItem-root"] { font-family: var(--tc-font) !important; color: var(--tc-text) !important; font-size: 0.82rem !important; letter-spacing: 0.05em !important; } [class*="MuiMenuItem-root"]:hover { background-color: rgba(138,43,226,0.2) !important; color: var(--tc-cyan) !important; } /* ── Scrollbar ─────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; background: var(--tc-bg); } ::-webkit-scrollbar-thumb { background: var(--tc-violet); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--tc-cyan); } /* ── Selection ─────────────────────────────────────────────────────────────── */ ::selection { background: rgba(138,43,226,0.5); color: #ffffff; } /* ── TUNNELCORE corner watermark ───────────────────────────────────────────── */ body::after { content: 'TUNNELCORE//AUTH'; position: fixed; bottom: 1.5rem; right: 1.5rem; font-family: var(--tc-font); font-size: 0.6rem; letter-spacing: 0.25em; color: rgba(138,43,226,0.25); pointer-events: none; z-index: 10000; } /* === REFINEMENT PASS 2 === */ /* Hide the empty top container that wraps the (already-hidden) language switcher */ /* Hide the user-silhouette decoration above the heading */ svg[data-testid="PersonIcon"] { display: none !important; } /* TUNNELCORE wordmark — Orbitron (matches main tunnelcore.sh hero typeface), single line */ .tc-logo { font-family: 'Orbitron', 'Audiowide', monospace !important; font-size: 56px !important; font-weight: 900 !important; letter-spacing: 0.05em !important; white-space: nowrap !important; text-align: center !important; }