/* * Courses-specific stylesheet. * * Intentionally left without header/menu overrides to keep * the same native Neve header style across all pages. */ /* * Masteriyo token mapping. * * Masteriyo is built on ~60 --masteriyo-* custom properties, all defined in a * single :root block in the plugin's public.css. Pointing them at Neve's * --nv-* slots reskins the whole LMS without touching a template. * * Deliberately NOT mapped here: --masteriyo-color-primary, -primary-light, * -primary-dark, --masteriyo-button-primary and -hover. Those are written as * an inline :root block by ScriptStyle::load_custom_inline_styles() from * Masteriyo → Settings → General → Styling. Two :root blocks have equal * specificity, so whichever loads last wins — a fight with no stable winner. * The settings screen owns brand colour; this file owns everything it can't * reach. Change blue in the settings, not here. * * Why :root:root and not :root — the plugin's public.css is printed AFTER * this file (verified in the rendered : neve-child-courses-style-css * at 223, masteriyo-public-css at 224). Two :root blocks have identical * specificity, so a plain :root here loses on source order and the whole * mapping silently does nothing. Repeating the selector raises specificity * to (0,2,0) and wins regardless of order. Preferred over adding * 'masteriyo-public' to the enqueue's $deps, which would couple the child * theme to a plugin handle and break the stylesheet if Masteriyo is ever * deactivated or renames it. */ :root:root { /* Type. Plugin defaults are a near-black navy (#07092f) and a muted indigo (#424360) — both read as "not this site" next to Neve's #111. */ --masteriyo-color-heading: var(--nv-text-color); --masteriyo-color-text: var(--nv-text-color); --masteriyo-color-grey-dark: var(--nv-text-color); /* Surfaces and rules. */ --masteriyo-color-border: var(--nv-light-bg); --masteriyo-color-background-grey: var(--nv-light-bg); --masteriyo-color-grey-light: var(--nv-light-bg); --masteriyo-color-disabled: var(--nv-light-bg); /* Dark blue slots. The plugin uses #07092f for dark button fills and headings on tinted panels; brand-dark is the accessible blue that carries white text at AA (4.53:1). See design-system.md §2. */ --masteriyo-color-blue-dark: var(--nv-c-1); --masteriyo-color-btn-blue-dark: var(--nv-c-1); --masteriyo-color-btn-grey: var(--nv-c-1); /* Accent. Masteriyo ships a hot pink (#fd739c) for ribbons and featured badges — the single most off-brand colour in the plugin. */ --masteriyo-color-accent: var(--nv-secondary-accent); --masteriyo-color-accent-dark: var(--nv-secondary-accent); --masteriyo-color-accent-darker: var(--nv-secondary-accent); /* * Status colours. See design-system.md §2 "Status colours". * * These are the ONE place in this theme where a literal hex is correct * rather than a var(--nv-*) alias, and the reason is structural: Neve's * palette has nine slots, eight are spoken for and the ninth (Extra * Color 2) is one slot for four colours. Status colours are also not * content swatches — the client never picks "danger" when editing a * page — so parking them in the Customizer would clutter every colour * picker on the site to no benefit. * * Chosen to sit with the desaturated blue-grey palette rather than * shout over it, and each one clears WCAG AA (4.5:1) against its own * 10% tint, which is exactly how Masteriyo composes its notices: * text and border take the solid colour, background takes -a10. * Ratios: success 4.71, warning 4.70, danger 5.27, info 4.58. * * The -a10 values are literal rgba() of the line above rather than * color-mix(), unlike the derived tints further down. Nothing here is * downstream of a Customizer value, so there is no drift to guard * against — and it keeps the notices working on browsers without * color-mix instead of falling through to unset. * * Masteriyo also defines --masteriyo-color-{success,warning,danger, * info}-border, deliberately not mapped: no rule in the plugin's CSS * consumes them (checked against 1.20.x). Map them if that changes. */ --uterus-status-success: #46745a; --uterus-status-warning: #8a6420; --uterus-status-danger: #9b4a43; --uterus-status-info: #4c718a; --uterus-status-success-tint: rgba(70, 116, 90, 0.1); --uterus-status-warning-tint: rgba(138, 100, 32, 0.1); --uterus-status-danger-tint: rgba(155, 74, 67, 0.1); --uterus-status-info-tint: rgba(76, 113, 138, 0.1); /* Masteriyo's PHP notices — templates/notices/*.php, rendered as .masteriyo-alert.masteriyo-{success,warning,danger,info}-msg on the cart, checkout, login and registration pages. */ --masteriyo-color-success: var(--uterus-status-success); --masteriyo-color-success-a10: var(--uterus-status-success-tint); --masteriyo-color-warning: var(--uterus-status-warning); --masteriyo-color-warning-a10: var(--uterus-status-warning-tint); --masteriyo-color-danger: var(--uterus-status-danger); --masteriyo-color-danger-a10: var(--uterus-status-danger-tint); --masteriyo-color-info: var(--uterus-status-info); --masteriyo-color-info-a10: var(--uterus-status-info-tint); } /* * Derived tints, gated behind @supports. * * The usual two-declaration fallback does NOT work for custom properties: * `color-mix()` parses fine as a custom-property value on every browser, so * an earlier fallback declaration is always overwritten. On a browser without * color-mix the value only fails later, at substitution time, resolving to * guaranteed-invalid → unset → inherit, which loses the plugin's own default * rather than falling back to it. The @supports gate means old browsers never * see these declarations at all and keep Masteriyo's stock values — off-brand, * but intact. color-mix has been baseline since mid-2023. */ @supports (color: color-mix(in srgb, red, blue)) { :root:root { --masteriyo-color-text-light: color-mix(in srgb, var(--nv-text-color) 60%, var(--nv-site-bg)); --masteriyo-color-grey-lighter: color-mix(in srgb, var(--nv-light-bg) 50%, var(--nv-site-bg)); --masteriyo-color-accent-light: color-mix(in srgb, var(--nv-secondary-accent) 70%, var(--nv-site-bg)); --masteriyo-color-accent-a20: color-mix(in srgb, var(--nv-secondary-accent) 20%, transparent); /* The alpha variants are hardcoded rgba() of the OLD default blue and are NOT rewritten by the Styling settings — without these four lines the stock #4584ff survives in every tint, wash and focus ring. */ --masteriyo-color-primary-a10: color-mix(in srgb, var(--nv-primary-accent) 10%, transparent); --masteriyo-color-primary-a20: color-mix(in srgb, var(--nv-primary-accent) 20%, transparent); --masteriyo-color-primary-a80: color-mix(in srgb, var(--nv-primary-accent) 80%, transparent); --masteriyo-color-primary-lightest: color-mix(in srgb, var(--nv-primary-accent) 8%, var(--nv-site-bg)); } } /* * Clean up after the author visibility toggles. * * In templates/content-course.php the author's
wrapper and its two * tags render unconditionally — only the and the name sit behind * course_archive.components_visibility.author_avatar / .author_name. With both * switched off each card is left with an empty link: no accessible name, which * fails WCAG 2.4.4 (Link Purpose) and 4.1.2 (Name, Role, Value). * * Written as :has() rather than a flat `display: none` so it stops applying by * itself the moment either toggle is switched back on. Browsers without :has() * drop the rule and keep today's behaviour — visually identical, a11y issue * unfixed. Baseline since December 2023. */ .masteriyo-course-author:not(:has(img, .masteriyo-course-author--name)) { display: none; } /* Keep breathing room between header/content/footer on courses contexts. */ body:is(.page-template-page-courses, .post-type-archive-mto-course, .single-mto-course, .single-mto-lesson, .single-mto-quiz, .masteriyo-courses-page, .masteriyo-course-category-page, .masteriyo-course-difficulty-page, .tax-course_cat, .tax-course_difficulty) .neve-main { padding-top: clamp(12px, 1.4vw, 20px); padding-bottom: clamp(12px, 1.4vw, 20px); } /* Add extra breathing room around the mobile menu block in courses contexts. */ @media screen and (max-width: 960px) { body:is(.page-template-page-courses, .post-type-archive-mto-course, .single-mto-course, .single-mto-lesson, .single-mto-quiz, .masteriyo-courses-page, .masteriyo-course-category-page, .masteriyo-course-difficulty-page, .tax-course_cat, .tax-course_difficulty) .header-menu-sidebar-inner { padding-top: 14px; padding-bottom: 14px; } body:is(.page-template-page-courses, .post-type-archive-mto-course, .single-mto-course, .single-mto-lesson, .single-mto-quiz, .masteriyo-courses-page, .masteriyo-course-category-page, .masteriyo-course-difficulty-page, .tax-course_cat, .tax-course_difficulty) .header-menu-sidebar .menu-item-courses-account-masteriyo { margin-top: 8px; margin-bottom: 8px; } } /* * Account-page alerts — the React ones. * * /minha-conta/ is a React SPA, and its alerts do NOT go through the PHP * notice templates the token block above reskins. They come from a bespoke * component in assets/js/build/masteriyo-account.js that hardcodes Chakra's * default scales — green.50 / green.500 / green.600 for success, a raw * #fdf7e7 / #e4ae0d for warning — and paints them with Emotion at runtime. * No Masteriyo setting, no PHP filter and no --masteriyo-* token reaches * them. CSS is the only lever. * * Three consequences shape everything below. * * 1. Emotion class names (.css-1a2b3c) are build hashes — they change when * Masteriyo updates, so they are unusable as selectors. The stable hooks * are Chakra's semantic classes (.chakra-stack, .chakra-icon, * .chakra-text) plus the mount point's id. * * 2. Emotion injects its