/* ========================================================================== 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; /* --navy as INK. It is a fill colour first, and dark mode lifts it to #3f63a8 so it reads as a surface — which put every ghost/mini button's label at 2.84:1 on a dark card. Ink needs its own token so the two can move apart. */ --navy-ink:#2b4a86; /* A navy SURFACE that carries white text. It must not lighten in dark mode the way --navy does: white on the dark-mode --navy-l (#5680c8) is 3.95:1, so the accent KPI panel failed on its own headline value. Holding these at the light-mode values keeps white at 5.9:1 and still reads as a navy panel against a #0d131f page. --on-navy is the secondary label on that surface. */ --navy-fill:#2b4a86; --navy-fill-2:#3f63a8; --on-navy:#e6edfa; /* ---- 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; /* Text sitting ON a filled --ok/--warn/--bad surface (severity badges, danger buttons). The light values above were chosen to clear AA against white ink, so here it stays white. Dark mode lightens the same tokens for use as text, which flips what is readable on top of them — see the dark block. */ --on-accent:#fff; /* Border for a --bad-tinted surface. The dark block already had --bad-line; without a light counterpart every consumer fell back to a neutral grey and lost the red edge. */ --bad-line:#e6c3c3; --bad-line-strong:#d9a2a2; /* Green ink on a RED tint — the "evidence chain intact" tick on an incident card. --ok-ink is tuned against --ok-bg and reaches only 4.27:1 against --bad-bg, so the cross-tint case gets its own darker step. */ --ok-ink-strong:#156b43; /* ---- 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; /* 5.71:1 on --card, 4.93:1 on --hover. --navy-l (#5680c8) reaches only 4.24:1 and was the tempting wrong answer. */ --navy-ink:#6f97e0; /* Deliberately NOT lifted — see the light block. */ --navy-fill:#2b4a86; --navy-fill-2:#3f63a8; --on-navy:#e6edfa; /* On a dark card the red tint is dark too, so the tick lifts instead. */ --ok-ink-strong:#5fd39a; --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; /* These three are lifted for legibility as TEXT on a dark background, which drops white ink on top of them below AA (warn 2.34:1, bad 3.70:1 — a SEV badge was the least readable thing on the incident card). Dark ink on the same fills clears it comfortably: 7.95:1 on warn, 5.03:1 on bad. */ --on-accent:#0d131f; --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; --bad-line-strong:#7d4340; --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:30px;letter-spacing:.015em;color:#f4f7fc} .lh-wt b{color:#a9b4c8;font-weight:700} .lh-ws{font-size:12px;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-ink);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} /* A grid item defaults to min-width:auto, so it refuses to shrink below its widest unshrinkable child — a table with min-width:900px, a nowrap toolbar. Without this the whole column grew past the viewport and the PAGE scrolled sideways instead of the table scrolling inside its own card. That is what made 12 of 19 consoles overflow a 375px screen while each page's own `overflow-x:auto` looked correct in isolation. */ .app.on>*{min-width:0} .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} /* flex-wrap so the co-brand row can take a full line beneath the lockup instead of squeezing the rail — an unwrapped flex row would push it wide. */ .side-brand{display:flex;align-items:center;gap:10px;padding:0 6px 18px;border-bottom:1px solid var(--line);margin-bottom:var(--s2);flex-wrap:wrap} .side-brand img{height:34px;flex:none} /* The -alpha mark is dark navy artwork on transparency, so on a dark sidebar it sank into the background and read as a ghost. -ondark is the same mark drawn for a dark surface — the variant the login has always used. */ :root[data-theme="dark"] .side-brand img{content:url(/assets/forthound-mark-ondark.png)} /* Houndy lives in base.css, not here — see the note there. */ /* ---- tenant co-branding (suite.js) ---- The customer's mark sits BELOW the FortHound lockup behind a rule, never in place of it. Separated rather than merged so it never reads as one combined logo — this is FortHound running for them, and the chrome should say so. */ .fh-cobrand{display:flex;align-items:center;gap:8px;width:100%;order:99; margin-top:10px;padding-top:10px;border-top:1px solid var(--line);min-width:0} .fh-cobrand img{height:22px;width:auto;max-width:110px;object-fit:contain;flex:none} .fh-cobrand-n{font-family:var(--font);font-weight:600;font-size:var(--t-xs); color:var(--muted);overflow-wrap:anywhere;min-width:0} /* The accent paints a rule, not text and not a fill under text we do not control. suite.js only sets --tenant-accent-ink when a readable ink exists. */ .fh-tenant-accent .side-brand{border-bottom-color:var(--tenant-accent)} .fh-tenant-accent .fh-cobrand{border-top-color:var(--tenant-accent)} @media(max-width:900px){ .fh-cobrand{width:auto;order:0;margin-top:0;padding-top:0;border-top:none; padding-left:9px;border-left:1px solid var(--line)} .fh-tenant-accent .fh-cobrand{border-left-color:var(--tenant-accent)} } /* min-width:0 lets the title wrap instead of forcing the row wider than the viewport, which is what pushed "…Center" off the screen edge on a phone. */ .side-brand .t{font-family:var(--font-display);font-weight:700;font-size:var(--t-md);line-height:1.15;min-width:0;overflow-wrap:break-word} .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-fill),var(--navy-fill-2));color:#fff;border:none} .kpi.accent .k{color:var(--on-navy)}.kpi.accent .d{color:var(--on-navy)} .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)} /* ---- chart interaction (chart.js) ---- Every magnitude bar in the suite shares one shape — a track holding a single — so one behaviour upgrades all fourteen variants. These rules style the upgraded state only; an un-upgraded bar keeps its original look exactly. */ .fhc-bar{cursor:default;position:relative} /* The bars are 7-9px tall, well under any sane hit target, so the focus ring and hover affordance are drawn on a padded pseudo-element instead. */ .fhc-bar::after{content:"";position:absolute;inset:-8px -4px;border-radius:var(--radius-sm)} .fhc-bar:focus{outline:none} .fhc-bar:focus-visible::after{outline:2px solid var(--focus);outline-offset:0} .fhc-bar:hover i,.fhc-bar:focus-visible i{filter:brightness(1.12)} .fhc-grow{transition:width .5s cubic-bezier(.22,.7,.15,1)} .fhc-tip{position:fixed;z-index:4000;pointer-events:none;opacity:0; transition:opacity .12s ease;background:var(--toast-bg);color:var(--toast-ink); font:600 var(--t-xs)/1.35 var(--font);padding:6px 9px;border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);max-width:min(260px,calc(100vw - 16px)); /* Text tokens, never the series colour — the mark carries identity. */ white-space:normal} .fhc-tip.on{opacity:1} @media (prefers-reduced-motion:reduce){.fhc-tip{transition:none}.fhc-grow{transition:none}} .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-ink)} .btn-sm.pri:hover{background:var(--navy-d)} .btn-sm.ok{background:var(--ok);color:var(--on-accent);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-ink);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-ink);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:16px;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:30px} .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)} /* Three things share this row on ops/ircommand — emblem, mark, title — and at 375px the title pushed the row past the viewport edge. The emblem is sized by each page's OWN mobile rule (the page owns .side-emblem and its inline