/* * Motiva Design System — Foundation Tokens * * Naming: --motiva-- * * Two kinds of tokens live here: * 1. ALIASES — the concept already exists in gradify-theme.css * (--g-*). These forward to that variable via var(...) instead * of restating its value, so there is exactly one live neutral * palette, dark mode keeps working automatically, and this file * can never drift out of sync with the existing theme. * 2. NET NEW — the concept does not exist in gradify-theme.css * (brand palette, gradient, ambient backgrounds, info/success/ * warning, motion, z-index, ...). Values are taken verbatim * from the approved visual reference: * design/design-system/motiva-ui-library-v01.html * * See design/design-system/MOTIVA_FOUNDATIONS.md for the full * rationale, surface hierarchy, and consumption rules. */ :root { /* ============================================================ BRAND — net new ============================================================ */ --motiva-color-purple: #6D0EE6; --motiva-color-indigo: #4F46E5; --motiva-color-blue: #1C7FB8; --motiva-color-teal: #0D9C9A; /* ── Presentation accents ────────────────────────────────── Two further hues the finalized Tasks screen uses on its KPI cards. They are PRESENTATION accents (card outline + icon chip), never status semantics: the System Master's rule "three semantic colors only — violet / teal / rose — never introduce a fourth" is scoped to StatusChip/StatusDot, which are unaffected by these. Named for the hue, like the brand colours above, rather than for the page or metric that happens to use them today. */ --motiva-color-periwinkle: #6E62B8; --motiva-color-cobalt: #1D36E3; /* Added in Phase 4B for the finalized Requests screen's "מחכות לתגובתך" KPI. Same presentation-only contract as the two above: it reaches MKpiCard and nothing else. MStatusDot and MStatusBadge stay closed to violet / teal / rose. */ --motiva-color-amber: #D9761A; --motiva-color-periwinkle-bg: rgba(110, 98, 184, 0.07); --motiva-color-cobalt-bg: rgba(29, 54, 227, 0.08); --motiva-color-amber-bg: rgba(255, 138, 31, 0.10); --motiva-gradient-signature: linear-gradient(90deg, var(--motiva-color-purple), var(--motiva-color-indigo), var(--motiva-color-blue), var(--motiva-color-teal)); --motiva-gradient-ambient: radial-gradient(circle at 80% 15%, rgba(109, 14, 230, 0.16), transparent 30%), radial-gradient(circle at 15% 80%, rgba(13, 156, 154, 0.16), transparent 34%), linear-gradient(135deg, #ffffff, #fbfaff 52%, #f8fefd); /* ============================================================ THE DEFAULT TAG SURFACE — one recipe for every chip, badge and category pill in the product. WHAT IT DRAWS: a white interior under a 1px Motiva gradient edge. It replaces the filled light-violet pill that had spread across every role's screens — a tinted block with tinted type on it reads as a control, and a page carrying eight of them reads as violet noise rather than as information. WHY IT IS A TOKEN AND NOT A CLASS: the chips it has to reach are drawn by ~30 page-local rules (`.sreq-row-type`, `.mrq-row-type`, `.lsb-ws-type-pill`, …) that each own their own metrics. A token lets every one of them adopt the SURFACE without giving up its size, so no layout moves. THE LAYERS, and why each one: · padding-box — an opaque near-white. Opaque, because a translucent fill would let the ramp below read straight through and turn the whole chip into a coloured banner. · border-box #1 — a .66 white veil over the ramp, taking the saturated edge down to roughly a third. A full-strength 1px ring around 11px type is a dark outline before it is an accent. · border-box #2 — the signature ramp itself, so the edge follows the brand token if the brand ever moves. The opaque fill paints on top, so the veiled ramp only shows where the border is. THREE THINGS EVERY CONSUMER STILL STATES, because they belong to the chip's own box rather than to the recipe: `border: 1px solid transparent` — no border box, no edge; `color: var(--motiva-text-primary)` — the label is a label. Violet type inside a violet edge makes the object one colour; one less px of padding per axis — the border is paid for out of the padding, so the chip's OUTER box does not move and no row re-flows. WHAT IT MUST NEVER TAKE OVER: anything red. Overdue, late, returned-for-fixes, blocked and every other "act on this now" state keeps its rose fill and rose ink — that is the one signal in the system that has to out-shout its neighbours, and a chip that all its neighbours also wear cannot. DECLARED IN THREE SCOPES. A custom property whose value contains var() is substituted where it is DECLARED, so a single :root copy would freeze :root's violet and :root's surfaces into every descendant. `.motiva` and `.motiva.motiva-final` therefore restate it — same expression, their own palette. (Same reason the alias block further down this file exists.) DARK MODE COMES FOR FREE at :root and .motiva, because the padding-box reads --motiva-surface-primary rather than a white literal, and the dark blocks re-point it ON THE SAME ELEMENT — which is ordinary cascade, not the descendant-substitution trap above. `.motiva-final` needs no dark answer: the finished design is declared after the dark blocks and at higher specificity, so those screens are light by construction. ============================================================ */ --motiva-tag-brand-surface: linear-gradient(var(--motiva-surface-primary), var(--motiva-surface-primary)) padding-box, linear-gradient(rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.66)) border-box, var(--motiva-gradient-signature) border-box; /* ============================================================ NEUTRAL — aliased to gradify-theme.css (--g-*) ============================================================ */ --motiva-surface-app-bg: var(--g-bg-page); --motiva-surface-primary: var(--g-bg-surface); --motiva-surface-secondary: var(--g-bg-input); --motiva-surface-elevated: var(--g-bg-surface); /* same color as primary; elevation is expressed via --motiva-shadow-*, not a darker/lighter fill */ --motiva-surface-hover: var(--g-bg-hover); --motiva-text-primary: var(--g-text-primary); --motiva-text-secondary: var(--g-text-secondary); --motiva-text-muted: var(--g-text-muted); --motiva-border-subtle: var(--g-border-light); --motiva-border-strong: var(--g-border); /* ============================================================ SEMANTIC — danger aliased (already live); info/success/warning net new (no equivalent existed); disabled/focus derived from existing neutral + accent tokens. ============================================================ */ --motiva-color-info: #1C7FB8; --motiva-color-success: #0D9C73; --motiva-color-warning: #D97706; --motiva-color-danger: var(--g-danger); --motiva-color-info-bg: rgba(28, 127, 184, 0.10); --motiva-color-success-bg: rgba(13, 156, 115, 0.11); --motiva-color-warning-bg: rgba(217, 119, 6, 0.11); --motiva-color-danger-bg: rgba(217, 56, 100, 0.10); /* Brand (purple/indigo) tint — same convention as the semantic -bg tokens above, added because nothing in the palette expresses "this is a primary/brand highlight" as a soft background (e.g. a nav active state) without hardcoding a literal. */ --motiva-color-brand-bg: rgba(109, 14, 230, 0.08); --motiva-color-disabled-bg: var(--g-bg-input); --motiva-color-disabled-text: var(--g-text-muted); --motiva-color-disabled-border: var(--g-border-light); --motiva-color-focus-ring: var(--g-accent); /* matches the accent already used by existing ad hoc focus rings */ /* ============================================================ LAYOUT — spacing/radius-sm-md/shadow/full aliased; radius-lg/xl, container widths and control heights net new. ============================================================ */ --motiva-space-xs: var(--g-space-xs); --motiva-space-sm: var(--g-space-sm); --motiva-space-md: var(--g-space-md); --motiva-space-lg: var(--g-space-lg); --motiva-space-xl: var(--g-space-xl); --motiva-space-2xl: 48px; --motiva-radius-sm: var(--g-radius-sm); --motiva-radius-md: var(--g-radius-md); --motiva-radius-lg: 26px; --motiva-radius-xl: 34px; --motiva-radius-full: var(--g-radius-full); --motiva-shadow-sm: var(--g-shadow-sm); --motiva-shadow-md: var(--g-shadow-md); --motiva-shadow-lg: var(--g-shadow-lg); --motiva-container-sm: 640px; --motiva-container-md: 960px; --motiva-container-lg: 1200px; --motiva-container-xl: 1440px; --motiva-control-height-sm: 32px; --motiva-control-height-md: 40px; --motiva-control-height-lg: 48px; /* ============================================================ TYPOGRAPHY — family + size scale aliased; weights, line-heights and the heading/body/caption scale net new. ============================================================ */ --motiva-font-family: var(--g-font-base); --motiva-font-size-caption: var(--g-font-size-xs); --motiva-font-size-sm: var(--g-font-size-sm); --motiva-font-size-md: var(--g-font-size-md); --motiva-font-size-lg: var(--g-font-size-lg); --motiva-font-size-xl: var(--g-font-size-xl); --motiva-font-size-h1: var(--g-type-page-title); --motiva-font-size-h2: var(--g-type-section); --motiva-font-size-h3: var(--g-type-card); --motiva-font-size-h4: var(--g-type-subtitle); --motiva-font-size-body: var(--g-type-body); /* META — dates, counts, team/project names beside a row's title. The hierarchy has always had this step (--g-type-secondary) but no --motiva-* name for it, so ~230 rules restate its value as a literal and drift a half-pixel at a time. Aliased like every size above it. */ --motiva-font-size-meta: var(--g-type-secondary); --motiva-font-weight-regular: 400; --motiva-font-weight-medium: 500; --motiva-font-weight-semibold: 600; --motiva-font-weight-bold: 700; --motiva-line-height-tight: 1.15; /* large headings */ --motiva-line-height-heading: 1.3; /* h2-h4 */ --motiva-line-height-body: 1.55; /* paragraphs, long-form RTL text */ --motiva-line-height-caption: 1.4; /* ============================================================ MOTION — net new ============================================================ */ --motiva-motion-duration-fast: 120ms; /* micro-interactions: hover, toggle */ --motiva-motion-duration-standard: 200ms; /* default transitions */ --motiva-motion-duration-slow: 320ms; /* modals, larger surface changes */ --motiva-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* symmetric — hover, color, size changes */ --motiva-motion-easing-entrance: cubic-bezier(0, 0, 0.2, 1); /* decelerate — things entering the viewport/DOM */ /* ============================================================ LAYERS (z-index) — net new ============================================================ */ --motiva-z-base: 0; --motiva-z-sticky: 100; --motiva-z-dropdown: 500; --motiva-z-overlay: 900; --motiva-z-modal: 1000; --motiva-z-toast: 1100; } /* ================================================================ DARK MODE — only for the NET NEW tokens above. Aliased tokens (surfaces/text/borders/danger/radius-sm-md/shadow/ spacing/font) already flow through gradify-theme.css's own dark mode block with zero extra code here. ================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --motiva-color-purple: #9b4ff0; --motiva-color-indigo: #818cf8; --motiva-color-blue: #4aa3d8; --motiva-color-teal: #2dd4c4; --motiva-color-periwinkle: #a29bdc; --motiva-color-cobalt: #7f92ff; --motiva-color-amber: #E29A54; --motiva-color-periwinkle-bg: rgba(162, 155, 220, 0.16); --motiva-color-cobalt-bg: rgba(127, 146, 255, 0.16); --motiva-color-amber-bg: rgba(226, 154, 84, 0.16); --motiva-gradient-ambient: radial-gradient(circle at 80% 15%, rgba(109, 14, 230, 0.22), transparent 30%), radial-gradient(circle at 15% 80%, rgba(13, 156, 154, 0.20), transparent 34%), linear-gradient(135deg, #0f172a, #151b34 52%, #10231f); --motiva-color-info: #4aa3d8; --motiva-color-success: #2dd4a8; --motiva-color-warning: #eab308; --motiva-color-info-bg: rgba(74, 163, 216, 0.16); --motiva-color-success-bg: rgba(45, 212, 168, 0.16); --motiva-color-warning-bg: rgba(234, 179, 8, 0.16); --motiva-color-danger-bg: rgba(248, 113, 113, 0.16); --motiva-color-brand-bg: rgba(155, 79, 240, 0.16); } } [data-theme="dark"] { --motiva-color-purple: #9b4ff0; --motiva-color-indigo: #818cf8; --motiva-color-blue: #4aa3d8; --motiva-color-teal: #2dd4c4; --motiva-color-periwinkle: #a29bdc; --motiva-color-cobalt: #7f92ff; --motiva-color-amber: #E29A54; --motiva-color-periwinkle-bg: rgba(162, 155, 220, 0.16); --motiva-color-cobalt-bg: rgba(127, 146, 255, 0.16); --motiva-color-amber-bg: rgba(226, 154, 84, 0.16); --motiva-gradient-ambient: radial-gradient(circle at 80% 15%, rgba(109, 14, 230, 0.22), transparent 30%), radial-gradient(circle at 15% 80%, rgba(13, 156, 154, 0.20), transparent 34%), linear-gradient(135deg, #0f172a, #151b34 52%, #10231f); --motiva-color-info: #4aa3d8; --motiva-color-success: #2dd4a8; --motiva-color-warning: #eab308; --motiva-color-info-bg: rgba(74, 163, 216, 0.16); --motiva-color-success-bg: rgba(45, 212, 168, 0.16); --motiva-color-warning-bg: rgba(234, 179, 8, 0.16); --motiva-color-danger-bg: rgba(248, 113, 113, 0.16); --motiva-color-brand-bg: rgba(155, 79, 240, 0.16); } /* ================================================================ MOTIVA SYSTEM MASTER — THE `.motiva` SCOPE Values transcribed from the approved "Motiva - System Master" and its own token file, motiva-student.css. WHY A SCOPE INSTEAD OF :root ---------------------------- The tokens this block redefines are consumed app-wide (--motiva-color-indigo: 137 references, --motiva-shadow-sm: 72, --motiva-radius-lg: 48). Re-pointing them in :root would silently restyle every Lecturer/Staff/Admin surface, none of which has been designed against the Master yet. So every Master value lives here, gated on a class, and the :root blocks above are left exactly as they were. This is the same firewall pattern AppSideNav already uses for its .snav-motiva override layer. ROLE-NEUTRAL AS OF THE MENTOR MIGRATION (Epic 0) ------------------------------------------------ This block was originally `.motiva-student`, because Student was the only experience the Master described. It is now `.motiva`, because Mentor consumes the SAME visual system — one design system, two experiences, not two forks. Nothing in this block is role-specific: there is no colour, radius, shadow, gradient or type step here that means one thing for a student and another for a mentor. So the scope carries no role in its name. AppLayout puts BOTH classes on the shell root — `motiva motiva-student` or `motiva motiva-mentor`. The role class exists purely as a hook for the places where behaviour or UX genuinely differs (today: none in this file). Everything visual reads `.motiva`. NOT A VALUE CHANGE. Epic 0 renamed the selector and nothing else. `.motiva-student` (0,1,0) and `.motiva` (0,1,0) have identical specificity, the declaration order is unchanged, and students still carry the class — so every computed value on every student page is byte-identical to before. HOW IT KEEPS ONE LIVE PALETTE ----------------------------- The palette is NOT forked. This block overrides the --g-* variables themselves, so the ~37 --motiva-* tokens that alias them (surfaces, text, borders, danger, radius-sm/md, shadows, font family/sizes) carry Master values with no second definition to drift. Only genuinely net-new concepts (rose, the 4th ink step, the Master's gradients) get their own literals. CORRECTION (Phase 4A.1): this originally said those aliases resolve "automatically". They do not — a var() alias declared at :root is substituted at :root and inherited already-resolved, so overriding --g-* here could never reach it. All 37 aliases are therefore re-declared at the end of this block, still as var(--g-*) and never as literals. See the ALIAS RE-DECLARATION section there. APPLIED BY ---------- AppLayout.razor, on the app-shell root, for the Student and Mentor experiences. Lecturer / Staff / Admin never carry it and resolve every token at its :root value, unchanged. NOT INCLUDED (deliberate) ------------------------- - No component classes (.kpi, .row, .dot, .navi, .amb, ...). The Master's component stylesheet is NOT ported; Phase 3 builds real Blazor components instead. - No @keyframes (motivaBreathe / motivaFadeUp / motivaModalIn) — they ship in Phase 3 with the components that use them. - No layout tokens (--g-sidebar-width 280>248, --g-shell-padding, content padding, --motiva-space-*). Shell geometry is Phase 2; component padding rhythm is Phase 3. ================================================================ */ .motiva { /* ============================================================ SHELL GEOMETRY (added in Phase 2) Master: "Sidebar fixed 248px; main content is fluid full-bleed, 40px side padding and 60px bottom padding — no centered max-width column inside the app shell." The first two override EXISTING --g-* layout tokens, which the shell already reads (.app-shell padding/gap, .sidenav-wrapper width, .sidenav-panel sticky top/height). Re-pointing them here resizes and un-floats the student shell without editing those rules at all, and leaves every other role on 280px / 12px. ============================================================ */ --g-sidebar-width: 248px; --g-shell-padding: 0px; --motiva-content-padding-inline: 40px; --motiva-content-padding-block-end: 60px; /* ============================================================ TYPEFACE — Master: "Heebo, now the single canonical UI face" Assistant is kept as the fallback so any glyph Heebo lacks still resolves to today's face rather than a system serif. ============================================================ */ --g-font-base: Heebo, 'Assistant', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* ============================================================ INK RAMP — Master's four warm-neutral text steps. Replaces the cool slate ramp (#1e293b / #64748b / #94a3b8). ============================================================ */ --g-text-primary: #1A1820; /* Master --ink */ --g-text-secondary: #5B5568; /* Master --ink-2 */ --g-text-muted: #8B8698; /* Master --ink-3 */ /* 4th step, net new — nothing in --g-* expresses "quieter than muted" (Master --ink-4, used for timestamps and placeholders). */ --motiva-text-subtle: #B7B2C2; /* ============================================================ SURFACES — warm paper, not the cool #f0f2f8 page grey. ============================================================ */ --g-bg-page: #FAF9F7; /* Master "Paper" */ --g-bg-surface: #FFFFFF; /* unchanged — white cards */ --g-bg-input: #FAF9F7; /* Master field fill */ --g-bg-hover: rgba(26, 24, 32, 0.035); /* Master hover wash */ /* ============================================================ LINE RAMP — three steps in the Master, two in --g-*. The middle step is added rather than overloading either end. ============================================================ */ --g-border-light: #F0EEF9; /* Master --line — row dividers */ --motiva-border-card: #EFEDF4; /* Master --line-2 — card outlines */ --g-border: #E7E4EC; /* Master --edge — strong edges */ /* ============================================================ BRAND / SEMANTIC — the Master permits exactly three: violet = focus/action, teal = progress/completion, rose = attention (reserved, never decorative). ============================================================ */ --motiva-color-violet: #4F46E5; --motiva-color-teal: #0D9C9A; --motiva-color-rose: #D93864; /* Rose at text weight — the Master uses the darker step for rose LABELS ("נדרש תיקון", "באיחור") and the lighter one for dots and fills, so both are real values, not a lightness accident. */ --motiva-color-rose-ink: #B23256; /* Legacy name kept pointing at the same hue so the 137 existing --motiva-color-indigo references stay correct inside the scope. "Violet" is the Master's word for it; indigo is the alias. */ --motiva-color-indigo: var(--motiva-color-violet); /* Ambient-wash hue and edge-gradient hue are two different violets in the Master (#6D0EE6 for the radial page wash, #7C3AED for the 1px card border) — kept distinct rather than averaged. */ --motiva-color-purple: #6D0EE6; --motiva-color-edge-violet: #7C3AED; --g-accent: var(--motiva-color-violet); --g-accent-hover: #3730A3; /* Master link hover */ --g-accent-light: rgba(79, 70, 229, 0.07); /* Master icon tint */ --g-accent-active-bg: rgba(79, 70, 229, 0.10); --g-danger: var(--motiva-color-rose); /* The Master: "Three semantic colors only — violet / teal / rose — never introduce a fourth." Info and warning are therefore folded onto the permitted three rather than deleted, so MStatusBadge's existing five-variant API keeps compiling untouched while the rendered result obeys the rule. Phase 3 narrows the API itself. */ --motiva-color-info: var(--motiva-color-violet); --motiva-color-success: var(--motiva-color-teal); --motiva-color-warning: var(--motiva-color-rose); --motiva-color-info-bg: rgba(79, 70, 229, 0.07); --motiva-color-success-bg: rgba(13, 156, 154, 0.08); --motiva-color-warning-bg: rgba(217, 56, 100, 0.07); --motiva-color-danger-bg: rgba(217, 56, 100, 0.07); --motiva-color-brand-bg: rgba(79, 70, 229, 0.10); /* ============================================================ TYPOGRAPHY SCALE — Master's six roles. The legacy scale ran roughly 1.8x oversized (body 20px, page title 32px). ============================================================ */ --g-type-page-title: 25px; /* Master "Page title" 700 */ --g-type-section: 18px; /* derived — modal titles 700 */ --g-type-card: 15px; /* Master "Section title" 700 */ --g-type-subtitle: 13px; /* Master "Sub label" 600 */ --g-type-body: 13.5px; /* Master "Body" 400 */ --g-type-secondary: 12px; /* Master "Meta/caption" 400 */ --g-font-size-xs: 12px; --g-font-size-sm: 13px; --g-font-size-md: 13.5px; --g-font-size-lg: 15px; --g-font-size-xl: 25px; /* Net new — Master "Item / row text" (14px/500) has no --g-* peer and is the single most common size in the list-heavy screens. */ --motiva-font-size-item: 14px; --motiva-line-height-tight: 1.2; /* Master --t-page-lh */ --motiva-line-height-heading: 1.35; /* Master --t-sec-lh */ --motiva-line-height-body: 1.6; /* Master --t-body-lh */ /* --motiva-line-height-caption inherits 1.4 from :root — unchanged */ /* Net new — the Master's headings carry deliberate tracking. */ --motiva-letter-spacing-page: -0.4px; --motiva-letter-spacing-section: 0.02em; /* ============================================================ RADIUS — Master: card 18, inner 14, pill 999, modal 24. Nothing in the Master reaches the legacy 26/34px. ============================================================ */ --g-radius-sm: 10px; /* nav items, icon buttons */ --g-radius-md: 14px; /* Master --r-inner */ --g-radius-lg: 18px; /* Master --r-card */ --motiva-radius-lg: 18px; --motiva-radius-xl: 24px; /* modals only */ /* --g-radius-full / --motiva-radius-full unchanged (999px) */ /* ============================================================ ELEVATION — Master: "Cards: hairline border, no drop shadow at rest. Modals only: soft elevated shadow." Shadows are not removed from the system, they are reassigned: rest = none, md = the Master's dropdown/popover shadow, lg = its modal one. ============================================================ */ --g-shadow-sm: none; --g-shadow-md: 0 16px 36px rgba(30, 20, 60, 0.14); --g-shadow-lg: 0 32px 70px rgba(30, 20, 60, 0.28); /* ============================================================ GRADIENTS — values only. No rule in this phase applies them. The Master uses two ambient intensities: a stronger one on the Dashboard hero and a calmer one on the compact page headers (Tasks, Requests, Knowledge Center, Profile). Both are real and both are recorded, rather than picking one and losing the other. ============================================================ */ --motiva-gradient-ambient: radial-gradient(circle at 88% 6%, rgba(109, 14, 230, 0.20), transparent 52%), radial-gradient(circle at 4% 96%, rgba(13, 156, 154, 0.13), transparent 50%), linear-gradient(#ffffff, #FAF9F7); --motiva-gradient-ambient-hero: radial-gradient(circle at 88% 4%, rgba(109, 14, 230, 0.24), transparent 52%), radial-gradient(circle at 4% 96%, rgba(13, 156, 154, 0.15), transparent 50%), linear-gradient(#ffffff, #FAF9F7); /* The Master's Ambient-bordered card: a 1px violet>transparent>teal sweep behind white paper. Highest surface emphasis in the system. */ --motiva-gradient-edge: linear-gradient(92deg, rgba(124, 58, 237, 0.30) 0%, rgba(124, 58, 237, 0.08) 30%, rgba(124, 58, 237, 0.00) 50%, rgba(13, 156, 154, 0.08) 70%, rgba(13, 156, 154, 0.28) 100%); --motiva-gradient-edge-active: linear-gradient(92deg, rgba(124, 58, 237, 0.55) 0%, rgba(124, 58, 237, 0.17) 30%, rgba(124, 58, 237, 0.03) 50%, rgba(13, 156, 154, 0.17) 70%, rgba(13, 156, 154, 0.52) 100%); /* Soft fill, same sweep at low alpha — the Master's active nav item and selected-surface treatment. */ --motiva-gradient-wash: linear-gradient(92deg, rgba(124, 58, 237, 0.075) 0%, rgba(124, 58, 237, 0.020) 38%, rgba(13, 156, 154, 0.020) 62%, rgba(13, 156, 154, 0.070) 100%); /* The 4-stop purple>indigo>blue>teal signature has no counterpart in the Master — it has no blue at all. Inside the student scope it collapses to the Master's own two-hue sweep (the gradient used for its icon strokes and accent marks). Outside the scope the original 4-stop gradient is untouched. */ --motiva-gradient-signature: linear-gradient(92deg, var(--motiva-color-edge-violet), var(--motiva-color-teal)); /* Same recipe as :root, restated so the edge resolves against the scope's own ramp rather than the frozen :root one. See the block beside the :root declaration for what each layer is doing. */ --motiva-tag-brand-surface: linear-gradient(var(--motiva-surface-primary), var(--motiva-surface-primary)) padding-box, linear-gradient(rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.66)) border-box, var(--motiva-gradient-signature) border-box; /* ============================================================ MOTION — the Master's transitions are ease-out throughout, and its modal entrance uses one distinct emphasized curve. Durations (120/200/320ms) already match and are left alone. ============================================================ */ --motiva-motion-easing-standard: ease-out; --motiva-motion-easing-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1); /* ============================================================ ALIAS RE-DECLARATION (Phase 4A.1) — REQUIRED, NOT REDUNDANT THE BUG THIS FIXES ------------------ Everything above re-points --g-* variables, on the assumption (stated in this file's own header and in MOTIVA_FOUNDATIONS.md) that the ~37 --motiva-* tokens aliasing them would follow "automatically, with no second definition to drift." They do not. A custom property whose value contains var() is substituted at computed-value time ON THE ELEMENT WHERE IT IS DECLARED, and descendants inherit the already-substituted result. `:root { --motiva-text-primary: var(--g-text-primary) }` therefore froze the :root value (#1e293b) into the computed property, and re-pointing --g-text-primary further down the tree could never reach it. Measured on /tasks before this block existed: 29 of the 37 aliases resolved to legacy values inside the scope — page title 32px instead of 25px, ink #1e293b instead of #1A1820, card radius 12px instead of 14px, --motiva-shadow-sm a real shadow instead of `none`, and task cards rendering in Assistant while the page header rendered in Heebo. WHY THIS IS STILL NOT A PALETTE FORK ------------------------------------ Each line below is the SAME alias expression as its :root peer — `var(--g-*)`, never a literal. No Master value is restated here, so there is still exactly one live palette and nothing new that can drift. The only thing that changes is WHERE the alias is declared: on the same element as the --g-* overrides above, instead of on :root. WHY THIS ALSO FIXES DARK MODE, WITH NO DUPLICATION -------------------------------------------------- The .motiva dark blocks below re-point the same --g-* variables on this same element. Because the alias now lives here too, it resolves against whichever --g-* value wins on this element — light or dark. That is why these 37 lines are NOT repeated in the dark blocks: repeating them would be the drift this file exists to prevent. SCOPE OF EFFECT --------------- Declarations only, inside .motiva. Every :root block is untouched, so Lecturer / Staff / Admin, and the auth pages (BlankLayout, never inside this scope), resolve exactly as they did before. MAINTENANCE RULE ---------------- Every --motiva-* token declared at :root as var(--g-*) must appear here. All 37 are listed, including the 8 whose source is not (or not differently) overridden above — those are no-ops today and are kept so the invariant is "all of them", which can be checked mechanically, rather than "the ones that happened to matter", which cannot. ============================================================ */ /* Surfaces — primary/elevated are the two no-ops here (--g-bg-surface is overridden above, to the same #FFFFFF). */ --motiva-surface-app-bg: var(--g-bg-page); --motiva-surface-primary: var(--g-bg-surface); --motiva-surface-secondary: var(--g-bg-input); --motiva-surface-elevated: var(--g-bg-surface); --motiva-surface-hover: var(--g-bg-hover); /* Ink ramp */ --motiva-text-primary: var(--g-text-primary); --motiva-text-secondary: var(--g-text-secondary); --motiva-text-muted: var(--g-text-muted); /* Line ramp — the middle step (--motiva-border-card) is net new and already declared above, so it was never affected. */ --motiva-border-subtle: var(--g-border-light); --motiva-border-strong: var(--g-border); /* Semantic + derived. --g-danger and --g-accent are themselves re-pointed above (to rose and violet), so these resolve through one extra hop — a dependency chain, not a cycle. */ --motiva-color-danger: var(--g-danger); --motiva-color-disabled-bg: var(--g-bg-input); --motiva-color-disabled-text: var(--g-text-muted); --motiva-color-disabled-border: var(--g-border-light); --motiva-color-focus-ring: var(--g-accent); /* Spacing — all five are no-ops: the Master keeps the existing 4/8/16/24/32 scale, so --g-space-* is deliberately not overridden above. Listed to hold the invariant if that ever changes. */ --motiva-space-xs: var(--g-space-xs); --motiva-space-sm: var(--g-space-sm); --motiva-space-md: var(--g-space-md); --motiva-space-lg: var(--g-space-lg); --motiva-space-xl: var(--g-space-xl); /* Radius — sm/md were wrong (8/12 instead of the Master's 10/14); full is a no-op (999px in both). lg/xl are literals re-declared above and were never affected. */ --motiva-radius-sm: var(--g-radius-sm); --motiva-radius-md: var(--g-radius-md); --motiva-radius-full: var(--g-radius-full); /* Elevation — this is what restores "no drop shadow at rest". */ --motiva-shadow-sm: var(--g-shadow-sm); --motiva-shadow-md: var(--g-shadow-md); --motiva-shadow-lg: var(--g-shadow-lg); /* Typography — the largest visual correction in this block: the whole scale was running at the legacy ~1.8x size. */ --motiva-font-family: var(--g-font-base); --motiva-font-size-caption: var(--g-font-size-xs); --motiva-font-size-sm: var(--g-font-size-sm); --motiva-font-size-md: var(--g-font-size-md); --motiva-font-size-lg: var(--g-font-size-lg); --motiva-font-size-xl: var(--g-font-size-xl); --motiva-font-size-h1: var(--g-type-page-title); --motiva-font-size-h2: var(--g-type-section); --motiva-font-size-h3: var(--g-type-card); --motiva-font-size-h4: var(--g-type-subtitle); --motiva-font-size-body: var(--g-type-body); /* META — dates, counts, team/project names beside a row's title. The hierarchy has always had this step (--g-type-secondary) but no --motiva-* name for it, so ~230 rules restate its value as a literal and drift a half-pixel at a time. Aliased like every size above it. */ --motiva-font-size-meta: var(--g-type-secondary); } /* ================================================================ MOTIVA SCOPE — DARK MODE Required, not optional: .motiva sits on a DESCENDANT of , and a custom property resolves from the nearest declaring ancestor. The light values above would therefore shadow the :root-level dark blocks no matter their specificity. Every colour, shadow and gradient token set above is restated here. Non-colour tokens (typeface, type scale, radii, letter-spacing, motion) need no restatement — these selectors match the SAME element, so anything not redeclared falls through normally. The Master's Profile screen ships a warm-charcoal dark palette, but its own audit marks that as "a palette reference, not a second screen — the light shell is the page to implement." It is therefore NOT adopted as spec here. Dark mode keeps the existing slate neutrals exactly as they are today; only the values whose LIGHT counterpart changed above are given a dark equivalent, so dark mode is preserved rather than redesigned. Adopting the warm-charcoal exploration is an open decision, recorded in MOTIVA_FOUNDATIONS.md. ================================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .motiva { --g-text-primary: #f1f5f9; --g-text-secondary: #94a3b8; --g-text-muted: #64748b; --motiva-text-subtle: #55617a; --g-bg-page: #0f172a; --g-bg-surface: #1e293b; --g-bg-input: #162032; --g-bg-hover: rgba(255, 255, 255, 0.06); --g-border-light: #1e293b; --motiva-border-card: #24324a; --g-border: #334155; --motiva-color-violet: #818cf8; --motiva-color-teal: #2dd4c4; --motiva-color-rose: #f06a90; --motiva-color-rose-ink: #f890ac; --motiva-color-purple: #9b4ff0; --motiva-color-edge-violet: #a78bfa; --g-accent-hover: #a5b4fc; --g-accent-light: rgba(129, 140, 248, 0.16); --g-accent-active-bg: rgba(129, 140, 248, 0.20); --motiva-color-info-bg: rgba(129, 140, 248, 0.16); --motiva-color-success-bg: rgba(45, 212, 196, 0.16); --motiva-color-warning-bg: rgba(240, 106, 144, 0.16); --motiva-color-danger-bg: rgba(240, 106, 144, 0.16); --motiva-color-brand-bg: rgba(129, 140, 248, 0.16); --g-shadow-sm: none; --g-shadow-md: 0 16px 36px rgba(0, 0, 0, 0.45); --g-shadow-lg: 0 32px 70px rgba(0, 0, 0, 0.60); --motiva-gradient-ambient: radial-gradient(circle at 88% 6%, rgba(109, 14, 230, 0.26), transparent 52%), radial-gradient(circle at 4% 96%, rgba(13, 156, 154, 0.18), transparent 50%), linear-gradient(#151b34, #0f172a); --motiva-gradient-ambient-hero: radial-gradient(circle at 88% 4%, rgba(109, 14, 230, 0.30), transparent 52%), radial-gradient(circle at 4% 96%, rgba(13, 156, 154, 0.20), transparent 50%), linear-gradient(#151b34, #0f172a); --motiva-gradient-edge: linear-gradient(92deg, rgba(167, 139, 250, 0.32) 0%, rgba(167, 139, 250, 0.10) 30%, rgba(167, 139, 250, 0.00) 50%, rgba(45, 212, 196, 0.10) 70%, rgba(45, 212, 196, 0.30) 100%); --motiva-gradient-edge-active: linear-gradient(92deg, rgba(167, 139, 250, 0.58) 0%, rgba(167, 139, 250, 0.20) 30%, rgba(167, 139, 250, 0.05) 50%, rgba(45, 212, 196, 0.20) 70%, rgba(45, 212, 196, 0.55) 100%); --motiva-gradient-wash: linear-gradient(92deg, rgba(167, 139, 250, 0.10) 0%, rgba(167, 139, 250, 0.03) 38%, rgba(45, 212, 196, 0.03) 62%, rgba(45, 212, 196, 0.09) 100%); } } /* Explicit dark always wins regardless of system preference — mirrors the [data-theme="dark"] block above for the scope. */ [data-theme="dark"] .motiva { --g-text-primary: #f1f5f9; --g-text-secondary: #94a3b8; --g-text-muted: #64748b; --motiva-text-subtle: #55617a; --g-bg-page: #0f172a; --g-bg-surface: #1e293b; --g-bg-input: #162032; --g-bg-hover: rgba(255, 255, 255, 0.06); --g-border-light: #1e293b; --motiva-border-card: #24324a; --g-border: #334155; --motiva-color-violet: #818cf8; --motiva-color-teal: #2dd4c4; --motiva-color-rose: #f06a90; --motiva-color-rose-ink: #f890ac; --motiva-color-purple: #9b4ff0; --motiva-color-edge-violet: #a78bfa; --g-accent-hover: #a5b4fc; --g-accent-light: rgba(129, 140, 248, 0.16); --g-accent-active-bg: rgba(129, 140, 248, 0.20); --motiva-color-info-bg: rgba(129, 140, 248, 0.16); --motiva-color-success-bg: rgba(45, 212, 196, 0.16); --motiva-color-warning-bg: rgba(240, 106, 144, 0.16); --motiva-color-danger-bg: rgba(240, 106, 144, 0.16); --motiva-color-brand-bg: rgba(129, 140, 248, 0.16); --g-shadow-sm: none; --g-shadow-md: 0 16px 36px rgba(0, 0, 0, 0.45); --g-shadow-lg: 0 32px 70px rgba(0, 0, 0, 0.60); --motiva-gradient-ambient: radial-gradient(circle at 88% 6%, rgba(109, 14, 230, 0.26), transparent 52%), radial-gradient(circle at 4% 96%, rgba(13, 156, 154, 0.18), transparent 50%), linear-gradient(#151b34, #0f172a); --motiva-gradient-ambient-hero: radial-gradient(circle at 88% 4%, rgba(109, 14, 230, 0.30), transparent 52%), radial-gradient(circle at 4% 96%, rgba(13, 156, 154, 0.20), transparent 50%), linear-gradient(#151b34, #0f172a); --motiva-gradient-edge: linear-gradient(92deg, rgba(167, 139, 250, 0.32) 0%, rgba(167, 139, 250, 0.10) 30%, rgba(167, 139, 250, 0.00) 50%, rgba(45, 212, 196, 0.10) 70%, rgba(45, 212, 196, 0.30) 100%); --motiva-gradient-edge-active: linear-gradient(92deg, rgba(167, 139, 250, 0.58) 0%, rgba(167, 139, 250, 0.20) 30%, rgba(167, 139, 250, 0.05) 50%, rgba(45, 212, 196, 0.20) 70%, rgba(45, 212, 196, 0.55) 100%); --motiva-gradient-wash: linear-gradient(92deg, rgba(167, 139, 250, 0.10) 0%, rgba(167, 139, 250, 0.03) 38%, rgba(45, 212, 196, 0.03) 62%, rgba(45, 212, 196, 0.09) 100%); } /* ================================================================ MOTIVA — THE FINAL DESIGN, STUDENT **AND** MENTOR ================================================================ SOURCE OF TRUTH --------------- Claude Design project "Motiva visual language exploration" (69ed4d85-4c23-4abc-83a9-719448d972eb): the `… final.dc.html` student screens and the `Motiva Mentor *.dc.html` screens. See design-reference/motiva-student-final/README.md for the value spec and design-reference/motiva-mentor-final/README.md for the mentor screen map. Where the older boards under design-reference/motiva/ disagree with these values, they are superseded — including the "three semantic colours only" rule and the whole `#4F46E5` violet ramp. `.motiva-final` — WHY THE HOOK CARRIES NO ROLE ----------------------------------------------- This block was `.motiva.motiva-student` while Student was the only experience with a finished design. The mentor screens landed with the SAME values — same canvas gradients, same #6D28F5 / #2E63E8 / #0FA8C2 / #E0335F, same 38px controls, same 999px pills, same 24/26 radii, same Heebo scale — so keeping a student-named hook would have meant either a mentor shell wearing `motiva-student` or a second copy of 141 rules to drift. Neither is a design system. So the hook is `.motiva-final`, and AppLayout puts it on both: `motiva motiva-final motiva-student` / `motiva motiva-final motiva-mentor`. The role classes stay, and still mean what they always meant — the place a genuine role divergence goes. NOT A VALUE CHANGE FOR STUDENTS. The rename kept the compound (`:root .motiva.motiva-student` → `:root .motiva.motiva-final`), so the specificity, the declaration order and every computed value are what they were; students simply match through a differently-named class. The same one-for-one rename was applied to the 140 component rules in the M* stylesheets, NotificationBell and motiva-base. Why not just re-point `.motiva`? Because `.motiva` is (0,1,0) here and the component rules are `.motiva-final .m-card` at (0,2,0); dropping a class from every one of them would put them under the primitives' own base rules. The compound is load-bearing — see the next section. SELECTOR SPECIFICITY — deliberate, not accidental ------------------------------------------------- Written `:root .motiva.motiva-final` (0,3,0) rather than a bare `.motiva-final` (0,1,0), because the dark-mode blocks above are `:root:not([data-theme="light"]) .motiva` (0,3,0) and `[data-theme="dark"] .motiva` (0,2,0). A bare class would lose to both and the palette would half-revert in dark mode. At (0,3,0) this ties the strongest of them and wins on source order, which is why it is the last block in the file. LIGHT ONLY, BY THE DESIGN ------------------------- The final files define one palette. There is no dark variant of the canvas gradient, the translucent card surface or the four semantic roles, and a half-dark workspace would be worse than a light one. So this block pins BOTH finished experiences to their designed palette in every theme — the same call LoginPage already makes for the auth screen. Lecturer / Staff / Admin keep full dark mode. ================================================================ */ :root .motiva.motiva-final { /* ── TYPEFACE ────────────────────────────────────────────── */ --g-font-base: Heebo, 'Assistant', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* ── INK RAMP — five steps ───────────────────────────────── */ --g-text-primary: #1B1A22; --g-text-secondary: #4A4657; --g-text-muted: #6B6779; --motiva-text-subtle: #9B96A8; /* timestamps, placeholders */ --motiva-text-faint: #B4B0BF; /* disabled glyphs, hairlines */ /* ── SURFACES ────────────────────────────────────────────── */ /* The student page is a centred canvas card on a washed body, so "page" and "canvas" are two different surfaces — the first time this system has needed both. */ --g-bg-page: #E9EAEF; --g-bg-surface: #FFFFFF; --g-bg-input: #FBFBFD; --g-bg-hover: rgba(27, 26, 34, 0.035); /* Section cards are translucent over the canvas wash — the wash is what shows through, which is why this is rgba and not a hex. */ --motiva-surface-section: rgba(255, 255, 255, 0.66); --motiva-surface-section-border: rgba(255, 255, 255, 0.85); /* ── THE PRIMARY PANEL ─────────────────────────────────────── The big content surface a finished page is built out of — the Dashboard's cards, the Calendar's day grid, the Requests queue and record, the Tasks queue and rail. IT IS OPAQUE, AND THAT IS THE WHOLE POINT. --motiva-surface-section above is rgba(255,255,255,.66) and lets the canvas's violet radial through, which is right for a small card sitting ON a panel and wrong for the panel itself: at panel size the wash reads as a grey cast, and a page built from them looks faded next to one built from #FFFFFF. Dashboard and the Calendar were already solid — Dashboard by a hard-coded #FFFFFF transcribed from .mh-card, the Calendar via --g-bg-surface — while Requests and Tasks used the translucent token. Same design, three different answers. These three name that one answer so a page reuses it instead of re-deriving it. The values are the Dashboard's, unchanged: solid white, a violet-tinted hairline rather than a grey one so the edge belongs to the brand, and the two-step shadow that lifts a panel off the canvas without drawing a visible border. */ --motiva-panel-surface: var(--g-bg-surface); /* #FFFFFF */ --motiva-panel-border: rgba(109, 40, 245, 0.08); /* violet hairline */ --motiva-panel-shadow: 0 1px 2px rgba(27, 26, 34, 0.04), 0 10px 24px -20px rgba(27, 26, 34, 0.22); /* THE FOURTH VALUE, added in the cross-role consistency pass. The three above named the panel's colour but not its CORNER, so every consumer still picked its own: the two dashboards drew 26px (--motiva-radius-xl), MCard 24px (--motiva-radius-lg), the request workspace a literal 22px. A panel is a section card, so the recipe takes the scale's section-card step and the three now differ in nothing. */ --motiva-panel-radius: var(--motiva-radius-lg); /* 24px */ /* Folded onto the panel fill. It was #FDFDFE — a second, one-shade-off white that existed only because the DEFAULT card was translucent and this named "the opaque exception". The default is the panel now, so a near-white that is 1% away from it is exactly the drift this pass removes. The name stays: `.m-card-solid`, the popovers and the tag recipe all read it. */ --motiva-surface-solid: var(--motiva-panel-surface); --motiva-surface-muted: rgba(255, 255, 255, 0.50); --motiva-surface-muted-border: rgba(255, 255, 255, 0.70); --motiva-surface-chip: rgba(27, 26, 34, 0.045); --motiva-scrim: rgba(27, 26, 34, 0.16); /* ── LINES — three steps ─────────────────────────────────── */ --g-border-light: rgba(27, 26, 34, 0.06); /* row divider */ --motiva-border-card: rgba(27, 26, 34, 0.07); /* section edge */ --g-border: rgba(27, 26, 34, 0.12); /* control edge */ /* ── FOUR SEMANTIC ROLES ─────────────────────────────────── */ /* Not three. The final screens use blue as a distinct role for "in progress / assigned / task", alongside violet for action and cyan for completion. Folding blue onto either loses a real distinction the student reads on every task row. */ --motiva-color-violet: #6D28F5; /* brand · action · current stage */ --motiva-color-blue: #2E63E8; /* in progress · assignee · task */ --motiva-color-teal: #0FA8C2; /* done · synced · team task */ --motiva-color-teal-ink: #0F8FA6; /* teal at label weight */ --motiva-color-rose: #E0335F; /* attention · overdue · destructive */ --motiva-color-rose-ink: #C42B52; /* rose at label weight */ /* Journey stops, in order. Only the stepper reads these. */ --motiva-journey-1: #0FA8C2; --motiva-journey-2: #1E86D5; --motiva-journey-3: #2E63E8; --motiva-journey-4: #4C47EE; --motiva-journey-5: #6D28F5; --motiva-journey-track: #DCD8EA; --motiva-journey-track-future: #E2E0EB; --motiva-journey-dot-future: #CDCAD8; /* Live-connection dot (Google Calendar). Not a status colour — it is the only green in the system and reaches one component. */ --motiva-color-online: #19B27B; /* Legacy alias kept pointing at the live hue, so the existing --motiva-color-indigo references stay correct in this scope. */ --motiva-color-indigo: var(--motiva-color-violet); --motiva-color-purple: var(--motiva-color-violet); --g-accent: var(--motiva-color-violet); --g-accent-hover: #5B1FD6; --g-accent-light: rgba(109, 40, 245, 0.08); --g-accent-active-bg: rgba(109, 40, 245, 0.10); --g-danger: var(--motiva-color-rose); /* Semantic aliases fold onto the four roles above. */ --motiva-color-info: var(--motiva-color-blue); --motiva-color-success: var(--motiva-color-teal); --motiva-color-warning: var(--motiva-color-rose); --motiva-color-danger: var(--motiva-color-rose); /* ── TINTS ───────────────────────────────────────────────── */ --motiva-color-brand-bg: rgba(109, 40, 245, 0.09); --motiva-color-info-bg: rgba(46, 99, 232, 0.10); --motiva-color-success-bg: rgba(15, 168, 194, 0.12); --motiva-color-warning-bg: rgba(224, 51, 95, 0.09); --motiva-color-danger-bg: rgba(224, 51, 95, 0.09); --motiva-color-neutral-bg: rgba(27, 26, 34, 0.05); --motiva-color-focus-ring: rgba(109, 40, 245, 0.35); /* ── GRADIENTS ───────────────────────────────────────────── */ /* `to left` is correct for this RTL product: it runs violet at the reading start to cyan at the reading end. */ --motiva-gradient-signature: linear-gradient(to left, #6D28F5, #2E63E8 60%, #0FA8C2); /* ── THE BRAND TAG ───────────────────────────────────────── */ /* THE ONE RECIPE FOR "A STATUS TAG IN THE BRAND TONE", named so it stops being retyped. It was settled in the Lecturer/Mentor Project Workspace and then re-derived, by hand, at every other tag that needed it — the student dashboard's row-meta pill, the milestone modal's status pills, the submission deliverable's badge. Each copy drifted a little, and each one that was missed stayed a FLAT violet fill: the exact thing this recipe replaced. ITS ORIGINAL SITE NO LONGER USES IT. The Lecturer/Mentor workspace pill moved onto MStatusBadge's own attention rung in the semantic colour pass, because a page-local second drawing of a role the shared component already had is what let the two drift. The token stands: it is still the recipe for a brand-toned TAG, and `.m-row-meta-violet` and SubmissionDeliverableRow still read it. What it is, and why each layer: · padding-box — the brand hue at 4% over the opaque surface, so the interior is a wash. `color-mix` resolves it to a solid: a translucent fill would read straight through to the gradient underneath and turn the whole tag into a coloured banner. · border-box #1 — the system's .66 white, VEILING the ramp to roughly a third of its strength. A saturated 1px ring around 11-13px type is a dark outline before it is an accent. · border-box #2 — the signature ramp itself, so the edge follows the brand token if the brand ever moves. The opaque fill is listed FIRST and therefore paints on top, so the veiled ramp only ever shows where the border is. Three things the consumer still states, because they belong to the tag's own box and not to the recipe: `border: 1px solid transparent` — without it there is no border-box to paint into; `color: var(--motiva-text-primary)` — the label is a label. Violet type inside a violet edge makes the object one colour; one less px of padding on each axis — the border is paid for out of the padding so the tag's outer box does not move. THIS IS NOW THE PRODUCT'S DEFAULT TAG SURFACE, not one screen's treatment. `:root` and `.motiva` carry their own copies (see the :root declaration's block for why three copies are required), and MStatusBadge's informational variants plus every page-local category / type / status pill read it. The copy here is the one Student, Mentor and Lecturer resolve, because all three shells wear `.motiva-final`. Red is deliberately outside it: rose stays a fill. */ --motiva-tag-brand-surface: linear-gradient( color-mix(in srgb, var(--motiva-color-violet, var(--motiva-color-indigo)) 4%, var(--motiva-surface-solid)), color-mix(in srgb, var(--motiva-color-violet, var(--motiva-color-indigo)) 4%, var(--motiva-surface-solid)) ) padding-box, linear-gradient(var(--motiva-surface-section), var(--motiva-surface-section)) border-box, var(--motiva-gradient-signature) border-box; --motiva-gradient-avatar: linear-gradient(140deg, #6D28F5, #2E63E8 55%, #0FA8C2); --motiva-gradient-toggle: linear-gradient(to left, #6D28F5, #2E63E8); /* The body wash, behind the canvas. */ --motiva-gradient-page: radial-gradient(55% 45% at 12% -5%, rgba(109, 40, 245, 0.10), transparent 62%), radial-gradient(60% 50% at 55% 50%, rgba(46, 99, 232, 0.06), transparent 65%), radial-gradient(50% 45% at 95% 105%, rgba(15, 168, 194, 0.10), transparent 62%); /* The canvas card's own wash, over its vertical gradient. */ --motiva-gradient-canvas: radial-gradient(70% 60% at 88% -10%, rgba(109, 40, 245, 0.09), transparent 60%), radial-gradient(60% 55% at 4% 30%, rgba(62, 107, 224, 0.06), transparent 58%), radial-gradient(55% 50% at 60% 115%, rgba(15, 168, 194, 0.08), transparent 60%), linear-gradient(180deg, #F7F7FB, #F3F4F9); /* Kept for any component still reading the old ambient names. */ --motiva-gradient-ambient: var(--motiva-gradient-canvas); --motiva-gradient-ambient-hero: var(--motiva-gradient-canvas); /* ── TYPE SCALE ──────────────────────────────────────────── */ --g-type-page-title: 38px; /* h1 700 */ --g-type-section: 20px; /* section title 700 */ --g-type-card: 16px; /* card / sub-section title 700 */ --g-type-subtitle: 13px; /* field label 600 */ --g-type-body: 14.5px; /* body 500 */ --g-type-secondary: 12.5px; /* meta 400 */ --g-font-size-xs: 11.5px; --g-font-size-sm: 13px; --g-font-size-md: 13.5px; --g-font-size-lg: 15px; --g-font-size-xl: 38px; --motiva-font-size-item: 15px; /* list-row text 500 */ --motiva-font-size-title: 32px; /* profile identity 700 */ /* CONTROLS — a tab, a filter/select value, a medium button. They were three separate literals (13px each) in three primitives, which is how a segmented control and the select beside it end up a pixel apart. One name, so "the things you click" move together. */ --motiva-font-size-control: 13px; /* The numeric bubble on a tab, a nav pill or a section heading. Its own step because it is the one piece of text sized by the disc it sits in rather than by the text around it. */ --motiva-font-size-count: 11px; --motiva-line-height-tight: 1.1; --motiva-line-height-heading: 1.3; --motiva-line-height-body: 1.6; --motiva-line-height-caption: 1.4; --motiva-letter-spacing-page: -0.035em; --motiva-letter-spacing-title: -0.03em; --motiva-letter-spacing-section: -0.02em; /* ── RADII ───────────────────────────────────────────────── */ --g-radius-sm: 12px; /* inputs */ --g-radius-md: 16px; /* inner card */ --g-radius-lg: 24px; /* section card */ --motiva-radius-lg: 24px; --motiva-radius-xl: 26px; /* modal · side panel */ --motiva-radius-popover: 22px; --motiva-radius-card: 18px; /* resource / expanded card */ --motiva-radius-row: 14px; /* notification row */ --motiva-radius-chip: 11px; /* icon chip */ --motiva-radius-tag: 7px; /* calendar event chip */ /* --g-radius-full / --motiva-radius-full unchanged (999px) */ /* ── SHADOWS ─────────────────────────────────────────────── */ --g-shadow-sm: 0 1px 2px rgba(27, 26, 34, 0.04); --g-shadow-md: 0 1px 2px rgba(27, 26, 34, 0.04), 0 14px 30px -26px rgba(27, 26, 34, 0.35); --g-shadow-lg: 0 2px 4px rgba(27, 26, 34, 0.06), 0 30px 60px -30px rgba(27, 26, 34, 0.5); --motiva-shadow-popover: 0 2px 4px rgba(27, 26, 34, 0.05), 0 28px 55px -28px rgba(27, 26, 34, 0.45); --motiva-shadow-pill: 0 1px 2px rgba(27, 26, 34, 0.08); /* ── SHELL GEOMETRY ──────────────────────────────────────── */ /* No sidebar in the final student experience — the rail width and the floating-shell padding are zeroed so the existing shell rules collapse to nothing without being edited. */ --g-sidebar-width: 0px; --g-shell-padding: 0px; /* The reference's outer canvas card is deliberately not reproduced — the workspace is full-viewport (see AppLayout.razor.css). So there is no --motiva-shell-max, no --motiva-radius-shell and no --motiva-shadow-shell: a token for a frame that does not exist would just invite one back. What survives is the canvas's INSET, which is now the page's own content padding, at the reference's values. */ --motiva-shell-padding: 26px; /* modal/panel viewport inset */ --motiva-canvas-padding-block-start: 20px; --motiva-canvas-padding-inline: 28px; --motiva-canvas-padding-block-end: 20px; /* .app-main's inset is the canvas's own padding now. */ --motiva-content-padding-inline: 0px; --motiva-content-padding-block-end: 0px; --motiva-control-height-sm: 34px; --motiva-control-height-md: 38px; /* nav icon circle */ --motiva-control-height-lg: 44px; } /* ================================================================ THE PROJECT-WORKSPACE DESKTOP DENSITY LADDER Declared ONCE, consumed by every project workspace. WHAT IT REPLACES. The Lecturer/Mentor workspace sized itself from viewport HEIGHT alone: `@media (max-height: 880px)` and `(max-height: 800px)` tightened every gap, and a `(min-height: 881px)` block was the only thing that ever loosened them. A perfectly ordinary browser window is about 800px tall, so BOTH tightening bands fired and the loosening one could not — on any monitor, at any width. A 1633px-wide workspace rendered at 9px gaps and 9px card padding: 1366x768 laptop density, on a desktop. That is the "too small on a large screen" bug, and it had no width term in it at all. Those height rules were written to make the page fit exactly one viewport, feeding the flex fill chain in ProjectWorkspace.razor.css. That chain is gone (a card's height is its content's now), so the compression was buying nothing: the page measured scrollHeight === clientHeight with 50px to spare while being squeezed. THE REFERENCE IS THE STUDENT WORKSPACE. /project has always separated its blocks at 22px and reads comfortably; the shared Lecturer/Mentor component did not. So 22px is the >=1440 rung, and the ladder is built around it rather than around a new number. Student keeps its own values below 1920 — see ProjectWorkspacePage's `max(22px, ...)` — because it is the thing being matched, not the thing being changed. WIDTH ONLY. Height decides one thing now, further down: whether a genuinely short window gets the compact fallback. NOT A CONTAINER WIDTH. The shell is already uncapped — 28px gutters, `max-width: none` at every level from .app-shell-student down to .pw — and nothing here changes that. This ladder scales the CONTENT so a full-width page stops reading as a small UI stretched across a monitor. ================================================================ */ :root .motiva.motiva-final { /* Rhythm */ --motiva-ws-band-gap: 14px; /* between bands, and between cards in one */ --motiva-ws-card-pad-block-start: 12px; --motiva-ws-card-pad-block-end: 10px; --motiva-ws-card-pad-inline: 20px; --motiva-ws-card-head-gap: 12px; /* air under a card's heading */ --motiva-ws-row-pad-block: 10px; --motiva-ws-head-pad-block: 10px; /* the project summary card */ --motiva-ws-stage-gap: 10px; /* the milestone strip */ /* Type. These are the ONE place the workspace's row scale is set, which is also what converges the roles: `.motiva-mentor` rebases --motiva-font-size-item to 16px and --g-font-size-xs to 13px for the whole mentor shell, so the SAME shared component rendered 16px/13px rows for a Mentor and 15px/11.5px for a Lecturer or an Admin. Reading these tokens instead means both land on the same number inside the workspace, without touching either role's other screens. */ /* TYPE COMES FROM THE PRODUCT SCALE, NOT FROM THIS LADDER. These three were their own width-keyed sizes (15/16/16.5 title, 11.5–13 meta, 38–44 page title), which made the project workspace's rows and heading disagree with the identical rows and headings on every other screen. The ladder still owns the workspace's SPACING rungs below — gaps, insets, row padding — which is what it was built for; only the sizes now defer. */ --motiva-ws-row-title-size: var(--motiva-font-size-item); --motiva-ws-row-meta-size: var(--motiva-font-size-meta); --motiva-ws-title-size: var(--motiva-font-size-h1); } /* Laptop desktop. */ @media (min-width: 1280px) { :root .motiva.motiva-final { --motiva-ws-band-gap: 18px; --motiva-ws-card-pad-block-start: 14px; --motiva-ws-card-pad-block-end: 12px; --motiva-ws-card-pad-inline: 22px; --motiva-ws-card-head-gap: 14px; --motiva-ws-row-pad-block: 11px; --motiva-ws-head-pad-block: 12px; --motiva-ws-stage-gap: 11px; } } /* THE STUDENT RUNG. 22px is /project's own measure, and from here up the three roles separate their blocks at the same distance. */ @media (min-width: 1440px) { :root .motiva.motiva-final { --motiva-ws-band-gap: 22px; --motiva-ws-card-pad-block-start: 16px; --motiva-ws-card-pad-block-end: 14px; --motiva-ws-card-pad-inline: 24px; --motiva-ws-card-head-gap: 16px; --motiva-ws-row-pad-block: 12px; --motiva-ws-head-pad-block: 14px; --motiva-ws-stage-gap: 12px; } } /* Wide desktop. The band gap HOLDS at 22px — past this point the page gains presence from the cards' own inset and from type, not from pushing its blocks further apart, which is how a layout starts to look sparse rather than generous. */ @media (min-width: 1600px) { :root .motiva.motiva-final { --motiva-ws-card-pad-block-start: 18px; --motiva-ws-card-pad-block-end: 15px; --motiva-ws-card-pad-inline: 26px; --motiva-ws-card-head-gap: 18px; --motiva-ws-row-pad-block: 13px; --motiva-ws-head-pad-block: 16px; --motiva-ws-stage-gap: 14px; } } /* Very wide. The top rung, and the only one that moves the Student workspace at all. */ @media (min-width: 1920px) { :root .motiva.motiva-final { --motiva-ws-band-gap: 26px; --motiva-ws-card-pad-block-start: 20px; --motiva-ws-card-pad-block-end: 17px; --motiva-ws-card-pad-inline: 28px; --motiva-ws-row-pad-block: 14px; --motiva-ws-head-pad-block: 18px; --motiva-ws-stage-gap: 16px; } } /* THE COMPACT FALLBACK, AND THE ONLY HEIGHT RULE LEFT. 760px is a genuinely short window — a split screen, or a 1366x768 laptop once browser chrome is taken off (~660px viewport). An ordinary desktop window is ~800px and no longer qualifies, which is the entire bug above. Declared last so it wins over every width rung at equal specificity: a short window is compact however wide it is. */ @media (max-height: 760px) { :root .motiva.motiva-final { --motiva-ws-band-gap: 12px; --motiva-ws-card-pad-block-start: 11px; --motiva-ws-card-pad-block-end: 9px; --motiva-ws-card-head-gap: 12px; --motiva-ws-row-pad-block: 9px; --motiva-ws-head-pad-block: 10px; --motiva-ws-stage-gap: 10px; } } /* ================================================================ MOTIVA — LECTURER THERE IS NO LECTURER TOKEN BLOCK ANY MORE, AND THAT IS THE FIX. There used to be one. It restated four canvas-padding values, the two zeroed sidebar tokens and three nav-chrome tokens (--motiva-surface-chip, --motiva-shadow-pill, --motiva-gradient-avatar), each copied verbatim out of the block above with a comment saying so — because Lecturer wore `.motiva` alone and those variables are declared only in the finished scope. It could only ever restate the tokens someone remembered to copy. The ones nobody did were the geometry: `.motiva` declares --motiva-radius-xl at 24px and --motiva-control-height-md at 40px, while the finished design is 26px and 38px. So the Lecturer chrome drew 40px icon circles beside 38px ones on every other screen, at the wrong corner radius, over the wrong ink ramp (--motiva-text-subtle #B7B2C2 rather than #9B96A8). AppLayout now gives Lecturer `motiva motiva-final motiva-lecturer`, exactly as Student and Mentor get their own third class. Every value this block used to copy is inherited from `:root .motiva.motiva-final` above, at one declaration — and so is everything it could not know to copy. `.motiva-lecturer` itself is unchanged in meaning and still on the shell root: it is the role hook, the place a genuine Lecturer-only divergence goes. It simply has nothing in it, which is the correct state for a role that does not diverge. ================================================================ */ /* ================================================================ THE DESKTOP TYPE SCALE — ONE SCALE, EVERY ROLE The parity pass above proved the product had one scale and that one role had been lifted off it. This raises THAT scale, for everybody, to the sizes the finished product is meant to read at. It is the other half of the same decision: the mentor rebase was not wrong about 11.5px being too small for a number someone triages on — it was wrong about that being a property of one shell. BEFORE → AFTER, and every one of these is a raise: --g-type-section 20 → 22 section heading --g-type-card 16 → 18 card heading --g-type-body 14.5 → 15.5 body / descriptive text --g-type-subtitle 13 → 14 field label, secondary --g-type-secondary 12.5 → 13.5 metadata (= --motiva-font-size-meta) --g-font-size-xs 11.5 → 13 badges, tags, pills (= -caption) --g-font-size-sm 13 → 14 secondary text --g-font-size-md 13.5 → 14.5 --g-font-size-lg 15 → 16 --motiva-font-size-item 15 → 17 primary list/row title --motiva-font-size-control 13 → 15 tabs, filters/selects, buttons --motiva-font-size-count 11 → 12.5 count bubbles --g-type-page-title (38px) and --g-font-size-xl (38px) are ALREADY inside the 36–40 target and do not move. The page titles that render smaller than 38 do so because MPageHeaderCard pins its own literals, which is fixed there rather than here. WHY THE ALIASES NEED NO EDIT. --motiva-font-size-caption / -sm / -md / -lg / -h2 / -h3 / -h4 / -body / -meta are declared as `var(--g-…)`, and a custom property resolves against the element it is USED on — so re-pointing the --g-* primitives on the shell root re-points every --motiva-font-size-* with them, everywhere, at one declaration. DESKTOP ONLY, and that is what the media query is for. The base declarations above keep their values, so phone and tablet render exactly the type they do today; ≥1024px gets the raised scale. The breakpoint is a viewport WIDTH and nothing else — no layout, spacing, padding, weight or colour is touched at it. NO ROLE SCOPE. Deliberately `.motiva.motiva-final`, which Student, Mentor, Lecturer and Admin all wear. Reintroducing a per-role size here would undo the parity pass; the tombstone below says why. ================================================================ */ @media (min-width: 1024px) { :root .motiva.motiva-final { --g-type-section: 22px; --g-type-card: 18px; --g-type-subtitle: 14px; --g-type-body: 15.5px; --g-type-secondary: 13.5px; --g-font-size-xs: 13px; --g-font-size-sm: 14px; --g-font-size-md: 14.5px; --g-font-size-lg: 16px; --motiva-font-size-item: 17px; --motiva-font-size-control: 15px; --motiva-font-size-count: 12.5px; } } /* ================================================================ MENTOR TYPOGRAPHY SCALE — REMOVED. `.motiva-mentor` NO LONGER RE-SIZES ANYTHING. WHAT WAS HERE. A complete one-step type rebase for the mentor shell and nothing else: nine token redefinitions --g-type-card 16→17 --g-font-size-xs 11.5→13 --g-type-subtitle 13→13.5 --g-font-size-sm 13→14 --g-type-body 14.5→15.5 --g-font-size-md 13.5→14.5 --g-type-secondary 12.5→13.5 --g-font-size-lg 15→16 --motiva-font-size-item 15→16 plus ~12 literal rules for the components the tokens could not reach (MFilterTabs, .motiva-count, the bell badge, the profile menu, and five .mdash-page classes on the shared dashboard). WHY IT IS GONE. It was the ONLY role-scoped type divergence in the product, and therefore the whole of the cross-role inconsistency. `.motiva-student` and `.motiva-lecturer` declare no font-size at all, and there is no `.motiva-admin` scope — an Admin renders in the Lecturer shell (NavDefinitions.GetShell). So the same shared component drew one size for a Mentor and another for everyone else: row title 16 / 15 row secondary 14 / 13 row metadata 13.5 / 12.5 tabs 14.5 / 13 tag 13 / 11.5 badge 13 / 11.5 count 12.5 / 11 The original reasoning — that the console's quietest text was below the point where it stays readable — is not wrong, and it is not being dismissed here. It is being re-scoped: if 11.5px is too small for a mentor reading how many days a submission has waited, it is too small for a lecturer reading the same number on the same component. That is a decision about the PRODUCT's scale, to be made once for every role, not a property of one shell. It belongs to the scale-up pass, which is deliberately separate: 1,741 font sizes in the product are hardcoded px against 493 that read a token, so raising the tokens alone would move the token-driven half of a screen and leave the other half behind. This block's removal is parity only — no absolute size changes value. TWO GEOMETRY VALUES WENT WITH THEIR TYPE, and only because they existed to hold it: .motiva-count's disc (20px back to the shared 18px, which is what an 11px digit needs rather than a 12.5px one) and .mdash-wait-tag's padding-inline (11px back to 10px, widened to keep the pill in proportion around 13px text that is now 11.5px again). Both return to the value every other role already draws. A THIRD was already a no-op and is worth recording so nobody re-adds it: the removed MFilterTabs rule also set `padding-inline: 16px` with a comment reading "was 15", but MFilterTabs.razor.css:50 declares 16px itself — measured identical for every role before and after. Only its font-size (14.5px) was ever doing anything. Nothing else about layout, spacing, weight or colour is touched. `.motiva-mentor` stays on the shell root as the role hook — the place a genuine Mentor-only divergence would go — in the same state `.motiva-lecturer` is in: present, and empty. ================================================================ */