/* ========================================================================== FortHound product design system Shared by Hound PAM, Access Review, Workflow, MFA and IT Assets. Training, Phishing and SOC Tower carry their own copies of the shell — keep tokens here authoritative and mirror deliberately. ========================================================================== */ :root{ /* ---- brand ---- */ --navy:#2b4a86; --navy-d:#1e3560; --navy-l:#3f63a8; --purple:#7c3aed; /* ---- neutrals ---- */ --ink:#161a20; --muted:#5c636e; --steel:#6d7175; --line:#e4e8ef; --line-soft:#f0f2f7; --bg:#f4f6fa; --bg-2:#f2f5fb; --card:#fff; /* ---- surface tokens (so every fill flips cleanly in dark) ---- */ --hover:#e8eef8; --track:#e9edf4; --surface-2:#f8fafd; --chip-bg:#eef1f6; --chip-navy-bg:#eaf0fb; --chip-navy-ink:#2b4a86; --chip-purple-bg:#f0e9fb; --chip-purple-ink:#6b28d9; --bad-line:#f2c4c3; --toast-bg:#161a20; --toast-ink:#fff; --hint-bg:#eef2f9; color-scheme:light; /* ---- semantic ---- Darkened to clear WCAG AA (4.5:1) at the 11-12px sizes these are actually used at. The previous values failed: warn was 2.76:1 on white, 2.45:1 in a pill — effectively unreadable for low-vision users and a procurement blocker on any accessibility-conformance review. */ --ok:#1a8654; --ok-bg:#e5f5ec; --ok-ink:#197d4f; --warn:#a56914; --warn-bg:#fbf0dd; --warn-ink:#996112; --bad:#de3432; --bad-bg:#fbe5e5; --bad-ink:#cd2321; /* ---- type scale ---- Eleven steps replacing 29 ad-hoc values (9.5px…42px, mostly half-pixels). */ --t-2xs:11px; --t-xs:12px; --t-sm:13px; --t-base:14px; --t-md:15px; --t-lg:16px; --t-xl:19px; --t-2xl:22px; --t-3xl:26px; --t-4xl:30px; --t-5xl:40px; /* ---- spacing ---- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; /* ---- form ---- */ --radius:14px; --radius-sm:9px; --radius-md:10px; --shadow:0 1px 2px rgba(20,30,60,.05),0 8px 28px rgba(20,30,60,.07); --shadow-lg:0 14px 34px rgba(20,30,60,.12); --focus:#2b4a86; --font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --font-display:'Space Grotesk',Inter,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; } /* ---- dark theme ---- Operators live in these consoles for hours; a soft-charcoal night mode cuts glare without dropping below WCAG AA. suite.js resolves the OS preference (or a saved override) to a concrete data-theme on before first paint, so this one block drives every token. Marketing + login never load this file. */ :root[data-theme="dark"]{ color-scheme:dark; --navy:#3f63a8; --navy-d:#33527f; --navy-l:#5680c8; --purple:#a274f0; --ink:#e8edf6; --muted:#a6b1c2; --steel:#8a95a8; --line:#2a3547; --line-soft:#212b3c; --bg:#0d131f; --bg-2:#1a2333; --card:#161e2c; --ok:#2fb274; --ok-bg:rgba(45,178,116,.16); --ok-ink:#5fd39a; --warn:#d6a046; --warn-bg:rgba(214,160,70,.17); --warn-ink:#e8b65c; --bad:#e5534f; --bad-bg:rgba(226,88,84,.18); --bad-ink:#f2837f; --hover:#1f2a3c; --track:#243049; --surface-2:#131b28; --chip-bg:#1e2838; --chip-navy-bg:rgba(63,99,168,.24); --chip-navy-ink:#8fb0ec; --chip-purple-bg:rgba(162,116,240,.20); --chip-purple-ink:#c3a3f5; --bad-line:#5e3230; --toast-bg:#232f43; --toast-ink:#e8edf6; --hint-bg:#1a2333; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.5); --shadow-lg:0 14px 34px rgba(0,0,0,.55); --focus:#6f97e0; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3{font-family:var(--font-display)} button{font-family:inherit;cursor:pointer} .hide{display:none!important} /* Keyboard focus. Zero-specificity :where() so component styles still win on colour, while every interactive element keeps a visible ring. Previously there were no focus-visible rules at all and 12 blanket `outline:none` declarations, so keyboard users had no idea where they were. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--radius-sm); } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ============================ login ============================ */ .login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr} .login-hero{background:linear-gradient(150deg,#1e3560,#2b4a86 60%,#3f63a8);color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden} .login-hero.pam{background:linear-gradient(150deg,#12203f,#2b4a86 65%,#1f9d63)} .login-hero.uar{background:linear-gradient(150deg,#1e3560,#2b4a86 60%,#7c3aed)} .login-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at 82% 8%,rgba(255,255,255,.14),transparent 60%);pointer-events:none} /* logo assets carry real alpha (see tools/make-logo-variants.js) — -white on dark surfaces, -alpha on light ones. No filter or blend-mode tricks needed. */ /* ONE logo standard across every login, identical to the website nav: the on-dark mark icon + the wordmark as live Space Grotesk text, two-tone (FORT light, HOUND grey). Never a baked single-tone PNG in a different font. */ .lh-brand{display:flex;align-items:center;gap:14px;z-index:1;align-self:flex-start} .lh-mark{height:56px;width:auto;display:block} .lh-word{display:flex;flex-direction:column;line-height:1} .lh-wt{font-family:var(--font-display);font-weight:700;font-size:31px;letter-spacing:.015em;color:#f4f7fc} .lh-wt b{color:#a9b4c8;font-weight:700} .lh-ws{font-size:11.5px;letter-spacing:.34em;color:#a9b4c8;font-weight:600;margin-top:6px} .lh-mid{z-index:1;max-width:470px} .lh-mid .eyebrow{font-size:var(--t-xs);letter-spacing:2px;text-transform:uppercase;color:#b9c8e8;font-weight:600;margin-bottom:var(--s4)} .lh-mid h1{font-family:var(--font-display);font-size:var(--t-5xl);line-height:1.08;margin:0 0 18px;letter-spacing:-.02em} .lh-mid p{font-size:var(--t-lg);line-height:1.6;color:#d6e0f2;margin:0} .lh-stats{display:flex;gap:30px;z-index:1} .lh-stats div span{display:block} .lh-stats .n{font-family:var(--font-display);font-size:var(--t-3xl);font-weight:700} .lh-stats .l{font-size:var(--t-sm);color:#b9c8e8;margin-top:2px} .login-form{display:flex;align-items:center;justify-content:center;padding:var(--s8)} .login-card{width:100%;max-width:380px} .login-card h2{font-size:var(--t-3xl);margin:0 0 6px;letter-spacing:-.01em} .login-card .sub{color:var(--muted);font-size:var(--t-base);margin:0 0 28px} .field{margin-bottom:var(--s4)} .field label{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:7px} .field input,.field select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-md);font-size:var(--t-md);font-family:inherit} .field input:focus,.field select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(43,74,134,.12);outline:none} .field input:focus-visible,.field select:focus-visible{outline:2px solid var(--focus);outline-offset:1px} .btn{border:none;border-radius:var(--radius-md);padding:12px 18px;font-weight:600;font-size:var(--t-md)} .btn-primary{background:var(--navy);color:#fff;width:100%} .btn-primary:hover{background:var(--navy-d)} .hint{margin-top:18px;font-size:var(--t-sm);color:var(--muted);text-align:center;background:var(--hint-bg);padding:10px;border-radius:var(--radius-sm)} .login-err{color:var(--bad-ink);font-size:var(--t-sm);margin-top:var(--s3);min-height:18px} /* ============================ shell ============================ */ .app{display:none;min-height:100vh} .app.on{display:grid;grid-template-columns:248px 1fr} .side{background:var(--card);border-right:1px solid var(--line);padding:22px var(--s4);display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .side-brand{display:flex;align-items:center;gap:10px;padding:0 6px 18px;border-bottom:1px solid var(--line);margin-bottom:var(--s2)} .side-brand img{height:34px} .side-brand .t{font-family:var(--font-display);font-weight:700;font-size:var(--t-md);line-height:1.15} .side-brand .t small{display:block;font-family:var(--font);font-weight:500;font-size:var(--t-2xs);color:var(--steel)} .nav{display:flex;flex-direction:column;gap:3px;flex:1;margin-top:var(--s2)} .nav button{display:flex;align-items:center;gap:11px;background:none;border:none;text-align:left;padding:10px var(--s3);border-radius:var(--radius-sm);color:var(--muted);font-size:var(--t-base);font-weight:500} .nav button svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0} .nav button:hover{background:var(--bg-2);color:var(--ink)} .nav button.active{background:var(--navy);color:#fff} .side-user{border-top:1px solid var(--line);padding-top:var(--s3);font-size:var(--t-sm)} .side-user .u{display:flex;align-items:center;gap:9px} .side-user .av{width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:600;font-size:var(--t-sm);flex-shrink:0} .side-user .nm{font-weight:600}.side-user .rl{color:var(--steel);font-size:var(--t-2xs)} .side-user #logout{margin-top:10px;width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:7px;color:var(--muted);font-size:var(--t-sm)} .side-user #logout:hover{background:var(--hover);color:var(--ink)} .main{padding:30px 38px;max-width:1240px} .page-head{margin-bottom:22px} .page-head.row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap} .page-head h1{font-size:var(--t-3xl);margin:0 0 4px;letter-spacing:-.015em} .page-head p{color:var(--muted);margin:0;font-size:var(--t-base)} /* ============================ data display ============================ */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3);margin-bottom:22px} .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4) 18px;box-shadow:var(--shadow)} .kpi .k{font-size:var(--t-xs);color:var(--steel);font-weight:600;text-transform:uppercase;letter-spacing:.4px} .kpi .v{font-family:var(--font-display);font-size:var(--t-4xl);font-weight:700;margin-top:6px;line-height:1;letter-spacing:-.02em} .kpi .d{font-size:var(--t-xs);color:var(--muted);margin-top:5px} .kpi.accent{background:linear-gradient(150deg,var(--navy),var(--navy-l));color:#fff;border:none} .kpi.accent .k{color:#c3d1ee}.kpi.accent .d{color:#d6e0f2} .kpi.danger .v{color:var(--bad-ink)} .kpi.warnv .v{color:var(--warn)} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:var(--s5)} .card-h{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap} .card-h h3{margin:0;font-size:var(--t-lg)} .card-h .sub{font-size:var(--t-sm);color:var(--muted);font-weight:400} .card-b{padding:6px var(--s5) var(--s3)} table{width:100%;border-collapse:collapse;font-size:var(--t-base)} th{text-align:left;color:var(--steel);font-weight:600;font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.4px;padding:var(--s3) 10px;border-bottom:1px solid var(--line)} td{padding:11px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle} tr:last-child td{border-bottom:none} .mono{font-family:var(--font-mono);font-size:var(--t-sm)} .pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:var(--t-2xs);font-weight:600} .pill.ok{background:var(--ok-bg);color:var(--ok-ink)} .pill.warn{background:var(--warn-bg);color:var(--warn-ink)} .pill.bad{background:var(--bad-bg);color:var(--bad-ink)} .pill.gray{background:var(--chip-bg);color:var(--steel)} .pill.navy{background:var(--chip-navy-bg);color:var(--chip-navy-ink)} .pill.purple{background:var(--chip-purple-bg);color:var(--chip-purple-ink)} .tag{display:inline-block;font-size:var(--t-2xs);font-weight:600;color:var(--chip-navy-ink);background:var(--chip-navy-bg);padding:3px var(--s2);border-radius:6px} .bar{height:7px;background:var(--track);border-radius:20px;overflow:hidden;min-width:90px} .bar i{display:block;height:100%;border-radius:20px;background:var(--navy)} .risk-meter{width:60px;height:7px;background:var(--track);border-radius:20px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:var(--s2)} .risk-meter i{display:block;height:100%;border-radius:20px} /* ============================ controls ============================ */ .btn-sm{padding:var(--s2) 13px;border-radius:var(--radius-sm);font-size:var(--t-sm);font-weight:600;border:1px solid var(--line);background:var(--card);color:var(--ink)} .btn-sm:hover{background:var(--bg-2)} .btn-sm.pri{background:var(--navy);color:#fff;border-color:var(--navy)} .btn-sm.pri:hover{background:var(--navy-d)} .btn-sm.ok{background:var(--ok);color:#fff;border-color:var(--ok)} .btn-sm.bad{background:var(--card);color:var(--bad-ink);border-color:var(--bad-line)} .btn-sm.bad:hover{background:var(--bad-bg)} .rowact{display:flex;gap:7px;flex-wrap:wrap} .actionbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);background:var(--surface-2)} .actionbar .btn-sm{padding:7px var(--s3)} .actionbar .selall{display:flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--muted);font-weight:600} .actionbar .absep{width:1px;height:22px;background:var(--line)} .actionbar .selcount{margin-left:auto;font-size:var(--t-xs);color:var(--steel);font-weight:600} input[type=checkbox]{accent-color:var(--navy);width:15px;height:15px} select{padding:var(--s2) 11px;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:var(--t-sm);font-family:inherit} select:focus{border-color:var(--navy);outline:none} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)} .modal-ov{position:fixed;inset:0;background:rgba(20,28,48,.5);display:none;align-items:center;justify-content:center;padding:var(--s6);z-index:50} .modal-ov.on{display:flex} .modal{background:var(--card);border-radius:16px;max-width:640px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.3)} .modal-h{padding:var(--s5) var(--s6);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .modal-h h2{margin:0;font-size:var(--t-xl)} .modal-h .x{background:var(--bg-2);border:none;border-radius:var(--s2);width:32px;height:32px;font-size:17px;color:var(--muted)} .modal-b{padding:22px var(--s6)} .toast{position:fixed;bottom:var(--s6);right:var(--s6);background:var(--toast-bg);color:var(--toast-ink);padding:13px 18px;border-radius:11px;font-size:var(--t-base);box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:80;opacity:0;transform:translateY(10px);transition:.25s} .toast.on{opacity:1;transform:none} .emptyv{padding:26px;color:var(--muted);font-size:var(--t-base)} /* ============================ responsive ============================ This file previously had no media queries at all, so the five consoles it powers rendered a fixed 248px sidebar and a two-column login on every screen — unusable below roughly 900px. */ @media (max-width:900px){ /* login stacks; the hero becomes a short banner rather than a full panel */ .login-wrap{grid-template-columns:1fr} .login-hero{padding:28px 22px;gap:22px;min-height:auto} .lh-mid h1{font-size:28px} .lh-mid p{font-size:var(--t-md)} .lh-mark{height:46px} .login-form{padding:28px 20px} /* sidebar becomes a horizontal, scrollable top bar */ .app.on{grid-template-columns:1fr} .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line);padding:var(--s3) var(--s4)} .side-brand{padding-bottom:var(--s3);margin-bottom:0} .nav{flex-direction:row;overflow-x:auto;gap:6px;margin-top:10px;padding-bottom:2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch} .nav button{white-space:nowrap;flex:0 0 auto;padding:var(--s2) var(--s3)} .side-user{border-top:1px solid var(--line);margin-top:10px;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:var(--s3)} .side-user #logout{margin-top:0;width:auto;padding:7px var(--s3);flex-shrink:0} .main{padding:var(--s5) var(--s4)} .page-head h1{font-size:var(--t-2xl)} /* tables scroll inside their card rather than blowing out the page width */ .card-b{overflow-x:auto} .card-b table{min-width:600px} .modal-ov{padding:var(--s3)} } @media (max-width:560px){ .lh-stats{display:none} /* keeps the sign-in form above the fold */ .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px} .main{padding:var(--s4) var(--s3)} .card-h{padding:var(--s3) var(--s4)} .card-b{padding:6px var(--s4) var(--s3)} .toast{left:var(--s3);right:var(--s3);bottom:var(--s3)} }