/* * RiskTech UI — the one stylesheet (Phase 1 of docs/CI4-UI-Upgrade-Plan.md). * Extracted verbatim from the designer-signed-off mockup: docs/risktech-ui-mockup.html. * :root tokens are byte-identical to the mockup. Light mode is the default on purpose — the * mockup keys dark off [data-ui="dark"], not prefers-color-scheme, and Phase 1 ships light only; * the dark tokens are parked here (present, unused) per the plan's open decision #3. * Loaded LAST in the 4 chrome files so converted markup wins over Bootstrap/main.css. */ :root { --navy:#1A3C6E; --blue:#003399; --blue-dark:#012E89; --blue-link:#1B48A3; --blue-soft:#EAF0FB; --bg:#F4F6F9; --card:#FFFFFF; --line:#E3E7ED; --line-2:#CFD6E0; --text:#1C2430; --text-2:#4A5568; --muted:#667282; /* A11y (product-owner approved): six text-bearing tokens darkened to clear WCAG AA 4.5:1 against the background each one is actually rendered on — hue and saturation preserved, so the ramp order, the chip shapes and the chart identity are unchanged. Measured before -> after: --p-high 2.76 -> 4.65 --p-moderate/--warn 2.36 -> 4.56 --s-progress 2.77 -> 4.55 --s-withdrawn 1.30 -> 4.55 --muted 3.41 -> 4.53 (--s-withdrawn also fixes the near-invisible Withdrawn donut arc, which shares this token.) STILL OPEN for a designer pass: --line-2 borders at 1.46:1 — design judgement, not contrast maths. (The --s-complete/--p-low "same green, two meanings" collision listed here is now resolved, as a side effect rather than by design: the client's palette moved --s-complete to #167902 while --p-low kept #2E7D4F, so status-green and priority-green are no longer the same swatch.) */ --p-extreme:#C62828; --p-high:#AC5408; --p-moderate:#8B6B04; --p-low:#2E7D4F; --p-mgmt:#5A6675; --p-extreme-bg:#FDECEA; --p-high-bg:#FDF0E3; --p-moderate-bg:#FBF4DF; --p-low-bg:#E8F4EC; --p-mgmt-bg:#EEF1F4; /* Status = lifecycle, a SEPARATE scale from priority on purpose. Deliberately contains no red/orange/amber, so a status can never be misread as a risk level. Six hues, each clearly distinct from its neighbours. Hues are the client's (Deb Crump, "RiskTech | Pie Graph Colourscheme", 2026-09). Note her scheme puts Outstanding on purple and On Hold on navy — the reverse of what this file carried — so the two swapped rather than merely restyled. --c-* below are the ARC colours and are her hexes EXACTLY. These --s-* are the same six hues used as chip TEXT, which is a different job: a filled arc only has to be visible, but text on a tint must clear WCAG AA 4.5:1. Three of her six do not, as text, on their own chip tint: Not Accepted #B7B7B7 1.84:1 In Progress #019EFF 2.46:1 Complete #1A8E02 3.56:1 so those three are darkened along the same hue, exactly as the A11y note above did. The other three are her values untouched. Measured after: complete 4.55, outstanding 5.71, hold 9.59, progress 4.50, notacc 4.63, withdrawn 8.41. Chart identity is preserved because hue is. */ --s-complete:#167902; --s-outstanding:#6A00FF; --s-progress:#006DB1; --s-hold:#002A85; --s-notacc:#686868; --s-withdrawn:#0E0E0E; /* Donut arcs — the client's palette verbatim. Split from --s-* so the graph can be exactly the signed-off artwork while the chips stay legible; before this they were one token doing both. */ --c-complete:#1A8E02; --c-outstanding:#6A00FF; --c-hold:#002A85; --c-progress:#019EFF; --c-notacc:#B7B7B7; --c-withdrawn:#0E0E0E; --overdue:#C62828; --done:#2E7D4F; --warn:#8B6B04; --logo-filter:none; --r:10px; --shadow:0 1px 2px rgba(28,36,48,.05), 0 2px 8px -2px rgba(28,36,48,.07); --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Dark tokens: parked, not wired to any toggle in Phase 1. Kept intact for whenever the open decision on dark mode (plan doc, "open decisions" #3) is made. */ :root[data-ui="dark"] { --navy:#0E1726; --blue:#0F2A5E; --blue-dark:#0B2050; --blue-link:#7FAAF0; --blue-soft:#1B2842; --bg:#0C1119; --card:#141C28; --line:#26303F; --line-2:#3A4657; --text:#EDF1F7; --text-2:#B4BECD; --muted:#8492A6; --p-extreme:#F1837A; --p-high:#F0A85B; --p-moderate:#E3C55C; --p-low:#6FC191; --p-mgmt:#9AA6B5; --p-extreme-bg:#2C1614; --p-high-bg:#2C2013; --p-moderate-bg:#2A2513; --p-low-bg:#13291D; --p-mgmt-bg:#1D2530; /* Same six client hues, lifted instead of darkened because the ground is dark. Still parked. */ --s-complete:#1FAB02; --s-outstanding:#AA6EFF; --s-progress:#019EFF; --s-hold:#5D90FF; --s-notacc:#B7B7B7; --s-withdrawn:#D4D4D4; /* Arc palette, dark. NOT her hexes: #0E0E0E Withdrawn on a #141C28 card is the invisible-arc bug the A11y note above records fixing once already, so the two darkest are lifted to clear 3:1. */ --c-complete:#1A8E02; --c-outstanding:#8229FF; --c-hold:#0655FF; --c-progress:#019EFF; --c-notacc:#B7B7B7; --c-withdrawn:#676767; --overdue:#F1837A; --done:#6FC191; --warn:#E3C55C; --logo-filter:brightness(0) invert(1); --shadow:0 1px 2px rgba(0,0,0,.4); } * { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } a { color:var(--blue-link); } :focus-visible { outline:3px solid var(--blue-link); outline-offset:2px; border-radius:4px; } /* Skip link (WCAG 2.4.1). Eight nav links precede
on every page; this is the first focusable element in the document so one Tab clears them. Positioned off-screen rather than display:none — display:none would remove it from the tab order and defeat the entire point. It lives inside .header-wrapper on purpose: that region is already excluded from the golden master's text/link walk, so a global chrome addition costs zero $TRANSFORMS entries. */ /* Visually hidden, still in the accessibility tree. Used where the design deliberately shows no text but assistive tech needs one (the dashboard's

). NOT display:none — that hides it from AT too, which is the opposite of the point. */ .vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .skip-link { position:absolute; left:-9999px; top:0; z-index:20; } .skip-link:focus { left:12px; top:12px; padding:10px 14px; background:var(--card); color:var(--blue-link); border:1px solid var(--blue-link); border-radius:8px; font-weight:600; text-decoration:none; } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } } .wrap { max-width:1120px; margin:0 auto; padding:0 24px; } /* ---------- HEADER ---------- */ .logo-bar { background:var(--card); border-bottom:1px solid var(--line); } /* P1-01 REVERTED (product owner): the client-supplied risktech-logo.png is used AS SUPPLIED — we do not re-cut their brand asset. It is a 215x80 lockup whose top 51 rows are a navy rectangle sitting flush on the cap-line of "RISK" (same colour, zero gap), which is why it reads as a bar across the wordmark at 58px/38px. That is a defect in the source artwork, not in this CSS: the fix is a properly-built lockup from the client. Original geometry restored below, bleed included. padding-block again: this element is also a .wrap, which owns the horizontal padding. Top padding is 0 on purpose so the navy block bleeds to the very top of the page, as on the current site. */ .logo-row { display:flex; align-items:center; gap:16px; padding-block:0 14px; } .logo { display:flex; align-self:stretch; } .logo img { height:58px; width:auto; display:block; filter:var(--logo-filter); } .cobrand { display:flex; align-items:center; gap:11px; padding-left:16px; border-left:1px solid var(--line); } .cobrand-mark { width:32px; height:32px; border-radius:6px; flex:none; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; } .cobrand-t { font-size:14px; font-weight:600; color:var(--text-2); line-height:1.3; display:block; } .cobrand-s { font-size:12.5px; color:var(--muted); } .who { margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; } .who b { color:var(--text-2); font-weight:600; } .navbar { background:var(--blue); } .navbar .wrap { display:flex; align-items:center; gap:1px; flex-wrap:wrap; } .navbar a { color:#fff; opacity:.85; text-decoration:none; padding:13px 15px; font-size:14.5px; font-weight:500; transition:background .15s ease, opacity .15s ease; display:inline-flex; align-items:center; gap:7px; } .navbar a:hover { opacity:1; background:rgba(255,255,255,.10); } .navbar a[aria-current="page"] { opacity:1; background:var(--blue-dark); font-weight:600; } .navbar .right { margin-left:auto; } .navbar .right a { background:var(--blue-dark); } /* QA-09: mobile hamburger. Hidden on desktop; on small screens it collapses the nav into a toggled vertical menu instead of wrapping to two rows. */ .nav-toggle { display:none; background:none; border:0; color:#fff; cursor:pointer; padding:11px 6px; align-items:center; } .nav-pill { background:var(--overdue); color:#fff; border-radius:20px; padding:1px 7px; font-size:12px; font-weight:700; } /* ---------- PAGE ---------- */ /* padding-block only — .wrap owns the horizontal padding, don't let the shorthand clobber it */ .page { padding-block:28px 44px; } .crumbs { font-size:14px; color:var(--muted); margin-bottom:10px; } .crumbs a { text-decoration:none; } .crumbs a:hover { text-decoration:underline; } .head { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px; } h1 { font-size:29px; font-weight:700; letter-spacing:-.02em; margin:0; text-wrap:balance; } .head p { margin:3px 0 0; color:var(--muted); font-size:15px; } .head-right { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; } .btn { display:inline-flex; align-items:center; gap:7px; padding:10px 16px; min-height:44px; border:1px solid var(--line-2); border-radius:8px; background:var(--card); color:var(--text-2); font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none; transition:background .15s ease, border-color .15s ease, color .15s ease; } .btn:hover { background:var(--bg); border-color:var(--muted); color:var(--text); } .btn-primary { background:var(--blue); border-color:var(--blue); color:#fff; } .btn-primary:hover { background:var(--blue-dark); border-color:var(--blue-dark); color:#fff; } .btn-quiet { border-color:transparent; background:none; padding:8px 10px; min-height:40px; } .btn-quiet:hover { background:var(--bg); border-color:var(--line); } /* P2-09: .danger used to be a HOVER-only colour change, so at rest "Delete Location" was pixel-for-pixel "Edit Location" and the two sat 4px apart — the review's "destructive actions are visually identical to safe ones". It now reads destructive without being hovered. One rule, every destructive control in the build (three lists, the comment cards, the attachment remove). */ .btn-quiet.danger { color:var(--overdue); } .btn-quiet.danger:hover { color:var(--overdue); background:var(--p-extreme-bg); border-color:color-mix(in srgb, var(--overdue) 25%, transparent); } /* ...and it is set apart from the safe actions beside it rather than being the next item in the row. */ .acts-danger { display:inline-flex; align-items:center; margin-left:6px; padding-left:8px; border-left:1px solid var(--line); } .card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); } .card-h { padding:18px 20px 0; display:flex; align-items:flex-start; gap:12px; } .card-h h2 { margin:0; font-size:17px; font-weight:700; letter-spacing:-.01em; } .card-h p { margin:2px 0 0; color:var(--muted); font-size:13.5px; } .card-h .btn { margin-left:auto; padding:6px 12px; min-height:36px; font-size:13.5px; } /* only the FIRST button gets the auto margin — otherwise the free space splits between them and they drift apart instead of sitting together on the right */ .card-h .btn + .btn { margin-left:8px; } .card-b { padding:18px 20px; } /* ---------- SUMMARY ---------- */ .summary { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; } .sum { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px 20px; display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit; transition:border-color .15s ease, transform .15s ease; } .sum:hover { border-color:var(--line-2); transform:translateY(-1px); } .sum-icon { width:44px; height:44px; border-radius:10px; flex:none; display:grid; place-items:center; } .sum-n { font-size:30px; font-weight:700; line-height:1.1; letter-spacing:-.02em; display:block; } .sum-l { font-size:14.5px; color:var(--text-2); font-weight:600; display:block; } .sum-note { font-size:13px; color:var(--muted); } .cols { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; } .stack { display:flex; flex-direction:column; gap:18px; } /* ---------- ROWS ---------- */ .attn { border-top:1px solid var(--line); margin-top:16px; } /* Overdue work-queue row. Grid: a body column (title on one line, a meta line of priority/status chips + location below) that TRUNCATES instead of wrapping to one-word-per-line, and a fixed trail (urgency badge + chevron) pinned right. Stays clean in the narrow dashboard column and on mobile. */ .attn .qrow { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px 14px; padding:13px 20px; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; transition:background .13s ease; } .attn .qrow:last-child { border-bottom:0; } .attn .qrow:hover { background:var(--bg); } .attn .qrow-body { min-width:0; display:flex; flex-direction:column; gap:6px; } /* P3-04: one line + ellipsis cut "Sprinkler Block Plan and Mai…" mid-word — a recommendation title is the only thing identifying the row, and the truncated half was 45px short of fitting. Two lines before the ellipsis; still clamped, so a long title can never push the queue out of the column. */ .attn .qrow-t { font-weight:600; color:var(--text); overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; } .attn .qrow-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px; } .attn .qrow-loc { font-size:13px; color:var(--muted); } .attn .qrow-trail { display:flex; align-items:center; gap:9px; flex:none; } .chev { color:var(--muted); flex:none; } /* ---------- PRIORITY / STATUS ---------- */ .pri { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px; font-size:13px; font-weight:600; white-space:nowrap; border:1px solid transparent; } .pri::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; } .pri-extreme { color:var(--p-extreme); background:var(--p-extreme-bg); border-color:color-mix(in srgb, var(--p-extreme) 25%, transparent); } .pri-high { color:var(--p-high); background:var(--p-high-bg); border-color:color-mix(in srgb, var(--p-high) 25%, transparent); } .pri-moderate { color:var(--p-moderate); background:var(--p-moderate-bg); border-color:color-mix(in srgb, var(--p-moderate) 25%, transparent); } .pri-low { color:var(--p-low); background:var(--p-low-bg); border-color:color-mix(in srgb, var(--p-low) 25%, transparent); } .pri-mgmt { color:var(--p-mgmt); background:var(--p-mgmt-bg); border-color:color-mix(in srgb, var(--p-mgmt) 25%, transparent); } .st { font-size:14px; color:var(--text-2); white-space:nowrap; } /* Status chip — same shape as .pri, driven by the status scale (--s-*). The mockup only ever shows status as plain text (.st), but ui_helper.php's status_chip() needs a chip to satisfy "chips carry text as well as colour, never colour alone" for status too, not just priority. Uses only the locked --s-* tokens already above; no new hexes. */ .stat { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px; font-size:13px; font-weight:600; white-space:nowrap; border:1px solid transparent; } .stat::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; } .stat-complete { color:var(--s-complete); background:color-mix(in srgb, var(--s-complete) 14%, var(--card)); border-color:color-mix(in srgb, var(--s-complete) 25%, transparent); } .stat-outstanding { color:var(--s-outstanding); background:color-mix(in srgb, var(--s-outstanding) 10%, var(--card)); border-color:color-mix(in srgb, var(--s-outstanding) 25%, transparent); } .stat-progress { color:var(--s-progress); background:color-mix(in srgb, var(--s-progress) 14%, var(--card)); border-color:color-mix(in srgb, var(--s-progress) 25%, transparent); } .stat-hold { color:var(--s-hold); background:color-mix(in srgb, var(--s-hold) 14%, var(--card)); border-color:color-mix(in srgb, var(--s-hold) 25%, transparent); } .stat-notacc { color:var(--s-notacc); background:color-mix(in srgb, var(--s-notacc) 14%, var(--card)); border-color:color-mix(in srgb, var(--s-notacc) 25%, transparent); } /* 35%/45% was tuned for the old slate --s-withdrawn (#3C5169), which needed the extra weight to read at all. Against the client's near-black it produced a dark grey block twice the weight of the other five chips. Same 14%/25% as its neighbours now; still 14.4:1, since the hue does the work. */ .stat-withdrawn { color:var(--s-withdrawn); background:color-mix(in srgb, var(--s-withdrawn) 14%, var(--card)); border-color:color-mix(in srgb, var(--s-withdrawn) 25%, transparent); } .due { font-size:14px; color:var(--text-2); white-space:nowrap; } .due.late { color:var(--overdue); font-weight:700; } /* P3-16: the date above already refuses to wrap, but the overdue sub-line under it did — so every overdue row read "17 mths" / "overdue" on two lines, orphaning the one word that carries the meaning. Measured at 1440px on /recommendation/index/7: the sub-line was 42px (two 20.8px lines) and is 21px now; the auto-layout table absorbs it by widening Due from 117px to 137px, with no cell overflow and no horizontal page scroll. Scoped to the sub-line that follows a .due, so the other .t-sub users (the location cards' address line) still wrap as before. */ .due + .t-sub { white-space:nowrap; } .tag-late { display:inline-flex; align-items:center; gap:5px; background:var(--p-extreme-bg); color:var(--overdue); border:1px solid color-mix(in srgb, var(--overdue) 25%, transparent); padding:2px 9px; border-radius:20px; font-size:12.5px; font-weight:700; white-space:nowrap; } .tag-ok { display:inline-flex; align-items:center; gap:5px; background:var(--p-low-bg); color:var(--done); border:1px solid color-mix(in srgb, var(--done) 25%, transparent); padding:2px 9px; border-radius:20px; font-size:12.5px; font-weight:700; white-space:nowrap; } /* ---------- BARS / DONUT ---------- */ .bars { display:flex; flex-direction:column; gap:13px; } .bar { display:grid; grid-template-columns:150px 1fr 28px; align-items:center; gap:12px; } .bar.wide { grid-template-columns:270px 1fr 28px; } .bar .l { font-size:14px; color:var(--text-2); } .bar .track { display:block; height:10px; background:var(--bg); border:1px solid var(--line); border-radius:6px; overflow:hidden; } /* display:block matters — a bare span would stay inline and drop width/height. No min-width: a zero count must render as nothing, not a sliver. */ .bar .fill { display:block; height:100%; border-radius:6px; } .bar .n { text-align:right; font-weight:700; font-size:14px; } .axis { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:10px; padding-left:162px; padding-right:40px; } .bars.wide-bars ~ .axis { padding-left:282px; } .donut-row { display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .donut { position:relative; flex:none; } .donut svg { transform:rotate(-90deg); display:block; } .donut-mid { position:absolute; inset:0; display:grid; place-content:center; text-align:center; } .donut-mid .n { font-size:24px; font-weight:700; letter-spacing:-.02em; } .donut-mid .l { font-size:12.5px; color:var(--muted); } .keys { flex:1; min-width:168px; display:flex; flex-direction:column; gap:7px; } .key { display:flex; align-items:center; gap:9px; font-size:14px; } .key .sw { width:11px; height:11px; border-radius:3px; flex:none; } .key .nm { color:var(--text-2); } .key .vl { margin-left:auto; font-weight:700; } /* P1-05: horizontal key under a bar chart whose fill colour encodes a category rather than the value beside it. Reuses .key/.sw so there is still one swatch treatment in the build. */ .chart-legend { display:flex; flex-wrap:wrap; align-items:center; gap:6px 15px; margin-top:6px; padding-top:12px; border-top:1px solid var(--line); } .chart-legend .key { font-size:13px; gap:7px; } .chart-legend .lg-t { font-size:13px; color:var(--muted); } /* ---------- NEWS ---------- */ .news { display:flex; gap:14px; padding:16px 20px; border-bottom:1px solid var(--line); } .news:last-child { border-bottom:0; } .news-img { width:82px; height:60px; border-radius:8px; flex:none; background:var(--blue-soft); display:grid; place-items:center; color:var(--blue-link); } .news h3 { margin:0 0 2px; font-size:15px; font-weight:650; line-height:1.35; } .news h3 a { color:var(--text); text-decoration:none; } .news h3 a:hover { color:var(--blue-link); } .news .m { font-size:13px; color:var(--muted); } /* ---------- PLANNED MAINTENANCE ---------- */ .qmaint { padding:14px 20px; border-bottom:1px solid var(--line); } .qmaint:last-child { border-bottom:0; } .qmaint-h { display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .qmaint-t { font-weight:600; color:var(--text); } .qmaint-w { margin-top:4px; font-size:13.5px; color:var(--text-2); } .qmaint-d { margin-top:3px; font-size:13px; color:var(--muted); } .qmaint-empty { padding:16px 20px; color:var(--muted); font-size:14px; } /* ---------- TABLE ---------- */ /* Walkthrough #8: every horizontally scrolling table hid its own row actions with no hint that it scrolled — no scrollbar at rest, no shadow, nothing. On Admin > Current Users that put the ONLY action (Edit) off-screen at 1440; the same thing hides the overdue list's actions at 768. Fixed once, on the shared container, not per table. The `local` gradients are the page background painted over each edge; the `scroll` ones are the shadows underneath. When the content is scrolled to an edge the local layer sits on top of the shadow and hides it, so a shadow appears exactly when there is more content that way. Pure CSS, no JS, no scroll listener. */ .scroll { overflow-x:auto; background: linear-gradient(to right, var(--card), transparent) left / 24px 100% no-repeat local, linear-gradient(to left, var(--card), transparent) right / 24px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(28,36,48,.16), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(28,36,48,.16), transparent) right / 12px 100% no-repeat scroll; } table { width:100%; border-collapse:collapse; } th { text-align:left; font-size:13px; font-weight:700; color:var(--muted); padding:12px 16px; border-bottom:1px solid var(--line); white-space:nowrap; } th button { background:none; border:0; font:inherit; color:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:0; } th button:hover { color:var(--text); } /* P1-17: every sortable header label is a real