/* * Music Chef — Responsive corrections * --------------------------------------------------------------------------- * style.css is 162 KB and is not edited in place, so fixes that would * otherwise be surgical edits inside it land here instead. Enqueued from * functions.php with `musicchef-style` as a dependency, so equal-specificity * rules in this file win. * * DESKTOP IS UNCHANGED for FIXES 1–3. Everything in them is either inside a * max-width media query, or applies to an element/state that does not exist on * the site today (.nav-toggle, .nav-mobile, .mc-table-scroll, .is-open) — with * one exception, the :focus-within rule, which only fires for keyboard users * who previously could not open the Explore menu at all. * * FIX 4 IS DELIBERATELY DESKTOP-AFFECTING. See its header. * FIX 5 IS DELIBERATELY DESKTOP-AFFECTING. See its header. * * SECTION 6 IS NOT A FIX. It is the presentation layer for NEW classes that * exist only inside the membership offer card, and it therefore cannot change * anything that shipped before it. See its header. * * SECTIONS 7 AND 8 ARE NOT FIXES EITHER, for the same reason — both style * markup that did not exist before 2026-08-12. See their headers. */ /* ═════════════════════════════════════════════════════════════════════════════════ FIX 1 — MOBILE NAVIGATION header.php hand-rolls .nav-links and never rendered a mobile menu, so at 375px eight nowrap links, a cart and a Sign In button shared one 64px row. ═════════════════════════════════════════════════════════════════════════════════ */ /* New elements. Hidden everywhere by default; the media query below turns them on. Stated here so they can never appear on desktop. */ .nav-toggle{display:none} .nav-mobile{display:none} /* Explore dropdown — reachable without a mouse. The only rule that opened it was `.nav-dropdown:hover .nav-dropdown__menu{display:block}`: no focus state, no click handler, so it was unreachable by touch and by keyboard. These selectors are purely additive. :focus-within — a keyboard user tabbing onto the trigger opens the menu. .is-open — set by musicchef.js on touch devices. Inert until then. */ .nav-dropdown:focus-within > .nav-dropdown__menu, .nav-dropdown.is-open > .nav-dropdown__menu{display:block} .nav-dropdown:focus-within .nav-dropdown__chevron, .nav-dropdown.is-open .nav-dropdown__chevron{transform:rotate(180deg)} @media (max-width:900px){ /* Swap the desktop link row for the panel — but only when carries .mc-js. If musicchef.js fails to load the old cramped row is still there, which is worse than the panel and far better than no nav. */ .mc-js .nav-links{display:none} .mc-js .nav-toggle{ display:inline-flex;flex-direction:column;align-items:center;justify-content:center; width:42px;height:42px;padding:0;margin-left:10px;flex-shrink:0; background:none;border:1px solid var(--border);border-radius:var(--radius); color:var(--charcoal);cursor:pointer; -webkit-appearance:none;appearance:none; transition:border-color .15s,color .15s; } .mc-js .nav-toggle:hover, .mc-js .nav-toggle:focus-visible{border-color:var(--gold);color:var(--gold-dark)} .nav-toggle__bar{ display:block;width:18px;height:2px;background:currentColor;border-radius:2px; transition:transform .2s ease,opacity .15s ease; } .nav-toggle__bar + .nav-toggle__bar{margin-top:4px} /* Bars are 2px on a 6px pitch, so 6px of travel folds them into an X. */ .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* The panel. nav.site-nav is position:sticky, which is a positioned ancestor, so top:100% lands it directly under the 64px bar. */ .mc-js .nav-mobile.is-open{ display:block; position:absolute;top:100%;left:0;right:0; background:var(--white); border-top:1px solid var(--border); box-shadow:0 10px 26px #00000014; max-height:calc(100vh - 64px); overflow-y:auto;-webkit-overflow-scrolling:touch; padding:10px 16px 20px; z-index:998; } .nav-mobile__list,.nav-mobile__sub{list-style:none;margin:0;padding:0} .nav-mobile__list > li{margin:0;padding:0} .nav-mobile a{ display:block;padding:12px;border-radius:var(--radius); font-size:15px;font-weight:500;color:var(--charcoal);text-decoration:none; } .nav-mobile a:hover,.nav-mobile a:focus{background:var(--gold-light);color:var(--gold-dark);text-decoration:none} .nav-mobile a.active{color:var(--gold-dark)} .nav-mobile__cta{ background:var(--gold);color:var(--charcoal); font-weight:600;text-align:center;margin-bottom:8px; } .nav-mobile__cta:hover,.nav-mobile__cta:focus{background:var(--gold-dark);color:#fff} /* Explore keeps its link to /explore/; the chevron beside it is a separate button that opens the topic list. Tapping the word navigates, tapping the chevron discloses — neither steals the other's job. */ .nav-mobile__row{display:flex;align-items:center;gap:6px} .nav-mobile__row > a{flex:1 1 auto;min-width:0} .nav-mobile__disclosure{ flex:0 0 auto;width:44px;height:44px; display:inline-flex;align-items:center;justify-content:center; background:none;border:1px solid var(--border);border-radius:var(--radius); color:var(--muted);font-size:12px;line-height:1;cursor:pointer; -webkit-appearance:none;appearance:none; } .nav-mobile__disclosure:hover, .nav-mobile__disclosure:focus-visible{border-color:var(--gold);color:var(--gold-dark)} .nav-mobile__disclosure > span{display:block;transition:transform .18s} .nav-mobile__disclosure[aria-expanded="true"] > span{transform:rotate(180deg)} .nav-mobile__sub{display:none;margin:2px 0 6px;padding-left:12px;border-left:2px solid var(--gold-muted)} .nav-mobile__sub.is-open{display:block} .nav-mobile__sub a{font-size:14px;padding:10px 12px;color:var(--muted)} } /* Narrow phones: claw back a little of the 24px container gutter so the logo, cart, Sign In and hamburger never crowd. */ @media (max-width:400px){ .mc-js .nav-inner{padding:0 14px} .mc-js .nav-toggle{margin-left:6px} } /* ═════════════════════════════════════════════════════════════════════════════════ FIX 2 — COMPARISON TABLES SCROLL INSTEAD OF OVERFLOWING .comparison-table is width:100% with five columns, and the only treatment below 768px was a font/padding reduction — so on a 375px screen it either overflowed or became unreadable. This lives in the shared stylesheet rather than in a page template because the Pro table and the (still draft) Membership table need identical behaviour and their templates are separate files — one of which is off limits this round. The affordance is a line of text, not a gradient fade: the Pro table sits on --white (#fff) and the Membership table on --bg (#faf9f6), so any hardcoded fade colour would be visibly wrong on one of the two. ═════════════════════════════════════════════════════════════════════════════════ */ .mc-table-scroll{position:relative} .mc-table-scroll__hint{display:none} @media (max-width:768px){ /* overflow-x:auto is deliberately INSIDE the media query. Setting it at all widths would compute overflow-y to auto as well, and that clips the table's own box-shadow on desktop — a real regression for a rule that does nothing up there anyway, because the table fits. */ .mc-table-scroll__viewport{overflow-x:auto;-webkit-overflow-scrolling:touch} .mc-table-scroll__viewport:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--radius)} /* Without a min-width the table just shrinks to the viewport and never scrolls — width:100% would happily render five columns at 60px each. */ .mc-table-scroll__viewport .comparison-table{min-width:560px} .mc-table-scroll__hint{ display:block;margin:10px 0 0; font-size:12px;font-weight:500;color:var(--muted);text-align:right; } } /* ═════════════════════════════════════════════════════════════════════════════════ FIX 3 — HOMEPAGE HERO CARD FAN FITS A PHONE Arithmetic, all measured off the live style.css: .container padding:0 24px → 375 − 48 = 327px of content .hero-fan card flex:0 0 138px, height 200px card + card margin-left:-46px 4-card flex box 4×138 − 3×46 = 414px rotation overhang ±7deg about bottom-centre adds (w/2)cos7 + h·sin7 − w/2 ≈ 0.173w = 24px each side total visual extent = 462px The fan is centred in a 327px column, so it spilled ~43px past each edge and .hero-home{overflow:hidden} clipped it at the 375px viewport — taking the right-hand half of card 4, and its tap target, with it. New numbers keep the proportions identical (overlap = w/3, h ≈ 1.45w), so the fan just scales down rather than changing shape: w 96 · h 139 · overlap 32 4-card flex box 4×96 − 3×32 = 288px rotation overhang 0.173 × 96 = 17px each side total visual extent = 322px ≤ 327 ✓ tap strip per card 96 − 32 = 64px (min 44) ✓ 3-card tools fan 3×96 − 2×32, ±5deg overhang 10px = 244px ✓ Both fans now sit inside the container with the gutter to spare, so nothing reaches the clipping edge at 375px — or at 360px. ═════════════════════════════════════════════════════════════════════════════════ */ @media (max-width:768px){ .hero-fan .mc-choice-card{flex:0 0 96px;height:139px;padding:12px 8px 10px} .hero-fan .mc-choice-card + .mc-choice-card{margin-left:-32px} .hero-fan .mc-choice-card__icon{font-size:20px} .hero-fan .mc-choice-card__title{font-size:9.5px} } /* ═════════════════════════════════════════════════════════════════════════════════ FIX 4 — TWO BLOCK WRAPPERS THAT NEVER GOT A STYLE RULE (2026-08-12) THIS ONE CHANGES DESKTOP ON PURPOSE. It is a missing-rule bug, not a redesign. MC_Content_Blocks wraps the CTA block in .cc-cta-section and the Trust block in .cc-trust-section. Neither selector exists anywhere in style.css — the only sibling that does is .cc-interview-section{background:var(--navy); padding:72px 0}. So both blocks have been rendering with ZERO vertical padding and sitting flush against whatever precedes and follows them. That is why the closing CTA on the home page and the "From Will" quote on /coaching/ both read as cramped. 72px matches .cc-interview-section exactly, so the page rhythm is the one the design already uses rather than a new number. The card padding bump is the same idea one level in: .cc-interview-bridge is 48px 40px, which was tight before the CTA carried a button and is tighter now that it does. ═════════════════════════════════════════════════════════════════════════════════ */ .cc-cta-section{padding:72px 0} .cc-trust-section{padding:72px 0} .cc-cta-section .cc-interview-bridge{padding:56px 48px} /* The CTA button arrives from post_content as its own wpautop paragraph, so it inherits .cc-interview-bridge p{margin:0 auto 28px} and would hang 28px of dead space below itself inside the card. */ .cc-interview-bridge > p:last-child{margin-bottom:0} .cc-interview-bridge .btn{margin-top:4px} @media (max-width:600px){ .cc-cta-section, .cc-trust-section{padding:48px 0} .cc-cta-section .cc-interview-bridge{padding:36px 24px} } /* ═════════════════════════════════════════════════════════════════════════════════ FIX 5 — THE ADD-TO-CART SPINNER NO LONGER SHOWS AT REST (2026-08-12) THIS ONE CHANGES DESKTOP ON PURPOSE. It is a missing-rule bug. edd_get_purchase_link() renders its ajax loader INSIDE the button: The loader is meant to be invisible until an add-to-cart is actually in flight. Nothing in style.css hides it — the ONLY rules that do are scoped to the kit panel (style.css lines 162–164, "EDD's spinner sits inside the button and was ghosting through the label"). Every purchase button outside .mc-kit-get__buy — /membership/ included — has therefore been animating a faint circular spinner behind its label permanently. This is the kit-panel fix, unscoped. It hides the loader AT REST only. ⭐ THE LOADING STATE STILL WORKS, by three independent routes, because the spinner is re-shown for every class EDD is known to set while loading, and because NO !important is used here — so EDD's older jQuery .show()/.toggle() path, which writes an INLINE display onto the span, still beats these rules outright. Do not add !important to this block; that is what would break it. ═════════════════════════════════════════════════════════════════════════════════ */ /* At rest — descendant selectors only, so a button that itself carries .edd-loading is never hidden, only the span inside it. */ .edd-add-to-cart .edd-loading, .edd-add-to-cart .edd-loading-ajax{display:none} /* In flight — EDD 3.2+ puts .edd-loading-active on the button. */ .edd-add-to-cart.edd-loading-active .edd-add-to-cart-label{visibility:hidden} .edd-add-to-cart.edd-loading-active .edd-loading, .edd-add-to-cart.edd-loading-active .edd-loading-ajax{display:inline-block} /* In flight — older EDD puts .edd-loading on the button instead. */ .edd-add-to-cart.edd-loading .edd-add-to-cart-label{visibility:hidden} .edd-add-to-cart.edd-loading .edd-loading, .edd-add-to-cart.edd-loading .edd-loading-ajax{display:inline-block} /* ═════════════════════════════════════════════════════════════════════════════════ 6 — MEMBERSHIP OFFER CARD — SUPPORT FRAMING (2026-08-12) NOT A FIX. This is the presentation layer for four NEW classes introduced by the support-framing rewrite of the membership card in template-membership.php: .mc-offer-lede the one-paragraph reason, directly under the name. Its is de-italicised and brightened — the emphasis is tonal, not typographic. .mc-offer-rule a hairline
separating the price from the two benefit lists. .mc-offer-kicker the small gold label above each list ("What your support does" / "And a small thank-you"). --tight tucks the second one up under the list above. .mc-offer-list--plain removes the gold ✓ from the FIRST list only. Those lines describe what the money does, not what the member receives — a tick would read as an entitlement and quietly contradict the copy. The second list keeps its ticks, because those ARE entitlements. WHY THESE LIVE HERE AND NOT IN style.css ---------------------------------------- Same reason as every section above: style.css is 162 KB and is not edited in place on the live site, so a new component's rules land in this file, which is enqueued AFTER it with musicchef-style as a dependency. Equal-specificity rules here therefore win, and the ✓-suppression below deliberately outranks .membership-offer-features li::before by carrying the card's id. ⚠ SCOPING IS DELIBERATE, AND IT IS TWO-TIER. Every rule is scoped to #membership — the membership card. The Free card is #free and shares the .membership-offer-* classes, so an unscoped rule here would reach it. It never can now, whatever markup either card grows later. Within that: · #membership … → structure + LIGHT-card colours. The card renders white in the "already a member" and "not open yet" states, where white-on-charcoal text would be invisible. · #membership.membership-offer-card--featured … → the approved DARK-card colours. That modifier is only emitted when the product is live and the viewer is not already a member, which is the state Will approved. The id must appear in BOTH tiers: an id is specificity (1,0,0) and would otherwise beat a plain .membership-offer-card--featured selector, and the dark colours would silently never apply. ⚠ rgba() IS SAFE HERE BECAUSE THIS IS A CSS FILE. The same values written into post content would be stripped — content blocks run through wp_kses_post(), which removes style declarations it does not recognise. Stylesheets are served as-is and never pass through KSES. That distinction has bitten this project before; it is the reason a colour like this belongs in a stylesheet rather than in a block. ═════════════════════════════════════════════════════════════════════════════════ */ /* ── Structure + light-card colours (member / not-open states) ─────────── */ #membership .mc-offer-lede{ font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 16px; } #membership .mc-offer-lede em{font-style:normal;color:var(--heading)} #membership .mc-offer-rule{ border:0;border-top:1px solid var(--border);margin:0 0 16px; } #membership .mc-offer-kicker{ font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--gold-dark);margin:0 0 10px; } /* The second kicker follows .membership-offer-features, which already carries margin-bottom:24px. 2px is a nudge, not a gap — enough to bind the label to the list it introduces rather than to the list above it. */ #membership .mc-offer-kicker--tight{margin-top:2px} /* First list only. padding-left is restated because the base rule sets padding with the shorthand (8px 0); a longhand of 0 here keeps the text flush once the ✓ is gone, and leaves the vertical rhythm alone. */ #membership .mc-offer-list--plain li::before{content:none} #membership .mc-offer-list--plain li{padding-left:0} /* ── Dark-card colours — the approved state ───────────────────────── */ #membership.membership-offer-card--featured .mc-offer-lede{color:rgba(255,255,255,.72)} #membership.membership-offer-card--featured .mc-offer-lede em{color:#fff} #membership.membership-offer-card--featured .mc-offer-rule{border-top-color:rgba(255,255,255,.12)} #membership.membership-offer-card--featured .mc-offer-kicker{color:var(--gold)} /* ═════════════════════════════════════════════════════════════════════════════════ 7 — POST-PURCHASE COACHING OFFER (2026-08-12) NOT A FIX. Presentation for markup that did not exist before today: the SUPPORTER20 coaching block printed by musicchef_postbuy_coaching_offer() in inc/launch-commerce.php, between the products and the Order table on /checkout/confirmation/. ⚠ EVERY RAIL RULE IS SCOPED UNDER .mc-postbuy, ON PURPOSE. .mc-topic-rail / .mc-topic-track / .mc-topic-card are ALSO the classes used by the "What Sessions Cover" content block on /coaching/ — and, measured on live today, NOTHING in style.css or this file styles them, so that rail currently renders as a plain stack. Writing these rules unscoped would silently restyle a live page nobody asked us to touch. If /coaching/ should get the same treatment, that is a separate, deliberate change. The fade colours are the literal value of --gold-light (#f7f5ed) rather than the variable, because a gradient needs a fully transparent stop of the SAME colour and `transparent` computes to rgba(0,0,0,0) — which greys the middle of the fade in Safari. Keep the two in step if the token ever moves. ═════════════════════════════════════════════════════════════════════════════════ */ .mc-postbuy{ background:var(--gold-light); border-top:1px solid var(--gold-muted); border-bottom:1px solid var(--gold-muted); padding:36px 0 30px;margin:32px 0; font-family:var(--font-body); } .mc-postbuy__head{max-width:620px;margin:0 auto;padding:0 24px;text-align:center} .mc-postbuy__eyebrow{ display:inline-block;padding:4px 12px;border-radius:999px; background:var(--gold-muted);color:var(--gold-dark); font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; } .mc-postbuy__title{ font-family:var(--font-display);font-size:26px;line-height:1.25; color:var(--heading);margin:14px 0 10px; } .mc-postbuy__body{font-size:15px;line-height:1.65;color:var(--body);margin:0 0 16px} .mc-postbuy__code{ display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap; padding:9px 16px;background:var(--white); border:1px dashed var(--gold-dark);border-radius:var(--radius,8px); } .mc-postbuy__code strong{font-size:15px;font-weight:700;letter-spacing:.09em;color:var(--charcoal)} .mc-postbuy__code span{font-size:12.5px;color:var(--muted)} .mc-postbuy__fine{font-size:12.5px;line-height:1.6;color:var(--muted);margin:14px 0 0} /* ── The rail ────────────────────────────────────────────────── */ .mc-postbuy__rail{position:relative;margin-top:26px} .mc-postbuy .mc-topic-rail{ overflow-x:auto;overflow-y:hidden; padding:4px 46px; scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch; } .mc-postbuy .mc-topic-rail::-webkit-scrollbar{display:none} .mc-postbuy .mc-topic-rail:focus-visible{outline:2px solid var(--gold-dark);outline-offset:2px;border-radius:var(--radius,8px)} /* grid-auto-flow:column with a fixed track width is what makes scrollWidth exactly twice the width of one set of cards — which is the number the JS wraps on. A flex row with wrapping would break that arithmetic. */ .mc-postbuy .mc-topic-track{ display:grid;grid-auto-flow:column;grid-auto-columns:minmax(262px,262px); gap:16px;align-items:stretch; } .mc-postbuy .mc-topic-card{ display:flex;flex-direction:column; background:var(--white);border:1px solid var(--border); border-radius:var(--radius-lg,12px);padding:20px 22px; } .mc-postbuy .mc-topic-card h4{ font-family:var(--font-display);font-size:17px;line-height:1.3; color:var(--heading);margin:0 0 8px; } .mc-postbuy .mc-topic-card p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 14px} .mc-postbuy .mc-topic-save{ align-self:flex-start;margin:0 0 12px;padding:3px 10px;border-radius:999px; background:var(--gold);color:var(--charcoal); font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; } /* margin-top:auto pins the two buttons to the bottom of every card, so a short description and a long one still line their CTAs up across the rail. */ .mc-postbuy .mc-topic-book{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto} .mc-postbuy .mc-topic-book a{ display:block;padding:9px 6px;text-align:center;text-decoration:none; border:1px solid var(--gold-dark);border-radius:var(--radius,8px); background:var(--white);color:var(--gold-dark); font-size:13px;font-weight:600; transition:background .15s,color .15s; } .mc-postbuy .mc-topic-book a:hover, .mc-postbuy .mc-topic-book a:focus-visible{background:var(--gold);color:var(--charcoal);text-decoration:none} /* ── Arrows and edge fades ─────────────────────────────────────── */ .mc-postbuy__nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:2; width:38px;height:38px;padding:0 0 2px; display:inline-flex;align-items:center;justify-content:center; background:var(--white);border:1px solid var(--border);border-radius:50%; color:var(--charcoal);font-size:20px;line-height:1;cursor:pointer; box-shadow:0 2px 10px rgba(30,42,56,.12); -webkit-appearance:none;appearance:none;transition:.15s; } .mc-postbuy__nav:hover{border-color:var(--gold);background:var(--gold)} .mc-postbuy__nav:focus-visible{outline:2px solid var(--gold-dark);outline-offset:2px} .mc-postbuy__nav--prev{left:4px} .mc-postbuy__nav--next{right:4px} .mc-postbuy__fade{position:absolute;top:0;bottom:0;width:52px;pointer-events:none;z-index:1} .mc-postbuy__fade--left{left:0;background:linear-gradient(to right,#f7f5ed 30%,rgba(247,245,237,0))} .mc-postbuy__fade--right{right:0;background:linear-gradient(to left,#f7f5ed 30%,rgba(247,245,237,0))} @media (max-width:600px){ .mc-postbuy{padding:28px 0 24px} .mc-postbuy__title{font-size:22px} .mc-postbuy__head{padding:0 18px} .mc-postbuy .mc-topic-rail{padding:4px 38px} .mc-postbuy .mc-topic-track{grid-auto-columns:minmax(240px,240px)} .mc-postbuy__nav{width:32px;height:32px;font-size:17px} .mc-postbuy__nav--prev{left:2px} .mc-postbuy__nav--next{right:2px} .mc-postbuy__fade{width:34px} } /* ═════════════════════════════════════════════════════════════════════════════════ 8 — MY DOWNLOADS + MY PROFILE ON THE MEMBER DASHBOARD (2026-08-12) NOT A FIX. Presentation for two panels added to template-dashboard.php today, which render EDD's [download_history] and [edd_profile_editor] shortcodes. Those two templates emit bare ,
, ,

,