/* * MC LearnPress UI — design tokens * Plan §3 (Figma variables) + §7.1 (breakpoints). * * Handle: mc-lp-tokens. Every other stylesheet depends on this one, directly or * through mc-lp-base. Component stylesheets must consume variables only — no raw * hex values anywhere downstream. * * ============================================================================ * BREAKPOINTS — HARD-CODE THESE NUMBERS * ============================================================================ * CSS custom properties do NOT work inside @media queries. `--mc-bp-*` below is * published for JS and for `env()`-free calc() use only. In stylesheets, write * the raw pixel values: * * sm 640px @media (min-width: 640px) * md 768px @media (min-width: 768px) * lg 1024px @media (min-width: 1024px) * xl 1280px @media (min-width: 1280px) * * Mobile-first: author the small layout first, then add min-width blocks. * Grid targets per plan §7.1: * archive grid 4 col ≥1280 · 3 col ≥1024 · 2 col ≥768 · 1 col <768 * instructor 3 col ≥1024 · 2 col ≥768 · 1 col <768 * reviews grid 2 col ≥768 · 1 col <768 * single course 2 col ≥1024 · 1 col <1024 (purchase card above tabs) * * ============================================================================ * RTL * ============================================================================ * Use logical properties only: margin-inline-*, padding-inline-*, inset-inline-*, * border-inline-*. Never left/right. Directional icons take `.mc-icon--dir`, * which base.css flips under [dir="rtl"]. * ============================================================================ */ :root { /* -------------------------------------------------------------------- * Colour — brand * ------------------------------------------------------------------ */ --mc-color-dark-blue-600: #0a1f4b; --mc-color-dark-blue-500: #0f3176; --mc-color-dark-blue: #0c275e; --mc-color-dark-blue-400: #3d527e; --mc-color-dark-blue-300: #647598; /* Colour — accent */ --mc-color-yellow: #fac925; --mc-color-yellow-500: #efb100; --mc-color-yellow-600: #d08700; /* Colour — neutral */ --mc-color-white: #ffffff; --mc-color-gray-100: #f3f4f6; --mc-color-gray-300: #bbc3cf; --mc-color-slate-100: #f1f5f9; --mc-color-slate-200: #e2e8f0; --mc-color-slate-300: #cad5e2; --mc-color-slate-500: #62748e; --mc-color-slate-600: #45556c; --mc-color-control-border: #dedede; /* Colour — semantic */ --mc-color-red-700: #c10007; --mc-color-red: #d04e59; --mc-color-blue-50: #eff6ff; /* Figma fill for the current curriculum row — the missing ramp step between blue-50 and the dark blues. */ --mc-color-blue-100: #dbeafe; --mc-color-blue-accent: #0045ff; /* Colour — roles. Prefer these in components; they re-point in one place. */ --mc-color-primary: var(--mc-color-dark-blue-500); --mc-color-primary-hover: var(--mc-color-dark-blue-600); --mc-color-accent: var(--mc-color-yellow); --mc-color-danger: var(--mc-color-red-700); --mc-color-text: var(--mc-color-dark-blue); --mc-color-text-muted: var(--mc-color-slate-500); --mc-color-text-subtle: var(--mc-color-dark-blue-300); --mc-color-text-invert: var(--mc-color-white); --mc-color-bg: var(--mc-color-white); --mc-color-surface: var(--mc-color-slate-100); --mc-color-surface-alt: var(--mc-color-blue-50); --mc-color-border: var(--mc-color-slate-200); --mc-color-border-strong: var(--mc-color-slate-300); --mc-color-star: var(--mc-color-yellow-500); --mc-color-star-empty: var(--mc-color-slate-300); --mc-color-focus: var(--mc-color-blue-accent); /* -------------------------------------------------------------------- * Spacing — Figma scale (1.5=6 · 2=8 · 3.5=14 · 4=16 · 5=20 · 6=24) * ------------------------------------------------------------------ */ --mc-space-0: 0; --mc-space-1: 4px; --mc-space-1-5: 6px; --mc-space-2: 8px; --mc-space-3: 12px; --mc-space-3-5: 14px; --mc-space-4: 16px; --mc-space-5: 20px; --mc-space-6: 24px; --mc-space-8: 32px; --mc-space-10: 40px; --mc-space-12: 48px; --mc-space-16: 64px; --mc-space-20: 80px; /* -------------------------------------------------------------------- * Typography * ------------------------------------------------------------------ */ --mc-font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Arabic", "Tahoma", sans-serif; --mc-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --mc-font-size-xs: 12px; --mc-font-size-sm: 14px; --mc-font-size-base: 16px; --mc-font-size-lg: 18px; --mc-font-size-xl: 20px; --mc-font-size-2xl: 24px; /* Not in the Figma variable set; derived for page headings. */ --mc-font-size-3xl: 30px; --mc-font-size-4xl: 36px; --mc-leading-xs: 16px; --mc-leading-sm: 20px; --mc-leading-base: 24px; --mc-leading-lg: 28px; --mc-leading-xl: 28px; --mc-leading-2xl: 32px; --mc-leading-3xl: 38px; --mc-leading-4xl: 44px; --mc-leading-tight: 1.2; --mc-leading-body: 1.6; --mc-font-weight-regular: 400; --mc-font-weight-medium: 500; --mc-font-weight-semibold: 600; --mc-font-weight-bold: 700; --mc-font-weight-extrabold: 800; /* -------------------------------------------------------------------- * Radius * ------------------------------------------------------------------ */ --mc-radius-none: 0; --mc-radius-sm: 4px; --mc-radius-md: 8px; --mc-radius-lg: 12px; --mc-radius-xl: 16px; --mc-radius-2xl: 24px; --mc-radius-full: 9999px; /* -------------------------------------------------------------------- * Effects * ------------------------------------------------------------------ */ --mc-blur-xl: 24px; --mc-blur-2xl: 40px; --mc-shadow-sm: 0 1px 2px rgba(12, 39, 94, 0.06); --mc-shadow-md: 0 4px 12px rgba(12, 39, 94, 0.08); --mc-shadow-lg: 0 12px 32px rgba(12, 39, 94, 0.12); --mc-shadow-card: 0 2px 10px rgba(12, 39, 94, 0.07); --mc-ring: 0 0 0 3px rgba(0, 69, 255, 0.35); --mc-transition-fast: 120ms ease; --mc-transition: 200ms ease; /* -------------------------------------------------------------------- * Layout * ------------------------------------------------------------------ */ --mc-container: 1200px; --mc-container-gutter: var(--mc-space-4); /* Sticky offset for the purchase card / player sidebar. Themes with a fixed header should override this one variable. */ --mc-sticky-top: var(--mc-space-6); /* * Height of the site header, which is theme-owned and therefore unknown to * this plugin. Sticky elements add it to --mc-sticky-top so they clear a * `position: fixed` header instead of sliding under it. * * Set to 0px when the theme header scrolls away with the page, or to the * measured height when it does not. */ --mc-lp-header-height: 64px; /* -------------------------------------------------------------------- * Breakpoints — published for JS/calc only, NOT usable in @media. * See the comment block at the top of this file. * ------------------------------------------------------------------ */ --mc-bp-sm: 640px; --mc-bp-md: 768px; --mc-bp-lg: 1024px; --mc-bp-xl: 1280px; /* -------------------------------------------------------------------- * Component sizing * ------------------------------------------------------------------ */ --mc-icon-size: 20px; --mc-icon-size-sm: 16px; --mc-icon-size-lg: 24px; --mc-tap-target: 44px; /* 40px, measured independently on the card CTA, the player nav and the sidebar CTA. The previous 48px matched nothing in the design. */ --mc-btn-height: 40px; --mc-btn-height-sm: 36px; }