/* App-specific additions on top of styles.css (the shared brand design design system). Only what the questionnaire/report UI needs that the marketing site's stylesheet doesn't already provide. */ /* ---------- PERSISTENT APP NAV (23 July 2026 UI/UX cleanup pass) ---------- Replaces the per-page "Signed in as X · Organisation · Enforcement watch · Staff training" topbar-meta row (duplicated with slight variations across dashboard/organisation/etc.) with one nav in the site header, shown only when a user is logged in. Icon-over-label pairs + active-page pill (Version 5 feedback batch, 6 August 2026): was plain text links with no current-page state at all. */ .app-nav { display: flex; gap: 6px; } .app-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 14px; border-radius: 12px; text-decoration: none; color: #6e6e73; font-size: 11px; font-weight: 500; } .app-nav-item:hover { background: #f5f5f7; } .app-nav-item.is-active { background: #f0f0f2; color: #1d1d1f; font-weight: 700; } /* ---------- LIVE TRACKING INDICATOR (Regulation tracker nav link) ---------- Only shown when there's a genuine new update in the last 30 days for the user's industries (see account_menu_context()'s has_new_regulatory_updates -- Version 5 feedback batch, 6 August 2026, replaces the earlier entitlement-only condition) -- never on the locked state. */ .nav-live-dot { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--red); vertical-align: middle; animation: nav-live-pulse 2s ease-out infinite; } @keyframes nav-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--red-rgb), 0.55); } 70% { box-shadow: 0 0 0 6px rgba(var(--red-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--red-rgb), 0); } } /* ---------- APP TYPOGRAPHY SCALE ---------- styles.css's h1/h2 are sized for a marketing hero (clamp up to 64px/42px) -- correct on the landing page, wildly oversized for a settings/report screen. Every app-rendered page (dashboard, questionnaire, report, organisation, etc.) lives under .app-main, so scoping a compact, Apple-HIG-style title scale here (think macOS System Settings / iOS large titles, not a marketing headline) fixes every screen at once without touching the shared marketing stylesheet. */ .app-main h1 { font-size: 26px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; margin-bottom: 6px; } .app-main h2 { font-size: 19px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; margin-top: 40px; margin-bottom: 20px; } .app-main h3 { font-size: 15.5px; line-height: 1.35; letter-spacing: -0.005em; font-weight: 600; margin-bottom: 8px; } .app-main h2:first-child, .app-main h1 + h2 { margin-top: 0; } /* Every .card's own first heading was cancelling this with a repeated inline style="margin-top:0" (~8x in report.html alone) -- one rule here replaces all of them (UI/UX audit, 23 July 2026, finding R4). */ .card > h2:first-child, .card > h3:first-child { margin-top: 0; } .app-main > p:first-of-type { margin-top: 0; } /* A subtitle paragraph directly under an h1 reads as one title block, not two separate elements -- tighten the gap and mute the colour. */ .app-main h1 + p { color: var(--text-secondary); font-size: 14.5px; margin-bottom: 28px; } .app-main { padding: 40px 0 96px; } /* Every app screen (not just the questionnaire) reads better at a bounded, centred content width than stretched across the full 1180px marketing container -- long lines of body text, edge-to-edge tables and rows that float in the left third of a wide viewport are exactly the "crowded / misaligned" complaints this fixes. Deliberately NOT named .app-main -- that class already lives on the
element in base.html, and reusing it here would double up .app-main's own vertical padding. */ .app-content { max-width: 860px; margin: 0 auto; } /* Row-list screens (dashboard, organisation tree) pair a reference/badge/ meta cluster with up to four trailing action buttons on the same row -- 860px is too tight for that combination to stay on one line, so these get a wider column. Kept separate from the default .app-content rather than widening it everywhere, since 860px is the right measure for prose-heavy pages (report findings, review answers). */ .app-content-wide { max-width: 1080px; margin: 0 auto; } .app-topbar-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--divider); } .app-topbar-row form { display: inline; } .progress-line { font-size: 13px; color: var(--text-tertiary); margin-bottom: 18px; } /* Explanation box: calm, informational tone (distinct from legal-draft-banner's provisional/orange styling, since help text isn't flagging a draft status). */ .explain-box { background: var(--gray-light); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 16px 20px; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: 18px 0 28px; } /* "How to find this out" sits directly under a "why we're asking" box on the addon walkthrough (24 July 2026, per Zubin's plain-English-guidance feedback) -- a green left border instead of the default accent tells the two apart at a glance without needing two different icons/wording tricks. */ .explain-box + .explain-box-howto { margin-top: -20px; } .explain-box-howto { border-left-color: var(--green); } /* Training page's "why this matters" bar (Version 5 feedback batch, 6 August 2026) -- light green tint rather than the default gray, plus a small icon (the first .explain-box usage to carry one; scoped to this modifier only, doesn't touch the icon-less usages above). */ .explain-box-training { background: #f2f8f4; border-left-color: #5fd67d; display: flex; align-items: flex-start; gap: 10px; } .explain-box-icon { flex: none; margin-top: 1px; color: #5fd67d; } .legislation-line { font-size: 13px; color: var(--text-tertiary); margin: -6px 0 22px; } .legislation-line a { color: var(--accent); text-decoration: none; } .legislation-line a:hover { text-decoration: underline; } .option-list { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 24px; } .option-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--divider); border-radius: var(--r-md); margin-bottom: 10px; cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease); } .option-row:hover { border-color: var(--accent); background: var(--gray-100); } .option-row:has(input:checked) { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); box-shadow: 0 0 0 1px var(--accent); } .option-row input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--accent); } .option-row .option-label { display: flex; flex-direction: column; gap: 3px; cursor: pointer; } .option-row .option-title { font-weight: 600; color: var(--ink); font-size: 15px; } .option-row .option-desc { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; } .progress-bar-track { height: 6px; background: var(--gray-light); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 10px; } .progress-bar-fill { height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width 0.3s var(--ease); } .question-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--divider); } .question-nav-right { display: flex; align-items: center; gap: 20px; } .question-nav .btn { margin-top: 0; } .rationale-field { margin-top: 8px; margin-bottom: 8px; } .alert-box { border: 1px solid var(--red); background: #fde8e8; color: var(--red); border-radius: var(--r-md); padding: 16px 20px; font-weight: 600; font-size: 15px; margin-bottom: 24px; } .override-line { font-size: 14px; color: var(--red); margin: 4px 0; } .rating-badge { font-weight: 700; } .exec-summary-line { font-size: 16px; margin-bottom: 10px; } .exec-summary-line:last-child { margin-bottom: 0; } .report-row-list { display: flex; flex-direction: column; gap: 10px; } .report-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border: 1px solid var(--divider); border-radius: var(--r-sm); } /* Was display:block, which forced this onto its own line under the reference/badge no matter how much room was available -- the whole point of .report-row-title being a flex row was to keep ref, badge and meta on one line, so this was fighting its own container. white-space:nowrap stops the meta text itself line-breaking mid-phrase if the row does have to wrap onto a second line at narrow widths. */ .report-row-meta { font-size: 13px; color: var(--text-tertiary); white-space: nowrap; } /* margin-left:auto (not .report-row's old justify-content:space-between) pushes this to the row's right edge -- found by Zubin, 24 July 2026: with space-between, a row whose title is long enough to force .report-row-actions onto its own wrapped line left space-between with only one item on that line, which resolves to flush-left, not flush- right (a version-2-of-2 report row with 5 action buttons visibly did this while an otherwise-identical row with 4 buttons didn't). auto margins resolve per flex line even after wrapping, so this stays right-aligned whether or not it's shared its line with the title. */ .report-row-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-left: auto; } .report-row-actions form { display: inline; } .report-row-actions .btn { padding: 8px 16px; font-size: 13.5px; margin-top: 0; } .btn-danger { color: var(--red); border-color: var(--red); } .btn-danger:hover { background: #fde8e8; border-color: var(--red); } .generating-overlay[hidden] { display: none; } .generating-overlay { position: fixed; inset: 0; background: rgba(29, 29, 31, 0.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 1000; } .generating-card { background: var(--white); border-radius: var(--r-lg); padding: 40px 44px; width: 360px; max-width: 90vw; text-align: center; box-shadow: var(--shadow-lg); } .generating-spinner { width: 40px; height: 40px; margin: 0 auto 20px; border: 3px solid var(--divider); border-top-color: var(--accent); border-radius: 50%; animation: generating-spin 0.8s linear infinite; } @keyframes generating-spin { to { transform: rotate(360deg); } } .generating-stage-text { font-size: 15.5px; font-weight: 600; color: var(--ink); margin-bottom: 18px; min-height: 20px; } display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: repeating-linear-gradient(135deg, #fff3cd, #fff3cd 10px, #ffe69c 10px, #ffe69c 20px); border: 2px dashed #b8860b; border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 24px; } font-weight: 800; letter-spacing: 0.03em; color: #7a5b00; font-size: 13px; } font-size: 13px; color: #7a5b00; flex: 1; } background: #b8860b; color: #fff; border: none; border-radius: var(--r-sm); padding: 8px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; } /* ---------- AUTH PAGES (login / signup) ---------- .measure.card alone floats hard-left inside the 1180px container, leaving a huge dead zone on the right on any normal desktop viewport -- centring a tighter card reads as an intentional, calm auth screen instead. */ .auth-shell { display: flex; justify-content: center; padding: 56px 24px; } .auth-card { width: 100%; max-width: 440px; } /* Small muted helper line under a field/option-group -- replaces the repeated inline color:var(--text-tertiary); font-size:13px pattern. */ .field-hint { color: var(--text-tertiary); font-size: 13px; margin-top: 6px; } /* Compact variant of .option-row for long single-choice lists (e.g. the 8-industry picker) -- same recognisable card, tighter so a long list doesn't turn the page into an endless scroll. */ .option-row-compact { padding: 13px 16px; margin-bottom: 8px; } .option-row-compact .option-title { font-size: 14.5px; } .option-row-compact .option-desc { font-size: 13px; line-height: 1.45; } .auth-card h1 { text-align: center; } .auth-card > p:first-of-type { text-align: center; margin-bottom: 28px; } .auth-card .form-field { margin-bottom: 4px; } .auth-card form > .form-field + .form-field { margin-top: 16px; } /* ---------- TOPBAR ---------- Normalises the ad hoc inline-styled "Signed in as X · Log out" row that was repeated (slightly differently) on every page. */ .app-topbar-row .topbar-meta { color: var(--text-secondary); font-size: 13.5px; } /* ---------- SECTION BLOCKS & CARD LISTS ---------- A single spacing scale for "a labelled group of content, then the next one" -- replaces one-off inline margin-bottom:24px/32px/36px throughout the templates so vertical rhythm is consistent everywhere. */ .section-block { margin-bottom: 40px; } .section-block:last-child { margin-bottom: 0; } .card-list { display: flex; flex-direction: column; gap: 12px; } /* Wider gap for stacks of substantial content cards (e.g. the report's per-item findings) -- 12px reads fine for compact summary rows, but crowds cards that each hold a heading, several paragraphs and a list. */ .card-list-loose { gap: 24px; } /* A flat list with a divider line between rows instead of each row being its own bordered box -- same visual language as .legal-table's row dividers, for content that's a list of similar items rather than independent cards (e.g. regulatory watch's "Pending review"). */ .divider-list { display: flex; flex-direction: column; } .divider-list .report-row { border: none; border-radius: 0; border-bottom: 1px solid var(--divider); padding: 18px 4px; } .divider-list .report-row:last-child { border-bottom: none; } /* ---------- REPORT ROW (dashboard / regulatory watch / org tree) ---------- */ .report-row { background: var(--white); } .report-row-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; } .report-row-title strong { font-size: 15px; } /* ---------- OUTCOME / RATING BADGES ---------- Small colour-coded pill for a table cell or inline label -- same visual language as .chip (dot + pill) but sized to sit inside a dense table row rather than a summary line. */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; line-height: 1.6; } .badge-pass { background: var(--green-bg); color: var(--green); } .badge-fail { background: #fde8e8; color: var(--red); } .badge-unresolved { background: var(--orange-bg); color: var(--orange); } .badge-neutral { background: var(--slate-bg); color: var(--text-secondary); } /* ---------- DATA TABLES ---------- Give .legal-table a touch more breathing room and a defined container so dense rows never feel like they're pressed against the page edge; wrap in .table-scroll where a table may legitimately be wider than the content column (e.g. the 5-column members table). */ /* padding-bottom added (Version 4 feedback batch, 5 August 2026) -- an earlier attempt here set overflow-y: visible alongside overflow-x: auto, but per the CSS Overflow spec a box can't have one axis 'visible' and the other not: the browser silently forces overflow-y to compute as 'auto' too, so that never actually stopped the clipping (confirmed live -- getComputedStyle still reported overflow-y: auto). .row-menu-panel is absolutely positioned and doesn't contribute to .table-scroll's own (auto) height, so a panel opened from a row near the bottom edge overflows the box and gets clipped by overflow-x's forced auto. Padding the box gives that clip boundary headroom instead -- the panel is small (currently just a single "Revoke" button), so 100px comfortably covers it plus room to grow. Horizontal scroll behaviour is unaffected. */ .table-scroll { overflow-x: auto; margin: 4px 0 28px; padding-bottom: 100px; } .table-scroll .legal-table { margin: 0; } .legal-table th { padding: 10px 16px 10px 0; } .legal-table td { padding: 13px 16px 13px 0; } .legal-table tbody tr:hover { background: var(--gray-100); } /* Table-cell indentation via inline margin-left silently does nothing -- margin doesn't apply to table-internal display boxes. Use padding-left on an inline wrapper instead (see organisation.html). */ .indent-marker { display: inline-block; } /* ---------- ADMIN ACTION GROUPS (organisation page
disclosures) ---------- Was one undifferentiated row of ~11 buttons per tenant node (UI/UX audit, 23 July 2026, finding R9) -- grouped into labelled clusters (Records, Manage, Danger) so related actions read together instead of as a wall of identical outline buttons. */ .admin-actions { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; } .admin-actions-group { display: flex; flex-direction: column; gap: 6px; } .admin-actions-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .admin-actions-group-buttons { display: flex; flex-wrap: wrap; gap: 8px; } /* Version 4 feedback batch, 5 August 2026: light card wrapper + icon per group on the Compliance-record page's Overview tab, so Records/Manage/ Danger read as distinct sections instead of a flat wall of buttons. */ .admin-actions-groups-wrap { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } .admin-actions-group-card { border: 1px solid var(--divider); border-radius: var(--r-md); padding: 14px 16px; background: #fff; } .admin-actions-group-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .admin-actions-group-icon { width: 26px; height: 26px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex: none; background: var(--gray-light); color: var(--text-tertiary); } .admin-actions details { position: relative; } .admin-actions summary { list-style: none; } .admin-actions summary::-webkit-details-marker { display: none; } .admin-actions details form { margin-top: 12px; padding: 20px; background: var(--gray-100); border: 1px solid var(--divider); border-radius: var(--r-md); min-width: 300px; } .admin-actions details[open] summary { border-color: var(--ink); } /* ---------- NOTICE BANNERS (pricing/billing messages) ---------- Three distinct severities so an overdue compliance escalation doesn't read identically to a soft "maybe re-run this" nudge (UI/UX audit, 23 July 2026, finding R6) -- escalation is the one that must never be mistaken for something dismissible/low-stakes. */ .notice-banner { border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 20px; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .notice-warning { background: var(--orange-bg); color: var(--orange); } .notice-nudge { background: var(--green-bg); color: var(--green); } .notice-escalation { background: #fde8e8; color: var(--red); border-left: 3px solid var(--red); font-weight: 600; } /* Dismiss (regulatory notice) / snooze (re-assessment nudge) control -- never present on .notice-escalation, which Fable's J4 says must never be dismissible or snoozed. */ .btn-notice-dismiss { flex-shrink: 0; background: none; border: 1px solid currentColor; border-radius: var(--r-sm); color: inherit; font-size: 13px; padding: 4px 10px; cursor: pointer; opacity: 0.75; } .btn-notice-dismiss:hover { opacity: 1; } /* ---------- REPORT PAGE TABS (23 July 2026) ---------- CSS-only tabs (radio + label, no JS anywhere on the site) -- the report page had grown to 7 scrollable sections (downloads, summary, findings, remediation, benchmark, add-ons, DPO referral), which read as one long, messy page. Each radio's :checked state is matched against its own labelled panel via an explicit sibling rule below (one rule per tab -- there's no CSS wildcard for "match my own panel", so this list must be extended if a tab is ever added/removed). */ .report-tabs { margin-bottom: 32px; } .report-tab-input { display: none; } .report-tab-panel { display: none; } .report-tab-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--divider); margin-bottom: 24px; } .report-tab-nav label { padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s var(--ease), border-color 0.15s var(--ease); } .report-tab-nav label:hover { color: var(--ink); } #report-tab-summary:checked ~ .report-tab-nav label[for="report-tab-summary"], #report-tab-findings:checked ~ .report-tab-nav label[for="report-tab-findings"], #report-tab-remediation:checked ~ .report-tab-nav label[for="report-tab-remediation"], #report-tab-benchmark:checked ~ .report-tab-nav label[for="report-tab-benchmark"], #report-tab-addons:checked ~ .report-tab-nav label[for="report-tab-addons"], #report-tab-dpo:checked ~ .report-tab-nav label[for="report-tab-dpo"] { color: var(--accent); border-bottom-color: var(--accent); } #report-tab-summary:checked ~ #report-panel-summary, #report-tab-findings:checked ~ #report-panel-findings, #report-tab-remediation:checked ~ #report-panel-remediation, #report-tab-benchmark:checked ~ #report-panel-benchmark, #report-tab-addons:checked ~ #report-panel-addons, #report-tab-dpo:checked ~ #report-panel-dpo { display: block; } /* Findings tab has its own nested track sub-nav (ADM / Equality / PSED), same CSS-only pattern, scoped with its own name= group. */ .track-tab-input { display: none; } .track-tab-panel { display: none; } /* Underline style, same language as .report-tab-nav above it -- was a row of filled accent-green pills that read as buttons, not tabs (Fable review, 24 July 2026: "one tab language per page"). */ .track-tab-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--divider); } .track-tab-nav label { padding: 7px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s var(--ease), border-color 0.15s var(--ease); } .track-tab-nav label:hover { color: var(--ink); } #track-tab-adm:checked ~ .track-tab-nav label[for="track-tab-adm"], #track-tab-equality:checked ~ .track-tab-nav label[for="track-tab-equality"], #track-tab-psed:checked ~ .track-tab-nav label[for="track-tab-psed"] { color: var(--accent); border-bottom-color: var(--accent); } #track-tab-adm:checked ~ #track-panel-adm, #track-tab-equality:checked ~ #track-panel-equality, #track-tab-psed:checked ~ #track-panel-psed { display: block; } /* Per-tenant detail page tabs (Fable's J3, 23 July 2026 nav rework) -- same CSS-only .report-tab-* structural classes reused (they're generic, not report-specific), new ids so this doesn't collide with report.html's own radio group. */ #org-tab-overview:checked ~ .report-tab-nav label[for="org-tab-overview"], #org-tab-compliance:checked ~ .report-tab-nav label[for="org-tab-compliance"], #org-tab-activity:checked ~ .report-tab-nav label[for="org-tab-activity"], #org-tab-members:checked ~ .report-tab-nav label[for="org-tab-members"] { color: var(--accent); border-bottom-color: var(--accent); } #org-tab-overview:checked ~ #org-panel-overview, #org-tab-compliance:checked ~ #org-panel-compliance, #org-tab-activity:checked ~ #org-panel-activity, #org-tab-members:checked ~ #org-panel-members { display: block; } /* ---------- CARD TIERS (UI/UX audit, 23 July 2026) ---------- .card alone gives every block -- the actual compliance verdict, a remediation checklist, and a £99 upsell -- identical visual weight, which is the single biggest cause of the report page reading as an undifferentiated stack. Two lighter-weight variants for content that is genuinely secondary to the core result: .card-secondary for supporting tools (benchmark, remediation tracker) and .card-commercial for anything whose primary purpose is to sell something. Plain .card stays reserved for the core deliverable (executive summary, findings). */ .card-secondary { background: var(--gray-100); box-shadow: none; border: 1px solid var(--divider); } .card-commercial { background: var(--white); border: 1px dashed var(--divider); box-shadow: none; } .card-commercial h2 { font-size: 16.5px; } /* A flat, compact row inside a merged commercial section (e.g. the document add-ons pack) -- title + one-line blurb + price button, instead of each item being its own full hero card (audit finding R2). */ .commercial-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--divider); } .commercial-row:last-child { border-bottom: none; padding-bottom: 0; } .commercial-row:first-child { padding-top: 0; } .commercial-row-title { font-weight: 600; font-size: 14.5px; } .commercial-row-desc { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; } /* Replaces the repeated inline `style="display:flex; gap:8px; ..."` button clusters across dashboard/report/organisation templates (audit finding R12) with one utility class. */ .action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Compliance-trend chip connector (dashboard.html). */ .trend-arrow { display: inline-flex; align-items: center; color: var(--text-tertiary); } /* Custom hover tooltip for trend chips (Zubin, 24 July 2026: the native title-attribute tooltip this used to rely on is easy to miss -- delayed, small, browser-styled, and reported as "nothing happens on hover"). :hover-triggered opacity is instant and unmissable; the title attribute is deliberately NOT kept as a fallback since a browser that ignores the CSS still gets the native tooltip for free from any title attribute we left in place -- there isn't one here, so this is the only mechanism. */ .chip-trend { position: relative; cursor: default; } /* .card .chip carries margin-bottom:18px (styles.css) for chips used as a standalone status line inside a card. Since align-items:center on a flex row centers each item's MARGIN box, that bottom-only margin dragged the chip's actual pill upward relative to the dot/arrow siblings (which have no such margin) -- the row still centered correctly, but the chip's visible content didn't. Needs .card .chip-trend specificity (0,0,2,0) to beat .card .chip's (0,0,2,0) via source order (this file loads after styles.css) -- plain .chip-trend alone is too low-specificity to win. */ .card .chip-trend { margin-bottom: 0; } /* Older trend points are a bare coloured dot, not a full pill -- only the latest (most recent) point keeps the labelled .chip treatment, per the Fable review: "a row of small coloured dots with the latest tier as the only labelled chip." Same tooltip mechanism as .chip-trend above. The visible circle is a real child (same pattern as .chip .dot in styles.css), NOT a ::after pseudo-element -- .trend-dot also carries .chip-trend for the hover tooltip, and .chip-trend::after is the tooltip bubble itself. A ::after can only mean one thing per element, so a dot-as-::after silently lost to the tooltip rule (later in the cascade) and rendered invisible. Real child element sidesteps the collision entirely. */ .trend-dot { display: inline-flex; align-items: center; justify-content: center; width: 9px; } .trend-dot .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .trend-dot-verified .dot { background: var(--green); } .trend-dot-renewal .dot { background: var(--orange); } .trend-dot-overdue .dot { background: var(--red); } .trend-dot-unchecked .dot { background: var(--text-tertiary); } /* Below the chip, not above -- these sit right under a card heading with little headroom, and the tooltip visibly collided with it when placed above (found by screenshot-testing this, since the automated browser used to verify UI changes can't dispatch a real :hover event, only confirm the rule text and force-render it for a visual check). */ .chip-trend::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); background: var(--text-primary, #1f2937); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; padding: 5px 10px; border-radius: 6px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s ease; z-index: 20; } .chip-trend::before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--text-primary, #1f2937); margin-top: 1px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s ease; z-index: 20; } .chip-trend:hover::after, .chip-trend:hover::before { opacity: 1; visibility: visible; } /* ---------- STAFF TRAINING MODULE (TODO.md, 23 July 2026) ---------- */ .module-list { display: flex; flex-direction: column; gap: 10px; } .module-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border: 1.5px solid var(--divider); border-radius: var(--r-md); text-decoration: none; color: var(--ink); transition: border-color 0.2s var(--ease), background 0.2s var(--ease); } .module-row:hover { border-color: var(--accent); background: var(--gray-100); } .module-row-title { display: flex; align-items: center; gap: 12px; } .module-row-number { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gray-light); color: var(--text-secondary); font-size: 12.5px; font-weight: 700; flex: none; } .module-row.is-passed .module-row-number { background: var(--green-bg); color: var(--green); } .module-row.is-attempted .module-row-number { background: var(--orange-bg); color: var(--orange); } .module-row-meta { font-size: 13px; color: var(--text-tertiary); } /* Subtle lock state for modules outside the current plan (Version 3 feedback) -- muted, not a heavy "blocked" treatment, matching the existing .is-locked/.plan-features li.locked visual language. */ .module-row.is-locked { color: var(--text-tertiary); cursor: default; } .module-row.is-locked .module-row-number { background: var(--gray-light); color: var(--text-tertiary); } .module-row-lock { flex: none; color: var(--text-tertiary); } /* ---------- TRAINING HERO (design mockups, 3 Aug 2026, turn 6) ---------- Green gradient (distinct from the dashboard's navy/regulation tracker's navy) plus a segmented bar -- one block per module, not a continuous fill, so progress reads as "N of Y modules" at a glance. */ .training-hero { background: linear-gradient(135deg, #1f4d33, #163826); border-radius: var(--r-lg); padding: 30px; margin-bottom: 28px; display: flex; align-items: center; gap: 34px; color: #fff; } .training-hero-segments { display: flex; gap: 5px; margin-bottom: 10px; } .training-hero-segment { width: 11px; height: 26px; border-radius: 4px; background: rgba(255,255,255,.16); } .training-hero-segment.is-passed { background: #5fd67d; } .training-hero-segment.is-attempted { background: #f0a742; } .training-hero-count { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.01em; text-align: center; display: block; } .training-hero-kicker { font-size: 11.5px; font-weight: 600; color: #a8e6bc; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; } .training-hero h1 { color: #fff; font-size: 22px; margin-bottom: 10px; max-width: 640px; } .training-hero-chip { font-size: 12px; font-weight: 700; color: #163826; background: #a8e6bc; padding: 4px 11px; border-radius: var(--r-pill); letter-spacing: .01em; } .training-hero-meta { font-size: 12.5px; color: rgba(255,255,255,.6); margin-left: 10px; } .training-hero .btn-outline { border-color: rgba(255,255,255,.3); background: transparent; color: #fff; flex: none; } .training-hero .btn-outline:hover { border-color: #fff; } /* ---------- TRAINING SECTOR PICKER (Version 7 feedback batch, 7 August 2026, mockup 21a) ---------- The /training index page (choosing which sector to train for) reuses the dashboard rebuild's full-bleed hero shell (.dash-fullbleed-hero et al) but with its own dark-green background and its own aggregate segmented progress pill -- distinct from .training-hero above, which is a contained rounded-card hero on course_home.html and must stay untouched. */ .dash-hero-training-picker { background: linear-gradient(120deg,#1f4d33 0%,#163826 60%,#0f2a1a 130%); } .training-picker-progress { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; } .training-picker-progress-segments { display: flex; gap: 5px; } .training-picker-progress-segment { width: 11px; height: 26px; border-radius: 4px; background: rgba(255,255,255,.16); } .training-picker-progress-segment.is-filled { background: #5fd67d; } .training-picker-progress-count { font-size: 14px; font-weight: 700; color: #fff; } .training-picker-card { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,.07); padding: 20px 22px; box-shadow: 0 3px 12px rgba(0,0,0,.05); } .training-picker-card-started { border-left: 5px solid #2e9649; } .training-picker-card-icon { width: 48px; height: 48px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; } .training-picker-badge-admin { font-size: 10.5px; font-weight: 700; color: #1f4d33; background: #d3ecda; padding: 4px 10px; border-radius: var(--r-pill); } .btn-training-pill { background: #1f4d33; color: #fff; border: none; border-radius: var(--r-pill); padding: 10px 18px; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .btn-training-pill:hover { background: #163826; } .practice-box { background: var(--gray-100); border: 1px solid var(--divider); border-radius: var(--r-md); padding: 16px 20px; font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 24px; } .practice-box .kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: 8px; display: block; } .red-flag-box { border: 1px dashed var(--red); border-radius: var(--r-md); padding: 16px 20px; background: #fde8e8; margin: 0 0 24px; } .red-flag-box .kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--red); margin-bottom: 8px; display: block; } .red-flag-box ul { margin: 0; padding-left: 18px; } .red-flag-box li { font-size: 14px; color: var(--ink); margin-bottom: 6px; line-height: 1.5; } .red-flag-box li:last-child { margin-bottom: 0; } .industry-example-box { border: 1px solid var(--divider); border-radius: var(--r-md); padding: 14px 18px; margin: 0 0 12px; font-size: 14px; color: var(--text-secondary); line-height: 1.55; } .industry-example-box .kicker { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); margin-bottom: 6px; display: block; } .quiz-question { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--divider); } .quiz-question:last-child { border-bottom: none; } .quiz-question-stem { font-size: 16px; font-weight: 600; margin-bottom: 14px; color: var(--ink); } .quiz-explanation { font-size: 13.5px; color: var(--text-secondary); margin-top: 10px; padding: 10px 14px; background: var(--gray-100); border-radius: var(--r-sm); } .option-row.is-correct { border-color: var(--green); background: var(--green-bg); } .option-row.is-wrong { border-color: var(--red); background: #fde8e8; } .score-hero { text-align: center; padding: 32px 0 8px; } .score-hero .score-number { font-size: 3.4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .score-hero.is-pass .score-number { color: var(--green); } .score-hero.is-fail .score-number { color: var(--red); } .score-hero .score-caption { font-size: 14px; color: var(--text-tertiary); margin-top: 8px; } .certificate-card { border: 1.5px solid var(--divider); border-radius: var(--r-lg); padding: 44px 40px; text-align: center; background: var(--white); box-shadow: var(--shadow-md); } .certificate-card .cert-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; } .certificate-card h1 { font-size: 24px; margin-bottom: 20px; } .certificate-card .cert-name { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 4px; } .certificate-card .cert-meta { font-size: 13px; color: var(--text-tertiary); margin-bottom: 24px; } .certificate-card .cert-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.65; max-width: 560px; margin: 0 auto 24px; } .certificate-card .cert-number { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--text-tertiary); } /* ========================================================================== UI/UX CLEANUP PASS (Fable design review, 24 July 2026) -- Zubin's own words: "boxes, pillboxes etc everywhere creating clutter." Root cause per the review: three near-duplicate pill systems (.btn/.chip/.badge) and ~16 boxed-container variants, all equal weight, repeated dozens of times per screen (the remediation tab alone rendered 28 identical pill buttons). This section gives the app its own quieter action/status language on top of the marketing design system above, without touching the marketing site's own look. ========================================================================== */ /* ---------- ACTION HIERARCHY ---------- Four tiers, not one: .btn-primary (filled, pill-free rectangle -- at most ONE per screen) for the single primary action; .btn-quiet (plain text, no border/fill) for everything that used to be an equal-weight outline pill (View, Download, Assign, Mark addressed, Continue-in-a-list-row); plain text links for back-navigation; and .row-menu (below) for destructive actions. Buttons keep their pill radius on the marketing site; inside the app they drop to a soft rectangle so shape itself means something again -- pill = status (chip/tier), rectangle = action. */ .app-main .btn { border-radius: 8px; } .app-main .chip, .app-main .badge { border-radius: var(--r-pill); } .btn-quiet { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 6px 2px; color: var(--accent); font-family: var(--font); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; border-radius: 6px; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .btn-quiet:hover { background: var(--gray-light); text-decoration: none; } .btn-quiet-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .btn-quiet-group > .btn-quiet:not(:last-child)::after { content: "\00b7"; margin-left: 4px; color: var(--divider); font-weight: 400; } /* No hover-lift/shadow on cards inside the app -- that's a marketing-tile interaction (styles.css:407/525), and an Executive Summary or a pricing plan card lifting on mouseover like a promo tile reads as decoration, not information, inside a working tool. */ .app-main .card, .app-main .plan { transform: none !important; box-shadow: var(--shadow-sm) !important; } .app-main .card:hover, .app-main .plan:hover { transform: none !important; box-shadow: var(--shadow-sm) !important; } /* ---------- STATUS: DOT + TEXT (no fill) ---------- A filled pill earns its weight for the one rating that's actually the verdict (HIGH/MEDIUM/LOW tier chips stay as-is). Everything else that used to be a same-weight pill -- a pass/fail outcome repeated down a table column, a remediation row's state, a monitored-source's "OK" -- is calmer as a coloured dot plus plain text at 12+ repetitions per screen. */ .status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; } .status .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .status-pass { color: var(--green); } .status-pass .dot { background: var(--green); } .status-fail { color: var(--red); } .status-fail .dot { background: var(--red); } .status-unresolved { color: var(--orange); } .status-unresolved .dot { background: var(--orange); } .status-neutral { color: var(--text-secondary); } .status-neutral .dot { background: var(--text-tertiary); } /* ---------- ROW OVERFLOW MENU (destructive actions) ---------- Reuses the same CSS-only
/ disclosure already proven on organisation.html's "Add child" -- a kebab summary that reveals a small menu of (usually destructive) actions, rather than permanently rendering 2-3 red pill buttons on every row. */ .row-menu { position: relative; display: inline-block; } .row-menu > summary { list-style: none; cursor: pointer; user-select: none; } .row-menu > summary::-webkit-details-marker { display: none; } .row-menu[open] > summary { background: var(--gray-light); color: var(--ink); } /* The bare "more actions" kebab (⋮, no text label) needs its own fixed icon-button box -- a text-labelled summary (e.g. "Add child") must NOT get this sizing, or the label squeezes into a 30px square and wraps across several lines (found by screenshot-testing this). */ .row-menu > summary:not(.btn-quiet) { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: var(--text-secondary); font-size: 18px; line-height: 1; } .row-menu > summary:not(.btn-quiet):hover { background: var(--gray-light); color: var(--ink); } .row-menu-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; background: var(--white); border: 1px solid var(--divider); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 6px; min-width: 190px; display: flex; flex-direction: column; gap: 2px; } .row-menu-panel form { display: block; } .row-menu-panel .btn-quiet { display: flex; width: 100%; padding: 8px 10px; border-radius: 6px; color: var(--ink); } .row-menu-panel .btn-quiet:hover { background: var(--gray-light); } .row-menu-panel .btn-quiet.is-danger { color: var(--red); } /* ---------- CHECKBOX-STYLE TOGGLE (remediation tracker) ---------- Was a "Mark addressed"/"Mark not addressed" pill button competing for attention with "Assign" right next to it -- a real checkbox affordance at the row's left is the universally understood gesture the tracker's own intro copy already promises ("Tick off each area..."), and there's no separate label pill needed once it's the row's own leading control. Still a plain form