/* ============================================================ WordPress glue styles, additions on top of styles.css. Uses the same design tokens (see styles.css §1). ============================================================ */ /* ---- Multi-paragraph ACF copy (was

in static markup) ---- */ .acf-copy p { color: var(--ink-soft); } /* On dark sections --muted vanishes into the ink. (.offer is a light bordered panel since 9 Sep 2026, so it is no longer listed here.) */ .bg-ink .acf-copy p { color: rgb(var(--white-rgb) / .86); } .acf-copy p + p { margin-top: 1em; } .acf-copy ul, .acf-copy ol { padding-left: 1.4em; margin-top: 1em; } .acf-copy li + li { margin-top: .4em; } .faq-a-inner p { margin: 0 0 .8em; } .faq-a-inner p:last-child { margin-bottom: 0; } .plan-step > p:last-child { margin-bottom: 0; } /* ---- Native editor content (.prose), pages + posts ---- Width matches the site's narrow standard (--max-narrow, the same cap used by .container--narrow and the FAQ) rather than its own 46rem, which made post pages visibly narrower than everything else. */ .prose { max-width: var(--max-narrow); margin-inline: auto; } .prose > * + * { margin-top: 1.1em; } .prose h2, .prose h3, .prose h4 { line-height: 1.2; margin-top: 1.6em; } .prose ul, .prose ol { padding-left: 1.4em; } .prose li + li { margin-top: .4em; } .prose blockquote { border-left: 3px solid var(--sand); padding: .4em 0 .4em 1.2em; color: var(--ink-soft); font-style: italic; } .prose img { max-width: 100%; height: auto; border-radius: 0; } .prose a:not(.btn) { color: var(--bark); text-decoration: underline; text-underline-offset: 3px; } .prose .wp-block-image figcaption { color: var(--muted); font-size: .85rem; text-align: center; } /* Block-editor content, as produced by the blog import (Aug 2026). Posts carry semantic blocks only, no inline styles, no builder wrappers, so every decision about type, spacing and images is made here in the theme. New posts written in the editor inherit exactly the same treatment. */ .prose > :first-child { margin-top: 0; } .prose p { color: var(--ink-soft); } /* Heading sizes come from styles.css s4 - one size per level everywhere (Steve, 9 Sep 2026 PM). */ .prose h4, .prose h5 { letter-spacing: .01em; } .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .8em; } .prose strong { color: var(--ink); font-weight: 600; } .prose .wp-block-image { margin-block: 2rem; } .prose .wp-block-image img { width: 100%; display: block; } .prose .wp-block-quote { border-left: 3px solid var(--sand); padding: .4em 0 .4em 1.2em; color: var(--ink-soft); font-style: italic; } .prose .wp-block-quote p { margin-top: 0; } .prose .wp-block-quote p + p { margin-top: .8em; } .prose .wp-block-list { padding-left: 1.4em; } .prose hr, .prose .wp-block-separator { border: 0; height: 1px; background: var(--line); margin-block: 2.4rem; } /* ---- Post meta (category + date) ---- */ .post-meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; justify-content: center; } .post-cat { font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--clay-deep); } .post-cat a { color: inherit; text-decoration: none; } .post-cat a:hover { text-decoration: underline; } .alignwide, .alignfull { max-width: none; } .aligncenter { margin-inline: auto; display: block; } /* ---- Post hero media + backlink ---- */ .post-hero-media { border-radius: 0; overflow: hidden; margin-bottom: 2.2rem; } /* `.media img` in styles.css is absolutely positioned (it fills a fixed-height decorative box). The post hero has no set height, so the image must go back to normal flow or the container collapses and the picture never shows. */ .post-hero-media { position: relative; height: auto; } .post-hero-media img { position: static; width: 100%; height: auto; display: block; object-fit: cover; } .post-backlink { max-width: var(--max-narrow); margin: 2.4rem auto 0; } /* ---- Blog category filter (parts/blog-cats.php) ---- Same pill as the About-page teacher tabs (.team-tab in styles.css §34) so the two filters read as one component. These are links, not buttons, each goes to its category archive, matching the old pyc-studios.com/blog/ behaviour. */ .blog-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0 0 clamp(28px, 3.5vw, 48px); } .blog-cat { font-family: inherit; font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); background: transparent; border: 1px solid var(--line-dark); border-radius: 0; padding: .6rem 1.1rem; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; } .blog-cat:hover { border-color: var(--ink); color: var(--ink); } .blog-cat.is-active { background: var(--bark); border-color: var(--bark); color: var(--cream); } @media (max-width: 560px) { .blog-cats { gap: .4rem; } .blog-cat { font-size: .78rem; padding: .45rem .9rem; } } /* ---- News listing ---- */ .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); } @media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .news-grid { grid-template-columns: 1fr; } } .news-card { background: var(--paper); border: 1px solid var(--line); border-radius: 0; overflow: hidden; display: flex; flex-direction: column; } .news-card .media { display: block; aspect-ratio: 16/10; overflow: hidden; } .news-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .news-card:hover .media img { transform: scale(1.04); } .news-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .55rem; } .news-card-body h3 { line-height: 1.2; } .news-card-body h3 a { color: inherit; text-decoration: none; } .news-card-body h3 a:hover { color: var(--bark); } .news-pagination { margin-top: 2.6rem; text-align: center; } .news-pagination .nav-links { display: inline-flex; gap: .5rem; align-items: center; } .news-pagination .page-numbers { display: inline-block; min-width: 2.2rem; padding: .45rem .7rem; border: 1px solid var(--line-dark); border-radius: 0; color: var(--ink); text-decoration: none; font-size: .9rem; } .news-pagination .page-numbers.current { background: var(--bark); border-color: var(--bark); color: var(--cream); } /* ---- Contact Form 7 glue (keeps the .contact-form / .newsletter-form contract) ---- */ .wpcf7 .wpcf7-form-control-wrap { display: block; } .wpcf7 .field .wpcf7-not-valid-tip { color: var(--error); font-size: .85rem; margin-top: .35rem; } .wpcf7 form .wpcf7-response-output { margin: 1.2rem 0 0; padding: .8rem 1.1rem; border: 1px solid var(--line-dark); border-radius: 0; font-size: .92rem; color: var(--ink); } .wpcf7 form.sent .wpcf7-response-output { border-color: var(--bark); background: var(--sand-wash); } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: var(--error); } .wpcf7-spinner { margin: 0 0 0 .6rem; } /* ---- Momence embed placeholder ---- */ .booking-embed-placeholder { border: 1px dashed var(--line-dark); border-radius: 0; padding: 3rem 1.5rem; text-align: center; background: var(--paper); } /* ---- Momence embed, live ---- .booking-embed carries "empty slot" chrome (dashed border, hatched fill, heavy padding, centred text) from styles.css s18. Once a real Momence widget is in the slot that chrome reads as a broken box, so strip it back to a plain container. Keyed off the slot actually containing an embed, which avoids touching the six page templates. Momence's own markup provides the visual framing. */ .booking-embed:has(iframe), .booking-embed:has(> script), .booking-embed:has(> momence-host-schedule) { border: 0; background: none; padding: 0; text-align: left; } .booking-embed iframe { display: block; width: 100%; border: 0; } /* ---- Live Classes schedule box ---- A visible card around the Momence timetable. Two classes so it outranks the :has() strip-back above. White rather than the homepage ink panel: the widget runs in an iframe and reads its --momence* colour vars from :root only, so an ink panel leaves a big white widget floating inside it (tried 13 Aug 2026, reverted). Matching the box to the widget's own near-white ground reads as one clean card. */ .booking-embed.schedule-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 40px); } /* ---- Hero stat row ---- styles.css §? sets .hero-meta as a no-wrap flex row with a 2rem gap, sized for three stats. The "Established 2007" mark makes it four, which overflows narrow screens, so allow wrapping and tighten the gap down the breakpoints. */ .hero-meta { flex-wrap: wrap; row-gap: 1.4rem; } @media (max-width: 760px) { .hero-meta { gap: 1.5rem; row-gap: 1.2rem; } } @media (max-width: 480px) { .hero-meta { gap: 1.1rem; row-gap: 1rem; } .hero-meta .num { font-size: 1.45rem; } .hero-meta .label { font-size: .72rem; } /* The homepage row went up a size on 9 Sep 2026, so it needs its own phone trim at matching specificity - `.hero-meta .num` on its own now loses to `.hero-video-inner .hero-meta .num` in styles.css. */ .hero-video-inner .hero-meta .num { font-size: 1.7rem; } .hero-video-inner .hero-meta .label { font-size: .8rem; } /* The hero eyebrow is the standard eyebrow at every width (Steve, 9 Sep 2026 PM). */ /* Three stats since 1 Oct 2026 (client: "3 Disciplines" removed so the selling points sit on one line on a phone): keep them on one row. */ .hero-video-inner .hero-meta { flex-wrap: nowrap; gap: .9rem; } } @media (max-width: 380px) { .hero-video-inner .hero-meta { gap: .7rem; } .hero-video-inner .hero-meta .num { font-size: 1.5rem; } .hero-video-inner .hero-meta .label { font-size: .72rem; } } /* ---- Momence lead-form widget (newsletter band) ---- Renders in plain DOM (no shadow root) with two class families: hashed styled-components names (sc-*, regenerated on every Momence build) and stable semantic ones. Only ever target the stable `momence-lead_form-*` names. Out of the box the widget ships its own white card, Inter webfont and an indigo submit button, none of which belong in this palette. */ .newsletter-form--momence { padding: clamp(20px, 2.5vw, 32px); } .momence-lead_form-base_container { background: none; padding: 0; box-shadow: none; border: 0; } /* The widget also paints a second, inner white card from a styled-components div whose class is one of the runtime-hashed sc-* names we deliberately don't target. It went unnoticed while --paper was near-white (#FDFCF8); on the Aug 2026 palette it reads as a white slab inside the cream card. Neutralise every wrapper div inside the widget and let the site's own card be the surface, inputs and the submit button aren't divs, so they keep their fills. */ .newsletter-form--momence div { background: transparent !important; box-shadow: none !important; } .momence-lead_form-base_container, .momence-lead_form-base_container * { font-family: inherit; } .momence-lead_form-form_container { display: grid; gap: 1.1rem; } .momence-lead_form-field_label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .45rem; } .momence-lead_form-field_input { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line-dark); border-radius: var(--r-sm); background: var(--cream); font-size: 1rem; color: var(--ink); } .momence-lead_form-field_input:focus { outline: none; border-color: var(--bark); box-shadow: 0 0 0 3px var(--sand-wash); } .momence-lead_form-actions { display: flex; justify-content: flex-start; margin-top: .2rem; } /* Mirrors .btn + .btn--accent without inheriting from it, so a Momence markup change can't silently drop the site's button styling. !important is deliberate and load-bearing here. Momence styles this button with styled-components, which injects its rules through the CSSOM (insertRule) at runtime, they are not in the document as readable CSS, they land after this stylesheet, and they carry their own !important. A plain selector, and even a (0,2,1) one, both lose and the button renders Momence indigo. Scoped to this single third-party widget; do not spread this pattern to first-party CSS. */ .newsletter-form--momence button.momence-lead_form-submit_btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: .92rem 1.6rem !important; border-radius: var(--r-btn) !important; border: 1px solid var(--ink) !important; background: var(--ink) !important; background-color: var(--ink) !important; background-image: none !important; color: var(--cream) !important; font-size: .92rem !important; font-weight: 500 !important; letter-spacing: .01em !important; text-transform: none !important; box-shadow: none !important; cursor: pointer !important; transition: opacity .18s ease !important; } .newsletter-form--momence button.momence-lead_form-submit_btn:hover { opacity: 1 !important; background: var(--ink-soft) !important; background-color: var(--ink-soft) !important; } @media (max-width: 560px) { .momence-lead_form-actions { justify-content: stretch; } .newsletter-form--momence button.momence-lead_form-submit_btn { width: 100%; } } /* ------------------------------------------------------------------ ANCHOR OFFSET FOR THE "WHAT WE TEACH" BLOCKS (About) .site-header is position:sticky, so an anchor jump used to land with the section's top edge tucked under it. The what-we-teach blocks and their #yoga/#mat/#reformer anchors were retired on 17 Aug 2026 (the deep links now go to the filtered timetable); #teachers remains on both About and Practices & Teachers. ------------------------------------------------------------------ */ /* #location joined it on 10 Sep 2026: The Studio is now a row inside the classes/teachers section on About, not a section of its own, and the practice pages / blog "directions" links jump straight to it. */ /* The Teacher Training anchors joined on 17 Sep 2026: #scholarship is a panel inside the fees section and #graduates a quote inside the hero, so neither has section padding of its own to hide the header behind; the rest are redirect targets from the old site and get the same offset for consistency. */ #teachers, #location, #our-story, #overview, #fit, #format, #curriculum, #faculty, #rates, #scholarship, #faq, #apply, #graduates { scroll-margin-top: clamp(88px, 11vh, 124px); } /* ------------------------------------------------------------------ FOOTER LEGAL LINKS .footer-bottom is a space-between flex row; the legal links sit as a third item between the copyright and the Momence credit. Anchors in .footer-bottom are inline (the display:block rule is scoped to .footer-col), so without a gap the two links would run together. ------------------------------------------------------------------ */ .footer-bottom .footer-legal { display: inline-flex; flex-wrap: wrap; gap: .35rem 1.15rem; } .footer-bottom .footer-legal a:hover { color: var(--cream); } /* ============================================================ MOMENCE HOST-SCHEDULE WIDGET (Live Classes timetable) Same contract as the lead-form section above: the widget renders in plain DOM (no shadow root) under #momence-plugin-host-schedule. Only ever target the stable `momence-*` semantic classes and the stable state attributes (data-is-selected, data-is-today, aria-checked), the sc-* hashes change every Momence build. Momence injects its rules through the CSSOM at runtime with its own !important, so !important here is deliberate and load-bearing. Design mapping (pricing page → widget): page greige shows through → widget's white panel made transparent .price-card → session cards (paper / line / r-md) .eyebrow → date labels + "CLASS" type label Playfair display → session titles + prices .btn (ink pill) → Book now .blog-cat pill → filters, tags, view toggle, selects .ilink → Show more / Show bio Not reachable from here: the booking overlay that opens after "Book now" (Momence renders it outside this container). ============================================================ */ /* ---- Surface: drop the white panel, let the page greige through ---- */ #momence-plugin-host-schedule .momence-host-schedule-layout, #momence-plugin-host-schedule .momence-host_schedule { background: transparent !important; box-shadow: none !important; border: 0 !important; padding-inline: 0 !important; } /* Cap the widget's width inside the wide content container and keep it centred. (.momence-host-schedule-layout is the stable name for the element that carries the gFWJWQ-style hash.) */ #momence-plugin-host-schedule .momence-host-schedule-layout { max-width: 1200px !important; margin-inline: auto !important; } /* Fonts. The widget sets its own family two ways: a styled-components rule reading --momence-font-family (its Inter webfont) and `font-family: revert` on its controls, which falls back to the browser default (Arial). A plain `inherit` here lost to both, so most of the widget still rendered in Inter and Arial (computed-style audit, 10 Sep 2026). Feed the widget's own variable AND force the body font; the display-font rules further down are more specific, so titles and prices keep Cormorant. */ #momence-plugin-host-schedule { --momence-font-family: var(--font-body); } #momence-plugin-host-schedule, #momence-plugin-host-schedule * { font-family: var(--font-body) !important; } /* ---- First row: Classes / Workshops / Courses tabs ---- */ #momence-plugin-host-schedule .momence-event_type_select-button { background: transparent !important; font-size: .95rem !important; font-weight: 500 !important; color: var(--muted) !important; } #momence-plugin-host-schedule .momence-event_type_select-button:hover { color: var(--ink) !important; } /* the active tab is the one carrying the underline div */ #momence-plugin-host-schedule .momence-event_type_select-button:has(div) { color: var(--ink) !important; } #momence-plugin-host-schedule .momence-event_type_select-button > div { background: var(--clay) !important; } /* ---- Week / Month toggle ---- Momence marks the active view only via an sc-* hash, so there is no stable hook for it; both buttons get the neutral pill and the active view stays evident from the content itself (list vs calendar). */ #momence-plugin-host-schedule .momence-view-toggle { background: transparent !important; border: 0 !important; box-shadow: none !important; gap: .4rem !important; } #momence-plugin-host-schedule .momence-view-toggle button { background: var(--paper) !important; border: 1px solid var(--line-dark) !important; border-radius: var(--r-pill) !important; color: var(--ink-soft) !important; font-size: .84rem !important; font-weight: 500 !important; box-shadow: none !important; } #momence-plugin-host-schedule .momence-view-toggle button:hover { border-color: var(--ink) !important; color: var(--ink) !important; } /* ---- Day strip ---- */ #momence-plugin-host-schedule .momence-day_selection { background: transparent !important; } #momence-plugin-host-schedule .momence-day_selection-item { background: transparent !important; } #momence-plugin-host-schedule .momence-day_selection-item_day { font-size: .68rem !important; font-weight: 600 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--muted) !important; } #momence-plugin-host-schedule .momence-day_selection-item_highlight { color: var(--ink) !important; font-weight: 500 !important; } #momence-plugin-host-schedule .momence-day_selection-item_num-days { color: var(--clay) !important; } /* selected day: terracotta, where Momence used indigo */ #momence-plugin-host-schedule .momence-day_selection-item[data-is-selected="true"] .momence-day_selection-item_day, #momence-plugin-host-schedule .momence-day_selection-item[data-is-selected="true"] .momence-day_selection-item_highlight { color: var(--clay-deep) !important; font-weight: 600 !important; } #momence-plugin-host-schedule .momence-day_selection-item[data-is-today="true"] .momence-day_selection-item_day { color: var(--clay-deep) !important; } /* ---- Arrows + pagination ---- */ #momence-plugin-host-schedule .momence-arrow-button, #momence-plugin-host-schedule .momence-pagination-button { background: var(--paper) !important; border: 1px solid var(--line-dark) !important; border-radius: var(--r-pill) !important; color: var(--ink) !important; box-shadow: none !important; } #momence-plugin-host-schedule .momence-arrow-button:hover, #momence-plugin-host-schedule .momence-pagination-button:hover { border-color: var(--ink) !important; } #momence-plugin-host-schedule .momence-pagination-button[aria-current] { background: var(--bark) !important; border-color: var(--bark) !important; color: var(--cream) !important; } /* ---- Filter pills: SHOW ALL / TODAY + class-type tags ---- Mirrors .blog-cat so every filter on the site reads as one component. */ #momence-plugin-host-schedule .momence-quick_filters button, #momence-plugin-host-schedule .momence-host_dashboard-tag_button { /* Same type as the .pyc-tagrow chips seated directly beneath (12px/500/.14em). */ font-size: .75rem !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--ink-soft) !important; background: var(--paper) !important; border: 1px solid var(--line-dark) !important; border-radius: var(--r-pill) !important; box-shadow: none !important; transition: background .2s ease, color .2s ease, border-color .2s ease !important; } #momence-plugin-host-schedule .momence-quick_filters button:hover, #momence-plugin-host-schedule .momence-host_dashboard-tag_button:hover { border-color: var(--ink) !important; color: var(--ink) !important; } #momence-plugin-host-schedule .momence-host_dashboard-tag_button[aria-checked="true"] { background: var(--bark) !important; border-color: var(--bark) !important; color: var(--cream) !important; } /* ---- Workshops & Events page: workshops only ---- The embed already passes session_type="workshop". The Classes / Workshops / Courses tabs and the class-type tag chips are hidden; the dates, Week / Month, SHOW ALL / TODAY and Teachers / Locations stay (client, 2 Oct 2026). */ .page-template-workshops #momence-plugin-host-schedule .momence-host_dashboard-tags_row, .page-template-workshops #momence-plugin-host-schedule .momence-event_type_select { display: none !important; } /* ---- Teachers / Locations selects ---- */ #momence-plugin-host-schedule .momence-select-button { background: var(--paper) !important; border: 1px solid var(--line-dark) !important; border-radius: var(--r-pill) !important; color: var(--ink-soft) !important; font-size: .88rem !important; font-weight: 500 !important; box-shadow: none !important; } #momence-plugin-host-schedule .momence-select-button:hover { border-color: var(--ink) !important; color: var(--ink) !important; } /* open dropdown panel (headlessui listbox, rendered inline) */ #momence-plugin-host-schedule ul[role="listbox"] { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; box-shadow: var(--shadow-soft) !important; color: var(--ink) !important; } #momence-plugin-host-schedule ul[role="listbox"] li { color: var(--ink) !important; } #momence-plugin-host-schedule ul[role="listbox"] li:hover { background: var(--sand-wash) !important; } /* ---- Date group labels (TODAY / TOMORROW / dates), .eyebrow ---- */ #momence-plugin-host-schedule .momence-host_schedule-session_list-date_label { font-size: .72rem !important; font-weight: 500 !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--bark) !important; } /* ---- Session cards, .price-card ---- */ #momence-plugin-host-schedule .momence-host_schedule-session_list-item { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: var(--r-md) !important; box-shadow: none !important; transition: box-shadow .3s ease, border-color .3s ease !important; } #momence-plugin-host-schedule .momence-host_schedule-session_list-item:hover { border-color: var(--line-dark) !important; box-shadow: var(--shadow-card) !important; } #momence-plugin-host-schedule .momence-host_schedule-session_list-item-image { border-radius: 0 !important; } /* "CLASS" kicker, tag treatment */ #momence-plugin-host-schedule .momence-host_schedule-session_list-item-type { /* .eyebrow spec (.72rem/500/.2em), like every small-caps label on the site. */ font-family: var(--font-body) !important; font-size: .72rem !important; font-weight: 500 !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--bark) !important; } /* Session title, Playfair, like every card heading on the site */ #momence-plugin-host-schedule .momence-host_schedule-session_list-item-title { font-family: var(--font-display) !important; font-size: 1.45rem !important; font-weight: 500 !important; line-height: 1.15 !important; letter-spacing: -.01em !important; color: var(--ink) !important; } /* Teacher row; Show bio + Show more read as inline links (.ilink) */ #momence-plugin-host-schedule .momence-session-teacher { color: var(--ink-soft) !important; } /* Momence draws the teacher headshot as a circle; square it like the site's own portraits (9 Sep 2026). */ #momence-plugin-host-schedule .momence-session-teacher img { border-radius: 0 !important; } #momence-plugin-host-schedule .momence-session-teacher button, #momence-plugin-host-schedule .momence-host_schedule-session_list-expand-button { background: none !important; border: 0 !important; padding: 0 !important; color: var(--bark) !important; font-size: .88rem !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px !important; cursor: pointer !important; } #momence-plugin-host-schedule .momence-session-teacher button:hover, #momence-plugin-host-schedule .momence-host_schedule-session_list-expand-button:hover { color: var(--ink) !important; } /* Description + info rows (icons are stroke:currentColor, so they tint too) */ #momence-plugin-host-schedule .momence-host_schedule-session_list-item-description { /* Site paragraph spec: 16px / 1.6 / ink-soft (one style per text element, 9 Sep 2026). */ color: var(--ink-soft) !important; font-size: 1rem !important; line-height: 1.6 !important; } #momence-plugin-host-schedule .momence-host_schedule-session_list-item-info { color: var(--muted) !important; font-size: .9rem !important; } #momence-plugin-host-schedule .momence-host_schedule-session_list-item-info svg { color: var(--bark) !important; } /* Price, Playfair figure, mirrors .price-card .price */ #momence-plugin-host-schedule .momence-host_schedule-session_list-item-price { color: var(--ink) !important; } #momence-plugin-host-schedule .momence-host_schedule-session_list-item-price > div:not(:last-child) { font-size: .8rem !important; color: var(--muted) !important; } #momence-plugin-host-schedule .momence-host_schedule-session_list-item-price > div:last-child { font-family: var(--font-display) !important; font-size: 2rem !important; font-weight: 500 !important; line-height: 1 !important; color: var(--ink) !important; } /* "In-person or online" note, soft wash pill, like .price-card .tag */ #momence-plugin-host-schedule .momence-host_schedule-session_list-item-hybrid-session-info { background: var(--sand-wash) !important; border: 0 !important; border-radius: var(--r-pill) !important; color: var(--bark) !important; font-size: .74rem !important; padding: .35rem .75rem !important; } /* ---- Book now, mirrors .btn without inheriting from it ---- Two CTA shapes exist: a