/* * Movadly Light — theme.css * --------------------------------------------------------------------------- * The official Page Builder demonstration and starter theme. * * How this file is organised * 1. Tokens Foundation reads the platform --theme-* variables that * Theme Settings emits on , and names them once as * --fd-* so every rule below reads the same source. * 2. Base Typography, links, focus, media, reduced motion. * 3. Layout .fd-section (full-bleed background) and .fd-inner (the * measured content column the platform sizes). * 4. Components Buttons, eyebrow, headings, prose, cards, media, forms. * 5. Chrome Header and footer. * 6. Modules One block per section renderer, in registry order. * 7. RTL Direction-specific adjustments. * * Conventions * - Every rule sits inside [data-mv-theme-root="movadly-light"], so the * stylesheet can never style another theme or the builder interface. * - Class names use the fd- prefix and BEM-style __element / --modifier. * - Colours, fonts, radii, widths and spacing always come from tokens. The * only literal colours are the fallbacks inside var() and pure white text * on dark scheme sections. * - Width and vertical padding of a section belong to the platform layout * engine (data-vb-layout="2"). Templates mark their content column with * data-vb-inner and never size it themselves. * - Native CSS nesting is used for readability. Every supported browser * (evergreen Chrome, Edge, Firefox, Safari 17.2+) understands it. */ /* 1. Tokens ---------------------------------------------------------------- */ [data-mv-theme-root="movadly-light"] { --fd-bg: var(--theme-bg, #ffffff); --fd-surface: var(--theme-surface, #ffffff); --fd-surface-2: var(--theme-surface-2, #f6f6f4); --fd-surface-3: var(--theme-surface-3, #ededea); --fd-text: var(--theme-text, #1f2124); --fd-heading: var(--theme-heading, #111214); --fd-muted: var(--theme-text-muted, #5b5f66); --fd-line: var(--theme-border, #e4e4e0); --fd-line-2: var(--theme-border-2, #cfcfca); --fd-accent: var(--theme-accent, #a4502f); --fd-accent-ink: var(--theme-accent-ink, #ffffff); --fd-accent-soft: color-mix(in srgb, var(--fd-accent) 10%, var(--fd-bg)); /* Primary is the brand's main colour. The dark band (dark colour scheme sections, footer) is Theme Settings "Dark band", which follows primary until an editor sets it. */ --fd-primary: var(--theme-primary, #111214); --fd-dark: var(--theme-navy, var(--fd-primary)); /* Theme Settings "Dark band"; defaults to primary. */ --fd-accent-2: var(--theme-accent-2, var(--fd-accent)); /* Theme Settings "Secondary": eyebrows; defaults to accent. */ --fd-danger: #b42318; /* Form errors only. Not a Theme Settings colour. */ --fd-button-bg: var(--theme-button-bg, #111214); --fd-button-text: var(--theme-button-text, #ffffff); --fd-button-height: var(--theme-button-height, 48px); --fd-button-radius: var(--theme-button-radius, 999px); --fd-button-weight: var(--theme-button-weight, 600); --fd-font: var(--theme-font, "Inter", ui-sans-serif, system-ui, sans-serif); --fd-heading-font: var(--theme-heading-font, var(--fd-font)); --fd-heading-weight: var(--theme-heading-weight, 600); --fd-body-weight: var(--theme-body-weight, 400); --fd-base-size: var(--theme-base-font-size, 16px); --fd-radius: var(--theme-radius, 8px); --fd-radius-sm: var(--theme-radius-sm, 6px); --fd-radius-image: var(--theme-image-radius, 8px); --fd-radius-pill: var(--theme-radius-pill, 999px); --fd-narrow: var(--theme-narrow-width, 760px); --fd-gradient: var(--theme-gradient, linear-gradient(90deg, #a4502f, #c9774c, #e0a57c)); --fd-ease: var(--theme-ease, cubic-bezier(.2, .8, .2, 1)); /* Small interface transitions (hover, icon turns) follow Theme Settings > Animation speed: 0.4 x the default 500ms is 200ms. */ --fd-motion-fast: calc(var(--theme-animation-duration, 500ms) * 0.4); --fd-page-width: var(--theme-page-width-canonical, var(--theme-page-width, 1240px)); --fd-gutter: var(--theme-side-spacing, 24px); --fd-section-space: var(--theme-section-spacing, 72px); /* Foundation never redeclares it, so this is the Theme Settings value. */ --fd-gap: clamp(16px, 2.4vw, 32px); --fd-focus: 0 0 0 2px var(--fd-bg), 0 0 0 4px var(--fd-accent); --fd-shadow: 0 1px 2px color-mix(in srgb, var(--fd-heading) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--fd-heading) 6%, transparent); /* Type scale. Body sizes follow Theme Settings > Base font size; headings follow Heading scale (1.15 is the Foundation default, so the default scale is 1). */ --fd-heading-scale: calc(var(--theme-heading-scale, 1.15) / 1.15); --fd-text-2xs: calc(var(--fd-base-size) * 0.75); --fd-text-xs: calc(var(--fd-base-size) * 0.8125); --fd-text-sm: calc(var(--fd-base-size) * 0.875); --fd-text-md: calc(var(--fd-base-size) * 0.9375); --fd-text-base: var(--fd-base-size); --fd-text-lg: calc(var(--fd-base-size) * 1.125); --fd-text-xl: calc(var(--fd-base-size) * 1.25); --fd-h-small: calc(clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem) * var(--fd-heading-scale)); --fd-h-medium: calc(clamp(1.5rem, 1.25rem + 1vw, 2rem) * var(--fd-heading-scale)); --fd-h-large: calc(clamp(1.875rem, 1.45rem + 1.7vw, 2.75rem) * var(--fd-heading-scale)); --fd-h-extra-large: calc(clamp(2.125rem, 1.6rem + 2.3vw, 3.25rem) * var(--fd-heading-scale)); --fd-h-mega: calc(clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem) * var(--fd-heading-scale)); --fd-h-card: calc(1.1875rem * var(--fd-heading-scale)); /* Card surfaces follow Theme Settings > Card style (data-card-style on ). */ --fd-card-bg: var(--fd-surface); --fd-card-border: var(--fd-line); --fd-card-shadow: none; /* The header height is read by sticky headers and anchor offsets. */ --fd-header-height: 72px; background: var(--fd-bg); color: var(--fd-text); font-family: var(--fd-font); font-size: var(--fd-base-size); font-weight: var(--fd-body-weight); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* 1b. Theme Settings treatments ------------------------------------------- */ /* Card style, button style, button hover and scroll animation are page-wide choices. The layout writes them on (the same element as the theme root). */ [data-mv-theme-root="movadly-light"][data-card-style="flat"] { --fd-card-bg: var(--fd-surface-2); --fd-card-border: transparent; } [data-mv-theme-root="movadly-light"][data-card-style="bordered"] { --fd-card-bg: var(--fd-bg); --fd-card-border: var(--fd-line-2); } [data-mv-theme-root="movadly-light"][data-card-style="shadow"] { --fd-card-bg: var(--fd-surface); --fd-card-border: transparent; --fd-card-shadow: var(--fd-shadow); } [data-mv-theme-root="movadly-light"][data-button-style="outline"] { & .fd-button--primary { border-color: var(--fd-button-bg); background: transparent; color: var(--fd-button-bg); } & .fd-scheme-dark .fd-button--primary { border-color: currentColor; color: #ffffff; } } [data-mv-theme-root="movadly-light"][data-button-style="minimal"] { & .fd-button--primary { min-height: 0; padding-inline: 0; border-color: transparent; background: none; color: var(--fd-button-bg); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } & .fd-scheme-dark .fd-button--primary { color: #ffffff; } } @media (hover: hover) { [data-mv-theme-root="movadly-light"][data-button-hover="lift"] :is(a, button).fd-button:not(.fd-button--inert):hover { transform: translateY(-1px); box-shadow: var(--fd-shadow); } [data-mv-theme-root="movadly-light"][data-button-hover="fade"] :is(a, button).fd-button:not(.fd-button--inert):hover { opacity: 0.82; } [data-mv-theme-root="movadly-light"][data-button-hover="none"] :is(a, button).fd-button:hover { transform: none; } } /* Scroll animation. Sections start visible; the theme runtime marks the page ready before hiding anything, so content never disappears when JavaScript is off, and reduced-motion visitors are never animated. */ @media (prefers-reduced-motion: no-preference) { [data-mv-theme-root="movadly-light"][data-animation][data-fd-reveal-ready] main .fd-section:not(.is-revealed) { opacity: 0; } [data-mv-theme-root="movadly-light"][data-animation="fade-up"][data-fd-reveal-ready] main .fd-section:not(.is-revealed) { transform: translateY(var(--fd-reveal-distance, 16px)); } [data-mv-theme-root="movadly-light"][data-animation="slide-up"][data-fd-reveal-ready] main .fd-section:not(.is-revealed) { transform: translateY(var(--fd-reveal-distance, 40px)); } [data-mv-theme-root="movadly-light"][data-animation][data-fd-reveal-ready] main .fd-section { transition: opacity var(--fd-reveal-duration, 0.45s) var(--fd-ease), transform var(--fd-reveal-duration, 0.45s) var(--fd-ease); } [data-mv-theme-root="movadly-light"][data-animation-speed="normal"] { --fd-reveal-duration: 0.7s; } [data-mv-theme-root="movadly-light"][data-animation-speed="slow"] { --fd-reveal-duration: 1.1s; } } /* 2. Base ------------------------------------------------------------------ */ [data-mv-theme-root="movadly-light"] { & :where(h1, h2, h3, h4, h5, h6) { margin: 0; color: var(--fd-heading); font-family: var(--fd-heading-font); font-weight: var(--fd-heading-weight); line-height: 1.15; letter-spacing: -0.015em; text-transform: var(--theme-heading-transform, none); text-wrap: balance; } /* * The platform stylesheet (movadly-frontend.css) sizes and colours bare p, li and * h1 to h3 elements. Foundation owns its typography, so these inherit from the * component around them instead. */ & :where(p, li) { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } & :where(h1, h2, h3) { max-width: none; } & :where(a) { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; } & :where(img, svg, video) { max-width: 100%; } & :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--fd-focus); border-radius: var(--fd-radius-sm); } & .fd-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } & .fd-icon { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.2em; } & mark.fd-highlight { background: none; color: var(--fd-accent); } } @media (prefers-reduced-motion: reduce) { [data-mv-theme-root="movadly-light"] *, [data-mv-theme-root="movadly-light"] *::before, [data-mv-theme-root="movadly-light"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* 3. Layout ---------------------------------------------------------------- */ [data-mv-theme-root="movadly-light"] { /* * .fd-section is the module root. It owns the background and is full-bleed. * On layout engine v2 the platform sets its vertical padding from the * module's "Section padding" controls; the value below is the v1 fallback. */ & .fd-section { position: relative; box-sizing: border-box; padding-block: var(--fd-section-space); background: var(--fd-section-bg, transparent); color: var(--fd-text); } /* * .fd-inner is the content column. On v2 the platform sizes it from Page * Width, Side spacing and the module's Container control (Fixed / Full). * These declarations are the v1 fallback and match the v2 result. */ & .fd-inner { box-sizing: border-box; width: 100%; max-width: var(--fd-page-width); margin-inline: auto; padding-inline: var(--fd-gutter); } & .fd-stack { display: grid; gap: var(--fd-stack-gap, 24px); } /* Colour schemes. The four values every color_scheme select offers. */ & .fd-scheme-default { --fd-section-bg: var(--fd-bg); } & .fd-scheme-light { --fd-section-bg: var(--fd-surface-2); } & .fd-scheme-transparent { --fd-section-bg: transparent; } & .fd-scheme-dark { --fd-section-bg: var(--fd-dark); /* Components use the page background as their "plain" surface (bordered panels, white inputs); inside a dark band that surface is the band itself. */ --fd-bg: var(--fd-dark); --fd-text: rgb(255 255 255 / .86); --fd-heading: #ffffff; --fd-muted: rgb(255 255 255 / .68); --fd-line: rgb(255 255 255 / .16); --fd-line-2: rgb(255 255 255 / .32); --fd-surface: rgb(255 255 255 / .04); --fd-surface-2: rgb(255 255 255 / .07); --fd-accent: color-mix(in srgb, var(--theme-accent, #a4502f) 55%, #ffffff); --fd-accent-soft: rgb(255 255 255 / .08); /* Contrast rule, kept on purpose: on the dark band the primary button is inverted (white on the primary colour), whatever Theme Settings sets for buttons on light sections, so it can never disappear into the band. */ --fd-button-bg: #ffffff; --fd-button-text: var(--fd-dark); --fd-focus: 0 0 0 2px var(--fd-dark), 0 0 0 4px #ffffff; color: var(--fd-text); } /* Card surfaces inside a dark band. The page root resolved --fd-card-bg from the light surface, and a custom property is inherited already resolved, so without this every card (and card-like row) in a dark section stayed white while its text turned white. */ & .fd-scheme-dark { --fd-card-bg: var(--fd-surface); --fd-card-border: var(--fd-line); } &[data-card-style="flat"] .fd-scheme-dark { --fd-card-bg: var(--fd-surface-2); --fd-card-border: transparent; } &[data-card-style="bordered"] .fd-scheme-dark { --fd-card-bg: transparent; --fd-card-border: var(--fd-line-2); } &[data-card-style="shadow"] .fd-scheme-dark { --fd-card-bg: var(--fd-surface-2); --fd-card-border: transparent; } /* Responsive grid driven by three custom properties set per instance. */ & .fd-grid { display: grid; grid-template-columns: repeat(var(--fd-cols, 3), minmax(0, 1fr)); gap: var(--fd-grid-gap, var(--fd-gap)); } @media (max-width: 989px) { & .fd-grid { grid-template-columns: repeat(var(--fd-cols-tablet, min(var(--fd-cols, 3), 2)), minmax(0, 1fr)); } } @media (max-width: 599px) { & .fd-grid { grid-template-columns: repeat(var(--fd-cols-mobile, 1), minmax(0, 1fr)); } } /* Horizontal scroll track used by carousels and swipe-on-mobile options. */ & .fd-track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--fd-track-item, calc((100% - (var(--fd-cols, 3) - 1) * var(--fd-gap)) / var(--fd-cols, 3))); gap: var(--fd-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; & > * { scroll-snap-align: start; } } @media (max-width: 599px) { & .fd-track { --fd-track-item: 82%; } } } /* 4. Components ------------------------------------------------------------ */ [data-mv-theme-root="movadly-light"] { /* Section introduction */ & .fd-intro { display: grid; gap: 12px; max-width: var(--fd-narrow); margin-bottom: clamp(28px, 4vw, 48px); } & .fd-intro--center { margin-inline: auto; text-align: center; justify-items: center; } & .fd-intro--right { margin-inline-start: auto; text-align: end; justify-items: end; } & .fd-intro:last-child { margin-bottom: 0; } & .fd-eyebrow { color: var(--fd-accent-2); font-size: var(--fd-text-xs); font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; } & .fd-heading--small { font-size: var(--fd-h-small); } & .fd-heading--medium { font-size: var(--fd-h-medium); } & .fd-heading--large { font-size: var(--fd-h-large); } & .fd-heading--extra_large { font-size: var(--fd-h-extra-large); } & .fd-heading--mega { font-size: var(--fd-h-mega); letter-spacing: -0.025em; } & .fd-lead { color: var(--fd-muted); font-size: var(--fd-text-lg); } & .fd-muted { color: var(--fd-muted); } /* Prose: output of MovadlyRichText (paragraphs, lists, headings, links). */ & .fd-prose { display: grid; gap: 0.85em; color: var(--fd-muted); & :where(h2, h3, h4) { margin-top: 0.6em; color: var(--fd-heading); } & h2 { font-size: calc(1.5rem * var(--fd-heading-scale)); } & h3 { font-size: calc(1.25rem * var(--fd-heading-scale)); } & :where(ul, ol) { display: grid; gap: 0.35em; margin: 0; padding-inline-start: 1.25em; } & strong { color: var(--fd-heading); font-weight: 600; } & a { color: var(--fd-accent); } } /* Buttons */ & .fd-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } & .fd-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: var(--fd-button-height); padding: 0 1.4em; border: 1px solid transparent; border-radius: var(--fd-button-radius); font: inherit; font-size: var(--fd-text-md); font-weight: var(--fd-button-weight); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--fd-motion-fast) var(--fd-ease), color var(--fd-motion-fast) var(--fd-ease), border-color var(--fd-motion-fast) var(--fd-ease), transform var(--fd-motion-fast) var(--fd-ease), box-shadow var(--fd-motion-fast) var(--fd-ease), opacity var(--fd-motion-fast) var(--fd-ease); } & .fd-button--small { min-height: calc(var(--fd-button-height) - 8px); padding-inline: 1.1em; font-size: var(--fd-text-sm); } & .fd-button--large { min-height: calc(var(--fd-button-height) + 8px); padding-inline: 1.8em; font-size: var(--fd-text-base); } & .fd-button--primary { background: var(--fd-button-bg); color: var(--fd-button-text); } & .fd-button--primary:hover { background: color-mix(in srgb, var(--fd-button-bg) 86%, var(--fd-accent)); } & .fd-button--secondary { background: var(--fd-accent); color: var(--fd-accent-ink); } & .fd-scheme-dark .fd-button--secondary { color: var(--fd-accent-ink); } & .fd-button--secondary:hover { background: color-mix(in srgb, var(--fd-accent) 88%, var(--fd-heading)); } & .fd-button--outline { border-color: var(--fd-line-2); background: transparent; color: var(--fd-heading); } & .fd-button--outline:hover { border-color: var(--fd-heading); } & .fd-button--underline { min-height: 0; padding: 0.25em 0; border-radius: 0; background: none; color: var(--fd-heading); text-decoration: underline; text-decoration-color: var(--fd-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; } & .fd-button--icon_button { padding-inline: 1.1em 0.9em; border-color: var(--fd-line-2); background: var(--fd-surface); color: var(--fd-heading); & .fd-icon { width: 1.1em; height: 1.1em; color: var(--fd-accent); } } & .fd-button--inert { cursor: default; opacity: 0.72; } /* Text link with arrow, used inside cards */ & .fd-link { display: inline-flex; align-items: center; gap: 0.4em; color: var(--fd-heading); font-weight: 600; text-decoration: none; & .fd-icon { color: var(--fd-accent); transition: transform var(--fd-motion-fast) var(--fd-ease); } &:hover .fd-icon { transform: translateX(3px); } } /* Card */ & .fd-card { display: grid; align-content: start; gap: 12px; min-width: 0; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--fd-card-border); border-radius: var(--fd-radius); background: var(--fd-card-bg); box-shadow: var(--fd-card-shadow); color: var(--fd-text); } & .fd-card--plain { padding: 0; border: 0; background: none; } & .fd-card__title { font-size: var(--fd-h-card); line-height: 1.3; } /* Media frame with ratio modifiers used by every module that shows an image. */ & .fd-media { position: relative; overflow: hidden; margin: 0; border-radius: var(--fd-radius-image); background: var(--fd-surface-2); & img, & video, & iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; } } & .fd-media--landscape { aspect-ratio: 4 / 3; } & .fd-media--wide { aspect-ratio: 16 / 9; } & .fd-media--square { aspect-ratio: 1 / 1; } & .fd-media--portrait { aspect-ratio: 4 / 5; } & .fd-media--auto { aspect-ratio: auto; } & .fd-media--auto img { height: auto; } /* Icon chip used by feature cards, columns and contact details */ & .fd-icon-chip { display: inline-grid; width: 44px; height: 44px; place-items: center; border-radius: var(--fd-radius); background: var(--fd-accent-soft); color: var(--fd-accent); & .fd-icon { width: 22px; height: 22px; } } /* Badge */ & .fd-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 10px; border: 1px solid var(--fd-line); border-radius: var(--fd-radius-pill); background: var(--fd-surface); color: var(--fd-heading); font-size: var(--fd-text-xs); font-weight: 600; line-height: 1.4; } & .fd-badge--accent { border-color: transparent; background: var(--fd-accent); color: var(--fd-accent-ink); } /* Forms */ & .fd-field { display: grid; gap: 6px; min-width: 0; } & .fd-label { color: var(--fd-heading); font-size: var(--fd-text-sm); font-weight: 600; } & .fd-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--fd-line-2); border-radius: var(--fd-radius-sm); background: var(--fd-bg); color: var(--fd-heading); font: inherit; } & textarea.fd-input { min-height: 140px; resize: vertical; } & .fd-input::placeholder { color: var(--fd-muted); opacity: 1; } & .fd-input:focus-visible { border-color: var(--fd-accent); } & .fd-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--fd-line); border-inline-start: 3px solid var(--fd-accent); border-radius: var(--fd-radius-sm); background: var(--fd-surface-2); color: var(--fd-text); font-size: var(--fd-text-sm); } /* Slider controls shared by slideshow, testimonials and sector slides */ & .fd-control { display: inline-grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid var(--fd-line-2); border-radius: var(--fd-radius-pill); background: var(--fd-surface); color: var(--fd-heading); cursor: pointer; } & .fd-control:hover { border-color: var(--fd-heading); } & .fd-dots { display: flex; gap: 8px; align-items: center; margin: 0; padding: 0; list-style: none; } & .fd-dot { width: 10px; height: 10px; padding: 0; border: 1px solid currentColor; border-radius: var(--fd-radius-pill); background: transparent; color: inherit; cursor: pointer; opacity: 0.6; } & .fd-dot[aria-current="true"] { width: 24px; background: currentColor; opacity: 1; } } /* Shared text helpers used by several modules ------------------------------ */ [data-mv-theme-root="movadly-light"] { & .fd-intro--flush { margin-bottom: 0; } & .fd-text--small { font-size: var(--fd-text-sm); } & .fd-text--base { font-size: var(--fd-text-base); } & .fd-text--medium { font-size: var(--fd-text-lg); } & .fd-text--large { font-size: var(--fd-text-xl); } & .fd-prose--strong { color: var(--fd-text); } & .fd-lines--2, & .fd-lines--3, & .fd-lines--4 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; } & .fd-lines--2 { -webkit-line-clamp: 2; } & .fd-lines--3 { -webkit-line-clamp: 3; } & .fd-lines--4 { -webkit-line-clamp: 4; } & .fd-highlight--underline mark.fd-highlight { color: inherit; text-decoration: underline; text-decoration-color: var(--fd-accent); text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; } & .fd-highlight--mark mark.fd-highlight { padding-inline: 0.12em; border-radius: 0.12em; background: var(--fd-accent-soft); color: inherit; } & .fd-highlight--italic mark.fd-highlight { font-style: italic; } & .fd-mark--underline { text-decoration: underline; text-underline-offset: 4px; } & .fd-bullet { display: flex; gap: 10px; align-items: flex-start; color: var(--fd-text); & .fd-bullet__icon { display: inline-grid; flex: none; width: 24px; height: 24px; place-items: center; border-radius: var(--fd-radius-pill); background: var(--fd-accent-soft); color: var(--fd-accent); } & .fd-icon { width: 15px; height: 15px; } } & .fd-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* The platform page breadcrumb shown above non-home pages. The platform stylesheet tints it and draws a rule underneath; the theme keeps it plain so the first section starts the page. */ & .site-breadcrumbs { padding-block: 16px 0; border: 0; background: none; color: var(--fd-muted); font-size: var(--fd-text-sm); & a { color: var(--fd-muted); text-decoration: none; } & a:hover { color: var(--fd-heading); text-decoration: underline; } & [aria-current="page"] { color: var(--fd-heading); } } } /* 4.9 Card body slot (movadly-light override) ------------------------------ * Movadly Light replaces the card-grid card body: the title leads, the eyebrow follows it as a * caption, and a rule separates the copy. Only the pieces that version introduces are styled * here; everything around the card still comes from the module's own rules above. */ [data-mv-theme-root="movadly-light"] { & .fd-cards__body[data-slot-owner="movadly-light"] { & .fd-eyebrow--caption { margin-block-start: 4px; color: var(--fd-muted); font-size: var(--fd-text-xs); letter-spacing: 0.02em; text-transform: none; } & .fd-card__rule { width: 32px; margin-block: 14px 12px; margin-inline: 0; border: 0; border-block-start: 2px solid var(--fd-accent); } } } /* 5. Chrome ---------------------------------------------------------------- */ /* 5.1 Header Menu (header) — renderer header, public slot chrome/header * * Settings reach this block as custom properties on .fd-header (all optional; an unset * one keeps the Foundation design): * --fd-logo-width / --fd-mobile-logo-width Theme Settings logo widths (exact width) * --fd-nav-font, -size, -weight, -line-height, -letter-spacing, -transform * --fd-nav-color, -hover, -active, -indicator, --fd-nav-gap (navigation_* settings) * --fd-mega-link-columns, --fd-mega-card-columns, --fd-mega-links-share, * --fd-mega-cards-share, --fd-mega-list-width (nav_link mega geometry) * --softc-logo-width / --softc-mobile-logo-width are written on by the builder * preview bridge while the header chrome panel's logo width is being edited. */ [data-mv-theme-root="movadly-light"] { & .fd-skip-link { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 200; padding: 10px 16px; border-radius: var(--fd-radius-sm); background: var(--fd-heading); color: var(--fd-bg); font-weight: var(--fd-button-weight); text-decoration: none; } & .fd-skip-link:focus-visible { top: 12px; } & .fd-header { position: relative; z-index: 100; background: var(--fd-section-bg); color: var(--fd-heading); } & .fd-header.fd-scheme-default { --fd-section-bg: var(--fd-bg); } & .fd-header[data-border="true"] { border-bottom: 1px solid var(--fd-line); } & .fd-header[data-sticky="true"] { position: sticky; top: 0; } & .fd-header__inner { display: flex; box-sizing: border-box; align-items: center; gap: clamp(16px, 2.5vw, 40px); width: 100%; max-width: var(--fd-page-width); min-height: var(--fd-header-height); margin-inline: auto; padding-inline: var(--fd-gutter); } & .fd-header[data-container="full_width"] .fd-header__inner { max-width: none; } & .fd-header__brand { display: inline-flex; flex: none; align-items: center; gap: 10px; color: var(--fd-heading); font-family: var(--fd-heading-font); font-size: var(--fd-text-lg); font-weight: var(--fd-heading-weight); letter-spacing: -0.01em; text-decoration: none; } & .fd-header__name[hidden] { display: none !important; } /* The logo width setting is the rendered width. No height cap: a cap would shrink a tall logo below the width the site chose. */ & .fd-header__logo { display: block; width: var(--softc-logo-width, var(--fd-logo-width, 150px)); max-width: none; height: auto; object-fit: contain; } & .fd-header__logo--mobile { display: none; width: var(--softc-mobile-logo-width, var(--fd-mobile-logo-width, 120px)); max-width: calc(100vw - 2 * var(--fd-gutter) - 64px); } & .fd-header__nav { flex: 1 1 auto; min-width: 0; } & .fd-header__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--fd-nav-gap, clamp(12px, 1.6vw, 28px)); margin: 0; padding: 0; list-style: none; } & .fd-header[data-menu-align="center"] .fd-header__list { justify-content: center; } & .fd-header[data-menu-align="right"] .fd-header__list { justify-content: flex-end; } /* Logo centred: menu on the left, actions on the right, logo in the middle. */ & .fd-header[data-logo-position="center"] .fd-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; } & .fd-header[data-logo-position="center"] .fd-header__brand { grid-column: 2; grid-row: 1; } & .fd-header[data-logo-position="center"] .fd-header__nav { grid-column: 1; grid-row: 1; } & .fd-header[data-logo-position="center"] .fd-header__list { justify-content: flex-start; } & .fd-header[data-logo-position="center"] .fd-header__actions { grid-column: 3; grid-row: 1; justify-self: end; } /* Navigation typography: navigation_* overrides, else the Foundation design. An explicit navigation font weight wins over the link style's weight. */ & .fd-header__link, & .fd-header .fd-header__nav .mvb-mega__trigger { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--fd-nav-color, var(--fd-heading)); font: inherit; font-family: var(--fd-nav-font, var(--fd-font)); font-size: var(--fd-nav-size, var(--fd-text-md)); font-weight: var(--fd-nav-weight, var(--fd-body-weight)); line-height: var(--fd-nav-line-height, inherit); letter-spacing: var(--fd-nav-letter-spacing, normal); text-transform: var(--fd-nav-transform, none); text-decoration: none; cursor: pointer; } & .fd-header__link .fd-icon { width: 16px; height: 16px; transition: transform var(--fd-motion-fast) var(--fd-ease); } & .fd-header[data-link-style="bold"] :is(.fd-header__link, .fd-header__nav .mvb-mega__trigger) { font-weight: var(--fd-nav-weight, 600); } & .fd-header[data-link-style="plain"] :is(.fd-header__link, .fd-header__nav .mvb-mega__trigger) { font-weight: var(--fd-nav-weight, 400); } & .fd-header[data-link-style="underline_hover"] .fd-header__link:hover, & .fd-header__link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--fd-nav-indicator, var(--fd-accent)); text-decoration-thickness: 2px; text-underline-offset: 8px; } /* Active: the current page and an open dropdown / nested mega trigger. */ & .fd-header__link[aria-current="page"], & .fd-dropdown[data-open="true"] > .fd-dropdown__trigger, & .fd-header .fd-header__nav .mvb-mega__trigger[aria-expanded="true"] { color: var(--fd-nav-active, var(--fd-nav-color, var(--fd-heading))); } /* Hover wins over active while the pointer is on the item: a hover-opened dropdown is always "open", so otherwise its hover colour never shows. */ & a.fd-header__link:hover, & .fd-dropdown > .fd-dropdown__trigger:hover, & .fd-header .fd-header__nav .mvb-mega__trigger:hover { color: var(--fd-nav-hover, var(--fd-accent)); } & .fd-dropdown__indicator, & .fd-header .mvb-mega__trigger svg { color: var(--fd-nav-indicator, currentColor); } & .fd-header__actions { display: flex; flex: none; align-items: center; gap: 12px; } /* Contact buttons (Phone, WhatsApp): round icon buttons in the button colours, before the CTA. On phones the pair sits beside the menu button instead. */ & .fd-header__contact { display: flex; align-items: center; gap: 8px; } & .fd-header__contact-link { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--fd-radius-pill); background: var(--fd-button-bg); color: var(--fd-button-text); text-decoration: none; transition: opacity var(--fd-motion-fast) var(--fd-ease), transform var(--fd-motion-fast) var(--fd-ease); & .fd-icon { width: 20px; height: 20px; } } & .fd-header__contact-link:hover { opacity: .86; transform: translateY(-1px); } & .fd-header__contact-link:focus-visible { outline: none; box-shadow: var(--fd-focus); } & .fd-header__contact--mobile { display: none; } & .fd-header__toggle { display: none; width: 44px; height: 44px; place-items: center; margin-inline-start: auto; padding: 0; border: 1px solid var(--fd-line); border-radius: var(--fd-radius-sm); background: var(--fd-surface); color: var(--fd-heading); cursor: pointer; & .fd-icon { width: 22px; height: 22px; } } & .fd-header__toggle-close { display: none; } & .fd-header.is-open .fd-header__toggle-open { display: none; } & .fd-header.is-open .fd-header__toggle-close { display: inline-block; } /* Dropdowns and banner / card mega menus (runtime: data-open="true") */ & .fd-dropdown { position: relative; } & .fd-dropdown__panel { position: absolute; top: calc(100% + 8px); inset-inline-start: -16px; z-index: 120; display: none; min-width: 240px; padding: 8px; border: 1px solid var(--fd-line); border-radius: var(--fd-radius); background: var(--fd-bg); box-shadow: var(--fd-shadow); } & .fd-dropdown[data-open="true"] > .fd-dropdown__panel, & .fd-dropdown[data-open-on="hover"]:hover > .fd-dropdown__panel, & .fd-dropdown:not([data-header-dropdown-bound="true"]):focus-within > .fd-dropdown__panel { display: grid; } & .fd-dropdown[data-open="true"] .fd-dropdown__trigger .fd-icon { transform: rotate(180deg); } /* Mega panels. Cards: sub-items (if any) beside the cards, split by Cards width. Menu columns: the panel is List width % of the page width. A mega panel hangs from the header's content row (not from its menu item), aligned with the menu: to the end edge for a right-aligned menu, the start edge for a left-aligned one (or a centred logo), centred for a centred menu. So a wide panel never runs off the screen. */ & .fd-header__inner { position: relative; } & .fd-dropdown:has(> .fd-dropdown__panel--mega) { position: static; } & .fd-dropdown__panel--mega { top: 100%; inset-inline: auto var(--fd-gutter); } & .fd-header:is([data-menu-align="left"], [data-logo-position="center"]) .fd-dropdown__panel--mega { inset-inline: var(--fd-gutter) auto; } & .fd-header[data-menu-align="center"]:not([data-logo-position="center"]) .fd-dropdown__panel--mega { inset-inline: 0; margin-inline: auto; } & .fd-dropdown__panel--mega { box-sizing: border-box; width: min(var(--fd-narrow), calc(100% - 2 * var(--fd-gutter))); grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; padding: 20px; } & .fd-dropdown__panel--mega[data-split="true"] { width: min(calc(var(--fd-narrow) * 1.4), calc(100% - 2 * var(--fd-gutter))); grid-template-columns: minmax(0, var(--fd-mega-links-share, 62fr)) minmax(0, var(--fd-mega-cards-share, 38fr)); } & .fd-dropdown__panel--menu_columns { width: min(max(240px, calc(var(--fd-page-width) * var(--fd-mega-list-width, 38) / 100)), calc(100% - 2 * var(--fd-gutter))); } & .fd-dropdown__intro { display: grid; grid-column: 1 / -1; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--fd-line); } & .fd-dropdown__heading { color: var(--fd-heading); font-size: var(--fd-text-base); font-weight: var(--fd-heading-weight); } & .fd-dropdown__heading[data-size="small"] { font-size: var(--fd-text-md); } & .fd-dropdown__heading[data-size="large"] { font-size: var(--fd-text-xl); } & .fd-dropdown__heading[data-size="extra_large"] { font-family: var(--fd-heading-font); font-size: var(--fd-h-small); line-height: 1.25; } & .fd-dropdown__links { display: grid; grid-template-columns: repeat(var(--fd-mega-link-columns, 1), minmax(0, 1fr)); align-content: start; gap: 2px 12px; } & .fd-dropdown__cards { display: grid; grid-template-columns: repeat(var(--fd-mega-card-columns, 3), minmax(0, 1fr)); align-items: start; gap: 16px; } & .fd-dropdown__link { display: block; padding: 8px 12px; border-radius: var(--fd-radius-sm); color: var(--fd-heading); text-decoration: none; } & a.fd-dropdown__link:hover, & .fd-dropdown__link[aria-current="page"] { background: var(--fd-surface-2); } & .fd-dropdown__card { display: grid; align-content: start; gap: 8px; color: var(--fd-heading); font-size: var(--fd-text-md); text-decoration: none; & .fd-media { border-radius: var(--fd-radius-sm); } } & a.fd-dropdown__card:hover .fd-dropdown__card-title { color: var(--fd-accent); } & .fd-dropdown__card-title { font-size: var(--fd-text-md); font-weight: var(--fd-heading-weight); } & .fd-dropdown__card-title[data-size="small"] { font-size: var(--fd-text-sm); } & .fd-dropdown__card-title[data-size="large"] { font-size: var(--fd-text-lg); } & .fd-dropdown__card-title[data-size="extra_large"] { font-size: var(--fd-text-xl); } /* Mobile panel */ & .fd-header__mobile { border-top: 1px solid var(--fd-line); background: var(--fd-section-bg); } & .fd-header__mobile[hidden] { display: none !important; } & .fd-header__mobile > nav { display: grid; padding: 8px var(--fd-gutter); } & .fd-header__mobile-link, & .fd-header__group > summary, & .fd-header__mobile .mvb-mega__trigger { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--fd-line); color: var(--fd-nav-color, var(--fd-heading)); font-family: var(--fd-nav-font, var(--fd-font)); font-size: var(--fd-nav-size, calc(var(--fd-base-size) * 1.0625)); font-weight: var(--fd-nav-weight, 600); line-height: var(--fd-nav-line-height, inherit); letter-spacing: var(--fd-nav-letter-spacing, normal); text-transform: var(--fd-nav-transform, none); text-decoration: none; list-style: none; cursor: pointer; } & a.fd-header__mobile-link:hover, & .fd-header__group > summary:hover { color: var(--fd-nav-hover, var(--fd-accent)); } & .fd-header__mobile-link[aria-current="page"], & .fd-header__group[open] > summary { color: var(--fd-nav-active, var(--fd-nav-color, var(--fd-heading))); } & .fd-header__group > summary::-webkit-details-marker { display: none; } & .fd-header__group[open] > summary .fd-icon { transform: rotate(180deg); } & .fd-header__group [data-header-mobile-dropdown-panel] { display: grid; padding: 4px 0 12px; } & .fd-header__group [data-header-mobile-dropdown-panel][hidden] { display: none !important; } & .fd-header__group [data-header-mobile-dropdown-panel] :is(a, span) { padding: 10px 12px; color: var(--fd-text); text-decoration: none; } & .fd-header__mobile-cta { padding: 16px var(--fd-gutter) 24px; } & .fd-header__mobile-cta .fd-button { width: 100%; } @media (max-width: 989px) { & .fd-header { --fd-header-height: 64px; } & .fd-header__nav, & .fd-header__actions { display: none; } & .fd-header__toggle { display: inline-grid; } & .fd-header__contact--mobile { display: flex; margin-inline-start: auto; gap: 6px; } & .fd-header__contact--mobile .fd-header__contact-link { width: 38px; height: 38px; } & .fd-header__contact--mobile + .fd-header__toggle { margin-inline-start: 6px; } & .fd-header .fd-header__inner, & .fd-header[data-logo-position="center"] .fd-header__inner { display: flex; min-height: var(--fd-header-height); } & .fd-header[data-mobile-logo-position="center"] .fd-header__brand { position: absolute; inset-inline-start: 50%; transform: translateX(-50%); } & .fd-header[data-mobile-toggle-position="left"] .fd-header__toggle { order: -1; margin-inline: 0 auto; } & .fd-header[data-mobile-toggle-position="left"][data-mobile-logo-position="left"] .fd-header__brand { margin-inline-end: auto; } & .fd-header[data-mobile-cta="false"] .fd-header__mobile-cta { display: none; } & .fd-header__logo--desktop { display: none; } & .fd-header__logo--mobile { display: block; } /* Drawer style: the panel slides over the page from the inline end. */ & .fd-header[data-mobile-style="drawer"] .fd-header__mobile { position: fixed; inset-block: var(--fd-header-height) 0; inset-inline-end: 0; width: min(360px, 88vw); overflow-y: auto; border-top: 0; border-inline-start: 1px solid var(--fd-line); box-shadow: var(--fd-shadow); } } @media (max-width: 989px) { /* The root is ; the header runtime adds mv-mobile-nav-open while a menu is open. */ &.mv-mobile-nav-open:has(.fd-header[data-mobile-style="drawer"]) { overflow: hidden; } } /* Nested Mega Menu (tabbed_mega_menu): the shared platform view, aligned to Foundation. The block's own Text size / Corner radius / Item spacing overrides (--mvb-mega-*) win over the Foundation defaults. */ & .fd-header__mobile .mvb-mega { display: block; } & .fd-header__mobile .mvb-mega__trigger { width: 100%; padding: 0; border-top: 0; border-inline: 0; border-radius: 0; background: none; text-align: start; } & .fd-header__mobile .mvb-mega__mobile summary { font-family: inherit; color: var(--fd-heading); } & .fd-header .mvb-mega__panel { border: 1px solid var(--fd-line); border-radius: var(--mvb-mega-panel-radius, var(--fd-radius)); box-shadow: var(--fd-shadow); } } /* 5.2 Footer (footer) — renderer footer, public slot chrome/footer * * Every footer design override arrives as an optional --fd-footer-* custom property on * .fd-footer (see the template header for the full list). Each is read with the * Foundation value as its fallback, so an unset field keeps the theme design. * Breakpoint values fall back to the next larger breakpoint. */ [data-mv-theme-root="movadly-light"] { & .fd-footer { --fd-footer-pad-top: var(--fd-footer-pt, var(--fd-footer-top, 72px)); --fd-footer-pad-bottom: var(--fd-footer-pb, var(--fd-footer-bottom, 38px)); --fd-footer-side: var(--fd-footer-gutter, var(--fd-gutter)); --fd-footer-width: var(--fd-footer-max, var(--fd-page-width)); --fd-footer-lower-margin: var(--fd-footer-lower-gap, clamp(40px, 5vw, 64px)); --fd-footer-lower-font: var(--fd-footer-lower-size, var(--fd-text-sm)); --fd-footer-links-gap: var(--fd-footer-link-gap, 10px); position: relative; background: var(--fd-section-bg); color: var(--fd-text); font-size: var(--fd-footer-body-size, var(--fd-text-md)); font-weight: var(--fd-footer-body-weight, var(--fd-body-weight)); line-height: var(--fd-footer-body-lh, 1.6); } /* Section divider (show_divider): a line on the footer's top edge. */ & .fd-footer[data-divider]::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; border-top: 1px solid var(--fd-line); } & .fd-footer[data-divider="fixed_width"]::before { inset-inline: max(var(--fd-footer-side), calc((100% - var(--fd-footer-width)) / 2 + var(--fd-footer-side))); } & .fd-footer__inner { box-sizing: border-box; width: 100%; max-width: var(--fd-footer-width); margin-inline: auto; padding: var(--fd-footer-pad-top) var(--fd-footer-side) var(--fd-footer-pad-bottom); } /* Full width: the content spans the whole footer (inside the gutters) unless a Container maximum width is set. Fixed width keeps it on the page measure. */ & .fd-footer[data-container="full_width"] .fd-footer__inner { max-width: var(--fd-footer-max, none); } & .fd-footer__top { display: grid; grid-template-columns: minmax(0, var(--fd-footer-brand-fr, 1.4fr)) minmax(0, 2fr) auto; column-gap: var(--fd-footer-col-gap, clamp(32px, 5vw, 72px)); row-gap: var(--fd-footer-row-gap, clamp(32px, 5vw, 72px)); align-items: start; } & .fd-footer[data-proportions="equal"] .fd-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } & .fd-footer__brand { display: grid; gap: 12px; justify-items: start; max-width: 380px; } /* Brand block Width: the column's share of the row (brand-wide proportions) and the measure of its text. */ & .fd-footer[data-brand-width="narrow"] { --fd-footer-brand-fr: 1fr; } & .fd-footer[data-brand-width="wide"] { --fd-footer-brand-fr: 2.2fr; } & .fd-footer__brand--narrow { max-width: 280px; } & .fd-footer__brand--wide { max-width: 520px; } & .fd-footer__brand[data-align="center"] { justify-items: center; text-align: center; } & .fd-footer__brand[data-align="right"] { justify-items: end; text-align: end; } /* Unset: the Foundation mark size. logo_width set: that exact width, no height cap. */ & .fd-footer__logo { width: auto; max-width: min(180px, 100%); max-height: 48px; } & .fd-footer[data-logo-width] .fd-footer__logo { width: var(--fd-footer-logo-width); max-width: 100%; max-height: none; height: auto; } & .fd-footer__heading { color: var(--fd-heading); font-family: var(--fd-heading-font); font-size: var(--fd-text-xl); font-weight: var(--fd-heading-weight); line-height: 1.3; } & .fd-footer__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); column-gap: var(--fd-footer-col-gap, 32px); row-gap: var(--fd-footer-row-gap, 32px); } & .fd-footer__title { margin-bottom: var(--fd-footer-heading-gap, 14px); color: var(--fd-heading); font-size: var(--fd-footer-heading-size, var(--fd-text-xs)); font-weight: var(--fd-footer-heading-weight, 600); line-height: var(--fd-footer-heading-lh, 1.4); letter-spacing: 0.08em; text-transform: uppercase; } & .fd-footer ul { display: grid; gap: var(--fd-footer-links-gap); margin: 0; padding: 0; list-style: none; } & .fd-footer__column a { font-size: var(--fd-footer-link-size, inherit); font-weight: var(--fd-footer-link-weight, inherit); line-height: var(--fd-footer-link-lh, inherit); } & .fd-footer a { color: var(--fd-text); text-decoration: none; } & .fd-footer a:hover { color: var(--fd-heading); text-decoration: underline; } & .fd-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: var(--fd-footer-lower-margin); padding-top: 24px; color: var(--fd-muted); font-size: var(--fd-footer-lower-font); line-height: var(--fd-footer-lower-lh, inherit); } & .fd-footer[data-separator="true"] .fd-footer__bottom { border-top: var(--fd-footer-divider-width, 1px) solid var(--fd-line); } & .fd-footer[data-bottom-layout="reverse"] .fd-footer__bottom { flex-direction: row-reverse; } /* Lower footer alignment (unset = split). */ & .fd-footer[data-lower-align="stack"] .fd-footer__bottom { flex-direction: column; align-items: flex-start; } & .fd-footer[data-lower-align="center"] .fd-footer__bottom { flex-direction: column; align-items: center; text-align: center; & .fd-footer__meta, & .fd-footer__legal-links { justify-content: center; } } & .fd-footer__legal { display: grid; gap: 6px; } & .fd-footer__supporting { max-width: var(--fd-footer-supporting-width, 640px); margin-bottom: var(--fd-footer-supporting-gap, 0px); color: var(--fd-muted); font-size: var(--fd-footer-supporting-size, var(--fd-text-xs)); line-height: var(--fd-footer-supporting-lh, inherit); } & .fd-footer[data-lower-align="center"] .fd-footer__supporting { margin-inline: auto; } & .fd-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } /* Also beats the platform's list styles, which is why it carries two classes. */ & .fd-footer .fd-footer__legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; } & .fd-footer__locale, & .fd-footer__top-link { display: inline-flex; align-items: center; gap: 6px; } /* Inline back-to-top link: text plus an icon chip sized / coloured by the settings. */ & .fd-footer__top-chip { display: inline-grid; flex: none; width: var(--fd-footer-btt-size, 1.5em); height: var(--fd-footer-btt-size, 1.5em); place-items: center; border-radius: var(--fd-radius-pill); background: var(--fd-footer-btt-bg, transparent); color: var(--fd-footer-btt-icon, currentColor); & .fd-icon { width: min(20px, 55%); height: min(20px, 55%); } } & .fd-footer__top-icon { transform: rotate(-90deg); } /* Compact: everything in one band. */ & .fd-footer[data-layout="compact"] .fd-footer__top { grid-template-columns: auto 1fr auto; align-items: center; } & .fd-footer[data-layout="compact"] .fd-footer__brand .fd-prose, & .fd-footer[data-layout="compact"] .fd-footer__title { display: none; } & .fd-footer[data-layout="compact"] .fd-footer__columns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px var(--fd-footer-col-gap, 28px); } & .fd-footer[data-layout="compact"] .fd-footer__columns ul { display: flex; flex-wrap: wrap; gap: var(--fd-footer-links-gap, 12px) var(--fd-footer-col-gap, 24px); } /* Columns: brand, menus and social as equal columns. */ & .fd-footer[data-layout="columns"] .fd-footer__top { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } & .fd-footer[data-layout="columns"] .fd-footer__columns { display: contents; } /* Editorial presentation: larger, sentence-case column titles and roomier links. The per-pixel typography fields refine it further. */ & .fd-footer[data-variant="editorial"] { & .fd-footer__title { font-family: var(--fd-heading-font); font-size: var(--fd-footer-heading-size, var(--fd-text-xl)); font-weight: var(--fd-footer-heading-weight, var(--fd-heading-weight)); letter-spacing: normal; text-transform: none; } & .fd-footer__heading { font-size: var(--fd-h-small); } & .fd-footer__column a { font-size: var(--fd-footer-link-size, var(--fd-text-lg)); } & ul { gap: var(--fd-footer-link-gap, 14px); } } @media (max-width: 989px) { & .fd-footer { --fd-footer-pad-top: var(--fd-footer-pt-tablet, var(--fd-footer-pt, var(--fd-footer-top, 72px))); --fd-footer-pad-bottom: var(--fd-footer-pb-tablet, var(--fd-footer-pb, var(--fd-footer-bottom, 38px))); --fd-footer-side: var(--fd-footer-gutter-tablet, var(--fd-footer-gutter, var(--fd-gutter))); --fd-footer-lower-margin: var(--fd-footer-lower-gap-tablet, var(--fd-footer-lower-gap, clamp(40px, 5vw, 64px))); --fd-footer-lower-font: var(--fd-footer-lower-size-tablet, var(--fd-footer-lower-size, var(--fd-text-sm))); } & .fd-footer__top, & .fd-footer[data-proportions="equal"] .fd-footer__top, & .fd-footer[data-layout="compact"] .fd-footer__top { grid-template-columns: repeat(var(--fd-footer-cols-tablet, 2), minmax(0, 1fr)); } & .fd-footer__brand { grid-column: 1 / -1; } /* A set Tablet columns count lays every menu column and the social column out on that many columns (the brand keeps its own row). Unset keeps the Foundation tablet layout (menus side by side, social beside them). */ & .fd-footer[data-tablet-cols] .fd-footer__columns { display: contents; } & .fd-footer:is([data-lower-align="stack"], [data-lower-align="center"])[data-tablet-lower-order="reverse"] .fd-footer__bottom { flex-direction: column-reverse; } & .fd-footer:is([data-lower-align="stack"], [data-lower-align="center"])[data-tablet-lower-order="source"] .fd-footer__bottom { flex-direction: column; } & .fd-footer[data-tablet-order="reverse"] :is(.fd-footer__top > *, .fd-footer__column) { order: calc(-1 * var(--fd-i, 0)); } & .fd-footer[data-tablet-lower-order="reverse"] .fd-footer__bottom { flex-direction: row-reverse; } & .fd-footer[data-tablet-lower-order="source"] .fd-footer__bottom { flex-direction: row; } & .fd-footer[data-tablet-legal="stack"] .fd-footer__legal-links { flex-direction: column; } & .fd-footer[data-tablet-legal="inline"] .fd-footer__legal-links { flex-direction: row; } } @media (max-width: 599px) { & .fd-footer { --fd-footer-pad-top: var(--fd-footer-pt-mobile, var(--fd-footer-pt-tablet, var(--fd-footer-pt, var(--fd-footer-top, 72px)))); --fd-footer-pad-bottom: var(--fd-footer-pb-mobile, var(--fd-footer-pb-tablet, var(--fd-footer-pb, var(--fd-footer-bottom, 38px)))); --fd-footer-side: var(--fd-footer-gutter-mobile, var(--fd-footer-gutter-tablet, var(--fd-footer-gutter, var(--fd-gutter)))); --fd-footer-lower-margin: var(--fd-footer-lower-gap-mobile, var(--fd-footer-lower-gap-tablet, var(--fd-footer-lower-gap, clamp(40px, 5vw, 64px)))); --fd-footer-lower-font: var(--fd-footer-lower-size-mobile, var(--fd-footer-lower-size-tablet, var(--fd-footer-lower-size, var(--fd-text-sm)))); --fd-footer-links-gap: var(--fd-footer-link-gap-mobile, var(--fd-footer-link-gap, 10px)); } & .fd-footer__top, & .fd-footer[data-proportions="equal"] .fd-footer__top, & .fd-footer[data-layout="compact"] .fd-footer__top, & .fd-footer[data-layout="columns"] .fd-footer__top { grid-template-columns: repeat(var(--fd-footer-cols-mobile, 1), minmax(0, 1fr)); } /* Mobile columns, as Tablet columns above; unset keeps the Foundation mobile layout even when a tablet count is set. */ & .fd-footer[data-tablet-cols]:not([data-mobile-cols], [data-layout="columns"]) .fd-footer__columns { display: grid; } & .fd-footer[data-mobile-cols] .fd-footer__columns { display: contents; } & .fd-footer__bottom, & .fd-footer[data-bottom-layout="reverse"] .fd-footer__bottom, & .fd-footer[data-tablet-lower-order] .fd-footer__bottom { flex-direction: column; align-items: flex-start; } /* The lower band stacks on mobile; an unset mobile order follows the tablet order, then Footer bottom layout. */ & .fd-footer[data-bottom-layout="reverse"]:not([data-tablet-lower-order], [data-mobile-lower-order]) .fd-footer__bottom, & .fd-footer[data-tablet-lower-order="reverse"]:not([data-mobile-lower-order]) .fd-footer__bottom { flex-direction: column-reverse; } & .fd-footer[data-mobile-order="reverse"] :is(.fd-footer__top > *, .fd-footer__column) { order: calc(-1 * var(--fd-i, 0)); } & .fd-footer[data-mobile-order="source"] :is(.fd-footer__top > *, .fd-footer__column) { order: 0; } & .fd-footer[data-mobile-lower-order="reverse"] .fd-footer__bottom { flex-direction: column-reverse; } & .fd-footer[data-mobile-lower-order="source"] .fd-footer__bottom { flex-direction: column; } & .fd-footer[data-lower-align="center"] .fd-footer__bottom { align-items: center; } & .fd-footer[data-mobile-legal="stack"] .fd-footer__legal-links { flex-direction: column; } & .fd-footer[data-mobile-legal="inline"] .fd-footer__legal-links { flex-direction: row; } } /* Site-wide floating back-to-top (Theme Settings back_to_top_enabled), printed by chrome/footer.blade.php. Visible without JavaScript; the runtime hides it until the visitor has scrolled a screen down. */ & .fd-back-to-top { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 90; display: inline-grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--fd-line); border-radius: var(--fd-radius-pill); background: var(--fd-bg); box-shadow: var(--fd-shadow); color: var(--fd-heading); text-decoration: none; transition: opacity var(--fd-motion-fast) var(--fd-ease), transform var(--fd-motion-fast) var(--fd-ease), visibility 0s; & .fd-icon { width: 20px; height: 20px; transform: rotate(-90deg); } &:hover { color: var(--fd-accent); } &:focus-visible { box-shadow: var(--fd-focus); outline: none; } } & .fd-back-to-top[data-visible="false"] { visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity var(--fd-motion-fast) var(--fd-ease), transform var(--fd-motion-fast) var(--fd-ease), visibility 0s .2s; } @media (prefers-reduced-motion: reduce) { & .fd-back-to-top, & .fd-back-to-top[data-visible="false"] { transform: none; transition: none; } } /* social_icon_size (glyph size) / social_icon_gap. The shared partial declares its --vb-social-* sizes on its own #id, so they are redeclared on the elements that read them. */ & .fd-footer[data-social-size] .vb-social-media-icons__link { --vb-social-size: calc(var(--fd-footer-social-size) / .48); } & .fd-footer[data-social-gap] .vb-social-media-icons__list { --vb-social-gap: var(--fd-footer-social-gap); } /* Social block Icon colour: Black and White are those colours in every scheme (Brand follows the scheme's accent). The partial maps black to --accent-ink and white to --heading, which Foundation otherwise points at the scheme's heading colour. */ & .fd-footer .vb-social-media-icons.is-color-black { --accent-ink: #000000; } & .fd-footer .vb-social-media-icons.is-color-white { --heading: #ffffff; } /* The block title is a footer column title (printed by the template, not the partial). */ & .fd-footer__social { display: grid; align-content: start; } & .fd-footer__social[data-align="center"] > .fd-footer__title { text-align: center; } & .fd-footer__social[data-align="right"] > .fd-footer__title { text-align: end; } /* The shared social icons partial reads --accent and --heading. */ & .fd-footer .vb-social-media-icons, & .fd-header .vb-social-media-icons, & .fd-rich-text .vb-social-media-icons { --accent: var(--fd-accent); --accent-ink: var(--fd-heading); --heading: var(--fd-heading); } } /* 6. Modules --------------------------------------------------------------- */ /* 6.1 Image with Text (image_text) — renderer image-text */ [data-mv-theme-root="movadly-light"] { & .fd-image-text { /* How far a viewport-edge image reaches past the content column. */ --fd-it-bleed: calc(var(--fd-gutter) + max(0px, (100vw - var(--fd-page-width)) / 2)); } & .fd-image-text[data-vb-width="full"] { --fd-it-bleed: var(--fd-gutter); } & .fd-image-text__layout { display: grid; grid-template-columns: var(--fd-it-media, 1fr) var(--fd-it-copy, 1fr); gap: var(--fd-it-gap, clamp(32px, 5vw, 80px)); align-items: center; } & .fd-image-text[data-image-width="40"] { --fd-it-media: 4fr; --fd-it-copy: 6fr; } & .fd-image-text[data-image-width="50"] { --fd-it-media: 1fr; --fd-it-copy: 1fr; } & .fd-image-text[data-image-width="60"] { --fd-it-media: 6fr; --fd-it-copy: 4fr; } & .fd-image-text[data-image-position="right"] .fd-image-text__layout { grid-template-columns: var(--fd-it-copy, 1fr) var(--fd-it-media, 1fr); } & .fd-image-text[data-image-position="right"] .fd-image-text__media { order: 2; } & .fd-image-text[data-content-position="top"] .fd-image-text__content { align-self: start; } & .fd-image-text[data-content-position="bottom"] .fd-image-text__content { align-self: end; } & .fd-image-text__content { display: grid; gap: 18px; justify-items: start; min-width: 0; } & .fd-image-text__heading { min-width: 0; max-width: 100%; } & .fd-image-text[data-content-align="center"] .fd-image-text__content { justify-items: center; text-align: center; } & .fd-image-text[data-content-align="right"] .fd-image-text__content { justify-items: end; text-align: end; } & .fd-image-text__media:empty { min-height: 280px; } /* Badge colour schemes (badge block color_scheme). */ & .fd-image-text__badge.fd-badge--light { border-color: transparent; background: var(--fd-surface-2); } & .fd-image-text__badge.fd-badge--dark { border-color: transparent; background: var(--fd-dark); color: #ffffff; } & .fd-image-text__badge img { border-radius: var(--fd-radius-pill); object-fit: cover; } /* A bullet without an icon keeps its text aligned with iconned bullets. */ & .fd-bullet--plain { padding-inline-start: 34px; } /* Heading and subheading highlight: none = accent words, underline = Theme Settings gradient underline, mark = soft accent background. A highlight colour replaces the accent. */ & .fd-image-text .fd-highlight--underline mark.fd-highlight, & .fd-image-text__subheading.fd-mark--underline > span { color: inherit; background-image: var(--fd-gradient); background-position: 0 92%; background-repeat: no-repeat; background-size: 100% 0.14em; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; } & .fd-image-text__subheading.fd-mark--underline { text-decoration: none; & > span { padding-bottom: 0.18em; } } & .fd-image-text__subheading.fd-mark--mark > span { padding: 0.1em 0.35em; border-radius: var(--fd-radius-sm); background: var(--fd-accent-soft); } & .fd-image-text .fd-highlight--custom mark.fd-highlight { color: var(--fd-highlight-color); } & .fd-image-text .fd-highlight--custom.fd-highlight--underline mark.fd-highlight { color: inherit; background-image: linear-gradient(var(--fd-highlight-color), var(--fd-highlight-color)); } & .fd-image-text .fd-highlight--custom.fd-highlight--mark mark.fd-highlight { color: inherit; background: color-mix(in srgb, var(--fd-highlight-color) 22%, transparent); } /* Split showcase: a presented image (card, soft panel or edge-to-edge) beside confident copy. */ & .fd-image-text--split_showcase { & .fd-image-text__layout { gap: clamp(36px, 6vw, 96px); } & .fd-heading { letter-spacing: -0.02em; text-wrap: balance; } & .fd-image-text__content > .fd-prose { max-width: 58ch; font-size: var(--fd-text-lg); } & .fd-image-text__content > .fd-prose.fd-text--medium { font-size: var(--fd-text-xl); } & .fd-image-text__content > .fd-prose.fd-text--large { font-size: calc(var(--fd-text-xl) * 1.2); } } & .fd-image-text--media-card .fd-image-text__media { padding: clamp(8px, 1vw, 14px); border: 1px solid var(--fd-card-border); border-radius: calc(var(--fd-radius-image) + 8px); background: var(--fd-card-bg); box-shadow: var(--fd-card-shadow), var(--fd-shadow); & img { border-radius: var(--fd-radius-image); } } & .fd-image-text--media-soft .fd-image-text__media { padding: clamp(18px, 3vw, 40px); border-radius: var(--fd-radius); background: var(--fd-accent-soft); & img { border-radius: var(--fd-radius-image); box-shadow: var(--fd-shadow); } } /* Edge treatments: the image runs to the viewport edge on its side. */ & .fd-image-text--media-edge, & .fd-image-text--media-viewport_edge { overflow-x: clip; & .fd-image-text__media { border-radius: 0; margin-inline-start: calc(-1 * var(--fd-it-bleed)); } &[data-image-position="right"] .fd-image-text__media { margin-inline: 0 calc(-1 * var(--fd-it-bleed)); } } & .fd-image-text--media-edge .fd-image-text__media { min-height: 100%; } /* Editorial split: taller media, larger type and optional overrides (data-it-set). */ & .fd-image-text--editorial_split { /* The block padding the platform gives the section, so a padding override can replace it through the layout's block margins. */ --fd-it-space-top: var(--fd-section-space); --fd-it-space-bottom: var(--fd-section-space); --fd-it-gutter-now: var(--fd-it-gutter, var(--fd-gutter)); --fd-it-pad-top-now: var(--fd-it-pad-top, var(--fd-it-space-top)); --fd-it-pad-bottom-now: var(--fd-it-pad-bottom, var(--fd-it-space-bottom)); --fd-it-bleed: calc(var(--fd-it-gutter-now) + max(0px, (100vw - var(--fd-page-width)) / 2)); &[data-vb-spacing="none"] { --fd-it-space-top: 0px; --fd-it-space-bottom: 0px; } &[data-vb-spacing="compact"] { --fd-it-space-top: calc(var(--fd-section-space) * 0.5); --fd-it-space-bottom: calc(var(--fd-section-space) * 0.5); } &[data-vb-spacing="spacious"] { --fd-it-space-top: calc(var(--fd-section-space) * 1.5); --fd-it-space-bottom: calc(var(--fd-section-space) * 1.5); } &[data-vb-spacing="custom"] { --fd-it-space-top: var(--vb-section-space-top, var(--fd-section-space)); --fd-it-space-bottom: var(--vb-section-space-bottom, var(--fd-section-space)); } &[data-vb-width="full"] { --fd-it-bleed: var(--fd-it-gutter-now); } & .fd-image-text__layout { margin-block: calc(var(--fd-it-pad-top-now) - var(--fd-it-space-top)) calc(var(--fd-it-pad-bottom-now) - var(--fd-it-space-bottom)); margin-inline: calc(var(--fd-it-gutter-now) - var(--fd-gutter)); } & .fd-image-text__media { height: var(--fd-it-media-height, auto); aspect-ratio: auto; } & .fd-image-text__media img { object-position: var(--fd-it-object-position, center); } & .fd-heading { font-weight: var(--fd-it-heading-weight, var(--fd-heading-weight)); } & .fd-image-text__content > .fd-prose { line-height: var(--fd-it-body-line, 1.6); } & .fd-image-text__content > .fd-prose.fd-text--base { font-size: var(--fd-text-lg); } & .fd-image-text__content > .fd-prose.fd-text--medium { font-size: var(--fd-text-xl); } & .fd-image-text__content > .fd-prose.fd-text--large { font-size: calc(var(--fd-text-xl) * 1.2); } &[data-it-set~="body-size"] .fd-image-text__content > .fd-prose { font-size: var(--fd-it-body-size); } &[data-it-set~="eyebrow-size"] .fd-image-text__subheading { font-size: var(--fd-it-eyebrow-size); } &[data-it-set~="eyebrow-line"] .fd-image-text__subheading { line-height: var(--fd-it-eyebrow-line); } } @media (min-width: 990px) { & .fd-image-text--editorial_split[data-it-set~="heading-size"] .fd-heading { font-size: var(--fd-it-heading-size); } & .fd-image-text--editorial_split[data-it-set~="heading-line"] .fd-heading { line-height: var(--fd-it-heading-line); } } @media (max-width: 989px) { & .fd-image-text__layout, & .fd-image-text[data-image-position="right"] .fd-image-text__layout { grid-template-columns: minmax(0, 1fr); } & .fd-image-text .fd-image-text__media, & .fd-image-text[data-image-position="right"] .fd-image-text__media { order: 0; } & .fd-image-text[data-mobile-order="text_first"] .fd-image-text__media { order: 2; } & .fd-image-text[data-mobile-align="left"] .fd-image-text__content { justify-items: start; text-align: start; } & .fd-image-text[data-mobile-align="center"] .fd-image-text__content { justify-items: center; text-align: center; } & .fd-image-text[data-mobile-align="right"] .fd-image-text__content { justify-items: end; text-align: end; } & .fd-image-text__badge[data-mobile-position="left"] { justify-self: start; } & .fd-image-text__badge[data-mobile-position="right"] { justify-self: end; } & .fd-image-text--media-edge .fd-image-text__media, & .fd-image-text--media-viewport_edge .fd-image-text__media, & .fd-image-text--media-edge[data-image-position="right"] .fd-image-text__media, & .fd-image-text--media-viewport_edge[data-image-position="right"] .fd-image-text__media { margin-inline: calc(-1 * var(--fd-it-bleed)); } & .fd-image-text--editorial_split { --fd-it-gutter-now: var(--fd-it-gutter-mobile, var(--fd-gutter)); --fd-it-pad-top-now: var(--fd-it-pad-top-mobile, var(--fd-it-space-top)); --fd-it-pad-bottom-now: var(--fd-it-pad-bottom-mobile, var(--fd-it-space-bottom)); & .fd-image-text__layout { gap: var(--fd-it-stack-gap, clamp(32px, 5vw, 80px)); } & .fd-image-text__media { height: var(--fd-it-media-height-mobile, auto); } &[data-it-set~="heading-size-mobile"] .fd-heading { font-size: var(--fd-it-heading-size-mobile); } &[data-it-set~="heading-line-mobile"] .fd-heading { line-height: var(--fd-it-heading-line-mobile); } } } } /* 6.2 Cards / Feature Cards (card_grid), Insights (insights), Product Grid (catalogue_product_grid), Related Products (catalogue_related_products) — renderer card-grid */ [data-mv-theme-root="movadly-light"] { & .fd-cards { --fd-cards-speed: calc(var(--fd-reveal-duration, 0.45s) * 0.45); } & .fd-cards__list { margin: 0; padding: 0; list-style: none; } & .fd-cards__item { --fd-tint: var(--fd-accent); position: relative; transition: border-color var(--fd-cards-speed) var(--fd-ease), transform var(--fd-cards-speed) var(--fd-ease), box-shadow var(--fd-cards-speed) var(--fd-ease); } /* accent_theme: eight tints derived from the Theme Settings accent and primary colours. */ & .fd-cards__item[data-accent="brand"] { --fd-tint: var(--fd-primary); } & .fd-cards__item[data-accent="connect"] { --fd-tint: color-mix(in srgb, var(--fd-accent) 55%, var(--fd-primary)); } & .fd-cards__item[data-accent="crm"] { --fd-tint: color-mix(in srgb, var(--fd-accent) 35%, var(--fd-heading)); } & .fd-cards__item[data-accent="social"] { --fd-tint: color-mix(in srgb, var(--fd-accent) 70%, var(--fd-bg)); } & .fd-cards__item[data-accent="seo"] { --fd-tint: var(--fd-muted); } & .fd-cards__item[data-accent="finance"] { --fd-tint: color-mix(in srgb, var(--fd-accent) 45%, var(--fd-heading)); } & .fd-cards__item[data-accent="commerce"] { --fd-tint: color-mix(in srgb, var(--fd-accent) 85%, var(--fd-primary)); } & .fd-cards__icon { background: color-mix(in srgb, var(--fd-tint) 12%, transparent); color: var(--fd-tint); } /* Icon on an image card: a chip on the image's lower edge. */ & .fd-cards__icon--over { position: relative; margin-top: -34px; border: 3px solid var(--fd-card-bg); background: color-mix(in srgb, var(--fd-tint) 12%, var(--fd-card-bg)); box-sizing: content-box; } & .fd-cards__item--media { padding: 0; overflow: hidden; & .fd-cards__media { border-radius: 0; } & .fd-cards__body, & .fd-cards__more, & > .fd-cards__icon { margin-inline: clamp(18px, 2vw, 24px); } & .fd-cards__body { padding-top: 4px; } & > :last-child { margin-bottom: clamp(18px, 2vw, 24px); } } & .fd-cards__body { display: grid; gap: 8px; min-width: 0; } /* The title link covers the whole card, so the card is one tab stop. */ & .fd-cards__link { color: inherit; text-decoration: none; } & .fd-cards__link::after { position: absolute; inset: 0; content: ""; } & .fd-cards__item--linked:hover { border-color: var(--fd-line-2); } & .fd-cards__item--linked:hover .fd-card__title { color: var(--fd-accent); } & .fd-cards__item:has(.fd-cards__link:focus-visible) { box-shadow: var(--fd-focus); } & .fd-cards__link:focus-visible { box-shadow: none; } & .fd-cards[data-card-align="center"] .fd-cards__item { justify-items: center; text-align: center; } /* Scrolling track: the configured columns per breakpoint, with the next card peeking. */ & .fd-cards .fd-track { --fd-cols-now: var(--fd-cols, 3); grid-auto-columns: calc((100% - (var(--fd-cols-now) - 1) * var(--fd-gap)) / (var(--fd-cols-now) + 0.15)); scroll-padding-inline: 0; } & .fd-cards .fd-track:focus-visible { outline: none; box-shadow: var(--fd-focus); } /* Horizontal layout without scrolling: image or icon beside the text. */ & .fd-cards[data-layout="horizontal"] .fd-cards__item--media, & .fd-cards[data-layout="horizontal"] .fd-cards__item--icon { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; column-gap: clamp(16px, 2vw, 24px); & > .fd-cards__more { grid-column: 2; } } & .fd-cards[data-layout="horizontal"] .fd-cards__item--icon:not(.fd-cards__item--media) { grid-template-columns: auto minmax(0, 1fr); align-items: start; } & .fd-cards[data-layout="horizontal"] .fd-cards__item--media { padding: clamp(12px, 1.4vw, 16px); & .fd-cards__media { grid-row: span 3; border-radius: var(--fd-radius-image); } & .fd-cards__icon--over { margin: 8px 0 0; border: 0; } & .fd-cards__body, & .fd-cards__more { margin-inline: 0; } & .fd-cards__body { padding-block: 8px 0; } & > :last-child { margin-bottom: 8px; } } & .fd-cards[data-layout="horizontal"][data-card-align="center"] .fd-cards__item { justify-items: start; text-align: start; } /* related: calm, media-first cards. */ & .fd-cards--related .fd-card__title { font-size: calc(var(--fd-h-card) * 0.9); } & .fd-cards--related .fd-cards__item { border-color: transparent; background: none; box-shadow: none; padding-inline: 0; & .fd-cards__media { border-radius: var(--fd-radius-image); } & .fd-cards__body, & .fd-cards__more { margin-inline: 0; } } /* feature: tinted icon, accent hairline and a lifted card on hover. */ & .fd-cards--feature .fd-cards__item { gap: 16px; border-top: 3px solid var(--fd-tint); border-radius: var(--fd-radius); & .fd-cards__icon { width: 52px; height: 52px; border-radius: var(--fd-radius); & .fd-icon { width: 26px; height: 26px; } } & .fd-card__title { font-size: calc(var(--fd-h-card) * 1.08); } } & .fd-cards--feature .fd-cards__item--linked:hover { transform: translateY(-3px); box-shadow: var(--fd-shadow); } /* industry: compact tiles, icon beside the title. */ & .fd-cards--industry .fd-cards__list { --fd-grid-gap: 12px; } & .fd-cards--industry .fd-cards__item { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 18px; & .fd-cards__media { width: 48px; height: 48px; grid-row: span 2; border-radius: var(--fd-radius-sm); aspect-ratio: 1; } & .fd-cards__icon { width: 40px; height: 40px; } & .fd-cards__body { gap: 2px; margin: 0; padding: 0; } & .fd-card__title { font-size: var(--fd-text-base); } & .fd-prose { font-size: var(--fd-text-sm); } & > .fd-cards__more { grid-column: 2; margin: 0; font-size: var(--fd-text-sm); } & > :last-child { margin-bottom: 0; } } & .fd-cards--industry .fd-cards__item--media { padding: 16px 18px; & .fd-cards__body { margin: 0; } } & .fd-cards--industry .fd-cards__item--linked:hover { border-color: var(--fd-tint); } /* module: icon, title, text and a link row on a hairline. */ & .fd-cards--module .fd-cards__item { grid-template-rows: auto 1fr auto; & > .fd-cards__more { padding-top: 14px; border-top: 1px solid var(--fd-line); } } & .fd-cards--module .fd-cards__item--media > .fd-cards__more { margin-inline: clamp(18px, 2vw, 24px); } /* apple_tiles: tinted tiles with a large icon; grid or spotlight carousel. */ & .fd-cards--apple_tiles .fd-cards__item, & .fd-cards--apple_tiles .fd-cards__item--media { min-height: clamp(220px, 24vw, 300px); padding: clamp(22px, 2.6vw, 32px); border-color: transparent; border-radius: calc(var(--fd-radius) * 2); background: color-mix(in srgb, var(--fd-tint) 10%, var(--fd-card-bg)); align-content: space-between; & .fd-cards__icon { width: 56px; height: 56px; border-radius: calc(var(--fd-radius) * 1.5); background: var(--fd-tint); color: var(--fd-bg); & .fd-icon { width: 28px; height: 28px; } } & .fd-cards__media { border-radius: var(--fd-radius-image); } & .fd-card__title { font-size: calc(var(--fd-h-card) * 1.15); } & .fd-prose { color: var(--fd-text); } & .fd-cards__body, & .fd-cards__more { margin: 0; padding: 0; } & > :last-child { margin-bottom: 0; } } & .fd-cards--apple_tiles .fd-cards__item[data-accent="social"] { background: var(--fd-gradient); color: var(--fd-accent-ink); & .fd-card__title, & .fd-prose { color: var(--fd-accent-ink); } & .fd-cards__icon { background: color-mix(in srgb, var(--fd-accent-ink) 22%, transparent); color: var(--fd-accent-ink); } } & .fd-cards__go { display: inline-grid; width: 40px; height: 40px; place-items: center; justify-self: end; border-radius: var(--fd-radius-pill); background: var(--fd-bg); color: var(--fd-heading); transition: transform var(--fd-cards-speed) var(--fd-ease); } & .fd-cards--apple_tiles .fd-cards__item--linked:hover { transform: translateY(-4px); & .fd-card__title { color: inherit; } & .fd-cards__go { transform: translateX(3px); } } & .fd-cards__spotlight { --fd-cols-now: var(--fd-cols, 3); grid-auto-columns: calc((100% - (var(--fd-cols-now) - 1) * var(--fd-gap)) / (var(--fd-cols-now) - 0.4)); padding-block: 12px 16px; scroll-snap-type: x mandatory; & > .fd-cards__item { scroll-snap-align: center; opacity: 0.72; transform: scale(0.94); transition: opacity var(--fd-cards-speed) var(--fd-ease), transform var(--fd-cards-speed) var(--fd-ease); } & > .fd-cards__item.is-spotlit, &:not(.is-ready) > .fd-cards__item { opacity: 1; transform: none; } } & .fd-cards__controls { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } & .fd-cards__controls[hidden] { display: none !important; } /* catalogue_downloads: catalogue covers with a download link. With one column each catalogue is a wide row (cover beside the text); with more, a grid of covers. */ & .fd-cards--catalogue_downloads .fd-cards__item { gap: 12px; padding: 0; overflow: hidden; & .fd-cards__media { border-radius: 0; } & .fd-cards__body { gap: 10px; } & .fd-cards__icon { display: none; } & > .fd-cards__more { justify-self: start; padding: 0.7em 1.3em; border-radius: var(--fd-button-radius); background: var(--fd-button-bg); color: var(--fd-button-text); & .fd-icon { color: inherit; transform: rotate(90deg); } } } & .fd-cards--catalogue_downloads .fd-cards__item:not(.fd-cards__item--media) { padding: clamp(20px, 2.4vw, 28px); & .fd-cards__body, & > .fd-cards__more { margin: 0; } } & .fd-cards--catalogue_downloads[data-cols="1"] .fd-cards__item--media { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(24px, 4vw, 56px); align-items: center; & .fd-cards__media { grid-row: span 2; height: 100%; } & .fd-cards__body { align-self: end; margin: 0; padding: clamp(24px, 4vw, 48px) clamp(20px, 3vw, 40px) 0 0; } & .fd-card__title { font-size: var(--fd-h-small); } & > .fd-cards__more { align-self: start; margin: 8px 0 clamp(24px, 4vw, 48px); } } & .fd-cards--catalogue_downloads .fd-cards__item--linked:hover .fd-card__title { color: inherit; } & .fd-cards__assistance { display: grid; gap: 12px; max-width: var(--fd-narrow); margin-top: clamp(32px, 5vw, 56px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--fd-line); } /* Catalogue cards: calmer surface, image-led. */ & .fd-cards--catalogue .fd-cards__item { border: 0; background: none; box-shadow: none; } & .fd-cards--catalogue .fd-cards__item--media .fd-cards__media { border-radius: var(--fd-radius-image); } & .fd-cards--catalogue .fd-cards__body, & .fd-cards--catalogue .fd-cards__more { margin-inline: 0; } @media (max-width: 989px) { & .fd-cards .fd-track { --fd-cols-now: var(--fd-cols-tablet, min(var(--fd-cols, 3), 2)); } & .fd-cards__spotlight { --fd-cols-now: var(--fd-cols-tablet, 2); } } @media (max-width: 599px) { & .fd-cards .fd-track, & .fd-cards__spotlight { --fd-cols-now: var(--fd-cols-mobile, 1); } & .fd-cards[data-layout="horizontal"] .fd-cards__item--media, & .fd-cards--catalogue_downloads[data-cols="1"] .fd-cards__item--media { grid-template-columns: minmax(0, 1fr); & .fd-cards__media { grid-row: auto; } } & .fd-cards--catalogue_downloads[data-cols="1"] .fd-cards__item--media { & .fd-cards__body, & .fd-cards__more { margin-inline: clamp(18px, 2vw, 24px); } } & .fd-cards--catalogue_downloads[data-cols="1"] .fd-cards__item--media .fd-cards__body { padding: 8px 0 0; } } @media (prefers-reduced-motion: reduce) { & .fd-cards__spotlight > .fd-cards__item { transform: none; } } } /* 6.3 Rich Text (rich_text), Value Section (value) — renderer rich-text */ [data-mv-theme-root="movadly-light"] { & .fd-rich-text__body { display: grid; gap: var(--fd-rt-gap, 20px); max-width: var(--fd-rt-content-max, var(--fd-rt-width, var(--fd-narrow))); text-align: start; justify-items: start; } /* max_width presets, relative to Theme Settings > Narrow width. */ & .fd-rich-text[data-max-width="small"] { --fd-rt-width: calc(var(--fd-narrow) * 0.74); } & .fd-rich-text[data-max-width="medium"] { --fd-rt-width: var(--fd-narrow); } & .fd-rich-text[data-max-width="large"] { --fd-rt-width: calc(var(--fd-narrow) * 1.13); } & .fd-rich-text[data-max-width="full"] { --fd-rt-width: none; } & .fd-rich-text[data-content-align="center"] .fd-rich-text__body { margin-inline: auto; } & .fd-rich-text[data-content-align="right"] .fd-rich-text__body { margin-inline-start: auto; } & .fd-rich-text[data-text-align="center"] .fd-rich-text__body { text-align: center; justify-items: center; } & .fd-rich-text[data-text-align="right"] .fd-rich-text__body { text-align: end; justify-items: end; } & .fd-rich-text__heading { min-width: 0; max-width: 100%; } & .fd-rich-text[data-text-align="center"] .fd-prose :where(ul, ol) { justify-self: center; text-align: start; } & .fd-rich-text[data-text-align="center"] .fd-actions { justify-content: center; } & .fd-rich-text[data-text-align="right"] .fd-actions { justify-content: flex-end; } /* Heading highlight (heading block highlight_style / highlight_color). none = accent words, underline = Theme Settings gradient underline, mark = soft accent background. A block highlight colour replaces the accent. */ & .fd-rich-text .fd-highlight--underline mark.fd-highlight { color: inherit; background-image: var(--fd-gradient); background-position: 0 92%; background-repeat: no-repeat; background-size: 100% 0.14em; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; } & .fd-rich-text .fd-highlight--custom mark.fd-highlight { color: var(--fd-highlight-color); } & .fd-rich-text .fd-highlight--custom.fd-highlight--underline mark.fd-highlight { color: inherit; background-image: linear-gradient(var(--fd-highlight-color), var(--fd-highlight-color)); } & .fd-rich-text .fd-highlight--custom.fd-highlight--mark mark.fd-highlight { color: inherit; background: color-mix(in srgb, var(--fd-highlight-color) 22%, transparent); } /* The editorial frame absorbs gutter and padding overrides (0 when unset). */ & .fd-rich-text__frame { min-width: 0; } /* Statement ---------------------------------------------------------- */ & .fd-rich-text--statement { --fd-rt-gap: 24px; & .fd-rich-text__body { max-width: var(--fd-rt-width, var(--fd-narrow)); } & .fd-heading { line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; } & .fd-rich-text__display { font-size: calc(var(--fd-h-mega) * 1.28); letter-spacing: -0.03em; } & .fd-prose { max-width: 62ch; font-size: var(--fd-text-lg); line-height: 1.55; } & .fd-prose.fd-text--medium { font-size: var(--fd-text-xl); } & .fd-prose.fd-text--large { font-size: calc(var(--fd-text-xl) * 1.2); } & .fd-actions { margin-top: 8px; } } & .fd-rich-text[data-text-align="center"].fd-rich-text--statement .fd-prose { margin-inline: auto; } & .fd-rich-text[data-text-align="right"].fd-rich-text--statement .fd-prose { margin-inline-start: auto; } & .fd-rich-text__eyebrow { display: grid; gap: 0.25em; & p { margin: 0; } & strong { color: inherit; } } & .fd-rich-text__eyebrow.fd-prose--strong { color: var(--fd-heading); } & .fd-rich-text__eyebrow.fd-text--medium { font-size: var(--fd-text-sm); } & .fd-rich-text__eyebrow.fd-text--large { font-size: var(--fd-text-base); } /* Editorial copy ------------------------------------------------------ */ & .fd-rich-text--editorial_copy { /* The block padding the platform gives the section, so an editorial padding override can replace it (see .fd-rich-text__frame below). */ --fd-rt-space-top: var(--fd-section-space); --fd-rt-space-bottom: var(--fd-section-space); --fd-rt-gutter-now: var(--fd-rt-gutter, var(--fd-gutter)); --fd-rt-pad-top-now: var(--fd-rt-pad-top, var(--fd-rt-space-top)); --fd-rt-pad-bottom-now: var(--fd-rt-pad-bottom, var(--fd-rt-space-bottom)); &[data-vb-spacing="none"] { --fd-rt-space-top: 0px; --fd-rt-space-bottom: 0px; } &[data-vb-spacing="compact"] { --fd-rt-space-top: calc(var(--fd-section-space) * 0.5); --fd-rt-space-bottom: calc(var(--fd-section-space) * 0.5); } &[data-vb-spacing="spacious"] { --fd-rt-space-top: calc(var(--fd-section-space) * 1.5); --fd-rt-space-bottom: calc(var(--fd-section-space) * 1.5); } &[data-vb-spacing="custom"] { --fd-rt-space-top: var(--vb-section-space-top, var(--fd-section-space)); --fd-rt-space-bottom: var(--vb-section-space-bottom, var(--fd-section-space)); } & .fd-rich-text__frame { margin-block: calc(var(--fd-rt-pad-top-now) - var(--fd-rt-space-top)) calc(var(--fd-rt-pad-bottom-now) - var(--fd-rt-space-bottom)); margin-inline: calc(var(--fd-rt-gutter-now) - var(--fd-gutter)); } & .fd-intro { max-width: var(--fd-rt-heading-max, var(--fd-narrow)); } & .fd-heading { color: var(--fd-rt-heading-color, var(--fd-heading)); font-family: var(--fd-rt-heading-font, var(--fd-heading-font)); font-weight: var(--fd-rt-heading-weight, var(--fd-heading-weight)); line-height: 1.1; } & .fd-prose { max-width: var(--fd-rt-body-max, none); gap: var(--fd-rt-paragraph-gap, 0.85em); color: var(--fd-text); font-family: var(--fd-rt-body-font, inherit); font-size: calc(var(--fd-text-base) * 1.1875); font-weight: var(--fd-rt-body-weight, inherit); line-height: 1.65; & :where(ul, ol) { gap: var(--fd-rt-list-gap, 0.35em); padding-inline-start: var(--fd-rt-list-indent, 1.25em); } & a { color: var(--fd-rt-link, var(--fd-accent)); } & a:is(:hover, :focus-visible) { color: var(--fd-rt-link-hover, var(--fd-rt-link, var(--fd-accent))); } & :where(h2, h3) { font-family: var(--fd-rt-subheading-font, var(--fd-heading-font)); } & h2 { color: var(--fd-rt-h2-color, var(--fd-heading)); font-weight: var(--fd-rt-h2-weight, var(--fd-heading-weight)); } & h3 { color: var(--fd-rt-h3-color, var(--fd-heading)); font-weight: var(--fd-rt-h3-weight, var(--fd-heading-weight)); } } & .fd-prose.fd-text--medium { font-size: var(--fd-text-xl); } & .fd-prose.fd-text--large { font-size: calc(var(--fd-text-xl) * 1.2); } & .fd-prose--strong { color: var(--fd-rt-heading-color, var(--fd-heading)); } /* Overrides that replace a class-driven size only when they are set. */ &[data-rt-set~="heading-tracking"] .fd-heading { letter-spacing: var(--fd-rt-heading-tracking); } &[data-rt-set~="body-size"] .fd-prose { font-size: var(--fd-rt-body-size); } &[data-rt-set~="body-line"] .fd-prose { line-height: var(--fd-rt-body-line); } &[data-rt-set~="body-tracking"] .fd-prose { letter-spacing: var(--fd-rt-body-tracking); } &[data-rt-set~="h2-size"] .fd-prose h2 { font-size: var(--fd-rt-h2-size); } &[data-rt-set~="h2-line"] .fd-prose h2 { line-height: var(--fd-rt-h2-line); } &[data-rt-set~="h2-tracking"] .fd-prose h2 { letter-spacing: var(--fd-rt-h2-tracking); } &[data-rt-set~="h3-size"] .fd-prose h3 { font-size: var(--fd-rt-h3-size); } &[data-rt-set~="h3-line"] .fd-prose h3 { line-height: var(--fd-rt-h3-line); } &[data-rt-set~="h3-tracking"] .fd-prose h3 { letter-spacing: var(--fd-rt-h3-tracking); } } & .fd-rich-text[data-editorial-align="left"] .fd-rich-text__body { text-align: left; } & .fd-rich-text[data-editorial-align="right"] .fd-rich-text__body { text-align: right; } /* Desktop heading size / line height apply above mobile; tablet inherits them. */ @media (min-width: 600px) { & .fd-rich-text--editorial_copy[data-rt-set~="heading-size"] .fd-heading { font-size: var(--fd-rt-heading-size); } & .fd-rich-text--editorial_copy[data-rt-set~="heading-line"] .fd-heading { line-height: var(--fd-rt-heading-line); } } @media (max-width: 989px) { & .fd-rich-text--editorial_copy { --fd-rt-gutter-now: var(--fd-rt-gutter-tablet, var(--fd-rt-gutter-mobile, var(--fd-gutter))); --fd-rt-pad-top-now: var(--fd-rt-pad-top-tablet, var(--fd-rt-pad-top-mobile, var(--fd-rt-space-top))); --fd-rt-pad-bottom-now: var(--fd-rt-pad-bottom-tablet, var(--fd-rt-pad-bottom-mobile, var(--fd-rt-space-bottom))); &[data-rt-set~="body-size-tablet"] .fd-prose { font-size: var(--fd-rt-body-size-tablet); } &[data-rt-set~="body-line-tablet"] .fd-prose { line-height: var(--fd-rt-body-line-tablet); } &[data-rt-set~="h2-size-tablet"] .fd-prose h2 { font-size: var(--fd-rt-h2-size-tablet); } &[data-rt-set~="h3-size-tablet"] .fd-prose h3 { font-size: var(--fd-rt-h3-size-tablet); } } } @media (max-width: 989px) and (min-width: 600px) { & .fd-rich-text--editorial_copy[data-rt-set~="heading-size-tablet"] .fd-heading { font-size: var(--fd-rt-heading-size-tablet); } & .fd-rich-text--editorial_copy[data-rt-set~="heading-line-tablet"] .fd-heading { line-height: var(--fd-rt-heading-line-tablet); } } @media (max-width: 599px) { & .fd-rich-text--editorial_copy { --fd-rt-gutter-now: var(--fd-rt-gutter-mobile, var(--fd-gutter)); --fd-rt-pad-top-now: var(--fd-rt-pad-top-mobile, var(--fd-rt-space-top)); --fd-rt-pad-bottom-now: var(--fd-rt-pad-bottom-mobile, var(--fd-rt-space-bottom)); &[data-rt-set~="heading-size-mobile"] .fd-heading { font-size: var(--fd-rt-heading-size-mobile); } &[data-rt-set~="heading-line-mobile"] .fd-heading { line-height: var(--fd-rt-heading-line-mobile); } &[data-rt-set~="body-size-mobile"] .fd-prose { font-size: var(--fd-rt-body-size-mobile); } &[data-rt-set~="body-line-mobile"] .fd-prose { line-height: var(--fd-rt-body-line-mobile); } &[data-rt-set~="h2-size-mobile"] .fd-prose h2 { font-size: var(--fd-rt-h2-size-mobile); } &[data-rt-set~="h3-size-mobile"] .fd-prose h3 { font-size: var(--fd-rt-h3-size-mobile); } } } /* Breadcrumb variant, and the breadcrumb inside the product view ---------- */ & .fd-breadcrumb.fd-section { --fd-crumb-gutter-now: var(--fd-crumb-gutter, var(--fd-gutter)); padding-block: 0; margin-bottom: var(--fd-crumb-after, 0); } & .fd-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; min-height: var(--fd-crumb-height, 44px); margin: 0; margin-inline: calc(var(--fd-crumb-gutter-now, var(--fd-gutter)) - var(--fd-gutter)); padding: 0; color: var(--fd-crumb-color, var(--fd-muted)); font-size: var(--fd-crumb-size, var(--fd-text-sm)); line-height: var(--fd-crumb-line, 1.5); list-style: none; & li + li::before { display: inline-block; margin-inline: 10px; color: var(--fd-crumb-separator, var(--fd-line-2)); content: "/"; } & a { color: inherit; text-decoration: none; } & a:hover { color: var(--fd-heading); text-decoration: underline; } & [aria-current="page"] { color: var(--fd-crumb-color, var(--fd-heading)); } } @media (max-width: 989px) { & .fd-breadcrumb.fd-section { --fd-crumb-gutter-now: var(--fd-crumb-gutter-mobile, var(--fd-gutter)); margin-bottom: var(--fd-crumb-after-mobile, var(--fd-crumb-after, 0)); } } /* Social media block: the platform partial colours icons with --accent, --accent-ink (the "black" option) and --heading (the "white" option). */ & .fd-rich-text__social { /* Full width, so the block's own Alignment (left / center / right) places the icons; a shrink-wrapped wrapper would always follow the section's text alignment. */ justify-self: stretch; min-width: 0; --accent: var(--fd-accent); --accent-ink: var(--fd-heading); --heading: #ffffff; } /* Custom icon image inside the shared button partial (partials/button). */ & .fd-button__icon { width: 1.25em; height: 1.25em; flex: none; object-fit: contain; } } /* 6.4 Contact Form (contact_form) — renderer contact-form */ [data-mv-theme-root="movadly-light"] { & .fd-contact__layout { display: grid; grid-template-columns: minmax(0, var(--fd-contact-form, 65fr)) minmax(0, var(--fd-contact-side, 35fr)); gap: var(--fd-contact-gap, clamp(32px, 5vw, 72px)); align-items: start; } & .fd-contact[data-sidebar-width="30"] { --fd-contact-form: 70fr; --fd-contact-side: 30fr; } & .fd-contact[data-sidebar-width="40"] { --fd-contact-form: 60fr; --fd-contact-side: 40fr; } & .fd-contact[data-sidebar-width="50"] { --fd-contact-form: 50fr; --fd-contact-side: 50fr; } & .fd-contact[data-gap="small"] { --fd-contact-gap: 24px; } & .fd-contact[data-gap="medium"] { --fd-contact-gap: 40px; } & .fd-contact[data-valign="middle"] .fd-contact__layout { align-items: center; } & .fd-contact[data-valign="bottom"] .fd-contact__layout { align-items: end; } /* The sidebar sits on the left when the layout says so, or when the first sidebar block's position is left (data-sidebar-first). */ & .fd-contact[data-sidebar-first="true"]:not([data-layout="stacked"]) .fd-contact__layout { grid-template-columns: minmax(0, var(--fd-contact-side, 35fr)) minmax(0, var(--fd-contact-form, 65fr)); } & .fd-contact[data-sidebar-first="true"] .fd-contact__sidebar { order: -1; } & .fd-contact[data-layout="stacked"] .fd-contact__layout { grid-template-columns: minmax(0, 1fr); max-width: var(--fd-narrow); } & .fd-contact[data-layout="stacked"][data-text-align="center"] .fd-contact__layout { margin-inline: auto; } /* Editorial: larger heading; optional size, line height, weight and gutters. */ & .fd-contact--editorial { --fd-contact-gutter-now: var(--fd-contact-gutter, var(--fd-gutter)); & .fd-contact__frame { margin-inline: calc(var(--fd-contact-gutter-now) - var(--fd-gutter)); } & .fd-contact__frame > .fd-intro .fd-heading { font-weight: var(--fd-contact-heading-weight, var(--fd-heading-weight)); line-height: var(--fd-contact-heading-line, 1.15); } &[data-contact-set~="heading-size"] .fd-contact__frame > .fd-intro .fd-heading { font-size: var(--fd-contact-heading-size); } } & .fd-contact__frame { min-width: 0; } & .fd-contact[data-panel="soft"] .fd-contact__form, & .fd-contact[data-panel="bordered"] .fd-contact__form, & .fd-contact[data-panel="elevated"] .fd-contact__form { padding: calc(var(--fd-gap) * 1.25); border-radius: var(--fd-radius); } & .fd-contact[data-panel="soft"] .fd-contact__form { background: var(--fd-surface-2); } & .fd-contact[data-panel="bordered"] .fd-contact__form { border: 1px solid var(--fd-line-2); background: var(--fd-bg); } & .fd-contact[data-panel="elevated"] .fd-contact__form { background: var(--fd-card-bg); box-shadow: var(--fd-shadow); } & .fd-contact__forms, & .fd-contact__sidebar { display: grid; gap: var(--fd-gap); min-width: 0; } & .fd-contact__form { display: grid; gap: 16px; } & .fd-contact__title { font-size: var(--fd-h-small); } & .fd-contact__card-heading--small { font-size: var(--fd-h-card); } & .fd-contact__card-heading--medium { font-size: var(--fd-h-small); } & .fd-contact__card-heading--large { font-size: var(--fd-h-medium); } & .fd-contact__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } & .fd-contact__wide { grid-column: 1 / -1; } & .fd-contact__submit[data-width="full"] .fd-button { width: 100%; } & .fd-contact__error, & .fd-contact__field-error { border-inline-start-color: var(--fd-danger); color: var(--fd-heading); } & .fd-contact__field-error { color: var(--fd-danger); font-size: var(--fd-text-xs); } & .fd-contact__choices { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0; padding: 0; border: 0; & legend { margin-bottom: 8px; } } & .fd-contact[data-input-style="filled"] .fd-input { border-color: transparent; background: var(--fd-surface-2); } & .fd-contact[data-input-style="filled"][data-input-bg="white"] .fd-input { background: var(--fd-bg); } & .fd-contact[data-input-style="outlined"][data-input-bg="soft"] .fd-input { background: var(--fd-surface-2); } & .fd-contact[data-input-bg="transparent"] .fd-input { background: transparent; } & .fd-contact[data-input-style="underline"] .fd-input { padding-inline: 0; border-width: 0 0 1px; border-radius: 0; background: transparent; } & .fd-contact .fd-input:focus-visible { border-color: var(--fd-accent); } & .fd-contact__card { display: grid; gap: 14px; align-content: start; } & .fd-contact__card[data-background="soft"] { padding: var(--fd-gap); border-radius: var(--fd-radius); background: var(--fd-surface-2); } & .fd-contact__card[data-background="boxed"] { padding: var(--fd-gap); border: 1px solid var(--fd-card-border, var(--fd-line)); border-radius: var(--fd-radius); background: var(--fd-card-bg); box-shadow: var(--fd-card-shadow); } & .fd-contact__details { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; & li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; } & strong { display: block; color: var(--fd-heading); font-weight: 600; } & a, & p { color: var(--fd-muted); } } @media (max-width: 989px) { & .fd-contact__layout, & .fd-contact[data-sidebar-first="true"]:not([data-layout="stacked"]) .fd-contact__layout { grid-template-columns: minmax(0, 1fr); } & .fd-contact .fd-contact__sidebar, & .fd-contact[data-sidebar-first="true"] .fd-contact__sidebar { order: 0; } & .fd-contact[data-mobile-order="sidebar_first"] .fd-contact__sidebar { order: -1; } & .fd-contact[data-mobile-align="left"] :is(.fd-intro, .fd-contact__card) { margin-inline: 0 auto; text-align: start; justify-items: start; } & .fd-contact[data-mobile-align="center"] :is(.fd-intro, .fd-contact__card) { margin-inline: auto; text-align: center; justify-items: center; } & .fd-contact[data-mobile-align="right"] :is(.fd-intro, .fd-contact__card) { margin-inline: auto 0; text-align: end; justify-items: end; } & .fd-contact[data-mobile-align="center"] .fd-contact__details li { justify-items: center; } & .fd-contact--editorial { --fd-contact-gutter-now: var(--fd-contact-gutter-mobile, var(--fd-gutter)); } } @media (max-width: 599px) { & .fd-contact__fields { grid-template-columns: minmax(0, 1fr); } } } /* 6.5 Product Detail (catalogue_product_detail) and catalogue product pages — renderer image-text, partial commerce-product */ [data-mv-theme-root="movadly-light"] { & .fd-product__breadcrumb { margin-bottom: var(--fd-gap); } & .fd-product__hero { margin-bottom: calc(var(--fd-gap) * 1.5); aspect-ratio: auto; height: clamp(240px, 42vw, 560px); } & .fd-product__hero--compact { height: clamp(200px, 28vw, 360px); } & .fd-product__hero--standard { height: clamp(220px, 34vw, 460px); } & .fd-product__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: calc(var(--fd-gap) * 2); align-items: start; } & .fd-product__gallery { display: grid; gap: 12px; } & .fd-product__thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } & .fd-product__thumb { width: 76px; height: 76px; padding: 3px; overflow: hidden; border: 1px solid var(--fd-line); border-radius: var(--fd-radius-sm); background: var(--fd-bg); cursor: pointer; & img { display: block; width: 100%; height: 100%; border-radius: calc(var(--fd-radius-sm) - 2px); object-fit: cover; } } & .fd-product__thumb[aria-pressed="true"] { border-color: var(--fd-heading); box-shadow: 0 0 0 1px var(--fd-heading); } & .fd-product__summary { display: grid; gap: 20px; align-content: start; } & .fd-product__meta { display: grid; gap: 8px; margin: 0; padding: 16px 0; border-block: 1px solid var(--fd-line); & div { display: flex; gap: 12px; justify-content: space-between; } & dt { color: var(--fd-muted); } & dd { margin: 0; color: var(--fd-heading); font-weight: 600; } } & .fd-product__colours ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; & li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--fd-line); border-radius: var(--fd-radius-pill); font-size: var(--fd-text-sm); } & img { border-radius: var(--fd-radius-pill); object-fit: cover; } } & .fd-product__details { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: calc(var(--fd-gap) * 1.75); margin-top: calc(var(--fd-section-space) * 0.9); padding-top: calc(var(--fd-gap) * 1.5); border-top: 1px solid var(--fd-line); } & .fd-product__panel { display: grid; gap: 14px; align-content: start; } & .fd-product__specs { display: grid; margin: 0; & div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--fd-line); } & dt { color: var(--fd-muted); } & dd { margin: 0; color: var(--fd-heading); } } /* Share links (Theme Settings > share buttons). */ & .fd-product__share { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; & ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; } } & .fd-product__share-link { display: inline-grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--fd-line); border-radius: var(--fd-radius-pill); color: var(--fd-heading); transition: border-color var(--fd-motion-fast) var(--fd-ease), color var(--fd-motion-fast) var(--fd-ease); &:hover { border-color: var(--fd-heading); color: var(--fd-accent); } &:focus-visible { box-shadow: var(--fd-focus); outline: none; } } @media (max-width: 989px) { & .fd-product__layout { grid-template-columns: minmax(0, 1fr); } } } /* ========================================================================== * 6. Modules — media group * hero, slideshow, scrolling-banner, video, animated-network-hero, grid-banner * ========================================================================== */ /* * Shared by the media modules * - [hidden] always wins inside these modules. Controls that only work with * JavaScript are rendered hidden and revealed by their runtime; a component * rule such as display:flex must never bring them back without it. * - Play / pause toggles carry both icons; the runtime sets data-state. */ [data-mv-theme-root="movadly-light"] { & :is(.fd-hero, .fd-slideshow, .fd-scroll-banner, .fd-marquee, .fd-video, .fd-sector-slides, .fd-grid-banner) [hidden] { display: none !important; } & [data-state="paused"] > .fd-icon--pause, & :not([data-state="paused"]) > .fd-icon--resume { display: none; } } /* The marquee loop. Both marquees move a track holding two identical groups by * half its width, so the second group lands exactly where the first began. */ @keyframes fd-media-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Full-width slideshows are full-bleed heroes: no band, no gutter, square corners. */ [data-mv-theme-root="movadly-light"] { & .fd-slideshow[data-vb-width="full"] { padding-block: 0; } & .fd-slideshow[data-vb-width="full"] > .fd-inner { padding-inline: 0 !important; } & .fd-slideshow[data-vb-width="full"] .fd-slide, & .fd-slideshow[data-vb-width="full"] .fd-slide__media, & .fd-slideshow[data-vb-width="full"] .fd-slideshow__slides { border-radius: 0; } & .fd-slideshow[data-vb-width="full"] .fd-slideshow__controls { padding: 16px var(--fd-gutter); } } /* 6.x Hero (legacy) (hero) — renderer hero */ [data-mv-theme-root="movadly-light"] { & .fd-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--fd-gap) * 2); align-items: center; align-content: center; } & .fd-hero[data-media="card"][data-align="left"] .fd-hero__layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } & .fd-hero__content { display: grid; gap: 24px; justify-items: start; max-width: var(--fd-narrow); } & .fd-hero .fd-intro { margin-bottom: 0; } & .fd-hero__subtitle { max-width: 60ch; } & .fd-hero__media { aspect-ratio: 4 / 3; } /* Page hero: height presets and centred alignment. */ & .fd-hero[data-height="compact"] .fd-hero__layout { min-height: 360px; } & .fd-hero[data-height="medium"] .fd-hero__layout { min-height: 480px; } & .fd-hero[data-height="tall"] .fd-hero__layout { min-height: 620px; } & .fd-hero[data-align="center"] { & .fd-hero__content { justify-items: center; max-width: calc(var(--fd-narrow) * 1.13); margin-inline: auto; text-align: center; } & .fd-hero__actions { justify-content: center; } & .fd-hero__media { width: 100%; max-width: calc(var(--fd-page-width) * 0.78); margin-inline: auto; aspect-ratio: 16 / 9; } } /* "Edge to edge": the image leaves the content column and runs full-bleed. */ & .fd-hero__edge { margin: calc(var(--fd-gap) * 1.75) 0 0; & img { display: block; width: 100%; height: clamp(240px, 40vw, 560px); object-fit: cover; } } @media (max-width: 989px) { & .fd-hero[data-media="card"][data-align="left"] .fd-hero__layout { grid-template-columns: minmax(0, 1fr); } & .fd-hero .fd-hero__layout { min-height: 0; } } } /* 6.x Slideshow (slideshow) — renderer slideshow * * Design controls. The template prints every advanced design control that is set as a * --fd-ss-* custom property on the section (desktop / -t tablet / -m mobile). Each rule * below reads it with Foundation's own value as the fallback, so an unset control keeps * the theme design. Content placement arrives per slide as --fd-ss-y / --fd-ss-x * (start | center | end) and text alignment as --fd-ss-ta, with -t and -m variants. * Switches that only exist when set use token lists: data-ss-flags (hide-sub-t, * hide-body-m, hide-arrows-t, full-button-m, ...) and data-ss-button (size, py, color, * hover-bg, ...). */ [data-mv-theme-root="movadly-light"] { & .fd-slideshow { /* The colour behind text panels and in the overlay follows the scheme. */ --fd-slide-scrim: var(--fd-section-bg); --fd-slide-h: 680px; } & .fd-slideshow.fd-scheme-transparent { --fd-slide-scrim: var(--fd-bg); } & .fd-slideshow[data-height="small"] { --fd-slide-h: 420px; } & .fd-slideshow[data-height="medium"] { --fd-slide-h: 540px; } & .fd-slideshow[data-height="full_screen"] { --fd-slide-h: calc(100svh - var(--fd-header-height)); } & .fd-slideshow[data-height="fixed_height"] { --fd-slide-h: 640px; } /* Shared by slideshow slides and scrolling banner slides. The inset follows Theme Settings side spacing, growing with the viewport up to 64px. */ & :is(.fd-slide, .fd-banner-slide) { position: relative; isolation: isolate; box-sizing: border-box; display: grid; align-items: center; justify-items: start; min-height: var(--fd-slide-h); padding: max(var(--fd-gutter), min(5vw, 64px)); overflow: hidden; border-radius: var(--fd-radius-image); background: var(--fd-surface-2); } & :is(.fd-slide__content, .fd-banner-slide__content) { display: grid; gap: 20px; width: 100%; max-width: calc(var(--fd-narrow) * 0.84); box-sizing: border-box; & .fd-intro { margin-bottom: 0; } } /* Over an image with a light overlay, text sits on a solid panel so it stays readable. */ & :is(.fd-slide, .fd-banner-slide)[data-panel="true"] :is(.fd-slide__content, .fd-banner-slide__content) { padding: max(var(--fd-gutter), min(3vw, 32px)); border-radius: var(--fd-radius); background: var(--fd-slide-scrim); } & :is(.fd-slide__text, .fd-banner-slide__text) { &.fd-slide__text--base { font-size: var(--fd-text-base); } &.fd-slide__text--medium { font-size: var(--fd-text-lg); } &.fd-slide__text--large { font-size: calc(var(--fd-base-size) * 1.3125); } } /* ---- Slideshow slide ------------------------------------------------ */ & .fd-slide { align-items: var(--fd-ss-y, center); justify-items: var(--fd-ss-x, start); min-height: var(--fd-ss-media-h, var(--fd-slide-h)); padding-inline: var(--fd-ss-gutter, max(var(--fd-gutter), min(5vw, 64px))); } & .fd-slideshow[data-height="fixed_height"] .fd-slide { height: var(--fd-ss-media-h, var(--fd-slide-h)); } & .fd-slide__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; } & .fd-slide__media { & > picture { display: block; width: 100%; height: 100%; } & :is(img, video) { display: block; width: 100%; height: 100%; object-fit: var(--fd-ss-fit, cover); object-position: var(--fd-ss-focal, 50% 50%); } } & .fd-slide__overlay { position: absolute; inset: 0; background: var(--fd-ss-overlay, var(--fd-slide-scrim)); opacity: var(--fd-slide-overlay, 0); pointer-events: none; } & .fd-slide__content { max-width: var(--fd-ss-content-max, calc(var(--fd-narrow) * 0.84)); justify-items: var(--fd-ss-ta, start); text-align: var(--fd-ss-ta, start); & .fd-intro { justify-items: inherit; margin-inline: 0; text-align: inherit; } & .fd-actions { justify-content: var(--fd-ss-ta, start); } } & .fd-slide[data-position$="_center"] .fd-slide__content { max-width: var(--fd-ss-content-max, var(--fd-narrow)); } /* Slide illustration when a slide has no media (visual_type + gradient_theme). Shared with the scrolling banner's slides. */ & :is(.fd-slide__visual, .fd-banner-slide__visual) { position: absolute; inset: 0; z-index: -1; display: grid; align-items: center; justify-items: end; padding: max(var(--fd-gutter), min(5vw, 64px)); overflow: hidden; box-sizing: border-box; background: var(--fd-gradient); & .fd-mock { width: min(44%, 420px); box-shadow: var(--fd-shadow); } } & :is(.fd-slide, .fd-banner-slide) { &[data-position$="_right"] :is(.fd-slide__visual, .fd-banner-slide__visual) { justify-items: start; } &[data-position$="_center"] :is(.fd-slide__visual, .fd-banner-slide__visual) .fd-mock { display: none; } &[data-gradient="web"] :is(.fd-slide__visual, .fd-banner-slide__visual) { background: linear-gradient(135deg, var(--fd-primary), var(--fd-accent)); } &[data-gradient="brand"] :is(.fd-slide__visual, .fd-banner-slide__visual) { background: linear-gradient(135deg, var(--fd-accent), color-mix(in srgb, var(--fd-accent) 35%, var(--fd-bg))); } &[data-gradient="connect"] :is(.fd-slide__visual, .fd-banner-slide__visual) { background: linear-gradient(160deg, var(--fd-dark), color-mix(in srgb, var(--fd-accent) 45%, var(--fd-dark))); } &[data-gradient="crm"] :is(.fd-slide__visual, .fd-banner-slide__visual) { background: linear-gradient(135deg, var(--fd-surface-3), var(--fd-accent-soft)); } &[data-gradient="social"] :is(.fd-slide__visual, .fd-banner-slide__visual) { background: linear-gradient(45deg, var(--fd-accent), var(--fd-primary)); } &[data-gradient="seo"] :is(.fd-slide__visual, .fd-banner-slide__visual) { background: linear-gradient(180deg, var(--fd-surface-2), color-mix(in srgb, var(--fd-accent) 30%, var(--fd-surface-2))); } } /* ---- Typography controls ------------------------------------------- */ & .fd-slide__intro .fd-heading { color: var(--fd-ss-h-color, var(--fd-heading)); font-family: var(--fd-ss-h-font, var(--fd-heading-font)); font-weight: var(--fd-ss-h-weight, var(--fd-heading-weight)); line-height: var(--fd-ss-h-lh, 1.15); letter-spacing: var(--fd-ss-h-ls, -0.015em); text-transform: var(--fd-ss-h-transform, var(--theme-heading-transform, none)); } & .fd-slide__intro { & .fd-heading--medium { font-size: var(--fd-ss-h-size, var(--fd-h-medium)); } & .fd-heading--large { font-size: var(--fd-ss-h-size, var(--fd-h-large)); } & .fd-heading--extra_large { font-size: var(--fd-ss-h-size, var(--fd-h-extra-large)); } & .fd-heading--mega { font-size: var(--fd-ss-h-size, var(--fd-h-mega)); letter-spacing: var(--fd-ss-h-ls, -0.025em); } } & .fd-slide__intro .fd-eyebrow { color: var(--fd-ss-s-color, var(--fd-accent)); font-family: var(--fd-ss-s-font, var(--fd-font)); font-size: var(--fd-ss-sub-size, var(--fd-text-xs)); font-weight: var(--fd-ss-sub-weight, 600); line-height: var(--fd-ss-sub-lh, 1.4); letter-spacing: var(--fd-ss-s-ls, 0.08em); } & .fd-slide__text { color: var(--fd-ss-s-color, var(--fd-muted)); font-family: var(--fd-ss-s-font, var(--fd-font)); font-weight: var(--fd-ss-body-weight, var(--fd-body-weight)); line-height: var(--fd-ss-body-lh, 1.6); letter-spacing: var(--fd-ss-s-ls, normal); &.fd-slide__text--base { font-size: var(--fd-ss-body-size, var(--fd-text-base)); } &.fd-slide__text--medium { font-size: var(--fd-ss-body-size, var(--fd-text-lg)); } &.fd-slide__text--large { font-size: var(--fd-ss-body-size, calc(var(--fd-base-size) * 1.3125)); } } /* Heading highlight (the intro partial sets fd-highlight--none | underline | mark, --italic and, with a slide highlight colour, fd-highlight--custom + --fd-highlight-color). "underline" paints with the Theme Settings gradient; a highlight colour replaces it with a solid line in that colour. */ & :is(.fd-slide__intro, .fd-banner-slide__intro) mark.fd-highlight { color: var(--fd-highlight-color, var(--fd-accent)); } & :is(.fd-slide__intro, .fd-banner-slide__intro).fd-highlight--underline mark.fd-highlight { padding-bottom: 0.04em; background-image: var(--fd-gradient); background-position: 0 92%; background-repeat: no-repeat; background-size: 100% 0.14em; color: inherit; text-decoration: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; } & :is(.fd-slide__intro, .fd-banner-slide__intro).fd-highlight--underline.fd-highlight--custom mark.fd-highlight { background-image: linear-gradient(var(--fd-highlight-color), var(--fd-highlight-color)); } & :is(.fd-slide__intro, .fd-banner-slide__intro).fd-highlight--mark mark.fd-highlight { padding-inline: 0.12em; border-radius: var(--fd-radius-sm); background: var(--fd-accent-soft); } & :is(.fd-slide__intro, .fd-banner-slide__intro).fd-highlight--italic mark.fd-highlight { font-style: italic; } /* ---- Button controls (only the ones that are set) -------------------- */ & .fd-slideshow[data-ss-button] .fd-slide__actions .fd-button { box-sizing: border-box; } & .fd-slideshow[data-ss-button~="size"] .fd-slide__actions .fd-button { font-size: var(--fd-ss-btn-size); } /* The theme button has a minimum height, so a line height alone would never show: the height comes from the line height plus the button's own vertical padding. */ & .fd-slideshow[data-ss-button~="lh"] .fd-slide__actions .fd-button { min-height: 0; padding-block: var(--fd-ss-btn-py, calc((var(--fd-button-height) - 1.2em) / 2)); line-height: var(--fd-ss-btn-lh); } & .fd-slideshow[data-ss-button~="weight"] .fd-slide__actions .fd-button { font-weight: var(--fd-ss-btn-weight); } & .fd-slideshow[data-ss-button~="py"] .fd-slide__actions .fd-button { min-height: 0; padding-block: var(--fd-ss-btn-py); } & .fd-slideshow[data-ss-button~="px"] .fd-slide__actions .fd-button { padding-inline: var(--fd-ss-btn-px); } & .fd-slideshow[data-ss-button~="bw"] .fd-slide__actions .fd-button:not(.fd-button--underline) { border-width: var(--fd-ss-btn-bw); border-style: solid; } & .fd-slideshow[data-ss-button~="radius"] .fd-slide__actions .fd-button { border-radius: var(--fd-ss-btn-radius); } /* Colours apply to the slide's main (first) button. */ & .fd-slideshow[data-ss-button~="color"] .fd-slide__actions > .fd-button:first-child { color: var(--fd-ss-btn-color); } & .fd-slideshow[data-ss-button~="bg"] .fd-slide__actions > .fd-button:first-child:not(.fd-button--underline) { background: var(--fd-ss-btn-bg); } & .fd-slideshow[data-ss-button~="border"] .fd-slide__actions > .fd-button:first-child { border-color: var(--fd-ss-btn-border); text-decoration-color: var(--fd-ss-btn-border); } & .fd-slideshow[data-ss-button~="hover-color"] .fd-slide__actions > a.fd-button:first-child:is(:hover, :focus-visible) { color: var(--fd-ss-btn-hover-color); } & .fd-slideshow[data-ss-button~="hover-bg"] .fd-slide__actions > a.fd-button:first-child:not(.fd-button--underline):is(:hover, :focus-visible) { background: var(--fd-ss-btn-hover-bg); } /* ---- Controls row under the slides: previous, dots, next, pause ------ */ & .fd-slideshow__controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-top: 20px; } & .fd-slideshow__arrow { color: var(--fd-ss-controls-color, var(--fd-heading)); &:disabled { cursor: default; opacity: 0.4; } } /* ---- Cross-fade (data-transition="fade", set up by the runtime) ------- */ & .fd-slideshow[data-fade-ready] { & .fd-slideshow__slides { display: grid; } & .fd-slide { grid-area: 1 / 1; transition: opacity var(--fd-ss-duration, 500ms) var(--fd-ease), visibility var(--fd-ss-duration, 500ms); } & .fd-slide[data-inactive] { opacity: 0; visibility: hidden; pointer-events: none; } } /* ---- Media layout: split -------------------------------------------- */ & .fd-slideshow[data-media-layout="split"] { & .fd-slide { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--fd-gap) * 2); min-height: 0; padding-block: 0; padding-inline: var(--fd-ss-gutter, 0); overflow: visible; border-radius: 0; background: none; } & .fd-slide__media, & .fd-slide__visual { position: relative; inset: auto; z-index: auto; grid-area: 1 / 2; align-self: stretch; width: 100%; min-height: var(--fd-ss-media-h, var(--fd-slide-h)); border-radius: var(--fd-radius-image); } & .fd-slide__visual { justify-items: center; & .fd-mock { display: grid; width: min(72%, 420px); } } & .fd-slide__content { grid-area: 1 / 1; padding: 0; border-radius: 0; background: none; } & .fd-slide[data-position$="_right"] { & .fd-slide__media, & .fd-slide__visual { grid-column: 1; } & .fd-slide__content { grid-column: 2; } } & .fd-slide[data-position$="_center"] { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--fd-gap) * 1.5); & .fd-slide__media, & .fd-slide__visual { grid-area: 2 / 1; } & .fd-slide__content { grid-area: 1 / 1; } } } /* Full-width split keeps the section rhythm (the full-bleed default has none). */ & .fd-slideshow[data-media-layout="split"][data-vb-width="full"] { padding-block: var(--fd-section-space); & .fd-slide { padding-inline: var(--fd-ss-gutter, var(--fd-gutter)); } } /* ---- Media layout: full bleed (no panel; a soft scrim keeps text legible) */ & .fd-slideshow[data-media-layout="full_bleed"] { & .fd-slide[data-panel] .fd-slide__content { padding: 0; border-radius: 0; background: none; } & .fd-slide[data-panel="true"] .fd-slide__media::after { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--fd-ss-overlay, var(--fd-slide-scrim)) 72%, transparent), transparent 70%); content: ""; pointer-events: none; } & .fd-slide[data-panel="true"][data-position^="top"] .fd-slide__media::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--fd-ss-overlay, var(--fd-slide-scrim)) 72%, transparent), transparent 70%); } & .fd-slide[data-panel="true"][data-position^="middle"] .fd-slide__media::after { background: color-mix(in srgb, var(--fd-ss-overlay, var(--fd-slide-scrim)) 45%, transparent); } } /* ---- Presentation: apple_home ---------------------------------------- Centred heading, text and buttons above a large contained media frame. */ & .fd-slideshow[data-variant="apple_home"] { & .fd-slide { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); align-items: stretch; min-height: 0; padding: 0; padding-inline: var(--fd-ss-gutter, 0); overflow: visible; border-radius: 0; background: none; } & .fd-slide__content { order: -1; align-self: var(--fd-ss-x, center); max-width: var(--fd-ss-content-max, var(--fd-narrow)); padding: 0; border-radius: 0; background: none; } & .fd-slide__intro .fd-eyebrow { letter-spacing: var(--fd-ss-s-ls, 0.12em); } & .fd-slide__media, & .fd-slide__visual { position: relative; inset: auto; z-index: auto; height: var(--fd-ss-media-h, var(--fd-slide-h)); border-radius: var(--fd-radius-image); background: var(--fd-surface-2); } & .fd-slide__visual { justify-items: center; & .fd-mock { display: grid; width: min(56%, 520px); } } & .fd-slideshow__controls { margin-top: clamp(20px, 3vw, 32px); } } /* "Content position: bottom": the media frame comes first and the copy sits under it. */ & .fd-slideshow[data-variant="apple_home"][data-content-order="media-first"] .fd-slide__content { order: 1; } & .fd-slideshow[data-variant="apple_home"][data-vb-width="full"] { padding-block: var(--fd-section-space); & .fd-slide { padding-inline: var(--fd-ss-gutter, var(--fd-gutter)); } } /* ---- Tablet (and, unless overridden below, mobile) --------------------- */ @media (max-width: 989px) { & .fd-slide { align-items: var(--fd-ss-y-t, center); justify-items: var(--fd-ss-x-t, start); min-height: var(--fd-ss-media-h-t, var(--fd-slide-h)); padding-inline: var(--fd-ss-gutter-t, max(var(--fd-gutter), min(5vw, 64px))); } & .fd-slideshow[data-height="fixed_height"] .fd-slide { height: var(--fd-ss-media-h-t, var(--fd-slide-h)); } & .fd-slide__media :is(img, video) { object-position: var(--fd-ss-focal-t, 50% 50%); } & .fd-slide__content { justify-items: var(--fd-ss-ta-t, start); text-align: var(--fd-ss-ta-t, start); & .fd-actions { justify-content: var(--fd-ss-ta-t, start); } } & .fd-slide__intro { & .fd-heading { line-height: var(--fd-ss-h-lh-t, 1.15); } & .fd-heading--medium { font-size: var(--fd-ss-h-size-t, var(--fd-h-medium)); } & .fd-heading--large { font-size: var(--fd-ss-h-size-t, var(--fd-h-large)); } & .fd-heading--extra_large { font-size: var(--fd-ss-h-size-t, var(--fd-h-extra-large)); } & .fd-heading--mega { font-size: var(--fd-ss-h-size-t, var(--fd-h-mega)); } & .fd-eyebrow { font-size: var(--fd-ss-sub-size-t, var(--fd-text-xs)); } } & .fd-slide__text { &.fd-slide__text--base { font-size: var(--fd-ss-body-size-t, var(--fd-text-base)); } &.fd-slide__text--medium { font-size: var(--fd-ss-body-size-t, var(--fd-text-lg)); } &.fd-slide__text--large { font-size: var(--fd-ss-body-size-t, calc(var(--fd-base-size) * 1.3125)); } } /* Split stacks: media on top, text below. */ & .fd-slideshow[data-media-layout="split"] .fd-slide { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--fd-gap) * 1.25); & .fd-slide__media, & .fd-slide__visual { grid-area: 1 / 1; min-height: var(--fd-ss-media-h-t, min(var(--fd-slide-h), 62vw)); } & .fd-slide__content { grid-area: 2 / 1; } } & .fd-slideshow[data-variant="apple_home"] .fd-slide { padding-inline: var(--fd-ss-gutter-t, 0); & .fd-slide__content { align-self: var(--fd-ss-x-t, center); } & .fd-slide__media, & .fd-slide__visual { height: var(--fd-ss-media-h-t, min(var(--fd-slide-h), 62vw)); } } & .fd-slideshow[data-variant="apple_home"][data-vb-width="full"] .fd-slide { padding-inline: var(--fd-ss-gutter-t, var(--fd-gutter)); } } /* Tablet-only switches (mobile has its own). */ @media (min-width: 600px) and (max-width: 989px) { & .fd-slideshow[data-ss-flags~="hide-sub-t"] .fd-slide__intro .fd-eyebrow, & .fd-slideshow[data-ss-flags~="hide-body-t"] .fd-slide__text, & .fd-slideshow[data-ss-flags~="hide-arrows-t"] .fd-slideshow__arrow { display: none; } & .fd-slideshow[data-ss-flags~="full-button-t"] .fd-slide__actions { flex-direction: column; align-items: stretch; width: 100%; & .fd-button { width: 100%; } } } /* ---- Mobile ---------------------------------------------------------- */ @media (max-width: 599px) { & .fd-slideshow { --fd-slide-h: 480px; } & .fd-slideshow[data-height="small"] { --fd-slide-h: 360px; } & .fd-slideshow[data-height="medium"] { --fd-slide-h: 420px; } & .fd-slideshow[data-height="fixed_height"] { --fd-slide-h: 520px; } & .fd-slideshow[data-height="full_screen"] { --fd-slide-h: calc(100svh - var(--fd-header-height)); } & .fd-slide { align-items: var(--fd-ss-y-m, center); justify-items: var(--fd-ss-x-m, start); min-height: var(--fd-ss-media-h-m, var(--fd-slide-h)); padding: 20px; padding-inline: var(--fd-ss-gutter-m, 20px); } & .fd-slideshow[data-height="fixed_height"] .fd-slide { height: var(--fd-ss-media-h-m, var(--fd-slide-h)); } & .fd-slide__media :is(img, video) { object-position: var(--fd-ss-focal-m, 50% 50%); } & .fd-slide__content { justify-items: var(--fd-ss-ta-m, start); text-align: var(--fd-ss-ta-m, start); & .fd-actions { justify-content: var(--fd-ss-ta-m, start); } } & .fd-slide__intro { & .fd-heading { line-height: var(--fd-ss-h-lh-m, 1.15); } & .fd-heading--medium { font-size: var(--fd-ss-h-size-m, var(--fd-h-medium)); } & .fd-heading--large { font-size: var(--fd-ss-h-size-m, var(--fd-h-large)); } & .fd-heading--extra_large { font-size: var(--fd-ss-h-size-m, var(--fd-h-extra-large)); } & .fd-heading--mega { font-size: var(--fd-ss-h-size-m, var(--fd-h-mega)); } & .fd-eyebrow { font-size: var(--fd-ss-sub-size-m, var(--fd-text-xs)); } } & .fd-slide__text { &.fd-slide__text--base { font-size: var(--fd-ss-body-size-m, var(--fd-text-base)); } &.fd-slide__text--medium { font-size: var(--fd-ss-body-size-m, var(--fd-text-lg)); } &.fd-slide__text--large { font-size: var(--fd-ss-body-size-m, calc(var(--fd-base-size) * 1.3125)); } } & .fd-slideshow[data-ss-flags~="hide-sub-m"] .fd-slide__intro .fd-eyebrow, & .fd-slideshow[data-ss-flags~="hide-body-m"] .fd-slide__text, & .fd-slideshow[data-ss-flags~="hide-arrows-m"] .fd-slideshow__arrow { display: none; } & .fd-slideshow[data-ss-flags~="full-button-m"] .fd-slide__actions { flex-direction: column; align-items: stretch; width: 100%; & .fd-button { width: 100%; } } & .fd-slideshow[data-media-layout="split"] .fd-slide { padding: 0; padding-inline: var(--fd-ss-gutter-m, 0); & .fd-slide__media, & .fd-slide__visual { min-height: var(--fd-ss-media-h-m, min(var(--fd-slide-h), 75vw)); } } & .fd-slideshow[data-media-layout="split"][data-vb-width="full"] .fd-slide { padding-inline: var(--fd-ss-gutter-m, var(--fd-gutter)); } & .fd-slideshow[data-variant="apple_home"] .fd-slide { padding: 0; padding-inline: var(--fd-ss-gutter-m, 0); & .fd-slide__content { align-self: var(--fd-ss-x-m, center); } & .fd-slide__media, & .fd-slide__visual { height: var(--fd-ss-media-h-m, min(var(--fd-slide-h), 75vw)); } } & .fd-slideshow[data-variant="apple_home"][data-vb-width="full"] .fd-slide { padding-inline: var(--fd-ss-gutter-m, var(--fd-gutter)); } & .fd-slide__visual .fd-mock { display: none; } /* apple_home with "content below images": the frame comes first. */ & .fd-slideshow[data-variant="apple_home"][data-text-below="true"] .fd-slide__content { order: 1; } /* "Show content below images on mobile": image first, then the text on the section. */ & .fd-slideshow[data-text-below="true"]:not([data-variant="apple_home"]) { & .fd-slide { display: flex; flex-direction: column; align-items: stretch; gap: 20px; height: auto; min-height: 0; padding: 0; overflow: visible; border-radius: 0; background: none; } & :is(.fd-slide__media, .fd-slide__visual) { position: relative; inset: auto; z-index: auto; height: var(--fd-ss-media-h-m, auto); aspect-ratio: 4 / 3; border-radius: var(--fd-radius-image); } & .fd-slide__overlay { display: none; } & .fd-slide__content { align-self: var(--fd-ss-x-m, stretch); max-width: none; padding: 0; padding-inline: var(--fd-ss-gutter-m, 0); border-radius: 0; background: none; } /* A full-bleed hero has no section gutter, so the text below the image takes one. */ &[data-vb-width="full"] .fd-slide__content { padding-inline: var(--fd-ss-gutter-m, var(--fd-gutter)); } &[data-vb-width="full"] :is(.fd-slide__media, .fd-slide__visual) { border-radius: 0; } } } } /* 6.x Scrolling Banner (scrolling_banner) — renderer scrolling-banner */ [data-mv-theme-root="movadly-light"] { /* Image banner (default variant) */ & .fd-scroll-banner { --fd-slide-scrim: var(--fd-bg); --fd-slide-h: 680px; } & .fd-scroll-banner[data-height="small"] { --fd-slide-h: 360px; } & .fd-scroll-banner[data-height="medium"] { --fd-slide-h: 520px; } & .fd-scroll-banner[data-height="full_screen"] { --fd-slide-h: calc(100svh - var(--fd-header-height)); } /* Banner slide placement: vertical from the first word of the position, horizontal from the second. (The shared slide box lives with the slideshow.) */ & .fd-banner-slide { &[data-position^="top"] { align-items: start; } &[data-position^="bottom"] { align-items: end; } &[data-position$="_center"] { justify-items: center; } &[data-position$="_right"] { justify-items: end; } } & .fd-banner-slide__media, & .fd-banner-slide__overlay { position: absolute; inset: 0; z-index: -1; } & .fd-banner-slide__media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; } /* enable_parallax: the runtime writes --fd-banner-drift while the page scrolls; the media is enlarged a little so its edges never show. */ & .fd-scroll-banner[data-parallax-ready] .fd-banner-slide__media :is(img, video) { scale: 1.16; translate: 0 var(--fd-banner-drift, 0%); } & .fd-banner-slide__overlay { background: var(--fd-slide-scrim); opacity: var(--fd-slide-overlay, 0); } & .fd-banner-slide[data-position$="_center"] .fd-banner-slide__content { max-width: var(--fd-narrow); } & .fd-banner-slide__content { &[data-align="center"] { justify-items: center; text-align: center; & .fd-actions { justify-content: center; } } &[data-align="right"] { justify-items: end; text-align: end; & .fd-actions { justify-content: flex-end; } } } & .fd-scroll-banner__viewport { container-type: inline-size; overflow: hidden; border-radius: var(--fd-radius-image); } & .fd-scroll-banner__track, & .fd-scroll-banner__group { display: flex; width: max-content; } /* Every slide is exactly as wide as the banner. */ & .fd-banner-slide { flex: none; width: 100cqi; border-radius: 0; } & .fd-scroll-banner[data-animate="true"] .fd-scroll-banner__track { animation: fd-media-marquee var(--fd-banner-duration, 30s) linear infinite; } & .fd-scroll-banner__viewport:is(:hover, :focus-within) .fd-scroll-banner__track, & .fd-scroll-banner[data-paused="true"] .fd-scroll-banner__track { animation-play-state: paused; } & .fd-scroll-banner[data-zoom="true"] .fd-banner-slide__media :is(img, video) { transition: transform calc(var(--fd-motion-fast) * 1.25) var(--fd-ease); } & .fd-scroll-banner[data-zoom="true"] .fd-banner-slide:hover .fd-banner-slide__media :is(img, video) { transform: scale(1.04); } & .fd-scroll-banner__toggle { display: grid; margin-block-start: 12px; margin-inline-start: auto; } @media (max-width: 599px) { & .fd-scroll-banner { --fd-slide-h: 520px; } & .fd-scroll-banner[data-height="small"] { --fd-slide-h: 320px; } & .fd-scroll-banner[data-height="medium"] { --fd-slide-h: 420px; } & .fd-scroll-banner[data-height="full_screen"] { --fd-slide-h: 80svh; } & .fd-banner-slide { padding: 20px; } & .fd-scroll-banner[data-mobile-position="top"] .fd-banner-slide { align-items: start; } & .fd-scroll-banner[data-mobile-position="middle"] .fd-banner-slide { align-items: center; } & .fd-scroll-banner[data-mobile-position="bottom"] .fd-banner-slide { align-items: end; } & .fd-scroll-banner[data-mobile-align="left"] .fd-banner-slide { justify-items: start; } & .fd-scroll-banner[data-mobile-align="center"] .fd-banner-slide { justify-items: center; } & .fd-scroll-banner[data-mobile-align="right"] .fd-banner-slide { justify-items: end; } & .fd-scroll-banner[data-mobile-align] .fd-banner-slide__content { & .fd-intro { margin-inline: 0; } } & .fd-scroll-banner[data-mobile-align="left"] .fd-banner-slide__content { justify-items: start; text-align: start; & .fd-intro { justify-items: start; text-align: start; } & .fd-actions { justify-content: flex-start; } } & .fd-scroll-banner[data-mobile-align="center"] .fd-banner-slide__content { justify-items: center; text-align: center; & .fd-intro { justify-items: center; margin-inline: auto; text-align: center; } & .fd-actions { justify-content: center; } } & .fd-scroll-banner[data-mobile-align="right"] .fd-banner-slide__content { justify-items: end; text-align: end; & .fd-intro { justify-items: end; margin-inline-start: auto; text-align: end; } & .fd-actions { justify-content: flex-end; } } } /* Text marquee variant */ & .fd-marquee { --fd-marquee-duration: 34s; --fd-marquee-gap: calc(var(--fd-gap) * 1.25); } & .fd-marquee[data-speed="slow"] { --fd-marquee-duration: 48s; } & .fd-marquee[data-speed="fast"] { --fd-marquee-duration: 22s; } & .fd-marquee__label { margin-bottom: 16px; } & .fd-marquee__band { display: flex; gap: 16px; align-items: center; padding-block: var(--fd-marquee-pad-top, 30px) var(--fd-marquee-pad-bottom, 30px); border-block: 1px solid var(--fd-line); } & .fd-marquee__viewport { flex: 1; min-width: 0; overflow: hidden; } /* The loop always travels left-to-right in the DOM; items keep their own direction. */ & .fd-marquee__track { display: flex; width: max-content; direction: ltr; } & .fd-marquee__group { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; } & .fd-marquee__item { display: inline-flex; gap: var(--fd-marquee-gap); align-items: center; padding-inline-end: var(--fd-marquee-gap); color: var(--fd-heading); font-size: clamp(calc(var(--fd-base-size) * 1.125), calc(var(--fd-base-size) + 0.6vw), calc(var(--fd-base-size) * 1.5)); font-weight: var(--fd-heading-weight); line-height: 1.3; white-space: nowrap; unicode-bidi: plaintext; } & .fd-marquee[data-separator="dot"] .fd-marquee__item::after, & .fd-marquee[data-separator="line"] .fd-marquee__item::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--fd-accent); } & .fd-marquee[data-separator="line"] .fd-marquee__item::after { width: 20px; height: 1px; border-radius: 0; background: var(--fd-line-2); } & .fd-marquee[data-animate="true"] .fd-marquee__track { animation: fd-media-marquee var(--fd-marquee-duration) linear infinite; } & .fd-marquee[data-direction="right"] .fd-marquee__track { animation-direction: reverse; } & .fd-marquee[data-pause-hover="true"] .fd-marquee__viewport:hover .fd-marquee__track, & .fd-marquee[data-paused="true"] .fd-marquee__track { animation-play-state: paused; } /* Static marquee (animation off, or a single item): items wrap and centre. */ & .fd-marquee[data-animate="false"] { & .fd-marquee__track { width: auto; direction: inherit; } & .fd-marquee__group { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: 12px; } & .fd-marquee__item:last-child { padding-inline-end: 0; &::after { display: none; } } } @media (prefers-reduced-motion: reduce) { /* No loop: the image banner becomes a row to scroll by hand... */ & .fd-scroll-banner[data-animate] .fd-scroll-banner__track { animation: none; } & .fd-scroll-banner__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; } & .fd-banner-slide { scroll-snap-align: start; } /* ...and the text marquee wraps like the static one. */ & .fd-marquee[data-animate] .fd-marquee__track { width: auto; animation: none; direction: inherit; } & .fd-marquee__group { flex: 1; flex-wrap: wrap; justify-content: center; row-gap: 12px; } & :is(.fd-scroll-banner__group, .fd-marquee__group, .fd-marquee__item)[aria-hidden="true"], & :is(.fd-scroll-banner__toggle, .fd-marquee__toggle) { display: none; } } } /* 6.x Video (video) — renderer video */ [data-mv-theme-root="movadly-light"] { & .fd-video__frame { position: relative; box-sizing: border-box; width: 100%; max-width: var(--fd-video-max, 1040px); margin: 0 auto; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--fd-radius-image); background: var(--fd-surface-2); } & .fd-video[data-size="small"] { --fd-video-max: 780px; } & .fd-video[data-size="medium"] { --fd-video-max: 980px; } & .fd-video[data-size="large"] { --fd-video-max: 1180px; } & .fd-video[data-size="full_width"] { --fd-video-max: 100%; } & .fd-video[data-align="left"] .fd-video__frame { margin-inline: 0 auto; } & .fd-video[data-align="right"] .fd-video__frame { margin-inline: auto 0; } & .fd-video[data-ratio="4_3"] .fd-video__frame { aspect-ratio: 4 / 3; } & .fd-video[data-ratio="square"] .fd-video__frame { aspect-ratio: 1 / 1; } & .fd-video[data-ratio="vertical"] .fd-video__frame { max-width: min(var(--fd-video-max, 1040px), 420px); aspect-ratio: 9 / 16; } & .fd-video__frame :is(iframe, video, .fd-video__cover) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; object-fit: cover; } & .fd-video__frame video { background: var(--fd-dark); object-fit: contain; } /* "Adapt to video" (files only): the video keeps its own proportions. */ & .fd-video[data-ratio="adapt"] .fd-video__frame { aspect-ratio: auto; & video { position: static; height: auto; } } & .fd-video[data-ratio="adapt"] .fd-video__frame:has(.fd-video__cover) { aspect-ratio: 16 / 9; } /* The runtime measured the file: the frame takes its proportions (see media.js). */ & .fd-video[data-ratio="adapt"] .fd-video__frame[data-natural-ratio] { aspect-ratio: var(--fd-video-natural, 16 / 9); & video { position: absolute; height: 100%; } } /* "Show controls" off: the Foundation play / pause button in place of the native bar. */ & .fd-video__toggle { position: absolute; inset-block-end: 16px; inset-inline-end: 16px; z-index: 2; width: 44px; height: 44px; & .fd-icon--resume { fill: currentColor; } } /* Play control on the cover (a link without JavaScript, a button with it). */ & .fd-video__play { position: absolute; inset: 0; z-index: 1; display: grid; width: 76px; height: 76px; margin: auto; padding: 0; place-items: center; border: 0; border-radius: 50%; background: var(--fd-accent); color: var(--fd-accent-ink); text-decoration: none; cursor: pointer; transition: transform var(--fd-motion-fast) var(--fd-ease), background-color var(--fd-motion-fast) var(--fd-ease); & .fd-icon { width: 30px; height: 30px; fill: currentColor; } &:hover { transform: scale(1.05); } &:focus-visible { border-radius: 50%; } } & .fd-video__play--simple { background: color-mix(in srgb, var(--fd-dark) 40%, transparent); color: var(--fd-bg); } & .fd-video__play--dark { border-radius: var(--fd-radius); background: var(--fd-dark); color: var(--fd-bg); } & .fd-video__play--light { border-radius: var(--fd-radius); background: var(--fd-bg); color: var(--fd-dark); } & .fd-video__notice { margin-top: 16px; } /* Parallax (enable_parallax): the runtime writes --fd-video-drift while the page scrolls; the media is slightly enlarged so its edges never show. */ & .fd-video[data-parallax-ready] .fd-video__frame :is(video, .fd-video__cover) { scale: 1.14; } & .fd-video[data-parallax-ready][data-parallax="vertical"] .fd-video__frame :is(video, .fd-video__cover) { translate: 0 var(--fd-video-drift, 0%); } & .fd-video[data-parallax-ready][data-parallax="horizontal"] .fd-video__frame :is(video, .fd-video__cover) { translate: var(--fd-video-drift, 0%) 0; } @media (prefers-reduced-motion: reduce) { & .fd-video[data-parallax-ready] .fd-video__frame :is(video, .fd-video__cover) { scale: none; translate: none; } } } /* 6.x Sector Slideshow (sector_slideshow, animated_hero) — renderer animated-network-hero */ [data-mv-theme-root="movadly-light"] { & .fd-sector-slides__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: calc(var(--fd-gap) * 1.125); padding-bottom: 16px; border-bottom: 1px solid var(--fd-line); } & .fd-sector-slides__tab { min-height: 40px; padding: 8px 16px; border: 1px solid var(--fd-line-2); border-radius: var(--fd-radius-pill); background: var(--fd-surface); color: var(--fd-heading); font: inherit; font-size: var(--fd-text-md); font-weight: var(--fd-button-weight); cursor: pointer; transition: background-color var(--fd-motion-fast) var(--fd-ease), color var(--fd-motion-fast) var(--fd-ease), border-color var(--fd-motion-fast) var(--fd-ease); &:hover { border-color: var(--fd-heading); } &[aria-selected="true"] { border-color: transparent; background: var(--fd-button-bg); color: var(--fd-button-text); } } & .fd-sector-slides__panels { display: grid; gap: calc(var(--fd-gap) * 2); } & .fd-sector-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: calc(var(--fd-gap) * 1.75); align-items: center; } & .fd-sector-panel[data-has-image="false"] { grid-template-columns: minmax(0, 1fr); max-width: var(--fd-narrow); } & .fd-sector-panel__body { display: grid; gap: 16px; justify-items: start; } & .fd-sector-panel__title { font-size: var(--fd-h-medium); } & .fd-sector-panel__text { font-size: calc(var(--fd-base-size) * 1.0625); } @media (max-width: 989px) { & .fd-sector-panel { grid-template-columns: minmax(0, 1fr); } } } /* 6.x Grid Banner (grid_banner) — renderer grid-banner * * Every card design control arrives as a --fd-card-* custom property on the card (desktop, * -tablet, -mobile; a smaller device falls back to the larger one). Each rule reads it * with the presentation's own value (--fd-gb-*) as the fallback, so an unset control keeps * the Foundation design and a saved 0 (min height, padding, offset) is applied as 0. */ [data-mv-theme-root="movadly-light"] { & .fd-banner-card { --fd-card-pad: clamp(20px, 2.4vw, 28px); /* Presentation defaults read by the design controls below. */ --fd-gb-min-h: 0px; --fd-gb-title: calc(1.25rem * var(--fd-heading-scale)); --fd-gb-valign: flex-start; position: relative; isolation: isolate; box-sizing: border-box; display: flex; flex-direction: column; justify-content: var(--fd-gb-valign); gap: 16px; min-width: 0; min-height: var(--fd-card-min-h, var(--fd-gb-min-h)); aspect-ratio: var(--fd-card-ratio, auto); padding: var(--fd-card-pad-y, var(--fd-card-pad)) var(--fd-card-pad-x, var(--fd-card-pad)); overflow: hidden; border: 1px solid var(--fd-card-border); border-radius: var(--fd-radius); background: var(--fd-card-bg, var(--fd-surface)); box-shadow: var(--fd-card-shadow); color: var(--fd-text); } & .fd-banner-card[data-accent="soft"] { border-color: transparent; background: var(--fd-card-bg, var(--fd-accent-soft)); } & .fd-banner-card[data-accent="glow"] { border-color: var(--fd-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fd-accent) 14%, transparent); } /* Content placement (content_vertical_position / content_horizontal_position). */ & .fd-banner-card { &[data-valign="top"] { justify-content: flex-start; } &[data-valign="middle"] { justify-content: center; } &[data-valign="bottom"] { justify-content: flex-end; } &[data-halign="left"] { align-items: flex-start; text-align: start; } &[data-halign="center"] { align-items: center; text-align: center; } &[data-halign="right"] { align-items: flex-end; text-align: end; } &[data-halign="center"] .fd-banner-card__content { justify-items: center; } &[data-halign="right"] .fd-banner-card__content { justify-items: end; } &[data-halign="center"] .fd-actions { justify-content: center; } &[data-halign="right"] .fd-actions { justify-content: flex-end; } } & .fd-banner-card[data-halign] > :is(.fd-banner-card__media, .fd-mock) { align-self: stretch; } & .fd-banner-card__content { display: grid; gap: 10px; justify-items: start; width: min(100%, var(--fd-card-content-w, 100%)); min-width: 0; } & .fd-banner-card__title { font-family: var(--fd-card-heading-font, var(--fd-heading-font)); font-size: var(--fd-card-heading-size, var(--fd-gb-title)); font-weight: var(--fd-card-heading-weight, var(--fd-heading-weight)); line-height: var(--fd-card-heading-line, 1.25); text-decoration-line: var(--fd-card-underline, none); text-decoration-color: var(--fd-card-underline-color, var(--fd-accent)); text-decoration-thickness: var(--fd-card-underline-thickness, 2px); text-underline-offset: var(--fd-card-underline-offset, 6px); } & .fd-banner-card__text { max-width: var(--fd-card-body-w, 100%); font-family: var(--fd-card-body-font, var(--fd-font)); font-size: var(--fd-card-body-size, var(--fd-text-base)); font-weight: var(--fd-card-body-weight, var(--fd-body-weight)); line-height: var(--fd-card-body-line, 1.6); } & .fd-banner-card__actions { margin-top: 6px; } /* Media in the flow of the card sits flush with its top edge. */ & .fd-banner-card[data-layer="flow"] .fd-banner-card__media { position: relative; margin: calc(-1 * var(--fd-card-pad-y, var(--fd-card-pad))) calc(-1 * var(--fd-card-pad-x, var(--fd-card-pad))) 0; overflow: hidden; aspect-ratio: 16 / 10; background: var(--fd-surface-2); } & .fd-banner-card__media :is(img, video) { display: block; width: 100%; height: 100%; object-fit: var(--fd-card-fit, cover); object-position: var(--fd-card-focal, center); } & .fd-banner-card__overlay { position: absolute; inset: 0; background: var(--fd-card-overlay, var(--fd-dark)); opacity: var(--fd-card-overlay-opacity, 0.4); pointer-events: none; } & .fd-banner-card > .fd-mock { align-self: stretch; } & .fd-banner-card__icon img { width: 22px; height: 22px; object-fit: contain; } & .fd-banner-card__toggle { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 1; width: 40px; height: 40px; & .fd-icon--resume { fill: currentColor; } } /* Default variant: the feature card on one side, the others stacked beside it. */ & .fd-grid-banner__layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--fd-gap); } & .fd-grid-banner__layout[data-count="1"] { grid-template-columns: minmax(0, 1fr); } & .fd-grid-banner__layout:not([data-count="1"]) { & .fd-banner-card[data-feature="true"] { grid-column: 1; grid-row: 1 / span var(--fd-side-count, 1); } & .fd-banner-card[data-feature="false"] { grid-column: 2; } } & .fd-grid-banner[data-layout="feature_right"] .fd-grid-banner__layout:not([data-count="1"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); & .fd-banner-card[data-feature="true"] { grid-column: 2; } & .fd-banner-card[data-feature="false"] { grid-column: 1; } } & .fd-banner-card[data-feature="true"] { --fd-gb-title: calc(clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem) * var(--fd-heading-scale)); & .fd-banner-card__media { flex: 1; min-height: 240px; aspect-ratio: auto; } } @media (max-width: 989px) { & .fd-grid-banner .fd-grid-banner__layout:not([data-count="1"]) { grid-template-columns: minmax(0, 1fr); & .fd-banner-card[data-feature] { grid-column: auto; grid-row: auto; } } } /* Bento variant: every measure comes from a custom property set per section and card. */ & .fd-bento { display: grid; grid-template-columns: repeat(var(--fd-bento-cols, 4), minmax(0, 1fr)); grid-auto-rows: minmax(var(--fd-bento-row, 0px), auto); grid-auto-flow: dense; gap: var(--fd-bento-gap, var(--fd-gap)); } & .fd-bento .fd-banner-card { --fd-gb-min-h: 220px; --fd-gb-title: calc(1.375rem * var(--fd-heading-scale)); grid-column: span var(--fd-card-span, 1); grid-row: span var(--fd-card-rows, 1); align-items: flex-start; text-align: start; } & .fd-bento .fd-banner-card[data-size="feature"] { --fd-gb-title: calc(clamp(1.5rem, 1.3rem + 0.8vw, 2rem) * var(--fd-heading-scale)); } /* Image and video fill a bento card behind its content, under an overlay. */ & .fd-bento .fd-banner-card[data-layer="background"] { border-color: transparent; background: var(--fd-card-bg, var(--fd-dark)); box-shadow: none; & .fd-banner-card__media { position: absolute; inset: 0; z-index: -2; margin: 0; } & .fd-banner-card__overlay { z-index: -1; } /* The accent eyebrow is unreadable on a photo: it takes the card's light text. */ & .fd-eyebrow { color: var(--fd-text); } } /* The glow accent still rings a photo card (soft only tints a card without a photo). */ & .fd-bento .fd-banner-card[data-layer="background"][data-accent="glow"] { border-color: var(--fd-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fd-accent) 14%, transparent); } /* Bento horizontal gutter (inline_gutter_*): the platform pads the content column with --theme-side-spacing, so the section redefines it. Each device is independent. */ @media (min-width: 990px) { & .fd-grid-banner[data-gb-gutter~="d"] { --theme-side-spacing: var(--fd-gb-gutter); --fd-gutter: var(--fd-gb-gutter); } } /* Bento section padding per device (section_padding_*_tablet / _mobile). With the module's own spacing (layout v1, "preserve module spacing") the section padding is replaced directly. Under the platform spacing modes the platform pads the section with !important, so the difference to the wanted value is applied as a block margin on the content column instead: the content then sits exactly where the saved padding puts it. --fd-gb-platform-* mirrors the platform's value per mode. */ & .fd-grid-banner[data-gb-pad] { --fd-gb-platform-top: var(--theme-section-spacing, var(--fd-section-space)); --fd-gb-platform-bottom: var(--theme-section-spacing, var(--fd-section-space)); &[data-vb-spacing="none"] { --fd-gb-platform-top: 0px; --fd-gb-platform-bottom: 0px; } &[data-vb-spacing="compact"] { --fd-gb-platform-top: calc(var(--theme-section-spacing, var(--fd-section-space)) * .5); --fd-gb-platform-bottom: calc(var(--theme-section-spacing, var(--fd-section-space)) * .5); } &[data-vb-spacing="spacious"] { --fd-gb-platform-top: calc(var(--theme-section-spacing, var(--fd-section-space)) * 1.5); --fd-gb-platform-bottom: calc(var(--theme-section-spacing, var(--fd-section-space)) * 1.5); } &[data-vb-spacing="custom"] { --fd-gb-platform-top: var(--vb-section-space-top, var(--theme-section-spacing, var(--fd-section-space))); --fd-gb-platform-bottom: var(--vb-section-space-bottom, var(--theme-section-spacing, var(--fd-section-space))); } } @media (min-width: 600px) and (max-width: 989px) { & .fd-grid-banner[data-gb-gutter~="t"] { --theme-side-spacing: var(--fd-gb-gutter-t); --fd-gutter: var(--fd-gb-gutter-t); } & .fd-grid-banner[data-gb-pad~="top-t"] { padding-block-start: var(--fd-gb-pad-top-t); } & .fd-grid-banner[data-gb-pad~="bottom-t"] { padding-block-end: var(--fd-gb-pad-bottom-t); } & .fd-grid-banner[data-vb-layout="2"]:not([data-vb-spacing="preserve_module_spacing"]) { &[data-gb-pad~="top-t"] > .fd-inner { margin-block-start: calc(var(--fd-gb-pad-top-t) - var(--fd-gb-platform-top)); } &[data-gb-pad~="bottom-t"] > .fd-inner { margin-block-end: calc(var(--fd-gb-pad-bottom-t) - var(--fd-gb-platform-bottom)); } } } @media (max-width: 599px) { & .fd-grid-banner[data-gb-gutter~="m"] { --theme-side-spacing: var(--fd-gb-gutter-m); --fd-gutter: var(--fd-gb-gutter-m); } & .fd-grid-banner[data-gb-pad~="top-m"] { padding-block-start: var(--fd-gb-pad-top-m); } & .fd-grid-banner[data-gb-pad~="bottom-m"] { padding-block-end: var(--fd-gb-pad-bottom-m); } & .fd-grid-banner[data-vb-layout="2"]:not([data-vb-spacing="preserve_module_spacing"]) { &[data-gb-pad~="top-m"] > .fd-inner { margin-block-start: calc(var(--fd-gb-pad-top-m) - var(--fd-gb-platform-top)); } &[data-gb-pad~="bottom-m"] > .fd-inner { margin-block-end: calc(var(--fd-gb-pad-bottom-m) - var(--fd-gb-platform-bottom)); } } } @media (max-width: 989px) { & .fd-bento { grid-template-columns: repeat(var(--fd-bento-cols-tablet, 2), minmax(0, 1fr)); grid-auto-rows: minmax(var(--fd-bento-row-tablet, var(--fd-bento-row, 0px)), auto); } & .fd-bento .fd-banner-card { --fd-gb-min-h: 200px; --fd-gb-title: calc(1.3125rem * var(--fd-heading-scale)); grid-column: span var(--fd-card-span-tablet, 1); grid-row: span var(--fd-card-rows-tablet, 1); } & .fd-banner-card { min-height: var(--fd-card-min-h-tablet, var(--fd-card-min-h, var(--fd-gb-min-h))); padding: var(--fd-card-pad-y-tablet, var(--fd-card-pad-y, var(--fd-card-pad))) var(--fd-card-pad-x-tablet, var(--fd-card-pad-x, var(--fd-card-pad))); & .fd-banner-card__content { width: min(100%, var(--fd-card-content-w-tablet, var(--fd-card-content-w, 100%))); } & .fd-banner-card__media :is(img, video) { object-position: var(--fd-card-focal-tablet, var(--fd-card-focal, center)); } & .fd-banner-card__title { font-size: var(--fd-card-heading-size-tablet, var(--fd-card-heading-size, var(--fd-gb-title))); line-height: var(--fd-card-heading-line-tablet, var(--fd-card-heading-line, 1.25)); } & .fd-banner-card__text { max-width: var(--fd-card-body-w-tablet, var(--fd-card-body-w, 100%)); font-size: var(--fd-card-body-size-tablet, var(--fd-card-body-size, var(--fd-text-base))); line-height: var(--fd-card-body-line-tablet, var(--fd-card-body-line, 1.6)); } } & .fd-banner-card[data-layer="flow"] .fd-banner-card__media { margin: calc(-1 * var(--fd-card-pad-y-tablet, var(--fd-card-pad-y, var(--fd-card-pad)))) calc(-1 * var(--fd-card-pad-x-tablet, var(--fd-card-pad-x, var(--fd-card-pad)))) 0; } } @media (max-width: 599px) { & .fd-bento { grid-template-columns: repeat(var(--fd-bento-cols-mobile, 1), minmax(0, 1fr)); grid-auto-rows: minmax(var(--fd-bento-row-mobile, var(--fd-bento-row-tablet, var(--fd-bento-row, 0px))), auto); } & .fd-bento .fd-banner-card { --fd-gb-min-h: 180px; --fd-gb-title: calc(1.25rem * var(--fd-heading-scale)); grid-column: span var(--fd-card-span-mobile, 1); grid-row: span var(--fd-card-rows-mobile, 1); } & .fd-banner-card { min-height: var(--fd-card-min-h-mobile, var(--fd-card-min-h-tablet, var(--fd-card-min-h, var(--fd-gb-min-h)))); padding: var(--fd-card-pad-y-mobile, var(--fd-card-pad-y-tablet, var(--fd-card-pad-y, var(--fd-card-pad)))) var(--fd-card-pad-x-mobile, var(--fd-card-pad-x-tablet, var(--fd-card-pad-x, var(--fd-card-pad)))); & .fd-banner-card__content { width: min(100%, var(--fd-card-content-w-mobile, var(--fd-card-content-w-tablet, var(--fd-card-content-w, 100%)))); } & .fd-banner-card__media :is(img, video) { object-position: var(--fd-card-focal-mobile, var(--fd-card-focal-tablet, var(--fd-card-focal, center))); } & .fd-banner-card__title { font-size: var(--fd-card-heading-size-mobile, var(--fd-card-heading-size-tablet, var(--fd-card-heading-size, var(--fd-gb-title)))); line-height: var(--fd-card-heading-line-mobile, var(--fd-card-heading-line-tablet, var(--fd-card-heading-line, 1.25))); } & .fd-banner-card__text { max-width: var(--fd-card-body-w-mobile, var(--fd-card-body-w-tablet, var(--fd-card-body-w, 100%))); font-size: var(--fd-card-body-size-mobile, var(--fd-card-body-size-tablet, var(--fd-card-body-size, var(--fd-text-base)))); line-height: var(--fd-card-body-line-mobile, var(--fd-card-body-line-tablet, var(--fd-card-body-line, 1.6))); } } & .fd-banner-card[data-layer="flow"] .fd-banner-card__media { margin: calc(-1 * var(--fd-card-pad-y-mobile, var(--fd-card-pad-y-tablet, var(--fd-card-pad-y, var(--fd-card-pad))))) calc(-1 * var(--fd-card-pad-x-mobile, var(--fd-card-pad-x-tablet, var(--fd-card-pad-x, var(--fd-card-pad))))) 0; } } /* Decorative mock: a neutral wireframe of a browser, a dashboard or a list. */ & .fd-mock { display: grid; gap: 12px; min-height: 140px; padding: 12px; border: 1px solid var(--fd-line); border-radius: var(--fd-radius-sm); background: var(--fd-surface); } & .fd-mock__bar { display: flex; gap: 6px; & i { width: 8px; height: 8px; border-radius: 50%; background: var(--fd-line-2); } } & .fd-mock__body { display: grid; gap: 8px; align-content: start; & span { display: block; height: 10px; border-radius: var(--fd-radius-sm); background: var(--fd-line-2); } } & .fd-mock--browser .fd-mock__body span { &:nth-child(1) { height: 52px; background: var(--fd-accent-soft); } &:nth-child(2) { width: 85%; } &:nth-child(3) { width: 65%; } &:nth-child(4) { width: 40%; } } & .fd-mock--dashboard .fd-mock__body { display: flex; gap: 10px; align-items: flex-end; height: 96px; & span { flex: 1; height: 45%; border-radius: var(--fd-radius-sm) var(--fd-radius-sm) 0 0; } & span:nth-child(2) { height: 75%; } & span:nth-child(3) { height: 58%; } & span:nth-child(4) { height: 92%; background: var(--fd-accent); } } & .fd-mock--list .fd-mock__body { gap: 12px; & span { position: relative; width: 88%; margin-inline-start: 22px; } & span::before { content: ""; position: absolute; inset-block-start: -2px; inset-inline-start: -22px; width: 14px; height: 14px; border-radius: 50%; background: var(--fd-accent-soft); box-shadow: inset 0 0 0 1px var(--fd-accent); } & span:nth-child(2) { width: 70%; } & span:nth-child(3) { width: 80%; } & span:nth-child(4) { width: 55%; } } /* Swatches: the theme's own colours (slideshow "brand" visual). */ & .fd-mock--swatches .fd-mock__body { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; & span { width: auto; height: 72px; } & span:nth-child(1) { background: var(--fd-accent); } & span:nth-child(2) { background: var(--fd-primary); } & span:nth-child(3) { background: var(--fd-accent-soft); } & span:nth-child(4) { background: var(--fd-surface-3); } } /* Builder preview only: an empty card (just added) shows as a dashed placeholder. */ & .fd-banner-card[data-placeholder] { display: grid; align-content: center; justify-items: center; min-height: 160px; padding: var(--fd-gap); border: 1px dashed var(--fd-line-2); background: transparent; box-shadow: none; color: var(--fd-muted); text-align: center; & .fd-banner-card__content { position: static; inset: auto; width: 100%; min-width: 0; max-width: 30ch; padding: 0; background: none; } & .fd-banner-card__text > * { max-width: none; } & .fd-banner-card__text { justify-self: stretch; width: 100%; color: inherit; font-size: var(--fd-text-sm); line-height: 1.5; } } } /* ========================================================================== * Content modules: Metric Stats, Multicolumn, Testimonials, Quote, * Brand Logos, Button Group, Collapsible Tabs. * ========================================================================== */ /* Shared helpers used by the content modules ------------------------------- */ [data-mv-theme-root="movadly-light"] { /* * Motion token for small interface transitions (hover, icon turns). It follows * Theme Settings > Animation speed; 0.4 x the default 520ms is about 200ms. */ & :is(.fd-metric-stats, .fd-multicolumn, .fd-testimonials, .fd-quote, .fd-brand-logos, .fd-button-group, .fd-collapsible-tabs) { --fd-motion-fast: calc(var(--theme-animation-duration, 500ms) * 0.4); } /* * Module-owned section spacing, gutter and width ([data-fd-own-space]). * * A few presentations (Collapsible Tabs "editorial", Multicolumn "icon process") * have their own section spacing, gutter and maximum-width controls. On layout * engine v2 the platform owns the section padding, the gutter and the content * measure (with !important), so these are applied without competing with it: * * --fd-own-space-top / -bottom the wanted top/bottom spacing. The content * column is shifted by the difference to the platform's own padding, which * --fd-vb-top / -bottom reproduce for every Vertical spacing mode. * --fd-own-gutter re-declares --theme-side-spacing for this * section, which is what the platform's gutter rule reads. * --fd-own-max-width re-declares the canonical page width for this * section, which is what the platform's measure rule reads ("none" = full). * * A module sets these per breakpoint from its own custom properties; one that is * not set leaves the platform value in place. */ & [data-fd-own-space] { --fd-vb-top: var(--fd-section-space); --fd-vb-bottom: var(--fd-section-space); --theme-side-spacing: var(--fd-own-gutter, var(--fd-gutter)); --theme-page-width-canonical: var(--fd-own-max-width, var(--fd-page-width)); &[data-vb-spacing="none"] { --fd-vb-top: 0px; --fd-vb-bottom: 0px; } &[data-vb-spacing="compact"] { --fd-vb-top: calc(var(--fd-section-space) * .5); --fd-vb-bottom: calc(var(--fd-section-space) * .5); } &[data-vb-spacing="spacious"] { --fd-vb-top: calc(var(--fd-section-space) * 1.5); --fd-vb-bottom: calc(var(--fd-section-space) * 1.5); } &[data-vb-spacing="custom"] { --fd-vb-top: var(--vb-section-space-top, var(--fd-section-space)); --fd-vb-bottom: var(--vb-section-space-bottom, var(--fd-section-space)); } & > .fd-inner { max-width: var(--fd-own-max-width, var(--fd-page-width)); margin-block: calc(var(--fd-own-space-top, var(--fd-vb-top)) - var(--fd-vb-top)) calc(var(--fd-own-space-bottom, var(--fd-vb-bottom)) - var(--fd-vb-bottom)); padding-inline: var(--fd-own-gutter, var(--fd-gutter)); } } /* * "Text alignment on mobile". The section root carries * data-fd-mobile-text="inherit | left | center | right"; on phones it * overrides the intro alignment the desktop setting chose. */ @media (max-width: 599px) { & [data-fd-mobile-text="left"] .fd-intro { margin-inline: 0 auto; text-align: start; justify-items: start; } & [data-fd-mobile-text="center"] .fd-intro { margin-inline: auto; text-align: center; justify-items: center; } & [data-fd-mobile-text="right"] .fd-intro { margin-inline: auto 0; text-align: end; justify-items: end; } } /* * .fd-swipe-mobile: a .fd-grid that becomes a horizontal swipe track on * phones ("Enable swipe on mobile"). --fd-swipe-item sets the card width. */ @media (max-width: 599px) { & .fd-grid.fd-swipe-mobile { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: var(--fd-swipe-item, 82%); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; & > * { scroll-snap-align: start; } } } /* Pause / play glyph for the pause buttons of auto-moving content. */ & .fd-pause-icon { display: block; box-sizing: border-box; width: 12px; height: 14px; border-inline: 4px solid currentColor; } & [aria-pressed="true"] > .fd-pause-icon { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); } /* Star rating: filled stars in the accent, empty stars in the line colour. */ & .fd-rating { display: inline-flex; gap: 2px; color: var(--fd-accent); & .fd-rating__star { width: 18px; height: 18px; color: var(--fd-line-2); } & .fd-rating__star.is-filled { color: var(--fd-accent); fill: currentColor; } } } [data-mv-theme-root="movadly-light"] { /* 6.x Metric Stats (metric_stats) — renderer metric-stats */ & .fd-metric-stats { & .fd-metric-stats__grid { margin: 0; padding: 0; list-style: none; row-gap: clamp(28px, calc(var(--fd-gap) * 1.25), 40px); } & .fd-metric { display: grid; align-content: start; gap: 6px; min-width: 0; padding-top: 20px; border-top: 1px solid var(--fd-line); } & .fd-metric__value { color: var(--fd-heading); font-family: var(--fd-heading-font); font-size: calc(clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem) * var(--fd-heading-scale)); font-weight: var(--fd-heading-weight); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.05; overflow-wrap: anywhere; } & .fd-metric__label { color: var(--fd-heading); font-weight: var(--fd-heading-weight); } & .fd-metric__subline { color: var(--fd-muted); font-size: var(--fd-text-sm); } } } [data-mv-theme-root="movadly-light"] { /* 6.x Multicolumn (multicolumn) — renderer multicolumn */ & .fd-multicolumn { /* Gap presets (column_gap / row_gap). */ --fd-mc-col-gap: 32px; --fd-mc-row-gap: 32px; --fd-grid-gap: var(--fd-mc-row-gap) var(--fd-mc-col-gap); &[data-column-gap="small"] { --fd-mc-col-gap: 14px; } &[data-column-gap="medium"] { --fd-mc-col-gap: 22px; } &[data-row-gap="small"] { --fd-mc-row-gap: 14px; } &[data-row-gap="medium"] { --fd-mc-row-gap: 22px; } & .fd-multicolumn__list { margin: 0; padding: 0; list-style: none; } & .fd-multicolumn__item { --fd-card-pad: clamp(20px, calc(var(--fd-gap) * 0.875), 28px); padding: var(--fd-card-pad); justify-items: start; text-align: start; } &[data-align="center"] .fd-multicolumn__item { justify-items: center; text-align: center; } &[data-align="right"] .fd-multicolumn__item { justify-items: end; text-align: end; } /* The card image runs to the card edges. */ & .fd-multicolumn__media { justify-self: stretch; margin: calc(var(--fd-card-pad) * -1) calc(var(--fd-card-pad) * -1) 8px; border-radius: calc(var(--fd-radius) - 1px) calc(var(--fd-radius) - 1px) 0 0; } & .fd-multicolumn__number { font-size: var(--fd-text-md); font-weight: var(--fd-heading-weight); font-variant-numeric: tabular-nums; } & .fd-multicolumn__title { font-size: var(--fd-h-card); line-height: 1.3; } & .fd-multicolumn__title--medium { font-size: calc(1.375rem * var(--fd-heading-scale)); } & .fd-multicolumn__title--large { font-size: calc(1.625rem * var(--fd-heading-scale)); } & .fd-multicolumn__title--extra_large { font-size: calc(1.9375rem * var(--fd-heading-scale)); } & .fd-multicolumn__text--small { font-size: var(--fd-text-sm); } & .fd-multicolumn__text--large { font-size: var(--fd-text-lg); } & .fd-multicolumn__role { color: var(--fd-accent); font-size: var(--fd-text-sm); font-weight: var(--fd-heading-weight); } & .fd-multicolumn__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; justify-self: stretch; margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--fd-line); } /* Value above its label; the markup keeps dt before dd. */ & .fd-multicolumn__stat { display: flex; flex-direction: column-reverse; gap: 2px; & dd { margin: 0; color: var(--fd-heading); font-family: var(--fd-heading-font); font-size: calc(1.25rem * var(--fd-heading-scale)); font-weight: var(--fd-heading-weight); line-height: 1.2; } & dt { color: var(--fd-muted); font-size: var(--fd-text-xs); } } & .fd-multicolumn__industries { color: var(--fd-muted); font-size: var(--fd-text-sm); } & .fd-multicolumn__brands { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; & li { padding: 2px 10px; border: 1px solid var(--fd-line); border-radius: var(--fd-radius-pill); color: var(--fd-heading); font-size: var(--fd-text-xs); } } &[data-align="center"] .fd-multicolumn__brands { justify-content: center; } &[data-align="right"] .fd-multicolumn__brands { justify-content: flex-end; } & .fd-multicolumn__action { margin-top: 4px; } /* Icon process: a plain row of icons and labels. */ &.fd-multicolumn--icon_process { /* Module-owned spacing (30-content-shared.css); "mobile" values from tablet down. */ --fd-own-space-top: var(--fd-mc-space-top-d); --fd-own-space-bottom: var(--fd-mc-space-bottom-d); --fd-own-gutter: var(--fd-mc-gutter-d); margin-block-end: var(--fd-mc-after-d); @media (max-width: 989px) { --fd-own-space-top: var(--fd-mc-space-top-m); --fd-own-space-bottom: var(--fd-mc-space-bottom-m); --fd-own-gutter: var(--fd-mc-gutter-m); margin-block-end: var(--fd-mc-after-m); } & .fd-multicolumn__item { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 0; } & .fd-multicolumn__process-icon { display: block; width: var(--fd-mc-icon-size, 64px); height: var(--fd-mc-icon-size, 64px); border-radius: var(--fd-radius); background: var(--fd-mc-icon-bg, transparent); object-fit: contain; } & .fd-multicolumn__process-icon--glyph { display: grid; place-items: center; background: var(--fd-mc-icon-bg, var(--fd-accent-soft)); color: var(--fd-accent); & .fd-icon { width: 50%; height: 50%; } } & .fd-multicolumn__label { font-size: var(--fd-mc-label-size, calc(var(--fd-base-size) * 1.0625)); line-height: 1.3; overflow-wrap: anywhere; } & .fd-multicolumn__cta { margin-top: clamp(24px, calc(var(--fd-gap) * 1.125), 36px); } &[data-align="center"] .fd-multicolumn__cta { justify-content: center; } &[data-align="right"] .fd-multicolumn__cta { justify-content: flex-end; } /* Overrides the intro partial only takes when the setting is filled in. */ &[data-overrides~="header-gap"] .fd-intro { margin-bottom: var(--fd-mc-header-gap); } &[data-overrides~="heading-size"] .fd-intro .fd-heading { font-size: var(--fd-mc-heading-size); } &[data-overrides~="text-size"] .fd-intro .fd-intro__body { font-size: var(--fd-mc-text-size); } @media (max-width: 989px) { & .fd-multicolumn__process-icon { width: var(--fd-mc-icon-size-mobile, 52px); height: var(--fd-mc-icon-size-mobile, 52px); } & .fd-multicolumn__label { font-size: var(--fd-mc-label-size-mobile, var(--fd-mc-label-size, var(--fd-text-base))); } &[data-overrides~="header-gap-mobile"] .fd-intro { margin-bottom: var(--fd-mc-header-gap-mobile); } &[data-overrides~="heading-size-mobile"] .fd-intro .fd-heading { font-size: var(--fd-mc-heading-size-mobile); } &[data-overrides~="heading-line-mobile"] .fd-intro .fd-heading { line-height: var(--fd-mc-heading-line-mobile); } &[data-overrides~="text-size-mobile"] .fd-intro .fd-intro__body { font-size: var(--fd-mc-text-size-mobile); } } } } } [data-mv-theme-root="movadly-light"] { /* 6.x Testimonials (testimonials) — renderer testimonials */ & .fd-testimonials { /* Gap presets (column_gap / row_gap). */ --fd-col-gap: 22px; --fd-row-gap: 22px; --fd-grid-gap: var(--fd-row-gap) var(--fd-col-gap); &[data-column-gap="small"] { --fd-col-gap: 14px; } &[data-column-gap="large"] { --fd-col-gap: 32px; } &[data-row-gap="small"] { --fd-row-gap: 14px; } &[data-row-gap="large"] { --fd-row-gap: 32px; } & .fd-testimonials__list { margin: 0; padding: 0; list-style: none; } & .fd-testimonials__list.fd-track { --fd-gap: var(--fd-col-gap); } @media (max-width: 989px) { & .fd-testimonials__list.fd-track { --fd-track-item: calc((100% - (var(--fd-cols-tablet, 2) - 1) * var(--fd-gap)) / var(--fd-cols-tablet, 2)); } } @media (max-width: 599px) { & .fd-testimonials__list.fd-track { --fd-track-item: var(--fd-swipe-item, 82%); } } & .fd-testimonials__item { display: flex; min-width: 0; } & .fd-testimonial { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; margin: 0; text-align: start; } &[data-align="center"] .fd-testimonial { align-items: center; text-align: center; } &[data-align="right"] .fd-testimonial { align-items: flex-end; text-align: end; } /* Boxed and quote cards sit on the Theme Settings card surface. */ &:is([data-card-style="boxed"], [data-card-style="quote"]) .fd-testimonial { box-sizing: border-box; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--fd-card-border); border-radius: var(--fd-radius); background: var(--fd-card-bg); box-shadow: var(--fd-card-shadow); } & .fd-testimonial__media { align-self: stretch; } & .fd-testimonial__icon { width: 40px; height: 40px; & .fd-icon { width: 20px; height: 20px; } } & .fd-testimonial__quote { display: grid; gap: 0.75em; margin: 0; color: var(--fd-text); font-size: calc(var(--fd-base-size) * 1.0625); line-height: 1.6; } &[data-card-style="quote"] .fd-testimonial__quote { color: var(--fd-heading); font-family: var(--fd-heading-font); font-size: calc(clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem) * var(--fd-heading-scale)); font-weight: var(--fd-heading-weight); letter-spacing: -0.01em; line-height: 1.35; } & .fd-testimonial__author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 4px; } & .fd-testimonial__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--fd-surface-2); object-fit: cover; } & .fd-testimonial__who { display: grid; gap: 2px; } & .fd-testimonial__name { color: var(--fd-heading); font-weight: var(--fd-heading-weight); line-height: 1.3; } & .fd-testimonial__bio, & .fd-testimonial__product { color: var(--fd-muted); font-size: var(--fd-text-sm); line-height: 1.4; } & .fd-testimonials__controls { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; } & .fd-testimonials__controls[hidden], & .fd-testimonials__pause[hidden] { display: none; } /* Arrow icons point the reading direction. */ &:dir(rtl) .fd-testimonials__controls .fd-icon { transform: scaleX(-1); } & .fd-control[aria-disabled="true"] { cursor: default; opacity: 0.4; } & .fd-testimonials__list.fd-track:focus-visible { border-radius: var(--fd-radius); } @media (max-width: 599px) { &[data-mobile-align="left"] .fd-testimonial { align-items: flex-start; text-align: start; } &[data-mobile-align="center"] .fd-testimonial { align-items: center; text-align: center; } &[data-mobile-align="right"] .fd-testimonial { align-items: flex-end; text-align: end; } } } } [data-mv-theme-root="movadly-light"] { /* 6.x Quote (quote) — renderer quote */ & .fd-quote { & .fd-quote__stack { display: grid; gap: calc(var(--fd-gap) * 2); } & .fd-quote__figure { display: grid; justify-items: center; gap: 20px; max-width: var(--fd-narrow); margin: 0 auto; text-align: center; } /* Quotes from testimonial blocks follow the section quote, separated by a rule. */ & .fd-quote__figure + .fd-quote__figure { padding-top: calc(var(--fd-gap) * 2); border-top: 1px solid var(--fd-line); } & .fd-quote__media { justify-self: stretch; max-width: 480px; width: 100%; margin-inline: auto; } & .fd-quote__mark { color: var(--fd-accent); & .fd-icon { width: 40px; height: 40px; } } & .fd-quote__text { display: grid; gap: 0.5em; margin: 0; color: var(--fd-heading); font-family: var(--fd-heading-font); font-size: calc(clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem) * var(--fd-heading-scale)); font-weight: var(--fd-heading-weight); letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; } & .fd-quote__attribution { color: var(--fd-muted); font-size: var(--fd-text-md); font-weight: var(--fd-heading-weight); } & .fd-quote__author { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: start; } & .fd-quote__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--fd-surface-2); object-fit: cover; } & .fd-quote__who { display: grid; gap: 2px; } & .fd-quote__name { color: var(--fd-heading); line-height: 1.3; } & .fd-quote__bio, & .fd-quote__product { color: var(--fd-muted); font-size: var(--fd-text-sm); font-weight: var(--fd-body-weight); line-height: 1.4; } } } [data-mv-theme-root="movadly-light"] { /* 6.x Brand Logos (brand_logos) — renderer brand-logos */ & .fd-brand-logos { --fd-logo-height: 72px; --fd-marquee-cols: var(--fd-cols, 6); /* Gap presets (column_gap / row_gap). */ --fd-logo-gap: 32px; --fd-logo-row-gap: 22px; /* Auto scroll: seconds per logo; the loop length follows the logo count. */ --fd-logo-pace: 4.5s; --fd-marquee-duration: max(12s, calc(var(--fd-logo-count, 6) * var(--fd-logo-pace))); --fd-grid-gap: var(--fd-logo-row-gap) var(--fd-logo-gap); &[data-logo-style="boxed"] { --fd-logo-height: 96px; } &[data-logo-style="card"] { --fd-logo-height: 104px; } &[data-column-gap="small"] { --fd-logo-gap: 14px; } &[data-column-gap="medium"] { --fd-logo-gap: 22px; } &[data-row-gap="small"] { --fd-logo-row-gap: 14px; } &[data-row-gap="large"] { --fd-logo-row-gap: 32px; } &[data-speed="slow"] { --fd-logo-pace: 7s; } &[data-speed="fast"] { --fd-logo-pace: 3s; } & .fd-brand-logos__list { margin: 0; padding: 0; list-style: none; } & .fd-brand-logos__item { display: flex; justify-content: center; min-width: 0; } &[data-logo-align="left"] .fd-brand-logos__item { justify-content: flex-start; } &[data-logo-align="right"] .fd-brand-logos__item { justify-content: flex-end; } & .fd-brand-logos__logo { display: flex; align-items: center; justify-content: inherit; box-sizing: border-box; width: 100%; height: var(--fd-logo-height); transition: transform var(--fd-motion-fast) var(--fd-ease); & img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; opacity: var(--fd-logo-opacity, 1); transition: opacity var(--fd-motion-fast) var(--fd-ease), filter var(--fd-motion-fast) var(--fd-ease); } } &[data-logo-style="boxed"] .fd-brand-logos__logo, &[data-logo-style="card"] .fd-brand-logos__logo { padding: 14px 18px; overflow: hidden; border: 1px solid var(--fd-line); border-radius: var(--fd-radius); } &[data-logo-style="card"] .fd-brand-logos__logo { background: var(--fd-surface); box-shadow: var(--fd-shadow); } &[data-logo-fit="cover"] .fd-brand-logos__logo { padding: 0; overflow: hidden; border-radius: var(--fd-radius); & img { width: 100%; height: 100%; object-fit: cover; } } /* Builder preview only: a logo block without an image keeps an empty frame. */ & .fd-brand-logos__logo:not(:has(img)) { border: 1px dashed var(--fd-line-2); border-radius: var(--fd-radius); background: var(--fd-surface-2); } &[data-grayscale="true"] .fd-brand-logos__logo img { filter: grayscale(1); } @media (hover: hover) { &[data-hover="opacity"] .fd-brand-logos__logo:hover img { opacity: var(--fd-logo-hover-opacity, 0.7); filter: none; } &[data-hover="lift"] .fd-brand-logos__logo:hover { transform: translateY(-3px); & img { filter: none; } } } /* Carousel: .fd-track, one logo width per column setting at each size. */ & .fd-brand-logos__list.fd-track { --fd-gap: var(--fd-logo-gap); } /* * Auto scroll: two copies of the list move by exactly one copy's width. The lists * keep their grid / track class; the marquee layout below only applies when motion * is allowed, so reduced motion shows the grid or carousel as it is without auto * scroll (no copy, no pause button, nothing moves). */ & .fd-brand-logos__marquee { display: grid; justify-items: end; gap: 12px; } & .fd-brand-logos__viewport { width: 100%; container-type: inline-size; } & .fd-brand-logos__list[data-fd-copy], & .fd-brand-logos__pause[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { & .fd-brand-logos__viewport { overflow: hidden; } & .fd-brand-logos__marquee-track { display: flex; width: max-content; animation: fd-brand-logos-marquee var(--fd-marquee-duration) linear infinite; & .fd-brand-logos__list, & .fd-brand-logos__list[data-fd-copy] { display: flex; gap: var(--fd-logo-gap); overflow: visible; padding-block-end: 0; padding-inline-end: var(--fd-logo-gap); scroll-snap-type: none; } /* Enough logos per view to fill the width, so the loop never shows a hole. */ & .fd-brand-logos__item { --fd-marquee-per-view: min(var(--fd-marquee-cols), var(--fd-logo-count, 6)); flex: none; width: calc((100cqi - (var(--fd-marquee-per-view) - 1) * var(--fd-logo-gap)) / var(--fd-marquee-per-view)); } } &:dir(rtl) .fd-brand-logos__marquee-track { animation-name: fd-brand-logos-marquee-rtl; } &[data-paused="true"] .fd-brand-logos__marquee-track, &[data-pause-on-hover="true"] .fd-brand-logos__viewport:hover .fd-brand-logos__marquee-track, & .fd-brand-logos__viewport:focus-within .fd-brand-logos__marquee-track { animation-play-state: paused; } } @media (prefers-reduced-motion: reduce) { & .fd-brand-logos__pause { display: none; } } @media (max-width: 989px) { --fd-marquee-cols: var(--fd-cols-tablet, 3); & .fd-brand-logos__list.fd-track { --fd-track-item: calc((100% - (var(--fd-cols-tablet, 3) - 1) * var(--fd-gap)) / var(--fd-cols-tablet, 3)); } } @media (max-width: 599px) { --fd-marquee-cols: var(--fd-cols-mobile, 2); & .fd-brand-logos__list.fd-track { --fd-track-item: calc((100% - (var(--fd-cols-mobile, 2) - 1) * var(--fd-gap)) / var(--fd-cols-mobile, 2)); } } } } /* Keyframes cannot be nested; they are named for the module that uses them. */ @keyframes fd-brand-logos-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes fd-brand-logos-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } [data-mv-theme-root="movadly-light"] { /* 6.x Button Group (button_group) — renderer button-group */ & .fd-button-group { --fd-bg-gap: 12px; --fd-bg-justify: flex-start; &[data-gap="small"] { --fd-bg-gap: 8px; } &[data-gap="large"] { --fd-bg-gap: 20px; } &[data-align="center"] { --fd-bg-justify: center; } &[data-align="right"] { --fd-bg-justify: flex-end; } & .fd-button-group__buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: safe var(--fd-bg-justify); gap: var(--fd-bg-gap); } /* Inline keeps one row; it scrolls sideways rather than overflow the page. */ &[data-layout="inline"] .fd-button-group__buttons { flex-wrap: nowrap; overflow-x: auto; padding-block: 4px; & > * { flex: none; } } &[data-layout="stacked"] .fd-button-group__buttons { flex-direction: column; align-items: var(--fd-bg-justify); } @media (min-width: 600px) { &[data-carousel="true"] .fd-button-group__buttons { flex-direction: row; flex-wrap: nowrap; align-items: center; overflow-x: auto; scroll-snap-type: x proximity; padding-block: 4px 10px; & > * { flex: none; scroll-snap-align: start; } } } @media (max-width: 599px) { &[data-mobile-align="left"] { --fd-bg-justify: flex-start; } &[data-mobile-align="center"] { --fd-bg-justify: center; } &[data-mobile-align="right"] { --fd-bg-justify: flex-end; } &[data-mobile-swipe="true"] .fd-button-group__buttons { flex-direction: row; flex-wrap: nowrap; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 4px 10px; & > * { flex: none; scroll-snap-align: start; } } &[data-mobile-stack="true"] .fd-button-group__buttons { flex-direction: column; align-items: stretch; overflow: visible; & > * { width: 100%; box-sizing: border-box; } } } } } [data-mv-theme-root="movadly-light"] { /* 6.x Collapsible Tabs (collapsible_tabs) — renderer collapsible-tabs * * Every design value goes through a --fd-ct-* custom property with the Foundation * value as the fallback. The template sets those properties only for the editorial * presentation, and only for the controls that are filled in. "-base" properties * hold the design of each presentation / tab style. */ & .fd-collapsible-tabs { --fd-ct-media: 40fr; --fd-ct-content: 60fr; --fd-ct-layout-gap: calc(var(--fd-gap) * 2); --fd-ct-q-size-base: calc(1.125rem * var(--fd-heading-scale)); --fd-ct-q-lh-base: 1.35; --fd-ct-a-size-base: var(--fd-text-base); --fd-ct-pad-top-base: 18px; --fd-ct-pad-bottom-base: 18px; --fd-ct-panel-bottom-base: 20px; --fd-ct-answer-gap-base: 18px; --fd-ct-pad-inline-base: 0px; --fd-ct-row-bg-base: transparent; --fd-ct-radius-base: 0px; --fd-ct-shadow-base: none; --fd-ct-border-base: var(--fd-line); --fd-ct-item-gap-base: 0px; &[data-image-width="30"] { --fd-ct-media: 30fr; --fd-ct-content: 70fr; } &[data-image-width="50"] { --fd-ct-media: 50fr; --fd-ct-content: 50fr; } /* Card style: each tab is its own card, on the Theme Settings card surface. */ &[data-tab-style="card"] { --fd-ct-pad-inline-base: 20px; --fd-ct-row-bg-base: var(--fd-card-bg); --fd-ct-radius-base: var(--fd-radius); --fd-ct-shadow-base: var(--fd-card-shadow); --fd-ct-border-base: var(--fd-card-border); --fd-ct-item-gap-base: 12px; } /* Editorial presentation: a typographic FAQ list. */ &[data-presentation="editorial"] { --fd-ct-q-size-base: var(--fd-h-small); --fd-ct-q-lh-base: 1.3; --fd-ct-a-size-base: var(--fd-text-lg); --fd-ct-pad-top-base: 24px; --fd-ct-pad-bottom-base: 24px; --fd-ct-panel-bottom-base: 28px; --fd-ct-answer-gap-base: 12px; /* Per-breakpoint controls: the one for the current size, when it is set. */ --fd-own-space-top: var(--fd-ct-space-top-d); --fd-own-space-bottom: var(--fd-ct-space-bottom-d); --fd-own-gutter: var(--fd-ct-gutter-d); --fd-ct-heading-size: var(--fd-ct-heading-size-d); --fd-ct-heading-lh: var(--fd-ct-heading-lh-d); --fd-ct-sub-size: var(--fd-ct-sub-size-d); --fd-ct-sub-lh: var(--fd-ct-sub-lh-d); --fd-ct-q-size: var(--fd-ct-q-size-d); --fd-ct-q-lh: var(--fd-ct-q-lh-d); --fd-ct-trigger: var(--fd-ct-trigger-d); --fd-ct-a-size: var(--fd-ct-a-size-d); --fd-ct-a-lh: var(--fd-ct-a-lh-d); --fd-ct-a-max: var(--fd-ct-a-max-d); --fd-ct-pad-top: var(--fd-ct-pad-top-d); --fd-ct-pad-bottom: var(--fd-ct-pad-bottom-d); --fd-ct-pad-inline: var(--fd-ct-pad-inline-d); @media (max-width: 989px) { --fd-own-space-top: var(--fd-ct-space-top-t); --fd-own-space-bottom: var(--fd-ct-space-bottom-t); --fd-own-gutter: var(--fd-ct-gutter-t); --fd-ct-heading-size: var(--fd-ct-heading-size-t); --fd-ct-heading-lh: var(--fd-ct-heading-lh-t); --fd-ct-sub-size: var(--fd-ct-sub-size-t); --fd-ct-sub-lh: var(--fd-ct-sub-lh-t); --fd-ct-q-size: var(--fd-ct-q-size-t); --fd-ct-q-lh: var(--fd-ct-q-lh-t); --fd-ct-trigger: var(--fd-ct-trigger-t); --fd-ct-a-size: var(--fd-ct-a-size-t); --fd-ct-a-lh: var(--fd-ct-a-lh-t); --fd-ct-a-max: var(--fd-ct-a-max-t); --fd-ct-pad-top: var(--fd-ct-pad-top-t); --fd-ct-pad-bottom: var(--fd-ct-pad-bottom-t); --fd-ct-pad-inline: var(--fd-ct-pad-inline-t); } @media (max-width: 599px) { --fd-own-space-top: var(--fd-ct-space-top-m); --fd-own-space-bottom: var(--fd-ct-space-bottom-m); --fd-own-gutter: var(--fd-ct-gutter-m); --fd-ct-heading-size: var(--fd-ct-heading-size-m); --fd-ct-heading-lh: var(--fd-ct-heading-lh-m); --fd-ct-sub-size: var(--fd-ct-sub-size-m); --fd-ct-sub-lh: var(--fd-ct-sub-lh-m); --fd-ct-q-size: var(--fd-ct-q-size-m); --fd-ct-q-lh: var(--fd-ct-q-lh-m); --fd-ct-trigger: var(--fd-ct-trigger-m); --fd-ct-a-size: var(--fd-ct-a-size-m); --fd-ct-a-lh: var(--fd-ct-a-lh-m); --fd-ct-a-max: var(--fd-ct-a-max-m); --fd-ct-pad-top: var(--fd-ct-pad-top-m); --fd-ct-pad-bottom: var(--fd-ct-pad-bottom-m); --fd-ct-pad-inline: var(--fd-ct-pad-inline-m); } } &[data-ct-shadow="none"] { --fd-ct-shadow: none; } &[data-ct-shadow="subtle"] { --fd-ct-shadow: 0 1px 3px color-mix(in srgb, var(--fd-heading) 8%, transparent); } &[data-ct-shadow="medium"] { --fd-ct-shadow: 0 2px 6px color-mix(in srgb, var(--fd-heading) 6%, transparent), 0 12px 32px color-mix(in srgb, var(--fd-heading) 12%, transparent); } /* Layout ---------------------------------------------------------- */ & .fd-collapsible-tabs__layout { display: grid; gap: var(--fd-ct-layout-gap); } & .fd-collapsible-tabs__content { min-width: 0; } /* Two columns with an image: content and image side by side. */ &[data-layout="two_column"][data-has-image="true"] .fd-collapsible-tabs__layout { grid-template-columns: minmax(0, var(--fd-ct-content)) minmax(0, var(--fd-ct-media)); align-items: center; & .fd-collapsible-tabs__media { order: 2; } } &[data-layout="two_column"][data-has-image="true"][data-image-position="left"] .fd-collapsible-tabs__layout { grid-template-columns: minmax(0, var(--fd-ct-media)) minmax(0, var(--fd-ct-content)); & .fd-collapsible-tabs__media { order: 0; } } /* Two columns without an image: the intro beside the tabs. */ &[data-layout="two_column"][data-has-image="false"] .fd-collapsible-tabs__content { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: var(--fd-ct-header-gap, var(--fd-ct-layout-gap)); & .fd-intro { margin-bottom: 0; } & .fd-collapsible-tabs__list:only-child { grid-column: 1 / -1; } } @media (max-width: 989px) { &[data-layout="two_column"] .fd-collapsible-tabs__layout, &[data-layout="two_column"][data-has-image="true"] .fd-collapsible-tabs__layout, &[data-layout="two_column"][data-has-image="true"][data-image-position="left"] .fd-collapsible-tabs__layout, &[data-layout="two_column"][data-has-image="false"] .fd-collapsible-tabs__content { grid-template-columns: minmax(0, 1fr); & .fd-collapsible-tabs__media { order: 0; } } &[data-layout="two_column"][data-has-image="false"] .fd-collapsible-tabs__content { gap: 0; } &[data-layout="two_column"][data-has-image="false"] .fd-intro { margin-bottom: var(--fd-ct-header-gap, clamp(8px, 2vw, 16px)); } } /* Section header --------------------------------------------------- */ & .fd-collapsible-tabs__content > .fd-intro:not(:last-child) { margin-bottom: var(--fd-ct-header-gap, clamp(28px, 4vw, 48px)); } & .fd-intro .fd-heading { color: var(--fd-ct-heading-color, var(--fd-heading)); font-family: var(--fd-ct-heading-font, var(--fd-heading-font)); font-weight: var(--fd-ct-heading-weight, var(--fd-heading-weight)); line-height: var(--fd-ct-heading-lh, 1.15); } & .fd-intro .fd-heading--medium { font-size: var(--fd-ct-heading-size, var(--fd-h-medium)); } & .fd-intro .fd-heading--large { font-size: var(--fd-ct-heading-size, var(--fd-h-large)); } & .fd-intro .fd-heading--extra_large { font-size: var(--fd-ct-heading-size, var(--fd-h-extra-large)); } & .fd-intro .fd-heading--mega { font-size: var(--fd-ct-heading-size, var(--fd-h-mega)); } /* "Space after primary heading": the intro stacks with a 12px gap. Unset leaves it. */ & .fd-intro > .fd-heading:not(:last-child) { margin-block-end: calc(var(--fd-ct-heading-gap) - 12px); } & .fd-intro .fd-eyebrow { color: var(--fd-ct-sub-color, var(--fd-accent)); font-family: var(--fd-ct-sub-font, var(--fd-font)); font-size: var(--fd-ct-sub-size, var(--fd-text-xs)); font-weight: var(--fd-ct-sub-weight, 600); line-height: var(--fd-ct-sub-lh, 1.4); text-decoration-line: var(--fd-ct-sub-decoration, none); text-underline-offset: 0.25em; } /* Rows --------------------------------------------------------------- */ & .fd-collapsible-tabs__list { display: grid; gap: var(--fd-ct-item-gap, var(--fd-ct-item-gap-base)); } & .fd-collapsible-tab { box-sizing: border-box; border-bottom: var(--fd-ct-border-width, 1px) solid var(--fd-ct-border, var(--fd-ct-border-base)); border-radius: var(--fd-ct-radius, var(--fd-ct-radius-base)); background: var(--fd-ct-row-bg, var(--fd-ct-row-bg-base)); box-shadow: var(--fd-ct-shadow, var(--fd-ct-shadow-base)); &:first-child { border-top: var(--fd-ct-border-width, 1px) solid var(--fd-ct-border, var(--fd-ct-border-base)); } } &[data-tab-style="card"] .fd-collapsible-tab { border: var(--fd-ct-border-width, 1px) solid var(--fd-ct-border, var(--fd-ct-border-base)); } & .fd-collapsible-tab__summary { display: flex; box-sizing: border-box; align-items: center; gap: 14px; width: var(--fd-ct-trigger, 100%); padding-block: var(--fd-ct-pad-top, var(--fd-ct-pad-top-base)) var(--fd-ct-pad-bottom, var(--fd-ct-pad-bottom-base)); padding-inline: var(--fd-ct-pad-inline, var(--fd-ct-pad-inline-base)); border-radius: var(--fd-ct-radius, var(--fd-ct-radius-base)); color: var(--fd-ct-q-color, var(--fd-heading)); font-family: var(--fd-ct-q-font, var(--fd-heading-font)); font-size: var(--fd-ct-q-size, var(--fd-ct-q-size-base)); font-weight: var(--fd-ct-q-weight, var(--fd-heading-weight)); line-height: var(--fd-ct-q-lh, var(--fd-ct-q-lh-base)); list-style: none; cursor: pointer; transition: color var(--fd-motion-fast) var(--fd-ease); &::-webkit-details-marker { display: none; } &::marker { content: ""; } } @media (hover: hover) { & .fd-collapsible-tab__summary:hover { color: var(--fd-ct-q-hover, var(--fd-ct-q-color, var(--fd-heading))); } } &[data-ct-focus] .fd-collapsible-tab__summary:focus-visible { box-shadow: 0 0 0 var(--fd-ct-focus-width, 2px) var(--fd-ct-focus-color, var(--fd-accent)); } & .fd-collapsible-tab[open] > .fd-collapsible-tab__summary { padding-block-end: var(--fd-ct-answer-gap, var(--fd-ct-answer-gap-base)); } & .fd-collapsible-tab__title { flex: 1; min-width: 0; text-align: var(--fd-ct-align, start); overflow-wrap: anywhere; } & .fd-collapsible-tab__icon { display: inline-flex; color: var(--fd-accent); } & .fd-collapsible-tab__toggle { display: inline-grid; flex: none; width: var(--fd-ct-icon-size, 28px); height: var(--fd-ct-icon-size, 28px); place-items: center; /* "Minimum gap before end icon" and "Icon overlap" adjust the 14px row gap. */ margin-inline-start: calc(var(--fd-ct-icon-gap, 14px) - 14px - var(--fd-ct-icon-overlap, 0px)); color: var(--fd-ct-icon-color, var(--fd-muted)); & .fd-icon { width: var(--fd-ct-icon-size, 1.25em); height: var(--fd-ct-icon-size, 1.25em); transition: transform var(--fd-ct-duration, var(--fd-motion-fast)) var(--fd-ease); } } &[data-ct-icon-thickness] .fd-collapsible-tab__toggle .fd-icon :is(path, line, circle) { stroke-width: var(--fd-ct-icon-thickness); vector-effect: non-scaling-stroke; } &[data-icon-position="left"] .fd-collapsible-tab__toggle { order: -1; margin-inline: 0 calc(var(--fd-ct-icon-gap, 14px) - 14px - var(--fd-ct-icon-overlap, 0px)); } & .fd-collapsible-tab__opened, & .fd-collapsible-tab[open] > summary .fd-collapsible-tab__closed { display: none; } & .fd-collapsible-tab[open] > summary .fd-collapsible-tab__opened { display: inline-block; } &[data-toggle="chevron"] .fd-collapsible-tab[open] > summary .fd-collapsible-tab__toggle .fd-icon { transform: rotate(180deg); } /* Editorial plus: the plus turns into a minus instead of being swapped. */ &[data-presentation="editorial"][data-toggle="plus"] { & .fd-collapsible-tab[open] > summary .fd-collapsible-tab__closed { display: inline-block; } & .fd-collapsible-tab[open] > summary .fd-collapsible-tab__opened { display: none; } & .fd-collapsible-tab__closed path:first-child { transform-box: fill-box; transform-origin: center; transition: transform var(--fd-ct-duration, var(--fd-motion-fast)) var(--fd-ease); } & .fd-collapsible-tab[open] > summary .fd-collapsible-tab__closed path:first-child { transform: scaleY(0); } } &[data-presentation="editorial"] .fd-collapsible-tab__summary { align-items: flex-start; & .fd-collapsible-tab__icon, & .fd-collapsible-tab__toggle { /* Centre the icons on the first line of the question. */ margin-block-start: calc((1lh - var(--fd-ct-icon-size, 28px)) / 2); } & .fd-collapsible-tab__icon { margin-block-start: calc((1lh - 1.25em) / 2); } } /* Answer ------------------------------------------------------------ */ & .fd-collapsible-tab__panel { display: grid; justify-items: var(--fd-ct-align, start); gap: 12px; padding-inline: var(--fd-ct-pad-inline, var(--fd-ct-pad-inline-base)); padding-bottom: var(--fd-ct-pad-bottom, var(--fd-ct-panel-bottom-base)); font-family: var(--fd-ct-a-font, var(--fd-font)); font-size: var(--fd-ct-a-size, var(--fd-ct-a-size-base)); font-weight: var(--fd-ct-a-weight, var(--fd-body-weight)); line-height: var(--fd-ct-a-lh, 1.6); text-align: var(--fd-ct-align, start); & > * { max-width: var(--fd-ct-a-max, none); } & .fd-prose { color: var(--fd-ct-a-color, var(--fd-muted)); } } /* The toggle column (icon on the left): the answer lines up with the heading text. */ &[data-icon-position="left"] .fd-collapsible-tab__panel { padding-inline-start: calc(var(--fd-ct-pad-inline, var(--fd-ct-pad-inline-base)) + var(--fd-ct-icon-size, 28px) + var(--fd-ct-icon-gap, 14px) - var(--fd-ct-icon-overlap, 0px)); } & .fd-collapsible-tab__panel--strong .fd-prose { color: var(--fd-ct-q-color, var(--fd-heading)); } } } /* Commercial modules ------------------------------------------------------- */ /* * Shared by Platform Hero and Connect Showcase: the single "calm" motion the * theme allows. A slow opacity pulse on connector lines, only applied inside * @media (prefers-reduced-motion: no-preference). @keyframes cannot be nested * inside a style rule, so it sits at the top level with an fd- prefix. */ @keyframes fd-line-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } /* 6.x Featured Blogs (featured_blogs) — renderer featured-blogs */ [data-mv-theme-root="movadly-light"] { & .fd-blogs__head { display: flex; flex-wrap: wrap; gap: var(--fd-gap); align-items: flex-end; justify-content: space-between; margin-bottom: clamp(28px, 4vw, 48px); & .fd-intro { margin-bottom: 0; } } & .fd-blogs__list { margin: 0; padding: 0; list-style: none; } & .fd-blogs__post { position: relative; display: grid; align-content: start; gap: 16px; min-width: 0; } & .fd-blogs__body { display: grid; align-content: start; gap: 10px; } & .fd-blogs__meta { display: flex; flex-wrap: wrap; gap: 4px 0; color: var(--fd-muted); font-size: var(--fd-text-xs); & > span + span::before { content: "·"; margin-inline: 8px; } } & .fd-blogs__category { color: var(--fd-accent); font-weight: var(--fd-heading-weight); } & .fd-blogs__title { text-wrap: pretty; } /* The title link covers the whole card; the "Read more" row is decorative. */ & .fd-blogs__link { color: inherit; text-decoration: none; &::after { content: ""; position: absolute; inset: 0; border-radius: var(--fd-radius); } &:focus-visible { box-shadow: none; } &:focus-visible::after { box-shadow: var(--fd-focus); } } & .fd-blogs__post--linked:hover .fd-blogs__title { text-decoration: underline; text-decoration-color: var(--fd-accent); text-underline-offset: 4px; } & .fd-blogs__cta { margin-top: 4px; } & .fd-blogs__post--linked:hover .fd-blogs__cta .fd-icon { transform: translateX(3px); } /* List layout: one article per row, image beside the text. */ & .fd-blogs[data-layout="list"] .fd-blogs__post { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: var(--fd-gap); align-items: center; padding-bottom: var(--fd-gap); border-bottom: 1px solid var(--fd-line); } & .fd-blogs[data-layout="list"] .fd-blogs__post:not(:has(.fd-blogs__media)) { grid-template-columns: minmax(0, 1fr); } /* Editorial grid: fixed image height, columns/gap/gutters from settings, and the optional editorial design controls (--fd-blogs-*; unset keeps the Foundation design). */ & .fd-blogs--editorial_grid { /* The gutter is the page gutter (the content column's own padding, which the platform owns) adjusted by a margin on the column's children. */ --fd-blogs-gutter-now: var(--fd-blogs-gutter, var(--fd-gutter)); & .fd-inner > * { margin-inline: calc(var(--fd-blogs-gutter-now) - var(--fd-gutter)); } & .fd-blogs__list { row-gap: var(--fd-blogs-row-gap, var(--fd-grid-gap, var(--fd-gap))); column-gap: var(--fd-blogs-column-gap, var(--fd-grid-gap, var(--fd-gap))); } & .fd-blogs__media { aspect-ratio: auto; height: var(--fd-blogs-image-height, 250px); } & .fd-blogs__meta { color: var(--fd-blogs-text, var(--fd-muted)); } & .fd-blogs__title { color: var(--fd-blogs-text, var(--fd-heading)); font-size: var(--fd-blogs-title-size, var(--fd-h-card)); font-weight: var(--fd-blogs-title-weight, var(--fd-heading-weight)); line-height: var(--fd-blogs-title-lh, 1.3); } & .fd-blogs__excerpt { color: var(--fd-blogs-text, var(--fd-muted)); font-size: var(--fd-blogs-excerpt-size, inherit); line-height: var(--fd-blogs-excerpt-lh, inherit); } & .fd-blogs__cta { color: var(--fd-blogs-link, var(--fd-heading)); font-size: var(--fd-blogs-link-size, inherit); font-weight: var(--fd-blogs-link-weight, 600); line-height: var(--fd-blogs-link-lh, inherit); } } @media (max-width: 989px) { & .fd-blogs--editorial_grid { --fd-blogs-gutter-now: var(--fd-blogs-gutter-mobile, var(--fd-gutter)); } } @media (max-width: 599px) { & .fd-blogs[data-layout="list"] .fd-blogs__post { grid-template-columns: minmax(0, 1fr); } & .fd-blogs--editorial_grid .fd-blogs__media { height: auto; aspect-ratio: 4 / 3; } } } /* 6.x Pricing Table (pricing_table) — renderer pricing-table */ [data-mv-theme-root="movadly-light"] { & .fd-pricing__intro:has(+ .fd-pricing__billing) { margin-bottom: 12px; } & .fd-pricing__billing { margin-bottom: clamp(28px, 4vw, 48px); color: var(--fd-muted); font-size: var(--fd-text-md); } & .fd-pricing[data-align="center"] .fd-pricing__billing { text-align: center; } & .fd-pricing[data-align="right"] .fd-pricing__billing { text-align: end; } /* Desktop columns (min of the setting and the plan count), never narrower than a readable plan: a row too narrow for that many holds as many as fit. */ & .fd-pricing__plans { --fd-pricing-gap: var(--fd-grid-gap, var(--fd-gap)); grid-template-columns: repeat(auto-fill, minmax(max(150px, calc((100% - (var(--fd-cols, 3) - 1) * var(--fd-pricing-gap)) / var(--fd-cols, 3))), 1fr)); margin: 0; padding: 0; list-style: none; align-items: stretch; } /* One track as wide as the card, so narrow plans (many columns) wrap their words and buttons instead of spilling over the card edge. */ & .fd-pricing__plan { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; /* Long words wrap rather than hyphenate: "busi-nesses" in a narrow plan card reads worse than a plain wrap, and overflow-wrap already stops any spill. */ overflow-wrap: anywhere; hyphens: manual; align-content: start; gap: 14px; } /* Five or six plans a row: a tighter card so narrow plans stay readable. */ & .fd-pricing__plans:is([data-cols="5"], [data-cols="6"]) { & .fd-pricing__plan { gap: 10px; padding: clamp(14px, 1.4vw, 20px); } & .fd-pricing__amount { font-size: calc(clamp(1.5rem, 1.2rem + 0.8vw, 2rem) * var(--fd-heading-scale)); } & .fd-pricing__features { font-size: var(--fd-text-sm); } & .fd-pricing__action .fd-button { padding-inline: 12px; overflow-wrap: normal; hyphens: none; } } & .fd-pricing__plan[data-recommended="true"] { border-color: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-accent); } /* The dark scheme lightens the accent, so accent fills take dark text (as .fd-button--secondary does). */ & .fd-scheme-dark .fd-pricing__badge.fd-badge--accent { color: var(--fd-dark); } & .fd-pricing__action { margin-top: 4px; & .fd-button { width: 100%; box-sizing: border-box; } } & .fd-pricing__best-for, & .fd-pricing__yearly, & .fd-pricing__footnote { color: var(--fd-muted); font-size: var(--fd-text-md); } & .fd-pricing__footnote { font-size: var(--fd-text-xs); } & .fd-pricing__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; color: var(--fd-heading); } & .fd-pricing__currency { font-size: var(--fd-text-base); font-weight: var(--fd-heading-weight); } & .fd-pricing__amount { font-family: var(--fd-heading-font); font-size: calc(clamp(2rem, 1.6rem + 1.2vw, 2.5rem) * var(--fd-heading-scale)); font-weight: var(--fd-heading-weight); line-height: 1.1; letter-spacing: -0.02em; } & .fd-pricing__period { color: var(--fd-muted); font-size: var(--fd-text-md); } & .fd-pricing__features { display: grid; gap: 10px; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--fd-line); list-style: none; font-size: var(--fd-text-md); & li { display: flex; gap: 10px; align-items: flex-start; } } & .fd-pricing__check { margin-top: 0.1em; color: var(--fd-accent); } @media (max-width: 989px) { & .fd-pricing__plans { grid-template-columns: repeat(var(--fd-cols-tablet, 2), minmax(0, 1fr)); } } @media (max-width: 599px) { & .fd-pricing__plans { grid-template-columns: minmax(0, 1fr); } } } /* 6.x Comparison Table (comparison_table) — renderer comparison-table */ [data-mv-theme-root="movadly-light"] { & .fd-compare__scroll { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--fd-card-border); border-radius: var(--fd-radius); background: var(--fd-card-bg); box-shadow: var(--fd-card-shadow); scrollbar-width: thin; } & .fd-compare__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fd-text-md); & th, & td { padding: 14px 18px; border-bottom: 1px solid var(--fd-line); text-align: start; vertical-align: middle; } & tbody tr:last-child > * { border-bottom: 0; } & thead th { color: var(--fd-heading); font-weight: var(--fd-heading-weight); background: var(--fd-surface-2); } } & .fd-compare[data-align="center"] :is(.fd-compare__col, .fd-compare__value) { text-align: center; } & .fd-compare__feature { min-width: 180px; color: var(--fd-heading); font-weight: 500; } & .fd-compare__feature-name, & .fd-compare__note { display: block; } & .fd-compare__note { margin-top: 2px; color: var(--fd-muted); font-size: var(--fd-text-xs); font-weight: var(--fd-body-weight); } & .fd-compare__value { color: var(--fd-text); } & .fd-compare__mark { display: inline-grid; width: 26px; height: 26px; place-items: center; border-radius: var(--fd-radius-pill); & .fd-icon { width: 16px; height: 16px; } } & .fd-compare__mark--yes { background: var(--fd-accent-soft); color: var(--fd-accent); } & .fd-compare__mark--no { color: var(--fd-muted); } & .fd-compare__table .is-highlighted { background: var(--fd-accent-soft); } & .fd-compare__table thead .is-highlighted { box-shadow: inset 0 3px 0 var(--fd-accent); color: var(--fd-heading); } } /* 6.x Platform Hero (platform_hero) — renderer platform-hero */ [data-mv-theme-root="movadly-light"] { & .fd-platform-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; } & .fd-platform-hero[data-layout="visual_left"] .fd-platform-hero__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } & .fd-platform-hero[data-layout="visual_left"] .fd-platform-hero__visual { order: -1; } & .fd-platform-hero[data-layout="centered"] .fd-platform-hero__layout { grid-template-columns: minmax(0, 1fr); justify-items: center; } & .fd-platform-hero[data-layout="centered"] .fd-platform-hero__visual { width: min(100%, 720px); } & .fd-platform-hero__copy { display: grid; gap: 24px; min-width: 0; & .fd-intro { margin-bottom: 0; } } & .fd-platform-hero[data-align="center"] .fd-platform-hero__copy { justify-items: center; text-align: center; & .fd-actions, & .fd-platform-hero__proof { justify-content: center; } } & .fd-platform-hero__proof { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; color: var(--fd-muted); font-size: var(--fd-text-sm); } & .fd-platform-hero__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } & .fd-platform-hero__badge { padding: 3px 10px; border: 1px solid var(--fd-line); border-radius: var(--fd-radius-pill); background: var(--fd-surface); color: var(--fd-heading); font-weight: var(--fd-heading-weight); } & .fd-platform-hero__visual { min-width: 0; } /* * Diagram: core in the middle, up to four sides around it. Each side * keeps a margin toward the core equal to the connector length, and each * node draws its own 1px connector across that margin. */ & .fd-platform-hero__diagram { --fd-ph-link: clamp(24px, 3.5vw, 40px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: ". top ." "left core right" ". bottom ."; align-items: stretch; } & .fd-platform-hero__side { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0; padding: 0; list-style: none; &[data-side="top"] { grid-area: top; margin-bottom: var(--fd-ph-link); } &[data-side="bottom"] { grid-area: bottom; margin-top: var(--fd-ph-link); } &[data-side="left"], &[data-side="right"] { flex-direction: column; flex-wrap: nowrap; justify-content: space-around; } &[data-side="left"] { grid-area: left; margin-inline-end: var(--fd-ph-link); align-items: flex-end; } &[data-side="right"] { grid-area: right; margin-inline-start: var(--fd-ph-link); align-items: flex-start; } } & .fd-platform-hero__item { position: relative; display: flex; &::before { content: ""; position: absolute; background: var(--fd-line-2); pointer-events: none; } } & [data-side="top"] > .fd-platform-hero__item::before { top: 100%; inset-inline-start: 50%; width: 1px; height: var(--fd-ph-link); } & [data-side="bottom"] > .fd-platform-hero__item::before { bottom: 100%; inset-inline-start: 50%; width: 1px; height: var(--fd-ph-link); } & [data-side="left"] > .fd-platform-hero__item::before { top: 50%; inset-inline-start: 100%; width: var(--fd-ph-link); height: 1px; } & [data-side="right"] > .fd-platform-hero__item::before { top: 50%; inset-inline-end: 100%; width: var(--fd-ph-link); height: 1px; } & .fd-platform-hero__node { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--fd-line); border-radius: var(--fd-radius); background: var(--fd-surface); color: var(--fd-heading); font-size: var(--fd-text-sm); font-weight: var(--fd-heading-weight); line-height: 1.3; text-decoration: none; transition: border-color var(--fd-motion-fast) var(--fd-ease); &[data-accent="soft"] { border-color: transparent; background: var(--fd-accent-soft); } &[data-accent="outline"] { border-color: var(--fd-accent); background: transparent; } &[data-accent="glow"] { border-color: var(--fd-accent); box-shadow: 0 0 0 4px var(--fd-accent-soft); } } & a.fd-platform-hero__node:hover { border-color: var(--fd-heading); } & .fd-platform-hero__node-icon { color: var(--fd-accent); } & .fd-platform-hero__node-image { width: 20px; height: 20px; object-fit: contain; } & .fd-platform-hero__core { grid-area: core; display: grid; gap: 12px; place-content: center; justify-items: center; min-height: 140px; padding: 24px; border: 1px solid var(--fd-line-2); border-radius: var(--fd-radius); background: var(--fd-surface); box-shadow: var(--fd-shadow); text-align: center; } & .fd-platform-hero__core-image { width: 56px; height: 56px; object-fit: contain; } & .fd-platform-hero__core-label { color: var(--fd-heading); font-family: var(--fd-heading-font); font-size: var(--fd-text-lg); font-weight: var(--fd-heading-weight); line-height: 1.3; } @media (prefers-reduced-motion: no-preference) { & .fd-platform-hero__diagram[data-animated="true"] .fd-platform-hero__item::before { animation: fd-line-pulse 3.6s ease-in-out infinite; } & .fd-platform-hero__diagram[data-animated="true"] .fd-platform-hero__item:nth-child(2n)::before { animation-delay: -1.2s; } & .fd-platform-hero__diagram[data-animated="true"] .fd-platform-hero__item:nth-child(3n)::before { animation-delay: -2.4s; } } @media (max-width: 989px) { & .fd-platform-hero[data-layout] .fd-platform-hero__layout { grid-template-columns: minmax(0, 1fr); } & .fd-platform-hero[data-layout="visual_left"] .fd-platform-hero__visual { order: 0; } & .fd-platform-hero[data-mobile-order="visual_first"] .fd-platform-hero__visual { order: -1; } } /* Phones: the core first, then every node as a wrapping chip; no connectors. */ @media (max-width: 599px) { & .fd-platform-hero__diagram { grid-template-columns: minmax(0, 1fr); grid-template-areas: "core" "top" "left" "right" "bottom"; gap: 12px; } & .fd-platform-hero__side { &[data-side] { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; } } & .fd-platform-hero__item::before { display: none; } & .fd-platform-hero__core { min-height: 0; } } } /* 6.x Connect Showcase (connect_showcase) — renderer connect-showcase */ [data-mv-theme-root="movadly-light"] { & .fd-connect__layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 64px); align-items: center; } & .fd-connect[data-layout="visual_left"] .fd-connect__layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } & .fd-connect[data-layout="visual_left"] .fd-connect__visual { order: -1; } & .fd-connect[data-layout="centered"] .fd-connect__layout { grid-template-columns: minmax(0, 1fr); } & .fd-connect__copy { display: grid; gap: 24px; min-width: 0; & .fd-intro { margin-bottom: 0; } } & .fd-connect[data-align="center"] .fd-connect__copy { justify-items: center; text-align: center; & .fd-actions { justify-content: center; } } & .fd-connect__visual { display: grid; gap: 20px; min-width: 0; container-type: inline-size; } & .fd-connect__flow { display: flex; gap: 12px; align-items: center; } & .fd-connect__stage { display: grid; align-content: start; gap: 10px; flex: 1 1 0; min-width: 0; &[data-stage="channels"] { flex-grow: 1.4; } &[data-stage="destination"] { flex-grow: 0.8; } } & .fd-connect__group-label { color: var(--fd-muted); font-size: var(--fd-text-2xs); font-weight: var(--fd-heading-weight); letter-spacing: 0.08em; text-transform: uppercase; } & .fd-connect__channels, & .fd-connect__stages { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } & .fd-connect__channel-item { display: flex; } & .fd-connect__channel { display: flex; flex: 1; gap: 10px; align-items: flex-start; min-width: 0; padding: 10px 12px; border: 1px solid var(--fd-line); border-radius: var(--fd-radius); background: var(--fd-surface); color: var(--fd-text); text-decoration: none; transition: border-color var(--fd-motion-fast) var(--fd-ease); &[data-accent="soft"] { border-color: transparent; background: var(--fd-accent-soft); } &[data-accent="outline"] { border-color: var(--fd-accent); background: transparent; } &[data-accent="glow"] { border-color: var(--fd-accent); box-shadow: 0 0 0 4px var(--fd-accent-soft); } } & a.fd-connect__channel:hover { border-color: var(--fd-heading); } & .fd-connect__channel-icon { width: 36px; height: 36px; & .fd-icon { width: 18px; height: 18px; } & img { width: 22px; height: 22px; object-fit: contain; } } & .fd-connect__channel-text { display: grid; gap: 2px; min-width: 0; } & .fd-connect__channel-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } & .fd-connect__channel-label { color: var(--fd-heading); font-size: var(--fd-text-md); font-weight: var(--fd-heading-weight); } & .fd-connect__status { padding: 1px 8px; font-size: var(--fd-text-2xs); } & .fd-connect__channel-description { color: var(--fd-muted); font-size: var(--fd-text-xs); line-height: 1.45; } & .fd-connect__destination { display: grid; gap: 10px; justify-items: center; padding: 20px 12px; border: 1px solid var(--fd-line-2); border-radius: var(--fd-radius); background: var(--fd-surface); box-shadow: var(--fd-shadow); text-align: center; } & .fd-connect__destination-label { color: var(--fd-heading); font-weight: var(--fd-heading-weight); line-height: 1.3; } & .fd-connect__stage[data-stage="destination"] { align-self: center; } & .fd-connect__pipeline-stage { padding: 8px 12px; border: 1px solid var(--fd-line); border-inline-start: 3px solid var(--fd-accent); border-radius: var(--fd-radius-sm); background: var(--fd-surface); color: var(--fd-heading); font-size: var(--fd-text-sm); font-weight: 500; } /* Connector: a thin line ending in the arrow icon. */ & .fd-connect__arrow { display: inline-flex; flex: none; align-items: center; color: var(--fd-line-2); &::before { content: ""; width: 16px; height: 1px; background: currentColor; } & .fd-icon { width: 18px; height: 18px; margin-inline-start: -6px; color: var(--fd-muted); } } @media (prefers-reduced-motion: no-preference) { & .fd-connect__flow[data-animated="true"] .fd-connect__arrow { animation: fd-line-pulse 3.6s ease-in-out infinite; } & .fd-connect__flow[data-animated="true"] .fd-connect__arrow ~ .fd-connect__arrow { animation-delay: -1.8s; } } & .fd-connect__metrics { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; & .fd-connect__metric { display: flex; flex: 1 1 160px; flex-direction: column-reverse; gap: 2px; padding: 14px 16px; border: 1px solid var(--fd-line); border-radius: var(--fd-radius); background: var(--fd-surface); } & dt { color: var(--fd-muted); font-size: var(--fd-text-xs); } & dd { margin: 0; color: var(--fd-heading); font-family: var(--fd-heading-font); font-size: var(--fd-h-small); font-weight: var(--fd-heading-weight); line-height: 1.2; } } /* A narrow visual column reads top to bottom. */ @container (max-width: 560px) { & .fd-connect__flow { flex-direction: column; align-items: stretch; } & .fd-connect__stage[data-stage="destination"] { align-self: stretch; } & .fd-connect__arrow { flex-direction: column; align-self: center; &::before { width: 1px; height: 12px; } & .fd-icon { margin-inline-start: 0; margin-top: -6px; transform: rotate(90deg); } } } @media (max-width: 989px) { & .fd-connect[data-layout] .fd-connect__layout { grid-template-columns: minmax(0, 1fr); } & .fd-connect[data-layout="visual_left"] .fd-connect__visual { order: 0; } & .fd-connect[data-mobile-order="visual_first"] .fd-connect__visual { order: -1; } } } /* 6.x Footer CTA (footer_cta) — renderer footer-cta */ [data-mv-theme-root="movadly-light"] { & .fd-footer-cta__panel { display: grid; gap: 20px; justify-items: center; max-width: var(--fd-narrow); margin-inline: auto; text-align: center; & .fd-intro { margin-bottom: 0; } } & .fd-footer-cta__icon { font-size: calc(var(--fd-base-size) * 1.375); line-height: 1; } & .fd-footer-cta__actions { justify-content: center; } } /* 6.x Email Signup (newsletter) — renderer newsletter */ [data-mv-theme-root="movadly-light"] { & .fd-newsletter { --fd-nl-image: 50%; --fd-nl-form: 560px; } & .fd-newsletter[data-image-width="30"] { --fd-nl-image: 30%; } & .fd-newsletter[data-image-width="40"] { --fd-nl-image: 40%; } & .fd-newsletter[data-form-width="small"] { --fd-nl-form: 420px; } & .fd-newsletter[data-form-width="large"] { --fd-nl-form: 720px; } & .fd-newsletter[data-form-width="full"] { --fd-nl-form: 100%; } & .fd-newsletter__layout { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; } & .fd-newsletter[data-layout="image_left"] .fd-newsletter__layout { grid-template-columns: var(--fd-nl-image) minmax(0, 1fr); } & .fd-newsletter[data-layout="image_right"] .fd-newsletter__layout { grid-template-columns: minmax(0, 1fr) var(--fd-nl-image); & .fd-newsletter__media { order: 1; } } & .fd-newsletter[data-layout="stacked"] .fd-newsletter__media { width: min(100%, 960px); justify-self: start; } & .fd-newsletter[data-layout="stacked"][data-image-position="right"] .fd-newsletter__media { justify-self: end; } & .fd-newsletter__content { display: grid; gap: 16px; min-width: 0; } & .fd-newsletter[data-align="center"] .fd-newsletter__content { text-align: center; } & .fd-newsletter[data-align="right"] .fd-newsletter__content { text-align: end; } & .fd-newsletter[data-align="center"] .fd-newsletter__text { max-width: 640px; margin-inline: auto; } & .fd-newsletter[data-align="right"] .fd-newsletter__text { max-width: 640px; margin-inline-start: auto; } & .fd-newsletter__text[data-size="medium"] { font-size: var(--fd-text-lg); } & .fd-newsletter__text[data-size="large"] { font-size: calc(var(--fd-base-size) * 1.3125); } & .fd-newsletter__form { width: 100%; max-width: var(--fd-nl-form); margin-top: 8px; } & .fd-newsletter[data-form-align="center"] .fd-newsletter__form { margin-inline: auto; } & .fd-newsletter[data-form-align="right"] .fd-newsletter__form { margin-inline-start: auto; } & .fd-newsletter__row { display: flex; gap: 10px; } /* Surface instead of --fd-bg so the field reads correctly on the dark scheme too. */ & .fd-newsletter__input { flex: 1 1 auto; min-width: 0; background: var(--fd-surface); text-align: start; } & .fd-newsletter__button { flex: none; } & .fd-newsletter[data-button-position="below"] .fd-newsletter__row { flex-direction: column; align-items: stretch; } & .fd-newsletter[data-field-style="underline"] .fd-newsletter__input { padding-inline: 2px; border-width: 0 0 1px; border-radius: 0; background: transparent; } & .fd-newsletter[data-field-style="underline"] .fd-newsletter__input:focus-visible { border-bottom-color: var(--fd-accent); } & .fd-newsletter__terms { color: var(--fd-muted); font-size: var(--fd-text-xs); & a { margin-inline-start: 6px; color: var(--fd-heading); } } & .fd-newsletter__notice { text-align: start; } @media (max-width: 989px) { & .fd-newsletter[data-layout="image_left"] .fd-newsletter__layout, & .fd-newsletter[data-layout="image_right"] .fd-newsletter__layout { grid-template-columns: minmax(0, 1fr); } & .fd-newsletter[data-layout] .fd-newsletter__layout .fd-newsletter__media { order: 0; } & .fd-newsletter[data-mobile-order="form_first"] .fd-newsletter__layout .fd-newsletter__media { order: 1; } } @media (max-width: 599px) { & .fd-newsletter[data-mobile-align="left"] .fd-newsletter__content { text-align: start; } & .fd-newsletter[data-mobile-align="center"] .fd-newsletter__content { text-align: center; } & .fd-newsletter[data-mobile-align="right"] .fd-newsletter__content { text-align: end; } & .fd-newsletter__row { flex-direction: column; align-items: stretch; } } } /* * Scroll containers are positioning contexts, so visually hidden text inside them * (position: absolute) is clipped with them instead of widening the page. */ [data-mv-theme-root="movadly-light"] { & :is(.fd-track, .fd-compare__scroll, .fd-swipe-mobile, [data-fd-scroll]) { position: relative; } } /* Form fields inside dark-scheme sections read the dark tokens, not the page background. */ [data-mv-theme-root="movadly-light"] { & .fd-scheme-dark .fd-input { border-color: var(--fd-line-2); background: var(--fd-surface-2); color: var(--fd-heading); } } /* 7. RTL ------------------------------------------------------------------- */ /* * Layout uses logical properties (inline-start / inline-end), so most modules need * nothing here. Direction arrives on from the tenant's language settings. */ [dir="rtl"] [data-mv-theme-root="movadly-light"] { & .fd-icon--arrow, & .fd-icon--arrow_left { transform: scaleX(-1); } & .fd-link:hover .fd-icon { transform: scaleX(-1) translateX(3px); } & .fd-footer__top-icon { transform: rotate(-90deg); } & .fd-header[data-mobile-logo-position="center"] .fd-header__brand { transform: translateX(50%); } & .fd-image-text--media-viewport_edge .fd-image-text__media { margin-inline-start: calc(-1 * var(--fd-gutter)); } }