/* MotionTech theme — small enhancements that don't belong in theme.json. Most styling is token-driven via theme.json; keep this lean. */ /* ── Audience toggle (For patients / For professionals) ─────────────────── Both nav menus are server-rendered; visibility is switched by the data-audience attribute on (set synchronously in to avoid a flash, then by assets/js/audience.js on click). Default = patients, which is also the no-JS fallback. */ .mt-audience-toggle { position: relative; display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--wp--preset--color--border-dark, #c2cad4); border-radius: 999px; background: var(--wp--preset--color--white, #fff); } /* Sliding active pill — JS sets its left/width to the active button. */ .mt-audience-toggle__pill { position: absolute; top: 2px; bottom: 2px; left: 0; width: 0; border-radius: 999px; background: var(--wp--preset--color--navy, #0a2c54); z-index: 0; pointer-events: none; } .mt-audience-toggle.is-ready .mt-audience-toggle__pill { transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1), width 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .mt-audience-toggle__btn { position: relative; z-index: 1; appearance: none; border: 0; cursor: pointer; padding: 0.3rem 0.9rem; border-radius: 999px; font-family: var(--wp--preset--font-family--small); font-size: var(--wp--preset--font-size--small, 0.875rem); line-height: 1.3; color: var(--wp--preset--color--navy-mid, #475f7f); background: transparent; transition: color 0.2s ease; } .mt-audience-toggle__btn:hover { color: var(--wp--preset--color--navy-deep, #05162a); } .mt-audience-toggle__btn[aria-pressed="true"] { color: var(--wp--preset--color--white, #fff); } @media (prefers-reduced-motion: reduce) { .mt-audience-toggle.is-ready .mt-audience-toggle__pill { transition: none; } } .mt-audience-toggle__btn:focus-visible { outline: 2px solid var(--wp--preset--color--teal-dark, #118990); outline-offset: 2px; } /* Show only the active audience's nav. The :root prefix raises specificity above WordPress's .is-layout-flex (which would otherwise force both visible). */ :root .mt-nav--professional { display: none; } :root[data-audience="professional"] .mt-nav--professional { display: flex; } :root[data-audience="professional"] .mt-nav--patients { display: none; } /* --------------------------------------------------------------------------- Responsive header (bespoke; replaces the core navigation block). Desktop ≥ --mt-nav-bp: logo + inline nav + CTA. Below: logo + hamburger; nav reveals as a panel (kit-style animation). --------------------------------------------------------------------------- */ .mt-headerbar { position: relative; } /* anchor for the mobile panel */ /* The utility bar sat in a WordPress `constrained` group (theme contentSize) while the main bar below it uses .mt-container at 1160px — so the audience toggle floated inboard of the logo and the country/language pickers inboard of the CTA. Same measure on both puts each pair in one vertical line. */ .mt-utilbar > .wp-block-group { max-width: 1160px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .mt-bar { display: flex; align-items: center; gap: 1rem; padding-top: var(--wp--preset--spacing--30, 1rem); padding-bottom: var(--wp--preset--spacing--30, 1rem); } /* Logo (left). */ .mt-logo { flex: none; display: inline-flex; align-items: center; line-height: 0; } .mt-logo img { height: 44px; width: auto; display: block; } /* Nav occupies the centre; the main CTA sits on the right. */ .mt-primary { flex: 1; display: flex; align-items: center; justify-content: center; gap: 1.25rem; } .mt-bar__cta { flex: none; display: flex; align-items: center; } .mt-nav { display: flex; align-items: center; gap: 1.25rem; } .mt-menu { display: flex; align-items: center; gap: clamp(0.5rem, 1.4vw, 1.4rem); list-style: none; margin: 0; padding: 0; } .mt-menu > li { position: relative; } .mt-menu a, .mt-navlink { font-family: var(--wp--preset--font-family--small); font-size: 0.95rem; color: var(--wp--preset--color--navy, #0a2c54); text-decoration: none; white-space: nowrap; } .mt-menu a:hover, .mt-menu a:focus-visible, .mt-navlink:hover, .mt-navlink:focus-visible { color: var(--wp--preset--color--teal-deep, #094448); } /* Dropdown trigger (disclosure button + caret). */ .mt-navlink { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 0; padding: 0; cursor: pointer; } .mt-navlink::after { content: ""; width: 0.42em; height: 0.42em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform 0.2s ease; } .mt-navlink[aria-expanded="true"]::after { transform: rotate(-135deg); } /* Dropdown panel (desktop popover). .t-dropdown supplies the open/close tween. */ .mt-subnav { position: absolute; top: calc(100% + 0.6rem); left: 50%; width: 14rem; margin-left: -7rem; /* centre under the trigger */ display: flex; flex-direction: column; background: var(--wp--preset--color--white, #fff); border: 1px solid var(--wp--preset--color--border, #d8f4f6); border-radius: 12px; padding: 0.4rem; box-shadow: 0 20px 44px -26px rgba(5, 22, 42, 0.6); z-index: 60; } .mt-subnav a { display: block; padding: 0.55rem 0.7rem; border-radius: 8px; white-space: nowrap; font-size: 0.95rem; color: var(--wp--preset--color--navy, #0a2c54); } .mt-subnav a:hover, .mt-subnav a:focus-visible { background: var(--wp--preset--color--off-white, #f8feff); color: var(--wp--preset--color--teal-deep, #094448); } /* Desktop: open dropdowns on hover / keyboard focus (in addition to the JS click toggle, which still serves mobile + explicit taps). A hover bridge keeps the panel reachable across the small gap to the trigger. */ @media (hover: hover) and (min-width: 961px) { .mt-has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.7rem; /* invisible bridge so the menu doesn't close in the gap */ } .mt-has-sub:hover .mt-subnav, .mt-has-sub:focus-within .mt-subnav { opacity: 1; transform: scale(1); pointer-events: auto; } .mt-has-sub:hover > .mt-navlink::after, .mt-has-sub:focus-within > .mt-navlink::after { transform: rotate(-135deg); } } /* Language switcher (utility bar) — reuses the dropdown; right-aligned. */ .mt-lang { position: relative; } .mt-lang > .mt-navlink { font-size: 0.85rem; } .mt-lang .mt-subnav { left: auto; right: 0; margin-left: 0; width: 15rem; } .mt-lang__menu a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .mt-lang__c { color: var(--wp--preset--color--navy-mid, #475f7f); font-size: 0.82rem; } .mt-lang__menu a[aria-current="true"] { background: var(--wp--preset--color--off-white, #f8feff); font-weight: 700; } /* Country switcher reuses the language dropdown, but as a simple list. */ .mt-region__menu { width: 12rem; max-height: 60vh; overflow-y: auto; } .mt-region__menu a { display: block; } /* CTA pill must never shrink to vertical text. */ .mt-cta-link { white-space: nowrap; flex: none; } /* The in-panel CTA is desktop-hidden; the selector out-specifies .mt-btn. */ .mt-primary .mt-cta--mobile { display: none; } /* shown only inside the mobile panel */ /* Hamburger — hidden on desktop. */ .mt-burger { display: none; } /* ---- Auto-hiding header ---- The header sticks to the top, hides when you scroll down (so long pages read uncluttered) and slides back in when you scroll up. Direction is tracked in nav.js, which toggles the classes below. Its containing block is the full-height .wp-site-blocks, so it holds across the whole page. */ header.wp-block-template-part { position: sticky; top: 0; z-index: 60; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } header.wp-block-template-part.mt-head--hidden { transform: translateY(-100%); } header.wp-block-template-part.mt-head--pinned { box-shadow: 0 1px 0 var(--wp--preset--color--border, #d8f4f6), 0 10px 24px -18px rgba(5, 22, 42, 0.4); } @media (prefers-reduced-motion: reduce) { header.wp-block-template-part { transition: none; } } /* Anchored jumps (e.g. /use-cases/#transfemoral) clear the pinned header. */ html { scroll-padding-top: 5.5rem; } /* ---- Mobile / narrow ---- */ @media (max-width: 960px) { /* Touch-friendly tap areas: the utility-bar controls and inline email/phone links measured 19–23px tall — well under the ~44px touch guideline. Pad the hit area, not the font. */ .mt-lang > button.mt-navlink { padding-top: 0.55rem; padding-bottom: 0.55rem; } .wp-block-loginout a { display: inline-block; padding: 0.55rem 0.15rem; } main a[href^="mailto:"], main a[href^="tel:"] { display: inline-block; padding: 0.35rem 0; } .mt-burger { display: inline-flex; align-items: center; justify-content: center; /* Pushed to the far right of the bar, opposite the logo. */ margin-left: auto; width: 2.75rem; /* keeps a 44px tap target … */ height: 2.75rem; padding: 0; border: 0; border-radius: 10px; background: transparent; /* … but no visible box around it */ cursor: pointer; color: var(--wp--preset--color--navy, #0a2c54); -webkit-tap-highlight-color: transparent; } /* No resting or hover box; only a keyboard-focus ring (never shows on touch). */ .mt-burger:focus-visible { outline: 2px solid var(--wp--preset--color--teal, #17b6c9); outline-offset: 2px; } .mt-burger__box { position: relative; width: 24px; height: 15px; } .mt-burger__line, .mt-burger__line::before, .mt-burger__line::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .mt-burger__line { top: 50%; transform: translateY(-50%); } .mt-burger__line::before { top: -6.5px; } .mt-burger__line::after { top: 6.5px; } .mt-burger[aria-expanded="true"] .mt-burger__line { background: transparent; } .mt-burger[aria-expanded="true"] .mt-burger__line::before { top: 0; transform: rotate(45deg); } .mt-burger[aria-expanded="true"] .mt-burger__line::after { top: 0; transform: rotate(-45deg); } /* Nav becomes a revealed panel under the bar. */ .mt-primary { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--wp--preset--color--white, #fff); border-bottom: 1px solid var(--wp--preset--color--border, #d8f4f6); box-shadow: 0 24px 40px -28px rgba(5, 22, 42, 0.5); padding: 0.5rem clamp(1rem, 4vw, 2rem) 1.5rem; /* closed state (kit-style: slide + fade + blur) */ transform: translateY(-8px); opacity: 0; filter: blur(2px); pointer-events: none; transition: transform 0.3s var(--panel-ease, cubic-bezier(0.22,1,0.36,1)), opacity 0.3s var(--panel-ease, cubic-bezier(0.22,1,0.36,1)), filter 0.3s var(--panel-ease, cubic-bezier(0.22,1,0.36,1)); z-index: 50; /* Short viewports: the panel must scroll internally rather than run off-screen (open accordions easily exceed 640px-tall phones). */ max-height: calc(100dvh - 100%); overflow-y: auto; } .mt-primary.is-open { transform: translateY(0); opacity: 1; filter: blur(0); pointer-events: auto; } .mt-nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .mt-menu { flex-direction: column; align-items: stretch; gap: 0; } .mt-menu > li { border-bottom: 1px solid var(--wp--preset--color--border, #d8f4f6); } .mt-menu a { display: block; padding: 0.9rem 0.25rem; font-size: 1.05rem; } /* Desktop right-hand CTA hides; the in-panel CTA shows instead. */ .mt-bar__cta { display: none; } .mt-primary .mt-cta--mobile { display: block; margin: 1rem 0 0.25rem; text-align: center; } /* Dropdowns become inline accordions inside the panel. Scoped to .mt-primary: the utility bar's country/language switchers share these classes and must keep their compact popover styling on phones. */ .mt-primary .mt-navlink { width: 100%; justify-content: space-between; padding: 0.9rem 0.25rem; font-size: 1.05rem; } .mt-primary .mt-subnav { position: static; width: auto; margin: 0; padding: 0 0 0.5rem 0.9rem; border: 0; border-radius: 0; box-shadow: none; transform: none; opacity: 1; filter: none; pointer-events: auto; display: none; } .mt-primary .mt-subnav.is-open { display: flex; } .mt-primary .mt-subnav a { font-size: 1rem; padding: 0.6rem 0.25rem; } /* Primary IA control: keep a ≥44px touch target on phones. */ .mt-audience-toggle__btn { min-height: 44px; } @media (prefers-reduced-motion: reduce) { .mt-primary { transition: none; } } } /* Design category filter (dynamic block: motiontech/design-filter) */ .mt-design-filter__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; } .mt-design-filter__link { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--wp--preset--color--border-dark, #c2cad4); border-radius: 999px; font-family: var(--wp--preset--font-family--small); font-size: var(--wp--preset--font-size--small, 0.875rem); line-height: 1.2; text-decoration: none; color: var(--wp--preset--color--navy, #0a2c54); background: var(--wp--preset--color--white, #fff); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .mt-design-filter__link:hover, .mt-design-filter__link:focus-visible { border-color: var(--wp--preset--color--teal-deep, #094448); color: var(--wp--preset--color--teal-deep, #094448); } .mt-design-filter__link.is-active { background: var(--wp--preset--color--navy, #0a2c54); border-color: var(--wp--preset--color--navy, #0a2c54); color: var(--wp--preset--color--white, #fff); } /* Design grid: keep featured images tidy even when source aspect ratios vary. (Repeating textures may crop; see .mt-product-grid below for product shots.) */ .mt-design-grid .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Featured-designs section (homepage) is an alignfull constrained group with no .mt-container, so it hugged the edges on mobile like the footer did. */ .mt-fdesigns { padding-inline: clamp(1rem, 4vw, 2rem); } .mt-fdesigns > * { max-width: 1160px; margin-inline: auto; } /* Frame each design tile so it reads as a defined card, not a full-bleed image — a hairline border + matching rounded corners on the image link. */ .mt-design-grid .wp-block-post-featured-image { border: 1px solid var(--wp--preset--color--border, #d8f4f6); border-radius: 12px; overflow: hidden; background: var(--wp--preset--color--off-white, #f4fafb); } /* Products archive reuses the grid, but its images are product shots — contain them (tinted backdrop) so the product is never cropped. !important: the featured-image block prints an inline object-fit:cover. */ .mt-product-grid .wp-block-post-featured-image img { object-fit: contain !important; padding: 5%; box-sizing: border-box; background: linear-gradient(135deg, var(--wp--preset--color--teal-tint, #eefdff), var(--wp--preset--color--off-white, #f4fafb)); } /* Product page hero — bold full-width band so the page opens with presence (matches the Wix product heroes). */ .mt-product-hero { padding: clamp(2.5rem, 4.5vw, 4.25rem) 1.25rem clamp(2.25rem, 4vw, 3.5rem) !important; background: radial-gradient(70% 90% at 78% 8%, rgba(60, 196, 214, 0.22), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(18, 137, 144, 0.18), transparent 60%); text-align: center; } /* Page width, matching every other band. The hero was capped at 60rem while the sections below it run to 1160px, so the headline and its excerpt sat in a narrower column than the content they introduce. */ .mt-product-hero .mt-container { max-width: 1160px; margin: 0 auto; } .mt-product-hero .mt-kicker { margin: 0 0 0.6rem; } .mt-product-hero .wp-block-post-title { margin: 0; font-family: var(--wp--preset--font-family--head, inherit); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(2.6rem, 6vw, 5rem); color: #fff; } .mt-product-hero .wp-block-post-excerpt { margin: 1rem auto 0; max-width: 72ch; font-size: clamp(1.05rem, 2.2vw, 1.4rem); color: rgba(255, 255, 255, 0.82); } .mt-product-hero .wp-block-post-excerpt__excerpt { margin: 0; } .mt-product-hero .mt-order { margin-top: 1.8rem; } /* Centered product shot under the hero (only renders when a photo exists). */ .mt-product-shot { padding: 0 1.25rem; margin-top: clamp(-3rem, -4vw, -2rem); } .mt-product-shot .wp-block-post-featured-image { margin: 0 auto; max-width: 560px; } /* The sleeve is a tall portrait cut-out, not a wide product photo, so the shared 560px measure made it tower over the hero it sits under. 40% down. */ .mt-product-your-sleeve .mt-product-shot .wp-block-post-featured-image { max-width: 336px; } .mt-product-shot .wp-block-post-featured-image img { width: 100%; height: auto; display: block; border-radius: 18px; box-shadow: 0 40px 70px -32px rgba(5, 22, 42, 0.55); } /* Cut-outs get no card. The rounded corner and the drop shadow are drawn on the element BOX, not the silhouette, so on a transparent PNG they trace a white rectangle around a floating object instead of framing a photograph. The sleeve is a cut-out, so it sits straight on the band with a shadow that follows its own shape. */ .mt-product-your-sleeve .mt-product-shot .wp-block-post-featured-image img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 26px 34px rgba(5, 22, 42, 0.22)); } /* Related designs strip — "More in this collection" on single design pages. */ .mt-related { padding: clamp(2.5rem, 5vw, 4.5rem) 0 0; } .mt-related__title { font-family: var(--wp--preset--font-family--head, inherit); font-weight: 800; letter-spacing: -0.01em; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 1.4rem; } .mt-related__grid { display: grid; gap: clamp(0.8rem, 2vw, 1.4rem); grid-template-columns: repeat(4, 1fr); } @media (max-width: 720px) { .mt-related__grid { grid-template-columns: repeat(2, 1fr); } } .mt-related__card { display: block; text-decoration: none; color: inherit; } .mt-related__card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 12px; background: var(--wp--preset--color--off-white, #f4f5f7); transition: transform .35s ease, box-shadow .35s ease; } .mt-related__card:hover img { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(5, 22, 42, 0.5); } .mt-related__name { display: block; margin-top: 0.6rem; font-size: 0.95rem; font-weight: 600; } /* Privacy-first map: self-hosted facade until the visitor clicks to load. */ .mt-map { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--wp--preset--color--navy-deep, #0b2440); } .mt-map iframe { display: block; width: 100%; height: 100%; border: 0; } .mt-map__facade { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; text-align: center; padding: 1.5rem; color: #fff; background: radial-gradient(60% 80% at 50% 18%, rgba(60, 196, 214, 0.22), transparent 60%), linear-gradient(180deg, #0b2440, #07182c); } .mt-map__pin { font-size: 2.2rem; line-height: 1; } .mt-map__title { margin: 0; font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.5rem); } .mt-map__note { margin: 0; max-width: 44ch; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); } .mt-map__load { margin-top: 0.4rem; cursor: pointer; } .mt-map__noscript { margin-top: 0.4rem; color: #fff; text-decoration: underline; } /* About values line + contact rep links. */ .mt-values { text-align: center; font-weight: 700; letter-spacing: -0.01em; font-size: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--wp--preset--color--teal-deep, #094448); } .mt-rep__lines { margin-top: 0.5rem; font-size: 0.92rem; line-height: 1.7; } .mt-rep__lines a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Blog (Knowledge → Blog): card grid + article meta. */ .mt-postgrid { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); grid-template-columns: repeat(3, 1fr); } @media (max-width: 880px) { .mt-postgrid { grid-template-columns: 1fr; } } .mt-postcard { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem 1.6rem; text-decoration: none; color: inherit; border: 1px solid var(--wp--preset--color--border, #d8f4f6); border-radius: 16px; background: var(--wp--preset--color--off-white, #f8feff); transition: transform .3s ease, box-shadow .3s ease; } .mt-postcard:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(5, 22, 42, 0.5); } .mt-postcard__meta { font-size: 0.8rem; letter-spacing: 0.02em; color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-postcard__title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.25; } .mt-postcard__excerpt { margin: 0; font-size: 0.95rem; color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-postcard__more { margin-top: auto; font-weight: 700; color: var(--wp--preset--color--teal-deep, #094448); } .mt-postmeta { margin: 0.6rem 0 0; font-size: 0.95rem; color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-article .wp-block-post-featured-image { margin: 0 0 2rem; } .mt-article .wp-block-post-featured-image img { width: 100%; height: auto; border-radius: 14px; } /* Product media panel — branded placeholder so a missing photo still reads as an intentional panel (products have no photography yet). */ .mt-product-media { min-height: 280px; overflow: hidden; } .mt-product-media .wp-block-post-featured-image { margin: 0; height: 100%; } .mt-product-media .wp-block-post-featured-image img { width: 100%; height: 100%; /* contain, not cover: these are product shots — never crop the product. */ object-fit: contain; padding: 6%; box-sizing: border-box; display: block; } /* Prices are NOT shown on the public site (decision §8a) — no price styles. Pricing lives in the order platform. Below: the portal CTA + sign-in note. */ /* Order / portal CTA (Rule 3). */ .mt-order { margin: 1rem 0 0.5rem; } .mt-order-note { margin: 1rem 0 0.5rem; padding: 0.75rem 1rem; border: 1px dashed var(--wp--preset--color--border-dark, #c2cad4); border-radius: 10px; background: var(--wp--preset--color--off-white, #f8feff); font-size: var(--wp--preset--font-size--small, 0.875rem); color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-order__button { display: inline-block; background: var(--wp--preset--color--teal, #1acdd8); color: var(--wp--preset--color--navy-deep, #05162a); font-family: var(--wp--preset--font-family--small); font-weight: 700; padding: 0.7rem 1.4rem; border-radius: 10px; text-decoration: none; } .mt-order__button:hover, .mt-order__button:focus-visible { background: var(--wp--preset--color--teal-deep, #094448); color: var(--wp--preset--color--white, #fff); } /* ============================================================ SITE REDESIGN — sleek, editorial, tasteful motion. Layered on theme.json tokens. 2026. ============================================================ */ :root { /* Tightened from clamp(2.25rem, 4.2vw, 3.75rem): stacked bands read as drifting apart on long pages (designs grid into the CTA, the three-range trio, the silicone-liner claim). One variable drives every .mt-section. */ --mt-section-y: clamp(1.6rem, 3vw, 2.6rem); --mt-display: clamp(2.75rem, 6.5vw, 5.5rem); --mt-measure: 44rem; } .mt-section { padding-top: var(--mt-section-y); padding-bottom: var(--mt-section-y); } /* A constrained .mt-section that carries its own .mt-container gets its gutter from that container; one WITHOUT a container (archive grids, use-case lists, etc.) had none on mobile — the theme opts into root-padding-aware alignments but sets no root padding. Give those the standard site gutter. :has() scopes it so the two never stack. */ .mt-section:not(:has(.mt-container)) { padding-inline: clamp(1rem, 4vw, 2rem); } .mt-container { max-width: 1160px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .mt-kicker { display: inline-block; text-transform: uppercase; letter-spacing: 0.18em; font-family: var(--wp--preset--font-family--small); font-size: 0.8rem; font-weight: 700; color: var(--wp--preset--color--teal-deep, #094448); margin: 0 0 1rem; } /* Kickers are shrink-to-fit (inline-block), so an authored text-align:center has no effect unless the kicker spans the full row. */ .mt-kicker[style*="text-align:center"] { display: block; } .mt-on-dark .mt-kicker, .mt-hero .mt-kicker { color: var(--wp--preset--color--teal, #1acdd8); } .mt-display { font-family: var(--wp--preset--font-family--head); font-weight: 800; font-size: var(--mt-display); line-height: 1.04; letter-spacing: -0.02em; margin: 0; } .mt-lead { max-width: var(--mt-measure); font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.45; margin: 1.25rem 0 0; } .mt-h2 { font-family: var(--wp--preset--font-family--head); font-weight: 800; font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0; } /* Light text on dark sections. NB: theme.json sets heading color directly, so these must out-specify it — target the heading classes explicitly. */ .mt-on-dark, .mt-on-dark .mt-h2, .mt-on-dark .mt-display, .mt-hero .mt-display, .mt-hero .mt-h2 { color: var(--wp--preset--color--off-white, #f8feff); } .mt-prose { max-width: var(--mt-measure); } /* ---- Generic page header + prose body (page.html) ---- */ .mt-page-head { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); padding-bottom: clamp(1.75rem, 3.2vw, 2.75rem); padding-inline: clamp(1rem, 4vw, 2rem); border-bottom: 1px solid var(--wp--preset--color--border, #d8f4f6); } .mt-page-head .wp-block-post-title, .mt-page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.022em; margin: 0; overflow-wrap: break-word; hyphens: auto; } .mt-page-head p { overflow-wrap: break-word; } .mt-page-body { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: var(--mt-section-y); } .mt-page-body p, .mt-page-body li { line-height: 1.72; font-size: clamp(1.02rem, 1rem + 0.25vw, 1.18rem); } .mt-page-body :where(h2, h3) { margin-top: 1.9em; line-height: 1.2; letter-spacing: -0.01em; } .mt-page-body :where(h2) { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); } .mt-page-body > * + * { margin-top: 1.15em; } .mt-page-figure { margin: 1.5rem 0; } .mt-page-figure img { width: 100%; height: auto; display: block; border-radius: 14px; } /* ---- Regional contacts ---- */ .mt-reps { display: grid; gap: 1rem; margin-top: 1.5rem; } .mt-rep { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.25rem 1.4rem; border: 1px solid var(--wp--preset--color--border, #d8f4f6); border-radius: 14px; background: var(--wp--preset--color--off-white, #f8feff); } .mt-rep__avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--wp--preset--color--navy, #0a2c54); color: var(--wp--preset--color--white, #fff); font-family: var(--wp--preset--font-family--head); font-weight: 800; font-size: 1.4rem; } .mt-rep__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .mt-rep__info h3 { margin: 0 0 0.2rem; } .mt-rep__info p:last-child { margin: 0; color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-rep__regions { margin: 0 0 0.5rem; font-family: var(--wp--preset--font-family--small); font-size: 0.9rem; color: var(--wp--preset--color--teal-deep, #094448); } .mt-page-body ul, .mt-page-body ol { padding-left: 1.2rem; } .mt-page-body li { margin: 0.35rem 0; } /* ---- Footer ---- */ /* The footer is a WP constrained group (no .mt-container), and the theme opts into root-padding-aware alignments without ever setting a root padding — so its content hugged both edges on narrow screens. Give it the same gutter the rest of the site uses. */ .mt-footer { padding-inline: clamp(1rem, 4vw, 2rem); } .mt-footer > .wp-block-columns, .mt-footer > .wp-block-group { max-width: 1160px; margin-inline: auto; } .mt-footer p { overflow-wrap: break-word; } /* ---- Footer logo + social ---- */ .mt-foot-logo { display: inline-block; line-height: 0; } .mt-foot-logo img { height: 40px; width: auto; display: block; } .mt-social { display: flex; gap: 0.6rem; margin-top: 1.25rem; } .mt-social a { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); color: var(--wp--preset--color--off-white, #f8feff); transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .mt-social a:hover, .mt-social a:focus-visible { background: var(--wp--preset--color--teal, #1acdd8); color: var(--wp--preset--color--navy-deep, #05162a); border-color: var(--wp--preset--color--teal, #1acdd8); } /* ---- Hero ---- */ .mt-hero { position: relative; overflow: clip; display: flex; align-items: center; min-height: clamp(540px, 86vh, 900px); background: var(--wp--preset--color--navy-deep, #05162a); color: var(--wp--preset--color--off-white, #f8feff); } /* Real photo layer + navy gradient for text contrast. Slow scroll-scale (Ken Burns) for a juicy entrance; reduced-motion gets a static image. */ .mt-hero__bg { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(115deg, rgba(5, 22, 42, 0.94) 0%, rgba(5, 22, 42, 0.7) 45%, rgba(9, 68, 72, 0.45) 100%), url("../img/hero.jpg"); background-size: cover; background-position: center; transform-origin: center; } .mt-hero__inner { position: relative; z-index: 1; padding-top: clamp(4rem, 10vw, 8.5rem); padding-bottom: clamp(4rem, 10vw, 8.5rem); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .mt-hero__product { display: flex; justify-content: center; } .mt-hero__product img { width: 100%; max-width: 540px; height: auto; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.5)); animation: mt-hero-float 7s ease-in-out infinite; } @keyframes mt-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @media (prefers-reduced-motion: reduce) { .mt-hero__product img { animation: none; } } /* "Unique user needs" banner leading the features section. */ .mt-banner-unique { margin: 0 auto clamp(1.5rem, 3.5vw, 2.75rem); max-width: 780px; text-align: center; } .mt-banner-unique img { width: 100%; height: auto; display: block; } /* hero 3D model (spins) */ .mt-hero__model { width: 100%; height: clamp(420px, 62vh, 720px); background: transparent; --poster-color: transparent; filter: drop-shadow(0 44px 60px rgba(0, 0, 0, 0.55)); } @media (max-width: 860px) { .mt-hero__inner { grid-template-columns: 1fr; } .mt-hero__product { display: none; } /* keep the hero text-first on phones */ } /* ---- Premium design gallery (archive-design) ---- */ .mt-gallery .wp-block-post-template { gap: clamp(0.5rem, 1vw, 0.9rem); margin: 0; padding: 0; list-style: none; } .mt-gallery .wp-block-post-template > li { position: relative; overflow: hidden; border-radius: 12px; background: var(--wp--preset--color--teal-tint, #eefdff); } .mt-gallery .wp-block-post-featured-image { margin: 0; } .mt-gallery .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) { .mt-gallery > .wp-block-query li:hover .wp-block-post-featured-image img { transform: scale(1.07); } } .mt-gallery .wp-block-post-title { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.4rem 0.7rem 0.6rem; color: #fff; font-size: 0.82rem; line-height: 1.25; background: linear-gradient(transparent, rgba(5, 22, 42, 0.78)); opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; } .mt-gallery .wp-block-post-title a { color: #fff; text-decoration: none; } @media (hover: hover) { .mt-gallery li:hover .wp-block-post-title { opacity: 1; transform: none; } } @media (hover: none) { .mt-gallery .wp-block-post-title { opacity: 1; } } /* ---- Detail refinement ---- */ .mt-band { margin: 0; width: 100%; } .mt-band img { display: block; width: 100%; height: clamp(320px, 52vh, 620px); object-fit: cover; object-position: center 40%; } /* Wide team banner (About). */ .mt-band--wide img { height: clamp(190px, 25vw, 360px); object-position: center 38%; } /* Image caption + photo credit. */ .mt-band .mt-caption { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: 1160px; margin: 0.65rem auto 0; padding-inline: clamp(1rem, 4vw, 2rem); font-size: 0.85rem; color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-band .mt-credit { opacity: 0.75; } /* Values as pill row (About). */ .mt-valuegrid { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; } .mt-valuegrid li { font-family: var(--wp--preset--font-family--head, inherit); font-weight: 800; letter-spacing: -0.01em; font-size: clamp(1rem, 1.6vw, 1.35rem); padding: 0.55rem 1.3rem; border-radius: 999px; background: var(--wp--preset--color--off-white, #f4f7f9); color: var(--wp--preset--color--teal-deep, #094448); border: 1px solid var(--wp--preset--color--border, #d8f4f6); } /* Partner / investor logo strip (About). */ .mt-partners { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2.5vw, 2.2rem); align-items: center; margin-top: 2rem; } @media (max-width: 760px) { .mt-partners { grid-template-columns: repeat(3, 1fr); } } .mt-partners img { width: 100%; max-height: 56px; object-fit: contain; filter: grayscale(1); opacity: 0.72; transition: filter .3s ease, opacity .3s ease; } .mt-partners img:hover { filter: none; opacity: 1; } /* Left-align rich feature descriptions (About 'at a glance'). */ .mt-features--rich .mt-feature { text-align: left; } /* ============================================================ About page — faithful to the live OG layout (white, left-aligned sections, centred hero heading, icon row, 3-col founders). ============================================================ */ .mt-ab { background: #fff; } /* Even vertical rhythm: one consistent gap above every section (no doubled top+bottom padding), plus a bottom on the final section before the footer. */ .mt-ab__sec { max-width: 1080px; margin-inline: auto; padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1rem, 4vw, 2rem) 0; } .mt-ab__sec:last-child { padding-bottom: clamp(3rem, 6vw, 4.5rem); } .mt-ab__h { font-family: var(--wp--preset--font-family--head); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--wp--preset--color--navy-deep, #0a2c54); margin: 0 0 1.3rem; font-size: clamp(1.6rem, 3vw, 2.4rem); } .mt-ab__sub { font-weight: 700; color: var(--wp--preset--color--navy-mid, #475f7f); margin: -0.6rem 0 1.3rem; font-size: 1.05rem; } /* Intro: centred heading, left-aligned narrow column. */ .mt-ab__herohead { text-align: center; font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0 auto 1.6rem; max-width: 16ch; } .mt-ab__intro { max-width: 680px; margin: 0 auto; } .mt-ab__intro p { text-align: left; color: var(--wp--preset--color--navy-mid, #475f7f); line-height: 1.65; margin: 0 0 1rem; } .mt-ab__mission { font-weight: 800; color: var(--wp--preset--color--navy-deep, #0a2c54); } /* At a glance — icon row. */ .mt-glance { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 1.8rem); margin-top: 1.5rem; } .mt-glance__item { text-align: center; } .mt-glance__item img { height: 64px; width: auto; max-width: 110px; object-fit: contain; display: block; margin: 0 auto 0.9rem; } .mt-glance__item span { display: block; font-weight: 800; color: var(--wp--preset--color--navy-deep, #0a2c54); line-height: 1.2; } @media (max-width: 760px) { .mt-glance { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } } /* Origin — text + photo. */ .mt-origin { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; } .mt-origin__text p { text-align: left; color: var(--wp--preset--color--navy-mid, #475f7f); line-height: 1.65; margin: 0 0 1rem; } .mt-origin figure { margin: 0; } .mt-origin figure img { width: 100%; height: auto; border-radius: 10px; display: block; } .mt-origin figcaption { margin-top: 0.5rem; font-size: 0.8rem; color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-origin .mt-credit { display: block; opacity: 0.7; } @media (max-width: 760px) { .mt-origin { grid-template-columns: 1fr; } } /* Founders — 3-col, big circular photo + first name + bio. */ .mt-founders { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); margin-top: 1.4rem; } .mt-founder { text-align: center; } .mt-founder__photo { display: block; width: 170px; margin: 0 auto 1rem; border-radius: 50%; } .mt-founder__photo img { width: 170px; height: 170px; border-radius: 50%; object-fit: cover; display: block; transition: transform .3s ease, box-shadow .3s ease; } .mt-founder__photo:hover img { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(5, 22, 42, 0.55); } .mt-partners2 a { display: flex; align-items: center; justify-content: center; } .mt-founder h3 { margin: 0 0 0.8rem; color: var(--wp--preset--color--navy-deep, #0a2c54); font-size: 1.2rem; } .mt-founder p { text-align: left; font-size: 0.9rem; line-height: 1.6; color: var(--wp--preset--color--navy-mid, #475f7f); margin: 0; } @media (max-width: 760px) { .mt-founders { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } } /* Values — spread bold words. */ .mt-values2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; margin-top: 1.4rem; } .mt-values2 span { font-family: var(--wp--preset--font-family--head); font-weight: 800; letter-spacing: -0.01em; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--wp--preset--color--navy-deep, #0a2c54); } /* Partners — 5-per-row greyscale. */ .mt-partners2 { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; margin-top: 1.4rem; } .mt-partners2 img { width: 100%; max-height: 52px; object-fit: contain; filter: grayscale(1); opacity: 0.65; transition: filter .3s ease, opacity .3s ease; } .mt-partners2 img:hover { filter: none; opacity: 1; } @media (max-width: 760px) { .mt-partners2 { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ Contact page — 'Your contacts' cards + get-in-touch form (OG-faithful). ============================================================ */ .mt-cteam { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem); margin-top: 1.6rem; } @media (max-width: 520px) { .mt-cteam { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } } .mt-cmember { text-align: center; } .mt-cmember img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 1rem; } .mt-cmember h2 { margin: 0 0 0.2rem; color: var(--wp--preset--color--navy-deep, #0a2c54); font-size: 1.25rem; } .mt-cmember__region { font-weight: 700; color: var(--wp--preset--color--navy-deep, #0a2c54); margin: 0 0 0.9rem; } .mt-cmember__bio { text-align: left; font-size: 0.9rem; line-height: 1.6; color: var(--wp--preset--color--navy-mid, #475f7f); margin: 0 0 0.8rem; } .mt-cmember__lander { text-align: left; font-size: 0.78rem; font-style: italic; line-height: 1.5; color: var(--wp--preset--color--navy-mid, #475f7f); margin: 0 0 1rem; } .mt-cmember__lines { text-align: left; font-size: 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; } .mt-cmember__lines a { color: var(--wp--preset--color--navy-deep, #0a2c54); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; } .mt-cmember__lines a:hover { text-decoration: underline; } .mt-cmember__lines svg { width: 16px; height: 16px; flex: none; color: var(--wp--preset--color--teal-deep, #094448); } /* Initials avatar (when a contact has no photo). */ .mt-cmember__ph { width: 150px; height: 150px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; background: var(--wp--preset--color--navy-deep, #0a2c54); color: #fff; font-family: var(--wp--preset--font-family--head, inherit); font-weight: 800; font-size: 2.6rem; } /* Language-specific content: shown only when the site is in that language. (German Bundesland breakdowns appear only on the German site.) */ .mt-de-only { display: none; } body.mt-lang-de .mt-de-only { display: revert; } /* Get-in-touch form. */ .mt-cform__intro { text-align: center; font-weight: 800; color: var(--wp--preset--color--navy-deep, #0a2c54); font-size: clamp(1.1rem, 2vw, 1.4rem); margin: 0 0 1.6rem; } .mt-cform { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; max-width: 760px; margin: 0 auto; } @media (max-width: 600px) { .mt-cform { grid-template-columns: 1fr; } } /* Honeypot: off-screen, never display:none (bots skip those). */ .mt-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* Cookie notice — minimal, privacy-first, bottom-fixed. */ .mt-cookie { position: fixed; z-index: 200; left: 1rem; right: 1rem; bottom: 1rem; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; background: var(--wp--preset--color--navy-deep, #05162a); color: #fff; border: 1px solid var(--wp--preset--color--teal-deep, #094448); border-radius: 14px; padding: 1rem 1.25rem; box-shadow: 0 24px 60px -28px rgba(5, 22, 42, 0.7); } .mt-cookie[hidden] { display: none; } .mt-cookie__text { margin: 0; flex: 1 1 16rem; font-size: var(--wp--preset--font-size--small, 0.875rem); line-height: 1.5; } .mt-cookie__text a { color: var(--wp--preset--color--teal-light, #abeef2); font-weight: 600; } .mt-cookie__ok { flex: 0 0 auto; cursor: pointer; border: 0; } @media (max-width: 540px) { .mt-cookie__ok { width: 100%; } } .mt-cform__notice { max-width: 760px; margin: 0 auto 1.4rem; padding: 0.8rem 1rem; border-radius: 10px; font-weight: 600; text-align: center; } .mt-cform__notice--ok { background: var(--wp--preset--color--teal-tint, #eefdff); color: var(--wp--preset--color--teal-deep, #094448); border: 1px solid var(--wp--preset--color--teal-light, #abeef2); } .mt-cform__notice--err { background: #fdecec; color: #8a1f1f; border: 1px solid #f5c2c2; } .mt-field { display: flex; flex-direction: column; gap: 0.35rem; } .mt-field--full { grid-column: 1 / -1; } .mt-field label { /* was 0.72rem — raised for legibility */ font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-field input, .mt-field textarea { border: 1px solid var(--wp--preset--color--border, #cfe8ea); border-radius: 8px; padding: 0.7rem 0.8rem; font: inherit; background: #fff; color: var(--wp--preset--color--navy-deep, #0a2c54); } .mt-field textarea { min-height: 150px; resize: vertical; } .mt-field input:focus, .mt-field textarea:focus { outline: 2px solid var(--wp--preset--color--teal, #1acdd8); border-color: transparent; } .mt-cform__submit { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .mt-cform__submit button { cursor: pointer; border: 0; } .mt-cform__email a { font-weight: 800; color: var(--wp--preset--color--navy-deep, #0a2c54); text-decoration: none; } .mt-caddr { text-align: center; font-weight: 700; color: var(--wp--preset--color--navy-deep, #0a2c54); line-height: 1.7; } /* Clean lining numerals for phone/email/address (Raleway figures looked off). */ .mt-cmember__lines, .mt-cmember__lines a, .mt-caddr { font-family: var(--wp--preset--font-family--small, "Open Sans", sans-serif); font-variant-numeric: lining-nums tabular-nums; } /* Get-in-touch: form on a rounded teal panel. */ .mt-getintouch { background: #e8f9fb; border: 1px solid #c8edf1; border-radius: 24px; padding: clamp(1.6rem, 4vw, 3rem); max-width: 900px; margin: clamp(1.25rem, 3vw, 2rem) auto clamp(0.75rem, 2vw, 1.25rem); } /* Tighter section spacing (Submit → Our address → map). */ .mt-ab__sec--tight { padding-top: clamp(0.75rem, 1.5vw, 1.25rem); padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem); } /* General design rule: round corners on common elements site-wide. */ .wp-block-button__link { border-radius: 12px; } .mt-field input, .mt-field textarea { border-radius: 12px; } .wp-block-image img, .wp-block-post-featured-image img, .mt-origin figure img { border-radius: 14px; } .mt-product-media { border: 1px solid var(--wp--preset--color--border, #d8f4f6); overflow: clip; } /* The H-Waves feature diagram is artwork on its own white ground, so the rounded corners and drop shadow drew a second, competing card edge around it. Artwork sits flat on the band. */ .mt-page-figure img { box-shadow: none; border-radius: 0; } .mt-hero .mt-lead { color: var(--wp--preset--color--teal-light, #abeef2); } .mt-hero::after { content: ""; position: absolute; right: -12%; bottom: -45%; width: 65vw; height: 65vw; background: radial-gradient(closest-side, rgba(26, 205, 216, 0.20), transparent 70%); pointer-events: none; } .mt-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } /* Very narrow phones (320px SE) + long German compounds: let button labels hyphenate instead of pushing past the viewport, and ease the padding. */ @media (max-width: 360px) { .mt-btn { padding-inline: 1rem; overflow-wrap: break-word; hyphens: auto; } } /* ---- Stats band ---- */ .mt-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; } .mt-stat__num { font-family: var(--wp--preset--font-family--head); font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--wp--preset--color--navy, #0a2c54); } .mt-on-dark .mt-stat__num { color: var(--wp--preset--color--white, #fff); } .mt-stat__label { font-family: var(--wp--preset--font-family--small); font-size: 0.9rem; color: var(--wp--preset--color--navy-mid, #475f7f); margin-top: 0.4rem; } .mt-on-dark .mt-stat__label { color: var(--wp--preset--color--teal-light, #abeef2); } .mt-stat__icon { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto 0.75rem; } /* ---- Story (image + text) ---- */ .mt-story { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } /* "Ordering made easy" — two order-platform cards. */ .mt-ordering { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); max-width: 920px; margin: clamp(2rem, 4vw, 3rem) auto 0; } .mt-ordercard { display: flex; flex-direction: column; gap: 0.6rem; text-align: left; background: var(--wp--preset--color--white, #fff); border: 1px solid var(--wp--preset--color--border, #d8f4f6); border-radius: 16px; padding: clamp(1.4rem, 2.5vw, 2rem); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .mt-ordercard:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--teal, #15b3bd); box-shadow: 0 18px 40px -28px rgba(5, 22, 42, 0.35); } .mt-ordercard h3 { margin: 0; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); color: var(--wp--preset--color--navy, #0a2c54); } .mt-ordercard p { margin: 0; flex: 1; color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-ordercard .mt-btn { align-self: center; margin-top: 0.6rem; } .mt-ordering__note { max-width: 920px; margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0; text-align: center; color: var(--wp--preset--color--navy-mid, #475f7f); font-size: var(--wp--preset--font-size--small, 0.875rem); } .mt-ordering__note strong { color: var(--wp--preset--color--navy, #0a2c54); } .mt-ordering__note a { color: var(--wp--preset--color--teal-deep, #094448); font-weight: 600; white-space: nowrap; } @media (max-width: 640px) { .mt-ordering { grid-template-columns: 1fr; } } .mt-story__media { border-radius: 18px; overflow: clip; } .mt-story__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; } /* Patient quote on the dark band — high contrast (white + teal accent). */ .mt-story__quote { margin: 0 0 1.2rem; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 3px solid var(--wp--preset--color--teal, #15b3bd); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.4; font-weight: 600; font-style: italic; color: #ffffff; } .mt-story__quote cite { display: block; margin-top: 0.5rem; font-size: 0.65em; font-style: normal; font-weight: 600; color: rgba(255, 255, 255, 0.75); } @media (max-width: 780px) { .mt-story { grid-template-columns: 1fr; } } /* ---- Your Liner feature row ---- */ .mt-features { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); } .mt-feature img { width: 56px; height: 56px; object-fit: contain; display: block; } /* ---- Interactive "Your® Liner" diagram (home) — hover/focus reveals text ---- */ .mt-ld { display: grid; grid-template-columns: 1fr minmax(150px, 230px) 1fr; align-items: stretch; gap: clamp(1rem, 3vw, 2.75rem); max-width: 1080px; margin: clamp(2rem, 4vw, 3.5rem) auto 0; } .mt-ld__col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(1.6rem, 3.5vw, 3rem); } .mt-ld__fig { margin: 0; text-align: center; } /* The liner is the SUBJECT of this diagram, but at 36vw it rendered 147px wide in a 230px figure column — 14% of the 1080px block, dwarfed by its own labels, with 83px of the column left empty. 44vw fills the track it already has (203px wide at 1440, still inside 230) without touching the grid. */ .mt-ld__liner { width: auto; height: clamp(360px, 44vw, 640px); max-width: 100%; display: inline-block; filter: drop-shadow(0 28px 46px rgba(5, 22, 42, 0.18)); animation: mt-ld-float 6s ease-in-out infinite; } /* The seven-callout artwork ships uncut — a semi-opaque white haze over the whole frame (alpha 48-140, zero transparent pixels) — which painted a lighter RECTANGLE over the pale section. That used to be handled with mix-blend-mode:multiply, on the reasoning that white multiplies away against a near-white ground. It does. But multiply is not a cut-out: it multiplies the LINER too. On DualShore the same diagram sits on a blue/purple gradient, so every pixel got multiplied by blue — the liner turned uniformly navy, and the artwork's white annotation layer (callout circles, dashed leader lines, the flexion arrow) multiplied to a no-op and vanished entirely. The labels were pointing at nothing. liner-features-cut.webp is a real cut-out: the white haze is removed and the file is trimmed to its alpha bounding box, so normal blending shows the true colours on any ground, the annotations come back, and the drop-shadow traces the liner instead of the box. It is also 67KB against the PNG's 671KB. */ .mt-ld--7 .mt-ld__liner { position: relative; z-index: 1; /* over the section gradient, under the callout labels */ filter: drop-shadow(0 30px 40px rgba(5, 22, 42, 0.35)); } /* Lifted further off the dark gradient, where a navy shadow alone reads as nothing: a tight dark core for contact plus a wide cool halo to separate the silhouette from a background of almost the same value. */ .mt-ld--7.mt-ld--dark .mt-ld__liner { filter: drop-shadow(0 18px 26px rgba(3, 12, 30, 0.55)) drop-shadow(0 0 46px rgba(150, 210, 255, 0.28)); } @keyframes mt-ld-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .mt-ld__feat { display: flex; align-items: center; gap: 0.9rem; cursor: default; outline: none; } .mt-ld__col--left .mt-ld__feat { flex-direction: row-reverse; text-align: right; } .mt-ld__ico { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--wp--preset--color--off-white, #f8feff); border: 1px solid var(--wp--preset--color--border, #d8f4f6); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .mt-ld__ico img { width: 30px; height: 30px; object-fit: contain; display: block; } .mt-ld__body { display: flex; flex-direction: column; } .mt-ld__title { font-weight: 700; font-size: clamp(1.32rem, 1.1rem + 0.7vw, 1.72rem); line-height: 1.18; color: var(--wp--preset--color--navy, #0a2c54); transition: color .25s ease; } .mt-ld__desc { max-width: 34ch; margin-top: 0.45rem; font-size: clamp(1.06rem, 0.96rem + 0.34vw, 1.24rem); line-height: 1.55; color: var(--wp--preset--color--navy-mid, #475f7f); opacity: 0; max-height: 0; overflow: hidden; transform: translateY(-4px); transition: opacity .3s ease, max-height .35s ease, transform .3s ease; } .mt-ld__col--left .mt-ld__desc { margin-left: auto; } .mt-ld__feat:hover .mt-ld__ico, .mt-ld__feat:focus-visible .mt-ld__ico { transform: scale(1.08); border-color: var(--wp--preset--color--teal, #15b3bd); box-shadow: 0 0 0 4px rgba(21, 179, 189, 0.12); } .mt-ld__feat:hover .mt-ld__title, .mt-ld__feat:focus-visible .mt-ld__title { color: var(--wp--preset--color--teal-deep, #094448); } .mt-ld__feat:hover .mt-ld__desc, .mt-ld__feat:focus-visible .mt-ld__desc { opacity: 1; max-height: 12rem; transform: none; } @media (max-width: 860px) { .mt-ld { grid-template-columns: 1fr; max-width: 540px; row-gap: 1.75rem; } .mt-ld__fig { order: -1; } /* 280px left the liner 90px wide in a 252px column — 36% of a stacked, single-column layout where it has the width to itself. */ .mt-ld__liner { height: 380px; animation: none; } .mt-ld__col--left .mt-ld__feat { flex-direction: row; text-align: left; } .mt-ld__col--left .mt-ld__desc { margin-left: 0; } .mt-ld__desc { opacity: 1; max-height: none; transform: none; } /* always shown on touch */ } @media (prefers-reduced-motion: reduce) { .mt-ld__liner { animation: none; } } .mt-feature h3 { margin: 0.8rem 0 0.25rem; font-size: var(--wp--preset--font-size--large, 1.25rem); } .mt-feature p { margin: 0; color: var(--wp--preset--color--navy-mid, #475f7f); font-size: 0.95rem; } /* ---- Steps (Prescribe / Scan / Send) ---- */ .mt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; } .mt-step__n { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--wp--preset--color--teal, #1acdd8); color: var(--wp--preset--color--navy-deep, #05162a); font-family: var(--wp--preset--font-family--head); font-weight: 800; } /* Centre the whole step column. The icon was an inline-flex, so it sat on the text's start edge while the heading and caption were centred — visible as a left-hung icon over centred text on the product-page variant. */ .mt-step { text-align: center; } .mt-step__icon { display: flex; justify-content: center; } .mt-step__icon img { width: 64px; height: 64px; object-fit: contain; display: block; } .mt-step h3 { margin: 1rem 0 0.4rem; } .mt-step p { margin: 0; color: var(--wp--preset--color--navy-mid, #475f7f); } /* 4-step process (home "custom-liners as a service") with CPO / MotionTech tags */ .mt-steps--4 { grid-template-columns: repeat(4, 1fr); } .mt-steps--5 { grid-template-columns: repeat(5, 1fr); gap: clamp(0.75rem, 2vw, 1.5rem); } .mt-step__tag { display: inline-block; margin-top: 0.9rem; font-family: var(--wp--preset--font-family--small); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.28rem 0.6rem; border-radius: 999px; } .mt-step__tag--cpo { background: rgba(5, 22, 42, 0.06); color: var(--wp--preset--color--navy, #0a2c54); } .mt-step__tag--mt { background: rgba(21, 179, 189, 0.15); color: var(--wp--preset--color--teal-deep, #094448); } /* ---- Product showcase ---- */ .mt-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; } .mt-product-card { display: flex; flex-direction: column; overflow: clip; border-radius: 18px; background: var(--wp--preset--color--white, #fff); border: 1px solid var(--wp--preset--color--border, #d8f4f6); text-decoration: none; color: inherit; transition: transform 0.25s ease, box-shadow 0.25s ease; } .mt-product-card:hover, .mt-product-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(5, 22, 42, 0.55); } .mt-product-card__media { aspect-ratio: 4 / 3; overflow: clip; background: linear-gradient(135deg, var(--wp--preset--color--teal-tint, #eefdff), var(--wp--preset--color--teal-light, #abeef2)); } .mt-product-card__media img { width: 100%; height: 100%; /* contain, not cover: these are product shots — never crop the product. */ object-fit: contain; padding: 6%; box-sizing: border-box; display: block; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .mt-product-card:hover .mt-product-card__media img, .mt-product-card:focus-visible .mt-product-card__media img { transform: scale(1.07); } .mt-product-card__body { padding: 1.25rem 1.25rem 1.5rem; } .mt-product-card__body h3 { margin: 0 0 0.3rem; } .mt-product-card__body p { margin: 0 0 0.9rem; color: var(--wp--preset--color--navy-mid, #475f7f); font-size: 0.95rem; } .mt-product-card__arrow { font-family: var(--wp--preset--font-family--small); font-weight: 700; color: var(--wp--preset--color--teal-deep, #094448); } /* ---- Big product tiles (Apple-style) ---- */ .mt-bigproducts { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.9rem, 1.8vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3.5rem); } .mt-bigproducts__note { max-width: 760px; margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0; text-align: center; color: var(--wp--preset--color--navy-mid, #475f7f); font-size: var(--wp--preset--font-size--small, 0.875rem); line-height: 1.6; } .mt-bigproducts__note strong { color: var(--wp--preset--color--navy, #0a2c54); } .mt-bigproducts__note a { color: var(--wp--preset--color--teal-deep, #094448); font-weight: 600; } .mt-bigcard { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: clamp(420px, 46vw, 620px); padding-top: clamp(2.2rem, 4vw, 3.4rem); border-radius: 24px; overflow: clip; text-decoration: none; color: var(--wp--preset--color--navy-deep, #05162a); background: var(--wp--preset--color--white, #fff); box-shadow: 0 1px 0 rgba(5, 22, 42, 0.04); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; } .mt-bigcard:hover, .mt-bigcard:focus-visible { transform: translateY(-6px); box-shadow: 0 30px 60px -34px rgba(5, 22, 42, 0.5); } .mt-bigcard__text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1.5rem; max-width: 30rem; } .mt-bigcard__name { font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(1.7rem, 1rem + 1.8vw, 2.6rem); } .mt-bigcard__tag { color: var(--wp--preset--color--navy-mid, #475f7f); font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem); line-height: 1.4; } .mt-bigcard__cta { margin-top: 0.35rem; font-family: var(--wp--preset--font-family--small); font-weight: 700; color: var(--wp--preset--color--teal-deep, #094448); } .mt-bigcard:hover .mt-bigcard__cta { text-decoration: underline; } .mt-bigcard__media { margin-top: auto; width: 100%; flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; overflow: clip; } .mt-bigcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .mt-bigcard:hover .mt-bigcard__media img, .mt-bigcard:focus-visible .mt-bigcard__media img { transform: scale(1.05); } .mt-bigcard__media--gradient { min-height: 240px; background: radial-gradient(120% 90% at 50% 120%, rgba(255,255,255,0.35), transparent 60%), linear-gradient(150deg, var(--wp--preset--color--navy-deep, #05162a), var(--wp--preset--color--navy-mid, #2a4a6b)); } /* Your® Sleeve is a cut-out product shot, not a photograph that can be cropped: `cover` would slice the stand off, so contain it. No panel behind it — the grey read as a second, competing surface next to the plain Your® Liner card. */ .mt-bigcard__media--sleeve { min-height: 240px; align-items: center; padding: clamp(1rem, 3vw, 2.25rem); background: none; } .mt-bigcard__media--sleeve img { width: auto; max-width: 100%; height: 100%; max-height: 420px; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(5, 22, 42, 0.18)); } .mt-bigcard__media--teal { background: radial-gradient(120% 90% at 50% 120%, rgba(255,255,255,0.5), transparent 60%), linear-gradient(150deg, var(--wp--preset--color--teal-dark, #118990), var(--wp--preset--color--teal-light, #abeef2)); } @media (max-width: 760px) { .mt-bigproducts { grid-template-columns: 1fr; } .mt-bigcard { min-height: 400px; } } /* ---- Apple-style product story sections ---- */ .mt-prod-statement, .mt-prod-silicones, .mt-prod-process { text-align: center; } .mt-prod-claim { font-family: var(--wp--preset--font-family--heading, inherit); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(1.9rem, 1rem + 3vw, 3.4rem); max-width: 18ch; margin: 0 auto; } .mt-prod-sub { color: var(--wp--preset--color--navy-mid, #475f7f); font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; max-width: 58ch; margin: 1.1rem auto 0; } /* On dark prod-statement bands (e.g. the DualShore "New" callout) the heading inherits navy and the sub is navy-mid — both vanish. Force light text. */ .mt-on-dark .mt-prod-claim { color: var(--wp--preset--color--white, #fff); } .mt-on-dark .mt-prod-sub { color: var(--wp--preset--color--off-white, #f8feff); } /* On the statement bands the sub-line is a single sentence meant to sit under the claim as one line; 58ch broke it into three. Widen only here so the narrower measure still applies to running copy elsewhere. */ .mt-prod-statement .mt-prod-sub { max-width: min(88ch, 100%); } .mt-silicones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 1.6vw, 1.4rem); margin-top: clamp(2rem, 3.5vw, 3rem); text-align: left; } /* Centre a 2-card option grid (e.g. Your Sleeve silicone choices). */ .mt-silicones--2 { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; } @media (max-width: 700px) { .mt-silicones--2 { grid-template-columns: minmax(0, 420px); } } /* Comparison table — Your Sleeve "from measurements vs from scan". */ .mt-cmp-wrap { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 760px; overflow-x: auto; } .mt-cmp { width: 100%; border-collapse: separate; border-spacing: 0.5rem; } .mt-cmp th, .mt-cmp td { padding: 0.8rem 1rem; text-align: center; font-size: 0.95rem; line-height: 1.4; } .mt-cmp thead th { color: var(--wp--preset--color--navy, #0a2c54); font-family: var(--wp--preset--font-family--head, inherit); font-weight: 800; } .mt-cmp tbody th { text-align: left; color: var(--wp--preset--color--navy, #0a2c54); font-weight: 700; white-space: nowrap; } /* Wide tables scroll sideways on phones: keep the row header visible so cells never lose their row context mid-scroll. */ .mt-cmp tbody th { position: sticky; left: 0; background: #fff; z-index: 1; } .mt-cmp td { border-radius: 10px; color: var(--wp--preset--color--navy-deep, #05162a); } .mt-cmp--good { background: var(--wp--preset--color--teal-light, #abeef2); } .mt-cmp--warn { background: #fde9c8; } .mt-cmp--bad { background: #f6c6bd; } .mt-cmp--rec { background: #f3d27e; } /* Phones: instead of a sideways-scrolling table (only ~1 column visible), stack each row as a card. The is visually hidden but kept for screen readers; each value cell shows its column header via data-label and keeps its good/warn/bad tint as a labelled chip. */ @media (max-width: 640px) { .mt-cmp-wrap { overflow-x: visible; max-width: 460px; } .mt-cmp { border-spacing: 0; display: block; } .mt-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mt-cmp tbody, .mt-cmp tbody tr, .mt-cmp tbody th, .mt-cmp tbody td { display: block; } .mt-cmp tbody tr { border: 1px solid var(--wp--preset--color--border, #d8f4f6); border-radius: 14px; padding: 0.15rem 0.75rem 0.75rem; margin-bottom: 1rem; background: #fff; } .mt-cmp tbody th[scope="row"] { position: static; white-space: normal; font-size: 1.1rem; padding: 0.6rem 0.15rem 0.5rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--wp--preset--color--border, #d8f4f6); } .mt-cmp tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 0.9rem; text-align: right; padding: 0.5rem 0.7rem; margin-top: 0.4rem; font-size: 0.9rem; } .mt-cmp tbody td::before { content: attr(data-label); text-align: left; font-weight: 700; color: var(--wp--preset--color--navy-deep, #05162a); flex: 0 1 auto; } } /* Local-thicknesses 3-image diagram (no zones / drawing / with zones). */ .mt-zones3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); max-width: 900px; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; align-items: end; } @media (max-width: 720px) { .mt-zones3 { grid-template-columns: 1fr; max-width: 340px; } } .mt-zones3__item { margin: 0; text-align: center; } .mt-zones3__item img { max-width: 100%; height: auto; display: block; margin: 0.6rem auto 0; } .mt-zones3__item figcaption { font-size: 0.85rem; color: var(--wp--preset--color--navy-mid, #475f7f); line-height: 1.45; } .mt-cmp thead th.mt-cmp__band { background: var(--wp--preset--color--navy-deep, #05162a); color: #fff; border-radius: 8px; } .mt-cmp__fig { width: 46px; height: auto; vertical-align: middle; margin-right: 0.4rem; } /* "What differs with both sleeve types" — two-column (measurements vs scan). */ .mt-diff-h { text-align: center; margin: clamp(2rem, 4vw, 3rem) 0 1.3rem; } .mt-diff-h__accent { color: var(--wp--preset--color--teal-deep, #094448); } .mt-diff2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); max-width: 900px; margin: 0 auto; } /* A hairline between the two types. They are a comparison read side by side and the gap alone did not separate them — the eye ran the left column's figures into the right column's text. Drawn on the second column so it sits in the gutter and needs no extra element; it becomes a horizontal rule once the columns stack. */ .mt-diff2 > .mt-diff + .mt-diff { border-left: 1px solid var(--wp--preset--color--border, #d8f4f6); padding-left: clamp(1.5rem, 4vw, 3.5rem); } @media (max-width: 720px) { .mt-diff2 { grid-template-columns: 1fr; } .mt-diff2 > .mt-diff + .mt-diff { border-left: 0; padding-left: 0; border-top: 1px solid var(--wp--preset--color--border, #d8f4f6); padding-top: clamp(1.5rem, 5vw, 2.5rem); } } .mt-diff { text-align: center; } .mt-diff__label { display: block; font-weight: 800; color: var(--wp--preset--color--navy, #0a2c54); margin-bottom: 0.8rem; } .mt-diff p { color: var(--wp--preset--color--navy-mid, #475f7f); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem); line-height: 1.6; margin: 0.7rem 0; } .mt-diff__label { font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem); } /* Subgrid rows are sized by the taller column, so a row holding a diagram on one side and one line of text on the other left the short side stranded at the top. Centring each cell in its row closes that gap. */ .mt-diff2--align .mt-diff > * { align-self: center; } .mt-diff figure { margin: 1rem 0; } .mt-diff figure img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 10px; } .mt-diff .mt-zoom { display: inline-block; cursor: zoom-in; border: 0; background: none; padding: 0; } .mt-diff__yes { color: var(--wp--preset--color--teal-deep, #094448) !important; font-weight: 600; } .mt-diff__no { color: #b0341f !important; font-weight: 600; } /* DualShore "all favourite features" figure (on the dark band). */ .mt-dsfeat { margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; max-width: 440px; } .mt-dsfeat img { width: 100%; height: auto; display: block; } /* Indication cards: label always visible; description reveals on hover/focus (and is shown outright on touch devices, which have no hover). */ .mt-features--hover .mt-feature p { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease; } .mt-features--hover .mt-feature:hover p, .mt-features--hover .mt-feature:focus-within p { max-height: 10rem; opacity: 1; margin-top: 0.5rem; } @media (hover: none) { .mt-features--hover .mt-feature p { max-height: 10rem; opacity: 1; margin-top: 0.5rem; } } .mt-silicone { background: var(--wp--preset--color--white, #fff); border: 1px solid var(--wp--preset--color--border, #d8f4f6); border-radius: 16px; padding: clamp(1.3rem, 2vw, 1.8rem); display: flex; flex-direction: column; } .mt-silicone--mid { border-color: var(--wp--preset--color--teal, #15b3bd); box-shadow: 0 18px 40px -28px rgba(17, 137, 144, 0.55); } .mt-silicone__shore { font-family: var(--wp--preset--font-family--small); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wp--preset--color--teal-deep, #094448); } .mt-silicone h3 { font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); margin: 0.25rem 0 0.5rem; } .mt-silicone__for { color: var(--wp--preset--color--navy-deep, #05162a); margin: 0 0 0.8rem; font-weight: 600; } .mt-silicone ul { margin: 0; padding-left: 1.1rem; color: var(--wp--preset--color--navy-mid, #475f7f); font-size: 0.95rem; } .mt-silicone li { margin: 0.2rem 0; } /* spec rows (Pros / Cons / Suitable for / Contraindications) */ .mt-silicone__spec { margin: 0.6rem 0 0; } .mt-silicone__spec dt { font-family: var(--wp--preset--font-family--small); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--teal-deep, #094448); margin-top: 0.7rem; } .mt-silicone__spec dd { margin: 0.1rem 0 0; color: var(--wp--preset--color--navy-mid, #475f7f); font-size: 0.95rem; } @media (max-width: 760px) { .mt-silicones { grid-template-columns: 1fr; } } /* ---- Your® Liner: coloured silicone cards + pads (Relax/Active/Dynamic) ---- */ .mt-silicone--solid { color: #fff; border: 0; text-align: center; box-shadow: 0 18px 40px -28px rgba(5, 22, 42, 0.45); } .mt-silicone--solid h3 { color: #fff; } .mt-silicone--solid .mt-silicone__shore { color: #fff; background: rgba(0, 0, 0, 0.22); padding: 0.15rem 0.55rem; border-radius: 999px; display: inline-block; } .mt-silicone--solid .mt-silicone__spec { text-align: center; } .mt-silicone--solid .mt-silicone__spec dt { color: rgba(255, 255, 255, 0.72); } .mt-silicone--solid .mt-silicone__spec dd { color: #fff; } .mt-silicone--relax { background: #138b7e; } /* Relax — teal */ .mt-silicone--active { background: #2c57a6; } /* Active — blue */ .mt-silicone--dynamic { background: #6e4684; } /* Dynamic — purple */ /* "Off" card — an option not offered (e.g. Relax for Your Sleeve): grey, with a faint X. */ .mt-silicone--off { background: var(--wp--preset--color--border-dark, #c2cad4); color: #3b4654; text-align: center; border: 0; position: relative; overflow: hidden; } .mt-silicone--off h3 { color: #3b4654; } .mt-silicone--off .mt-silicone__shore { color: #46505e; } .mt-silicone--off::before { content: "\2715"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 8rem; color: rgba(255, 255, 255, 0.55); line-height: 1; z-index: 0; pointer-events: none; } .mt-silicone--off > * { position: relative; z-index: 1; } .mt-silicone__offmsg { font-weight: 600; margin: 0.5rem 0; } .mt-silicone--off .mt-silicone__pad { opacity: 0.55; } .mt-silicone__pad { width: 130px; height: auto; display: block; margin: auto auto 0; padding-top: 1.1rem; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.25)); } /* Thicknesses — 5 diagram cards + profiles table */ .mt-thickgrid { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; counter-reset: thick; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(1.2rem, 2.5vw, 2rem); } /* Title ABOVE its diagram, description below — the order the original uses. Ours ran diagram → title → description, so you met each drawing before being told what it showed. Reordered visually rather than in the markup: the heading still precedes its figure in the DOM for a screen reader. */ .mt-thick { text-align: center; display: flex; flex-direction: column; } .mt-thick h3 { order: -1; margin: 0 0 0.7rem; } .mt-thick__fig { order: 0; } .mt-thick p { order: 1; } /* The original presents these five diagrams plain on the page — no card, no frame — and shows each one whole. Forcing a 1:1 box and clipping to it was what cut the callout boxes and the silicone gradient bar off at the edge. Natural ratio, nothing clipped, no chrome. */ .mt-thick__fig { margin: 0 0 0.8rem; display: grid; place-items: center; padding: 0; overflow: visible; background: none; border: 0; } .mt-thick__fig img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .mt-thick__fig--note span { color: var(--wp--preset--color--teal-deep, #094448); font-weight: 700; line-height: 1.3; } .mt-thick h3 { counter-increment: thick; margin: 0 0 0.3rem; font-size: clamp(1rem, 0.92rem + 0.3vw, 1.15rem); } .mt-thick h3::before { content: "#" counter(thick) " "; color: var(--wp--preset--color--teal-deep, #094448); } .mt-thick p { margin: 0; font-size: 0.9rem; color: var(--wp--preset--color--navy-mid, #475f7f); } /* The profiles table now occupies the grid's empty sixth cell rather than running full width below it. Small in place, still click-to-expand via the existing .mt-zoom button, and its "See detailed profiles" caption travels with it — so the thumbnail says what opening it will show. */ .mt-thick--profiles { justify-content: center; } .mt-thick--profiles .mt-thick__profiles { margin: 0; max-width: none; } .mt-thick--profiles .mt-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .mt-thick--profiles .mt-ttab__head { display: none; } /* labels are unreadable at tile size */ .mt-thick--profiles img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--wp--preset--color--border, #d8f4f6); } .mt-thick--profiles figcaption { margin-top: 0.55rem; font-size: 0.86rem; font-weight: 700; color: var(--wp--preset--color--teal-deep, #094448); } .mt-thick__profiles { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 1100px; text-align: center; } .mt-thick__profiles img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--wp--preset--color--border, #d8f4f6); } .mt-thick__profiles figcaption { margin-top: 0.6rem; font-weight: 700; color: var(--wp--preset--color--teal-deep, #094448); } /* Local thicknesses — zones diagram, two columns */ .mt-zones { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .mt-zones__img { margin: 0; } .mt-zones__img img { width: 100%; height: auto; display: block; } @media (max-width: 780px) { .mt-zones { grid-template-columns: 1fr; } } /* Suspension graphics: thumbnail + label + zoom-circle magnifier per option, then the annotated "combine" pair. (Faithful rebuild of the live section.) */ .mt-accent { color: var(--wp--preset--color--teal-deep, #094448); } .mt-susp3 { margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; } .mt-suspc { display: flex; flex-direction: column; align-items: center; text-align: center; } .mt-suspc__thumb { height: 52px; width: auto; opacity: 0.9; margin: 0 0 0.5rem; } .mt-suspc__title { margin: 0; font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem); font-weight: 800; color: var(--wp--preset--color--navy-deep, #0a2c54); line-height: 1.2; } .mt-suspc__title span { display: block; font-weight: 600; color: var(--wp--preset--color--navy-mid, #475f7f); font-size: 0.85em; } .mt-suspc__stage { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 1rem; } .mt-suspc .mt-zoom { background: none; border: 0; padding: 0; cursor: zoom-in; line-height: 0; } /* Definite height (was max-height) so the intrinsic ratio can reserve the box before the photo decodes — with both axes auto these five popped in on load. Every source is 720px tall, well above the clamp, so the rendered size is unchanged. */ .mt-suspc__photo { height: clamp(220px, 26vw, 300px); width: auto; } .mt-suspc__lens { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 12px 30px -12px rgba(5, 22, 42, 0.55), 0 0 0 1.5px rgba(10, 44, 84, 0.18); background: #eef2f5; display: grid; place-items: center; } .mt-suspc__lens img { width: 100%; height: 100%; object-fit: cover; } .mt-suspc--hl { background: rgba(10, 44, 84, 0.045); border-radius: 16px; padding: 1rem 0.5rem 1.4rem; } .mt-suspcombo { display: flex; justify-content: center; gap: clamp(2.5rem, 9vw, 7rem); margin-top: 1.4rem; flex-wrap: wrap; } .mt-annofig { position: relative; display: inline-block; line-height: 0; } .mt-annofig .mt-zoom { background: none; border: 0; padding: 0; cursor: zoom-in; line-height: 0; } /* Definite height, same reason as .mt-suspc__photo — both sources are 268x720, far above the clamp, so the rendered box is unchanged and the absolutely positioned .mt-anno labels keep their anchor. */ .mt-annofig img { height: clamp(210px, 26vw, 300px); width: auto; display: block; } .mt-anno { position: absolute; display: flex; align-items: center; gap: 0; font-size: 0.76rem; font-weight: 700; color: var(--wp--preset--color--navy-deep, #0a2c54); white-space: nowrap; line-height: 1.15; } .mt-anno__l { display: block; width: 30px; height: 0; border-top: 1.5px solid var(--wp--preset--color--navy-mid, #475f7f); position: relative; flex: 0 0 auto; } .mt-anno__l::after { content: ""; position: absolute; width: 5px; height: 5px; border-top: 1.5px solid var(--wp--preset--color--navy-mid, #475f7f); border-right: 1.5px solid var(--wp--preset--color--navy-mid, #475f7f); top: 50%; } /* Left figure: labels sit left, connector points right toward the liner. */ .mt-annofig--left .mt-anno { right: 100%; margin-right: -2px; flex-direction: row; } .mt-annofig--left .mt-anno__l { margin-left: 4px; } .mt-annofig--left .mt-anno__l::after { right: -1px; transform: translateY(-50%) rotate(45deg); } /* Right figure: labels sit right, connector points left toward the liner. */ .mt-annofig--right .mt-anno { left: 100%; margin-left: -2px; flex-direction: row; } .mt-annofig--right .mt-anno__l { margin-right: 4px; order: -1; } .mt-annofig--right .mt-anno__l::after { left: -1px; transform: translateY(-50%) rotate(-135deg); } /* Feature anchor points (tuned to the combine photos). */ .mt-annofig--left .mt-anno--pin { top: 7%; } .mt-annofig--left .mt-anno--rings { top: 28%; } .mt-annofig--right .mt-anno--pin { top: 8%; } .mt-annofig--right .mt-anno--rings { top: 73%; } @media (max-width: 680px) { .mt-susp3 { grid-template-columns: 1fr; gap: 2rem; } } /* Mobile: the outside-the-image arrow labels would overflow/collide, so stack the combine figures and render the labels as a centered caption list under each. */ @media (max-width: 720px) { .mt-suspcombo { flex-direction: column; align-items: center; gap: 2.2rem; } .mt-annofig { display: flex; flex-direction: column; align-items: center; } .mt-anno { position: static; margin: 0.35rem 0 0; justify-content: center; font-size: 0.82rem; } .mt-anno__l { display: none; } } .mt-prod-note { margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; max-width: 50ch; font-size: 0.9rem; color: var(--wp--preset--color--navy-mid, #475f7f); font-style: italic; } .mt-prod-note a { color: var(--wp--preset--color--teal-deep, #094448); font-weight: 700; } /* Where two notes stack (the comparison-table disclaimer, then the patient-facing line), the first carries an inline 820px measure and the second fell back to 50ch — so the pair centred on two different widths and read as misaligned. Match the second to the first without widening standalone notes elsewhere. */ .mt-prod-note + .mt-prod-note { max-width: 820px; } /* Drying Stand: product photo beside stacked benefits (one screen). */ .mt-prod-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; max-width: 1180px; margin: 0 auto; } .mt-prod-split__img { margin: 0; } .mt-prod-split__img img { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 30px 60px -34px rgba(5, 22, 42, 0.45); } /* Click-to-expand button wrapping a product photo. */ .mt-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 22px; transition: transform 0.25s ease; } .mt-zoom:hover { transform: translateY(-3px); } .mt-zoom:focus-visible { outline: 3px solid var(--wp--preset--color--teal, #15b3bd); outline-offset: 4px; } /* Full-screen image lightbox (native ). */ .mt-imgzoom { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; } .mt-imgzoom::backdrop { background: rgba(5, 22, 42, 0.82); } .mt-imgzoom__img { display: block; margin: auto; width: auto; height: auto; max-width: 92vw; max-height: 88vh; border-radius: 14px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7); /* Visible by default. This used to be opacity:0, lifted only when JS added .is-open inside requestAnimationFrame — so wherever rAF is throttled or paused the enlarged image stayed transparent and the page showed straight through it, which is exactly what made the zoomed diagram's legends unreadable. The entrance is now a CSS animation keyed off [open], so the image can never be left invisible by a frame callback that never runs. */ opacity: 1; transform: none; } @keyframes mt-imgzoom-in { from { opacity: 0; transform: scale(0.96); } } .mt-imgzoom[open] .mt-imgzoom__img { animation: mt-imgzoom-in 0.18s ease both; } .mt-imgzoom__close { position: fixed; top: 18px; right: 22px; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #05162a; font-size: 1.7rem; line-height: 1; cursor: pointer; } .mt-imgzoom__nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: 50px; height: 50px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #05162a; font-size: 2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mt-imgzoom__nav--prev { left: 18px; } .mt-imgzoom__nav--next { right: 18px; } .mt-imgzoom__nav[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .mt-zoom, .mt-imgzoom__img { transition: none; } .mt-imgzoom__img { opacity: 1; transform: none; } } .mt-prod-split__body { text-align: left; } .mt-features--stack { display: flex; flex-direction: column; gap: clamp(1.6rem, 3vw, 2.6rem); margin-top: 0; } .mt-features--stack .mt-feature { text-align: left; } .mt-features--stack .mt-feature h3 { margin: 0 0 0.4rem; font-size: clamp(1.5rem, 1.05rem + 1.1vw, 2.15rem); line-height: 1.1; } .mt-features--stack .mt-feature p { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.5; } .mt-prod-split__body .mt-prod-note { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; max-width: 52ch; font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem); } @media (max-width: 840px) { .mt-prod-split { grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.5rem); } .mt-prod-split__img { max-width: 380px; margin: 0 auto; } .mt-prod-split__body { text-align: center; } .mt-features--stack .mt-feature { text-align: center; } .mt-prod-split__body .mt-prod-note { margin-left: auto; margin-right: auto; } } /* Sub-section label inside a nav dropdown (e.g. "Accessories"). */ .mt-subnav__label { display: block; margin-top: 0.4rem; padding: 0.6rem 1rem 0.2rem; border-top: 1px solid var(--wp--preset--color--border, #d8f4f6); font-family: var(--wp--preset--font-family--small); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wp--preset--color--teal-deep, #094448); text-align: center; } /* Numbered journey steps (How it works). */ .mt-journey__n { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; margin: 0 auto 0.7rem; background: var(--wp--preset--color--teal-tint, #eefdff); color: var(--wp--preset--color--teal-deep, #094448); font-family: var(--wp--preset--font-family--head, inherit); font-weight: 800; font-size: 1.05rem; } /* ---- CTA band ---- */ .mt-cta-band { background: var(--wp--preset--color--teal-deep, #094448); color: var(--wp--preset--color--off-white, #f8feff); border-radius: 24px; padding: clamp(2rem, 5vw, 4rem); } /* On the dark band the heading must not fall back to the dark default. */ .mt-cta-band .mt-h2 { color: var(--wp--preset--color--off-white, #f8feff); } .mt-cta-band .mt-kicker { color: var(--wp--preset--color--teal-light, #abeef2); } .mt-cta-band .mt-lead { color: var(--wp--preset--color--off-white, #f8feff); } /* responsive: stack the 3-up grids on small screens */ @media (max-width: 640px) { .mt-stats, .mt-steps { grid-template-columns: 1fr; } } @media (max-width: 900px) { .mt-steps--4, .mt-steps--5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .mt-steps--4, .mt-steps--5 { grid-template-columns: 1fr; } } /* ---- Buttons (bespoke, used inside html sections) ---- */ /* iOS Safari inflates text on rotate to landscape without this. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .mt-btn { display: inline-block; max-width: 100%; box-sizing: border-box; padding: 0.8rem 1.5rem; border-radius: 10px; font-family: var(--wp--preset--font-family--small); font-weight: 700; text-decoration: none; background: var(--wp--preset--color--teal, #1acdd8); color: var(--wp--preset--color--navy-deep, #05162a); border: 2px solid transparent; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease; } .mt-btn:hover, .mt-btn:focus-visible { background: var(--wp--preset--color--teal-deep, #094448); color: var(--wp--preset--color--white, #fff); transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(5, 22, 42, 0.5); } @media (prefers-reduced-motion: reduce) { .mt-btn { transition: background-color 0.18s ease, color 0.18s ease; } .mt-btn:hover { transform: none; } } /* Class polish: subtle hover lift on feature/silicone cards. */ .mt-features .mt-feature, .mt-silicone { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; } @media (hover: hover) { .mt-features .mt-feature:hover { transform: translateY(-3px); } .mt-silicone:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(5, 22, 42, 0.45); } } .mt-btn--ghost { background: transparent; color: var(--wp--preset--color--off-white, #f8feff); border-color: rgba(255, 255, 255, 0.45); } .mt-btn--ghost:hover, .mt-btn--ghost:focus-visible { background: var(--wp--preset--color--white, #fff); color: var(--wp--preset--color--navy-deep, #05162a); border-color: var(--wp--preset--color--white, #fff); } /* Ghost button on LIGHT sections (e.g. the ordering band): the default ghost is white-on-transparent for dark backgrounds and vanishes here — use navy. */ .mt-ordering .mt-btn--ghost { color: var(--wp--preset--color--navy, #0a2c54); border-color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-ordering .mt-btn--ghost:hover, .mt-ordering .mt-btn--ghost:focus-visible { background: var(--wp--preset--color--navy, #0a2c54); color: #fff; border-color: var(--wp--preset--color--navy, #0a2c54); } /* Hero ghost button (e.g. "Find a clinic") — frosted + strong border so it reads clearly against the navy/photo hero instead of nearly vanishing. */ .mt-hero .mt-btn--ghost, .mt-cta-band .mt-btn--ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(2px); } .mt-hero .mt-btn--ghost:hover, .mt-hero .mt-btn--ghost:focus-visible, .mt-cta-band .mt-btn--ghost:hover, .mt-cta-band .mt-btn--ghost:focus-visible { background: #fff; color: var(--wp--preset--color--navy-deep, #05162a); border-color: #fff; } /* "Further documentation" download buttons sit on a light (off-white) band, so the default white-on-transparent ghost vanishes — give them navy ink + border, filling on hover (mirrors the .mt-ordering ghost treatment above). */ .mt-docs .mt-btn--ghost { color: var(--wp--preset--color--navy, #0a2c54); border-color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-docs .mt-btn--ghost:hover, .mt-docs .mt-btn--ghost:focus-visible { background: var(--wp--preset--color--navy, #0a2c54); color: #fff; border-color: var(--wp--preset--color--navy, #0a2c54); } /* Systemic fix: the default ghost button is white-on-transparent (for dark bands). On ANY light band it vanishes — so give ghost buttons inside a white / off-white section navy ink + border, filling on hover. Covers the Essentials "See the full Your® Liner", "Explore designs", "See training", etc. without a per-section rule each. */ .has-white-background-color .mt-btn--ghost, .has-off-white-background-color .mt-btn--ghost { color: var(--wp--preset--color--navy, #0a2c54); border-color: var(--wp--preset--color--navy-mid, #475f7f); background: transparent; } .has-white-background-color .mt-btn--ghost:hover, .has-white-background-color .mt-btn--ghost:focus-visible, .has-off-white-background-color .mt-btn--ghost:hover, .has-off-white-background-color .mt-btn--ghost:focus-visible { background: var(--wp--preset--color--navy, #0a2c54); color: #fff; border-color: var(--wp--preset--color--navy, #0a2c54); } /* On dark bands, the .mt-feature body text uses navy-mid (dark) — near-invisible on navy. Lift it to a legible light tone; headings to white. Fixes the Demo Stand "Four reasons…" band. */ .mt-on-dark .mt-feature h3 { color: #fff; } .mt-on-dark .mt-feature p { color: rgba(255, 255, 255, 0.82); } /* Use-case presentations: expandable per-shape blocks carrying the transferred OG detail-page content (photo, issue/solution diagrams, examples, report). */ .mt-uclist { margin-top: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: 0.8rem; } .mt-uc { background: #fff; border: 1px solid rgba(10, 44, 84, 0.1); border-radius: 14px; overflow: hidden; } .mt-uc summary { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 1.2rem; cursor: pointer; list-style: none; } .mt-uc summary::-webkit-details-marker { display: none; } .mt-uc__icon { flex: 0 0 44px; height: 44px; width: 44px; object-fit: contain; } .mt-uc__head { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; text-align: left; } .mt-uc__head strong { font-family: var(--wp--preset--font-family--head); font-size: 1.05rem; color: var(--wp--preset--color--navy-deep, #0a2c54); } .mt-uc__head em { font-style: normal; font-size: 0.88rem; color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-uc__more { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(26, 205, 216, 0.14); color: var(--wp--preset--color--teal-deep, #094448); font-weight: 800; font-size: 1.15rem; transition: transform 0.25s ease; } .mt-uc[open] .mt-uc__more { transform: rotate(45deg); } .mt-uc--flat { display: flex; align-items: center; gap: 1rem; padding: 0.95rem 1.2rem; } .mt-uc__body { padding: 0.4rem 1.2rem 1.4rem; border-top: 1px solid rgba(10, 44, 84, 0.08); } .mt-uc__intro { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; } .mt-uc__photo { margin: 0; } .mt-uc__photo img { max-height: 170px; width: auto; border-radius: 10px; } .mt-uc__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; max-width: 460px; } .mt-uc__chiplabel { flex-basis: 100%; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-uc__chip { background: rgba(26, 205, 216, 0.13); color: var(--wp--preset--color--teal-ink, #0d7684); font-weight: 700; font-size: 0.84rem; padding: 0.3rem 0.75rem; border-radius: 999px; } .mt-uc__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.9rem; margin: 1rem 0; } .mt-uc__cell { margin: 0; background: var(--wp--preset--color--off-white, #f4fafb); border-radius: 10px; padding: 0.7rem; text-align: center; } .mt-uc__cell img { max-height: 130px; width: auto; max-width: 100%; } .mt-uc__cell figcaption { font-size: 0.82rem; color: var(--wp--preset--color--navy-mid, #475f7f); margin-top: 0.45rem; line-height: 1.35; } .mt-uc__exwrap h3 { margin: 1.2rem 0 0.6rem; font-size: 0.95rem; color: var(--wp--preset--color--navy-deep, #0a2c54); } .mt-uc__examples { display: flex; gap: 1rem; flex-wrap: wrap; } .mt-uc__ex { margin: 0; text-align: center; } .mt-uc__ex img { height: 150px; width: auto; border-radius: 10px; } .mt-uc__ex figcaption { font-size: 0.8rem; font-weight: 700; color: var(--wp--preset--color--navy-mid, #475f7f); margin-top: 0.3rem; } .mt-uc .mt-zoom { background: none; border: 0; padding: 0; cursor: zoom-in; line-height: 0; } .mt-uc__foot { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; } .mt-uc__quote { margin: 0; font-size: 0.9rem; font-style: italic; color: var(--wp--preset--color--navy-mid, #475f7f); border-left: 3px solid var(--wp--preset--color--teal, #1acdd8); padding-left: 0.8rem; } @media (max-width: 560px) { .mt-uc__gallery { grid-template-columns: repeat(2, 1fr); } .mt-uc__ex img { height: 110px; } } /* Thickness-profiles figure: the amputation-level headers are HTML (they must localise) positioned over the cropped image; brand terms + mm values stay in the asset. */ .mt-thick__profiles .mt-zoom { position: relative; display: block; } .mt-ttab__head { display: block; position: relative; height: 1.5em; } .mt-ttab__head span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--wp--preset--font-family--head, inherit); font-weight: 800; font-size: clamp(0.7rem, 1.6vw, 0.95rem); color: var(--wp--preset--color--navy-deep, #0a2c54); white-space: nowrap; } /* The four labels sit at fixed percentages over the chart columns, so they cannot be re-spaced — but they must localise, and German runs ~30% longer: at 375px "Knöchel-Ex./Transtibial" and "Knie-Ex./Transfemoral" overlapped by 10.6px and 7.4px, with "Transfemoral" hanging 20px past the figure. Below the point where a single line stops fitting, let them wrap and hyphenate; the fixed 1.5em height has to relax too or the second line is clipped. */ @media (max-width: 700px) { .mt-ttab__head { height: auto; min-height: 2.6em; } .mt-ttab__head span { white-space: normal; hyphens: auto; -webkit-hyphens: auto; /* % resolves against .mt-ttab__head, so the cap tracks the figure rather than the viewport. Column centres are ~21% apart; 20% keeps neighbours from touching at any width. */ max-width: 20%; text-align: center; line-height: 1.15; font-size: clamp(0.62rem, 2.1vw, 0.8rem); } } /* Waves liner-selection matrix: the chart asset has no text, so row labels are overlaid (percent-positioned to scale with the image) + a colour legend. */ .mt-matrix { max-width: 840px; margin: 1.6rem auto 0; } .mt-matrix__fig { position: relative; margin: 0; line-height: 0; } .mt-matrix__fig img { width: 100%; height: auto; border-radius: 10px; } .mt-matrix__fig .mt-zoom { background: none; border: 0; padding: 0; cursor: zoom-in; line-height: 0; display: block; } .mt-matrix__row { position: absolute; left: 13%; transform: translate(-50%, -50%); font-size: clamp(0.58rem, 1.2vw, 0.8rem); font-weight: 700; line-height: 1.15; color: var(--wp--preset--color--navy-deep, #0a2c54); text-align: center; pointer-events: none; } .mt-matrix__legend { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; justify-content: center; } .mt-matrix__legend li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-matrix__legend li span { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; } /* Phones: the overlay row labels would clamp to ~9px — unreadable, and the zoom lightbox only enlarges the image. Pull them out of the overlay into a numbered "rows, top to bottom" list under the chart instead. */ @media (max-width: 720px) { .mt-matrix__fig { counter-reset: mrow; } .mt-matrix__row { position: static; transform: none; display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.9rem; text-align: left; line-height: 1.3; pointer-events: auto; padding: 0.15rem 0; } .mt-matrix__row:first-of-type { margin-top: 0.7rem; } .mt-matrix__row br { display: none; } .mt-matrix__row::before { counter-increment: mrow; content: "Row " counter(mrow) " ·"; font-weight: 800; color: var(--wp--preset--color--teal-deep, #094448); flex: 0 0 auto; } } /* Small phones: the lightbox prev/next circles otherwise overlap the image (50px buttons vs ~330px image width). Pin them to the bottom corners. */ @media (max-width: 480px) { .mt-imgzoom__nav { top: auto; bottom: 12px; transform: none; } } /* Triptych: a product photo flanked by feature text on both sides (Drying Stand). Stacks photo-first on narrow screens. */ .mt-triptych { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 1180px; margin: 0 auto; } .mt-triptych__img { margin: 0; } .mt-triptych__img img { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 30px 60px -34px rgba(5, 22, 42, 0.45); } .mt-triptych__side { text-align: left; } @media (max-width: 880px) { .mt-triptych { grid-template-columns: 1fr; } /* width:100% for the same reason as .mt-esssplit__media: auto inline margins on a grid item shrink it to its content, and an undecoded image is 0x0, so this figure collapsed and the drying-stand page grew 252px (9%) on load. */ .mt-triptych__img { order: -1; width: 100%; max-width: 420px; margin: 0 auto; } } /* Planned-photography slots (preview only, emitted by dev-seed shot_slot()): framed placeholders sitting exactly where future photos/videos go, carrying their shot brief so the media plan is reviewable in place. */ .mt-shot { box-sizing: border-box; /* width:100% must include the 1.2rem padding + border, else it overflows narrow parents */ margin: 1.4rem auto; max-width: 560px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.2rem; text-align: center; border-radius: 14px; border: 2px dashed var(--wp--preset--color--teal-dark, #118990); background: repeating-linear-gradient(45deg, rgba(26,205,216,0.05), rgba(26,205,216,0.05) 12px, rgba(26,205,216,0.11) 12px, rgba(26,205,216,0.11) 24px); color: var(--wp--preset--color--navy-deep, #0a2c54); } .mt-shot--optional { border-color: var(--wp--preset--color--navy-mid, #475f7f); border-style: dotted; background: repeating-linear-gradient(45deg, rgba(71,95,127,0.05), rgba(71,95,127,0.05) 12px, rgba(71,95,127,0.1) 12px, rgba(71,95,127,0.1) 24px); } .mt-shot__badge { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: #fff; border-radius: 999px; padding: 0.25rem 0.7rem; color: var(--wp--preset--color--teal-deep, #094448); } .mt-shot--optional .mt-shot__badge { color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-shot__title { font-family: var(--wp--preset--font-family--head, inherit); font-size: 1.02rem; } .mt-shot__note { font-size: 0.85rem; line-height: 1.45; color: var(--wp--preset--color--navy-mid, #475f7f); max-width: 40ch; } .mt-on-dark .mt-shot { background: rgba(255,255,255,0.06); color: #fff; } .mt-on-dark .mt-shot__note { color: rgba(255,255,255,0.75); } .mt-shot--row { max-width: none; } /* minmax(0,1fr) (not the default 1fr = minmax(auto,1fr)) lets tracks shrink below their content's intrinsic width, so the placeholders wrap instead of overflowing narrow phones. */ .mt-shotrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 900px; margin: 0 auto; } .mt-shotrow .mt-shot { margin: 0; } @media (max-width: 680px) { .mt-shotrow { grid-template-columns: minmax(0, 1fr); } } /* Grid/flex items default to min-width:auto and won't shrink below their content's intrinsic width — on narrow phones that pushed these preview placeholders past the viewport. Let them shrink and wrap their text so they always fit their column (preview-only tooling; never ships). */ .mt-shot { min-width: 0; } .mt-shot__badge, .mt-shot__title, .mt-shot__note { max-width: 100%; overflow-wrap: break-word; } /* Sleeve indications: a tidy 4-per-row grid (8 cards = 2 even rows). */ .mt-features--grid4 { display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .mt-features--grid4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .mt-features--grid4 { grid-template-columns: 1fr; } } /* Sleeve "what differs": column icons + the two measurement diagrams side by side. */ /* 64px left these reading as bullet decoration rather than as the diagram they are — a hand with a tape measure versus a scanner is the whole distinction this section draws. */ .mt-diff__icon { display: block; height: clamp(88px, 9vw, 128px); width: auto; margin: 0.6rem auto 1.1rem; } .mt-diff__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-items: center; } .mt-diff__pair figure { margin: 0; } /* Waves "two classical types": the source diagrams have very different intrinsic sizes — equalise each row so the columns read as one comparison. */ .mt-diff2--even .mt-diff > figure:first-of-type img { height: 300px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; display: block; } .mt-diff2--even .mt-diff > figure:last-of-type img { height: 190px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; display: block; } /* Share-your-story process steps (dark band). */ .mt-storysteps { margin: 1.2rem auto 0; padding: 0; max-width: 560px; text-align: left; color: rgba(255,255,255,0.9); line-height: 1.6; } .mt-storysteps li { margin: 0.35rem 0 0.35rem 1.4rem; } /* Sleeve "what differs": align the two columns row-by-row (label / icon / text / figures / conclusion) so photos and text sit on one line. */ @supports (grid-template-rows: subgrid) { .mt-diff2--align { grid-template-rows: repeat(5, auto); } .mt-diff2--align .mt-diff { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-items: start; } .mt-diff2--align .mt-diff figure, .mt-diff2--align .mt-diff .mt-diff__pair { align-self: center; } } /* DualShore identity: the teal→blue→purple ramp IS the product's soft→hard zone story — the same spectrum the Relax / Active / Dynamic comparison uses — so on this page it carries meaning rather than decorating. It runs left-to-right on the dark bands, matching the reference artwork. White body copy over the mid-blue and purple stops clears 4.5:1; the pale kicker is lifted further so it does not sink into the teal end. */ .mt-ds-gradient { background: linear-gradient(115deg, #17b6c9 0%, #2a6bd8 48%, #7b2ff7 100%) !important; } .mt-ds-gradient .mt-kicker { color: #eafcff; } .mt-ds-gradient .mt-prod-sub, .mt-ds-gradient .mt-ld__desc { color: rgba(255, 255, 255, 0.92); } .mt-product-dualshore .mt-product-hero { position: relative; isolation: isolate; overflow: hidden; } /* Laid OVER the navy, not instead of it, and masked so it fades out across the headline. The text keeps navy behind it and its contrast ratio with it. */ .mt-product-dualshore .mt-product-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, #17b6c9 0%, #2a6bd8 48%, #7b2ff7 100%); opacity: 0.42; -webkit-mask-image: radial-gradient(125% 95% at 80% 28%, #000 0%, transparent 72%); mask-image: radial-gradient(125% 95% at 80% 28%, #000 0%, transparent 72%); } @media (prefers-contrast: more) { .mt-product-dualshore .mt-product-hero::before { opacity: 0.2; } } /* Waves "four ways" grid: centre the Waves card under the three classical types and let it pop — it is the answer the section builds to. */ .mt-silicones--four .mt-silicone--mid { grid-column: 2; transform: scale(1.08); border: 2px solid var(--wp--preset--color--teal, #1acdd8); box-shadow: 0 26px 52px -26px rgba(17, 137, 144, 0.55); position: relative; z-index: 1; } @media (max-width: 900px) { .mt-silicones--four .mt-silicone--mid { grid-column: auto; transform: none; } } /* 5-card feature rows (liner process, waves indications): ONE line on desktop (five equal columns); centred wrap only on narrow screens. */ .mt-features--center { display: flex; flex-wrap: wrap; justify-content: center; } .mt-features--center .mt-feature { flex: 0 1 210px; } @media (min-width: 920px) { .mt-features--center { flex-wrap: nowrap; } .mt-features--center .mt-feature { flex: 1 1 0; min-width: 0; } } /* Waves classical-types columns: row-by-row alignment (6-row structure). */ @supports (grid-template-rows: subgrid) { .mt-diff2--align6 { grid-template-rows: repeat(6, auto); } .mt-diff2--align6 .mt-diff { display: grid; grid-row: span 6; grid-template-rows: subgrid; align-items: start; } .mt-diff2--align6 .mt-diff figure { align-self: center; } } /* Demo Stand: model cards + order form (mirrors the live your-demo-stand). */ .mt-dsmodels { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: clamp(1.2rem, 3vw, 2.5rem); justify-content: center; margin-top: clamp(1.6rem, 3vw, 2.4rem); } @media (max-width: 760px) { .mt-dsmodels { grid-template-columns: minmax(0, 420px); } } .mt-dsmodel { position: relative; background: #fff; border: 1px solid var(--wp--preset--color--border, #d8f4f6); border-radius: 16px; padding: 1.1rem 1.1rem 1.3rem; text-align: left; } .mt-dsmodel__badge { position: absolute; top: 1.5rem; left: 1.5rem; z-index: 1; background: var(--wp--preset--color--navy-deep, #0a2c54); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; } .mt-dsmodel h3 { margin: 0.9rem 0 0.3rem; } .mt-dsmodel p { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-dsmodel__price { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; background: var(--wp--preset--color--navy-deep, #0a2c54); color: #fff !important; border-radius: 10px; padding: 0.65rem 0.9rem; } .mt-dsmodel__price strong { color: #fff; } .mt-dsmodel__price--alt { background: #fff; color: var(--wp--preset--color--navy, #0a2c54) !important; border: 1px solid var(--wp--preset--color--teal-dark, #118990); } .mt-dsmodel__price--alt strong { color: var(--wp--preset--color--teal-deep, #094448); } .mt-dsmodel__note { font-size: 0.82rem !important; } .mt-dsorder { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); max-width: 1000px; margin: 0 auto; align-items: start; } /* minmax(0,1fr), not 1fr: the stacked track must be able to shrink below the min-content of long German headings on narrow phones. */ @media (max-width: 860px) { .mt-dsorder { grid-template-columns: minmax(0, 1fr); } } .mt-dsorder > * { min-width: 0; } .mt-dsorder__form .mt-h2 { overflow-wrap: break-word; hyphens: auto; } .mt-dsorder__sub { color: rgba(255,255,255,0.8); margin: 0 0 1.2rem; } .mt-dsorder__form form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; } .mt-dsorder__form .mt-field--full { grid-column: 1 / -1; } .mt-dsorder__form label { display: block; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 0.3rem; color: rgba(255,255,255,0.85); } .mt-dsorder__form input, .mt-dsorder__form select, .mt-dsorder__form textarea { box-sizing: border-box; /* width:100% must include padding+border or the field overflows its column */ width: 100%; padding: 0.65rem 0.8rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.07); color: #fff; font: inherit; } /* Two form columns are too cramped on a phone (and were overflowing) — stack every field full-width on narrow screens. */ @media (max-width: 560px) { .mt-dsorder__form form { grid-template-columns: 1fr; } } .mt-dsorder__form select option { color: var(--wp--preset--color--navy-deep, #0a2c54); } .mt-dsorder__form input:focus-visible, .mt-dsorder__form select:focus-visible, .mt-dsorder__form textarea:focus-visible { outline: 2px solid var(--wp--preset--color--teal, #1acdd8); outline-offset: 1px; } .mt-dsorder__form .mt-field__note { grid-column: 1 / -1; color: rgba(255,255,255,0.6); font-size: 0.8rem; } .mt-dsorder__summary { background: #fff; border-radius: 14px; padding: 1.4rem; color: var(--wp--preset--color--navy-deep, #0a2c54); position: sticky; top: 90px; } .mt-dsorder__summary h3 { margin: 0 0 1rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; } .mt-dsorder__summary dl { margin: 0; } .mt-dsorder__summary dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px dotted var(--wp--preset--color--border, #d8f4f6); } .mt-dsorder__summary dt { color: var(--wp--preset--color--navy-mid, #475f7f); } .mt-dsorder__summary dd { margin: 0; font-weight: 700; } .mt-dsorder__total { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 0.4rem; } .mt-dsorder__total span { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .mt-dsorder__total strong { font-size: 1.7rem; } .mt-dsorder__note { font-size: 0.8rem; background: rgba(26,205,216,0.14); color: var(--wp--preset--color--teal-deep, #094448); border-radius: 6px; padding: 0.4rem 0.6rem; } .mt-dsorder__send { width: 100%; margin-top: 0.8rem; text-align: center; } /* Audience-aware closing CTA band: show the variant matching the toggle. */ .mt-cta-aud--pros { display: none; } html[data-audience="professional"] .mt-cta-aud--patients { display: none; } html[data-audience="professional"] .mt-cta-aud--pros { display: block; } /* ============ Motion (tasteful, progressive enhancement) ============ */ @media (prefers-reduced-motion: no-preference) { @supports ((animation-timeline: view()) and (animation-range: entry)) { @keyframes mt-rise { from { opacity: 0; transform: translateY(26px); } } .mt-reveal { animation: mt-rise auto linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; } } /* Smooth cross-document page navigation. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: mt-vt-out 0.26s ease both; } ::view-transition-new(root) { animation: mt-vt-in 0.32s ease both; } @keyframes mt-vt-out { to { opacity: 0; } } @keyframes mt-vt-in { from { opacity: 0; } } /* Hero: Ken Burns scale-in on the photo + staggered content entrance. Time-based (above the fold, so scroll-reveal wouldn't trigger). */ @keyframes mt-hero-zoom { from { transform: scale(1.14); } to { transform: scale(1); } } .mt-hero__bg { animation: mt-hero-zoom 1.7s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes mt-hero-in { from { opacity: 0; transform: translateY(22px); } } .mt-hero__inner > * { animation: mt-hero-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .mt-hero__inner > :nth-child(1) { animation-delay: 0.08s; } .mt-hero__inner > :nth-child(2) { animation-delay: 0.18s; } .mt-hero__inner > :nth-child(3) { animation-delay: 0.30s; } .mt-hero__inner > :nth-child(4) { animation-delay: 0.42s; } /* Image reveal variant: scale + fade as it scrolls in (juicier than rise). */ @supports ((animation-timeline: view()) and (animation-range: entry)) { @keyframes mt-zoom-in { from { opacity: 0; transform: scale(1.06); clip-path: inset(0 0 14% 0); } } .mt-reveal--img { animation: mt-zoom-in auto linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } /* Staggered fade-up for grids/lists (e.g. feature cards). */ @keyframes mt-rise-stagger { from { opacity: 0; transform: translateY(34px); } } .mt-reveal--stagger > * { animation: mt-rise-stagger auto linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; } } } /* ============ Apple-style big-type statement (scrollytelling) ============ */ .mt-statement { position: relative; min-height: 172vh; /* tall track; the headline pins + scales through it */ padding: 0 !important; overflow: clip; } .mt-statement__bg { position: absolute; inset: 0; background: radial-gradient(58% 48% at 50% 38%, rgba(60, 196, 214, 0.20), transparent 70%), radial-gradient(80% 60% at 50% 100%, rgba(10, 30, 60, 0.55), transparent 70%); pointer-events: none; } .mt-statement__inner { position: sticky; top: 0; min-height: 100vh; display: grid; place-content: center; align-content: center; text-align: center; padding: 8vh 1.25rem; gap: 0.6rem; } .mt-statement__kicker { margin: 0; font-family: var(--wp--preset--font-family--small); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--teal-light, #9fe9f0); } .mt-statement__title { margin: 0; font-family: var(--wp--preset--font-family--head, inherit); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; font-size: clamp(2.8rem, 9vw, 7.5rem); color: #fff; } .mt-statement__sub { margin: 0.4rem auto 0; max-width: 36ch; font-size: clamp(1.05rem, 2.2vw, 1.5rem); color: rgba(255, 255, 255, 0.82); } @media (prefers-reduced-motion: no-preference) { @supports ((animation-timeline: view()) and (animation-range: cover)) { .mt-statement { view-timeline: --mt-stmt block; } @keyframes mt-stmt-grow { from { opacity: 0.12; transform: scale(0.82) translateY(24px); } 40%, 100% { opacity: 1; transform: none; } } .mt-statement__title { animation: mt-stmt-grow auto linear both; animation-timeline: --mt-stmt; animation-range: cover 0% cover 60%; } @keyframes mt-stmt-sub { from { opacity: 0; transform: translateY(20px); } 55%, 100% { opacity: 1; transform: none; } } .mt-statement__sub { animation: mt-stmt-sub auto linear both; animation-timeline: --mt-stmt; animation-range: cover 8% cover 62%; } @keyframes mt-stmt-par { from { transform: translateY(-7%) scale(1.12); } to { transform: translateY(7%) scale(1.12); } } .mt-statement__bg { animation: mt-stmt-par auto linear both; animation-timeline: --mt-stmt; animation-range: cover 0% cover 100%; } } } /* ============ More Apple-style scroll moments ============ */ /* Big headline reveal: scale + rise (for flagship section titles). */ @media (prefers-reduced-motion: no-preference) { @supports ((animation-timeline: view()) and (animation-range: entry)) { @keyframes mt-rise-big { from { opacity: 0; transform: translateY(42px) scale(0.94); } } .mt-reveal--big { animation: mt-rise-big auto linear both; animation-timeline: view(); animation-range: entry 0% cover 36%; transform-origin: left center; } } } /* Section colour-transition: a soft tint glides in then out as the section passes through the viewport (behind the content, never affects legibility). */ .mt-tintscroll { position: relative; isolation: isolate; } .mt-tintscroll > * { position: relative; z-index: 1; } .mt-tintscroll::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(72% 60% at 50% 12%, rgba(60, 196, 214, 0.12), transparent 70%), radial-gradient(60% 50% at 80% 100%, rgba(18, 137, 144, 0.10), transparent 70%); opacity: 0; } @media (prefers-reduced-motion: no-preference) { @supports ((animation-timeline: view()) and (animation-range: cover)) { .mt-tintscroll { view-timeline: --mt-tint block; } @keyframes mt-tint { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .mt-tintscroll::before { animation: mt-tint auto linear both; animation-timeline: --mt-tint; animation-range: cover 0% cover 100%; } } } /* ============ Clinic finder ============ */ .mt-finder__controls { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: center; margin-bottom: 1.8rem; } .mt-finder__search { flex: 1 1 260px; min-width: 200px; padding: 0.75rem 1.1rem; border: 1px solid var(--wp--preset--color--border, #d8f4f6); border-radius: 999px; background: #fff; font: inherit; } .mt-finder__search:focus-visible { outline: 2px solid var(--wp--preset--color--teal, #3cc4d6); outline-offset: 1px; } .mt-finder__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .mt-finder__chip { border: 1px solid var(--wp--preset--color--border, #d8f4f6); background: #fff; color: var(--wp--preset--color--navy-mid, #475f7f); border-radius: 999px; padding: 0.45rem 0.95rem; font: inherit; font-size: 0.9rem; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .mt-finder__chip:hover { border-color: var(--wp--preset--color--teal, #3cc4d6); } .mt-finder__chip.is-active { background: var(--wp--preset--color--navy-deep, #05162a); color: #fff; border-color: transparent; } .mt-finder__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .mt-finder__item[hidden] { display: none; } .mt-finder__card { display: block; height: 100%; border: 1px solid var(--wp--preset--color--border, #d8f4f6); border-radius: 14px; padding: 1.4rem 1.5rem; text-decoration: none; color: inherit; background: #fff; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; } .mt-finder__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(5, 22, 42, 0.4); } .mt-finder__name { margin: 0 0 0.3rem; font-size: 1.15rem; } .mt-finder__meta { margin: 0 0 0.5rem; font-family: var(--wp--preset--font-family--small); font-size: 0.78rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--wp--preset--color--teal-deep, #094448); } .mt-finder__addr { margin: 0; color: var(--wp--preset--color--navy-mid, #475f7f); font-size: 0.95rem; line-height: 1.5; } .mt-finder__empty { color: var(--wp--preset--color--navy-mid, #475f7f); padding: 1.2rem 0; } /* =========================================================================== FAQ — JS tabs (faq.js) + native
accordions (Knowledge → Support). Tabs are underlined text tabs (matching the live faq-pros layout). The first tab/panel carries .is-active in markup, so content shows even without JS. KSES strips , so tabs are