/* ═══════════════════════════════════════════════════════════════ Intisaa Self-Assessor — brand tokens distilled from intisaa.co.uk Palette : Primary #2f3c4f (slate-navy ink) · Accent #dcaa6b (gold) · Surface #ffffff Type : Lato everywhere (matches parent site) Buttons : border-radius 0, min-height 44 px See DESIGN.md for the spec; updates here must round-trip there. ═══════════════════════════════════════════════════════════════ */ /* ── Variables ─────────────────────────────────────────────── */ :root { /* Legacy --navy/--gold/--cream names retained so existing rules keep resolving — values updated to the DESIGN.md tokens. */ --navy: #2f3c4f; --navy-800: #3f4f64; --navy-600: #506682; --navy-400: #647e98; --gold: #dcaa6b; --gold-light: #e6c08e; --gold-pale: #faf0e3; /* AA-safe deep gold for text-on-white contexts. #dcaa6b on white is ~2.3:1 (fails). #8a4d00 is ~7.1:1 (passes). Use --gold-deep wherever gold text sits over white/cream surfaces; keep --gold for gold-on-navy contexts where the original tone passes (.report-hero, .levels-cta, nav-brand). */ --gold-deep: #8a4d00; --cream: #ffffff; --white: #ffffff; --text: #2f3c4f; /* 0.65 alpha resolved to ~3.8:1 contrast on white (below WCAG AA 4.5:1). 0.75 lifts to ~4.6:1 — passes AA for body text. */ --text-muted: rgba(47, 60, 79, 0.85); /* 0.75 failed WCAG AA on white (~4.3:1); 0.85 ≈ 6.5:1 */ /* 0.55 alpha was 3.10:1 on white (fails AA body). 0.72 lifts to ~4.6:1 — passes AA for placeholders/captions if they're ever used as body. */ --text-light: rgba(47, 60, 79, 0.72); --border: #e8e3da; --border-dark: #c5bfb5; --green: #1a6b3c; --green-bg: #edf7f1; --green-bdr: #b0d9bf; /* #b86800 was 3.87:1 on amber-bg / 3.71:1 on gold-pale (fails AA body). #8a4d00 lifts both to ~5.0:1+ — passes AA for the state-chip text. */ --amber: #8a4d00; --amber-bg: #fef5e6; --amber-bdr: #f0c97a; --red: #b02020; --red-bg: #fdf0f0; --red-bdr: #f0bcbc; /* Brand aliases — earlier rules reference var(--brand-primary) and var(--brand-accent) but no token was defined, so those rules rendered with the CSS-var fallback (transparent / inherit) and contributed to the axe contrast failures. Bind them to the existing navy + gold tokens here. */ --brand-primary: var(--navy); --brand-accent: var(--gold); /* Lato everywhere — no Cormorant Garamond, no DM Sans. Existing `var(--serif)` references on headings keep working but resolve to Lato (with a heavier weight from the rules below). */ --serif: 'Lato', system-ui, sans-serif; --sans: 'Lato', system-ui, sans-serif; --max-w: 880px; --r: 0; /* buttons sharp per DESIGN.md */ --r-lg: 0; --sh-sm: 0 1px 4px rgba(47,60,79,0.07); --sh-md: 0 4px 20px rgba(47,60,79,0.11); --sh-lg: 0 16px 48px rgba(47,60,79,0.16); } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* font-family on too (not just body): without it the root element computes to the UA serif default (Times New Roman), which the brand axis flags on every page. */ html { font-size: 16px; font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--sans); font-size: 1rem; font-weight: 400; line-height: 1.6; color: var(--text); background: var(--cream); min-height: 100vh; display: flex; flex-direction: column; } img { max-width: 100%; height: auto; } a { color: var(--navy); text-decoration: none; } a:hover { color: var(--navy-800); text-decoration: underline; text-underline-offset: 3px; } /* Inline links inside paragraphs/list items always underlined so they're distinguishable from surrounding text — fixes axe link-in-text-block. */ .site-main p a, .site-main li a { text-decoration: underline; text-underline-offset: 3px; } /* ── Typography ────────────────────────────────────────────── */ h1, h2, h3 { font-family: var(--sans); line-height: 1.2; color: var(--navy); letter-spacing: -0.005em; } h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 700; } h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; } h3 { font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 600; } p { margin-bottom: 0.75rem; } p:last-child { margin-bottom: 0; } ul, ol { padding-left: 1.25rem; } li { margin-bottom: 0.3rem; } /* ── Eyebrow label ─────────────────────────────────────────── */ /* "What to assess" — the per-requirement Assessment Focus prompt, shown to the user in the wizard (mirrors the questionnaire's Assessment Focus column). Visible by default (primary guidance), distinct from the collapsed evidence hint. Gold left-rule on a pale tint. */ .assessment-focus { margin: 0 0 1.25rem; padding: 0.85rem 1rem; background: var(--gold-pale); border-left: 3px solid var(--gold); } .assessment-focus__label { display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.3rem; } .assessment-focus__body { margin: 0; color: var(--text); } /* MAIA advisory second opinion — navy-accented to distinguish it from the gold "what to assess" guidance. Surfaced for assessor/advisor review; never overwrites the recorded answer. */ .maia-verdict { margin: 0 0 1.25rem; padding: 0.85rem 1rem; background: #f3f6fa; border-left: 3px solid var(--navy); } .maia-verdict__label { display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); margin-bottom: 0.35rem; } .maia-verdict__confidence { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--navy-600); } .maia-verdict__rating { margin: 0 0 0.4rem; color: var(--text); } .maia-verdict__diff { color: var(--gold-deep); font-weight: 600; } .maia-verdict__body { margin: 0 0 0.4rem; color: var(--text); } .maia-verdict__note { margin: 0; font-size: 0.8rem; color: var(--navy-400); font-style: italic; } /* Per-requirement evidence file uploads. */ .evidence-files { margin: 1.5rem 0; padding-top: 1.25rem; border-top: 1px solid var(--gold-pale); } .evidence-files__title { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0 0 0.75rem; } .evidence-files__list { list-style: none; margin: 0 0 1rem; padding: 0; } .evidence-files__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.7rem; background: #f7f9fb; border-left: 3px solid var(--navy-400); margin-bottom: 0.4rem; } .evidence-files__name { flex: 1; color: var(--text); word-break: break-all; } .evidence-files__size { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; } .evidence-files__empty { margin: 0 0 1rem; } .evidence-files__upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .evidence-files__upload input[type="file"] { flex: 1; min-width: 12rem; } .evidence-files__hint { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; } .evidence-files__note { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--navy-400); font-style: italic; } /* GVFS Clause chip under the requirement title (imported ClickUp field). */ .wizard-req-page__clause { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--text-muted); } .wizard-req-page__clause-label { font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; margin-right: 0.4rem; } .eyebrow { font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; /* See --gold-deep token in :root for the rationale. */ color: var(--gold-deep); display: block; margin-bottom: 0.6rem; } /* ── Layout ─────────────────────────────────────────────────── */ .site-main { flex: 1; width: 100%; } /* ── Navigation ─────────────────────────────────────────────── */ .site-nav { background: var(--navy); padding: 0 1.5rem; height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: sticky; top: 0; z-index: 100; } .nav-brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; } .nav-brand:hover { text-decoration: none; } .brand-mark { font-family: var(--serif); font-size: 1.55rem; font-weight: 400; color: var(--gold); line-height: 1; letter-spacing: -0.03em; } .brand-logo { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; background: #fff; display: block; } .brand-name { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(253,252,250,0.9); } .nav-product { font-size: 0.68rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; /* alpha 0.3 on var(--navy) ≈ 2.4:1 — fails AA 4.5:1. 0.7 alpha ≈ 5.6:1, passes for normal body text. */ color: rgba(253,252,250,0.7); } /* ── Footer ─────────────────────────────────────────────────── */ .site-footer { background: var(--navy); /* 0.4 alpha was 3.13:1 on navy (fails AA body). 0.72 lifts to ~6.4:1. */ color: rgba(253,252,250,0.72); text-align: center; padding: 1.1rem 1.5rem; font-size: 0.78rem; line-height: 1.5; } /* Footer links: gold on dark slate. rgba(220,170,107,0.85) blended on --navy #2f3c4f measured ~4.27:1 (fails WCAG AA 4.5:1, axe-flagged on ticket 869dgn4cg). Bumped to solid --gold #dcaa6b for ~4.85:1 — passes AA for normal text. Hover keeps full gold (already passes). */ .site-footer a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .site-footer a:hover { color: #f0c789; text-decoration: underline; } /* ── Buttons ─────────────────────────────────────────────────── */ /* Minimum touch target 44 px (Apple HIG / Material). Padding 15/30 per DESIGN.md. .btn-sm kept for inline contexts but enforces min-height so it never drops below 44 px (root cause of ticket 869dgn2zj). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; min-height: 44px; padding: 12px 28px; border-radius: var(--r); border: none; cursor: pointer; transition: background 0.18s, transform 0.15s, box-shadow 0.18s, color 0.15s; text-decoration: none; white-space: nowrap; line-height: 1.2; } .btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh-md); } .btn:active { transform: translateY(0); box-shadow: none; } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .btn-primary { background: var(--navy); color: var(--white); } .btn-primary:hover { background: var(--navy-800); color: var(--white); } .btn-gold { background: var(--gold); color: #000; } .btn-gold:hover { background: var(--gold-light); color: #000; } .btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); } .btn-outline:hover { background: var(--navy); color: var(--white); border-color: var(--navy); } .btn-lg { min-height: 52px; padding: 15px 30px; font-size: 1rem; } .btn-sm { min-height: 44px; padding: 10px 20px; font-size: 0.88rem; } .btn-full { width: 100%; } /* Legacy .link-button (used as a submit button styled as a text link). Promoted to a real interactive control with hit-area ≥44 px so it isn't an unreliable click target. Keep the text-link look. */ .link-button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 4px; background: none; border: none; font-family: var(--sans); font-size: 0.95rem; font-weight: 600; /* var(--gold) was 2.10:1 on white — fails AA. Navy gives 11.17:1 and the underline keeps the text-link affordance. */ color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .link-button:hover { color: var(--navy-800); text-decoration: underline; } /* ── RAG badges ──────────────────────────────────────────────── */ .rag-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem; border-radius: 2px; font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .rag-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* Dark variants (on navy background) */ /* Dark variants live on navy panels — foregrounds need to clear AA on var(--navy) #2f3c4f. Old values cleared the badge-bg blend but failed against navy directly (1.2–1.7:1). Lifted to ≥4.5:1. */ .rag-badge--green { background: rgba(26,107,60,0.22); color: #a8efc4; border: 1px solid rgba(168,239,196,0.28); } .rag-badge--amber { background: rgba(184,104,0,0.22); color: #ffd98a; border: 1px solid rgba(255,217,138,0.28); } .rag-badge--red { background: rgba(176,32,32,0.22); color: #ffb3b3; border: 1px solid rgba(255,179,179,0.28); } .rag-badge--green::before { background: #a8efc4; } .rag-badge--amber::before { background: #ffd98a; } .rag-badge--red::before { background: #ffb3b3; } /* Light variants (on cream/white) */ .rag-badge--light.rag-badge--green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bdr); } .rag-badge--light.rag-badge--amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-bdr); } .rag-badge--light.rag-badge--red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-bdr); } .rag-badge--light.rag-badge--green::before { background: var(--green); } .rag-badge--light.rag-badge--amber::before { background: var(--amber); } .rag-badge--light.rag-badge--red::before { background: var(--red); } .rag-badge--lg { padding: 0.55rem 1.2rem; font-size: 0.76rem; } .rag-badge--lg::before { width: 9px; height: 9px; } /* ═══════════════════════════════════════════════════════════════ UPLOAD PAGE ═══════════════════════════════════════════════════════════════ */ .upload-page { max-width: var(--max-w); margin: 0 auto; padding: 3rem 1.5rem 5rem; animation: fadeUp 0.45s ease-out; } .upload-page__header { margin-bottom: 2.5rem; } .upload-page__header h1 { margin-bottom: 0.4rem; } .upload-page__sub { font-size: 0.95rem; color: var(--text-muted); max-width: 540px; line-height: 1.65; } .upload-form { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; } /* Form sections */ .form-section { padding: 1.75rem 2rem; } .form-section + .form-section { border-top: 1px solid var(--border); } .form-section__label { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light); display: block; margin-bottom: 1.1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .form-row.full { grid-template-columns: 1fr; } @media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } } .form-field { display: flex; flex-direction: column; gap: 0.3rem; } .form-label { font-size: 0.8rem; font-weight: 500; color: var(--text); } .form-label .req { color: var(--amber); margin-left: 2px; } .form-input { font-family: var(--sans); font-size: 0.92rem; color: var(--text); background: var(--cream); border: 1px solid var(--border-dark); border-radius: var(--r); padding: 0.58rem 0.85rem; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; outline: none; width: 100%; } .form-input:focus { border-color: var(--gold); background: var(--white); box-shadow: 0 0 0 3px rgba(200,151,58,0.13); } .form-input::placeholder { color: var(--text-light); } /* File drop zone */ .file-zone { position: relative; border: 2px dashed var(--border-dark); border-radius: var(--r-lg); padding: 2.25rem 1.5rem; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; background: var(--cream); } .file-zone:hover, .file-zone.is-over { border-color: var(--gold); background: var(--gold-pale); } .file-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .file-zone__icon { font-size: 2rem; line-height: 1; display: block; margin-bottom: 0.6rem; opacity: 0.45; } .file-zone__primary { font-size: 0.88rem; font-weight: 500; color: var(--text-muted); display: block; margin-bottom: 0.2rem; } .file-zone__hint { font-size: 0.75rem; color: var(--text-light); } .file-list { list-style: none; padding: 0; margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; } .file-list__item { display: flex; align-items: center; gap: 0.5rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 0.38rem 0.7rem; font-size: 0.8rem; color: var(--text-muted); } .file-list__item::before { content: '📄'; font-size: 0.85rem; } /* Consent row */ .consent-row { display: flex; gap: 0.7rem; align-items: flex-start; padding: 1.25rem 2rem; border-top: 1px solid var(--border); background: var(--cream); } .consent-row input[type="checkbox"] { accent-color: var(--navy); flex-shrink: 0; width: 15px; height: 15px; margin-top: 0.18rem; cursor: pointer; } .consent-row label { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; cursor: pointer; } /* Form footer */ .form-foot { padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--border); } .form-foot__note { font-size: 0.75rem; color: var(--text-light); line-height: 1.5; max-width: 380px; } /* ═══════════════════════════════════════════════════════════════ WAITING PAGE ═══════════════════════════════════════════════════════════════ */ .waiting-page { max-width: 540px; margin: 0 auto; padding: 4rem 1.5rem 5rem; animation: fadeUp 0.45s ease-out; } .waiting-page h1 { margin-bottom: 0.45rem; } .waiting-page__sub { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 3rem; } /* Pipeline timeline */ .pipeline { position: relative; padding-left: 2.25rem; } .pipeline::before { content: ''; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(to bottom, var(--border-dark), var(--border)); } .pipeline__step { position: relative; padding: 0 0 2rem 1.25rem; opacity: 0.3; transition: opacity 0.4s ease; } .pipeline__step:last-child { padding-bottom: 0; } .pipeline__step.is-done { opacity: 0.5; } .pipeline__step.is-active { opacity: 1; } .pipeline__step.is-error { opacity: 1; } /* Step dot */ .pipeline__dot { position: absolute; left: -2.25rem; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--border); border: 2px solid var(--border-dark); display: flex; align-items: center; justify-content: center; transition: all 0.35s ease; } .pipeline__step.is-done .pipeline__dot { background: var(--navy-400); border-color: var(--navy-400); } .pipeline__step.is-done .pipeline__dot::after { content: ''; width: 6px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px,-1px); display: block; } .pipeline__step.is-active .pipeline__dot { background: var(--gold); border-color: var(--gold); animation: dotPulse 1.8s ease-in-out infinite; } .pipeline__step.is-active .pipeline__dot::after { content: ''; width: 7px; height: 7px; background: #fff; border-radius: 50%; display: block; } .pipeline__step.is-error .pipeline__dot { background: var(--red); border-color: var(--red); } .pipeline__step.is-error .pipeline__dot::after { content: '×'; color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 1; margin-top: 1px; } .pipeline__label { font-size: 0.9rem; font-weight: 500; color: var(--text); line-height: 1.3; margin-bottom: 0.15rem; transition: color 0.3s; } .pipeline__step.is-active .pipeline__label { color: var(--navy); } .pipeline__desc { font-size: 0.77rem; color: var(--text-light); line-height: 1.4; } .pipeline__step.is-active .pipeline__desc { color: var(--text-muted); } .waiting-note { margin-top: 2.75rem; padding: 1rem 1.25rem; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--r); font-size: 0.83rem; color: var(--text-muted); line-height: 1.55; } .waiting-note__stage { font-weight: 500; color: var(--navy); display: block; margin-bottom: 0.2rem; font-size: 0.85rem; } /* ═══════════════════════════════════════════════════════════════ REPORT LANDING ═══════════════════════════════════════════════════════════════ */ .landing-page { min-height: calc(100vh - 54px - 58px); display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; animation: fadeUp 0.45s ease-out; } .landing-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 3rem 2.5rem 2.5rem; max-width: 440px; width: 100%; text-align: center; } .landing-card__badge { width: 54px; height: 54px; background: var(--gold-pale); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 1.4rem; } .landing-card h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 300; margin-bottom: 0.75rem; } .landing-card__sub { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 2rem; line-height: 1.6; } .landing-card__actions { display: flex; flex-direction: column; gap: 0.65rem; } .landing-card__disclaimer { margin-top: 1.5rem; font-size: 0.74rem; color: var(--text-light); line-height: 1.55; } /* ═══════════════════════════════════════════════════════════════ REPORT VIEW ═══════════════════════════════════════════════════════════════ */ .report-page { animation: fadeUp 0.45s ease-out; } /* Hero */ .report-hero { background: var(--navy); background-image: radial-gradient(ellipse at 85% 40%, rgba(200,151,58,0.07) 0%, transparent 55%), radial-gradient(ellipse at 15% 70%, rgba(46,80,117,0.5) 0%, transparent 50%); padding: 3.5rem 1.5rem 3rem; color: var(--white); position: relative; overflow: hidden; } .report-hero::after { content: 'A'; position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); font-family: var(--serif); font-size: 22rem; font-weight: 300; color: rgba(200,151,58,0.04); line-height: 1; pointer-events: none; user-select: none; } .report-hero__inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 1; } .report-hero .eyebrow { color: rgba(200,151,58,0.8); } .report-hero__org { font-family: var(--serif); font-size: clamp(2rem, 5.5vw, 3.2rem); font-weight: 300; color: var(--white); line-height: 1.1; margin-bottom: 0.3rem; } .report-hero__date { font-size: 0.78rem; color: rgba(253,252,250,0.35); margin-bottom: 1.75rem; letter-spacing: 0.04em; } .report-hero__summary { margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid rgba(200,151,58,0.18); font-family: var(--serif); font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 300; font-style: italic; color: rgba(253,252,250,0.7); line-height: 1.7; max-width: 700px; } /* Toolbar */ .report-toolbar { max-width: var(--max-w); margin: 0 auto; padding: 0.9rem 1.5rem; display: flex; justify-content: flex-end; gap: 0.6rem; border-bottom: 1px solid var(--border); } /* Body */ .report-body { max-width: var(--max-w); margin: 0 auto; padding: 2.5rem 1.5rem 5rem; } .report-section { margin-bottom: 2.75rem; } .report-section__heading { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light); padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; display: block; } /* Score pips */ .score-pips { display: flex; gap: 4px; align-items: center; } .score-pips__pip { width: 9px; height: 9px; border-radius: 50%; background: var(--border); transition: background 0.2s; flex-shrink: 0; } .score-pips__pip.on-green { background: var(--green); } .score-pips__pip.on-amber { background: var(--amber); } .score-pips__pip.on-red { background: var(--red); } /* Theme cards (collapsible details) */ .theme-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 0.75rem; box-shadow: var(--sh-sm); overflow: hidden; transition: box-shadow 0.2s; } .theme-card:hover { box-shadow: var(--sh-md); } .theme-card--green { border-left: 4px solid var(--green); } .theme-card--amber { border-left: 4px solid var(--amber); } .theme-card--red { border-left: 4px solid var(--red); } .theme-card > summary { list-style: none; padding: 1.2rem 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; user-select: none; } .theme-card > summary::-webkit-details-marker { display: none; } .theme-name { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--navy); flex: 1; min-width: 160px; } .theme-meta { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; } .theme-toggle { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-dark); display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; color: var(--text-muted); transition: all 0.2s; flex-shrink: 0; } .theme-card[open] > summary .theme-toggle { background: var(--navy); border-color: var(--navy); color: var(--white); transform: rotate(45deg); } .theme-card[open] > summary { border-bottom: 1px solid var(--border); } .theme-body { padding: 1.25rem 1.5rem 1.5rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem 2rem; } @media (max-width: 680px) { .theme-body { grid-template-columns: 1fr; } } .theme-col__title { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.6rem; } .theme-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .theme-col ul li { font-size: 0.84rem; color: var(--text-muted); padding-left: 1rem; position: relative; line-height: 1.5; margin-bottom: 0; } .theme-col--evidence li::before { content: '✓'; position: absolute; left: 0; color: var(--navy-400); font-size: 0.68rem; top: 0.15rem; } .theme-col--gaps li::before { content: '△'; position: absolute; left: 0; color: var(--amber); font-size: 0.6rem; top: 0.2rem; } .theme-col--actions li::before { content: '→'; position: absolute; left: 0; color: var(--green); font-size: 0.75rem; top: 0.02rem; } /* Priorities grid */ .priorities-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 580px) { .priorities-grid { grid-template-columns: 1fr; } } .priorities-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.5rem; } .priorities-card__title { font-size: 0.65rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.9rem; } .priorities-card ol, .priorities-card ul { font-size: 0.87rem; color: var(--text-muted); line-height: 1.6; padding-left: 1.2rem; } .priorities-card li { margin-bottom: 0.45rem; } .limitations-block { background: var(--cream); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem 1.5rem; font-size: 0.85rem; color: var(--text-muted); line-height: 1.65; } /* ── Level intro strip (upload page) ──────────────────── */ .level-intro { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; flex-wrap: wrap; } .level-intro__item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--text-light); font-family: var(--sans); } .level-intro__item--active { color: var(--navy); font-weight: 500; } .level-intro__num { width: 22px; height: 22px; border-radius: 50%; background: var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; } .level-intro__item--active .level-intro__num { background: var(--gold); color: var(--navy); } .level-intro__you { font-size: 0.7rem; color: var(--gold); font-weight: 600; } .level-intro__sep { color: var(--border-dark); font-size: 0.75rem; padding: 0 0.1rem; } /* ── Report hero level row ─────────────────────────────── */ .report-hero__level-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 1.1rem; flex-wrap: wrap; } .level-pip { padding: 3px 9px; border-radius: 3px; font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; background: rgba(255,255,255,0.08); /* 0.3 alpha was 2.43:1 on navy — fails AA. 0.7 lifts to ~5.8:1. */ color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.1); } .level-pip--done { background: rgba(200,151,58,0.25); color: var(--gold); border-color: rgba(200,151,58,0.4); } .level-pip-arrow { color: rgba(255,255,255,0.2); font-size: 0.68rem; } .level-pip-label { font-family: var(--sans); font-size: 0.72rem; color: rgba(200,151,58,0.7); margin-left: 0.5rem; letter-spacing: 0.08em; } /* ── Levels CTA (report bottom) ───────────────────────── */ .levels-cta { margin-top: 2.75rem; background: var(--navy); background-image: radial-gradient(ellipse at 80% 30%, rgba(200,151,58,0.07), transparent 55%); border-radius: var(--r-lg); padding: 2.5rem 2rem 2rem; color: var(--white); } .levels-cta__header { margin-bottom: 1.75rem; } .levels-cta__header .eyebrow { color: rgba(200,151,58,0.75); } .levels-cta__header h2 { font-family: var(--serif); font-size: clamp(1.25rem, 3vw, 1.55rem); font-weight: 300; color: var(--white); margin: 0.25rem 0 0.6rem; line-height: 1.3; } .levels-cta__header p { font-size: 0.84rem; color: rgba(253,252,250,0.5); margin: 0; max-width: 540px; line-height: 1.6; } .levels-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 2rem; } @media (max-width: 780px) { .levels-track { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .levels-track { grid-template-columns: 1fr; } } .level-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r); padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; position: relative; } .level-card--done { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); opacity: 0.65; } .level-card--next { background: rgba(200,151,58,0.1); border-color: rgba(200,151,58,0.35); box-shadow: 0 0 0 1px rgba(200,151,58,0.2); } .level-card--rapid { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); } .level-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; } .level-card__num { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 0.78rem; font-weight: 700; /* 0.5 alpha was 4.09:1 on navy — fails AA. 0.7 lifts to ~5.8:1. */ color: rgba(255,255,255,0.7); flex-shrink: 0; } .level-card--done .level-card__num { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); } .level-card--next .level-card__num { background: var(--gold); color: var(--navy); } .level-card__tag { font-size: 0.62rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .level-card--done .level-card__tag { color: rgba(255,255,255,0.35); } .level-card--next .level-card__tag { color: var(--gold); } .level-card__title { font-family: var(--sans); font-size: 0.88rem; font-weight: 600; color: var(--white); margin: 0; } .level-card--done .level-card__title { color: rgba(255,255,255,0.55); } .level-card__desc { font-size: 0.78rem; color: rgba(253,252,250,0.45); line-height: 1.55; margin: 0; flex: 1; } .level-card--next .level-card__desc { color: rgba(253,252,250,0.6); } .level-card .btn-sm { margin-top: 0.75rem; align-self: flex-start; } .levels-cta__foot { display: flex; align-items: center; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; } .levels-cta__note { font-size: 0.78rem; color: rgba(253,252,250,0.4); margin: 0; line-height: 1.5; max-width: 380px; } /* ═══════════════════════════════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════════════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(200,151,58,0.18); } 50% { box-shadow: 0 0 0 9px rgba(200,151,58,0.06); } } /* ═══════════════════════════════════════════════════════════════ PRINT ═══════════════════════════════════════════════════════════════ */ @media print { .site-nav, .site-footer, .report-toolbar, .levels-cta, .report-hero__level-row { display: none !important; } body { background: white; } .report-hero { background: #0e1c2f !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .report-hero::after { display: none; } details { display: block; } details .theme-body { display: grid !important; } .theme-card { break-inside: avoid; border-left-width: 4px !important; } .report-section { break-inside: avoid; } .priorities-grid { break-inside: avoid; } } /* ───────────────────────────────────────────────────────────── /a/{id}/... — assessment wizard ═══════════════════════════════════════════════════════════════ */ .wizard { max-width: var(--max-w); margin: 0 auto; padding: 2rem 1.5rem 5rem; animation: fadeUp 0.45s ease-out; } .wizard__header { margin: 1.4rem 0 1.6rem; } .wizard__header h1 { font-family: var(--serif); font-weight: 400; font-size: 2.2rem; letter-spacing: -0.01em; color: var(--navy); margin: 0.25rem 0 0.6rem; line-height: 1.2; } .wizard__sub { color: var(--text-muted); font-size: 0.94rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } /* Progress bar -------------------------------------------------- */ .wizard__progress { margin: 0 0 2.25rem; } .wizard__progress-track { width: 100%; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; } .wizard__progress-bar { height: 100%; background: var(--gold); transition: width 0.4s ease-out; } /* Section list (overview) -------------------------------------- */ .wizard__sections { display: flex; flex-direction: column; gap: 0.6rem; } .wizard-section { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--r-lg); box-shadow: var(--sh-sm); color: inherit; text-decoration: none; transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s; } .wizard-section:hover { box-shadow: var(--sh-md); transform: translateY(-1px); border-left-color: var(--gold-light); text-decoration: none; } .wizard-section__code { font-family: var(--serif); font-size: 1.6rem; color: var(--gold); font-variant-numeric: lining-nums; width: 1.6em; text-align: center; } .wizard-section__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .wizard-section__name { font-family: var(--serif); font-size: 1.15rem; color: var(--navy); line-height: 1.2; } .wizard-section__meta { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; } .wizard-section__cta { font-size: 0.84rem; /* On .wizard-section (white bg) — var(--gold) was 2.3:1, fails AA. */ color: var(--gold-deep); white-space: nowrap; font-weight: 500; } /* Requirement list (section landing) --------------------------- */ .wizard-reqs { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; padding: 0; } .wizard-req { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: box-shadow 0.16s, border-color 0.16s; } .wizard-req:hover { box-shadow: var(--sh-md); border-color: var(--border-dark); } .wizard-req__link { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 1rem; padding: 0.95rem 1.2rem; color: inherit; text-decoration: none; } .wizard-req__link:hover { text-decoration: none; } .wizard-req__n { font-family: var(--sans); font-weight: 500; font-size: 0.85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; background: var(--cream); border: 1px solid var(--border); border-radius: 999px; width: 1.85rem; height: 1.85rem; display: inline-flex; align-items: center; justify-content: center; } .wizard-req__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .wizard-req__ref { font-family: 'DM Mono', ui-monospace, SFMono-Regular, monospace; font-size: 0.75rem; /* On .wizard-req (white bg) — var(--gold) was 2.3:1, fails AA. */ color: var(--gold-deep); letter-spacing: 0.04em; } .wizard-req__text { color: var(--navy); font-size: 0.97rem; line-height: 1.45; } .wizard-req__status { white-space: nowrap; } .wizard-req__pending { display: inline-block; font-size: 0.74rem; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; border: 1px dashed var(--border-dark); border-radius: 999px; padding: 0.22rem 0.7rem; } /* Single requirement view ------------------------------------- */ .wizard-req-page__text { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; line-height: 1.35; color: var(--navy); } .wizard-req-page__form { display: flex; flex-direction: column; gap: 0.8rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.6rem 1.7rem 1.4rem; box-shadow: var(--sh-sm); margin: 1.6rem 0; } .wizard-req-page__rating { border: 0; padding: 0; margin-bottom: 0.4rem; } .wizard-req-page__rating .form-label { display: block; margin-bottom: 0.5rem; } /* Rating pills (radio group rendered as chips) */ .rating-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; } .rating-pill { position: relative; cursor: pointer; } .rating-pill input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .rating-pill > span { display: inline-block; padding: 0.4rem 0.95rem; border: 1px solid var(--border-dark); border-radius: 999px; font-size: 0.86rem; font-weight: 500; color: var(--text-muted); transition: background 0.14s, color 0.14s, border-color 0.14s; } .rating-pill:hover > span { border-color: var(--navy-400); color: var(--navy); } .rating-pill input[type="radio"]:checked + span { background: var(--gold-pale); border-color: var(--gold); color: var(--navy); } .rating-pill input[type="radio"]:disabled + span { cursor: not-allowed; opacity: 0.7; } /* Hint disclosures (MAIA suggested evidence/staff) */ .hint { background: var(--cream); border-left: 2px solid var(--gold); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 0.55rem 0.95rem; font-size: 0.86rem; color: var(--text-muted); } .hint summary { cursor: pointer; color: var(--navy); font-weight: 500; list-style: none; } .hint summary::-webkit-details-marker { display: none; } .hint summary::before { content: "+ "; color: var(--gold); font-weight: 600; } .hint[open] summary::before { content: "− "; } .hint p { margin-top: 0.4rem; line-height: 1.5; } .wizard-req-page__write-note { font-size: 0.78rem; color: var(--text-muted); font-style: italic; margin-top: 0.5rem; padding-top: 0.7rem; border-top: 1px dashed var(--border); } .wizard-req-page__nav { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin-top: 1.5rem; } /* Overview CTA row -------------------------------------------- */ .wizard__cta-row { display: flex; justify-content: flex-end; margin: 0 0 1.6rem; } /* Review page ------------------------------------------------- */ .review-banner { padding: 0.85rem 1.1rem; border-radius: var(--r-lg); margin-bottom: 1.4rem; font-size: 0.93rem; line-height: 1.5; } .review-banner--error { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-bdr); } .review-banner strong { display: block; margin-bottom: 0.2rem; } .review-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; margin-bottom: 2rem; } .review__h2 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; color: var(--navy); margin: 1.6rem 0 0.85rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .review-table tbody td:first-child { font-family: inherit; font-size: 0.93rem; } .review-table tbody td:nth-child(2), .review-table tbody td:nth-child(3) { font-family: var(--sans); } .review-submit { margin: 2.2rem 0 0; padding-top: 1.6rem; border-top: 2px solid var(--gold); } .review-submit__note { margin-top: 0.7rem; font-size: 0.85rem; color: var(--text-muted); text-align: center; line-height: 1.5; } .review-submit__download { margin-top: 1rem; text-align: center; } /* ───────────────────────────────────────────────────────────── Sign-off — Phase F ═══════════════════════════════════════════════════════════════ */ .signoff-issued { background: var(--gold-pale); border: 1px solid var(--amber-bdr); border-radius: var(--r-lg); padding: 1rem 1.2rem; margin-bottom: 1.4rem; font-size: 0.93rem; color: var(--navy); } .signoff-issued strong { display: block; margin-bottom: 0.3rem; } .signoff-issued__url { font-family: 'DM Mono', ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; margin: 0.5rem 0 0.4rem; } .signoff-issued__note { font-size: 0.81rem; color: var(--text-muted); font-style: italic; } .signoff-roles { display: flex; flex-direction: column; gap: 1rem; } .signoff-role { background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--r-lg); padding: 1.1rem 1.3rem 1.2rem; box-shadow: var(--sh-sm); } .signoff-role__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem; } .signoff-role__name { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--navy); } .signoff-role__blurb { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 0.85rem; } .signoff-role__captured { font-size: 0.93rem; color: var(--navy); background: var(--green-bg); border: 1px solid var(--green-bdr); border-radius: var(--r); padding: 0.55rem 0.9rem; } .signoff-role__captured code { background: transparent; border: 0; padding: 0; color: var(--text-muted); font-size: 0.85em; } .signoff-role__form { display: flex; flex-direction: column; gap: 0.6rem; } .signoff-role__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; } .signoff-role__fields .form-label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 500; font-size: 0.84rem; } .signoff-role__form .btn { align-self: flex-start; } .signoff-complete { margin-top: 2rem; padding: 1.2rem 1.4rem; background: var(--green-bg); border: 1px solid var(--green-bdr); border-radius: var(--r-lg); text-align: center; } .signoff-complete .btn { margin-top: 0.7rem; } /* Signatory verify page (anonymous) */ .signoff-verify__panel { max-width: 540px; margin: 1rem auto 0; background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--gold); border-radius: var(--r-lg); padding: 1.8rem 2rem; box-shadow: var(--sh-md); } .signoff-verify__blurb { color: var(--text-muted); font-style: italic; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .signoff-verify__form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; } .signoff-verify__form p { font-size: 0.93rem; line-height: 1.55; color: var(--navy); } .signoff-verify__note { font-size: 0.83rem; color: var(--text-muted); text-align: center; font-style: italic; } .signoff-done__panel { max-width: 540px; margin: 1rem auto 0; text-align: center; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.6rem 2rem; box-shadow: var(--sh-sm); } .signoff-done__note { margin-top: 1rem; color: var(--text-muted); font-size: 0.86rem; font-style: italic; } @media (max-width: 540px) { .signoff-role__fields { grid-template-columns: 1fr; } .signoff-verify__panel, .signoff-done__panel { padding: 1.2rem 1.3rem; } } @media (max-width: 540px) { .review-stats { grid-template-columns: 1fr; } } @media (max-width: 540px) { .wizard { padding: 1.5rem 1rem 4rem; } .wizard__header h1 { font-size: 1.7rem; } .wizard-section { grid-template-columns: auto 1fr; } .wizard-section__cta { grid-column: 1 / -1; text-align: right; margin-top: 0.2rem; } .wizard-req__link { grid-template-columns: auto 1fr; } .wizard-req__status { grid-column: 1 / -1; padding-left: 2.7rem; } } /* ───────────────────────────────────────────────────────────── /org/{slug}/assessments/new — framework picker ═══════════════════════════════════════════════════════════════ */ .assessment-new { max-width: var(--max-w); margin: 0 auto; padding: 2rem 1.5rem 4rem; animation: fadeUp 0.45s ease-out; } .assessment-new__header { margin: 1.4rem 0 2rem; } .assessment-new__header h1 { font-family: var(--serif); font-weight: 400; font-size: 2.4rem; letter-spacing: -0.01em; color: var(--navy); margin: 0.2rem 0 0.6rem; } .assessment-new__sub { color: var(--text-muted); font-size: 0.98rem; line-height: 1.55; max-width: 60ch; } .framework-form { display: flex; flex-direction: column; gap: 1.6rem; } .framework-form__grid { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.85rem; } /* Hide the native radio; the entire card is the click target */ .framework-card input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .framework-card { position: relative; display: block; cursor: pointer; border-radius: var(--r-lg); } .framework-card__inner { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.15rem 1.25rem 1.1rem; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .framework-card:hover .framework-card__inner { border-color: var(--border-dark); border-left-color: var(--gold-light); box-shadow: var(--sh-md); transform: translateY(-1px); } .framework-card input[type="radio"]:checked + .framework-card__inner { border-color: var(--navy-400); border-left-color: var(--gold); border-left-width: 4px; box-shadow: var(--sh-md); background: var(--gold-pale); } .framework-card input[type="radio"]:focus-visible + .framework-card__inner { outline: 2px solid var(--gold); outline-offset: 2px; } .framework-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; } .framework-card__name { font-family: var(--serif); font-size: 1.25rem; color: var(--navy); line-height: 1.15; } .framework-card__code { font-family: 'DM Mono', ui-monospace, SFMono-Regular, monospace; font-size: 0.75rem; color: var(--text-muted); letter-spacing: 0.04em; white-space: nowrap; } .framework-card__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; } .framework-form__actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.85rem; padding-top: 0.4rem; } /* a11y — for fieldset legends we want to hide visually but keep for screen readers */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 540px) { .assessment-new { padding: 1.5rem 1rem 3rem; } .assessment-new__header h1 { font-size: 1.9rem; } .framework-form__actions { flex-direction: column-reverse; align-items: stretch; } .framework-form__actions .btn { width: 100%; } } /* ───────────────────────────────────────────────────────────── /login + /login_sent — magic-link auth ═══════════════════════════════════════════════════════════════ */ .auth-page { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem 4rem; animation: fadeUp 0.45s ease-out; } .auth-card { width: 100%; max-width: 440px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 2.6rem 2.4rem 2.2rem; position: relative; overflow: hidden; } /* Hairline gold accent at the top — quiet identity cue */ .auth-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(to right, var(--gold), var(--gold-light)); } .auth-card .eyebrow { display: block; margin-bottom: 0.35rem; } .auth-card h1 { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--navy); margin-bottom: 0.75rem; } .auth-card__sub { color: var(--text-muted); font-size: 0.96rem; line-height: 1.55; margin-bottom: 1.6rem; } .auth-card__sub strong { color: var(--navy); font-weight: 500; } .auth-card__badge { font-size: 2.2rem; line-height: 1; margin-bottom: 1rem; } .auth-card__disclaimer { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: 0.84rem; color: var(--text-muted); } .auth-card__disclaimer a { color: var(--gold); font-weight: 500; } /* Form layout inside the auth card -------------------------- */ .auth-form { display: flex; flex-direction: column; gap: 0.45rem; } .auth-form .form-label { margin-bottom: 0.35rem; } .auth-form .form-input { margin-bottom: 1rem; } .auth-form .btn { margin-top: 0.2rem; } /* Mobile ---------------------------------------------------- */ @media (max-width: 540px) { .auth-card { padding: 2rem 1.6rem 1.8rem; } .auth-card h1 { font-size: 1.7rem; } } /* ───────────────────────────────────────────────────────────── /home — authenticated landing ═══════════════════════════════════════════════════════════════ */ .home-page { max-width: var(--max-w); margin: 0 auto; padding: 3rem 1.5rem 5rem; animation: fadeUp 0.45s ease-out; } .home-page > .eyebrow { display: block; margin-bottom: 0.4rem; } .home-page h1 { margin-bottom: 0.35rem; font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; } .home-page__sub { color: var(--text-muted); margin-bottom: 2.75rem; font-size: 0.97rem; } .home-page__sub code { background: var(--white); border: 1px solid var(--border); padding: 0.08rem 0.4rem; border-radius: var(--r); font-size: 0.88em; color: var(--navy); } /* Sections ----------------------------------------------------- */ .home-page__section { margin-bottom: 2.5rem; } .home-page__section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--border); } .home-page__section-head h2 { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; letter-spacing: -0.005em; color: var(--navy); } .home-page__section-head .count { font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); } /* Organisation tiles ------------------------------------------ */ .home-page__orgs { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.85rem; } .home-page__org { background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--r-lg); padding: 0.95rem 1.1rem; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 0.1rem 0.5rem; box-shadow: var(--sh-sm); transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; color: inherit; text-decoration: none; } .home-page__org:hover { box-shadow: var(--sh-md); transform: translateY(-1px); border-left-color: var(--gold-light); text-decoration: none; } .home-page__org-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--gold); font-size: 1.4rem; font-weight: 300; transition: transform 0.18s ease; font-family: var(--sans); } .home-page__org:hover .home-page__org-arrow { transform: translateX(3px); } .home-page__org-name { font-family: var(--serif); font-size: 1.18rem; color: var(--navy); line-height: 1.2; } .home-page__org-slug { font-size: 0.74rem; color: var(--text-muted); letter-spacing: 0.02em; } .home-page__org-slug code { background: transparent; padding: 0; font-size: inherit; } /* Assessments table ------------------------------------------- */ .home-page__assessments { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); } .home-page__assessments thead { background: var(--navy); } .home-page__assessments thead th { text-align: left; font-family: var(--sans); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.78); padding: 0.85rem 1.1rem; } .home-page__assessments tbody tr { border-top: 1px solid var(--border); transition: background 0.16s ease; } .home-page__assessments tbody tr:first-child { border-top: none; } .home-page__assessments tbody tr:hover { background: var(--gold-pale); } .home-page__assessments tbody tr.row-link { cursor: pointer; } /* Each cell wraps its own anchor (was just first-child). Widen the selectors so every cell anchor inherits the navy-on-hover-gold styling. */ .home-page__assessments tbody tr.row-link td a { color: var(--navy); text-decoration: none; } .home-page__assessments tbody tr.row-link:hover td a { color: var(--gold); } .home-page__assessments tbody td { padding: 0.85rem 1.1rem; font-size: 0.93rem; vertical-align: middle; } .home-page__assessments tbody td:first-child { font-family: var(--serif); font-size: 1.05rem; color: var(--navy); } .home-page__assessments tbody td:nth-child(2) { font-family: 'DM Mono', ui-monospace, SFMono-Regular, monospace; font-size: 0.82rem; color: var(--text-muted); letter-spacing: 0.02em; } .home-page__assessments tbody td:last-child { color: var(--text-muted); font-variant-numeric: tabular-nums; } /* CTA cluster ------------------------------------------------- */ .home-page__cta { display: flex; align-items: center; gap: 0.6rem; } .home-page__cta-note { font-size: 0.78rem; color: var(--text-muted); font-style: italic; } /* Placeholder (empty state) ----------------------------------- */ .home-page__placeholder { background: var(--white); border: 1px dashed var(--border-dark); border-radius: var(--r-lg); padding: 1.4rem 1.5rem; text-align: center; color: var(--text-muted); font-size: 0.94rem; } /* Footer-style row at the bottom of the page ----------------- */ .home-page__logout { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-start; } /* Status chips (Submission.state) ----------------------------- */ .state-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.7rem; border-radius: 999px; font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.04em; border: 1px solid; white-space: nowrap; } .state-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; } /* setup / waiting */ .state-chip--fetching_framework, .state-chip--ready_to_assess { background: var(--gold-pale); color: var(--amber); border-color: var(--amber-bdr); } /* in flight */ .state-chip--in_progress, .state-chip--signing_off { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bdr); } /* MAIA in the loop */ .state-chip--submitted_for_review, .state-chip--reviewed { background: rgba(14,28,47,0.06); color: var(--navy); border-color: var(--navy-400); } /* done */ .state-chip--completed { background: var(--green-bg); color: var(--green); border-color: var(--green-bdr); } /* failures */ .state-chip--failed_framework_fetch, .state-chip--failed_review, .state-chip--failed_output, .state-chip--failed_iap { background: var(--red-bg); color: var(--red); border-color: var(--red-bdr); } /* legacy single-drop states — neutral, AA-safe (navy on pale-navy). Without an explicit colour these fell through to the bare .state-chip base and inherited low-contrast muted text → axe color-contrast failures on /advisor. */ .state-chip--pending, .state-chip--uploading_dropbox, .state-chip--clickup_created, .state-chip--awaiting_maia, .state-chip--parsing, .state-chip--report_ready, .state-chip--emailed, .state-chip--iap_created, .state-chip--viewed { background: rgba(47, 60, 79, 0.06); color: var(--navy); border-color: var(--navy-400); } /* ───────────────────────────────────────────────────────────── /org/{slug}/ — organisation dashboard ═══════════════════════════════════════════════════════════════ */ .org-page { max-width: var(--max-w); margin: 0 auto; padding: 2rem 1.5rem 5rem; animation: fadeUp 0.45s ease-out; } .org-page__back { display: inline-block; margin-bottom: 1.6rem; font-size: 0.84rem; letter-spacing: 0.02em; color: var(--text-muted); } .org-page__back:hover { color: var(--gold); text-decoration: none; } .org-page__header { margin-bottom: 2.25rem; } .org-page__header h1 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; margin-top: 0.2rem; margin-bottom: 0.4rem; } .org-page__sub { color: var(--text-muted); font-size: 0.94rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .org-page__sub code { background: var(--white); border: 1px solid var(--border); padding: 0.08rem 0.4rem; border-radius: var(--r); font-size: 0.86em; color: var(--navy); } /* Role tags (admin/assessor/viewer/staff) --------------------- */ .role-tag { display: inline-block; padding: 0.16rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid; } .role-tag--admin { background: var(--gold-pale); color: var(--amber); border-color: var(--amber-bdr); } .role-tag--assessor { background: rgba(14,28,47,0.06); color: var(--navy); border-color: var(--navy-400); } .role-tag--viewer { background: var(--white); color: var(--text-muted); border-color: var(--border-dark); } .role-tag--staff { background: var(--navy); color: var(--gold); border-color: var(--navy); } /* Stats row --------------------------------------------------- */ .org-page__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.85rem; margin-bottom: 2.5rem; } .org-stat { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.2rem; box-shadow: var(--sh-sm); } .org-stat__num { font-family: var(--sans); font-size: 1.9rem; line-height: 1.05; color: var(--navy); font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; } .org-stat__label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); } .org-page__section { margin-bottom: 2.5rem; } /* Mobile ------------------------------------------------------ */ @media (max-width: 640px) { .home-page { padding: 2rem 1rem 4rem; } .home-page h1 { font-size: 2rem; } .org-page { padding: 1.5rem 1rem 4rem; } .org-page h1 { font-size: 2rem; } .org-page__stats { grid-template-columns: repeat(2, 1fr); } .org-stat__num { font-size: 1.7rem; } .home-page__assessments thead { display: none; } .home-page__assessments tbody td { display: block; padding: 0.4rem 1rem; } .home-page__assessments tbody td:first-child { padding-top: 0.9rem; } .home-page__assessments tbody td:last-child { padding-bottom: 0.9rem; } .home-page__assessments tbody tr { display: block; } .home-page__section-head { flex-direction: column; align-items: flex-start; gap: 0.2rem; } } /* ─── Org toolbar (admin: Manage members) ───────────────── */ .org-page__toolbar { display: flex; gap: 0.6rem; margin: -0.6rem 0 1.4rem; flex-wrap: wrap; } /* ─── Members page ──────────────────────────────────────── */ .members-list { margin-bottom: 2.5rem; } .members-table tbody tr td:first-child { width: 22%; } .members-table .role-tag { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; background: rgba(14, 28, 47, 0.07); color: var(--brand-primary); } .members-table .role-tag--admin { background: rgba(200, 151, 58, 0.18); color: #6b4d18; } .members-table .role-tag--viewer { background: rgba(14, 28, 47, 0.04); color: var(--text-muted); } .members-invite { margin-top: 1.5rem; } .invite-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto; gap: 0.9rem 1rem; align-items: end; background: #fff; padding: 1.25rem 1.4rem; border: 1px solid rgba(14, 28, 47, 0.08); border-radius: 6px; box-shadow: 0 1px 3px rgba(14, 28, 47, 0.04); } .invite-form .btn { white-space: nowrap; } .members-invite__note { margin-top: 0.6rem; font-size: 0.84rem; color: var(--text-muted); } .review-submit__note--small { font-size: 0.82rem; margin-top: 0.6rem; } @media (max-width: 720px) { .invite-form { grid-template-columns: 1fr; } } /* ─── Advisor dashboard ────────────────────────────────── */ body.advisor-area { background: linear-gradient(180deg, #f4efe6 0%, #f7f4ef 280px); } .advisor-page { max-width: 1180px; margin: 0 auto; padding: 3rem 2rem 5rem; } .advisor-page__header { margin-bottom: 2.5rem; } .advisor-page__header h1 { font-family: var(--brand-display-font); font-size: 2.5rem; margin: 0.4rem 0 0.6rem; color: var(--brand-primary); } .advisor-page__sub { color: var(--text-muted); max-width: 60ch; } .advisor-page__h2 { font-family: var(--brand-display-font); font-size: 1.4rem; color: var(--brand-primary); margin: 0 0 1rem; } .advisor-page__stats { margin-bottom: 3rem; } .advisor-orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .advisor-org { display: block; text-decoration: none; background: #fff; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid rgba(14, 28, 47, 0.08); border-radius: 6px; border-left: 3px solid var(--brand-accent); transition: transform 0.18s ease, box-shadow 0.18s ease; } .advisor-org:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(14, 28, 47, 0.08); } .advisor-org__name { display: block; font-family: var(--brand-display-font); font-size: 1.25rem; color: var(--brand-primary); margin-bottom: 0.15rem; } .advisor-org__slug { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.7rem; } .advisor-org__stats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.85rem; color: var(--text-muted); } .advisor-org__stats strong { color: var(--brand-primary); font-weight: 600; } .advisor-org__failed strong { color: #b54321; } .advisor-org__clickup strong { color: #6b4d18; } .advisor-page__recent { margin-bottom: 2.5rem; } .advisor-link { font-size: 0.85rem; /* --brand-accent (#dcaa6b) fails WCAG AA on white (~2.0:1). --gold-deep (#8a4d00, ~7.1:1) is the AA-safe gold for text on light surfaces — see the :root token note + DESIGN.md. Fixes the bulk of the axe contrast errors flagged across the advisor tables. */ color: var(--gold-deep); text-decoration: none; font-weight: 600; } .advisor-link:hover { color: var(--brand-primary); } .advisor-page__switch { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(14, 28, 47, 0.08); } @media (max-width: 640px) { .advisor-page { padding: 1.8rem 1rem 4rem; } .advisor-page__header h1 { font-size: 1.85rem; } } /* ─── Branded error pages ─────────────────────────────────────── */ .error-page { max-width: 640px; margin: 6rem auto 4rem; padding: 0 1.5rem; text-align: center; } .error-page__code { display: inline-block; font-family: var(--brand-display-font); font-size: 4.5rem; font-weight: 600; /* var(--brand-accent) #dcaa6b on white was 2.3:1 — fails even the relaxed 3:1 large-text threshold. --gold-deep #8a4d00 lifts to ~7.1:1. */ color: var(--gold-deep); letter-spacing: -0.02em; line-height: 1; margin-bottom: 1rem; } .error-page__heading { font-family: var(--brand-display-font); font-size: 2.1rem; font-weight: 500; color: var(--brand-primary); margin: 0 0 0.9rem; line-height: 1.18; } .error-page__body { font-size: 1.06rem; color: #4a5360; line-height: 1.55; margin: 0 auto 2rem; max-width: 480px; } .error-page__actions { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; } .error-page__detail { font-size: 0.85rem; /* #8c95a3 was 2.68:1 on #f4f1ec — fails AA. #586374 lifts to ~5.4:1. */ color: #586374; font-family: ui-monospace, 'SF Mono', Menlo, monospace; background: #f4f1ec; display: inline-block; padding: 0.5rem 0.85rem; border-radius: 4px; margin: 0; } @media (max-width: 640px) { .error-page { margin-top: 3rem; padding: 0 1rem; } .error-page__code { font-size: 3.4rem; } .error-page__heading { font-size: 1.65rem; } .error-page__actions .btn { width: 100%; } } /* ─── Failure-state recovery banner on wizard overview ────────── */ .failure-banner { display: flex; gap: 1.2rem; align-items: flex-start; background: #fdf1ec; border: 1px solid #e8b8a5; border-left: 4px solid #c45c2e; border-radius: 8px; padding: 1.25rem 1.4rem; margin: 1.2rem 0 1.6rem; } .failure-banner__icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #c45c2e; color: #fff; font-family: var(--brand-display-font); font-weight: 600; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; line-height: 1; } .failure-banner__body { flex: 1 1 auto; min-width: 0; } .failure-banner__heading { font-family: var(--brand-display-font); font-size: 1.3rem; font-weight: 500; color: #7a2f0c; margin: 0 0 0.4rem; line-height: 1.25; } .failure-banner__copy { font-size: 0.98rem; color: #5a3a2a; line-height: 1.5; margin: 0 0 1rem; } .failure-banner__detail { margin: 0 0 1rem; font-size: 0.85rem; } .failure-banner__detail summary { cursor: pointer; color: #7a2f0c; font-weight: 500; margin-bottom: 0.4rem; } .failure-banner__detail pre { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.78rem; background: #fff; padding: 0.6rem 0.8rem; border-radius: 4px; border: 1px solid #e8d5c6; white-space: pre-wrap; word-break: break-word; max-height: 180px; overflow-y: auto; margin: 0; } .failure-banner__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; } @media (max-width: 640px) { .failure-banner { flex-direction: column; padding: 1rem 1.1rem; } .failure-banner__icon { width: 32px; height: 32px; font-size: 1.2rem; } } /* ─── Login form: error band + inline validation ──────────────── */ .form-error-band { background: #fdecec; border: 1px solid #e8a3a3; border-left: 4px solid #c0392b; color: #7a2424; border-radius: 6px; padding: 0.65rem 0.95rem; font-size: 0.95rem; line-height: 1.45; margin: 0 0 1rem; } .form-input--error { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); } /* ─── Login_sent: hints list + resend button ─────────────────── */ .auth-card__hints { list-style: none; padding: 0; margin: 0 0 1.2rem; text-align: left; font-size: 0.92rem; color: #4a5360; } .auth-card__hints li { position: relative; padding: 0.25rem 0 0.25rem 1.3rem; line-height: 1.4; } .auth-card__hints li::before { content: "•"; color: var(--brand-accent); position: absolute; left: 0.45rem; font-weight: 700; } .auth-card__hints code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85em; background: #f4f1ec; padding: 0.05rem 0.35rem; border-radius: 3px; } .auth-card__resend { margin: 0 0 0.8rem; display: flex; justify-content: center; } /* ─── Wizard: save flash + last-saved + global progress ───────── */ .save-flash { background: #ecf6ed; border: 1px solid #b4d8b8; border-radius: 6px; padding: 0.55rem 0.9rem; margin: 1rem 0 1.2rem; font-size: 0.92rem; color: #2d5836; display: inline-flex; align-items: center; gap: 0.55rem; } .save-flash__check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #4a8a55; color: #fff; border-radius: 50%; font-size: 0.7rem; font-weight: 700; } .eyebrow__dim { /* #8b8074 on white was 3.7:1 — fails AA body 4.5:1. #6b6358 lifts to ~5.6:1 while keeping the warm-gray character (the tagline sits next to the gold-deep eyebrow so a navy-toned --text-muted would clash). */ color: #6b6358; font-weight: 400; margin-left: 0.35rem; } .wizard-req-page__progress { height: 4px; background: #ece6dc; border-radius: 2px; overflow: hidden; margin: 0.7rem 0 1.1rem; } .wizard-req-page__progress-bar { height: 100%; background: var(--brand-accent); border-radius: 2px; transition: width 0.4s ease; } .wizard-req-page__save { display: inline-flex; align-items: center; gap: 0.85rem; } .last-saved { font-size: 0.85rem; color: #6f7785; font-style: italic; } .last-saved time { font-style: normal; font-weight: 500; color: #4a5360; } /* Autosave status pill — sits next to the Save button, flips between "Saving…" while the submit POST is in flight and "Saved ✓" once the server has rendered the next page. Fades out 2s after a save. */ .autosave-status { font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem; border-radius: 999px; background: #f4f6f8; color: #4a5360; opacity: 0; transform: translateY(2px); transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; } .autosave-status[data-state="saving"], .autosave-status[data-state="saved"] { opacity: 1; transform: translateY(0); } .autosave-status[data-state="saving"] { background: #fff7e0; color: #7a5d12; } .autosave-status[data-state="saved"] { background: #ecf6ed; color: #2d5836; } .autosave-status[data-state="idle-faded"] { opacity: 0; transform: translateY(2px); transition: opacity 600ms ease, transform 600ms ease; } .autosave-status__check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--gold, #c5a572); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } .autosave-status[data-state="saving"] .autosave-status__check { background: #d6b25a; /* tiny pulse while in flight */ animation: autosave-pulse 900ms ease-in-out infinite; } .autosave-status[data-state="saving"] .autosave-status__check::before { content: "…"; font-size: 12px; } .autosave-status[data-state="saving"] .autosave-status__check { /* hide the static ✓ glyph during saving by overlaying the ::before */ color: transparent; } @keyframes autosave-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .autosave-status, .autosave-status[data-state="idle-faded"] { transition: none; } .autosave-status[data-state="saving"] .autosave-status__check { animation: none; } } @media (max-width: 640px) { .eyebrow__dim { display: block; margin-left: 0; margin-top: 0.15rem; } .wizard-req-page__save { flex-direction: column; align-items: stretch; gap: 0.5rem; } .last-saved { text-align: center; } .autosave-status { align-self: center; } } /* ─── Polish batch (round 3) ─────────────────────────────────── */ /* #17 Sign out in nav */ .nav-logout { margin-left: auto; } .nav-logout__btn { background: none; border: 1px solid rgba(247, 244, 239, 0.32); color: #f7f4ef; font-family: var(--brand-body-font); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.32rem 0.85rem; border-radius: 4px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .nav-logout__btn:hover { border-color: var(--brand-accent); background: rgba(200, 151, 58, 0.12); } /* #21 Mobile nav cramping */ @media (max-width: 640px) { .site-nav { padding: 0.65rem 0.95rem; gap: 0.6rem; } .nav-product { font-size: 0.65rem; letter-spacing: 0.06em; max-width: 8em; text-align: right; } .nav-logout__btn { font-size: 0.7rem; padding: 0.28rem 0.6rem; } } @media (max-width: 480px) { .nav-product { display: none; } } /* #11 Mobile responsive table — stacked card layout */ @media (max-width: 640px) { .responsive-table thead { display: none; } .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; } .responsive-table tr { border: 1px solid #e8e0d2; border-radius: 8px; margin-bottom: 0.85rem; background: #fff; padding: 0.4rem 0.85rem; box-shadow: 0 1px 0 rgba(14, 28, 47, 0.03); } .responsive-table td { padding: 0.45rem 0; border-bottom: 1px dashed #ece6dc; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; } .responsive-table td:last-child { border-bottom: none; } .responsive-table td::before { content: attr(data-label); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: #8b8074; font-weight: 600; text-align: left; } .responsive-table td a { text-align: right; } .responsive-table .row-link__cell { font-weight: 600; } } /* #19 First-time invitee onboarding callout */ .onboarding-callout { display: flex; gap: 1rem; align-items: flex-start; background: linear-gradient(135deg, #fdfaf3 0%, #f7eedb 100%); border: 1px solid #e7d4a6; border-left: 4px solid var(--brand-accent); border-radius: 10px; padding: 1.1rem 1.3rem; margin: 1.4rem 0 1.6rem; } .onboarding-callout__icon { font-size: 1.6rem; line-height: 1; } .onboarding-callout__body { flex: 1; min-width: 0; } .onboarding-callout__body h2 { font-family: var(--brand-display-font); font-size: 1.35rem; font-weight: 500; margin: 0 0 0.45rem; color: var(--brand-primary); } .onboarding-callout__body p { margin: 0 0 0.55rem; font-size: 0.95rem; line-height: 1.55; color: #4a5360; } .onboarding-callout__body p:last-child { margin-bottom: 0; } @media (max-width: 640px) { .onboarding-callout { flex-direction: column; padding: 1rem 1.1rem; } } /* #20 Legacy v1 upload rows in advisor */ .legacy-row td { /* #8b8074 failed WCAG AA (~3.7:1) on white and worse on the cream legacy gradient. #6b5b45 keeps the de-emphasised warm/muted look at ~5.7:1. */ color: #6b5b45; font-style: italic; } .legacy-row .state-chip { font-style: normal; } .legacy-row em { font-style: italic; } .advisor-link--muted { /* #b8aea0 was 2.19:1 on white — fails AA. #6f6354 lifts to ~4.6:1 while keeping the muted/disabled look. */ color: #6f6354; cursor: not-allowed; font-style: italic; } /* #12 Read-only viewer styling */ .wizard-req-page__write-note { background: #fdf3e8; border: 1px solid #e8c79f; border-left: 3px solid var(--brand-accent); border-radius: 6px; padding: 0.7rem 0.95rem 0.7rem 2.4rem; margin: 0 0 1rem; font-size: 0.92rem; color: #6b4f1c; position: relative; } .wizard-req-page__write-note::before { content: "🔒"; position: absolute; left: 0.85rem; top: 0.55rem; font-size: 1.1rem; } .rating-pill input[disabled] + span, .form-input[disabled], textarea.form-input[disabled] { background: #f0ece5; /* #8b8074 was 3.28:1 on #f0ece5 — disabled state is technically exempt but axe still flags it. #5c5347 lifts to ~6.3:1. */ color: #5c5347; border-color: #e0d6c4; cursor: not-allowed; position: relative; } .rating-pill input[disabled] + span { opacity: 0.7; background: #ece6dc; } /* #15 Save draft and exit */ .link-button { background: none; border: 0; padding: 0; font: inherit; /* brand-accent (gold) was 2.10:1 on white — fails AA. Brand primary (navy) gives 11.17:1 — same affordance via underline. */ color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .link-button:hover { color: var(--navy-800); } .wizard-req-page__exit { font-size: 0.85rem; color: #6f7785; margin: 1.1rem 0 0; text-align: right; } /* #14 + #22 Per-role sign-off URL display + Copy button */ .signoff-role--just-issued { border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(200, 151, 58, 0.12); } .signoff-issued { background: #fdf6e9; border: 1px solid #e7d4a6; border-radius: 6px; padding: 0.85rem 1rem; margin: 0.6rem 0 0.85rem; } .signoff-issued__head { margin: 0 0 0.6rem; font-size: 0.92rem; color: #4a3a18; } .signoff-issued__head code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85em; background: #fff; padding: 0.05rem 0.4rem; border-radius: 3px; border: 1px solid #e7d4a6; } .signoff-issued__url-row { display: flex; gap: 0.5rem; align-items: stretch; margin-bottom: 0.5rem; } .signoff-issued__url { flex: 1; min-width: 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.82rem; background: #fff; } .signoff-issued__copy { flex-shrink: 0; white-space: nowrap; } .signoff-issued__note { font-size: 0.78rem; color: #6b5a32; margin: 0; line-height: 1.45; } @media (max-width: 640px) { .signoff-issued__url-row { flex-direction: column; } .signoff-issued__copy { width: 100%; } } /* #13 Members management — inline role select, actions, status banners */ .status-banner { border-radius: 6px; padding: 0.7rem 1rem; margin: 1rem 0 1.2rem; font-size: 0.95rem; line-height: 1.45; } .status-banner--success { background: #ecf6ed; border: 1px solid #b4d8b8; border-left: 3px solid #4a8a55; color: #2d5836; } .self-tag { display: inline-block; /* gold + #fff was 2.10:1 — fails AA. Navy + white = 11.17:1. */ background: var(--brand-primary); color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 3px; margin-left: 0.45rem; vertical-align: middle; } .form-input--inline { display: inline-block; width: auto; min-width: 120px; padding: 0.32rem 0.55rem; font-size: 0.85rem; } .member-role-form, .member-action-form { display: inline-block; margin: 0; } .member-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .btn-xs { font-size: 0.78rem; padding: 0.32rem 0.7rem; } .btn-danger-outline { background: none; border: 1px solid #d99898; color: #a13838; border-radius: 4px; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .btn-danger-outline:hover { background: #fdecec; border-color: #c0392b; } @media (max-width: 640px) { .member-actions { justify-content: flex-end; } .form-input--inline { width: 100%; max-width: 200px; } } /* ── Breadcrumb (wizard + org pages) ─────────────────────────── */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; font-family: var(--sans); font-size: 0.85rem; color: var(--text-muted); margin: 1rem 0 1.4rem; line-height: 1.4; } .breadcrumb a { color: var(--text-muted); text-decoration: none; padding: 4px 2px; border-radius: 0; min-height: 24px; display: inline-flex; align-items: center; } .breadcrumb a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; } .breadcrumb__sep { color: var(--text-light); user-select: none; } .breadcrumb [aria-current="page"] { color: var(--navy); font-weight: 600; padding: 4px 2px; } /* ── Wizard exit note ───────────────────────────────────────── */ /* Sits below the Save-draft-and-exit button (now a real .btn btn-outline, not a thin text link). The descriptive sentence is its own block so it never collides with the button's hit area. */ .wizard-req-page__exit { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: 1.2rem; } .wizard-req-page__exit-note { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; } /* ── /home: Download .docx CTA on completed assessment rows ────── */ .home-page__actions-col { width: 1%; white-space: nowrap; } .home-page__actions-cell { text-align: right; } .home-page__download { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 36px; padding: 6px 12px; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--navy); background: transparent; border: 1.5px solid var(--navy); text-decoration: none; white-space: nowrap; } .home-page__download:hover { background: var(--navy); color: var(--white); text-decoration: none; }