/* ========================================================================== Moxo AI — nindex.css Shared by index.html and 404.html. 1. Tokens 2. Base 3. Typography 4. Utilities 5. Controls 6. Surfaces 7. Chrome — cursor, progress, frame, menu, curtain 8. Banner shell — circle text, dodecahedron 9. Sections — services, roadmap, reviews, partners, blog, 404 10. Ecosystem modal 11. Page transitions 12. Word reveals 13. Hero 14. About 15. Motion preferences ========================================================================== */ /* The font is requested from the page instead: an @import here made the browser parse this file before it could even ask for it. */ /* -------------------------------------------------------------------------- 1. Tokens Colour comes from three inputs, the way Linear generates its themes: the brand accent, the hue the neutrals lean toward, and a contrast knob. Neutrals carry a trace of the brand hue rather than flat grey, surfaces step by lightness rather than by shadow, and every text role is checked against its surface: ink >= 15:1, ink-2 >= 6.5:1, ink-3 >= 4.5:1. -------------------------------------------------------------------------- */ :root{ --brand: #8c0df5; --tint: 299.5; /* the brand's hue in oklch degrees */ --contrast: 0; /* 0 normal, 1 high */ /* light context */ --surface: oklch(98.5% .004 var(--tint)); --surface-raised: oklch(100% 0 0); --surface-sunken: oklch(95.5% .006 var(--tint)); --line: oklch(90.5% .008 var(--tint)); --line-strong: oklch(84% .01 var(--tint)); --ink: oklch(calc(21% - var(--contrast) * 9%) .016 var(--tint)); --ink-2: oklch(calc(45% - var(--contrast) * 14%) .014 var(--tint)); --ink-3: oklch(calc(53% - var(--contrast) * 16%) .012 var(--tint)); --accent: var(--brand); --accent-ink: var(--brand); --accent-soft: color-mix(in oklch, var(--brand) 9%, transparent); --accent-line: color-mix(in oklch, var(--brand) 38%, transparent); --accent-deep: color-mix(in oklch, var(--brand) 42%, #000); --on-accent: #fff; /* chrome that floats over either context */ --chrome-bar: oklch(16% .014 var(--tint) / .92); /* type, fluid between a 360px and a 1440px viewport */ --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --fs-label: clamp(.75rem, .7292rem + .0926vw, .8125rem); --fs-small: clamp(.875rem, .8542rem + .0926vw, .9375rem); --fs-body: clamp(1rem, .9792rem + .0926vw, 1.0625rem); --fs-lead: clamp(1.0625rem, 1.0208rem + .1852vw, 1.1875rem); --fs-xl: clamp(1.1875rem, 1.125rem + .2778vw, 1.375rem); --fs-h6: clamp(1rem, .9583rem + .1852vw, 1.125rem); --fs-h5: clamp(1.125rem, 1.0833rem + .1852vw, 1.25rem); --fs-h4: clamp(1.375rem, 1.25rem + .5556vw, 1.75rem); --fs-h3: clamp(1.6875rem, 1.375rem + 1.3889vw, 2.625rem); --fs-h2: clamp(2rem, 1.2708rem + 3.2407vw, 4.1875rem); --fs-h1: clamp(2.375rem, 1.375rem + 4.4444vw, 5.375rem); --fs-menu: clamp(1.625rem, 1.4583rem + .7407vw, 2.125rem); --lh-tight: 1.08; --lh-heading: 1.18; --lh-body: 1.6; --track-label: .14em; /* space, same 360px to 1440px ramp */ --space-15: clamp(.75rem, .6875rem + .2778vw, .9375rem); --space-20: clamp(1rem, .9167rem + .3704vw, 1.25rem); --space-30: clamp(1.5rem, 1.375rem + .5556vw, 1.875rem); --space-40: clamp(2rem, 1.8333rem + .7407vw, 2.5rem); --space-60: clamp(2.5rem, 2.0833rem + 1.8519vw, 3.75rem); --space-90: clamp(3.5rem, 2.7917rem + 3.1481vw, 5.625rem); --space-120: clamp(4.5rem, 3.5rem + 4.4444vw, 7.5rem); --frame-inset: clamp(1.25rem, .4167rem + 3.7037vw, 3.75rem); /* shape and motion */ --radius-sm: 10px; --radius: 15px; --radius-lg: 24px; --radius-pill: 999px; --btn-h: clamp(3.5rem, 3.2083rem + 1.2963vw, 4.375rem); --ease: cubic-bezier(0, 0, .3642, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); --dur-fast: .2s; --dur: .4s; --dur-slow: .6s; } /* dark context. Components read the same names, so a link or a card placed in a dark section re-colours itself without a modifier class. */ .moxoai-dark-bg, .moxoai-menu-frame{ --surface: oklch(16% .014 var(--tint)); --surface-raised: oklch(19.5% .016 var(--tint)); --surface-sunken: oklch(13.5% .012 var(--tint)); --line: oklch(28.5% .016 var(--tint)); --line-strong: oklch(37% .018 var(--tint)); --ink: oklch(calc(96.5% + var(--contrast) * 3.5%) .006 var(--tint)); --ink-2: oklch(calc(78% + var(--contrast) * 14%) .012 var(--tint)); --ink-3: oklch(calc(66% + var(--contrast) * 18%) .014 var(--tint)); --accent-ink: color-mix(in oklch, var(--brand) 52%, #fff); --accent-soft: color-mix(in oklch, var(--brand) 18%, transparent); --accent-line: color-mix(in oklch, var(--brand) 55%, transparent); color: var(--ink-2); background-color: var(--surface); } @media (prefers-contrast: more){ :root{ --contrast: 1; } } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; } html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; } body{ font-family: var(--font); font-size: var(--fs-body); font-weight: 350; line-height: var(--lh-body); color: var(--ink-2); background-color: var(--surface); overscroll-behavior: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* the template set this to transparent, which made selected text invisible */ ::selection{ color: inherit; background-color: color-mix(in oklch, var(--brand) 26%, transparent); } :focus-visible{ outline: 2px solid var(--accent-ink); outline-offset: 3px; } ::-webkit-scrollbar{ display: none; } a{ color: inherit; text-decoration: none; } section{ position: relative; overflow: hidden; } .moxoai-wrapper{ position: relative; overflow: hidden; max-width: 100%; } .container{ pointer-events: all; } /* -------------------------------------------------------------------------- 3. Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .moxoai-h1, .moxoai-h2, .moxoai-h3{ font-family: var(--font); font-weight: 500; line-height: var(--lh-heading); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; } h1, .moxoai-h1{ font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -.03em; } h2, .moxoai-h2{ font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -.025em; } h3, .moxoai-h3{ font-size: var(--fs-h3); letter-spacing: -.02em; } h4{ font-size: var(--fs-h4); } h5{ font-size: var(--fs-h5); line-height: 1.4; letter-spacing: -.005em; } h6{ font-size: var(--fs-h6); line-height: 1.45; letter-spacing: 0; } @media (max-width: 767.98px){ :is(h1, h2, h3, h4, h5, h6, .moxoai-h1, .moxoai-h2, .moxoai-h3) br{ display: none; } } .moxoai-thin{ font-weight: 200; } .moxoai-upper{ font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; } .moxoai-text-lg{ font-size: var(--fs-lead); line-height: 1.7; } .moxoai-text-xl{ font-size: var(--fs-xl); line-height: 1.65; } /* -------------------------------------------------------------------------- 4. Utilities -------------------------------------------------------------------------- */ .moxoai-center{ text-align: center; } .moxoai-no-wrap{ white-space: nowrap; } .moxoai-relative{ position: relative; } /* colour roles. The names are the template's; the values follow whichever context the element sits in. */ .moxoai-dark, .moxoai-muted{ color: var(--ink); } .moxoai-dark-soft, .moxoai-light-soft{ color: var(--ink-2); } .moxoai-accent{ color: var(--accent-ink); } .moxoai-suptitle{ position: relative; display: block; margin-bottom: var(--space-60); } .moxoai-suptitle::before{ content: ""; position: absolute; top: .8em; right: calc(100% + var(--space-30)); width: min(600px, 40vw); height: 1px; background-color: var(--line); } .moxoai-suptitle-right{ text-align: right; } .moxoai-suptitle-right::before{ right: auto; left: calc(100% + var(--space-30)); } @media (max-width: 767.98px){ .moxoai-suptitle-right{ text-align: center; } .moxoai-suptitle-right::before{ display: none; } } .moxoai-divider{ width: 100%; height: 1px; background-color: var(--line); } .moxoai-adaptive-right{ display: flex; justify-content: flex-end; width: 100%; } @media (max-width: 991.98px){ .moxoai-adaptive-right{ justify-content: flex-start; } } .moxoai-hidden-elements .moxoai-dodecahedron, .moxoai-hidden-elements .moxoai-lines, .moxoai-hidden-elements .moxoai-arrow{ display: none; } /* the template declared the box but never a line count, so nothing clamped */ .ellipsis{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } /* spacing. Desktop values are unchanged and ease down on smaller screens. mb-60 has always rendered 40px on this site, so it keeps that value. */ .moxoai-mb-10{ margin-bottom: 10px; } .moxoai-mb-15{ margin-bottom: var(--space-15); } .moxoai-mb-20{ margin-bottom: var(--space-20); } .moxoai-mb-30{ margin-bottom: var(--space-30); } .moxoai-mb-60{ margin-bottom: var(--space-40); } .moxoai-mb-120{ margin-bottom: var(--space-120); } .moxoai-p-120-120{ padding-block: var(--space-120); } .moxoai-p-120-60{ padding-top: var(--space-120); padding-bottom: var(--space-60); } .moxoai-p-120-30{ padding-top: var(--space-120); padding-bottom: var(--space-30); } .moxoai-p-120-0{ padding-top: var(--space-120); } /* -------------------------------------------------------------------------- 5. Controls -------------------------------------------------------------------------- */ .moxoai-link{ display: inline-flex; align-items: center; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; cursor: pointer; } /* main.js clones an arrow svg into every .moxoai-arrow-place */ .moxoai-link svg{ width: 32px; height: 32px; margin-left: 15px; padding: 8px; border-radius: 25%; background-color: color-mix(in oklch, currentColor 10%, transparent); transition: transform var(--dur) var(--ease); } .moxoai-link svg path{ fill: currentColor; } .moxoai-link:hover svg{ transform: scale(1.15); } .moxoai-link.moxoai-dark{ position: relative; } .moxoai-link.moxoai-dark span{ position: relative; } .moxoai-link.moxoai-dark span::after{ content: ""; position: absolute; right: 0; bottom: -4px; left: 0; height: 1px; background-color: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); } .moxoai-link.moxoai-dark:hover span::after{ transform: scaleX(1); } .moxoai-link.moxoai-dark .moxoai-arrow-glyph{ display: inline-block; margin-left: 8px; transition: transform .35s var(--ease-out); } .moxoai-link.moxoai-dark:hover .moxoai-arrow-glyph{ transform: translateX(6px); } .moxoai-button{ display: inline-flex; align-items: center; justify-content: center; height: var(--btn-h); /* right padding keeps the 40px arrow disc concentric at every height */ padding: 0 calc((var(--btn-h) - 40px) / 2) 0 clamp(1.75rem, 1rem + 2.5vw, 3.125rem); border: 0; border-radius: var(--radius-pill); background-color: var(--accent); color: var(--on-accent); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; cursor: pointer; transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); } .moxoai-button span{ white-space: nowrap; } .moxoai-button svg{ flex: none; width: 40px; height: 40px; margin-left: clamp(1.25rem, .9rem + 1vw, 1.875rem); padding: 10px; border-radius: 50%; /* near-black disc, the way the template drew it */ background-color: oklch(13% .012 var(--tint)); transition: transform var(--dur) var(--ease); } .moxoai-button svg path{ fill: var(--on-accent); } .moxoai-button:hover{ transform: scale(1.015); filter: brightness(1.08); } .moxoai-button:hover svg{ transform: scale(1.12); } /* the icon variants were given padding rather than a width, so the disc went oval whenever the button height changed */ .moxoai-button.moxoai-icon-button{ width: var(--btn-h); padding: 0; } .moxoai-button.moxoai-icon-button-sm{ height: 40px; padding: 0; } .moxoai-button.moxoai-icon-button svg, .moxoai-button.moxoai-icon-button-sm svg{ margin-left: 0; } .moxoai-button.moxoai-icon-button-sm svg{ background-color: var(--accent); } .moxoai-button.moxoai-arrow-down svg{ transform: rotate(90deg); } .moxoai-button.moxoai-arrow-down:hover svg{ transform: scale(1.12) rotate(90deg); } /* -------------------------------------------------------------------------- 6. Surfaces -------------------------------------------------------------------------- */ .moxoai-soft-bg{ background-color: var(--surface-sunken); } .moxoai-dark-bg{ position: relative; } /* The template painted dark sections by inverting the white page through a full-bleed backdrop-filter, which could only ever produce pure black and cost a compositing layer per section. They are real surfaces now (see the dark context in tokens), so the inverting layer is switched off. */ .moxoai-dark-bg::before{ content: none; } .moxoai-dark-bg .mi-invert-fix{ position: relative; z-index: 3; height: 100%; pointer-events: none; } .moxoai-dark-bg .mi-invert-fix .container{ pointer-events: all; } /* -------------------------------------------------------------------------- 7. Chrome -------------------------------------------------------------------------- */ /* cursor, desktop pointers only */ .moxoai-ball{ position: fixed; z-index: 10; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; /* main.js tweens this element, the colour must survive the tween */ background-color: var(--accent) !important; color: var(--on-accent) !important; opacity: .1; pointer-events: none; } .moxoai-ball .moxoai-icon-1{ position: absolute; width: 40px; height: 40px; transform: scale(0); } .moxoai-ball .moxoai-icon-1 svg{ fill: currentColor; } .moxoai-ball .moxoai-more-text, .moxoai-ball .moxoai-choose-text{ position: absolute; display: block; width: 100%; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-align: center; text-transform: uppercase; color: currentColor; transform: scale(0); } .moxoai-ball.moxoai-accent .moxoai-icon-1 svg{ fill: var(--accent-deep); } @media (max-width: 1199.98px), (hover: none){ .moxoai-ball{ display: none; } } .moxoai-progress-track{ position: fixed; z-index: 10; top: 0; right: 0; width: 4px; height: 100%; background-color: color-mix(in oklch, var(--ink) 12%, transparent); } .moxoai-progress-track .moxoai-progress{ width: 4px; height: 0; background-color: var(--accent); } @media (max-width: 991.98px){ .moxoai-progress-track{ display: none; } } /* frame: logo, menu button and the rotated side labels */ .moxoai-logo{ display: inline-flex; line-height: 1; pointer-events: all; } /* the logo file is white; the template inverted it with three different utility classes (.babye, .index-inline-1, .404-inline-1), which left it black on the black menu overlay. Colour now comes from the frame itself. */ .moxoai-frame .moxoai-logo img, .moxoai-menu-frame .moxoai-logo img{ filter: none; } .moxoai-frame{ position: fixed; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 50px 60px 60px; color: #fff; pointer-events: none; opacity: 1; transform: scale(1); transition: opacity var(--dur-slow), transform var(--dur-slow); } .moxoai-frame-top{ display: flex; align-items: center; justify-content: space-between; } .moxoai-frame .moxoai-frame-bottom{ display: flex; align-items: flex-end; justify-content: space-between; width: 100%; } .moxoai-frame .moxoai-frame-bottom .moxoai-current-page{ width: 300px; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; pointer-events: none; transform: rotate(-90deg) translateX(138px) translateY(-138px); } .moxoai-frame .moxoai-frame-bottom .moxoai-back-to-top{ width: 300px; pointer-events: all; transform: rotate(-90deg) translateX(130px) translateY(130px); } /* beats .moxoai-dark on the back-to-top link */ .moxoai-frame .moxoai-link{ color: #fff; } @media (min-width: 1200px){ /* Drawn white and blended with difference, the frame reads dark over light sections and light over dark ones. This is what the page-wide invert used to provide, at the cost of one small layer. */ .moxoai-frame{ mix-blend-mode: difference; } } @media (max-width: 1199.98px){ .moxoai-frame{ z-index: 999; height: 90px; padding: 0; } .moxoai-frame .moxoai-frame-top{ height: 90px; padding: 0 var(--frame-inset); border-bottom: 1px solid oklch(100% 0 0 / .08); background-color: var(--chrome-bar); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); } .moxoai-frame .moxoai-frame-bottom{ display: none; } } @media (max-width: 767.98px){ .moxoai-frame, .moxoai-frame .moxoai-frame-top{ height: 72px; } } /* menu button. The 28px glyph keeps its look; padding and a matching negative margin give it a 44px touch target. */ .moxoai-menu-btn{ display: flex; align-items: center; justify-content: center; height: 44px; margin: -8px; padding: 8px; cursor: pointer; pointer-events: all; transition: all var(--dur) var(--ease); } @media (max-width: 991.98px){ .moxoai-menu-btn{ transform: scale(.85); } } .moxoai-menu-btn span, .moxoai-menu-btn span::before, .moxoai-menu-btn span::after{ content: ""; display: block; width: 28px; height: 2.5px; background-color: #fff; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: inherit; } .moxoai-menu-btn span{ position: relative; } .moxoai-menu-btn span::before, .moxoai-menu-btn span::after{ position: absolute; } .moxoai-menu-btn span::before{ top: -9px; } .moxoai-menu-btn span::after{ top: 9px; width: 18px; } .moxoai-menu-btn.moxoai-active span{ transform: rotate(45deg); } .moxoai-menu-btn.moxoai-active span::before{ transform: translate(0, 9px) rotate(-90deg); } .moxoai-menu-btn.moxoai-active span::after{ width: 24px; opacity: 0; transform: translate(0, -9px) rotate(-90deg); } /* menu overlay (dark context, see tokens) */ .moxoai-menu-frame{ position: fixed; z-index: 9; width: 100%; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); } .moxoai-menu-frame .container{ pointer-events: none; } .moxoai-menu-frame.moxoai-active{ opacity: 1; pointer-events: all; } .moxoai-menu-frame.moxoai-active .container{ pointer-events: all; } .moxoai-menu-frame .moxoai-frame-top{ position: absolute; top: 0; left: 0; width: 100%; padding: 50px 60px; } .moxoai-main-menu{ display: flex; align-items: center; height: 100vh; height: 100dvh; opacity: 0; transform: translateX(-30px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .moxoai-menu-frame.moxoai-active .moxoai-main-menu{ opacity: 1; /* the template set translateX then translateY here, so one always lost */ transform: none; transition-delay: .4s; } .moxoai-main-menu ul{ margin: 0; padding: 0; } .moxoai-main-menu ul li{ margin-bottom: clamp(1.5rem, 1.1rem + 1.2vw, 2.5rem); list-style: none; } .moxoai-main-menu ul li:last-child{ margin-bottom: 0; } .moxoai-main-menu ul li a{ position: relative; display: flex; align-items: center; font-size: var(--fs-menu); font-weight: 500; letter-spacing: -.01em; color: var(--ink-2); transition: color var(--dur) var(--ease), padding var(--dur) var(--ease); } .moxoai-main-menu ul li a::before{ content: ""; position: absolute; left: 0; width: 10px; height: 10px; border-radius: 50%; background-color: var(--ink-3); transform: scale(0); transition: transform var(--dur) var(--ease); } .moxoai-main-menu ul li a:hover{ color: var(--ink); } .moxoai-main-menu ul li.moxoai-active > a{ color: var(--accent-ink); } .moxoai-main-menu ul li.moxoai-active > a:hover{ filter: brightness(1.1); } .moxoai-main-menu ul li.moxoai-has-children > a:hover{ padding-left: 25px; } .moxoai-main-menu ul li.moxoai-has-children > a:hover::before{ transform: scale(1); } .moxoai-menu-right-frame{ position: relative; display: flex; align-items: flex-end; height: 100vh; height: 100dvh; padding-left: 60px; border-left: 1px solid var(--line); opacity: 0; transform: translateY(30px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .moxoai-menu-frame.moxoai-active .moxoai-menu-right-frame{ opacity: 1; transform: none; transition-delay: .6s; } .moxoai-menu-right-frame .moxoai-menu-right{ padding-bottom: 60px; } .moxoai-menu-right-frame .moxoai-animation-in{ position: absolute; top: -320px; right: 0; opacity: 0; transform: translateY(-60px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .moxoai-menu-frame.moxoai-active .moxoai-menu-right-frame .moxoai-animation-in{ opacity: 1; transform: none; transition-delay: .8s; } .moxoai-menu-list li{ margin-bottom: 15px; list-style: none; } .moxoai-menu-list li:last-child{ margin-bottom: 0; } .moxoai-menu-list li a{ display: block; transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .moxoai-menu-list li a:hover{ color: var(--ink); transform: translateX(5px); } @media (max-width: 1199.98px){ .moxoai-menu-frame .moxoai-frame-top{ display: none; } .moxoai-main-menu{ justify-content: center; transform: translateY(30px); } .moxoai-main-menu ul{ display: flex; flex-direction: column; align-items: center; } .moxoai-main-menu ul li a{ justify-content: center; } .moxoai-main-menu ul li a::before{ display: none; } .moxoai-main-menu ul li.moxoai-has-children > a:hover{ padding-left: 0; } /* below xl the columns stack, so the side panel flows under the menu instead of claiming a second full screen */ .moxoai-menu-right-frame{ height: auto; padding: 0 0 var(--space-60); border-left: 0; } } @media (max-width: 767.98px){ .moxoai-menu-right{ display: none; } } .moxoai-curtain{ position: fixed; z-index: 4; width: 100%; height: 100vh; height: 100dvh; background-color: oklch(16% .014 var(--tint)); opacity: 0; pointer-events: none; transition: opacity var(--dur-slow); } /* -------------------------------------------------------------------------- 8. Banner shell -------------------------------------------------------------------------- */ .moxoai-circle-text{ position: absolute; right: 0; bottom: 90px; display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; } .moxoai-circle-text .moxoai-ct-svg{ width: 140px; height: 140px; transform: scale(2); } .moxoai-circle-text .moxoai-ct-svg text{ font-size: 12px; font-weight: 500; text-transform: uppercase; fill: var(--ink-3); transition: fill var(--dur) var(--ease); } .moxoai-circle-text .moxoai-button{ position: absolute; } .moxoai-circle-text:hover svg text{ fill: var(--ink); } @media (max-width: 767.98px){ .moxoai-circle-text{ display: none; } } /* the wireframe dodecahedrons main.js clones into .moxoai-animation */ .moxoai-animation-frame{ position: absolute; top: 0; width: 100%; height: 100vh; height: 100svh; pointer-events: none; animation: jump 10s linear infinite; } .moxoai-animation{ position: absolute; display: inline-block; width: 300px; height: 300px; opacity: .2; pointer-events: none; } .moxoai-position-1{ top: 100px; right: 100px; } .moxoai-position-2{ top: -60px; left: 15%; } .moxoai-position-4{ top: -60px; right: 20%; } .moxoai-position-2 .moxoai-dodecahedron, .moxoai-position-4 .moxoai-dodecahedron{ animation-delay: .5s; } @media (max-width: 1399.98px){ .moxoai-position-2, .moxoai-position-4{ display: none; } } .moxoai-dodecahedron{ position: relative; top: 40px; left: 100px; width: 100px; height: 223px; transform-style: preserve-3d; animation: rotate 100s linear infinite; } @keyframes rotate{ from{ transform: rotateX(0deg) rotateY(360deg) rotateZ(360deg); } to{ transform: rotateX(360deg) rotateY(0deg) rotateZ(-360deg); } } .moxoai-pentagon{ position: absolute; width: 100px; } .moxoai-pentagon:nth-child(1){ transform: rotateY(.2turn) translateZ(69px) rotateX(26.5deg); } .moxoai-pentagon:nth-child(2){ transform: rotateY(.4turn) translateZ(69px) rotateX(26.5deg); } .moxoai-pentagon:nth-child(3){ transform: rotateY(.6turn) translateZ(69px) rotateX(26.5deg); } .moxoai-pentagon:nth-child(4){ transform: rotateY(.8turn) translateZ(69px) rotateX(26.5deg); } .moxoai-pentagon:nth-child(5){ transform: rotateY(1turn) translateZ(69px) rotateX(26.5deg); } .moxoai-pentagon:nth-child(6){ bottom: 0; transform: rotateY(.2turn) translateZ(-69px) rotateX(206.5deg); } .moxoai-pentagon:nth-child(7){ bottom: 0; transform: rotateY(.4turn) translateZ(-69px) rotateX(206.5deg); } .moxoai-pentagon:nth-child(8){ bottom: 0; transform: rotateY(.6turn) translateZ(-69px) rotateX(206.5deg); } .moxoai-pentagon:nth-child(9){ bottom: 0; transform: rotateY(.8turn) translateZ(-69px) rotateX(206.5deg); } .moxoai-pentagon:nth-child(10){ bottom: 0; transform: rotateY(1turn) translateZ(-69px) rotateX(206.5deg); } .moxoai-pentagon:nth-child(11){ transform: translateZ(69px) rotateX(-90deg); } .moxoai-pentagon:nth-child(12){ bottom: 0; transform: translateZ(-69px) rotateX(90deg); } .moxoai-pentagon div{ position: absolute; width: 100px; height: 69px; border-top: 1px solid var(--ink); transform-origin: bottom; } .moxoai-pentagon div:nth-child(1){ transform: rotate(.2turn); } .moxoai-pentagon div:nth-child(2){ transform: rotate(.4turn); } .moxoai-pentagon div:nth-child(3){ transform: rotate(.6turn); } .moxoai-pentagon div:nth-child(4){ transform: rotate(.8turn); } .moxoai-pentagon div:nth-child(5){ transform: rotate(1turn); } @keyframes jump{ 0%, 100%{ transform: translateY(-30px); } 50%{ transform: translateY(30px); } } /* -------------------------------------------------------------------------- 9. Sections -------------------------------------------------------------------------- */ /* ---- partners strip ---- */ .social-proof{ display: grid; justify-items: center; gap: 10px; padding: clamp(2rem, 1.6rem + 1.4vw, 3.125rem) 0 26px; text-align: center; } .social-proof p{ margin: 0; font-size: var(--fs-small); color: var(--ink-3); } .logo-viewport{ width: min(980px, 100%); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .logo-track{ display: flex; flex-wrap: nowrap; gap: 10px; width: max-content; will-change: transform; } .logo-chip{ display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 176px; height: 56px; padding: 8px 12px; border-radius: var(--radius-pill); opacity: .75; filter: grayscale(1); transition: opacity var(--dur-slow) var(--ease-out); } .logo-chip:hover{ opacity: 1; } .logo-chip svg{ display: block; width: 120px; height: 20px; } /* ---- services (dark context) ---- */ .moxoai-complex-text{ display: flex; align-items: center; } .moxoai-complex-text .moxoai-button{ margin-left: var(--space-30); } @media (max-width: 767.98px){ .moxoai-complex-text{ flex-direction: column; } .moxoai-complex-text .moxoai-button{ margin-top: var(--space-40); margin-left: 0; } } .moxoai-services-grid{ border-top: 1px solid var(--line); } .moxoai-services-grid .moxoai-services-grid-item{ border-right: 1px solid var(--line); } .moxoai-services-grid .moxoai-services-grid-item:first-child{ border-left: 1px solid var(--line); } @media (max-width: 991.98px){ .moxoai-services-grid{ padding-bottom: var(--space-90); } .moxoai-services-grid .moxoai-services-grid-item{ border-bottom: 1px solid var(--line); } .moxoai-services-grid .moxoai-services-grid-item:nth-child(3){ border-left: 1px solid var(--line); } } @media (max-width: 767.98px){ .moxoai-services-grid .moxoai-services-grid-item{ border-left: 1px solid var(--line); } } .moxoai-service-card-sm{ position: relative; display: block; height: 100%; padding: var(--space-60) var(--space-30); transition: background-color var(--dur) var(--ease); } .moxoai-service-card-sm::before{ content: ""; position: absolute; top: 0; left: 0; width: 0; height: 3px; background-color: var(--accent); transition: width var(--dur-slow) var(--ease); } .moxoai-service-card-sm p{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; opacity: 0; transform: translateY(10px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .moxoai-service-card-sm .moxoai-button{ opacity: .4; filter: grayscale(1); transform: scale(.3); transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease), transform var(--dur) var(--ease); } /* cards lift a step in lightness rather than gaining a shadow */ .moxoai-service-card-sm:hover{ background-color: var(--surface-raised); } .moxoai-service-card-sm:hover::before{ width: 100%; } .moxoai-service-card-sm:hover p{ opacity: 1; transform: none; } .moxoai-service-card-sm:hover .moxoai-button{ opacity: 1; filter: none; transform: none; } /* touch screens cannot hover, so the copy and button show from the start */ @media (max-width: 991.98px), (hover: none){ .moxoai-service-card-sm p, .moxoai-service-card-sm .moxoai-button{ opacity: 1; filter: none; transform: none; } } /* -------------------------------------------------------------------------- 10. Ecosystem modal The detail dialog behind the four ecosystem cards. It carries the dark context of the section it opens from, keeps its heading and its action in place while the middle scrolls, and becomes a sheet on a phone. -------------------------------------------------------------------------- */ .ecosystem-trigger{ cursor: pointer; } .ecosystem-modal{ /* the dark context from section 1, so the dialog matches the section it belongs to. The surface is painted on the dialog, never on this overlay, which stays translucent. */ --surface: oklch(16% .014 var(--tint)); --surface-raised: oklch(19.5% .016 var(--tint)); --surface-sunken: oklch(13.5% .012 var(--tint)); --line: oklch(28.5% .016 var(--tint)); --line-strong: oklch(37% .018 var(--tint)); --ink: oklch(calc(96.5% + var(--contrast) * 3.5%) .006 var(--tint)); --ink-2: oklch(calc(78% + var(--contrast) * 14%) .012 var(--tint)); --ink-3: oklch(calc(66% + var(--contrast) * 18%) .014 var(--tint)); --accent-ink: color-mix(in oklch, var(--brand) 52%, #fff); --accent-soft: color-mix(in oklch, var(--brand) 18%, transparent); --accent-line: color-mix(in oklch, var(--brand) 55%, transparent); position: fixed; inset: 0; /* over the fixed frame, which sits at 999 below 1200px */ z-index: 1200; display: grid; place-items: center; padding: clamp(.75rem, .4rem + 1.5vw, 1.5rem); font-family: var(--font); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) ease; } .ecosystem-modal[hidden]{ display: none !important; } .ecosystem-modal.show{ opacity: 1; pointer-events: auto; } /* the page holds still underneath */ body.modal-open{ overflow: hidden; } .ecosystem-modal__backdrop{ position: absolute; inset: 0; background-color: oklch(10% .018 var(--tint) / .62); -webkit-backdrop-filter: blur(10px) saturate(115%); backdrop-filter: blur(10px) saturate(115%); } .ecosystem-modal__dialog{ position: relative; display: grid; /* the heading and the action hold; only the middle row scrolls */ grid-template-rows: auto minmax(0, 1fr) auto; width: min(760px, 100%); max-height: min(88vh, 860px); max-height: min(88dvh, 860px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background-color: var(--surface); box-shadow: 0 40px 120px -30px oklch(4% .02 var(--tint) / .85); opacity: 0; transform: translateY(20px) scale(.985); transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) ease; } .ecosystem-modal.show .ecosystem-modal__dialog{ opacity: 1; transform: none; } .ecosystem-modal__dialog:focus{ outline: none; } /* one wash of brand light across the top, behind the heading */ .ecosystem-modal__dialog::before{ content: ""; position: absolute; top: 0; right: 0; left: 0; height: 200px; background: radial-gradient(120% 150% at 14% 0%, var(--accent-soft) 0%, transparent 62%); pointer-events: none; } /* the sheet's handle, phones only */ .ecosystem-modal__grip{ position: absolute; top: 9px; left: 50%; display: none; width: 44px; height: 4px; margin-left: -22px; border-radius: var(--radius-pill); background-color: var(--line-strong); } .ecosystem-modal__header{ position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-20); padding: var(--space-30) var(--space-30) var(--space-20); border-bottom: 1px solid var(--line); } .ecosystem-modal__mark{ display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--accent-line); border-radius: 14px; background-color: var(--accent-soft); color: var(--accent-ink); } .ecosystem-modal__mark svg{ width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ecosystem-modal__eyebrow{ margin: 0 0 8px; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-ink); } .ecosystem-modal__title{ margin: 0; font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; } .ecosystem-modal__close{ display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background-color: transparent; color: var(--ink-2); cursor: pointer; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur) var(--ease-out); } .ecosystem-modal__close svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .ecosystem-modal__close:hover{ border-color: var(--accent-line); background-color: var(--accent-soft); color: var(--ink); transform: rotate(90deg); } .ecosystem-modal__body{ padding: var(--space-30) var(--space-30) var(--space-20); overflow-y: auto; overscroll-behavior: contain; color: var(--ink-2); } .ecosystem-modal__lead{ margin: 0 0 var(--space-15); font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); text-wrap: pretty; } .ecosystem-modal__copy{ max-width: 62ch; margin: 0; line-height: var(--lh-body); color: var(--ink-2); } /* the points read as a list, not as a stack of cards */ .ecosystem-modal__list{ margin: var(--space-20) 0 0; padding: 0; list-style: none; } .ecosystem-modal__list li{ display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); line-height: var(--lh-body); color: var(--ink-2); } .ecosystem-modal__list li::before{ content: ""; width: 8px; height: 8px; margin-top: .58em; border-radius: 50%; background-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .ecosystem-modal__foot{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); padding: var(--space-20) var(--space-30); border-top: 1px solid var(--line); background-color: var(--surface-sunken); } .ecosystem-modal__back{ padding: 0; border: 0; background: none; color: var(--ink-3); font-family: inherit; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; cursor: pointer; transition: color var(--dur-fast) ease; } .ecosystem-modal__back:hover{ color: var(--ink); } .moxoai-button.ecosystem-modal__cta{ height: 52px; padding: 0 6px 0 24px; } .moxoai-button.ecosystem-modal__cta svg{ margin-left: 18px; padding: 11px; } /* on a phone it arrives as a sheet from the bottom edge */ @media (max-width: 767.98px){ .ecosystem-modal{ padding: 0; place-items: end stretch; } .ecosystem-modal__dialog{ width: 100%; max-height: 92vh; max-height: 92dvh; border-width: 1px 0 0; border-radius: 22px 22px 0 0; transform: translateY(100%); } .ecosystem-modal__grip{ display: block; } .ecosystem-modal__header{ gap: var(--space-15); padding: calc(var(--space-20) + 10px) var(--space-20) var(--space-15); } .ecosystem-modal__mark{ width: 40px; height: 40px; border-radius: 12px; } .ecosystem-modal__mark svg{ width: 21px; height: 21px; } .ecosystem-modal__body{ padding: var(--space-20); } .ecosystem-modal__foot{ flex-direction: row-reverse; padding: var(--space-15) var(--space-20) var(--space-20); } .moxoai-button.ecosystem-modal__cta{ flex: 1 1 auto; } } /* the full article list under the featured blog cards */ .moxoai-article-links{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-60); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .moxoai-article-links li{ border-bottom: 1px solid var(--line); } .moxoai-article-links a{ display: flex; align-items: baseline; gap: 12px; padding: 18px 0; font-size: var(--fs-lead); line-height: 1.4; color: var(--ink); transition: color var(--dur-fast) ease; } .moxoai-article-links a::before{ content: "\2197"; flex: none; font-size: .8em; color: var(--ink-3); transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); } .moxoai-article-links a:hover{ color: var(--accent-ink); } .moxoai-article-links a:hover::before{ color: var(--accent-ink); transform: translate(2px, -2px); } @media (max-width: 767.98px){ .moxoai-article-links{ grid-template-columns: minmax(0, 1fr); } } /* ---- roadmap ---- */ .moxoai-roadmap{ position: relative; } .moxoai-roadmap-track{ position: relative; display: flex; margin-top: var(--space-90); } .moxoai-roadmap-track::before{ content: ""; position: absolute; top: 15px; left: 0; width: 100%; height: 1px; background-color: var(--line); } .moxoai-roadmap-item{ position: relative; flex: 1 1 0; padding-right: 40px; } .moxoai-roadmap-item:last-child{ padding-right: 0; } .moxoai-roadmap-dot{ position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-bottom: 40px; border: 1px solid var(--line-strong); border-radius: 50%; background-color: var(--surface); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .moxoai-roadmap-dot span{ width: 8px; height: 8px; border-radius: 50%; background-color: var(--line-strong); transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .moxoai-roadmap-item.is-active .moxoai-roadmap-dot, .moxoai-roadmap-item:hover .moxoai-roadmap-dot{ border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); } .moxoai-roadmap-item.is-active .moxoai-roadmap-dot span, .moxoai-roadmap-item:hover .moxoai-roadmap-dot span{ background-color: var(--accent); transform: scale(1.2); } /* was 35% black, about 2.4:1 against the page */ .moxoai-roadmap-status{ display: inline-flex; align-items: center; margin-bottom: 15px; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); } .moxoai-roadmap-item.is-active .moxoai-roadmap-status{ color: var(--accent-ink); } .moxoai-roadmap-status::before{ content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background-color: currentColor; } .moxoai-roadmap-item h4{ margin-bottom: 15px; } .moxoai-roadmap-item p{ margin-bottom: 20px; font-size: var(--fs-small); line-height: 1.65; } .moxoai-roadmap-item ul{ margin: 0; padding: 0; } .moxoai-roadmap-item ul li{ display: flex; align-items: flex-start; margin-bottom: 10px; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-3); list-style: none; } .moxoai-roadmap-item ul li::before{ content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin: .55em 10px 0 0; border-radius: 50%; background-color: var(--accent); } @media (max-width: 991.98px){ .moxoai-roadmap-track{ flex-direction: column; gap: var(--space-60); } .moxoai-roadmap-track::before{ top: 0; left: 15px; width: 1px; height: 100%; } .moxoai-roadmap-item{ padding-right: 0; padding-left: 55px; } .moxoai-roadmap-dot{ position: absolute; top: 0; left: 0; margin-bottom: 0; } } /* ---- reviews (soft surface) ---- */ .moxoai-review-frame{ position: relative; padding: var(--space-60) var(--space-60) 50px; border: 1px solid var(--line); border-radius: var(--radius-lg); background-color: var(--surface-raised); box-shadow: 0 1px 2px oklch(20% .02 var(--tint) / .04), 0 24px 48px -28px oklch(20% .02 var(--tint) / .18); } @media (max-width: 767.98px){ .moxoai-review-frame{ padding: 40px 24px 32px; } } .moxoai-review-frame .moxoai-quote-icon{ display: block; width: 40px; height: 40px; margin: 0 auto 25px; } .moxoai-quote-icon path{ fill: var(--accent); } .moxoai-review-avatar{ display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background-color: var(--accent-soft); color: var(--accent-ink); font-size: 1rem; font-weight: 500; text-transform: uppercase; } .moxoai-review-stars{ display: flex; justify-content: center; gap: 4px; margin-bottom: 24px; } .moxoai-review-stars svg{ width: 14px; height: 14px; } .moxoai-review-stars svg path{ fill: var(--accent); } .moxoai-review-source{ display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: var(--radius-pill); background-color: var(--surface-sunken); color: var(--ink-3); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; } .moxoai-review-frame .moxoai-text-xl{ max-width: 620px; margin: 0 auto; color: var(--ink); } .moxoai-slider-nav{ display: flex; } .moxoai-slider-nav .moxoai-slider-arrow{ width: 44px; height: 44px; padding: 12px; border-radius: 50%; background-color: var(--ink); cursor: pointer; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .moxoai-slider-nav .moxoai-slider-arrow svg{ display: block; } .moxoai-slider-nav .moxoai-slider-arrow svg path{ fill: var(--surface); } .moxoai-slider-nav .moxoai-slider-arrow.moxoai-prev{ margin-right: 10px; transform: rotate(180deg); } .moxoai-slider-nav .moxoai-slider-arrow:hover{ transform: scale(1.1); } .moxoai-slider-nav .moxoai-slider-arrow.moxoai-prev:hover{ transform: rotate(180deg) scale(1.1); } .moxoai-slider-nav .moxoai-slider-arrow.swiper-button-disabled{ opacity: .15; cursor: not-allowed; } .moxoai-slider-nav.moxoai-reviews-nav{ position: absolute; top: 160px; left: 0; justify-content: space-between; width: 100%; } /* on narrow screens the arrows sat behind the card's top corners, so they move into the flow above it */ @media (max-width: 991.98px){ .moxoai-slider-nav.moxoai-reviews-nav{ position: static; justify-content: center; gap: 10px; margin-bottom: var(--space-30); } .moxoai-slider-nav.moxoai-reviews-nav .moxoai-slider-arrow.moxoai-prev{ margin-right: 0; } } .moxoai-slider-nav.moxoai-soft .moxoai-slider-arrow{ background-color: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); } .moxoai-slider-nav.moxoai-soft .moxoai-slider-arrow svg path{ fill: var(--ink); } /* Swiper builds these bullets at runtime */ .moxoai-revi-pagination-sm{ display: flex; justify-content: center; gap: 8px; margin-top: var(--space-40); } .moxoai-revi-pagination-sm .swiper-pagination-bullet{ width: 8px; height: 8px; margin: 0 !important; border-radius: 50%; background-color: var(--line-strong); opacity: 1; transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease); } .moxoai-revi-pagination-sm .swiper-pagination-bullet-active{ width: 22px; border-radius: 4px; background-color: var(--accent); } /* ---- blog ---- */ .moxoai-blog-card{ display: block; } .moxoai-blog-card .moxoai-post-descr{ padding: var(--space-30) var(--space-30) 0 0; } .moxoai-labels{ display: flex; align-items: center; gap: 15px; } /* ---- 404 (dark context) ---- */ .moxoai-404-banner .moxoai-animation-frame{ z-index: 2; } .moxoai-404-frame{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 100vh; min-height: 100svh; padding-top: 100px; } .moxoai-404-text{ display: block; text-align: center; color: var(--ink); } .moxoai-scale-frame{ margin-bottom: var(--space-90); text-align: center; transform: scale(2.3); } @media (max-width: 575.98px){ .moxoai-scale-frame{ margin-bottom: 50px; transform: scale(1.3); } } .moxoai-404{ position: relative; font-size: 6em; font-weight: 500; color: var(--ink); animation: glitch-skew 1s linear infinite alternate-reverse; } .moxoai-404::before, .moxoai-404::after{ content: attr(data-text); position: absolute; top: 0; width: 100%; height: 100%; } .moxoai-404::before{ left: 2px; text-shadow: -2px 0 var(--accent); clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s linear infinite alternate-reverse; } .moxoai-404::after{ left: -2px; text-shadow: -2px 0 var(--ink-3), 2px 2px var(--line-strong); animation: glitch-anim2 1s linear infinite alternate-reverse; } @keyframes glitch-anim{ 0%{ clip: rect(49px, 9999px, 31px, 0); transform: skew(.04deg); } 5%{ clip: rect(63px, 9999px, 92px, 0); transform: skew(.18deg); } 10%{ clip: rect(86px, 9999px, 74px, 0); transform: skew(.4deg); } 15%{ clip: rect(85px, 9999px, 19px, 0); transform: skew(.57deg); } 20%{ clip: rect(64px, 9999px, 75px, 0); transform: skew(.96deg); } 25%{ clip: rect(77px, 9999px, 17px, 0); transform: skew(.61deg); } 30%{ clip: rect(16px, 9999px, 76px, 0); transform: skew(.81deg); } 35%{ clip: rect(5px, 9999px, 61px, 0); transform: skew(.56deg); } 40%{ clip: rect(79px, 9999px, 81px, 0); transform: skew(.05deg); } 45%{ clip: rect(20px, 9999px, 97px, 0); transform: skew(.56deg); } 50%{ clip: rect(33px, 9999px, 100px, 0); transform: skew(.16deg); } 55%{ clip: rect(19px, 9999px, 76px, 0); transform: skew(.93deg); } 60%{ clip: rect(29px, 9999px, 59px, 0); transform: skew(.58deg); } 65%{ clip: rect(19px, 9999px, 95px, 0); transform: skew(.83deg); } 70%{ clip: rect(88px, 9999px, 30px, 0); transform: skew(.39deg); } 75%{ clip: rect(43px, 9999px, 45px, 0); transform: skew(.6deg); } 80%{ clip: rect(30px, 9999px, 4px, 0); transform: skew(.89deg); } 85%{ clip: rect(4px, 9999px, 96px, 0); transform: skew(1deg); } 90%{ clip: rect(4px, 9999px, 91px, 0); transform: skew(.2deg); } 95%{ clip: rect(48px, 9999px, 80px, 0); transform: skew(.41deg); } 100%{ clip: rect(10px, 9999px, 58px, 0); transform: skew(.91deg); } } @keyframes glitch-anim2{ 0%{ clip: rect(97px, 9999px, 84px, 0); transform: skew(.55deg); } 5%{ clip: rect(82px, 9999px, 21px, 0); transform: skew(.04deg); } 10%{ clip: rect(51px, 9999px, 99px, 0); transform: skew(.93deg); } 15%{ clip: rect(42px, 9999px, 97px, 0); transform: skew(.03deg); } 20%{ clip: rect(27px, 9999px, 25px, 0); transform: skew(.86deg); } 25%{ clip: rect(69px, 9999px, 5px, 0); transform: skew(.95deg); } 30%{ clip: rect(38px, 9999px, 67px, 0); transform: skew(.33deg); } 35%{ clip: rect(8px, 9999px, 90px, 0); transform: skew(.67deg); } 40%{ clip: rect(34px, 9999px, 31px, 0); transform: skew(.33deg); } 45%{ clip: rect(1px, 9999px, 25px, 0); transform: skew(.71deg); } 50%{ clip: rect(45px, 9999px, 40px, 0); transform: skew(.38deg); } 55%{ clip: rect(84px, 9999px, 96px, 0); transform: skew(.3deg); } 60%{ clip: rect(68px, 9999px, 59px, 0); transform: skew(.35deg); } 65%{ clip: rect(93px, 9999px, 48px, 0); transform: skew(.25deg); } 70%{ clip: rect(19px, 9999px, 40px, 0); transform: skew(.97deg); } 75%{ clip: rect(76px, 9999px, 56px, 0); transform: skew(.79deg); } 80%{ clip: rect(22px, 9999px, 82px, 0); transform: skew(.48deg); } 85%{ clip: rect(30px, 9999px, 63px, 0); transform: skew(.91deg); } 90%{ clip: rect(68px, 9999px, 44px, 0); transform: skew(.4deg); } 95%{ clip: rect(12px, 9999px, 36px, 0); transform: skew(.61deg); } 100%{ clip: rect(24px, 9999px, 5px, 0); transform: skew(.96deg); } } @keyframes glitch-skew{ 0%{ transform: skew(3deg); } 10%{ transform: skew(2deg); } 20%, 30%{ transform: skew(0deg); } 40%{ transform: skew(2deg); } 50%{ transform: skew(-1deg); } 60%{ transform: skew(-3deg); } 70%, 80%{ transform: skew(-1deg); } 90%{ transform: skew(4deg); } 100%{ transform: skew(-3deg); } } /* -------------------------------------------------------------------------- 11. Page transitions (swup toggles html.is-animating) -------------------------------------------------------------------------- */ .moxoai-main-transition{ margin-top: 0; transition: margin-top var(--dur-slow) .3s; } .moxoai-main-transition .moxoai-animation-frame{ margin-top: 0; opacity: 1; transition: opacity var(--dur-slow) .3s, margin-top var(--dur-slow) .3s; } html.is-animating .moxoai-frame{ opacity: 0; transform: scale(.9); transition-delay: .5s; } @media (max-width: 1199.98px){ html.is-animating .moxoai-frame{ opacity: 1; transform: scale(1); } } html.is-animating .moxoai-curtain{ opacity: 1; pointer-events: all; } html.is-animating .moxoai-main-transition{ margin-top: .1px; } html.is-animating .moxoai-main-transition .moxoai-animation-frame{ margin-top: -90px; opacity: 0; transition-delay: 0s; } html.is-animating .moxoai-menu-frame{ opacity: 0; transition-delay: .3s; } /* ---- one-off helpers that replaced inline styles in index.html ---- */ .index-inline-2{ opacity: 0; } .index-inline-4{ letter-spacing: 6.5px; } .index-inline-18{ top: 300px; right: -100px; } .index-inline-19{ left: 150px; } .index-inline-27{ margin-top: 35px; transition-delay: 0ms; } .index-inline-28{ transform: translate3d(-75.6px, 0, 0); } .index-inline-29{ height: 50px; max-height: 30px; } .index-inline-30, .index-inline-31{ height: 50px; max-height: 35px; } .index-inline-35{ padding-top: 45px; } .index-inline-36, .index-inline-37{ width: 100%; border-radius: var(--radius); } /* -------------------------------------------------------------------------- 12. Word reveals index.html splits each [data-mx-words] block into one span per word and lights them in order. The spans only exist once that script has run, so without it the text simply shows at full strength. [data-mx-words] scroll lights the words [data-mx-words="read"] the same, drawn out over a long statement [data-mx-words="intro"] the words arrive once, a step apart; the element can hold them back with --mx-delay -------------------------------------------------------------------------- */ [data-mx-words] .mx-word{ opacity: .16; transition: opacity .5s var(--ease-out); } [data-mx-words="intro"] .mx-word{ opacity: 0; transition: opacity .8s var(--ease-out); transition-delay: calc(var(--mx-delay, 0s) + var(--wi, 0) * var(--mx-step, 24ms)); } [data-mx-words] .mx-word.is-lit{ opacity: 1; } /* the plain copy assistive tech reads in place of the pieces, kept out of selections so copied text is not doubled */ .mx-sr{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; -webkit-user-select: none; user-select: none; } /* -------------------------------------------------------------------------- 13. Hero One idea, carried by the headline: it rises on load, "Reborn" sheds weight down to the thin cut it rests at, then leans heavier again wherever the pointer comes near. The label and the lead arrive a word at a time around it (section 12); the rest only fades in. -------------------------------------------------------------------------- */ .mx-hero{ /* scroll progress through the hero, 0 to 1; index.html sets it */ --mx-p: 0; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-sunken) 100%); } .mx-hero__inner{ display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-top: calc(90px + var(--space-60)); padding-bottom: var(--space-60); } .mx-hero__label{ display: flex; align-items: center; gap: 14px; margin: 0; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); --mx-delay: .1s; } .mx-hero__label::before{ content: ""; flex: none; width: 32px; height: 1px; background-color: var(--line-strong); transform-origin: left; animation: mx-draw .9s var(--ease-out) .1s backwards; } .mx-hero__main{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-60); margin-top: auto; padding-top: var(--space-60); opacity: calc(1 - var(--mx-p) * .7); transform: translate3d(0, calc(var(--mx-p) * -90px), 0); } .mx-hero__title{ margin: 0; font-size: clamp(3.5rem, 1.35rem + 9.5vw, 10rem); font-weight: 600; line-height: .88; letter-spacing: -.045em; color: var(--ink); } .mx-hero__line{ display: block; overflow: hidden; /* headroom so the mask never trims a glyph, cancelled by the margin */ padding: .06em 0 .08em; margin: -.06em 0 -.08em; } .mx-hero__word{ display: inline-block; animation: mx-rise 1.1s var(--ease-out) backwards; } /* the resting weight lives here rather than in the animation, so the script can take it over once the load morph has finished */ .mx-hero__morph{ font-weight: 200; animation: mx-rise 1.1s var(--ease-out) .12s backwards, mx-weight 1.9s var(--ease-out) .3s backwards; } .mx-hero__dot{ color: var(--accent-ink); animation: mx-dot .7s var(--ease-out) .95s backwards; } .mx-hero__scroll.moxoai-circle-text{ position: relative; right: auto; bottom: auto; /* the svg is drawn at scale(2), so it spills 70px past this 140px box on every side; the margins keep that spill inside the column */ margin: 40px 70px 40px 0; animation: mx-fade 1.2s ease .9s backwards; } .mx-hero__foot{ position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--space-40) var(--space-60); margin-top: var(--space-60); padding-top: var(--space-40); } .mx-hero__foot::before{ content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background-color: var(--line); transform-origin: left; animation: mx-draw 1.4s var(--ease-out) .45s backwards; } .mx-hero__lead{ max-width: 46ch; margin: 0 0 var(--space-30); font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-2); /* its words set off once the rule above has begun to draw */ --mx-delay: .65s; } .mx-hero__lead strong{ font-weight: 500; color: var(--accent-ink); } .mx-hero__actions{ display: flex; flex-wrap: wrap; gap: 12px; animation: mx-fade-up .9s var(--ease-out) 1s backwards; } .mx-hero__ghost{ display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: var(--btn-h); padding: 0 clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap; transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; } .mx-hero__ghost:hover{ border-color: var(--accent-line); background-color: var(--accent-soft); color: var(--ink); } .mx-hero__ghost-arrow{ transition: transform var(--dur-fast) var(--ease-out); } .mx-hero__ghost:hover .mx-hero__ghost-arrow{ transform: translateX(4px); } .mx-hero__stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-30); margin: 0; animation: mx-fade-up .9s var(--ease-out) .8s backwards; } .mx-hero__stat{ display: flex; flex-direction: column-reverse; gap: 8px; } .mx-hero__stat dd{ margin: 0; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.375rem); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .mx-hero__stat dt{ font-size: var(--fs-label); line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } @keyframes mx-rise{ from{ transform: translate3d(0, 105%, 0); } } @keyframes mx-weight{ from{ font-weight: 800; } } @keyframes mx-dot{ from{ opacity: 0; transform: translate3d(0, -.4em, 0) scale(.4); } } @keyframes mx-fade{ from{ opacity: 0; } } @keyframes mx-fade-up{ from{ opacity: 0; transform: translate3d(0, 18px, 0); } } @keyframes mx-draw{ from{ transform: scaleX(0); } } @media (max-width: 1199.98px){ .mx-hero__inner{ padding-top: calc(90px + var(--space-40)); } } @media (max-width: 991.98px){ .mx-hero__foot{ grid-template-columns: minmax(0, 1fr); align-items: start; } } @media (max-width: 767.98px){ .mx-hero__inner{ padding-top: calc(72px + var(--space-40)); padding-bottom: var(--space-40); } .mx-hero__main{ grid-template-columns: minmax(0, 1fr); } .mx-hero__actions > *{ flex: 1 1 100%; } .mx-hero__stats{ gap: var(--space-20); } } /* -------------------------------------------------------------------------- 14. About Quiet until it is read: the text lights up a word at a time as it scrolls past (section 12), and each pillar's video unmasks once. index.html adds .mx-motion, so without the script every part simply shows at full strength. -------------------------------------------------------------------------- */ .mx-about{ padding-top: var(--space-120); padding-bottom: var(--space-90); } .mx-about__intro{ display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: var(--space-30) var(--space-60); } .mx-about__heading{ margin: 0; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.01em; } .mx-about__heading .moxoai-thin{ display: block; color: var(--ink-2); } .mx-about__statement{ margin: 0; font-size: clamp(1.5rem, 1.05rem + 2vw, 2.75rem); font-weight: 400; line-height: 1.28; letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; } .mx-about__pillars{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-90) var(--space-60); margin-top: var(--space-120); } /* the second pillar sits a step lower, so the pair reads in order */ .mx-about__pillar:nth-child(2){ margin-top: var(--space-120); } .mx-about__figure{ margin: 0; } .mx-about__caption{ margin-top: 12px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-3); } .mx-about__body{ margin-top: var(--space-40); } .mx-about__tag{ display: flex; align-items: center; gap: 12px; margin: 0 0 var(--space-20); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); } .mx-about__num{ color: var(--accent-ink); } .mx-about__title{ margin: 0 0 var(--space-20); font-size: var(--fs-h3); } .mx-about__body > p:not(.mx-about__tag){ max-width: 52ch; margin: 0 0 1em; color: var(--ink-2); } .mx-about__link{ margin-top: var(--space-15); } /* video panels: a still with one play button, swapped for Plyr on click */ .mx3d-panel{ position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background-color: oklch(14% .01 var(--tint)); } .mx3d-panel > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), scale 1.2s var(--ease-out); } .mx3d-panel:hover > img{ transform: scale(1.03); } .mx3d-panel__play{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0; border: 0; background: linear-gradient(180deg, transparent 45%, oklch(10% .01 var(--tint) / .4)); cursor: pointer; } .mx3d-panel__play::after{ content: ""; width: 64px; height: 64px; border-radius: 50%; background: oklch(100% 0 0 / .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23110f15'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 54% 50% / 22px; box-shadow: 0 10px 30px -10px oklch(5% .01 var(--tint) / .5); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .mx3d-panel__play:hover::after{ box-shadow: 0 10px 30px -10px oklch(5% .01 var(--tint) / .5), 0 0 0 10px oklch(100% 0 0 / .14); transform: scale(1.06); } /* Plyr: only the play and pause controls are enabled */ .mx3d-panel .plyr, .mx3d-inline-video .plyr{ --plyr-color-main: var(--accent); --plyr-video-background: #000; --plyr-video-control-color: #fff; --plyr-control-icon-size: 16px; --plyr-control-spacing: 12px; border-radius: inherit; } .mx3d-panel .plyr{ width: 100%; height: 100%; } /* YouTube paints a title strip over embeds that no parameter removes. The iframe is made 2.4x as tall as it is wide and re-centred, so YouTube letterboxes the video in the middle and the strip falls in the cropped bar. */ .mx3d-panel .plyr__video-wrapper, .mx3d-inline-video .plyr__video-wrapper{ overflow: hidden; } .mx3d-panel .plyr__video-embed iframe, .mx3d-inline-video .plyr__video-embed iframe{ top: 50%; left: 0; width: 100%; height: 426.667%; transform: translateY(-50%); } .mx3d-panel .plyr__controls, .mx3d-inline-video .plyr__controls{ justify-content: flex-start; padding: 10px 12px; background: linear-gradient(transparent, oklch(5% .01 var(--tint) / .55)); } .mx3d-panel .plyr__controls .plyr__control, .mx3d-inline-video .plyr__controls .plyr__control{ border-radius: var(--radius-pill); background-color: oklch(12% .01 var(--tint) / .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .mx3d-panel .plyr__controls .plyr__control:hover, .mx3d-inline-video .plyr__controls .plyr__control:hover{ background-color: var(--accent); } .mx3d-panel .plyr__control--overlaid, .mx3d-inline-video .plyr__control--overlaid{ padding: 22px; border: 0; background-color: oklch(100% 0 0 / .94); color: #110f15; box-shadow: 0 12px 30px -10px oklch(5% .01 var(--tint) / .55), 0 0 0 1px oklch(5% .01 var(--tint) / .08); } .mx3d-panel .plyr__control--overlaid:hover, .mx3d-inline-video .plyr__control--overlaid:hover{ background-color: #fff; color: #110f15; box-shadow: 0 12px 30px -10px oklch(5% .01 var(--tint) / .55), 0 0 0 10px oklch(100% 0 0 / .14); } .mx3d-inline-video{ height: auto; overflow: hidden; } .mx-about__retailers{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-30) var(--space-60); margin-top: var(--space-120); padding-top: var(--space-40); border-top: 1px solid var(--line); } .mx-about__retailers-label{ margin: 0; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); } .mx-about__logos{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-20) clamp(1.5rem, .6rem + 2.6vw, 3.25rem); margin: 0; padding: 0; list-style: none; } .mx-about__logos img{ display: block; width: auto; max-width: 110px; height: 30px; object-fit: contain; opacity: .6; filter: grayscale(1); transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease); } .mx-about__logos li:hover img{ opacity: 1; filter: none; } /* start states, in place only while the script is running */ .mx-motion [data-mx-reveal] .mx3d-panel{ clip-path: inset(16% 0 0 0 round 14px); transition: clip-path 1.2s var(--ease-out); } .mx-motion [data-mx-reveal] .mx3d-panel > img{ scale: 1.12; } .mx-motion [data-mx-reveal] .mx-about__link{ opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .9s var(--ease-out) .15s, transform .9s var(--ease-out) .15s; } .mx-motion .mx-about__retailers[data-mx-reveal] li{ opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); } .mx-motion [data-mx-reveal].is-in .mx3d-panel{ clip-path: inset(0 0 0 0 round 14px); } .mx-motion [data-mx-reveal].is-in .mx3d-panel > img{ scale: 1; } .mx-motion [data-mx-reveal].is-in .mx-about__link, .mx-motion .mx-about__retailers.is-in li{ opacity: 1; transform: none; } @media (max-width: 991.98px){ .mx-about__intro, .mx-about__pillars{ grid-template-columns: minmax(0, 1fr); } .mx-about__pillar:nth-child(2){ margin-top: 0; } .mx-about__retailers{ flex-direction: column; align-items: flex-start; } } /* -------------------------------------------------------------------------- 15. Motion preferences -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- Redesigned Reviews Section — Images as Focal Point Simplified with uniform card heights and smooth slide animation -------------------------------------------------------------------------- */ .moxoai-reviews-container { position: relative; } .moxoai-reviews-slider { max-width: 900px; margin: 0 auto; } .moxoai-reviews-slider { border-radius: 25px; } .moxoai-review-card-redesigned { display: grid; grid-template-rows: 1fr auto; gap: 0; height: 100%; min-height: 569px; border: 1px solid var(--line); border-radius: var(--radius-lg); background-color: var(--surface-raised); overflow: hidden; box-shadow: 0 1px 2px oklch(20% .02 var(--tint) / .04), 0 24px 48px -28px oklch(20% .02 var(--tint) / .18); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .moxoai-review-card-redesigned:hover { transform: translateY(-4px); box-shadow: 0 2px 4px oklch(20% .02 var(--tint) / .08), 0 32px 64px -24px oklch(20% .02 var(--tint) / .24); } /* Image hero section — uniform size */ .moxoai-review-image-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--surface-sunken) 0%, var(--surface) 100%); height: 375px; display: flex; align-items: center; justify-content: center; } .moxoai-review-image { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform var(--dur-slow) var(--ease-out), filter var(--dur) var(--ease); } .moxoai-review-card-redesigned:hover .moxoai-review-image { transform: scale(1.05); filter: brightness(1.08); } .moxoai-review-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, var(--ink) 0%); opacity: 0; transition: opacity var(--dur) var(--ease); } /* Fallback avatar */ .moxoai-review-image-placeholder { background-color: var(--accent-soft); } .moxoai-review-image-placeholder .moxoai-review-avatar { width: 120px; height: 120px; border-radius: 50%; background-color: var(--accent); color: var(--on-accent); font-size: 2rem; font-weight: 500; border: 3px solid var(--surface-raised); } /* Content section */ .moxoai-review-content { display: flex; flex-direction: column; gap: 10px; padding: var(--space-40); } .moxoai-review-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-20); } .moxoai-review-meta { display: flex; flex-direction: column; gap: 6px; } .moxoai-review-name { margin: 0; font-size: var(--fs-h5); line-height: 1.3; letter-spacing: -.005em; color: var(--ink); } .moxoai-review-source { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background-color: var(--surface-sunken); color: var(--ink-3); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; width: fit-content; } .moxoai-review-stars { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; } .moxoai-review-stars svg { width: 16px; height: 16px; } .moxoai-review-stars svg path { fill: var(--accent); } .moxoai-review-text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); flex: 1; } /* Navigation arrows */ .moxoai-slider-nav.moxoai-reviews-nav-primary { position: absolute; top: 50%; left: 0; right: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 var(--space-30); transform: translateY(-50%); pointer-events: none; z-index: 5; } .moxoai-slider-nav.moxoai-reviews-nav-primary .moxoai-slider-arrow { pointer-events: all; width: 50px; height: 50px; padding: 14px; border-radius: 50%; background-color: var(--surface-raised); box-shadow: 0 4px 12px oklch(20% .02 var(--tint) / .12); cursor: pointer; transition: all var(--dur) var(--ease); } .moxoai-slider-nav.moxoai-reviews-nav-primary .moxoai-slider-arrow:hover { background-color: var(--accent); box-shadow: 0 8px 24px oklch(20% .02 var(--tint) / .2); transform: scale(1.08); } .moxoai-slider-nav.moxoai-reviews-nav-primary .moxoai-slider-arrow svg path { fill: var(--ink); } .moxoai-slider-nav.moxoai-reviews-nav-primary .moxoai-slider-arrow:hover svg path { fill: var(--on-accent); } .moxoai-slider-nav.moxoai-reviews-nav-primary .moxoai-slider-arrow.moxoai-prev { margin-right: 0; transform: rotate(180deg); } .moxoai-slider-nav.moxoai-reviews-nav-primary .moxoai-slider-arrow.moxoai-prev:hover { transform: rotate(180deg) scale(1.08); } .moxoai-slider-nav.moxoai-reviews-nav-primary .moxoai-slider-arrow.swiper-button-disabled { opacity: .3; cursor: not-allowed; background-color: var(--surface-sunken); } .moxoai-slider-nav.moxoai-reviews-nav-primary .moxoai-slider-arrow.swiper-button-disabled:hover { background-color: var(--surface-sunken); box-shadow: 0 4px 12px oklch(20% .02 var(--tint) / .12); transform: none; } /* Pagination dots */ .moxoai-revi-pagination-sm { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-40); } .moxoai-revi-pagination-sm .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 !important; border-radius: 50%; background-color: var(--line-strong); opacity: 1; transition: all var(--dur) var(--ease); cursor: pointer; } .moxoai-revi-pagination-sm .swiper-pagination-bullet:hover { background-color: var(--accent-line); transform: scale(1.25); } .moxoai-revi-pagination-sm .swiper-pagination-bullet-active { width: 24px; border-radius: 4px; background-color: var(--accent); } /* Responsive adjustments */ @media (max-width: 991.98px) { .moxoai-review-card-redesigned { min-height: 540px; grid-template-rows: 300px 1fr; } .moxoai-review-image-hero { height: 375px; } .moxoai-review-content { padding: var(--space-30); gap: 10px; } .moxoai-slider-nav.moxoai-reviews-nav-primary { position: static; top: auto; left: auto; right: auto; width: 100%; justify-content: center; padding: var(--space-30) 0 0; transform: none; gap: 12px; margin-top: var(--space-40); } .moxoai-slider-nav.moxoai-reviews-nav-primary .moxoai-slider-arrow { width: 44px; height: 44px; padding: 12px; } } @media (max-width: 767.98px) { .moxoai-review-card-redesigned { min-height: 500px; grid-template-rows: 260px 1fr; } .moxoai-review-image-hero { height: 375px; } .moxoai-review-content { padding: var(--space-20); gap: var(--space-15); } .moxoai-review-header { flex-direction: column; } .moxoai-review-stars { justify-content: flex-start; } .moxoai-review-text { font-size: var(--fs-small); } .moxoai-slider-nav.moxoai-reviews-nav-primary .moxoai-slider-arrow { width: 40px; height: 40px; padding: 10px; } .moxoai-review-image-placeholder .moxoai-review-avatar { width: 80px; height: 80px; font-size: 1.5rem; } }