/* ============================================================ FAKTUUR · Aurora + Dark Glass theme for standalone pages Opt-in: add class="fk-glass" to and a

×4

as first child. Scoped under body.fk-glass so it only affects opted-in pages and outranks the pages' own inline card/light styles. ============================================================ */ body.fk-glass{ background:#050f1e !important; color:#e8eefc !important; position:relative; } /* ---- Aurora background ---- */ body.fk-glass .fk-aurora{ position:fixed; inset:0; z-index:0; overflow:hidden; background:radial-gradient(120% 120% at 50% 0%, #07172B 0%, #04101F 62%); } body.fk-glass .fk-aurora span{ position:absolute; width:62vw; height:62vw; border-radius:50%; filter:blur(85px); opacity:.55; mix-blend-mode:screen; } body.fk-glass .fk-aurora span:nth-child(1){ background:#2563EB; top:-22%; left:-12%; animation:fkA 18s ease-in-out infinite; } body.fk-glass .fk-aurora span:nth-child(2){ background:#22D3EE; top:8%; right:-16%; animation:fkB 22s ease-in-out infinite; } body.fk-glass .fk-aurora span:nth-child(3){ background:#3B82F6; bottom:-26%; left:18%; opacity:.5; animation:fkC 26s ease-in-out infinite; } body.fk-glass .fk-aurora span:nth-child(4){ background:#5B8CFF; bottom:-12%; right:4%; animation:fkA 20s ease-in-out infinite reverse; } @keyframes fkA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.15)}} @keyframes fkB{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-10vw,8vh) scale(.95)}} @keyframes fkC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-8vh) scale(1.2)}} @media (max-width:768px){ body.fk-glass .fk-aurora span{ filter:blur(70px); opacity:.5; } } /* lift real content above the aurora */ body.fk-glass > *:not(.fk-aurora){ position:relative; z-index:1; } /* ---- Dark glass surfaces ---- */ body.fk-glass .login-container, body.fk-glass .container, body.fk-glass .card, body.fk-glass .box, body.fk-glass .auth-card, body.fk-glass .setup-card, body.fk-glass .diag-card{ background:rgba(9,20,36,0.52) !important; border:1px solid rgba(255,255,255,0.12) !important; border-radius:20px !important; backdrop-filter:blur(22px) saturate(135%); -webkit-backdrop-filter:blur(22px) saturate(135%); box-shadow:0 30px 80px rgba(0,0,0,0.5) !important; color:#e8eefc; } /* two-panel login pages */ body.fk-glass .login-left{ background:linear-gradient(150deg, rgba(20,92,255,0.30) 0%, rgba(13,25,45,0.32) 60%, rgba(255,107,53,0.10) 100%) !important; border-right:1px solid rgba(255,255,255,0.10); color:#fff; } body.fk-glass .login-right{ background:rgba(4,11,22,0.22) !important; } /* nested cards/sections inside big wizards stay readable, slightly lighter */ body.fk-glass .card .card, body.fk-glass .container .step, body.fk-glass .container .panel, body.fk-glass .info-box, body.fk-glass .note, body.fk-glass .well{ background:rgba(255,255,255,0.05) !important; border:1px solid rgba(255,255,255,0.10) !important; color:#e8eefc; } /* ---- Text ---- */ body.fk-glass h1, body.fk-glass h2, body.fk-glass h3, body.fk-glass h4, body.fk-glass h5, body.fk-glass .card-title, body.fk-glass .login-header h2, body.fk-glass label, body.fk-glass .form-label{ color:#ffffff !important; } body.fk-glass p, body.fk-glass small, body.fk-glass .muted, body.fk-glass .text-muted, body.fk-glass .login-header p, body.fk-glass td, body.fk-glass li{ color:rgba(232,238,252,0.72) !important; } body.fk-glass a{ color:#7ea6ff; } /* ---- Form controls ---- */ body.fk-glass input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), body.fk-glass select, body.fk-glass textarea, body.fk-glass .form-control, body.fk-glass .input-icon input{ background:rgba(255,255,255,0.06) !important; border:1px solid rgba(255,255,255,0.16) !important; color:#fff !important; } body.fk-glass input::placeholder, body.fk-glass textarea::placeholder{ color:rgba(255,255,255,0.4) !important; } body.fk-glass input:focus, body.fk-glass select:focus, body.fk-glass textarea:focus, body.fk-glass .form-control:focus{ outline:none !important; border-color:#145CFF !important; box-shadow:0 0 0 4px rgba(20,92,255,0.22) !important; background:rgba(255,255,255,0.10) !important; } body.fk-glass select option{ color:#1a2433; } body.fk-glass .input-icon > i{ color:rgba(255,255,255,0.45) !important; } /* ---- Buttons ---- */ body.fk-glass .btn-login, body.fk-glass .btn-primary, body.fk-glass button[type=submit]:not(.password-toggle), body.fk-glass .btn-install, body.fk-glass .btn-next{ background:linear-gradient(135deg, #145CFF, #1d4ed8) !important; border:none !important; color:#fff !important; box-shadow:0 12px 30px rgba(20,92,255,0.40) !important; } body.fk-glass .btn-login:hover, body.fk-glass .btn-primary:hover, body.fk-glass .btn-install:hover, body.fk-glass .btn-next:hover{ filter:brightness(1.07); } /* secondary/ghost buttons readable on dark */ body.fk-glass .btn-secondary, body.fk-glass .btn-default, body.fk-glass .btn-back{ background:rgba(255,255,255,0.08) !important; border:1px solid rgba(255,255,255,0.16) !important; color:#e8eefc !important; } body.fk-glass .password-toggle{ color:rgba(255,255,255,0.45) !important; background:none !important; } /* ---- Alerts / status (translucent so they read on dark, colours preserved) ---- */ body.fk-glass .error, body.fk-glass .alert-danger{ background:rgba(220,38,38,0.16) !important; color:#ffb4b4 !important; border:1px solid rgba(248,113,113,0.32) !important; } body.fk-glass .success, body.fk-glass .alert-success{ background:rgba(5,150,105,0.16) !important; color:#a7f3d0 !important; border:1px solid rgba(16,185,129,0.32) !important; } body.fk-glass .warning, body.fk-glass .alert-warning{ background:rgba(217,119,6,0.16) !important; color:#fcd9a5 !important; border:1px solid rgba(245,158,11,0.32) !important; } /* tables inside wizards */ body.fk-glass table{ color:#e8eefc; } body.fk-glass th{ color:rgba(255,255,255,0.6) !important; border-bottom:1px solid rgba(255,255,255,0.14) !important; } body.fk-glass td{ border-bottom:1px solid rgba(255,255,255,0.08) !important; } body.fk-glass code, body.fk-glass pre{ background:rgba(255,255,255,0.07) !important; color:#cfe0ff !important; border-radius:8px; } /* hide the legacy particle containers on opted-in pages (Aurora replaces them) */ body.fk-glass #login-particles, body.fk-glass #login-left-particles, body.fk-glass #bg-particles, body.fk-glass #install-particles{ display:none !important; } /* EULA box (install/reinstall) — was a light panel; make it dark so the forced-light text reads */ body.fk-glass .eula-box{ background:rgba(255,255,255,0.05) !important; border:1px solid rgba(255,255,255,0.12) !important; color:rgba(232,238,252,0.82) !important; } body.fk-glass .eula-box h3{ color:#7ea6ff !important; } body.fk-glass .eula-box h4{ color:#ffffff !important; } body.fk-glass .eula-box p, body.fk-glass .eula-box li, body.fk-glass .eula-box ul{ color:rgba(232,238,252,0.80) !important; } body.fk-glass .eula-binding{ color:rgba(232,238,252,0.6) !important; } body.fk-glass .eula-agree{ color:#e8eefc !important; } /* ============================================================ LIGHT VARIANT — for dense functional wizards (install / reinstall / diagnostics). Same Aurora background, but a LIGHT frosted card so the pages' original dark-on-light content stays readable with no auditing. Opt-in via class="fk-glass-light" on . ============================================================ */ body.fk-glass-light{ position:relative; } body.fk-glass-light .fk-aurora{ position:fixed; inset:0; z-index:0; overflow:hidden; background:linear-gradient(180deg, #eef4fc 0%, #e3eaf6 100%); } body.fk-glass-light .fk-aurora span{ position:absolute; width:60vw; height:60vw; border-radius:50%; filter:blur(90px); opacity:.34; mix-blend-mode:normal; } body.fk-glass-light .fk-aurora span:nth-child(1){ background:#3b82f6; top:-20%; left:-12%; animation:fkA 18s ease-in-out infinite; } body.fk-glass-light .fk-aurora span:nth-child(2){ background:#22d3ee; top:6%; right:-16%; animation:fkB 22s ease-in-out infinite; } body.fk-glass-light .fk-aurora span:nth-child(3){ background:#60a5fa; bottom:-24%; left:18%; opacity:.20; animation:fkC 26s ease-in-out infinite; } body.fk-glass-light .fk-aurora span:nth-child(4){ background:#38bdf8; bottom:-10%; right:4%; animation:fkA 20s ease-in-out infinite reverse; } @media (max-width:768px){ body.fk-glass-light .fk-aurora span{ filter:blur(72px); opacity:.30; } } body.fk-glass-light > *:not(.fk-aurora){ position:relative; z-index:1; } body.fk-glass-light #install-particles, body.fk-glass-light #login-particles, body.fk-glass-light #bg-particles{ display:none !important; } /* light frosted card — keeps each page's own dark text/inputs intact */ body.fk-glass-light .container, body.fk-glass-light .card{ background: rgba(255,255,255,0.88) !important; border:1px solid rgba(255,255,255,0.9) !important; backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 24px 60px rgba(15,23,42,0.18) !important; } /* ============================================================ Mapping for the selling-site client portal auth pages (they use .login-wrapper / .login-card instead of .login-container) ============================================================ */ body.fk-glass .login-wrapper{ background:transparent !important; } body.fk-glass .login-card{ background:rgba(9,20,36,0.52) !important; border:1px solid rgba(255,255,255,0.12) !important; border-radius:20px !important; backdrop-filter:blur(22px) saturate(135%); -webkit-backdrop-filter:blur(22px) saturate(135%); box-shadow:0 30px 80px rgba(0,0,0,0.5) !important; color:#e8eefc; overflow:hidden; } body.fk-glass .login-header{ background:rgba(255,255,255,0.04) !important; border-bottom:1px solid rgba(255,255,255,0.10) !important; } body.fk-glass .login-header .logo-icon{ background:rgba(255,255,255,0.12) !important; color:#fff !important; } body.fk-glass .login-body{ background:transparent !important; } body.fk-glass .login-footer{ background:transparent !important; } body.fk-glass .login-footer a{ color:#7ea6ff !important; } /* "Developed by" credit under the auth card */ body.fk-glass .login-credit{ margin-top:18px; text-align:center; font-size:13px; letter-spacing:.02em; color:rgba(232,238,252,0.82) !important; } body.fk-glass .login-credit strong{ color:#9cc0ff !important; font-weight:700; } /* Back-to-homepage link: clearly visible on the dark aurora */ body.fk-glass .back-link{ color:rgba(255,255,255,0.88) !important; font-weight:500; opacity:1 !important; } body.fk-glass .back-link:hover{ color:#9cc0ff !important; } body.fk-glass .back-link i{ color:inherit !important; } /* Center the auth card + footer on the page (both axes) */ body.fk-glass{ min-height:100vh; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:40px 16px; } body.fk-glass .login-wrapper{ width:100%; max-width:420px; margin:0; } body.fk-glass .login-footer, body.fk-glass .back-link, body.fk-glass .login-credit{ text-align:center; } /* Footer stays in normal flow beneath the card; card+footer center together. */ /* No drop shadow on the card (removed per request) — the frosted border defines its edge. */ body.fk-glass .login-card{ box-shadow:none !important; }