/* CompliantVendor — base styles */ :root { --navy:#0f2a43; --navy-2:#163a5f; --blue:#1d6fb8; --blue-d:#155a96; --bg:#f4f6f9; --card:#ffffff; --card-sub:#fafcff; --ink:#1f2933; --muted:#65728a; --line:#e0e6ef; --heading:#0f2a43; --input-bg:#ffffff; --input-border:#c7d0de; --th-bg:#f7f9fc; --row-hover:#fbfcfe; --green:#1f9d57; --amber:#c98a00; --red:#c0392b; --critical:#7b241c; --low:#1f9d57; --moderate:#c98a00; --high:#d35400; --crit:#c0392b; } /* Dark theme — applied via . The top bar / nav keep their dark navy in both themes; only content surfaces invert. */ html[data-theme="dark"] { --bg:#0f1620; --card:#162130; --card-sub:#1b2735; --ink:#e6edf3; --muted:#9aabbd; --line:#27323f; --heading:#e9f0f7; --input-bg:#0f1a26; --input-border:#33424f; --th-bg:#1b2735; --row-hover:#1b2735; --blue:#4a9fe0; --blue-d:#3b86c4; } html[data-theme="dark"] .badge { background:#22303f; color:#cdd9e5; border-color:#33424f; } html[data-theme="dark"] code { background:#0f1a26; color:#cdd9e5; padding:.1rem .3rem; border-radius:4px; } html[data-theme="dark"] .qr-box { background:#fff; } /* keep QR scannable */ html[data-theme="dark"] .barchart .bar i[style*="--muted"] { opacity:.85; } * { box-sizing:border-box; } body { margin:0; font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink); font-size:15px; line-height:1.5; } a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; } h1,h2,h3 { color:var(--heading); margin:0 0 .5em; } h1 { font-size:1.6rem; } h2 { font-size:1.25rem; } h3 { font-size:1.05rem; } /* Top bar */ .topbar { display:flex; justify-content:space-between; align-items:center; background:var(--navy); color:#fff; padding:.6rem 1.25rem; } .brand { display:flex; align-items:center; gap:.75rem; } .brand-link { display:flex; align-items:center; gap:.5rem; color:#fff; } .brand-link:hover { text-decoration:none; } .brand-logo { height:42px; width:auto; max-width:100%; display:block; } @media (max-width:700px){ .brand-logo{ height:32px; } } @media (max-width:420px){ .brand-logo{ height:26px; } } .hero-logo { width:100%; max-width:440px; height:auto; display:block; margin:.25rem 0 1rem; } /* Full hero banner (brand + tagline baked in, dark background) — works in both themes. */ .hero-image { width:100%; max-width:760px; height:auto; display:block; border-radius:10px; margin:.25rem 0 1rem; } /* Light theme shows the navy logo; dark theme shows the white logo (so it never blends in). */ .hero-logo-dark { display:none; } html[data-theme="dark"] .hero-logo-light { display:none; } html[data-theme="dark"] .hero-logo-dark { display:block; } /* Inline wordmark (tagline cropped) used in place of "CompliantVendor" in a heading. */ .logo-inline { height:1.3em; width:auto; vertical-align:-0.12em; } h1 .logo-inline { height:1.45em; vertical-align:-0.14em; } html[data-theme="dark"] .logo-inline-light { display:none; } .logo-inline-dark { display:none; } html[data-theme="dark"] .logo-inline-dark { display:inline; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .brand-tagline { color:#aebfd3; font-size:.8rem; border-left:1px solid #2c4a68; padding-left:.75rem; } @media (max-width:700px){ .brand-tagline{ display:none; } } .topbar-user { display:flex; align-items:center; gap:.75rem; font-size:.9rem; } .user-name { color:#dce6f2; } .topbar-link { color:#cdd9e5; font-size:.9rem; } .topbar-link:hover { color:#fff; text-decoration:underline; } @media (max-width:640px) { .topbar-link { display:none; } } /* Marketing / educational pages */ .lead { font-size:1.15rem; color:var(--muted); margin:.25rem 0 1rem; } .section-head { margin:2rem 0 .75rem; color:var(--heading); } .checklist { list-style:none; padding:0; margin:.25rem 0; } .checklist li { padding:.2rem 0 .2rem 1.5rem; position:relative; } .checklist li::before { content:"\2713"; position:absolute; left:0; color:#2e9e5b; font-weight:700; } .crosslist { list-style:none; padding:0; margin:.25rem 0; } .crosslist li { padding:.2rem 0 .2rem 1.5rem; position:relative; color:var(--muted); } .crosslist li::before { content:"\2715"; position:absolute; left:0; color:var(--crit); font-weight:700; } .cta-band { text-align:center; padding:2rem 1rem; } details.card > summary { cursor:pointer; color:var(--heading); font-size:1.02rem; } details.card > summary:hover { color:var(--blue); } details.card[open] > summary { margin-bottom:.5rem; } /* Impersonation / support-session banner */ .impersonation-bar { background:#7b241c; color:#fff; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.5rem 1.25rem; font-size:.9rem; flex-wrap:wrap; } .impersonation-bar .btn { background:#fff; color:#7b241c; } .impersonation-bar .btn:hover { background:#f1d6d2; } /* Nav */ .mainnav { background:var(--navy-2); display:flex; flex-wrap:wrap; padding:0 1rem; } .mainnav a { color:#cdddee; padding:.7rem 1rem; font-size:.92rem; } .mainnav a:hover { background:rgba(255,255,255,.08); text-decoration:none; } .mainnav a.active { color:#fff; box-shadow:inset 0 -3px 0 var(--blue); } /* Layout */ .container { max-width:1180px; margin:1.5rem auto; padding:0 1.25rem; } .container.container-wide { max-width:1480px; } .card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.25rem 1.5rem; margin-bottom:1.25rem; box-shadow:0 1px 2px rgba(16,42,67,.04); } .grid { display:grid; gap:1rem; } .grid-2 { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); } @media (max-width:820px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } } .row { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; } .spread { display:flex; justify-content:space-between; align-items:center; gap:1rem; } .muted { color:var(--muted); } .small { font-size:.85rem; } .mt { margin-top:1rem; } .mb { margin-bottom:1rem; } /* Stat cards */ .stat { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem 1.1rem; } .stat .num { font-size:2rem; font-weight:700; color:var(--heading); } .stat .lbl { color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.4px; } /* Tables */ table { width:100%; border-collapse:collapse; background:var(--card); } th,td { text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; } th { background:var(--th-bg); color:var(--heading); font-size:.8rem; text-transform:uppercase; letter-spacing:.4px; } tr:hover td { background:var(--row-hover); } .table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; } /* Badges */ .badge { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600; background:#eef2f8; color:var(--heading); border:1px solid var(--line); } .tier-low{ background:#e6f6ed; color:var(--low); border-color:#bfe6cd; } .tier-moderate{ background:#fdf3df; color:var(--moderate); border-color:#f0debf; } .tier-high{ background:#fdeadd; color:var(--high); border-color:#f4cdb0; } .tier-critical{ background:#fbe3df; color:var(--crit); border-color:#efbcb3; } .status-approved{ background:#e6f6ed; color:var(--green); } .status-rejected,.status-suspended{ background:#fbe3df; color:var(--red); } .status-security-review,.status-questionnaire-pending,.status-evidence-pending{ background:#fdf3df; color:var(--amber); } /* Forms */ label { display:block; font-weight:600; color:var(--heading); margin:.6rem 0 .25rem; font-size:.9rem; } input[type=text],input[type=email],input[type=tel],input[type=password],input[type=url], input[type=number],input[type=date],select,textarea { width:100%; padding:.55rem .65rem; border:1px solid var(--input-border); border-radius:7px; font:inherit; background:var(--input-bg); color:var(--ink); } input:focus,select:focus,textarea:focus { outline:2px solid var(--blue); border-color:var(--blue); } textarea { min-height:80px; resize:vertical; } /* Date fields: keep the native picker but make the affordance obvious in both themes. */ input[type=date] { cursor:pointer; } input[type=date]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.75; } input[type=date]::-webkit-calendar-picker-indicator:hover { opacity:1; } /* The calendar icon is dark by default — invert it in dark mode so it's visible. */ html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator { filter:invert(1); } .field-error { color:var(--red); font-size:.82rem; margin-top:.2rem; } /* Remediation: each item spans a main row + its activity-log row. Group them so the start of every item is unmistakable and its two rows read as one block. */ tr.rem-item-row > td { border-top:3px solid var(--blue); border-bottom:none; padding-top:.85rem; } tr.rem-item-row > td:first-child { box-shadow:inset 4px 0 0 var(--blue); } /* accent down the left edge */ .rem-log-row > td { background:var(--row-hover); border-bottom:none; padding-top:.3rem; padding-bottom:.85rem; } .rem-log-row > td:first-child { box-shadow:inset 4px 0 0 var(--blue); } .rem-log { list-style:none; margin:0; padding:0; } .rem-log li { padding:.45rem 0; border-bottom:1px solid var(--input-border); } .rem-log li:last-child { border-bottom:0; } .inline-check { display:flex; align-items:center; gap:.5rem; font-weight:500; } .inline-check input { width:auto; } fieldset { border:1px solid var(--line); border-radius:8px; padding:1rem; margin:0 0 1rem; } legend { font-weight:700; color:var(--heading); padding:0 .4rem; } /* Buttons */ .btn { display:inline-block; background:var(--blue); color:#fff; border:none; border-radius:7px; padding:.55rem 1rem; font:inherit; font-weight:600; cursor:pointer; } .btn:hover { background:var(--blue-d); text-decoration:none; } .btn-sm { padding:.3rem .7rem; font-size:.85rem; } .btn-ghost { background:transparent; color:var(--blue); border:1px solid var(--blue); } .btn-danger { background:var(--red); } .btn-muted { background:#5a6b82; } .btn[disabled]{ opacity:.5; cursor:not-allowed; } /* Flash */ /* Full-width sticky page banner (e.g. CUI/FCI warning) that tucks under the header and stays pinned to the top while scrolling. Sits outside .container so it spans the full viewport width. */ .sticky-banner { position:sticky; top:0; z-index:60; width:100%; background:var(--red); color:#fff; padding:.55rem 1.25rem; text-align:center; font-size:.9rem; line-height:1.35; box-shadow:0 2px 6px rgba(0,0,0,.18); } .sticky-banner strong { color:#fff; } .sticky-banner a { color:#fff; text-decoration:underline; } .flash { padding:.7rem 1rem; border-radius:8px; margin-bottom:1rem; border:1px solid; } .flash-success{ background:#e6f6ed; border-color:#bfe6cd; color:var(--green); } .flash-error{ background:#fbe3df; border-color:#efbcb3; color:var(--red); } .flash-warning{ background:#fdf3df; border-color:#f0debf; color:var(--amber); } .flash-info{ background:#e7f0fa; border-color:#c5dbf0; color:var(--blue-d); } /* Portal quick actions — prominent buttons at the top that expand to a form/details. */ .portal-actions { display:flex; gap:.75rem; flex-wrap:wrap; align-items:flex-start; } .portal-action { flex:1 1 300px; min-width:0; } .portal-action > summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1.1rem; border-radius:9px; font-weight:600; color:#fff; background:var(--blue); box-shadow:0 1px 3px rgba(15,42,67,.18); } .portal-action > summary::-webkit-details-marker { display:none; } .portal-action > summary::after { content:'▾'; font-size:.8em; opacity:.85; } .portal-action[open] > summary { border-radius:9px 9px 0 0; } .portal-action[open] > summary::after { content:'▴'; } .portal-action--share > summary { background:var(--green); } .portal-action-body { border:1px solid var(--line); border-top:none; border-radius:0 0 9px 9px; padding:.9rem 1.05rem; background:var(--card-sub); } .portal-action-body label { display:block; margin-top:.5rem; } .portal-action-body label:first-child { margin-top:0; } @media (max-width:640px) { .portal-action { flex:1 1 100%; } } /* Sub-card (slightly different surface, theme-aware) */ .card-sub { background:var(--card-sub) !important; } /* Theme toggle button in the top bar */ .theme-toggle { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:7px; padding:.35rem .6rem; font:inherit; font-size:.85rem; cursor:pointer; line-height:1; } .theme-toggle:hover { background:rgba(255,255,255,.2); } /* Auth screens */ .auth-wrap { max-width:420px; margin:3rem auto; } .auth-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:2rem; } .auth-wrap.wide { max-width:560px; } /* Signup with plan cards needs more room so the plans fit on one row. */ .auth-wrap.plans { max-width:980px; } /* Progress bar */ .progress { background:var(--line); border-radius:999px; height:12px; overflow:hidden; } .progress > span { display:block; height:100%; background:var(--blue); } /* Bar chart (CSS only) */ .barchart { display:flex; align-items:flex-end; gap:1rem; height:160px; padding-top:1rem; } .barchart .bar { flex:1; display:flex; flex-direction:column; justify-content:flex-end; text-align:center; } .barchart .bar i { display:block; border-radius:6px 6px 0 0; min-height:3px; } .barchart .bar small { margin-top:.4rem; color:var(--muted); } .barchart .bar b { color:var(--heading); } /* QR / MFA */ .qr-box { display:inline-block; padding:12px; background:#fff; border:1px solid var(--line); border-radius:10px; margin:.5rem 0 1rem; } .qr-box svg { display:block; max-width:100%; height:auto; } .mfa-secret { font-family:monospace; background:var(--th-bg); padding:.5rem .75rem; border-radius:6px; letter-spacing:2px; display:inline-block; } .recovery-codes { columns:2; font-family:monospace; background:var(--th-bg); padding:1rem; border-radius:8px; } hr { border:none; border-top:1px solid var(--line); margin:1.25rem 0; } /* Hierarchy tree */ .tree, .tree ul { list-style:none; margin:0; padding-left:1.1rem; } .tree > li { padding:.2rem 0; } .tree ul { border-left:2px solid var(--line); margin-left:.3rem; padding-left:1rem; } .tree li { padding:.25rem 0; } /* Footer */ .footer { text-align:center; color:var(--muted); padding:2rem 1rem; font-size:.85rem; } .footer-note { font-size:.78rem; max-width:680px; margin:.4rem auto 0; } /* Subscription plan picker (signup) */ .plan-picker { margin:0 0 1.25rem; } .cycle-toggle { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; margin-bottom:1rem; } .cycle-toggle input { position:absolute; opacity:0; pointer-events:none; } .cycle-toggle label { padding:.4rem 1.2rem; cursor:pointer; font-size:.9rem; color:var(--muted); user-select:none; } .cycle-toggle input:checked + label { background:var(--blue); color:#fff; } /* All plans on a single row, equal widths, however many there are. */ .plan-cards { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:.75rem; } /* Stack the cards on small screens so they stay readable. */ @media (max-width:720px) { .plan-cards { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr; } .auth-wrap.plans { max-width:560px; } } .plan-card { display:flex; flex-direction:column; gap:.4rem; border:1px solid var(--line); border-radius:10px; padding:1rem 1rem 1.1rem; cursor:pointer; background:var(--card-sub); position:relative; } .plan-card input { position:absolute; top:.65rem; right:.65rem; } .plan-card:has(input:checked) { border-color:var(--blue); box-shadow:0 0 0 2px var(--blue) inset; } .plan-name { font-weight:700; font-size:1.05rem; color:var(--heading); } .plan-price strong { font-size:1.4rem; color:var(--heading); } .plan-price small { color:var(--muted); } .plan-trial { display:block; } .plan-features { list-style:none; padding:0; margin:.3rem 0 0; font-size:.85rem; } .plan-features li { padding:.15rem 0 .15rem 1.15rem; position:relative; } .plan-features li::before { content:"\2713"; color:#2e9e5b; position:absolute; left:0; font-weight:700; } /* Compliance standards a plan lets the organization assess vendors against. margin-top:auto pins them to the card foot so badges line up across tiers. */ .plan-frameworks { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:auto; padding-top:.7rem; border-top:1px solid var(--line); } .plan-frameworks-title { flex-basis:100%; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } /* Monthly/annual price + trial swap, driven by the cycle radio (data-cycle set by app.js). */ .price-annual, .trial-annual { display:none; } .plan-picker[data-cycle="annual"] .price-monthly, .plan-picker[data-cycle="annual"] .trial-monthly { display:none; } .plan-picker[data-cycle="annual"] .price-annual, .plan-picker[data-cycle="annual"] .trial-annual { display:inline; } /* Questionnaire section navigator — left-hand section list + one panel shown at a time in the main area (replaces the long accordion). Section switching and live badge counts are handled in app.js. */ .q-layout { display:grid; grid-template-columns:248px 1fr; gap:1.25rem; align-items:start; } .q-nav { position:sticky; top:3rem; display:flex; flex-direction:column; gap:.2rem; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.5rem; max-height:calc(100vh - 4rem); overflow:auto; } .q-nav-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:.25rem .6rem .4rem; } .q-nav-link { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .6rem; border-radius:7px; color:var(--ink); font-size:.9rem; line-height:1.25; cursor:pointer; border:none; background:transparent; text-align:left; width:100%; } .q-nav-link:hover { background:var(--row-hover); text-decoration:none; } .q-nav-link.is-active { background:var(--blue); color:#fff; } .q-nav-link.is-active .badge { background:rgba(255,255,255,.22); color:#fff; border-color:transparent; } .q-nav-name { flex:1; } /* Section covered by a framework the organization's plan doesn't include. */ .q-nav-link.is-locked { opacity:.55; } .q-nav-link.is-locked.is-active { opacity:1; background:var(--muted); } .q-panel { display:none; } .q-panel.is-active { display:block; } .q-panel.is-locked .q-panel-head h2 { color:var(--muted); } .q-locked { text-align:center; padding:1.6rem 1.1rem; border:1px dashed var(--line); border-radius:9px; background:var(--card-sub); } .q-locked p { margin:0 0 .6rem; } .q-panel-head { display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin:0 0 1rem; padding-bottom:.7rem; border-bottom:2px solid var(--line); } .q-panel-head h2 { margin:0; font-size:1.15rem; color:var(--heading); } .q-panel-foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line); } .q-item { background:var(--card-sub); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:9px; padding:.95rem 1.05rem; margin:0 0 .9rem; } .q-item:last-child { margin-bottom:0; } .q-item .q-text { font-weight:600; color:var(--heading); display:block; } .q-item .q-help { color:var(--muted); font-size:.85rem; margin-top:.25rem; } .q-item label.small { display:block; margin-top:.55rem; color:var(--muted); } .q-item textarea { margin-top:.25rem; } .q-item-main { min-width:0; } /* The per-org sharing list sits in a right-hand column on wide screens so a vendor supporting many organizations doesn't get a long vertical form. */ .q-item-aside { margin-top:.7rem; background:rgba(37,99,235,.06); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:8px; padding:.6rem .75rem; min-width:0; } .q-aside-title { font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600; margin-bottom:.4rem; } .q-share-list { display:flex; flex-direction:column; gap:.25rem; margin:0 0 .4rem; max-height:220px; overflow:auto; } .q-share-list .inline-check { margin:0; } @media (min-width:1080px) { .q-item.has-aside { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.1rem; align-items:start; } .q-item.has-aside .q-item-aside { margin-top:0; } } /* ---- Per-question accordion (vendor questionnaire) ---- */ .q-acc { border:1px solid var(--line); border-left:3px solid var(--line); border-radius:9px; margin:0 0 .6rem; background:var(--card-sub); overflow:hidden; } .q-acc:last-child { margin-bottom:0; } .q-acc.is-open { border-left-color:var(--blue); box-shadow:0 1px 6px rgba(15,42,67,.06); } .q-acc[data-qstatus="complete"] { border-left-color:var(--green); } .q-acc[data-qstatus="review"] { border-left-color:var(--amber); } .q-acc-head { display:flex; align-items:center; justify-content:space-between; gap:.85rem; width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:.85rem 1rem; font:inherit; color:var(--heading); } .q-acc-head:hover { background:var(--row-hover); } .q-acc-q { font-weight:600; flex:1; } .q-acc.is-open .q-acc-head { border-bottom:1px solid var(--line); } /* Status pill */ .q-status { flex:none; font-size:.72rem; font-weight:600; padding:.18rem .6rem; border-radius:999px; border:1px solid var(--line); white-space:nowrap; } .q-status-not_started { background:transparent; color:var(--muted); } .q-status-incomplete { background:#fdf3e0; color:var(--amber); border-color:#f0dcb0; } .q-status-complete { background:#e6f6ed; color:var(--low); border-color:#bfe6cd; } .q-status-review { background:#eef2fb; color:var(--blue-d); border-color:#cdd9ef; } html[data-theme="dark"] .q-status-incomplete { background:#3a2f1c; border-color:#5a4a2a; } html[data-theme="dark"] .q-status-complete { background:#16321f; border-color:#27502f; } html[data-theme="dark"] .q-status-review { background:#1c2740; border-color:#33446a; } .q-acc-body { padding:.95rem 1rem 1rem; } .q-acc-grid { display:grid; grid-template-columns:1fr; gap:1.1rem; align-items:start; } .q-acc-main { min-width:0; } .q-acc-main label.small { display:block; margin-top:.55rem; color:var(--muted); } .q-acc-main .q-help { color:var(--muted); font-size:.85rem; margin-bottom:.5rem; } .q-acc-aside { background:rgba(37,99,235,.06); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:8px; padding:.6rem .75rem; min-width:0; } /* Evidence list */ .q-ev { margin-top:.9rem; border-top:1px dashed var(--line); padding-top:.7rem; } .q-ev-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; } .q-ev-list { list-style:none; margin:.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:.35rem; } .q-ev-item { display:flex; align-items:center; gap:.55rem; background:var(--card); border:1px solid var(--line); border-radius:7px; padding:.4rem .6rem; } .q-ev-icon { font-size:1.1rem; line-height:1; flex:none; } .q-ev-meta { display:flex; flex-direction:column; gap:.1rem; flex:1; min-width:0; } .q-ev-title { font-weight:600; } .q-ev-desc { display:block; } .q-ev-del { flex:none; background:none; border:0; cursor:pointer; font-size:1rem; opacity:.7; padding:.1rem .3rem; border-radius:5px; } .q-ev-del:hover { opacity:1; background:rgba(192,57,43,.12); } .q-ev-empty { margin:.5rem 0 0; } .q-ev-guidance { margin:.5rem 0 0; color:var(--ink); background:rgba(201,138,0,.08); border-left:3px solid var(--amber); border-radius:6px; padding:.45rem .6rem; } .q-acc-foot { display:flex; align-items:center; gap:.9rem; margin-top:1rem; padding-top:.85rem; border-top:1px solid var(--line); flex-wrap:wrap; } .q-acc-foot .q-review { margin:0; font-weight:500; } .q-foot-right { margin-left:auto; display:flex; align-items:center; gap:.5rem; } @media (min-width:1080px) { .q-acc-grid { grid-template-columns:minmax(0,1fr) 300px; } } /* Questions with no evidence UI stay single-column (no empty sharing gutter). */ .q-acc-grid.q-acc-grid--single { grid-template-columns:1fr; } /* ---- Modal ---- */ .modal-overlay { position:fixed; inset:0; background:rgba(15,22,32,.55); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:1000; } .modal-overlay[hidden] { display:none; } .modal-box { background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; width:100%; max-width:460px; box-shadow:0 12px 40px rgba(0,0,0,.3); } .modal-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--line); } .modal-head h3 { margin:0; font-size:1.05rem; color:var(--heading); } .modal-x { background:none; border:0; font-size:1.5rem; line-height:1; cursor:pointer; color:var(--muted); } .modal-body { padding:1rem 1.1rem; } .modal-body label.small { display:block; color:var(--muted); } .modal-foot { display:flex; justify-content:flex-end; gap:.6rem; padding:.85rem 1.1rem; border-top:1px solid var(--line); } [data-ev-error] { color:var(--red); } @media (max-width:760px) { .q-layout { grid-template-columns:1fr; } .q-nav { position:static; flex-direction:row; flex-wrap:wrap; max-height:none; } .q-nav-title { width:100%; } .q-nav-link { width:auto; } } /* Executive Report preview — the document is rendered on a white sheet regardless of theme, because that is exactly how it prints. Its own styles (report_exec_css) are emitted inline by the page and scoped under .exec-report. */ .exec-sheet { background: #fff; padding: 28px 32px; } .exec-sheet .exec-report { max-width: 780px; margin: 0 auto; } .exec-sheet svg { max-width: 100%; height: auto; } /* Support ticket thread. A staff reply is tinted so a customer can tell at a glance who said what; an internal note is boxed in warning colours because a Super Admin looking at the same thread must never mistake one for something the customer can see. */ .thread-msg { padding:.8rem 0; border-bottom:1px solid var(--line); } .thread-msg:last-of-type { border-bottom:0; } .thread-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.35rem; } .thread-body { white-space:normal; line-height:1.55; } .thread-msg.is-staff { background:var(--row-hover); border-radius:8px; padding:.8rem .9rem; margin:.4rem 0; border-bottom:0; } .thread-msg.is-internal { background:#fdf3df; border:1px dashed #e0c58a; border-radius:8px; padding:.8rem .9rem; margin:.4rem 0; } html[data-theme="dark"] .thread-msg.is-internal { background:#33291a; border-color:#6b5626; } /* Agreement signing. The canvas is always white — a signature is ink on paper, and a dark-theme canvas would export a signature the certificate then prints invisibly. */ .sig-wrap { position:relative; border:1px solid var(--line); border-radius:10px; background:#fff; padding:8px; max-width:660px; } .sig-wrap canvas { display:block; width:100%; height:auto; touch-action:none; cursor:crosshair; } .sig-baseline { position:absolute; left:38px; right:38px; bottom:38px; border-bottom:1px solid #c9d4e0; pointer-events:none; } .callout-quote { border-left:3px solid var(--line); padding:.5rem 0 .5rem .9rem; margin:.6rem 0; color:var(--ink); background:transparent; } /* In-app document viewer (templates/footer.php + app.js). Near-full-screen because the thing being read is usually a contract, and a letter-size page in a small box is unreadable. */ .doc-modal { position:fixed; inset:0; z-index:80; background:rgba(15,23,42,.72); display:flex; align-items:center; justify-content:center; padding:2vh 2vw; } .doc-modal[hidden] { display:none; } .doc-modal-panel { background:var(--card); border:1px solid var(--line); border-radius:12px; width:min(1100px,96vw); height:96vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(2,8,20,.45); } .doc-modal-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem .9rem; border-bottom:1px solid var(--line); } .doc-modal-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* White, always: a PDF is printed on paper, and the browser's viewer chrome assumes it. */ .doc-modal iframe { flex:1; width:100%; border:0; background:#fff; } @media (max-width:760px) { .doc-modal { padding:0; } .doc-modal-panel { width:100vw; height:100vh; border-radius:0; border:0; } } /* The MFA recommendation. NOT a flash: flashes are the app's colour language for "something went wrong" or "act now", and spending them on a standing suggestion both cries wolf and teaches people to dismiss the real ones. Neutral surface, one single-colour line-art shield, no alarm palette. */ .nudge { display:flex; gap:1rem; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:10px; padding:1rem 1.1rem; margin-bottom:1.2rem; } .nudge-icon { flex:0 0 auto; color:var(--blue); margin-top:.15rem; } .nudge-body { flex:1; min-width:0; } .nudge-body strong { display:block; color:var(--heading); margin-bottom:.25rem; } .nudge-body p { margin:.25rem 0 .6rem; } .nudge-body .row { margin-top:.7rem; } .mfa-card-head { display:flex; gap:1rem; align-items:flex-start; margin-bottom:.6rem; } .mfa-card-head h3 { margin:0; } .mfa-card-head p { margin:.2rem 0 0; } /* Filled once it's actually protecting you — the shield reads as "closed", not "offered". */ .nudge-icon.is-on { color:var(--low); fill:rgba(30,138,80,.10); } /* Announcements ride the same quiet surface as the MFA nudge — only the accent changes, so a maintenance window and a new feature read as the same KIND of thing said in a different tone, rather than as two different alarms. */ .nudge-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; } .nudge-tag { flex:0 0 auto; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); } .nudge-info { border-left-color:var(--blue); } .nudge-info .nudge-icon, .nudge-info .nudge-tag { color:var(--blue); } .nudge-release { border-left-color:var(--green); } .nudge-release .nudge-icon, .nudge-release .nudge-tag { color:var(--green); } .nudge-maintenance { border-left-color:var(--amber); } .nudge-maintenance .nudge-icon, .nudge-maintenance .nudge-tag { color:var(--amber); } .nudge-alert { border-left-color:var(--red); } .nudge-alert .nudge-icon, .nudge-alert .nudge-tag { color:var(--red); } /* Plan editor: the vendor add-on block, set apart from the base plan fields so it reads as an optional extra rather than another required price. */ .addon-fields { border:1px solid var(--line); border-radius:10px; padding:.9rem 1rem; } .addon-fields legend { padding:0 .4rem; color:var(--heading); }