/* * MWPP Class Schedule — Dojo skin (Phase T3). * * THEME_SPEC §2.2: the new default. Keeps v1's sticker DNA (solid category * fill, dark border, offset shadow) but designed — warm paper canvas, a * real 8px spacing scale, quieter chrome so category color does the * talking, and Barlow (regular width) body text instead of Classic's * condensed Barlow, which is v1's strongest "built, not designed" tell. * * D1 OWNERSHIP CONTRACT: every rule here is appearance only, scoped under * .mwpp-theme-dojo. No grid mechanics, no float-layer positioning, no * behavior-state WIRING, no print scaffolding — those all belong to * mwpp-schedule.css and are untouched by this file. This skin defines its * OWN token vocabulary (--mwpp-canvas, --mwpp-ink, ...), not Classic's * (--mwpp-dark, --mwpp-olive, ...) — the two skins never load together, * so there is no naming collision to avoid; reusing Classic's names for * different colors (e.g. a --mwpp-dark that isn't dark) would only be * confusing to read later. See CLAUDE.md T3 notes for the reasoning. */ /* ===================================================== 1. @font-face */ @font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/bebas-neue-400.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/barlow-400.woff2') format('woff2'); } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../../fonts/barlow-600.woff2') format('woff2'); } /* ===================================================== 2. design tokens */ .mwpp-theme-dojo { --mwpp-canvas: #F6F5F1; --mwpp-ink: #21211E; --mwpp-deep: #26261F; --mwpp-olive: #8F9678; --mwpp-green: #6F9671; --mwpp-hairline: #DCDAD2; --mwpp-muted: #6F6F68; /* Card border color at 90% opacity, per THEME_SPEC's "tightened to 3px/0-blur at 90% Ink opacity" — a literal rgba, since plain CSS cannot derive an alpha variant of a hex custom property. */ --mwpp-shadow-color: rgba(33, 33, 30, 0.9); --mwpp-font-display: 'Bebas Neue', 'Arial Narrow', sans-serif; --mwpp-font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif; /* An 8px spacing scale — every gap/padding/margin below is one of these six values, never an arbitrary pixel figure (THEME_SPEC's "professional standard" requirement). */ --mwpp-space-1: 8px; --mwpp-space-2: 16px; --mwpp-space-3: 24px; --mwpp-space-4: 32px; --mwpp-space-5: 40px; --mwpp-space-6: 48px; --mwpp-card-radius: 10px; --mwpp-card-border-w: 1.5px; --mwpp-card-shadow: 3px 3px 0 0 var(--mwpp-shadow-color); --mwpp-card-shadow-hover: 5px 5px 0 0 var(--mwpp-shadow-color); --mwpp-card-lift: -2px; /* Hover grow (v1.4.1): Dojo MIRRORS Classic's scale-on-hover exactly (parity was Mike's explicit call after the chip and absolute-expansion mechanisms were both rejected in LocalWP). Same factor as Classic's --mwpp-sticker-hover-scale so the two themes behave identically. */ --mwpp-sticker-hover-scale: 1.5; /* Hover name outline (v1.4.1): the hover-revealed full name is white on the card's own category fill, and several seeded fills pair weakly with white — measured WCAG, white vs fill: specialty #FF8C00 2.33:1, youth-gi #959D7A 2.84:1, openmat #17A2B8 3.04:1, youth-nogi #709671 3.34:1, adult-gi #888888 3.54:1 (all under AA 4.5:1). scale(1.5) makes that text the focal point of the page, so the weakness is magnified. A crisp 1px Ink outline fixes it because Ink is INVERSELY correlated with white across the same palette (6.92 / 5.67 / 5.30 / 4.83 / 4.55:1 on those same five fills) and only fades where white is already ~8:1 (striking 8.45:1, adult-nogi 8.25:1). At every one of the 8 fills at least one edge clears AA — worst case adult-gi, 4.55:1 — and the outline separates from its own white fill at 16.14:1, so the letterform edge is always defined. A blurred glow was rejected: it spreads the same dark mass at low alpha and greys the counters of 0.95rem/600 Barlow instead of defining them, washing out on exactly the light fills that need the help. THIS IS A PER-THEME TOKEN HOLDING THE WHOLE text-shadow VALUE, not just a colour — when this hover treatment rolls out to Nightfall, Daybreak and Kraft, each supplies its OWN value, and a dark theme can supply a soft light GLOW here without needing a different rule shape. Never hardcode this into core or a shared rule. THE OUTLINE COLOUR FOLLOWS THE CARD'S OWN TEXT COLOUR, and that is not a Dojo constant: MWPP_Renderer::text_color_for() computes it PER CATEGORY from that category's fill luminance, so a light fill yields DARK text (#2b2b2b) and a dark fill yields white. The figures above are the white-text case. On a DARK-text card a fixed dark ink is the same colour as the text (#21211E vs #2b2b2b = 1.14:1) and the name turns to mud — which is exactly what happened once a lighter palette was applied (four of the eight categories in Nightfall's suggested palette flip to dark text, including both youth greens). The seed palette hid this because every seed fill happens to yield white text. --mwpp-cat-contrast is the renderer's own answer: whichever of the two text constants text_color_for() did NOT pick, emitted per card. Reading it here makes ONE rule adapt per card with no branching. The var(--mwpp-ink) fallback is load-bearing, not decoration — a category whose colour the renderer could not resolve (or any hand-built or third-party card that never gets the property) degrades to exactly the pre-v1.4.1 dark-ink outline rather than to an invalid text-shadow. HONEST NOTE FOR ANY RETUNE: on a dark-text card the light outline is damage-stop plus edge definition (12.98:1 against the letterform), NOT a contrast rescue — that text already measures 7.4-8.6:1 on its own fill. It reads as a soft halo, not the crisp ring white text gets. If it ever looks like a smudge, `text-shadow: none` for the dark-text case is a defensible one-value change; the token shape supports either. *** --mwpp-name-outline IS DECLARED ON .mwpp-card, NOT HERE, AND THAT IS LOAD-BEARING — DO NOT "TIDY" IT BACK INTO THIS BLOCK. *** A custom property's var()s are substituted at COMPUTED-VALUE TIME ON THE ELEMENT THE DECLARATION APPLIES TO, and the resolved value is what inherits. Declared here (on .mwpp-page.mwpp-theme-dojo) --mwpp-cat-contrast is not in scope, so every card would inherit the ALREADY-SUBSTITUTED ink fallback and the adaptation would silently never happen — measured, not assumed: in that shape both a dark-text and a light-text card computed the identical #21211E outline. The renderer sets --mwpp-cat-contrast on .mwpp-card[data-category], so the token must be declared at or below the card for the substitution to see it. See section 5. */ --mwpp-badge-radius: 3px; /* Badge hover fade (v1.4.1): on hover the mat badge dims so the enlarged name is the focus. The badge still carries real information (WHICH MAT), so this is "de-emphasised", never "dimmed to uselessness" — the value is measured, not picked by eye. opacity renders the badge (background AND text) into a buffer and then composites that buffer over the card fill, so BOTH converge toward the fill and the badge's own internal contrast collapses as opacity drops. Worst case across all 16 fills of the seed + Nightfall palettes, badge text vs badge background: 0.50 -> 3.41:1 0.55 -> 3.95:1 0.60 -> 4.58:1 0.65 -> 5.34:1 0.70 -> 6.22:1 1.00 -> 14.80:1 AA for this text (0.625rem semibold, 15px once the card is scaled) is 4.5:1, so 0.50 — the value originally suggested — is genuinely below the bar on the light Nightfall greens. 0.60 is the lowest value that clears AA, but only by 0.08 and on a palette-dependent fill (NF openmat), so a slightly lighter palette would drop it under with nobody watching. 0.65 keeps real headroom (5.34:1) for a fade difference that is imperceptible next to 0.60 — Mike's call after reviewing 0.50/0.60/0.65 side by side. The badge also stays readable AS A CHIP against the card (badge background vs fill 1.60:1 at 0.60, 1.65:1 at 0.65, 1.91:1 at full). UNLIKE --mwpp-name-outline, THIS TOKEN BELONGS IN THIS ROOT BLOCK and is safe here: it is a plain number referencing no renderer-emitted per-card property, so the custom-property substitution trap documented on that token does not apply. Do NOT "fix" it onto .mwpp-card by analogy. */ --mwpp-badge-hover-opacity: 0.65; --mwpp-panel-radius: 12px; --mwpp-footer-radius: 8px; --mwpp-overlay-radius: 6px; --mwpp-pill-radius: 999px; --mwpp-dot-size: 10px; --mwpp-logo-size: 108px; --mwpp-logo-size-mobile: 88px; --mwpp-logo-radius: 12px; --mwpp-logo-shadow: 0 2px 8px rgba(33, 33, 30, 0.15); --mwpp-eyebrow-size: 12px; --mwpp-eyebrow-size-mobile: 11px; --mwpp-eyebrow-weight: 600; --mwpp-eyebrow-tracking: 0.3em; --mwpp-title-tracking: 0.01em; --mwpp-title-line-height: 0.95; --mwpp-title-size-mobile: 2rem; } /* ===================================================== 3. header / legend / notes */ .mwpp-theme-dojo .mwpp-header { gap: var(--mwpp-space-3); padding-bottom: var(--mwpp-space-3); margin-bottom: var(--mwpp-space-3); /* "A single 1px Hairline rule runs under the entire header" — the masthead treatment that replaces Classic's three boxed panels. */ border-bottom: 1px solid var(--mwpp-hairline); } .mwpp-theme-dojo .mwpp-brand { gap: var(--mwpp-space-2); } /* BRANDING: SPECIFICITY IS LOAD-BEARING HERE, NOT COSMETIC — same doctrine * as themes/classic.css section 3 (the 0.1.7 branding fix, carried forward * per THEME_SPEC §7.2's "0.1.7 theme-collision rule carries over * unchanged"). The renderer emits the title as an

and the logo as an * ; a WP theme (Kadence on the reference site) styles those with * descendant selectors like `.entry-content h2` / `.entry-content img` * (0,1,1). Every rule below is scoped `.mwpp-theme-dojo {context} * element.class` (0,3,1) to clear that, and each one explicitly RESETS * the properties a theme is likely to set even where we would not * otherwise mention them. Do not "simplify" these selectors back to a * single class. */ .mwpp-theme-dojo .mwpp-brand img.mwpp-logo, .mwpp-theme-dojo .mwpp-mobile-header img.mwpp-logo { width: var(--mwpp-logo-size); height: var(--mwpp-logo-size); max-width: none; /* beats the theme's img { max-width: 100% } */ border-radius: var(--mwpp-logo-radius); background: var(--mwpp-canvas); box-shadow: var(--mwpp-logo-shadow); object-fit: contain; /* contain, never cover — a logo is artwork, not a crop target */ display: block; margin: 0; padding: 0; border: 1px solid var(--mwpp-hairline); flex-shrink: 0; } .mwpp-theme-dojo .mwpp-brand .mwpp-eyebrow, .mwpp-theme-dojo .mwpp-mobile-header .mwpp-eyebrow { font-family: var(--mwpp-font-body); font-size: var(--mwpp-eyebrow-size); font-weight: var(--mwpp-eyebrow-weight); text-transform: uppercase; letter-spacing: var(--mwpp-eyebrow-tracking); line-height: 1.2; color: var(--mwpp-green); margin: 0 0 4px; padding: 0; } .mwpp-theme-dojo .mwpp-brand h2.mwpp-title, .mwpp-theme-dojo .mwpp-mobile-header h2.mwpp-title { font-family: var(--mwpp-font-display); font-weight: 400; /* POST-T3 FIX (CLAUDE.md "ISSUE 3", header height pass): ceiling raised from 3.25rem back to 3.5rem (56px), same as Classic — at real desktop widths 52px read noticeably smaller than Classic and made the header feel uncertain rather than authoritative, per Mike's call after seeing both live. Same clamp discipline as 0.1.7/Classic otherwise: reaches the ceiling by ~1366px and holds flat above that (verified in a real browser down to 993px — no header overflow at any width in between), never only at the widest viewports, while still shrinking gracefully toward the 993px breakpoint. */ font-size: clamp(1.75rem, 0.5rem + 3.6vw, 3.5rem); line-height: var(--mwpp-title-line-height); letter-spacing: var(--mwpp-title-tracking); color: var(--mwpp-ink); /* Bebas Neue's glyphs are already uppercase by design (see CLAUDE.md's "TITLE CASE / BEBAS NEUE" section) — do not add text-transform: uppercase, and do not remove this explicit `none` reset, which is what beats a theme forcing uppercase on headings. */ text-transform: none; margin: 0.15em 0 0; padding: 0; } .mwpp-theme-dojo .mwpp-header .mwpp-legend, .mwpp-theme-dojo .mwpp-header .mwpp-notes { border-radius: var(--mwpp-panel-radius); padding: var(--mwpp-space-2) var(--mwpp-space-3); } /* POST-T3 FIX (CLAUDE.md "ISSUE 2/3", header height pass): legend and notes no longer share one flex-basis/max-width. Now that the legend's row count is fixed by grid-template-columns below (not a function of its own width), it doesn't need the 320px core default (.mwpp-header .mwpp-legend, .mwpp-header .mwpp-notes { flex: 1 1 200px; min-width: 0; }) to stay compact — it can afford to run narrower, freeing width for notes. Notes gets BOTH the freed width (max-width raised to 400px) and a heavier flex-grow (1.3 vs the core default's 1) so it actually reaches toward that cap instead of settling for whatever's left over: Dojo's notes use the non-condensed Barlow body face (a deliberate T3 design choice, see this file's own docblock), which wraps real sentences at a narrower column than Classic's condensed font ever does at the same width — this was misread as the notes panel "stretching to fill the header" when it was actually genuinely sizing to wrapped content in too narrow a column. Verified in a real browser: this alone took notes from 236-290px down to 218-290px depending on width, without moving anything else. */ .mwpp-theme-dojo .mwpp-header .mwpp-legend { flex: 0 1 300px; max-width: 300px; } .mwpp-theme-dojo .mwpp-header .mwpp-notes { flex: 1.3 1 280px; max-width: 400px; } .mwpp-theme-dojo .mwpp-legend { background: var(--mwpp-canvas); border: 1px solid var(--mwpp-hairline); color: var(--mwpp-ink); } .mwpp-theme-dojo .mwpp-notes { /* The one dark element on the page — anchors the header without Classic's heavier "boxed panel" weight (no border needed; the fill itself reads as a panel against the Canvas page). */ background: var(--mwpp-deep); color: var(--mwpp-canvas); } .mwpp-theme-dojo .mwpp-legend h3, .mwpp-theme-dojo .mwpp-notes h3 { font-family: var(--mwpp-font-display); font-weight: 400; font-size: 1.125rem; letter-spacing: 0.01em; margin: 0 0 var(--mwpp-space-1); } .mwpp-theme-dojo .mwpp-legend h3 { color: var(--mwpp-ink); } .mwpp-theme-dojo .mwpp-notes h3 { color: var(--mwpp-olive); } /* POST-T3 FIX (CLAUDE.md "ISSUE 1", header height pass): fixed 3-column grid, not the flex-wrap row of pills this replaced. flex-wrap made row count a function of the legend panel's own width — worse exactly when the header could least afford it (6 rows at 1200px vs 4 at 1920px, measured before this fix) — where a FIXED column count makes row count a function of the category COUNT only (8 categories / 3 columns = 3 rows, flat from 1920px down to 1366px, verified in a real browser). Same row-count-determinism mechanism Classic's two-column dot-list grid already relies on, just one column denser here since Dojo's pill chrome needs the extra column to land on a comparable total height. */ .mwpp-theme-dojo .mwpp-legend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 8px; } .mwpp-theme-dojo .mwpp-legend-item { display: flex; align-items: center; gap: 4px; font-family: var(--mwpp-font-body); font-weight: 600; /* Tightened from 0.8125rem/5px 12px to fit three per row cleanly at the legend's new, narrower 300px cap (see .mwpp-header .mwpp-legend above) — reads a shade smaller than before, a deliberate trade Mike accepted for the flatter row count. */ font-size: 0.71875rem; background: var(--mwpp-canvas); border: 1px solid var(--mwpp-hairline); border-radius: var(--mwpp-pill-radius); padding: 4px 6px; cursor: pointer; text-align: left; color: var(--mwpp-ink); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .mwpp-theme-dojo .mwpp-legend-item:focus-visible, .mwpp-theme-dojo .mwpp-time-header button:focus-visible { outline: 2px solid var(--mwpp-green); outline-offset: 2px; } .mwpp-theme-dojo .mwpp-legend-dot { width: var(--mwpp-dot-size); height: var(--mwpp-dot-size); min-width: var(--mwpp-dot-size); border-radius: 50%; background: var(--mwpp-olive); display: inline-block; } /* The olive fill above is a fallback only. The per-instance