/* * Design tokens — the single place to re-theme the plugin. * * Every screen stylesheet declares its own variables (--sp-annc-ink, * --sp-student-accent, --sp-results-border, …) and those declarations point at * the tokens below. Change a token here and the admin screens, the student * portal and the teacher portal all follow at once. * * Namespace: --sp-theme-*. The screen variables keep their own --sp-* names, so * nothing here can resolve to itself. * * Loaded before every other plugin stylesheet (see admin-menu.php, * portal-render.php and teacher-render.php). */ /* --------------------------------------------------------------------------- * Typefaces * Manrope (headings, figures) and Inter (body, labels), self-hosted so the * plugin keeps working without a CDN or network access. * ------------------------------------------------------------------------ */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin.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: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/manrope-latin.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: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/jakarta-latin.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: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/jakarta-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ── Type ─────────────────────────────────────────────────────────────── * Manrope for headings and figures, Inter for copy, labels and tables. */ --sp-theme-font-head: "Plus Jakarta Sans", "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --sp-theme-font-body: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* ── Brand (saffron) ──────────────────────────────────────────────────── * Primary actions, active states, links and focus rings. The shallow pair * (bright → brand) powers the hero and primary-button gradients. */ --sp-theme-brand: #e67300; /* primary action / active tab */ --sp-theme-brand-bright: #ff9933; /* gradient start, highlights */ --sp-theme-brand-strong: #bd5300; /* hover / pressed */ --sp-theme-brand-deep: #964107; /* text on tinted surfaces */ --sp-theme-brand-ink: #7a360a; /* darkest brand — deep stops */ --sp-theme-brand-soft: #fff8f0; /* active nav, chips, icon tiles */ --sp-theme-brand-wash: #fffbf5; /* large tinted areas, info panels */ --sp-theme-brand-line: #ffeed9; /* borders around brand-tinted blocks */ --sp-theme-on-brand: #ffffff; /* text/icons on a brand fill */ /* ── Structural navy ──────────────────────────────────────────────────── * Hero banner, sidebar promo card, dark tiles and high-priority chips. */ --sp-theme-navy: #0a192f; --sp-theme-navy-soft: #132746; --sp-theme-navy-line: #1e293b; /* ── Accent (burnt amber) ─────────────────────────────────────────────── * Secondary highlights: quiz metadata, certificates, badges. */ --sp-theme-accent: #bd5300; --sp-theme-accent-strong: #964107; --sp-theme-accent-ink: #7a360a; --sp-theme-accent-soft: #ffeed9; /* ── Ink ──────────────────────────────────────────────────────────────── * Midnight navy headings down to slate placeholders. */ --sp-theme-ink: #0a192f; /* headings, primary text, dark cards */ --sp-theme-ink-2: #334155; /* body text, table cells */ --sp-theme-muted: #64748b; /* labels, secondary text */ --sp-theme-faint: #94a3b8; /* placeholders, captions, disabled */ /* ── Slate ────────────────────────────────────────────────────────────── * Cool-grey accent for the profile banner and hover states. */ --sp-theme-slate-50: #f8fafc; --sp-theme-slate-100: #f1f5f9; --sp-theme-slate-200: #e2e8f0; --sp-theme-slate-300: #cbd5e1; --sp-theme-slate-400: #94a3b8; --sp-theme-slate-500: #64748b; --sp-theme-slate-600: #475569; --sp-theme-slate-700: #334155; --sp-theme-slate-800: #1e293b; --sp-theme-slate-900: #0f172a; --sp-theme-hero-from: var(--sp-theme-slate-900); --sp-theme-hero-to: var(--sp-theme-slate-700); --sp-theme-hover-bg: var(--sp-theme-slate-100); --sp-theme-hover-border: var(--sp-theme-slate-300); --sp-theme-hover-ink: var(--sp-theme-slate-800); /* ── Surfaces ─────────────────────────────────────────────────────────── * Page canvas down to the faintest wash used on cards. */ --sp-theme-bg: #f8fafc; /* page background behind panels */ --sp-theme-surface: #ffffff; /* cards, tables, inputs */ --sp-theme-surface-soft: #f1f5f9; /* table heads, subtle tracks */ --sp-theme-surface-tint: #f8fafc; /* section washes */ --sp-theme-surface-hover: #f8fafc; /* row / item hover */ --sp-theme-surface-alt: #f1f5f9; /* neutral (non-warm) alt rows */ /* ── Lines ────────────────────────────────────────────────────────────── * Borders, dividers and separators, strongest to faintest. */ --sp-theme-border-strong: #cbd5e1; /* input borders, emphasised edges */ --sp-theme-border: #e2e8f0; /* default card / table border */ --sp-theme-border-subtle: #f1f5f9; /* row dividers, inner lines */ /* ── Success ──────────────────────────────────────────────────────────── * Present / active / saved states. */ --sp-theme-success: #059669; --sp-theme-success-strong: #047857; --sp-theme-success-ink: #065f46; /* text on success tint */ --sp-theme-success-soft: #ecfdf5; /* chips / rows */ --sp-theme-success-tint: #d1fae5; /* badges / meters */ --sp-theme-success-line: #a7f3d0; /* ── Warning ──────────────────────────────────────────────────────────── * Pending, expiring, attention states. */ --sp-theme-warn: #d97706; --sp-theme-warn-strong: #b45309; --sp-theme-warn-ink: #92400e; --sp-theme-warn-soft: #fffbeb; --sp-theme-warn-tint: #fef3c7; --sp-theme-warn-line: #fde68a; /* ── Danger ───────────────────────────────────────────────────────────── * Errors, delete actions, expired states. */ --sp-theme-danger: #dc2626; --sp-theme-danger-strong: #b91c1c; --sp-theme-danger-ink: #93000a; --sp-theme-danger-soft: #fef2f2; --sp-theme-danger-tint: #fee2e2; --sp-theme-danger-line: #fecaca; /* ── Geometry ─────────────────────────────────────────────────────────── * Outer island cards 16px, inner panels/tables 12px, controls 8px, chips * fully rounded. Screen variables (--sp-*-radius) point here. */ --sp-theme-radius-sm: 8px; --sp-theme-radius-md: 12px; --sp-theme-radius-lg: 16px; --sp-theme-radius-xl: 16px; --sp-theme-radius-2xl: 16px; --sp-theme-radius-3xl: 24px; /* dashboard islands and hero banners */ --sp-theme-radius-pill: 9999px; /* ── Depth ────────────────────────────────────────────────────────────── * Ambient slate shadows and the saffron focus ring. */ --sp-theme-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05); --sp-theme-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05); --sp-theme-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05); --sp-theme-shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.04); --sp-theme-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.08); --sp-theme-shadow-card: 0 2px 10px -2px rgba(15, 23, 42, 0.05), 0 1px 3px -1px rgba(15, 23, 42, 0.06); --sp-theme-shadow-navy: 0 20px 25px -5px rgba(10, 25, 47, 0.3); --sp-theme-ring: 0 0 0 3px rgba(255, 153, 51, 0.25); /* ── Spacing ──────────────────────────────────────────────────────────── * Rhythm for future layout work. Existing screens use their own values. */ --sp-theme-gutter: 1.5rem; --sp-theme-gutter-mobile: 0.75rem; --sp-theme-margin: 2rem; --sp-theme-margin-mobile: 1rem; --sp-theme-space-xs: 0.25rem; --sp-theme-space-sm: 0.5rem; --sp-theme-space-md: 1rem; --sp-theme-space-lg: 1.5rem; --sp-theme-space-xl: 2rem; --sp-theme-space-2xl: 3rem; } /* * ── Presets ─────────────────────────────────────────────────────────────── * To switch the theme, copy one block's values up into :root, or scope it to * a class and add that class to the portal shell. Each block only needs the * tokens that differ from the defaults. * * Indigo: * :root { * --sp-theme-brand: #3858d6; * --sp-theme-brand-strong: #2947bf; * --sp-theme-brand-deep: #1e3a8a; * --sp-theme-brand-ink: #172554; * --sp-theme-brand-soft: #edf1ff; * --sp-theme-brand-wash: #f0f6fc; * --sp-theme-brand-line: #d6dcea; * --sp-theme-ring: 0 0 0 3px rgba(56, 88, 214, 0.22); * } * * Emerald: * :root { * --sp-theme-brand: #0f766e; * --sp-theme-brand-strong: #115e59; * --sp-theme-brand-deep: #134e4a; * --sp-theme-brand-ink: #042f2e; * --sp-theme-brand-soft: #e6fffb; * --sp-theme-brand-wash: #f0fdfa; * --sp-theme-brand-line: #cceee9; * --sp-theme-ring: 0 0 0 3px rgba(15, 118, 110, 0.22); * } */