body, main#primary { overflow: visible !important; } /* ====================== Scroll Cards Stack ====================== Scroll-linked stacking cards. Sticky cards stack on top of each other as the user scrolls. Each card scales down and fades when the next card overlaps it. Required HTML structure: .motion__scroll-cards-stack .motion__scroll-cards-stack__card .motion__scroll-cards-stack__inner img.motion__scroll-cards-stack__bg (optional) .motion__scroll-cards-stack__content (optional) Dependencies: Motion.js (animate, scroll) How it works: Cards use aspect-ratio for responsive sizing. JS calculates the wrapper height at runtime based on card heights, gaps, and count. On resize, heights are recalculated automatically. Per-instance overrides via inline styles on .motion__scroll-cards-stack:
====================== */ /* --- Block --- */ .motion__scroll-cards-stack { /* Card aspect ratio per breakpoint */ --motion-card-stack-card-aspect-desktop: 16 / 9; --motion-card-stack-card-aspect-tablet: 16 / 9; --motion-card-stack-card-aspect-tablet-sm: 1 / 1; --motion-card-stack-card-aspect-mobile: 3 / 5; /* Sticky top offset per breakpoint */ --motion-card-stack-card-top-desktop: 80px; --motion-card-stack-card-top-tablet: 120px; --motion-card-stack-card-top-tablet-sm: 80px; --motion-card-stack-card-top-mobile: 80px; /* Gap between cards (scroll distance) per breakpoint */ --motion-card-stack-card-gap-desktop: 24px; --motion-card-stack-card-gap-tablet: 24px; --motion-card-stack-card-gap-tablet-sm: 16px; --motion-card-stack-card-gap-mobile: 16px; /* Active values (set by breakpoints) */ --motion-card-stack-card-aspect: var(--motion-card-stack-card-aspect-desktop); --motion-card-stack-card-top: var(--motion-card-stack-card-top-desktop); --motion-card-stack-card-gap: var(--motion-card-stack-card-gap-desktop); display: flex; flex-direction: column; gap: var(--motion-card-stack-card-gap); width: 100%; /* Height set by JS based on card count, heights, and gaps */ } /* --- Card --- */ .motion__scroll-cards-stack__card { position: sticky; position: -webkit-sticky; top: var(--motion-card-stack-card-top); flex-shrink: 0; width: 100%; aspect-ratio: var(--motion-card-stack-card-aspect); background: #fff; border-radius: 24px; overflow: hidden; } /* --- Inner (animation target for fade) --- */ .motion__scroll-cards-stack__inner { position: relative; width: 100%; height: 100%; } /* --- Background Image --- */ .motion__scroll-cards-stack__bg-image { display: block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; z-index: 0; } /* --- Background Video --- */ .motion__scroll-cards-stack__bg-video { position: absolute; top: 50%; left: 50%; width: 177.78vh; /* 16/9 = 1.7778 */ height: 56.25vw; /* 9/16 = 0.5625 */ min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); border: 0; z-index: 0; } /* --- Background Overlay --- */ .motion__scroll-cards-stack__bg-overlay { display: block; position: absolute; z-index: 2; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; z-index: 1; background-color: rgba(0,0,0,0.24); } /* --- Content --- */ .motion__scroll-cards-stack__content { position: relative; display: block; z-index: 2; padding: 60px 40px; } /* ====================== Breakpoints ====================== */ /* Tablet landscape */ @media (max-width: 1024px) { .motion__scroll-cards-stack { --motion-card-stack-card-aspect: var(--motion-card-stack-card-aspect-tablet); --motion-card-stack-card-top: var(--motion-card-stack-card-top-tablet); --motion-card-stack-card-gap: var(--motion-card-stack-card-gap-tablet); } } /* Tablet portrait */ @media (max-width: 768px) { .motion__scroll-cards-stack { --motion-card-stack-card-aspect: var(--motion-card-stack-card-aspect-tablet-sm); --motion-card-stack-card-top: var(--motion-card-stack-card-top-tablet-sm); --motion-card-stack-card-gap: var(--motion-card-stack-card-gap-tablet-sm); } .motion__scroll-cards-stack__content { padding: 40px 24px; } .motion__scroll-cards-stack__content h2 { font-size: 1.5rem; } } /* Mobile */ @media (max-width: 480px) { .motion__scroll-cards-stack { --motion-card-stack-card-aspect: var(--motion-card-stack-card-aspect-mobile); --motion-card-stack-card-top: var(--motion-card-stack-card-top-mobile); --motion-card-stack-card-gap: var(--motion-card-stack-card-gap-mobile); } } /* --- Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { .motion__scroll-cards-stack__card { will-change: auto; } } /* ====================== Logo Marquee ====================== Auto-scrolling logo marquee. Logos display in square containers and scroll continuously in a fixed direction. Required HTML structure: .motion__logo-marquee[data-direction] .motion__logo-marquee__track .motion__logo-marquee__content .motion__logo-marquee__item img Per-instance overrides:
Data attributes: data-direction="left" logos move left (default) data-direction="right" logos move right CSS variables (all optional): --motion-logo-marquee-gap-desktop/tablet/tablet-sm/mobile gap between items per breakpoint (default 24px) --motion-logo-marquee-size-desktop/tablet/tablet-sm/mobile logo container size per breakpoint (default 64px) --motion-logo-marquee-radius-desktop/tablet/tablet-sm/mobile border-radius per breakpoint (default 12px) --motion-logo-marquee-speed animation speed multiplier (default 0.75) Breakpoints: Desktop — > 1024px Tablet — <= 1024px Tablet sm — <= 768px Mobile — <= 480px ====================== */ /* --- Block --- */ .motion__logo-marquee { /* Gap per breakpoint */ --motion-logo-marquee-gap-desktop: 24px; --motion-logo-marquee-gap-tablet: 24px; --motion-logo-marquee-gap-tablet-sm: 16px; --motion-logo-marquee-gap-mobile: 16px; /* Size per breakpoint */ --motion-logo-marquee-size-desktop: 124px; --motion-logo-marquee-size-tablet: 124px; --motion-logo-marquee-size-tablet-sm: 96px; --motion-logo-marquee-size-mobile: 96px; /* Radius per breakpoint */ --motion-logo-marquee-radius-desktop: 12px; --motion-logo-marquee-radius-tablet: 12px; --motion-logo-marquee-radius-tablet-sm: 8px; --motion-logo-marquee-radius-mobile: 8px; /* Speed (not breakpoint-dependent) */ --motion-logo-marquee-speed: 0.5; /* Fade edge width */ --motion-logo-marquee-fade: 64px; /* Active values (set by breakpoints) */ --motion-logo-marquee-gap: var(--motion-logo-marquee-gap-desktop); --motion-logo-marquee-size: var(--motion-logo-marquee-size-desktop); --motion-logo-marquee-radius: var(--motion-logo-marquee-radius-desktop); overflow: hidden; position: relative; } /* --- Fade edges --- */ .motion__logo-marquee__gradient-overlay, .motion__logo-marquee__gradient-overlay--gray { position: relative; overflow: hidden; } .motion__logo-marquee__gradient-overlay--gray::before, .motion__logo-marquee__gradient-overlay--gray::after, .motion__logo-marquee__gradient-overlay::before, .motion__logo-marquee__gradient-overlay::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8vw; z-index: 10; pointer-events: none; height: 100%; } .motion__logo-marquee__gradient-overlay--gray::before { left: 0; background: linear-gradient(to right, var(--motion-logo-marquee-fade-color, #f7f7f7), transparent); } .motion__logo-marquee__gradient-overlay--gray::after { right: 0; background: linear-gradient(to left, var(--motion-logo-marquee-fade-color, #f7f7f7), transparent); } .motion__logo-marquee__gradient-overlay::before { left: 0; background: linear-gradient(to right, var(--motion-logo-marquee-fade-color, #ffffff), transparent); } .motion__logo-marquee__gradient-overlay::after { right: 0; background: linear-gradient(to left, var(--motion-logo-marquee-fade-color, #fffffff), transparent); } /* --- Track (animated container) --- */ .motion__logo-marquee__track { display: inline-flex; gap: var(--motion-logo-marquee-gap); } /* --- Content (repeated for seamless loop) --- */ .motion__logo-marquee__content { display: inline-flex; gap: var(--motion-logo-marquee-gap); } /* --- Item (square logo container) --- */ .motion__logo-marquee__item { flex-shrink: 0; width: var(--motion-logo-marquee-size); height: var(--motion-logo-marquee-size); border-radius: var(--motion-logo-marquee-radius); overflow: hidden; display: flex; align-items: center; justify-content: center; } .motion__logo-marquee__item img { display: block; width: 100%; height: 100%; object-fit: contain; } /* ====================== Breakpoints ====================== */ /* Tablet landscape */ @media (max-width: 1024px) { .motion__logo-marquee { --motion-logo-marquee-gap: var(--motion-logo-marquee-gap-tablet); --motion-logo-marquee-size: var(--motion-logo-marquee-size-tablet); --motion-logo-marquee-radius: var(--motion-logo-marquee-radius-tablet); } } /* Tablet portrait */ @media (max-width: 768px) { .motion__logo-marquee { --motion-logo-marquee-gap: var(--motion-logo-marquee-gap-tablet-sm); --motion-logo-marquee-size: var(--motion-logo-marquee-size-tablet-sm); --motion-logo-marquee-radius: var(--motion-logo-marquee-radius-tablet-sm); } } /* Mobile */ @media (max-width: 480px) { .motion__logo-marquee { --motion-logo-marquee-gap: var(--motion-logo-marquee-gap-mobile); --motion-logo-marquee-size: var(--motion-logo-marquee-size-mobile); --motion-logo-marquee-radius: var(--motion-logo-marquee-radius-mobile); } } /* --- Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { .motion__logo-marquee__track { animation: none; } } /* ====================== Horizontal Scroll ====================== Scroll-linked horizontal gallery. Items scroll left as the user scrolls down. A sticky container keeps the track visible while the tall wrapper drives scroll progress. BEM Naming: motion__scroll-horizontal Block: motion__scroll-horizontal Elements: motion__scroll-horizontal__{element} Required HTML structure: .motion__scroll-horizontal .motion__scroll-horizontal__sticky .motion__scroll-horizontal__header (optional) .motion__scroll-horizontal__track .motion__scroll-horizontal__item (repeatable) Dependencies: Motion.js (animate, scroll) Scroll height: --motion-scroll-horizontal-scroll-height is auto-calculated from --motion-scroll-horizontal-item-count and the layout variables (item width, gap, padding). When breakpoints change those values, the height recalculates automatically. JS also overrides the height at runtime for precision and recalculates on resize. Formula: 100vh + N×(itemWidth + gap) − gap + padL + padR − 100vw Set --motion-scroll-horizontal-item-count in the HTML to match the number of items so the CSS fallback is accurate before JS loads. Layout (viewport-height based): 10vh — header top padding 20vh — header content (vertically centered) 10vh — header bottom padding 60vh — track / images (fills remaining space via flex) ────── 100vh — total sticky height Without a header the track fills the full 100vh. Per-instance overrides via inline styles on .motion__scroll-horizontal:
--motion-scroll-horizontal-item-count is required — must match the number of items in HTML. All other variables are optional and will use the defaults below. --motion-scroll-horizontal-item-width-desktop/tablet/tablet-sm/mobile --motion-scroll-horizontal-item-radius-desktop/tablet/tablet-sm/mobile --motion-scroll-horizontal-track-gap-desktop/tablet/tablet-sm/mobile --motion-scroll-horizontal-track-padding-left-desktop/tablet/tablet-sm/mobile --motion-scroll-horizontal-track-padding-right-desktop/tablet/tablet-sm/mobile Breakpoints: Desktop — > 1024px Tablet — ≤ 1024px Tablet sm — ≤ 768px Mobile — ≤ 480px */ .motion__scroll-horizontal { /* Item width per breakpoint */ --motion-scroll-horizontal-item-width-desktop-large: calc((100vw / 1.5) - var(--motion-scroll-horizontal-track-padding-left) - var(--motion-scroll-horizontal-track-padding-right)); --motion-scroll-horizontal-item-width-desktop: calc((100vw / 1.25) - var(--motion-scroll-horizontal-track-padding-left) - var(--motion-scroll-horizontal-track-padding-right)); --motion-scroll-horizontal-item-width-tablet: calc((100vw / 1.25) - var(--motion-scroll-horizontal-track-padding-left) - var(--motion-scroll-horizontal-track-padding-right)); --motion-scroll-horizontal-item-width-tablet-sm: calc(100vw - var(--motion-scroll-horizontal-track-padding-left) - var(--motion-scroll-horizontal-track-padding-right)); --motion-scroll-horizontal-item-width-mobile: calc(100vw - var(--motion-scroll-horizontal-track-padding-left) - var(--motion-scroll-horizontal-track-padding-right)); /* Item border-radius per breakpoint */ --motion-scroll-horizontal-item-radius-desktop: 16px; --motion-scroll-horizontal-item-radius-tablet: 16px; --motion-scroll-horizontal-item-radius-tablet-sm: 8px; --motion-scroll-horizontal-item-radius-mobile: 8px; /* Track gap per breakpoint */ --motion-scroll-horizontal-track-gap-desktop: 24px; --motion-scroll-horizontal-track-gap-tablet: 24px; --motion-scroll-horizontal-track-gap-tablet-sm: 16px; --motion-scroll-horizontal-track-gap-mobile: 12px; /* Track padding-left per breakpoint */ --motion-scroll-horizontal-track-padding-left-desktop: 32px; --motion-scroll-horizontal-track-padding-left-tablet: 32px; --motion-scroll-horizontal-track-padding-left-tablet-sm: 20px; --motion-scroll-horizontal-track-padding-left-mobile: 16px; /* Track padding-right per breakpoint */ --motion-scroll-horizontal-track-padding-right-desktop: 56px; --motion-scroll-horizontal-track-padding-right-tablet: 56px; --motion-scroll-horizontal-track-padding-right-tablet-sm: 32px; --motion-scroll-horizontal-track-padding-right-mobile: 32px; /* Number of items — set via inline style in HTML to match actual item count */ --motion-scroll-horizontal-item-count: 5; /* Active values (set by breakpoints) */ --motion-scroll-horizontal-item-width: var(--motion-scroll-horizontal-item-width-desktop); --motion-scroll-horizontal-item-radius: var(--motion-scroll-horizontal-item-radius-desktop); --motion-scroll-horizontal-track-gap: var(--motion-scroll-horizontal-track-gap-desktop); --motion-scroll-horizontal-track-padding-left: var(--motion-scroll-horizontal-track-padding-left-desktop); --motion-scroll-horizontal-track-padding-right: var(--motion-scroll-horizontal-track-padding-right-desktop); /* Scroll height fallback (JS overrides with precise value at runtime) Formula: 100vh + N×(width + gap) − gap + padL + padR − 100vw */ --motion-scroll-horizontal-scroll-height: calc( 100vh + var(--motion-scroll-horizontal-item-count) * (var(--motion-scroll-horizontal-item-width) + var(--motion-scroll-horizontal-track-gap)) - var(--motion-scroll-horizontal-track-gap) + var(--motion-scroll-horizontal-track-padding-left) + var(--motion-scroll-horizontal-track-padding-right) - 100vw ); height: var(--motion-scroll-horizontal-scroll-height); } /* --- Sticky Container --- */ .motion__scroll-horizontal__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; overflow: hidden; } /* --- Header (optional — 10vh pad + 20vh content + 10vh pad = 40vh) --- */ .motion__scroll-horizontal__header { flex-shrink: 0; height: 30vh; display: flex; flex-direction: column; justify-content: center; padding: 12vh var(--motion-scroll-horizontal-track-padding-left) 7vh var(--motion-scroll-horizontal-track-padding-left); } /* --- Track (fills remaining height — 60vh with header, 100vh without) --- */ .motion__scroll-horizontal__track { flex: 1; align-self: flex-start; display: flex; gap: var(--motion-scroll-horizontal-track-gap); padding-left: var(--motion-scroll-horizontal-track-padding-left); padding-right: var(--motion-scroll-horizontal-track-padding-right); padding-bottom: 10vh; } /* --- Items --- */ .motion__scroll-horizontal__item { flex-shrink: 0; width: var(--motion-scroll-horizontal-item-width); height: 100%; border-radius: var(--motion-scroll-horizontal-item-radius); overflow: hidden; position: relative; } .motion__scroll-horizontal__item .motion__scroll-horizontal__item__img { display: block; width: 100%; height: 100%; object-fit: cover; } .motion__scroll-horizontal__item .motion__scroll-horizontal__item__video { position: absolute; top: 50%; left: 50%; width: 177.78vh; /* 16/9 = 1.7778 */ height: 56.25vw; /* 9/16 = 0.5625 */ min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); border: 0; z-index: 0; } .motion__scroll-horizontal__item .motion__scroll-horizontal__item__overlay { position: absolute; top: 0; left:0; bottom: 0; right: 0; height: 100%; width: 100%; z-index:1; background-color: rgba(0,0,0,0.32); } .motion__scroll-horizontal__item .motion__scroll-horizontal__item__content { position: relative; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 0px 56px 32px 56px; z-index: 4 !important; color: #ffffff; } /* ====================== Breakpoints ====================== */ @media (min-width: 1400px) { .motion__scroll-horizontal { --motion-scroll-horizontal-item-width: var(--motion-scroll-horizontal-item-width-desktop-large); } } @media (max-width: 1024px) { .motion__scroll-horizontal { --motion-scroll-horizontal-item-width: var(--motion-scroll-horizontal-item-width-tablet); --motion-scroll-horizontal-item-radius: var(--motion-scroll-horizontal-item-radius-tablet); --motion-scroll-horizontal-track-gap: var(--motion-scroll-horizontal-track-gap-tablet); --motion-scroll-horizontal-track-padding-left: var(--motion-scroll-horizontal-track-padding-left-tablet); --motion-scroll-horizontal-track-padding-right: var(--motion-scroll-horizontal-track-padding-right-tablet); } .motion__scroll-horizontal__item .motion__scroll-horizontal__item__content { padding: 0px 56px 32px 56px; } } @media (max-width: 768px) { .motion__scroll-horizontal { --motion-scroll-horizontal-item-width: var(--motion-scroll-horizontal-item-width-tablet-sm); --motion-scroll-horizontal-item-radius: var(--motion-scroll-horizontal-item-radius-tablet-sm); --motion-scroll-horizontal-track-gap: var(--motion-scroll-horizontal-track-gap-tablet-sm); --motion-scroll-horizontal-track-padding-left: var(--motion-scroll-horizontal-track-padding-left-tablet-sm); --motion-scroll-horizontal-track-padding-right: var(--motion-scroll-horizontal-track-padding-right-tablet-sm); } .motion__scroll-horizontal__item .motion__scroll-horizontal__item__content { padding: 0px 40px 20px 40px; } } @media (max-width: 480px) { .motion__scroll-horizontal { --motion-scroll-horizontal-item-width: var(--motion-scroll-horizontal-item-width-mobile); --motion-scroll-horizontal-item-radius: var(--motion-scroll-horizontal-item-radius-mobile); --motion-scroll-horizontal-track-gap: var(--motion-scroll-horizontal-track-gap-mobile); --motion-scroll-horizontal-track-padding-left: var(--motion-scroll-horizontal-track-padding-left-mobile); --motion-scroll-horizontal-track-padding-right: var(--motion-scroll-horizontal-track-padding-right-mobile); } .motion__scroll-horizontal__item .motion__scroll-horizontal__item__content { padding: 0px 24px 12px 24px; } } /* ====================== Scroll Theme ====================== Changes a div's background and text color once the user scrolls a certain percentage into it. Required HTML structure: .motion__scroll-theme[data-bg][data-text][data-bg-active][data-text-active] [any content] Dependencies: None (vanilla JS with IntersectionObserver) Data attributes on .motion__scroll-theme: data-bg="#ffffff" starting background color data-text="#111111" starting text color data-bg-active="#111111" background color after threshold data-text-active="#ffffff" text color after threshold data-threshold="20" % of element visible before switching (default 20) CSS variables (all optional): --motion-scroll-theme-duration transition duration (default 0.6s) --motion-scroll-theme-easing transition easing (default ease) Text color utility classes: .motion__scroll-theme__text-primary inherits the active text color .motion__scroll-theme__text-muted active text color at 0.5 opacity ====================== */ /* --- Block --- */ .motion__scroll-theme { --motion-scroll-theme-duration: 0.6s; --motion-scroll-theme-easing: ease; /* Active colors (updated by JS) */ --motion-scroll-theme-bg: #ffffff; --motion-scroll-theme-text: #111111; background-color: var(--motion-scroll-theme-bg); color: var(--motion-scroll-theme-text); transition: background-color var(--motion-scroll-theme-duration) var(--motion-scroll-theme-easing), color var(--motion-scroll-theme-duration) var(--motion-scroll-theme-easing); } /* --- Text color utilities --- */ .motion__scroll-theme__text-primary { color: var(--motion-scroll-theme-text); transition: color var(--motion-scroll-theme-duration) var(--motion-scroll-theme-easing); } .motion__scroll-theme__text-muted { color: var(--motion-scroll-theme-text); opacity: 1; transition: color var(--motion-scroll-theme-duration) var(--motion-scroll-theme-easing); } /* ====================== Unforgettable Moments Video Section - Home Screen ====================== Video with column overlays on the home screen ====================== */ .um__video__bin { position: relative; aspect-ratio: 16/9; width: 100%; background-color: white; overflow: hidden; margin-left: auto; margin-right: auto; } .um__video__bin .um__video__video-bg { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); border: 0; z-index: 0; } .um__video__bin .um__video__content-row { height: 100%; z-index: 4; position: relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .um__video__bin .um__video__content-col { height: 100%; z-index: 4; position: relative; width: 25%; overflow: hidden; } .um__video__bin .um__video__content-col::before { inset: 4.5%; /* Frame thickness */ border-radius: clamp(12px, 2vw, 16px); /* Always perfect, never distorts */ box-shadow: 0 0 0 9999px #ffffff; content: ""; position: absolute; z-index: 1; } @media (max-width: 576px) { .um__video__bin .um__video__content-col::before { display: none !important; } .um__video__bin { width: calc(100% - 32px); aspect-ratio: 1/1; border-radius: 12px; } .um__video__bin .um__video__video-bg { width: 177.78vh; /* 16/9 = 1.7778 */ height: 56.25vw; /* 9/16 = 0.5625 */ } } /* ====================== Navigation - dropdowns ====================== Dropdown bin styles for navigation component ====================== */ .refresh .main-nav-sub { background-color: white; width: 100%; margin-left: auto !important; margin-right: auto !important; left: 0; right: 0; border-radius: 16px; } @media (min-width: 1200px) { .refresh .main-nav-sub { max-width: 1140px } } /* ====================== Floating Logos ====================== Centered text + button hero section surrounded by ambient floating logo icons that continuously animate in and out. BEM Naming: motion__floating-logos Block: motion__floating-logos Elements: motion__floating-logos__{element} Required HTML structure: .motion__floating-logos .motion__floating-logos__icon (repeatable, positioned via inline style) img .motion__floating-logos__content h2 / p / a Dependencies: Motion.js (animate) Icon placement: Each .motion__floating-logos__icon uses inline styles for positioning: style="--x: 8%; --y: 20%;" Values are percentages relative to the container. CSS variables (all optional): --motion-floating-logos-height section height (default 100vh) --motion-floating-logos-icon-size icon container size (default 56px) --motion-floating-logos-icon-radius icon border-radius (default 12px) --motion-floating-logos-bg background color (default #fafafa) --motion-floating-logos-text text color (default #111111) --motion-floating-logos-text-muted muted text color (default #666666) --motion-floating-logos-btn-bg button background (default #111111) --motion-floating-logos-btn-text button text color (default #ffffff) */ .motion__floating-logos { --motion-floating-logos-height: 45vh; --motion-floating-logos-icon-size: 112px; --motion-floating-logos-icon-radius: 12px; position: relative; display: flex; align-items: center; justify-content: center; height: var(--motion-floating-logos-height); overflow: hidden; max-width: 1100px; margin-left: auto; margin-right: auto; } /* --- Content (centered text + button) --- */ .motion__floating-logos__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 560px; padding: 0 24px; } /* --- Floating icons --- */ .motion__floating-logos__icon { position: absolute; left: var(--x); top: var(--y); width: var(--motion-floating-logos-icon-size); height: var(--motion-floating-logos-icon-size); overflow: hidden; display: flex; align-items: center; justify-content: center; opacity: 0; will-change: transform, opacity; } .motion__floating-logos__icon img { display: block; width: 100%; height: 100%; object-fit: contain; } /* ====================== Breakpoints ====================== */ @media (max-width: 768px) { .motion__floating-logos { --motion-floating-logos-icon-size: 52px; --motion-floating-logos-icon-radius: 10px; } .motion__floating-logos__content h2 { font-size: 32px; } .motion__floating-logos__content p { font-size: 16px; } } @media (max-width: 480px) { .motion__floating-logos { --motion-floating-logos-icon-size: 44px; --motion-floating-logos-icon-radius: 8px; } .motion__floating-logos__content h2 { font-size: 28px; } } /* ====================== Underline Text ====================== Text with an animated highlight underline that grows from left to right when the element enters the viewport. BEM Naming: motion__underline-text Block: motion__underline-text Elements: motion__underline-text__{element} Required HTML structure: .motion__underline-text word Dependencies: Motion.js (animate, inView) CSS variables (all optional): --motion-underline-color underline color (default #CDDB3E) --motion-underline-thickness underline thickness (default 0.35em) --motion-underline-position vertical position (default 85%) ====================== */ .motion__underline-text__highlight { background-image: linear-gradient( var(--motion-underline-color, #CDDB3E), var(--motion-underline-color, #CDDB3E) ); background-size: 0% var(--motion-underline-thickness, 0.35em); background-repeat: no-repeat; background-position: 0 var(--motion-underline-position, 85%); }