/* ========================================================================== RA Design System — cascade layer (module 40-design-system.php) Audit 2026-09-01: visual-design #1 #2 #3 #5 #7 #8 #9 #10 #19 · accessibility #1 #4 #19 #21 Printed as the LAST tag in (after CrocoBuilder's compiled sheets and every module's inline block) so equal-specificity ties resolve in its favour. It edits no other file: the accessible tokens (§2) and the class aliases (§5) make the existing button/tag/text families inherit the fixes; the canonical components (§6) are new classes for surfaces to adopt. Rules of the file - Light palette lives on bare :root (theme-ready). No dark block yet — see §7. - !important appears ONLY in §3 (focus, must beat 102 `outline:none`), §4 (reduced motion) and on the background of the primary-button alias (§5.1, must beat body-inline styles). - Never restyle geometry of legacy classes (no padding/size changes) — colour and radius only. ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONTS — self-hosted, latin subset, variable weight files (visual #1) Source Sans 3 covers wght 200–900 (spec needs 400/600/700/800); Roboto 100–900 (400/500/700). The token stack names "Source Sans Pro" first, so that name is declared as an alias of the same file. Fallback faces carry the web font's vertical metrics (ascent/descent computed from the files with fontTools) so the swap does not move the line boxes. -------------------------------------------------------------------------- */ @font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: local("Source Sans 3"), local("SourceSans3-Regular"), url("../fonts/source-sans-3-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 200 900; font-display: swap; src: local("Source Sans Pro"), local("SourceSansPro-Regular"), url("../fonts/source-sans-3-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Metric-adjusted fallbacks (Arial / Helvetica): line-box height matches the web font. */ @font-face { font-family: "Source Sans 3 Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); ascent-override: 102.40%; descent-override: 40.00%; line-gap-override: 0%; size-adjust: 100%; } @font-face { font-family: "Roboto Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); ascent-override: 92.77%; descent-override: 24.41%; line-gap-override: 0%; size-adjust: 100.32%; } /* -------------------------------------------------------------------------- 2. TOKENS (visual #2 #6 #7 #8; a11y #1) — additive to the CrocoBuilder :root block. Existing tokens are NOT redefined except the two whose ONLY job is text/hover ink: --ra-muted #7A7A7A (4.29:1) → #667085 (4.97:1). 0 background uses in the plugin. --ra-primary-deep #0087B8 (4.07:1) → #0A6F97 (5.62:1). Used 298× as text colour, 44× as a button fill, 8× as border — every one of those becomes AA. --ra-primary #05A2DB is untouched: it stays the brand colour for large decorative fills and the navy sidebar accent (6.2:1 on navy), exactly as the audit asked. -------------------------------------------------------------------------- */ :root { color-scheme: light; /* accessible action colour for filled buttons and links on light backgrounds */ --ra-action: #0A6F97; /* white on it 5.62:1 · on white 5.62:1 */ --ra-action-hover: #005E7C; /* = --ra-teal */ --ra-action-tint: #E6F5FB; /* text scale */ --ra-text: #14181C; --ra-text-2: #667085; /* 4.97:1 — body-size secondary text */ --ra-text-3: #8A94A6; /* 3.06:1 — ONLY ≥ 18px or decorative */ --ra-muted: #667085; /* redefined: the muted token now passes AA */ --ra-primary-deep: #0A6F97; /* redefined: deep = ink variant, passes AA */ /* lines */ --ra-line-strong: #B9C3CC; /* 3:1 non-text boundary for inputs/controls */ /* semantic colours, defined once (were used but undefined) */ --ra-success: #1E7B4B; --ra-success-tint: #EAF7F0; --ra-warning: #8A5A00; --ra-warning-tint: #FFF7E6; --ra-danger: #B42318; --ra-danger-tint: #FDECEC; --ra-info: #0A6F97; --ra-info-tint: #E6F5FB; /* surfaces: one sunk value (was 12 different fallbacks) */ --ra-surface-sunk: #F4F4F4; --ra-sunk: #F4F4F4; /* radius scale — sm/md/lg keep their CrocoBuilder values on purpose: the 18 live users of --ra-radius-lg are cards/panels the spec wants at md; covers get their own token. */ --ra-radius-pill: 999px; --ra-radius-media: 10px; /* shadows */ --ra-shadow-1: 0 1px 2px rgba(0,18,66,.06); --ra-shadow-2: 0 8px 24px rgba(10,29,70,.14); --ra-shadow-3: 0 24px 60px rgba(10,29,70,.30); /* spacing */ --ra-space-1: 4px; --ra-space-2: 8px; --ra-space-3: 12px; --ra-space-4: 16px; --ra-space-5: 24px; --ra-space-6: 32px; --ra-space-7: 48px; /* type scale */ --ra-fs-1: 11px; --ra-fs-2: 12px; --ra-fs-3: 13px; --ra-fs-4: 14px; --ra-fs-5: 16px; --ra-fs-6: 20px; --ra-fs-7: 24px; --ra-fs-8: 32px; --ra-fs-hero: 48px; /* font stacks with the metric fallbacks in place */ --ra-font-display: "Source Sans Pro", "Source Sans 3", "Source Sans 3 Fallback", -apple-system, "Segoe UI", sans-serif; --ra-font-accent: Roboto, "Roboto Fallback", -apple-system, "Segoe UI", sans-serif; } /* v1.399.0: account state and management layout. Keep the legacy anchor nodes for their existing action injectors, but expose only the canonical stats component. */ body:not(.wp-admin) .cb-ad_strow, body:not(.wp-admin) .cb-ad_hb_courses, body:not(.wp-admin) .cb-ad_hb_events { display:none !important; } .cb-mpx_sec1:has(.cb-mpx_loop1 .cb-collection__items > *) .cb-mpx_empty { display:none; } .cb-mpx_empty { background:var(--ra-surface,white); } @media (max-width:767px) { body.page-id-243 .ra-ua--dashhead { padding:0 0 12px; } body.page-id-243 .ra-ua--dashhead .ra-ua-coverwrap { display:block; margin:0; } body.page-id-243 .ra-ua--dashhead .ra-ua-cover { height:120px; border-radius:var(--ra-radius-md,6px); } body.page-id-243 .ra-ua--dashhead .ra-ua-head2 { gap:12px; margin:0; padding:0; border:0; } body.page-id-243 .ra-ua--dashhead .ra-ua-av { width:56px; height:56px; border-width:2px; } body.page-id-243 .ra-ua--dashhead .ra-ua-headtxt { margin-top:0; flex:1 1 170px; } body.page-id-243 .ra-ua--dashhead .ra-ua-name { font-size:20px; } body.page-id-243 .ra-ua--dashhead .ra-ua-avwrap { margin-top:-24px; } body.page-id-243 .ra-ua--dashhead .ra-ua-headtxt { padding-top:8px; } body.page-id-243 .ra-ua--dashhead { padding-bottom:0!important; } body.page-id-243 .cb-db_dash { row-gap:10px!important; } body.page-id-243 .cb-db_head { margin:0!important; padding:0!important; } body.page-id-243 .cb-db_clh { margin-top:0!important; margin-bottom:0!important; } body.page-id-243 .ra-ua--dashhead .ra-ua-meta { display:flex; grid-column:1/-1; grid-row:2; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin-top:4px; font-size:12px; } body.page-id-243 .ra-ua--dashhead .ra-ua-meta .ra-pe-edit { text-align:left; justify-content:flex-start; padding-left:0; } body.page-id-243 .ra-ua--dashhead .ra-ua-acts { position:static!important; top:auto!important; right:auto!important; flex:0 0 100%!important; display:flex!important; flex-direction:row!important; justify-content:flex-end!important; gap:8px!important; margin:8px 0 0!important; padding:0!important; } body.page-id-243 .ra-ua--dashhead .ra-ua-acts > .cb-db_hbell { margin-left:0!important; } body.page-id-243 .ra-ua--dashhead .ra-ua-acts > .ra-ua-share { margin-left:0!important; margin-right:0!important; flex:0 0 auto!important; } body.page-id-243 .ra-ua--dashhead .ra-ua-head2 { display:grid; grid-template-columns:56px minmax(0,1fr) 80px; gap:8px; align-items:center; padding:10px 6px 0 0; } body.page-id-243 .ra-ua--dashhead .ra-ua-headtxt { display:contents; } body.page-id-243 .ra-ua--dashhead .ra-ua-namewrap { padding-right:0; grid-column:2; grid-row:1; min-width:0; } body.page-id-243 .ra-ua--dashhead .ra-ua-acts { flex-basis:auto!important; margin:0!important; align-items:center!important; grid-column:3; grid-row:1; } body.page-id-243 .cb-db_dash { display:flex; flex-direction:column; } body.page-id-243 .cb-db_head { order:0; } body.page-id-243 .cb-db_clh { order:1; } body.page-id-243 .cb-db_cl { order:2; } body.page-id-243 .cb-db_cl_hint { order:3; } body.page-id-243 .cb-db_quick { order:4; } body.page-id-243 .cb-db_evh { order:5; } body.page-id-243 .cb-db_ev { order:6; } body.page-id-243 .cb-db_ev_hint { order:7; } body.page-id-243 .cb-db_certbar { order:10; } body.page-id-243 .cb-db_dash > .ra-rec { order:9; } body:not(.wp-admin) .cb-ad_hrow { flex-direction:column !important; align-items:stretch !important; gap:12px; } body:not(.wp-admin) .cb-ad_hbtns { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); width:100% !important; max-width:none !important; min-width:0; gap:8px !important; } body:not(.wp-admin) .cb-ad_hbtns > * { min-width:0; max-width:100%; white-space:normal; min-height:44px; } } /* Unstyled text inherits the RA display face instead of WordPress' system stack (visual #1). */ body:not(.wp-admin) { font-family: var(--ra-font-display); -webkit-font-smoothing: antialiased; } /* -------------------------------------------------------------------------- 3. Quiet focus — retain the control's border and selected background treatments. v1.399.22 (site review, UI-1): this block used to match :focus, with !important at triple-:root specificity, in the last stylesheet in . That matches KEYBOARD focus too, so it silently removed the focus ring from every element on every page — including the skip link, which is the first thing a keyboard user reaches — and it also beat this file's own .ra-btn:focus-visible ring, which is not !important. Verified with real Tab presses: nine consecutive stops on three pages, every one reporting :focus-visible with no outline and no shadow. That is a WCAG 2.4.7 (AA) failure site-wide and it makes the product unusable without a mouse. The intent — a quiet UI for mouse users — is kept exactly, by scoping the reset to :focus:not(:focus-visible). Nothing changes for a pointer; keyboard focus now draws one ring. -------------------------------------------------------------------------- */ :root:root:root :focus:not(:focus-visible) { outline: none !important; outline-offset: 0 !important; box-shadow: none !important; } :focus-visible { outline: 2px solid var(--ra-action, #0A6F97) !important; outline-offset: 2px !important; } /* v1.398.824: quiet form/search focus. The global keyboard ring above is useful on links and commands, but it reads as a heavy blue rectangle inside text fields, search panels and dropdowns. Inputs keep their layout and native behavior; focus is shown through the existing field surface/border instead of an outline box. */ :root:root :where(input[type="search"], input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], select, textarea, [contenteditable="true"]):focus, :root:root :where(input[type="search"], input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], select, textarea, [contenteditable="true"]):focus-visible { outline: 0 !important; box-shadow: none !important; } :root:root :where(input[type="search"], input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], select, textarea):focus { border-color: var(--ra-line-strong, #B9C2CF) !important; } :root:root #ra-msearch .ra-ms-input:focus, :root:root #ra-msearch .ra-ms-input:focus-visible, :root:root #ra-msearch .ra-ms-field:focus-within, :root:root #ra-as .ra-as-in:focus, :root:root #ra-as .ra-as-in:focus-visible, :root:root #ra-as .ra-as-sw:focus-within, :root:root .ra-ssel__btn:focus, :root:root .ra-ssel__btn:focus-visible, :root:root .ra-ssel.is-open .ra-ssel__btn, :root:root .ra-ssel__search:focus, :root:root .ra-ssel__search:focus-visible { outline: 0 !important; box-shadow: none !important; } :root:root #ra-msearch .ra-ms-field:focus-within, :root:root #ra-as .ra-as-sw:focus-within { background: #F1F3F6; } /* -------------------------------------------------------------------------- 4. REDUCED MOTION (a11y #19) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 5. ALIASES — the existing class families inherit the accessible tokens -------------------------------------------------------------------------- */ /* 5.1 Primary (filled cyan, white text — 2.92:1) → --ra-action (5.62:1). Class list measured on 8 screens × 3 roles (impl/work/b1-design/recon.json): every element whose computed background was #05A2DB / #4BA3DB with white text. Not applied inside wp-admin (the settings door has its own mono palette) and not to disabled states. */ body:not(.wp-admin) .btn:not(.btn--ghost):not(.btn--ghost-light):not(.btn--outline):not(:disabled), body:not(.wp-admin) .cb-hd_cta:not(:disabled), body:not(.wp-admin) .cb-hm_hero_btns_b0:not(:disabled), body:not(.wp-admin) .jet-form-builder__action-button:not(:disabled), body:not(.wp-admin) .ra-pg__btn.is-on, body:not(.wp-admin) .ra-pg__btn.is-active, body:not(.wp-admin) .ra-tr-btn:not(:disabled), body:not(.wp-admin) .ra-st-donebtn:not(:disabled), body:not(.wp-admin) .ra-sbar__btn--next, body:not(.wp-admin) .ra-pe-avbtn, body:not(.wp-admin) .ra-ua-share:not(:disabled), body:not(.wp-admin) .ra-hl-edsave:not(:disabled), body:not(.wp-admin) .ra-sh-tab.is-active, body:not(.wp-admin) .ra-sh-save:not(:disabled), /* second pass — every remaining white-on-cyan element found by a whole-DOM scan of 14 screens (impl/work/b1-design/residual.mjs). Avatars (.ra-person-av, .ra-ua-av) are decorative fills and stay. */ body:not(.wp-admin) .rcl-go, body:not(.wp-admin) .rcc-verify, body:not(.wp-admin) .ra-cq2-open, body:not(.wp-admin) .cb-mgr_bco, body:not(.wp-admin) .cb-mgr_bev, body:not(.wp-admin) .adm_create, body:not(.wp-admin) .adm_create_ev, body:not(.wp-admin) .ra-pg-new:not(:disabled), body:not(.wp-admin) .ra-pg-sw.is-on, body:not(.wp-admin) .ra-anc-btn:not(:disabled), body:not(.wp-admin) .ra-share-native, body:not(.wp-admin) .ra-st-dl, body:not(.wp-admin) .ra-lsp-badge, body:not(.wp-admin) .ra-nav-current { background-color: var(--ra-action) !important; border-color: var(--ra-action) !important; color: #FFFFFF !important; } body:not(.wp-admin) .rcl-go:hover, body:not(.wp-admin) .rcc-verify:hover, body:not(.wp-admin) .ra-cq2-open:hover, body:not(.wp-admin) .cb-mgr_bco:hover, body:not(.wp-admin) .cb-mgr_bev:hover, body:not(.wp-admin) .adm_create:hover, body:not(.wp-admin) .adm_create_ev:hover, body:not(.wp-admin) .ra-pg-new:hover, body:not(.wp-admin) .ra-anc-btn:hover, body:not(.wp-admin) .ra-share-native:hover, body:not(.wp-admin) .ra-st-dl:hover { background-color: var(--ra-action-hover) !important; border-color: var(--ra-action-hover) !important; } body:not(.wp-admin) .btn:not(.btn--ghost):not(.btn--ghost-light):not(.btn--outline):not(:disabled):hover, body:not(.wp-admin) .cb-hd_cta:hover, body:not(.wp-admin) .cb-hm_hero_btns_b0:hover, body:not(.wp-admin) .jet-form-builder__action-button:not(:disabled):hover, body:not(.wp-admin) .ra-tr-btn:hover, body:not(.wp-admin) .ra-st-donebtn:not(:disabled):hover, body:not(.wp-admin) .ra-sbar__btn--next:hover, body:not(.wp-admin) .ra-pe-avbtn:hover, body:not(.wp-admin) .ra-ua-share:hover, body:not(.wp-admin) .ra-hl-edsave:hover, body:not(.wp-admin) .ra-sh-save:hover { background-color: var(--ra-action-hover) !important; border-color: var(--ra-action-hover) !important; } /* 5.1b One filled button per dialog (visual #4): the course drawer/popup footer showed a filled "Save course" next to a filled "Save & plan →" (cyan 2.92:1 / navy). The audit's rule is that the second action is outline, so "Save & plan" becomes the secondary emphasis by cascade: white, --ra-line-strong border, navy text (18:1). Still fully visible and clickable; only emphasis changes. */ body:not(.wp-admin) .ra-cf-saveplan { background-color: #FFFFFF !important; border: 1px solid var(--ra-line-strong) !important; color: var(--ra-navy) !important; } body:not(.wp-admin) .ra-cf-saveplan:hover { background-color: var(--ra-surface-sunk) !important; border-color: var(--ra-navy) !important; } /* 5.2 Secondary text — #7A7A7A (4.29:1) and #8A94A6 (3.06:1) → --ra-text-2 (4.97:1). The token redefinition above catches every `var(--ra-muted)` user; these are the classes that carried the hex literally (measured). No !important: state variants (warn/ok) must still win. */ .ra-stsub, .ra-ut-wait, .ra-enr, .ra-hl-cant, .ra-sx-i, .ra-tr-eloc, .ra-bx-cnt, .ra-ms-hint, .ra-lnx-meta, .ra-bs-url, .ra-cm-empty, .ra-cm-cnt, .ra-cm-minel, .ra-cm-clear, .ra-cm-lcount, .ra-team-lbl, .ra-navord__seclbl, .ra-navset__hcol, .ra-navset__seclbl, .ra-cs-prev--empty, .ra-lsp-lm, .ra-imgdz-s, .cb-adm_ra_topic, .cb-cs_lr_mx, .cb-hm_np_d, .cb-adm_tc_published, .cb-ad_st_members_l, .cb-ad_st_members_h, .cb-ad_st_teachers_l, .cb-ad_st_students_l { color: var(--ra-text-2); } /* the "Unlisted" pill (2.88:1) and its siblings */ .ra-vischip.unlisted, .ra-vischip--unlisted { color: var(--ra-text-2); border-color: var(--ra-line-strong); } /* 5.3 Non-text boundaries (SC 1.4.11): controls that still had the 1.3:1 hairline. :where() keeps specificity at 0 so any component-level border (error red, focus cyan) wins. */ :where(input[type="search"], input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], select, textarea):not([class*="jet-form"]) { border-color: var(--ra-line-strong); } .ra-lsp-q { border-color: var(--ra-line-strong); } /* 5.4 One radius scale on cards (visual #7): CB .acct-card was 3px next to .card 6px. */ .acct-card, .card { border-radius: var(--ra-radius-md); } /* 5.5 Tabular numerals on every stat value (visual #10) — typography only, no geometry. */ [class*="stat"] [class*="num"], [class*="stat"] [class*="val"], [class*="stat"] [class*="_n"], [class*="-stat-v"], [class*="_stat_n"], [class*="stnum"], [class*="kpi"] strong, .ra-stat__value { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 6. CANONICAL COMPONENTS (visual §7.2) — for adoption surface by surface. -------------------------------------------------------------------------- */ /* 6.1 .ra-btn — 3 emphasis × 3 sizes, sentence case, one filled per view */ .ra-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ra-space-2); font: 600 var(--ra-fs-3)/1.2 var(--ra-font-accent); text-transform: none; letter-spacing: .01em; text-decoration: none; white-space: nowrap; min-height: 40px; padding: 11px 20px; border: 1px solid transparent; border-radius: var(--ra-radius-sm); background: transparent; color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; } .ra-btn--sm { min-height: 32px; padding: 7px 12px; } .ra-btn--lg { min-height: 44px; padding: 13px 24px; font-size: var(--ra-fs-4); } .ra-btn--icon { padding: 0; width: 40px; } .ra-btn--sm.ra-btn--icon { width: 32px; } .ra-btn--lg.ra-btn--icon { width: 44px; } .ra-btn svg { width: 16px; height: 16px; flex: none; } .ra-btn--primary { background: var(--ra-action); border-color: var(--ra-action); color: #FFFFFF; } .ra-btn--primary:hover { background: var(--ra-action-hover); border-color: var(--ra-action-hover); color: #FFFFFF; } .ra-btn--secondary { background: #FFFFFF; border-color: var(--ra-line-strong); color: var(--ra-navy); } .ra-btn--secondary:hover { background: var(--ra-surface-sunk); border-color: var(--ra-navy); color: var(--ra-navy); } .ra-btn--tertiary { background: transparent; border-color: transparent; color: var(--ra-action); padding-left: var(--ra-space-2); padding-right: var(--ra-space-2); } .ra-btn--tertiary:hover { color: var(--ra-action-hover); text-decoration: underline; } .ra-btn--danger { background: #FFFFFF; border-color: var(--ra-line-strong); color: var(--ra-danger); } .ra-btn--danger:hover { background: var(--ra-danger-tint); border-color: var(--ra-danger); } .ra-btn--danger.ra-btn--filled { background: var(--ra-danger); border-color: var(--ra-danger); color: #FFFFFF; } /* confirm step only */ .ra-btn:focus-visible { box-shadow: 0 0 0 3px rgba(10,111,151,.25); } .ra-btn:disabled, .ra-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } .ra-btn.is-loading { pointer-events: none; } .ra-btn.is-loading::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ra-spin .7s linear infinite; } @keyframes ra-spin { to { transform: rotate(360deg); } } /* 6.2 .ra-tag — six tones, subtle by default, bold only for the one primary status */ .ra-tag { display: inline-flex; align-items: center; gap: var(--ra-space-1); height: 18px; padding: 0 8px; border-radius: var(--ra-radius-pill); font: 700 var(--ra-fs-1)/1 var(--ra-font-accent); letter-spacing: .04em; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; cursor: default; background: var(--ra-surface-sunk); color: var(--ra-slate); /* neutral */ } .ra-tag--info { background: var(--ra-info-tint); color: var(--ra-info); } .ra-tag--success { background: var(--ra-success-tint); color: var(--ra-success); } .ra-tag--warning { background: var(--ra-warning-tint); color: var(--ra-warning); } .ra-tag--critical { background: var(--ra-danger-tint); color: var(--ra-danger); } .ra-tag--new { background: #E8ECF5; color: var(--ra-navy); } .ra-tag--bold { background: var(--ra-slate); color: #FFFFFF; } .ra-tag--bold.ra-tag--info { background: var(--ra-info); color: #FFFFFF; } .ra-tag--bold.ra-tag--success { background: var(--ra-success); color: #FFFFFF; } .ra-tag--bold.ra-tag--warning { background: var(--ra-warning); color: #FFFFFF; } .ra-tag--bold.ra-tag--critical { background: var(--ra-danger); color: #FFFFFF; } .ra-tag--bold.ra-tag--new { background: var(--ra-navy); color: #FFFFFF; } /* .ra-count — one notification counter per screen */ .ra-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ra-radius-pill); font: 700 10px/1 var(--ra-font-accent); background: var(--ra-action); color: #FFFFFF; font-variant-numeric: tabular-nums; } .ra-count--critical { background: var(--ra-danger); } /* 6.3 .ra-stat — label / numeric value / caption; hidden when the value is empty */ .ra-stat { display: flex; flex-direction: column; gap: 6px; min-width: 0; background: #FFFFFF; border: 1px solid var(--ra-line); border-radius: var(--ra-radius-md); padding: 16px 18px; } .ra-stat__label, .ra-stat > .label { display: flex; align-items: center; gap: 6px; font: 700 var(--ra-fs-1)/1.2 var(--ra-font-accent); letter-spacing: .06em; text-transform: uppercase; color: var(--ra-text-2); } .ra-stat__label svg, .ra-stat > .label svg { width: 16px; height: 16px; flex: none; } .ra-stat__value, .ra-stat > .value { font: 800 26px/1.1 var(--ra-font-display); color: var(--ra-navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .ra-stat__caption, .ra-stat > .caption { font: 400 var(--ra-fs-2)/1.4 var(--ra-font-accent); color: var(--ra-text-2); } .ra-stat--accent { background: var(--ra-info-tint); border-color: transparent; } .ra-stat:has(> .ra-stat__value:empty), .ra-stat:has(> .value:empty) { display: none; } /* 6.4 .ra-card — flat at rest, lifts only when it is a link */ .ra-card { display: block; background: #FFFFFF; border: 1px solid var(--ra-line); border-radius: var(--ra-radius-md); padding: var(--ra-space-4); box-shadow: none; color: inherit; text-decoration: none; } a.ra-card:hover, .ra-card--link:hover { box-shadow: var(--ra-shadow-1); border-color: var(--ra-line-strong); } .ra-card__media { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; border-radius: var(--ra-radius-media); } .ra-card__title { font: 700 15px/1.3 var(--ra-font-display); color: var(--ra-navy); margin: 0; } .ra-card__meta { font: 400 var(--ra-fs-2)/1.4 var(--ra-font-accent); color: var(--ra-text-2); } /* 6.5 .ra-table — one row anatomy */ .ra-table { width: 100%; border-collapse: collapse; font: 400 var(--ra-fs-3)/1.4 var(--ra-font-accent); } .ra-table caption { text-align: left; font: 700 var(--ra-fs-4)/1.3 var(--ra-font-display); color: var(--ra-navy); padding: 0 0 var(--ra-space-3); } .ra-table thead th { background: #F7F8FA; text-align: left; padding: 10px 12px; font: 700 var(--ra-fs-1)/1.2 var(--ra-font-accent); letter-spacing: .06em; text-transform: uppercase; color: var(--ra-text-2); border-bottom: 1px solid var(--ra-line); } .ra-table tbody td { padding: 10px 12px; min-height: 52px; border-bottom: 1px solid var(--ra-line); vertical-align: middle; } .ra-table tbody tr:hover td { background: #F7F9FB; } .ra-table .ra-table__title { min-width: 280px; } .ra-table .ra-table__title strong { display: block; font: 700 var(--ra-fs-4)/1.3 var(--ra-font-display); color: var(--ra-navy); } .ra-table .ra-table__title small { display: block; font-size: var(--ra-fs-2); color: var(--ra-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ra-table .ra-table__num { text-align: right; font-variant-numeric: tabular-nums; } .ra-table .ra-table__note { display: block; font-size: var(--ra-fs-2); color: var(--ra-text-2); margin-top: 2px; } .ra-table .ra-table__actions { text-align: right; width: 48px; } /* 6.6 .ra-dialog — modal and drawer share one anatomy */ .ra-dialog__scrim { position: fixed; inset: 0; background: rgba(0,18,66,.55); z-index: 9000; } .ra-dialog { position: fixed; z-index: 9001; display: flex; flex-direction: column; background: #FFFFFF; color: var(--ra-body); box-shadow: var(--ra-shadow-3); width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: var(--ra-radius-md); } .ra-dialog--wide { width: min(720px, calc(100vw - 32px)); } .ra-dialog--drawer { top: 0; right: 0; left: auto; transform: none; height: 100vh; height: 100dvh; max-height: none; width: min(560px, 100vw); border-radius: 0; } .ra-dialog__header { display: flex; align-items: center; gap: var(--ra-space-3); padding: var(--ra-space-4) var(--ra-space-5); border-bottom: 1px solid var(--ra-line); } .ra-dialog__title { flex: 1; margin: 0; font: 700 18px/1.3 var(--ra-font-display); color: var(--ra-navy); } .ra-dialog__body { flex: 1; overflow: auto; padding: var(--ra-space-5); } .ra-dialog__footer { display: flex; justify-content: flex-end; gap: var(--ra-space-2); padding: var(--ra-space-4) var(--ra-space-5); border-top: 1px solid var(--ra-line); } /* .ra-menu — destructive last, after a divider */ .ra-menu { min-width: 200px; padding: var(--ra-space-1) 0; background: #FFFFFF; border: 1px solid var(--ra-line); border-radius: var(--ra-radius-md); box-shadow: var(--ra-shadow-2); } .ra-menu__item { display: flex; align-items: center; gap: var(--ra-space-2); width: 100%; min-height: 36px; padding: 0 var(--ra-space-3); background: none; border: 0; font: 400 var(--ra-fs-3)/1.2 var(--ra-font-accent); color: var(--ra-ink); text-align: left; cursor: pointer; text-decoration: none; } .ra-menu__item:hover { background: var(--ra-surface-sunk); } .ra-menu__item--danger { color: var(--ra-danger); } .ra-menu__divider { height: 1px; margin: var(--ra-space-1) 0; background: var(--ra-line); } /* 6.7 .ra-empty and .ra-skeleton */ .ra-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ra-space-2); padding: var(--ra-space-6) var(--ra-space-4); text-align: center; color: var(--ra-text-2); } .ra-empty svg, .ra-empty__icon { width: 24px; height: 24px; color: var(--ra-text-3); } .ra-empty__title { margin: 0; font: 700 15px/1.3 var(--ra-font-display); color: var(--ra-navy); } .ra-empty__why { margin: 0; font: 400 var(--ra-fs-3)/1.4 var(--ra-font-accent); } .ra-empty .ra-btn { margin-top: var(--ra-space-2); } .ra-skeleton { display: block; border-radius: var(--ra-radius-sm); background: linear-gradient(90deg, #EEF1F5 25%, #F7F8FA 37%, #EEF1F5 63%); background-size: 400% 100%; animation: ra-shimmer 1.4s ease infinite; } @keyframes ra-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } /* 6.8 Type roles */ .ra-page-title { font: 800 26px/1.2 var(--ra-font-display); color: var(--ra-navy); margin: 0; letter-spacing: -.01em; } .ra-section-title { font: 700 18px/1.3 var(--ra-font-display); color: var(--ra-navy); margin: 0; } .ra-card-title { font: 700 15px/1.3 var(--ra-font-display); color: var(--ra-navy); margin: 0; } .ra-eyebrow { font: 700 var(--ra-fs-1)/1.2 var(--ra-font-accent); letter-spacing: .08em; text-transform: uppercase; color: var(--ra-action); } .ra-body { font: 400 15px/1.5 var(--ra-font-display); color: var(--ra-body); } .ra-ui { font: 400 var(--ra-fs-3)/1.4 var(--ra-font-accent); } .ra-meta { font: 400 var(--ra-fs-2)/1.4 var(--ra-font-accent); color: var(--ra-text-2); } .ra-hero-title { font: 800 var(--ra-fs-hero)/1.05 var(--ra-font-display); letter-spacing: -.02em; } @media (max-width: 1023px) { .ra-hero-title { font-size: var(--ra-fs-8); } } /* -------------------------------------------------------------------------- 7. ACCOUNT-SHELL CONTENT WIDTH (2026-09-02 follow-up audit: fixed-px content containers cut off / leave dead space on large screens across My Account). Root cause (measured with Playwright at 1920/1366/390 across all 4 roles, not guessed): module 06 bakes `.cb-ad_main{max-width:1400px !important}` into EVERY /account/* page (a deliberate readability cap so the admin-shell content column — a flex child of the 250px-sidebar `.cb-ad_page` row — does not stretch absurdly wide). Module 07 then carves out an UNCAPPED exception, `#ra-widemgmt` (`.cb-ad_page .cb-ad_main, .cb-ad_sec .cb-ad_main{max-width:none !important;…}`, higher specificity so it wins regardless of source order), for the specific table-heavy pages that need the extra room — but that exception is a hard-coded page-id array. The Coordinator area (module 16, added after that array was written) reuses the SAME `.cb-ad_main` shell — Overview (18096), Users (18097), Approvals (18098), Institution Settings (18100) all measured stuck at exactly 1400px on a 1920px screen (v.s. 1670px on every sibling admin/manager page using the identical shell) — a ~270px dead gap on the right that is invisible at 1366px (1116px available is already under the cap) and at mobile (the cap only applies ≥768px), which is exactly the "fine on laptop/phone, cut off on a big monitor" shape the audit reported. The direct siblings of 3 of these 4 pages (Admin dashboard 15657, Users 459, Settings 906) are ALL already on the `ra-widemgmt` allowlist — i.e. the correct, already-shipped, already-verified behaviour for this shell is uncapped, and the coordinator pages are the ones out of sync with it, not the other way round. Fix here instead of extending that id array: the SAME declarations, on the bare class (equal !important, equal single-class specificity to module 06's cap) — this file prints LAST in (see file header), so on equal specificity the later rule wins regardless of page id. That covers every CURRENT `.cb-ad_main` page (matches the widemgmt pages exactly — redundant there, same end result, since widemgmt's higher-specificity selector still wins on its own pages) AND every FUTURE one, with no allowlist to remember to extend. Only the content column is touched — `.cb-ad_sb` (sidebar) and the `.cb-ad_page` flex row are untouched, so the two-column shell and its mobile stacking are unaffected. -------------------------------------------------------------------------- */ .cb-ad_main { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; } /* -------------------------------------------------------------------------- 8. DARK READINESS (visual #19) — deliberately light-only. The palette lives on bare :root above, so a theme is one token block away. A `prefers-color-scheme: dark` block is NOT shipped: the plugin still carries ~1,240 hard-coded #FFF surfaces and 833 raw hexes, so dark tokens would render a half-dark page and break the navy sidebar's white-on-navy text. Add it after the hex codemod (visual #8), never before. -------------------------------------------------------------------------- */