/* Theme Name: Hello Elementor Child Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash Template: hello-elementor Author: Elementor Team Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators. Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready Version: 3.0.0.1705503492 Updated: 2024-01-17 14:58:12 */ .mobilates-reading-time { color: #5f6478; font-family: "Mulish", sans-serif; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; } .mobilates-reading-time__separator { color: #c0177f; padding-inline-end: 0.35em; } /* Category/taxonomy "tag" links (post-terms dynamic tag on blog cards, single posts, and Class Finder cards) have no class, so they fall back to the parent theme's bare `a{color:#c36}` reset rule, which fails AA contrast on the light pink card backgrounds. #c0177f is Mobilates' own "berry" brand colour, same hue family, passes 4.5:1+ everywhere it's used. */ a[rel="tag"] { color: #c0177f; } a[rel="tag"]:hover, a[rel="tag"]:focus { color: #a80f6b; } .mobilates-back-to-top { position: fixed; left: 24px; bottom: 24px; z-index: 99980; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 3px solid #ffffff; border-radius: 50%; background: #272262; color: #ffffff; box-shadow: 0 8px 24px rgba(39, 34, 98, 0.3); cursor: pointer; transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .mobilates-back-to-top[hidden] { display: none; } .mobilates-back-to-top:hover { background: #bf1473; transform: translateY(-2px); } .mobilates-back-to-top:focus-visible { outline: 3px solid #bf1473; outline-offset: 3px; box-shadow: 0 0 0 6px #ffffff, 0 8px 24px rgba(39, 34, 98, 0.3); } .mobilates-back-to-top svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.4; } @media (max-width: 767px) { .mobilates-back-to-top { left: 18px; bottom: 18px; width: 48px; height: 48px; } } @media (prefers-reduced-motion: reduce) { .mobilates-back-to-top { transition: none; } } /* Keep Theme Builder header controls at an accessible pointer target size. */ .elementor-location-header .elementor-menu-toggle, .elementor-location-header .elementor-button { min-width: 44px; min-height: 44px; } .elementor-location-header .elementor-nav-menu a { min-width: 44px; } .elementor-location-header .elementor-button { border-color: #bf1473 !important; background-color: #bf1473 !important; } .elementor-location-header .elementor-button:hover, .elementor-location-header .elementor-button:focus-visible { border-color: #272262 !important; background-color: #272262 !important; } .elementor-location-header .elementor-item-active { color: #bf1473 !important; } main p a, main li a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; } /* Elementor V4 leaves both navigation presentations in the DOM. */ @media (min-width: 1367px) { .elementor-695 .mobilates-header-nav .elementor-menu-toggle { display: none !important; } .elementor-695 .mobilates-header-nav { height: auto !important; } } @media (max-width: 1366px) { .elementor-695 .mobilates-header-nav .elementor-nav-menu--main { display: none !important; } .elementor-695 .mobilates-header-nav .elementor-menu-toggle { display: flex !important; align-items: center; justify-content: center; } .elementor-695 .mobilates-header-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"] { display: block !important; } } /* Bridge Elementor's Laptop menu breakpoint without changing the header structure. */ @media (min-width: 1201px) and (max-width: 1366px) { .elementor-695 .mobilates-header-bar > .e-con-inner { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; } .elementor-695 .mobilates-header-logo { grid-column: 1; } .elementor-695 .mobilates-header-cta { grid-column: 2; justify-self: end; } .elementor-695 .mobilates-header-nav { grid-column: 3; justify-self: end; width: auto; } .elementor-695 .mobilates-header-nav .elementor-menu-toggle { width: 46px; height: 46px; margin: 0; border-radius: 50%; background: #d9238f; color: #fffafe; font-size: 22px; } .elementor-695 .mobilates-header-nav .elementor-nav-menu--dropdown { position: fixed !important; top: 96px !important; left: 20px !important; right: 20px !important; width: auto !important; max-height: calc(100vh - 90px); overflow-y: auto; background: #fffafe !important; border: 1px solid rgba(39, 34, 98, 0.14); border-radius: 0 0 16px 16px; box-shadow: 0 18px 40px rgba(39, 34, 98, 0.16); } .elementor-695 .mobilates-header-nav .elementor-nav-menu--dropdown a { background: transparent !important; color: #272262 !important; font-family: "Mulish", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.25; padding: 13px 18px; } .elementor-695 .mobilates-header-nav .elementor-nav-menu--dropdown a:hover, .elementor-695 .mobilates-header-nav .elementor-nav-menu--dropdown a:focus, .elementor-695 .mobilates-header-nav .elementor-nav-menu--dropdown a.elementor-item-active { background: #fce5f4 !important; color: #bf1473 !important; } .elementor-695 .mobilates-header-nav .elementor-nav-menu--dropdown .elementor-sub-item { padding-inline-start: 36px; font-weight: 600; } } /* * Legacy dynamic-template bridge only. * * Static shared heroes are styled entirely through their visible Elementor * Atomic global/local classes. These selectors remain solely for the two * Theme Builder templates whose Featured Image is still a legacy widget. */ .c-mobilates-hero.c-mobilates-hero--dynamic, .c-mobilates-hero:has(> .global_hero_media) { position: relative; isolation: isolate; --mobilates-hero-image-position: center center; background-image: none !important; padding: 0 !important; } .c-mobilates-hero.c-mobilates-hero--dynamic::before, .c-mobilates-hero:has(> .global_hero_media)::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none; background: linear-gradient( 90deg, #d9238f 0%, #d9238fF0 37%, #d9238f8C 68%, #DE50AA26 100% ); } .c-mobilates-hero.c-mobilates-hero--dynamic > .global_hero_media, .c-mobilates-hero:has(> .global_hero_media) > .global_hero_media { position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; overflow: hidden !important; } .c-mobilates-hero.c-mobilates-hero--dynamic > .global_hero_media .elementor-widget-container, .c-mobilates-hero.c-mobilates-hero--dynamic > .global_hero_media img, .c-mobilates-hero:has(> .global_hero_media) > .global_hero_media .elementor-widget-container, .c-mobilates-hero:has(> .global_hero_media) > .global_hero_media img { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; } .c-mobilates-hero.c-mobilates-hero--dynamic > .global_hero_media img, .c-mobilates-hero:has(> .global_hero_media) > .global_hero_media img { object-fit: cover !important; object-position: var(--mobilates-hero-image-position) !important; } .c-mobilates-hero.c-mobilates-hero--dynamic > :not(.global_hero_media), .c-mobilates-hero:has(> .global_hero_media) > :not(.global_hero_media) { position: relative !important; z-index: 2 !important; } /* Remove only the legacy inner-wrapper spacing retained around dynamic tags. */ .c-mobilates-hero:has(> .global_hero_media) .elementor-element-783775d3, .c-mobilates-hero:has(> .global_hero_media) .elementor-element-8b176fe4 { width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; gap: clamp(0.75rem, 1.35vw, 1.25rem) !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__content, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 1.25rem !important; /* The 7vw gutters leave the visible title/copy span at about 55% of the hero. */ box-sizing: border-box !important; width: 70% !important; max-width: 70% !important; min-height: inherit !important; padding: clamp(4rem, 7vw, 7.5rem) clamp(1.5rem, 7vw, 8rem) !important; color: #fff !important; text-align: left !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__eyebrow, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__eyebrow { margin: 0 !important; color: #ff9cdc !important; font-size: clamp(0.75rem, 1.2vw, 0.95rem) !important; font-weight: 800 !important; letter-spacing: 0.075em !important; line-height: 1.3 !important; text-transform: uppercase !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__title, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__title { margin: 0 !important; color: #fff !important; font-size: clamp(2.65rem, 5.3vw, 4.9rem) !important; font-weight: 800 !important; line-height: 0.98 !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__title :is(h1, h2, h3, h4, h5, h6), .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__title :is(h1, h2, h3, h4, h5, h6) { margin: 0 !important; color: #fff !important; font: inherit !important; line-height: inherit !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__copy, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__copy { max-width: 100% !important; margin: 0 !important; color: #fff !important; font-size: clamp(1rem, 1.35vw, 1.2rem) !important; line-height: 1.5 !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__actions, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; gap: 1rem !important; margin-top: 0.75rem !important; } /* * Elementor's legacy Button widgets render a wrapper around the real link. * Apply button presentation to the interactive control only; styling the * wrapper as well produces a visible button inside another button. */ .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__cta-primary :is(a, button, .elementor-button), .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__cta-secondary :is(a, button, .elementor-button), .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__cta-primary :is(a, button, .elementor-button), .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__cta-secondary :is(a, button, .elementor-button) { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 3.5rem !important; padding: 0.8rem 1.5rem !important; border-radius: 999px !important; font-weight: 800 !important; line-height: 1.2 !important; text-decoration: none !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__cta-primary :is(a, button, .elementor-button), .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__cta-primary :is(a, button, .elementor-button) { border: 2px solid #272262 !important; background: #272262 !important; color: #fff !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__cta-secondary :is(a, button, .elementor-button), .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__cta-secondary :is(a, button, .elementor-button) { border: 2px solid #fff !important; background: transparent !important; color: #fff !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__cta-primary :is(a, button, .elementor-button):hover, .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__cta-primary :is(a, button, .elementor-button):focus-visible, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__cta-primary :is(a, button, .elementor-button):hover, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__cta-primary :is(a, button, .elementor-button):focus-visible { border-color: #fff !important; background: #fff !important; color: #272262 !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__cta-secondary :is(a, button, .elementor-button):hover, .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__cta-secondary :is(a, button, .elementor-button):focus-visible, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__cta-secondary :is(a, button, .elementor-button):hover, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__cta-secondary :is(a, button, .elementor-button):focus-visible { border-color: #fff !important; background: #fff !important; color: #272262 !important; } /* Classic Elementor containers place their children inside .e-con-inner. */ .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__actions > .e-con-inner, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__actions > .e-con-inner { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; gap: 1rem !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__actions > :not(.e-con-inner), .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__actions > .e-con-inner > *, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__actions > :not(.e-con-inner), .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__actions > .e-con-inner > * { flex: 0 1 auto !important; width: auto !important; } /* * Shared Class archive-card media handle. Kept on the real Elementor Image * widget so the crop and focal point remain editable in the builder. * Full-card-width square (aspect-ratio 1/1) + object-fit:cover — no white * gaps, no max-width cap. (Briefly tried a contain/360px-capped/letterboxed * version on 14/10/2026 — client didn't like the white space, reverted same * day. Source images are the sharp 750x750 Canva tiles, still in place.) */ .c-mobilates-class-card__media, .c-mobilates-class-card__media .elementor-widget-container { overflow: hidden !important; } .c-mobilates-class-card__media img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; object-position: center center !important; } @media (max-width: 1024px) { .c-mobilates-hero.c-mobilates-hero--dynamic, .c-mobilates-hero:has(> .global_hero_media) { --mobilates-hero-image-position: center center; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__content, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__content { width: min(100%, 42rem) !important; max-width: none !important; padding-inline: clamp(1.5rem, 6vw, 4.5rem) !important; } } @media (max-width: 767px) { .c-mobilates-hero.c-mobilates-hero--dynamic, .c-mobilates-hero:has(> .global_hero_media) { --mobilates-hero-image-position: center center; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__content, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__content { width: 100% !important; max-width: none !important; min-height: 36rem !important; padding: 4.5rem 1.5rem 3.5rem !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__title, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__title { font-size: clamp(2.5rem, 12vw, 3.9rem) !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__copy, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__copy { font-size: 1.05rem !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__actions, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__actions { width: 100% !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__actions > .e-con-inner, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__actions > .e-con-inner { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; } .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__actions > :not(.e-con-inner), .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__actions > .e-con-inner > *, .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__actions > :not(.e-con-inner) :is(a, button, .elementor-button), .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__actions > .e-con-inner > * :is(a, button, .elementor-button), .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__actions > :not(.e-con-inner), .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__actions > .e-con-inner > *, .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__actions > :not(.e-con-inner) :is(a, button, .elementor-button), .c-mobilates-hero.c-mobilates-hero--dynamic .c-mobilates-hero__actions > .e-con-inner > * :is(a, button, .elementor-button) { width: 100% !important; } } /* * Mobilates Class Single hero (template 1769) only: reverted back to a * contained tile on the right (14/10/2026, second pass — the full-bleed * blurred photo above this comment looked bad; see CLAUDE.md, Class single * hero section). The hero image widget (dafdebd9) now points at the * built-in `post-featured-image` dynamic tag again, so it shows each * class's current featured image — one of Leanne's sharp 750x750 Canva * class-filter tiles — not the old `mobilates_hero_image` postmeta photo * (that meta/dynamic tag are left in place, just unused by this widget now). * * `right` is a single 5% inset, used at both desktop and tablet, chosen to * match the content area below the hero (element b1000001 in template * 1769, a classic container with `boxed_width`). Its settings say 90% * desktop / 92% tablet, but a live measurement (`getBoundingClientRect()` * at 768–1024px) showed the tablet value is NOT actually applied — the * rendered box stays at 90%/5% inset at every width down to 768px, same as * desktop. Matched to what's actually rendered, not the settings value, so * the tile's right edge lines up exactly with the "Type / Length / Online / * Teacher" box's right edge below it (confirmed 0px difference at * 1280/1560/820px). */ body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) { isolation: isolate; } body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) > .global_hero_media { position: absolute !important; inset: auto !important; top: 50% !important; right: 5% !important; left: auto !important; bottom: auto !important; transform: translateY(-50%) !important; z-index: 2 !important; width: 400px !important; height: 400px !important; margin: 0 !important; overflow: hidden !important; border-radius: 28px !important; box-shadow: 0 24px 56px rgba(39, 34, 98, 0.35) !important; } body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) > .global_hero_media:not(:has(img)) { display: none !important; } body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) > .global_hero_media .elementor-widget-container, body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) > .global_hero_media img { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; } body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) > .global_hero_media img { object-fit: cover !important; object-position: center center !important; } /* * Tablet/mobile responsive pass (14/10/2026): tile shrunk 260->240px on * tablet (still right-aligned to the content box below via the base rule's * `right:5%` — unaffected by width, confirmed via getBoundingClientRect()), * CTA row allowed to wrap so it never overlaps the narrower text column, and * on mobile the tile moved from above the title to below the buttons (via * flexbox `order`, not a DOM/_elementor_data change) at a capped 220px with * clear space above it. See CLAUDE.md, Class single hero section, for the * history this superseded. */ @media (max-width: 1024px) { body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) > .global_hero_media { /* `right`/`top`/`transform` are already inherited unchanged from the * base (desktop) rule above, but re-declared explicitly here too — * belt-and-braces, so this breakpoint's positioning never depends on * cascade/inheritance from a rule outside this media query. */ position: absolute !important; top: 50% !important; right: 5% !important; left: auto !important; bottom: auto !important; transform: translateY(-50%) !important; box-sizing: border-box !important; width: 240px !important; height: 240px !important; box-shadow: 0 16px 36px rgba(39, 34, 98, 0.35) !important; } /* * Shared hero CSS drops .c-mobilates-hero__content to width:100% * (max-width:672px) at this breakpoint — fine for the other hero types, * which have no side image to share the row with, but it runs straight * under the 240px tile here. Capped so the text's own right edge always * clears the tile's left edge by 24px, at every width in this * 768–1024px band (tile left edge = 95% - 240px; text max-width = * 95% - 264px) — confirmed via getBoundingClientRect() at 768/820/1024px. */ /* Buttons may now wrap instead of forcing a single nowrap row that could * overlap/overflow the narrower text column next to the tile. */ body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__actions, body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__actions > .e-con-inner { flex-wrap: wrap !important; } } @media (min-width: 768px) and (max-width: 1024px) { body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__content { max-width: calc(95% - 264px) !important; } /* Text column and tile vertically centred against each other on tablet * (the tile is already centred via top:50%/translateY(-50%) on the base * rule; the content column already has justify-content:center from the * shared hero CSS and its min-height inherits the hero's own, so no * extra rule is needed beyond confirming both reference the same * element — left explicit here as a comment, not a new property). */ } @media (max-width: 767px) { body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) { flex-direction: column !important; align-items: center !important; } /* * Order fix: the tile (`.global_hero_media`) is the first element in * _elementor_data/DOM (widget dafdebd9, before the content column * c6024e70) — reordered visually via flexbox `order` rather than * touching _elementor_data, so eyebrow/title/text/buttons render first * and the tile renders last, below the button row. */ body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) > :not(.global_hero_media) { order: 1 !important; } body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) > .global_hero_media { order: 2 !important; position: static !important; inset: auto !important; transform: none !important; right: auto !important; width: min(220px, calc(100% - 48px)) !important; height: min(220px, calc(100% - 48px)) !important; aspect-ratio: 1 / 1 !important; margin: 32px auto 32px !important; box-shadow: 0 12px 28px rgba(39, 34, 98, 0.3) !important; } /* Keep the hero compact: don't let the shared hero system's fixed * min-height (576px, sized for a full-bleed/overlay hero) pad out this * contained-tile layout — let it hug its actual (now taller, since the * tile stacks below the content) content instead. */ body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media), body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__content { min-height: 0 !important; } /* * The shared hero CSS gives .c-mobilates-hero__content its own 56px * padding-block-end (meant as the hero's own bottom padding when content * was the last/only flex item). Now the tile sits after it, so that * padding would stack with the tile's own 32px margin-top into an 88px * gap instead of the required 32px. Zeroed here so the tile's margin is * the single source of that gap (confirmed via getBoundingClientRect()). */ body.single-mobilates_class .c-mobilates-hero:has(> .global_hero_media) .c-mobilates-hero__content { padding-block-end: 0 !important; } } /* Blog post footer logo (replaces the old pre-rebrand "Badge" image embedded in post_content). */ figure:has(> .mobilates-postfooter-logo) { margin: 0; } .mobilates-postfooter-logo { display: block; width: 180px; height: auto; margin: 48px auto; } @media (max-width: 767px) { .mobilates-postfooter-logo { width: 150px; margin: 40px auto; } } /* Class single "Equipment Needed" list — plain browser