/* Fail-closed Entra auth gate — login page styled to match the Vulnerability Tracker dashboard: a clean, centered screen on deep HFG navy with the white horizontal logo, a Dunbar display title, muted body copy, and a teal "Continue with Microsoft" button. Protected app UI stays hidden until authed. No inline styles. */ /* Hide the protected app by default; revealed only when is marked authed. */ #appRoot{display:none} body.authed #appRoot{display:block} body.authed #authGate{display:none} /* Full-screen gate on deep navy (Vulnerability Tracker --navy / --bg-0). */ #authGate{ position:fixed;inset:0;z-index:1000; display:flex;align-items:center;justify-content:center; padding:24px;text-align:center; background:#04253a; color:#fff; font-family:var(--hfg-font-sans); } .gate-inner{ display:flex;flex-direction:column;align-items:center;gap:14px; width:100%;max-width:420px; } /* White horizontal logo, directly on the navy (no chip). */ .gate-logo{display:inline-flex;margin-bottom:10px} .gate-logo img{height:34px;width:auto;display:block} .gate-title{ font-family:var(--hfg-font-display); font-weight:400;font-size:26px;line-height:1.1; letter-spacing:-0.01em;color:#fff; } .gate-body{ font-size:13px;line-height:1.55; color:rgba(255,255,255,0.45); max-width:380px; } /* Primary "Continue with Microsoft" button — HFG teal (--cool #0BA0C2). */ .gate-btn{ margin-top:8px;padding:10px 22px;border-radius:8px; background:#0BA0C2;border:none;color:#fff; font-family:inherit;font-size:14px;font-weight:500;cursor:pointer; transition:background .15s,opacity .15s; } .gate-btn:hover{background:#0b8fad} .gate-btn:disabled{opacity:.6;cursor:default} /* Secondary / retry button. */ .gate-btn.ghost{ background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);color:#fff; } .gate-btn.ghost:hover{background:rgba(255,255,255,0.16)} /* "Checking" state — rising bars, mirrors the Vulnerability Tracker boot screen. */ .gate-bars{display:flex;gap:4px;align-items:flex-end;height:26px;margin-top:4px} .gate-bars span{ width:4px;height:100%;background:#0BA0C2;border-radius:1px;transform-origin:bottom; animation:gate-bar-rise 1.1s ease-in-out infinite; } .gate-bars span:nth-child(2){animation-delay:.1s} .gate-bars span:nth-child(3){animation-delay:.2s} .gate-bars span:nth-child(4){animation-delay:.3s} .gate-bars span:nth-child(5){animation-delay:.4s} .gate-boot{ margin-top:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,0.35); } @keyframes gate-bar-rise{ 0%,100%{transform:scaleY(0.12);opacity:.3} 50%{transform:scaleY(1);opacity:1} } /* State machine: only the element matching the current data-state is shown. */ #authGate .state{display:none;flex-direction:column;align-items:center;gap:14px} #authGate[data-state="checking"] .state-checking{display:flex} #authGate[data-state="signedout"] .state-signedout{display:flex} #authGate[data-state="notconfigured"] .state-notconfigured{display:flex} #authGate[data-state="error"] .state-error{display:flex} @media print{ #authGate{display:none !important} }