/* * MC LearnPress UI — base layer * Handle: mc-lp-base (depends on mc-lp-fonts, mc-lp-tokens) * * Contents * 1. Font face * 2. Scoped reset .mc-lp * 3. Container & layout * 4. Utilities * 5. Primitives .mc-btn .mc-chip .mc-card .mc-badge .mc-stars * .mc-progress .mc-accordion .mc-icon * 6. RTL * 7. Motion & print * * RULES FOR EVERY DOWNSTREAM STYLESHEET * · Logical properties only — margin-inline-*, padding-inline-*, inset-inline-*, * border-inline-*. Never left / right. * · Variables only — no raw hex, no raw px for spacing/typography. * · Breakpoints are hard-coded px: 640 / 768 / 1024 / 1280 (see tokens.css). * · Everything is scoped under `.mc-lp`, which MC_LP_Assets adds to . */ /* ========================================================================== 1. Font face The Cairo web font is enqueued separately (handle `mc-lp-fonts`, filter `mc_lp_ui/font_url`). No binaries are bundled. These @font-face rules are a no-op unless the active theme happens to self-host Cairo at the conventional path, and exist so a theme drop-in works without extra config. ========================================================================== */ @supports (font-variation-settings: normal) { /* Variable-font hosts are handled by the enqueued stylesheet. */ } /* ========================================================================== 2. Scoped reset ========================================================================== */ .mc-lp { font-family: var(--mc-font-family); font-size: var(--mc-font-size-base); line-height: var(--mc-leading-body); color: var(--mc-color-text); /* Figma uses Western digits throughout (4.8, EGP40,413.42). */ font-variant-numeric: lining-nums tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mc-lp *, .mc-lp *::before, .mc-lp *::after { box-sizing: border-box; } /* * Element defaults are wrapped in :where() so they carry ZERO specificity. * * Previously these were written as `.mc-lp a`, `.mc-lp h2`, `.mc-lp p` … which * is (0,1,1) — that BEATS a single component class like `.mc-course-card__cta` * (0,1,0). The result was silent, screen-wide breakage: `.mc-lp a` repainted the * course card's CTA label dark blue on a dark blue button, `.mc-lp h2` overrode * every measured heading size on the instructor page with its clamped 3vw value, * and `.mc-lp ul` overrode component padding. * * With :where() these become plain defaults that any component rule overrides, * which is what a base layer is supposed to be. Do not "fix" this by adding * specificity back here — raise it in the component instead. */ :where(.mc-lp img, .mc-lp svg, .mc-lp video, .mc-lp iframe) { max-width: 100%; } :where(.mc-lp img, .mc-lp video) { height: auto; display: block; } :where(.mc-lp h1, .mc-lp h2, .mc-lp h3, .mc-lp h4, .mc-lp h5, .mc-lp h6) { margin: 0; font-family: inherit; font-weight: var(--mc-font-weight-bold); line-height: var(--mc-leading-tight); color: var(--mc-color-text); } :where(.mc-lp h1) { font-size: clamp(var(--mc-font-size-2xl), 4vw, var(--mc-font-size-4xl)); } :where(.mc-lp h2) { font-size: clamp(var(--mc-font-size-xl), 3vw, var(--mc-font-size-3xl)); } :where(.mc-lp h3) { font-size: var(--mc-font-size-2xl); } :where(.mc-lp h4) { font-size: var(--mc-font-size-xl); } :where(.mc-lp h5) { font-size: var(--mc-font-size-lg); } :where(.mc-lp h6) { font-size: var(--mc-font-size-base); } :where(.mc-lp p) { margin: 0 0 var(--mc-space-4); } :where(.mc-lp p:last-child) { margin-block-end: 0; } :where(.mc-lp a) { color: var(--mc-color-primary); text-decoration: none; transition: color var(--mc-transition-fast); } :where(.mc-lp a:hover, .mc-lp a:focus-visible) { color: var(--mc-color-primary-hover); } :where(.mc-lp ul, .mc-lp ol) { margin: 0; padding-inline-start: var(--mc-space-5); } /* Real class, so it still beats the zero-specificity list default above. */ :where(.mc-lp) .mc-list-plain { list-style: none; padding-inline-start: 0; } :where(.mc-lp figure) { margin: 0; } :where(.mc-lp button, .mc-lp input, .mc-lp select, .mc-lp textarea) { font: inherit; color: inherit; } .mc-lp :focus-visible { outline: 2px solid var(--mc-color-focus); outline-offset: 2px; border-radius: var(--mc-radius-sm); } .mc-lp table { border-collapse: collapse; width: 100%; } /* ========================================================================== 3. Container & layout ========================================================================== */ .mc-container { width: 100%; max-width: var(--mc-container); margin-inline: auto; padding-inline: var(--mc-container-gutter); } @media (min-width: 768px) { :root { --mc-container-gutter: var(--mc-space-6); } } .mc-stack > * + * { margin-block-start: var(--mc-space-4); } .mc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-space-2); } .mc-grid { display: grid; gap: var(--mc-space-5); } .mc-section { margin-block: var(--mc-space-10); } .mc-section__title { margin-block-end: var(--mc-space-5); font-size: var(--mc-font-size-2xl); line-height: var(--mc-leading-2xl); font-weight: var(--mc-font-weight-bold); } /* Sticky elements drop below md, per plan §7.1. */ .mc-sticky { position: static; } @media (min-width: 1024px) { .mc-sticky { position: sticky; /* * Must clear the theme's header. `position: sticky` always creates a * stacking context, so a sticky card paints in the positioned layer at * `z-index: auto` — and beats an earlier `position: fixed` header on * document order alone. A z-index cannot fix that tie; the offset has to * be geometric. See --mc-lp-header-height in tokens.css. */ inset-block-start: calc(var(--mc-lp-header-height, 0px) + var(--mc-sticky-top)); } } /* ========================================================================== 4. Utilities ========================================================================== */ .mc-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .mc-visually-hidden:focus-within, .mc-visually-hidden.is-focusable:focus { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } .mc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-clamp-2, .mc-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .mc-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; } .mc-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; } .mc-muted { color: var(--mc-color-text-muted); } .mc-subtle { color: var(--mc-color-text-subtle); } .mc-text-sm { font-size: var(--mc-font-size-sm); line-height: var(--mc-leading-sm); } .mc-text-xs { font-size: var(--mc-font-size-xs); line-height: var(--mc-leading-xs); } /* Any wide child (tables, code, diagrams) scrolls inside itself, never the page. */ .mc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* ========================================================================== 5. Primitives ========================================================================== */ /* --- 5.1 Icons ----------------------------------------------------------- */ .mc-icon { width: var(--mc-icon-size); height: var(--mc-icon-size); flex: none; display: inline-block; vertical-align: middle; fill: currentColor; stroke: none; pointer-events: none; } .mc-icon--sm { width: var(--mc-icon-size-sm); height: var(--mc-icon-size-sm); } .mc-icon--lg { width: var(--mc-icon-size-lg); height: var(--mc-icon-size-lg); } /* Directional glyphs: chevrons, arrows, breadcrumb separators. Flipped in §6. */ .mc-icon--dir { transform: none; } .mc-lp-sprite { display: none !important; } /* --- 5.2 Buttons --------------------------------------------------------- */ .mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mc-space-2); min-block-size: var(--mc-btn-height); min-inline-size: var(--mc-tap-target); padding-block: var(--mc-space-3); padding-inline: var(--mc-space-6); border: 1px solid transparent; border-radius: var(--mc-radius-md); background: var(--mc-color-primary); color: var(--mc-color-text-invert); font-size: var(--mc-font-size-base); line-height: var(--mc-leading-base); /* Measured from Figma (e.g. node 4595:32616): buttons are semibold, not bold. */ font-weight: var(--mc-font-weight-semibold); text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--mc-transition-fast), border-color var(--mc-transition-fast), color var(--mc-transition-fast), box-shadow var(--mc-transition-fast); } .mc-btn:hover, .mc-btn:focus-visible { background: var(--mc-color-primary-hover); color: var(--mc-color-text-invert); } .mc-btn[disabled], .mc-btn.is-disabled, .mc-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .mc-btn--secondary { background: transparent; border-color: var(--mc-color-primary); color: var(--mc-color-primary); } .mc-btn--secondary:hover, .mc-btn--secondary:focus-visible { background: var(--mc-color-surface-alt); border-color: var(--mc-color-primary-hover); color: var(--mc-color-primary-hover); } .mc-btn--accent { background: var(--mc-color-accent); color: var(--mc-color-dark-blue); } .mc-btn--accent:hover, .mc-btn--accent:focus-visible { background: var(--mc-color-yellow-500); color: var(--mc-color-dark-blue); } .mc-btn--ghost { background: transparent; border-color: transparent; color: var(--mc-color-text); } .mc-btn--ghost:hover, .mc-btn--ghost:focus-visible { background: var(--mc-color-surface); color: var(--mc-color-text); } /* * Small button: 36px tall but the label stays at the base 16/24 size. Measured * from Figma (node 4595:32616, "عرض المزيد" — 155x36, 16/24 semibold). The * previous 14px label made every small button read as a caption. */ .mc-btn--sm { min-block-size: var(--mc-btn-height-sm); padding-block: var(--mc-space-1-5); padding-inline: var(--mc-space-4); font-size: var(--mc-font-size-base); line-height: var(--mc-leading-base); } .mc-btn--block { width: 100%; } .mc-btn--icon { padding-inline: var(--mc-space-3); } /* --- 5.3 Chips ----------------------------------------------------------- */ .mc-chip { display: inline-flex; align-items: center; gap: var(--mc-space-1-5); padding-block: var(--mc-space-1-5); padding-inline: var(--mc-space-3-5); border: 1px solid var(--mc-color-border); border-radius: var(--mc-radius-full); background: var(--mc-color-white); color: var(--mc-color-text-muted); font-size: var(--mc-font-size-sm); line-height: var(--mc-leading-sm); font-weight: var(--mc-font-weight-medium); white-space: nowrap; text-decoration: none; transition: background-color var(--mc-transition-fast), border-color var(--mc-transition-fast), color var(--mc-transition-fast); } .mc-chip:hover, .mc-chip:focus-visible { border-color: var(--mc-color-border-strong); color: var(--mc-color-text); } .mc-chip--solid { background: var(--mc-color-surface); border-color: transparent; color: var(--mc-color-text); } .mc-chip--active, .mc-chip[aria-pressed="true"], .mc-chip[aria-selected="true"] { background: var(--mc-color-primary); border-color: var(--mc-color-primary); color: var(--mc-color-text-invert); } /* Interactive chips need a real tap target on touch. */ button.mc-chip, a.mc-chip { min-height: var(--mc-tap-target); cursor: pointer; } @media (min-width: 768px) { button.mc-chip, a.mc-chip { min-height: 0; } } /* --- 5.4 Cards ----------------------------------------------------------- */ .mc-card { position: relative; display: flex; flex-direction: column; background: var(--mc-color-bg); border: 1px solid var(--mc-color-border); border-radius: var(--mc-radius-lg); box-shadow: var(--mc-shadow-card); overflow: hidden; transition: box-shadow var(--mc-transition), transform var(--mc-transition); } .mc-card:hover, .mc-card:focus-within { box-shadow: var(--mc-shadow-lg); } .mc-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--mc-color-surface); overflow: hidden; } .mc-card__media img { width: 100%; height: 100%; object-fit: cover; } .mc-card__body { display: flex; flex-direction: column; gap: var(--mc-space-2); padding: var(--mc-space-4); flex: 1 1 auto; } .mc-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--mc-space-3); padding: var(--mc-space-4); padding-block-start: 0; margin-block-start: auto; } .mc-card--flat { box-shadow: none; } .mc-card--surface { background: var(--mc-color-surface); border-color: transparent; } /* --- 5.5 Badges ---------------------------------------------------------- */ .mc-badge { display: inline-flex; align-items: center; gap: var(--mc-space-1); padding-block: var(--mc-space-1); padding-inline: var(--mc-space-2); border-radius: var(--mc-radius-sm); background: var(--mc-color-danger); color: var(--mc-color-text-invert); font-size: var(--mc-font-size-xs); line-height: var(--mc-leading-xs); font-weight: var(--mc-font-weight-bold); white-space: nowrap; } /* The red "جديد" pill floating over a card thumbnail. */ .mc-badge--float { position: absolute; inset-block-start: var(--mc-space-3); inset-inline-start: var(--mc-space-3); z-index: 2; } .mc-badge--accent { background: var(--mc-color-accent); color: var(--mc-color-dark-blue); } .mc-badge--muted { background: var(--mc-color-surface); color: var(--mc-color-text-muted); } .mc-badge--discount { background: var(--mc-color-surface-alt); color: var(--mc-color-danger); } /* --- 5.6 Stars ----------------------------------------------------------- */ /* Markup contract: templates/parts/rating-stars.php */ .mc-stars { display: inline-flex; align-items: center; gap: var(--mc-space-1-5); font-size: var(--mc-font-size-sm); line-height: var(--mc-leading-sm); font-weight: var(--mc-font-weight-semibold); color: var(--mc-color-text); white-space: nowrap; } .mc-stars__stars { position: relative; display: inline-block; flex: none; /* Overlay fill is clipped by width; direction-independent because both layers start at the inline start edge. */ line-height: 0; } .mc-stars__track, .mc-stars__fill { display: inline-flex; gap: var(--mc-space-1); line-height: 0; } .mc-stars__track { color: var(--mc-color-star-empty); } .mc-stars__fill { position: absolute; inset-block-start: 0; inset-inline-start: 0; overflow: hidden; color: var(--mc-color-star); white-space: nowrap; } .mc-stars__star { width: var(--mc-icon-size-sm); height: var(--mc-icon-size-sm); flex: none; fill: currentColor; } .mc-stars--sm .mc-stars__star { width: 14px; height: 14px; } .mc-stars--lg .mc-stars__star { width: var(--mc-icon-size-lg); height: var(--mc-icon-size-lg); } .mc-stars__value { font-weight: var(--mc-font-weight-bold); } .mc-stars__count { color: var(--mc-color-text-muted); font-weight: var(--mc-font-weight-regular); } /* --- 5.7 Progress -------------------------------------------------------- */ .mc-progress { display: block; width: 100%; height: 8px; border-radius: var(--mc-radius-full); background: var(--mc-color-slate-200); overflow: hidden; } .mc-progress__bar { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--mc-color-primary); transition: width var(--mc-transition); } .mc-progress--accent .mc-progress__bar { background: var(--mc-color-accent); } .mc-progress--thin { height: 6px; } /* Rating histogram rows reuse the same bar. */ .mc-progress--rating .mc-progress__bar { background: var(--mc-color-star); } /* --- 5.8 Accordion ------------------------------------------------------- */ .mc-accordion { display: flex; flex-direction: column; gap: var(--mc-space-3); } .mc-accordion__item { border: 1px solid var(--mc-color-border); border-radius: var(--mc-radius-lg); background: var(--mc-color-bg); overflow: hidden; } .mc-accordion__header { margin: 0; } .mc-accordion__trigger { display: flex; align-items: center; gap: var(--mc-space-3); width: 100%; min-height: var(--mc-tap-target); padding: var(--mc-space-4); border: 0; background: var(--mc-color-surface); color: var(--mc-color-text); font-size: var(--mc-font-size-base); line-height: var(--mc-leading-base); font-weight: var(--mc-font-weight-semibold); text-align: start; cursor: pointer; transition: background-color var(--mc-transition-fast); } .mc-accordion__trigger:hover { background: var(--mc-color-slate-200); } .mc-accordion__title { flex: 1 1 auto; min-width: 0; } .mc-accordion__meta { flex: none; color: var(--mc-color-text-muted); font-size: var(--mc-font-size-sm); line-height: var(--mc-leading-sm); font-weight: var(--mc-font-weight-regular); } .mc-accordion__indicator { flex: none; transition: transform var(--mc-transition); } .mc-accordion__trigger[aria-expanded="true"] .mc-accordion__indicator { transform: rotate(180deg); } .mc-accordion__panel { padding: var(--mc-space-4); border-block-start: 1px solid var(--mc-color-border); } .mc-accordion__panel[hidden] { display: none; } /* --- 5.9 Media frames ---------------------------------------------------- */ .mc-media { position: relative; width: 100%; border-radius: var(--mc-radius-lg); overflow: hidden; background: var(--mc-color-surface); } .mc-media--video { aspect-ratio: 16 / 9; } .mc-media--video iframe, .mc-media--video video, .mc-media--video embed, .mc-media--video object { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mc-media__image { width: 100%; height: auto; object-fit: cover; } /* --- 5.10 Forms ---------------------------------------------------------- */ .mc-field { display: flex; flex-direction: column; gap: var(--mc-space-1-5); } .mc-input, .mc-select, .mc-textarea { width: 100%; min-height: var(--mc-btn-height); padding-block: var(--mc-space-2); padding-inline: var(--mc-space-4); border: 1px solid var(--mc-color-control-border); border-radius: var(--mc-radius-md); background: var(--mc-color-bg); color: var(--mc-color-text); font-size: var(--mc-font-size-base); line-height: var(--mc-leading-base); transition: border-color var(--mc-transition-fast), box-shadow var(--mc-transition-fast); } .mc-textarea { min-height: 120px; padding-block: var(--mc-space-3); resize: vertical; } .mc-input:focus, .mc-select:focus, .mc-textarea:focus { border-color: var(--mc-color-primary); box-shadow: var(--mc-ring); outline: none; } .mc-input::placeholder, .mc-textarea::placeholder { color: var(--mc-color-text-subtle); } .mc-label { font-size: var(--mc-font-size-sm); line-height: var(--mc-leading-sm); font-weight: var(--mc-font-weight-semibold); } /* --- 5.11 Meta rows ------------------------------------------------------ */ .mc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mc-space-3); color: var(--mc-color-text-muted); font-size: var(--mc-font-size-sm); line-height: var(--mc-leading-sm); } .mc-meta__item { display: inline-flex; align-items: center; gap: var(--mc-space-1-5); } .mc-meta__item .mc-icon { color: var(--mc-color-text-subtle); } /* --- 5.12 Price ---------------------------------------------------------- */ .mc-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: var(--mc-space-2); } .mc-price__current { font-size: var(--mc-font-size-xl); line-height: var(--mc-leading-xl); font-weight: var(--mc-font-weight-bold); color: var(--mc-color-text); } .mc-price__regular { color: var(--mc-color-text-muted); font-size: var(--mc-font-size-sm); line-height: var(--mc-leading-sm); text-decoration: line-through; } /* ========================================================================== 6. RTL Logical properties handle layout automatically. Only glyphs that encode a direction need flipping. ========================================================================== */ [dir="rtl"] .mc-icon--dir { transform: scaleX(-1); } /* Star fill is anchored to the inline start edge, which flips with `dir`, so no RTL rule is needed for .mc-stars__fill. Line-through and tabular numerals also stay LTR-correct because the digits themselves are Western. */ [dir="rtl"] .mc-lp { text-align: start; } /* ========================================================================== 7. Motion & print ========================================================================== */ @media (prefers-reduced-motion: reduce) { .mc-lp *, .mc-lp *::before, .mc-lp *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media print { .mc-lp .mc-btn, .mc-lp .mc-chip, .mc-lp-sprite { display: none !important; } .mc-lp .mc-card { box-shadow: none; break-inside: avoid; } }