/* ============================================================================ IBD Delta LMS — bridging layer ---------------------------------------------------------------------------- The ONLY stylesheet in this theme that is not byte-identical to the main-site ibd-delta theme. Everything MasterStudy-facing lives here so that theme.json and delta.css can be re-synced from the main site by copying files. Load order matters and was measured on the live site: 32 global-styles-inline-css ← theme.json output 37-41 MasterStudy stylesheets 42 theme stylesheet + delta.css + THIS FILE So MasterStudy overrides theme.json on a tie, and this file overrides MasterStudy on a tie. Anything here that could have been solved in MasterStudy's own settings instead should be — see the Stage F record. RULES FOR THIS FILE - Prefer MasterStudy's public CSS custom properties over its class names. - Every rule states what it targets and why. - No Hebrew, no content, no layout invention. Bridging only. ========================================================================= */ /* --- 1. Footer grid, LMS variant ------------------------------------------- delta.css sets .ibd-footgrid to `1.5fr 1fr 1fr 1fr` for the main site's four marketing columns. The LMS footer has three children (brand, study links, contact), so the base rule would leave a dead fourth track. Additive modifier: the base rule is untouched and still correct for four columns. */ @media (min-width: 1001px) { .ibd-footgrid--lms { grid-template-columns: 1.5fr 1fr 1fr; } } /* --- 2. MasterStudy: archive chrome ---------------------------------------- Every colour below arrives as an inline CSS custom property written into page 18 by the MasterStudy wizard, frozen at save time. They are NOT driven by the plugin's `accent_color` setting, which is why changing that setting to bronze fixed the account and auth screens but left the archive blue. Because the values are set inline, a stylesheet can only win with !important on the custom property itself. That is deliberate and contained: we override four variables, never a component rule, so MasterStudy's own CSS keeps doing the drawing and a plugin update cannot silently break the layout. Each value maps to a theme.json palette token rather than a hex, so the archive tracks the design system. Measured before/after on /courses/ — saturated blue on the page went from 19 computed occurrences to 0. */ /* 2.1 The large band behind the archive was #EEF1F7, a cool grey-blue that read as stock SaaS against the ivory page. -> stone (#F0E9DA), the palette's designed secondary band. Charcoal body text on it measures about 13:1. */ .wp-block-masterstudy-archive-container { --lms-archive-courses-layoutBackground: var(--wp--preset--color--soft) !important; } /* 2.2 The filter sidebar. Hidden at the presentation layer, as agreed: the block cannot be removed (its container enforces templateLock "all" and re-inserts it on re-parse), and with no courses there is nothing to filter. This one rule also removes ~17 further blue values that live inside it, so it replaces a dozen colour overrides. The parent is display:flex, so the results column simply reflows. */ .wp-block-masterstudy-courses-filter { display: none; } /* 2.3 Sort tabs (Newest / Oldest / Popular / Overall rating): track and buttons were #DAE5F8 with #227AFF text. -> white track, bronze label, bronze fill when active, keeping MasterStudy's own white active text. */ .wp-block-masterstudy-courses-tab-options { --lms-sort-tabsBackground: var(--wp--preset--color--surface) !important; --lms-sort-background: var(--wp--preset--color--surface) !important; --lms-sort-color: var(--wp--preset--color--primary) !important; --lms-sort-backgroundHover: var(--wp--preset--color--primary) !important; } /* 2.4 "Load more" button was #227AFF / #438EFF on hover. -> bronze, with the palette's lighter bronze for hover. */ .wp-block-masterstudy-courses-load-more { --lms-lm-background: var(--wp--preset--color--primary) !important; --lms-lm-backgroundHover: var(--wp--preset--color--primary-2) !important; --lms-lm-activeBackground: var(--wp--preset--color--primary) !important; } /* --- 3. Deliberately NOT bridged ------------------------------------------- .masterstudy-authorization__switch and .masterstudy-authorization-modal__close still use #EEF1F7. They sit inside the authorization modal, which is only visible on click, MasterStudy sets them at a higher specificity than a plain class rule can beat, and the text on them already measures 14.4:1 and 5.9:1. Escalating specificity for a hidden cosmetic detail is not worth it. Revisit in the account/auth pass. Course detail, lesson / course-player, quiz and certificate screens: nothing written. There are zero courses, so their DOM cannot be inspected. Deferred to the student-path pass after a test course exists. ------------------------------------------------------------------------- */ /* --- 4. Footer social row -------------------------------------------------- The LMS footer is three columns where the main site has four, so the contact column is shorter and the social row sat higher than on tapuach-coach.com. TikTok was restored to parts/footer.html (the real inline SVG from the export), so both sites now carry the same five icons in the same source order: WhatsApp, LinkedIn, Facebook, Instagram, TikTok — which in RTL renders right-to-left as on the main site. delta.css sets no margin on .ibd-social; on the main site its position comes from the taller column above it. One spacing token restores that here rather than an invented pixel value. Scoped to the LMS footer variant so the shared .ibd-social rules stay untouched. */ .ibd-footgrid--lms .ibd-social { margin-block-start: var(--wp--preset--spacing--30); } /* --- 5. MasterStudy account bottom navigation ------------------------------ Component: .masterstudy-account-mobile-menu (_core/assets/css/account/mobile-menu.css, MasterStudy Core 3.7.45) Base rule is display:none; position:fixed; bottom:0; z-index:999; height:80px. It is revealed inside @media (max-width: 1279.98px). That breakpoint is the problem: 1280px is not a mobile width. Meanwhile the account sidebar (account/menu.css) has its own breakpoint at max-width:1024px and stays visible above it. So between 1025px and 1279.98px BOTH are on screen — a fixed bottom bar duplicating a sidebar that is right there. Aligning the bar to the sidebar's own 1024px breakpoint removes the overlap band and strands nobody: below 1024px the sidebar changes and the bar is genuinely the account navigation, so it is kept. No !important: this rule sits in a later stylesheet at equal specificity. */ @media (min-width: 1025px) { .masterstudy-account-mobile-menu { display: none; } } /* Inactive icons and labels are hard-coded #4d5e6f, a cool slate that reads as foreign against the warm palette. The ACTIVE state needs no change — it uses MasterStudy's own --accent-100, which now resolves to rgba(107,83,44,1), i.e. the bronze is already correct there. */ .masterstudy-account-mobile-menu .masterstudy-account-mobile-menu__item, .masterstudy-account-mobile-menu a.masterstudy-account-mobile-menu__link i { color: var(--wp--preset--color--muted); } /* =========================================================================== 6. MasterStudy course player — design bridge Added 2026-09-06 after a live audit of /courses-archive-gutenberg/diy/40 (course "DELTA™ DIY", 10 lessons). WHY DIRECT PROPERTY OVERRIDES AND NOT VARIABLES The archive chrome (section 2) was bridged by re-pointing MasterStudy's own inline custom properties. The course player has no equivalent seam: its palette is written as hard-coded hex literals in the plugin's stylesheets. 78 :root colour custom properties were enumerated on the player page and none of them carries #EEF1F7, #4D5E6F, #001931 or #DBE0E9. So the only update-safe route is to override the same declarations on the same class selectors. No plugin file is touched. WHY THE SELECTORS LOOK HEAVIER THAN IN SECTIONS 1-5 MasterStudy prints 16 of its player stylesheets inside , AFTER wp_head. This file is enqueued in the head, so for those files "later stylesheet wins at equal specificity" does not hold — the bridge must win on specificity instead. Every rule below is therefore scoped to a light-mode guard which adds exactly one class: .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-header:not(.masterstudy-course-player-header_dark-mode) That guard does double duty. The player ships a working dark-mode toggle (.masterstudy-dark-mode-button, 50x50, in the player header, available to students). Its 97 rules are all specificity 0,2,0 or higher and live in the body-printed files, so they still beat — or tie and then out-order — every rule here. The bridge repaints light mode only and leaves dark mode to MasterStudy. No !important anywhere in this section. --------------------------------------------------------------------------- */ /* --- 6.1 Typeface --------------------------------------------------------- css/course-player/fonts.css (99 selectors) and css/components/fonts.css (64 selectors) both declare, verbatim: {font-family:"Albert Sans",sans-serif} Albert Sans ships no Hebrew glyphs. Every Hebrew string inside the player — lesson titles, lesson body copy, the curriculum list — was therefore being rendered by an arbitrary browser fallback face, not by Assistant. This is the single largest reason the player did not read as ibd-delta. `inherit` re-attaches the theme's own stack rather than naming a family, so it follows any future change to the theme font with no edit here. [class*="stmlms-"] is excluded: those are MasterStudy's icon classes and they set font-family:stmlms on the element itself (assets/icons/style.css). Icons drawn on ::before/::after pseudo-elements are untouched either way. The three plyr rules in course-player/fonts.css carry !important and are deliberately left alone — that is the video control bar. This is the one rule in section 6 with no dark-mode guard, deliberately: none of MasterStudy's 97 dark-mode rules touches font-family, and the missing-glyph problem is the same in either mode. Specificity is 0,2,0 against MasterStudy's 0,1,0, so it wins on specificity alone. */ .masterstudy-course-player-header *:not([class*="stmlms-"]), .masterstudy-course-player-content *:not([class*="stmlms-"]) { font-family: inherit; } /* --- 6.2 Chrome surfaces -------------------------------------------------- #EEF1F7 is the cool blue-grey that made the player read as generic SaaS. course-player/header.css .masterstudy-course-player-header background:#eef1f7 course-player/curriculum.css .masterstudy-course-player-curriculum background:#eef1f7 course-player/navigation.css .masterstudy-course-player-navigation background:#fff Header, curriculum sidebar and the bottom navigation bar are all chrome, so they take one warm neutral and together frame the reading area. */ .masterstudy-course-player-header:not(.masterstudy-course-player-header_dark-mode), .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-curriculum, .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-navigation { background: var(--wp--preset--color--soft); } /* --- 6.3 Reading ground --------------------------------------------------- The lesson column is max-width:860px, centred. The surrounding .masterstudy-course-player-content__wrapper was flat #fff across the whole viewport — at a wide desktop width that is ~820px of empty white on each side, which is what made the video look like it was floating in a generic white interface. Ivory is the ground the rest of the site reads on. The 860px measure, the 16:9 video box and the responsive ladder are deliberately not touched. */ .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode), .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-content__wrapper { background: var(--wp--preset--color--base); } /* --- 6.4 Curriculum section header --------------------------------------- components/curriculum-accordion.css .masterstudy-curriculum-accordion__section { background:#4d5e6f } Its children are already white (title, 700) and white-70% (the 0/10 count), and the toggler is a light icon asset, so swapping the slate for the ibd-delta charcoal panel preserves the light-on-dark relationship exactly. */ .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-curriculum-accordion__section { background: var(--wp--preset--color--panel); } /* --- 6.5 Hairlines -------------------------------------------------------- #DBE0E9 and #ddd appear as 1px borders on the player header, the back button, the discussions toggler, the sidebar's inner edge, the bottom navigation bar and the per-lesson completion checkbox. All become the ibd-delta line token. The two body.rtl rules below mirror MasterStudy's own RTL declarations — the LTR side is left to MasterStudy so that a future English or Russian locale still gets the correct edge. */ .masterstudy-course-player-header:not(.masterstudy-course-player-header_dark-mode) { border-bottom-color: var(--wp--preset--color--line); } body.rtl .masterstudy-course-player-header:not(.masterstudy-course-player-header_dark-mode) .masterstudy-course-player-header__back { border-left-color: var(--wp--preset--color--line); } body.rtl .masterstudy-course-player-header:not(.masterstudy-course-player-header_dark-mode) .masterstudy-course-player-header__discussions-toggler { border-right-color: var(--wp--preset--color--line); } .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-curriculum { border-right-color: var(--wp--preset--color--line); } .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-navigation { border-top-color: var(--wp--preset--color--line); } .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-curriculum-accordion__check { border-color: var(--wp--preset--color--line); } /* --- 6.6 Type colour ------------------------------------------------------ #001931 (navy) and #4D5E6F (slate) are the player's two text colours. course-player/main.css .masterstudy-course-player-content__header h1 #001931 course-player/header.css a.masterstudy-course-player-header__course-title #001931 course-player/curriculum.css .masterstudy-course-player-curriculum__title #001931 components/curriculum-accordion.css .masterstudy-curriculum-accordion__title #001931 lesson/main.css .masterstudy-course-player-lesson h1..h6 #4d5e6f lesson/main.css .masterstudy-course-player-lesson p, ul li, ol li #4d5e6f course-player/main.css .masterstudy-course-player-content__header-lesson-type #4d5e6f course-player/curriculum.css .masterstudy-course-player-curriculum__mobile-title #4d5e6f components/curriculum-accordion.css .masterstudy-curriculum-accordion__meta #808c98 */ .masterstudy-course-player-header:not(.masterstudy-course-player-header_dark-mode) a.masterstudy-course-player-header__course-title { color: var(--wp--preset--color--contrast); } .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-content__header h1, .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-curriculum__title, .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-curriculum-accordion__title, .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-lesson h1, .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-lesson h2, .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-lesson h3, .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-lesson h4, .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-lesson h5, .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-lesson h6 { color: var(--wp--preset--color--contrast); } .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-lesson p, .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-lesson ul li, .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-lesson ol li { color: var(--wp--preset--color--contrast-2); } .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-content__header-lesson-type, .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-course-player-curriculum__mobile-title { color: var(--wp--preset--color--muted); } /* The curriculum meta line and the header "קורס:" label sit on `soft`, where `muted` measures 4.35:1 and MasterStudy's own #808C98 measures 2.84:1 — both under AA for 12–13px text. `contrast-2` is 8.63:1 there and still reads as secondary because these are 12–13px at weight 500 against 14–15px titles. Measured after section 6 changed the chrome to `soft`. */ .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-curriculum-accordion__item .masterstudy-curriculum-accordion__meta, .masterstudy-course-player-header:not(.masterstudy-course-player-header_dark-mode) .masterstudy-course-player-header__course-label { color: var(--wp--preset--color--contrast-2); } /* --- 6.7 List sizing inside the lesson ----------------------------------- lesson/main.css sets list items to font-size:16px / line-height:28px while everything around them in the same 860px column is the theme's 1.2rem / 1.75. Inheriting restores one reading size for the whole column. Only the size and leading are inherited; the list markers and indentation are MasterStudy's and are left alone. Unguarded for the same reason as 6.1 — this is a measure, not a colour, and dark mode does not set it. */ .masterstudy-course-player-content .masterstudy-course-player-lesson ul li, .masterstudy-course-player-content .masterstudy-course-player-lesson ol li { font-size: inherit; line-height: inherit; } /* --- 6.8 Curriculum list hierarchy --------------------------------------- Every lesson link inherits color from MasterStudy's own --masterstudy-color--primary, which is now bronze, so all ten lesson titles were bronze and the current lesson had only its 5% bronze fill to distinguish it. 6.6 puts the titles on charcoal; this restores bronze to the one lesson that should carry it. The 5% fill, the completion checkbox and the hover behaviour are MasterStudy's and are unchanged. */ .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-curriculum-accordion__link_current .masterstudy-curriculum-accordion__title { color: var(--wp--preset--color--primary); } /* --- 6.9 Navigation button radius ---------------------------------------- components/nav-button.css uses 4px. The rest of the site uses --ibd-rs. Colour, size, padding and label weight are already correct — the bronze comes from the MasterStudy primary setting. */ .masterstudy-course-player-content:not(.masterstudy-course-player-content_dark-mode) .masterstudy-nav-button { border-radius: var(--ibd-rs, 8px); } /* --- 6.10 Single course page --------------------------------------------- The course detail page is the entry point of the student path and carries the same hard-coded palette as the player: #DBE0E9 hairlines, #001931 navy for titles and values, #4D5E6F slate for secondary labels and description body copy. Mapped with the same tokens and the same reasoning as 6.5–6.6, so the two screens read as one product. (Added while verifying the section 8 RTL fix — once the page laid out correctly the palette mismatch against the player was the obvious next thing on screen. Flagged as an addition, not something that was asked for.) */ .masterstudy-single-course-tabs { background: var(--wp--preset--color--line); } .masterstudy-single-course-minimalistic__info, .masterstudy-single-course-minimalistic__info-wrapper, .masterstudy-single-course-minimalistic__info-wrapper-column, .masterstudy-single-course-minimalistic__info-block { border-color: var(--wp--preset--color--line); } /* #001931 navy → charcoal: titles, names, values, the active tab. */ .masterstudy-single-course-title, .masterstudy-single-course-instructor__name, .masterstudy-single-course-details__quantity, .masterstudy-single-course-tabs__item_active, .masterstudy-single-course-share-button-modal__head { color: var(--wp--preset--color--contrast); } /* #4D5E6F slate → muted: the secondary labels around them. */ .masterstudy-single-course-categories__item, .masterstudy-single-course-instructor__title, .masterstudy-single-course-rating__quantity, .masterstudy-single-course-wishlist__title, .masterstudy-single-course-share-button__title, .masterstudy-single-course-details__name, .masterstudy-single-course-tabs__item { color: var(--wp--preset--color--muted); } /* Description body copy, matching the lesson column in 6.6. Scoped to the description container so it cannot reach the labels above. */ .masterstudy-single-course-description__content, .masterstudy-single-course-description__content p, .masterstudy-single-course-description__content li, .masterstudy-single-course-description__content strong { color: var(--wp--preset--color--contrast-2); } /* --- 6.11 Deliberately NOT bridged --------------------------------------- - The active-lesson 5% bronze fill, the complete/next button fill and the course "start" button: already correct, they resolve through MasterStudy's own primary colour setting. - Scrollbar hiding (scrollbar-width:none / ::-webkit-scrollbar{display:none} on the curriculum): intentional in MasterStudy, left as-is. - The responsive ladder (1600 / 1366 / 1024 / 782 / 576). Nothing in this section changes layout, and MasterStudy's own media queries contain no colour or font declarations, so the bridge is breakpoint-independent. - RTL. MasterStudy ships assets/css/rtl-styles.css plus per-component body.rtl rules and the player audited clean: sidebar right, back button far right, prev/next in correct RTL order, dir=rtl throughout. Nothing here flips a direction or an icon. - Dark mode, per the note at the top of this section. - The lesson body's own inline markup (html-div wrappers carried in with the pasted lesson content). That is course content, not chrome. */ /* =========================================================================== 7. MasterStudy course player — dark-mode contrast Added 2026-09-06 after auditing the live player with dark mode ON (.masterstudy-course-player-content_dark-mode present on the container). WHAT WAS ACTUALLY WRONG MasterStudy's dark mode is mostly sound: it repaints its own surfaces (#171717 ground, #1E1E1E sidebar, #2D2D2D chrome) and sets its own text to #fff / rgba(255,255,255,.7). A WCAG sweep of every text-bearing element in the player, with the effective background resolved by walking ancestors, returned only four failures — and section 6 was not the cause: with dark mode on, every rule in section 6 is correctly inert and MasterStudy's dark backgrounds are intact. 1.10:1 lesson prose that is not

,