/* ContxtIQ marketing landing page. Styled with the Astryx neutral theme's design tokens. The page root carries `data-astryx-theme="neutral"`, which is what the theme's @scope block targets, so every `--color-*`, `--radius-*`, `--shadow-*` and `--font-*` token below resolves here exactly as it does inside the React portal, with no React needed. Colors are `light-dark()` pairs, so the page follows the visitor's OS color scheme. Product screenshots swap with it via (see home/_shot). The one branded color is `--mkt-accent`. Astryx's own `--color-accent` is deliberately grayscale and drives primary buttons app-wide, so we add a page-local token instead, the way GlobalNavRail.module.css does. */ .mkt { /* A deep teal that is unambiguously a dark button in both themes, so white text is right in both. The brand mint stays as --mkt-accent-bright for small type, where a light color on a dark ground is what you want. */ --mkt-accent: light-dark(#0b7d6c, #0c8370); --mkt-accent-hover: light-dark(#096456, #0f9c85); --mkt-on-accent: #ffffff; --mkt-accent-bright: light-dark(#0b7d6c, #19e6c0); --mkt-mark-src: url("/assets/contxtiq-mark-2b39cdf9.svg"); --mkt-container: 1080px; --mkt-gutter: var(--spacing-6); /* Aurora field colors. Deliberately low alpha: the drift should register as depth behind the hero, not as a light show. Dark mode carries slightly less because the same alpha reads brighter against a dark ground. */ --mkt-aurora-one: light-dark(rgba(15, 168, 146, 0.30), rgba(25, 230, 192, 0.20)); --mkt-aurora-two: light-dark(rgba(86, 141, 240, 0.22), rgba(110, 160, 255, 0.16)); --mkt-aurora-three: light-dark(rgba(150, 110, 230, 0.16), rgba(170, 130, 255, 0.13)); min-height: 100vh; background-color: var(--color-background-body); color: var(--color-text-primary); font-family: var(--font-family-body); text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; } /* The layout's is shared with the portal, so paint the overscroll area to match this page rather than the portal's background. */ html:has([data-page="marketing"]) { background-color: var(--color-background-body); scroll-behavior: smooth; /* Clear the fixed nav so a section never lands underneath it. */ scroll-padding-top: 88px; } .mkt *, .mkt *::before, .mkt *::after { box-sizing: border-box; } .mkt :focus-visible { outline: 2px solid var(--mkt-accent); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Skip link ── */ .mkt-skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999; padding: var(--spacing-2) var(--spacing-4); background: var(--mkt-accent); color: var(--mkt-on-accent); font-size: var(--font-size-base); border-radius: var(--radius-inner); } .mkt-skip-link:focus { position: fixed; left: var(--spacing-4); top: var(--spacing-4); width: auto; height: auto; overflow: visible; } .mkt-content { position: relative; z-index: 10; } /* ── Container ── */ .mkt-container { max-width: var(--mkt-container); margin: 0 auto; padding-left: var(--mkt-gutter); padding-right: var(--mkt-gutter); } /* ── Section ── */ .mkt-section { padding: 6rem var(--mkt-gutter); } /* ── Heading styles ── */ .mkt-section-heading { margin-bottom: 4rem; text-align: center; font-family: var(--font-family-heading); font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; color: var(--color-text-primary); } /* ── Buttons ── The page is server-rendered, so it cannot use Astryx's React Button. These match its geometry instead, measured off a live one: 32px tall at medium and 36px at large, 8px/12px padding, 10px radius, 14px text at weight 500. */ .mkt-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); height: var(--size-element-lg, 36px); padding: 0 var(--spacing-4); border-radius: var(--radius-element); border: 1px solid transparent; background: var(--mkt-accent); font-family: var(--font-family-body); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1.4286; color: var(--mkt-on-accent); cursor: pointer; text-decoration: none; transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease; } .mkt-cta:hover { background: var(--mkt-accent-hover); } /* Astryx's medium size, for the nav where the button sits in a 64px bar. */ .mkt-cta--sm { height: var(--size-element-md, 32px); padding: 0 var(--spacing-3); } /* The companion action. A real button rather than a bare link, so the pair reads as one control group. */ .mkt-cta--secondary { background: transparent; border-color: var(--color-border-emphasized); color: var(--color-text-primary); } .mkt-cta--secondary:hover { background: var(--color-overlay-hover); border-color: var(--color-text-secondary); } /* ── Brand mark ── One flat SVG, painted through a mask so it inherits the surrounding text color. White on the dark theme, near-black on the light one, from one file. */ .mkt-mark { display: block; flex-shrink: 0; background-color: currentColor; -webkit-mask-image: var(--mkt-mark-src); mask-image: var(--mkt-mark-src); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* ═══════════════════════ AURORA ═══════════════════════ */ /* Three soft color fields behind the hero. Each one does two things at once: a long slow drift, and a shorter brightness pulse on a deliberately unrelated cycle. Because the two periods never line up, the field never repeats the same state twice and the hero keeps breathing. Pure CSS: only transform, opacity and a container hue shift animate, all of which composite on the GPU. The layer is masked so it dissolves before the first section begins. */ .mkt-aurora { position: absolute; top: 0; left: 0; right: 0; height: 100vh; overflow: hidden; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); /* A slow rotation through neighbouring hues, so the palette itself travels rather than just the shapes. Small enough to stay inside the brand. */ animation: mkt-aurora-shift 72s ease-in-out infinite alternate; } .mkt-aurora__field { position: absolute; display: block; border-radius: 50%; filter: blur(70px); will-change: transform, opacity; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1), ease-in-out; animation-iteration-count: infinite, infinite; animation-direction: alternate, alternate; } .mkt-aurora__field--one { width: 62vw; height: 62vw; max-width: 880px; max-height: 880px; top: -20vw; left: -14vw; background: radial-gradient(circle at 50% 50%, var(--mkt-aurora-one), transparent 68%); animation-name: mkt-drift-one, mkt-aurora-pulse; animation-duration: 38s, 9s; } .mkt-aurora__field--two { width: 54vw; height: 54vw; max-width: 760px; max-height: 760px; top: -12vw; right: -10vw; background: radial-gradient(circle at 50% 50%, var(--mkt-aurora-two), transparent 70%); animation-name: mkt-drift-two, mkt-aurora-pulse; animation-duration: 46s, 13s; animation-delay: -8s, -4s; } .mkt-aurora__field--three { width: 48vw; height: 48vw; max-width: 660px; max-height: 660px; top: 22vh; left: 34vw; background: radial-gradient(circle at 50% 50%, var(--mkt-aurora-three), transparent 72%); animation-name: mkt-drift-three, mkt-aurora-pulse; animation-duration: 54s, 17s; animation-delay: -21s, -11s; } @keyframes mkt-drift-one { from { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(5vw, 8vh, 0) scale(1.18); } to { transform: translate3d(11vw, 3vh, 0) scale(1.06); } } @keyframes mkt-drift-two { from { transform: translate3d(0, 0, 0) scale(1.08); } 50% { transform: translate3d(-9vw, 4vh, 0) scale(0.9); } to { transform: translate3d(-4vw, 11vh, 0) scale(1.02); } } @keyframes mkt-drift-three { from { transform: translate3d(0, 0, 0) scale(0.94); } 50% { transform: translate3d(-11vw, -4vh, 0) scale(1.16); } to { transform: translate3d(4vw, -9vh, 0) scale(1); } } /* The breathing. Runs on its own clock per field. */ @keyframes mkt-aurora-pulse { from { opacity: 0.45; } to { opacity: 1; } } @keyframes mkt-aurora-shift { from { filter: hue-rotate(-12deg); } to { filter: hue-rotate(14deg); } } /* ═══════════════════════ NAV ═══════════════════════ */ .mkt-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 64px; transition: background-color var(--duration-medium) ease, border-color var(--duration-medium) ease; background: transparent; border-bottom: 1px solid transparent; } .mkt-nav--scrolled { background: color-mix(in oklch, var(--color-background-body) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--color-border); } .mkt-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--mkt-container); margin: 0 auto; padding: 0 var(--mkt-gutter); } .mkt-nav__brand { display: flex; align-items: center; gap: var(--spacing-2-5, 10px); font-family: var(--font-family-heading); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; color: var(--color-text-primary); text-decoration: none; } .mkt-nav__logo { height: 26px; width: 26px; } .mkt-footer__logo { height: 18px; width: 18px; } .mkt-nav__links { display: none; align-items: center; gap: var(--spacing-8); } .mkt-nav__link { position: relative; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); text-decoration: none; transition: color var(--duration-medium) ease; } /* The indicator wipes in from the left rather than appearing, so moving between sections reads as one continuous element instead of three separate blinks. */ .mkt-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; border-radius: 2px; background: var(--mkt-accent-bright); transform: scaleX(0); transform-origin: left center; transition: transform var(--duration-medium) cubic-bezier(0.4, 0, 0.2, 1); } .mkt-nav__link:hover { color: var(--color-text-primary); } .mkt-nav__link:hover::after, .mkt-nav__link--active::after { transform: scaleX(1); } .mkt-nav__link--active { color: var(--color-text-primary); } /* In the mobile sheet the links stack, so the indicator would sit under the full row width. Anchor it to the text instead. */ .mkt-nav__mobile .mkt-nav__link::after { right: auto; width: 2.25rem; } /* Hamburger */ .mkt-nav__hamburger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 0; color: var(--color-text-primary); } .mkt-nav__hamburger-lines { display: flex; flex-direction: column; gap: 6px; width: 20px; } .mkt-nav__hamburger-line { display: block; height: 1px; width: 100%; background: currentColor; transition: transform var(--duration-fast) ease; transform-origin: center; } .mkt-nav--open .mkt-nav__hamburger-line:first-child { transform: translateY(3.5px) rotate(45deg); } .mkt-nav--open .mkt-nav__hamburger-line:last-child { transform: translateY(-3.5px) rotate(-45deg); } /* Mobile panel */ .mkt-nav__mobile { max-height: 0; overflow: hidden; transition: max-height var(--duration-medium) ease, opacity var(--duration-fast) ease; opacity: 0; background: var(--color-background-surface); border-bottom: 1px solid transparent; } .mkt-nav--open .mkt-nav__mobile { max-height: 300px; opacity: 1; border-bottom-color: var(--color-border); } .mkt-nav__mobile-inner { display: flex; flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-6); } /* ═══════════════════════ HERO ═══════════════════════ */ .mkt-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding: 8rem var(--mkt-gutter) var(--spacing-8); text-align: center; } .mkt-hero__title { max-width: 760px; margin: 0; font-family: var(--font-family-heading); font-size: clamp(2.25rem, 5vw + 1rem, 3.5rem); font-weight: var(--font-weight-semibold); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-primary); } .mkt-hero__subtitle { margin: var(--spacing-6) 0 0; max-width: 560px; font-size: var(--font-size-xl); line-height: 1.55; color: var(--color-text-secondary); } .mkt-hero__actions { margin-top: var(--spacing-10); display: flex; align-items: center; gap: var(--spacing-3); } /* ── Product screenshot frame (hero + feature rows) ── */ .mkt-shot-frame { border: 1px solid var(--color-border-emphasized); border-radius: var(--radius-container); overflow: hidden; background: var(--color-background-surface); box-shadow: var(--shadow-med); } .mkt-shot-frame--hero { box-shadow: var(--shadow-high); } .mkt-shot-frame img, .stacked-shot img { display: block; width: 100%; height: auto; } .mkt-hero__shot { max-width: var(--mkt-container); margin: 0 auto; padding: 0 var(--mkt-gutter) var(--spacing-8); } /* ═══════════════════════ HOW IT WORKS ═══════════════════════ */ .mkt-hiw__grid { display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--spacing-12); max-width: var(--mkt-container); margin: 0 auto; } .mkt-hiw__steps { position: relative; display: flex; flex-direction: column; gap: var(--spacing-10); } .mkt-hiw__line { display: none; position: absolute; top: 22px; bottom: 22px; left: 22px; width: 1px; background: var(--color-border-emphasized); } .mkt-hiw__step { position: relative; display: flex; gap: var(--spacing-5); } .mkt-hiw__number { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); border: 1px solid var(--color-border-teal); background: var(--color-background-teal); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; color: var(--color-text-teal); } .mkt-hiw__step-title { margin: 0 0 var(--spacing-1-5, 6px); font-family: var(--font-family-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .mkt-hiw__step-desc { margin: 0; font-size: var(--font-size-lg); line-height: 1.6; color: var(--color-text-secondary); } /* Stacked shots */ .stacked-shots-container { position: relative; width: 100%; aspect-ratio: 8 / 9; } .stacked-shot { position: absolute; border-radius: var(--radius-container); overflow: hidden; border: 1px solid var(--color-border-emphasized); background: var(--color-background-surface); box-shadow: var(--shadow-med); } .stacked-shot--back { width: 90%; top: 0; left: 0; transform: rotate(-3deg); z-index: 1; } .stacked-shot--middle { width: 90%; top: 16%; left: 6%; transform: rotate(1.5deg); z-index: 2; } .stacked-shot--front { width: 90%; bottom: 0; right: 0; transform: rotate(2deg); z-index: 3; box-shadow: var(--shadow-high); } /* ═══════════════════════ FEATURE DEEP DIVES ═══════════════════════ */ .mkt-features { display: flex; flex-direction: column; gap: 6rem; } .mkt-feature { display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--spacing-12); max-width: var(--mkt-container); margin: 0 auto; } .mkt-feature__label { margin: 0 0 var(--spacing-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--mkt-accent-bright); } .mkt-feature__heading { margin: 0 0 var(--spacing-4); font-family: var(--font-family-heading); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .mkt-feature__body { margin: 0; font-size: var(--font-size-lg); line-height: 1.6; color: var(--color-text-secondary); } /* ═══════════════════════ WHO IT'S FOR ═══════════════════════ */ .mkt-personas__grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-6); max-width: var(--mkt-container); margin: 0 auto; } .persona-card { position: relative; border-radius: var(--radius-container); border: 1px solid var(--color-border); background: var(--color-background-surface); padding: var(--spacing-8) var(--spacing-7); overflow: hidden; box-shadow: var(--shadow-low); transition: border-color var(--duration-fast) ease; } .persona-card:hover { border-color: var(--color-border-emphasized); } .persona-illustration { width: 100%; height: 140px; margin-bottom: var(--spacing-6); border-radius: var(--radius-element); display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-background-muted); } .persona-illustration svg { height: 100%; width: auto; } /* The illustrations are drawn in currentColor, so one declaration tints each. */ .persona-illustration--recruiter { color: var(--color-icon-teal); background: var(--color-background-teal); } .persona-illustration--hiring { color: var(--color-icon-blue); background: var(--color-background-blue); } .persona-illustration--founder { color: var(--color-icon-purple); background: var(--color-background-purple); } .persona-card__title { margin: 0 0 var(--spacing-4); font-family: var(--font-family-heading); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .persona-card__pain { margin: 0 0 var(--spacing-4); font-size: var(--font-size-base); font-style: italic; line-height: 1.6; color: var(--color-text-secondary); } .persona-card__solution { margin: 0; font-size: var(--font-size-base); line-height: 1.6; color: var(--color-text-primary); } /* ═══════════════════════ FOOTER ═══════════════════════ */ .mkt-footer { border-top: 1px solid var(--color-border); } .mkt-footer__inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--spacing-4); max-width: var(--mkt-container); margin: 0 auto; padding: var(--spacing-8) var(--mkt-gutter); } .mkt-footer__brand { display: flex; align-items: center; gap: var(--spacing-3); } .mkt-footer__brand-name { font-family: var(--font-family-heading); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); letter-spacing: 0.04em; color: var(--color-text-primary); } .mkt-footer__copyright { font-size: var(--font-size-base); color: var(--color-text-secondary); } .mkt-footer__links { display: flex; align-items: center; gap: var(--spacing-6); } .mkt-footer__link { font-family: var(--font-family-body); font-size: var(--font-size-base); color: var(--color-text-secondary); text-decoration: none; transition: color var(--duration-fast) ease; background: none; border: none; cursor: pointer; padding: 0; } .mkt-footer__link:hover { color: var(--color-text-primary); } /* ═══════════════════════ DEMO MODAL ═══════════════════════ */ .demo-modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--spacing-6); background: var(--color-overlay); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--duration-fast) ease; } .demo-modal-backdrop[hidden] { display: none; } .demo-modal-backdrop.mkt-modal-active { opacity: 1; } .demo-modal-panel { position: relative; width: 100%; max-width: 480px; border-radius: var(--radius-container); border: 1px solid var(--color-border); background: var(--color-background-surface); padding: var(--spacing-8); box-shadow: var(--shadow-high); transform: translateY(24px) scale(0.97); opacity: 0; transition: transform var(--duration-medium) cubic-bezier(0.25, 0.1, 0.25, 1), opacity var(--duration-medium) ease; } .mkt-modal-active .demo-modal-panel { transform: translateY(0) scale(1); opacity: 1; } .demo-modal-close { position: absolute; top: var(--spacing-4); right: var(--spacing-4); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); border: none; background: var(--color-overlay-hover); color: var(--color-text-secondary); cursor: pointer; transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease; } .demo-modal-close:hover { background: var(--color-overlay-pressed); color: var(--color-text-primary); } .demo-modal__title { margin: 0; font-family: var(--font-family-heading); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .demo-modal__subtitle { margin: var(--spacing-2) 0 0; font-size: var(--font-size-base); color: var(--color-text-secondary); } .demo-modal__form { margin-top: var(--spacing-6); display: flex; flex-direction: column; gap: var(--spacing-4); } .demo-modal__row { display: grid; grid-template-columns: 1fr; gap: var(--spacing-4); } .demo-modal-input { width: 100%; border-radius: var(--radius-element); border: 1px solid var(--color-border-emphasized); background: var(--color-background-body); padding: var(--spacing-2-5, 10px) var(--spacing-3-5, 14px); font-family: var(--font-family-body); font-size: var(--font-size-base); color: var(--color-text-primary); transition: border-color var(--duration-fast) ease; } .demo-modal-input::placeholder { color: var(--color-text-secondary); } .demo-modal-input:focus { outline: 2px solid var(--mkt-accent); outline-offset: 1px; border-color: transparent; } textarea.demo-modal-input { resize: none; } .demo-modal-submit { margin-top: var(--spacing-1); width: 100%; height: var(--size-element-lg, 36px); border-radius: var(--radius-element); border: 1px solid transparent; background: var(--mkt-accent); padding: 0 var(--spacing-4); font-family: var(--font-family-body); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--mkt-on-accent); cursor: pointer; transition: background-color var(--duration-fast) ease; } .demo-modal-submit:hover { background: var(--mkt-accent-hover); } .demo-modal-submit:disabled { opacity: 0.6; cursor: default; } .demo-modal__error { color: var(--color-text-red); font-size: var(--font-size-sm); margin-bottom: var(--spacing-2); } .demo-modal__success { color: var(--color-text-green); font-size: var(--font-size-lg); text-align: center; padding: var(--spacing-8) 0; } /* ═══════════════════════ SCROLL ANIMATIONS ═══════════════════════ */ .mkt-fade-up { opacity: 0; transform: translateY(24px); transition: opacity var(--duration-slow) cubic-bezier(0.25, 1, 0.5, 1), transform var(--duration-slow) cubic-bezier(0.25, 1, 0.5, 1); transition-delay: var(--delay, 0s); } .mkt-fade-up.mkt-visible { opacity: 1; transform: translateY(0); } .mkt-fade-left { opacity: 0; transform: translateX(-32px); transition: opacity var(--duration-slow) cubic-bezier(0.25, 1, 0.5, 1), transform var(--duration-slow) cubic-bezier(0.25, 1, 0.5, 1); transition-delay: var(--delay, 0s); } .mkt-fade-left.mkt-visible { opacity: 1; transform: translateX(0); } .mkt-fade-right { opacity: 0; transform: translateX(32px); transition: opacity var(--duration-slow) cubic-bezier(0.25, 1, 0.5, 1), transform var(--duration-slow) cubic-bezier(0.25, 1, 0.5, 1); transition-delay: var(--delay, 0s); } .mkt-fade-right.mkt-visible { opacity: 1; transform: translateX(0); } .mkt-fade-scale { opacity: 0; transform: translateY(40px) scale(0.96); transition: opacity var(--duration-slow-max) cubic-bezier(0.25, 1, 0.5, 1), transform var(--duration-slow-max) cubic-bezier(0.25, 1, 0.5, 1); transition-delay: var(--delay, 0s); } .mkt-fade-scale.mkt-visible { opacity: 1; transform: translateY(0) scale(1); } /* Stacked shot animations */ .stacked-shot--back.mkt-fade-up { opacity: 0; transform: translateX(-40px) rotate(0deg); } .stacked-shot--back.mkt-fade-up.mkt-visible { opacity: 1; transform: translateX(0) rotate(-3deg); } .stacked-shot--middle.mkt-fade-up { opacity: 0; transform: translateY(30px) rotate(0deg); transition-delay: 0.15s; } .stacked-shot--middle.mkt-fade-up.mkt-visible { opacity: 1; transform: translateY(0) rotate(1.5deg); } .stacked-shot--front.mkt-fade-up { opacity: 0; transform: translateX(30px) rotate(0deg); transition-delay: 0.3s; } .stacked-shot--front.mkt-fade-up.mkt-visible { opacity: 1; transform: translateX(0) rotate(2deg); } /* ═══════════════════════ RESPONSIVE ═══════════════════════ */ @media (min-width: 640px) { .demo-modal__row { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) { .mkt-section { padding-top: 8rem; padding-bottom: 8rem; } .mkt-section-heading { font-size: var(--font-size-4xl); } .mkt-hero { padding-top: 10rem; padding-bottom: 5rem; } .mkt-nav__links { display: flex; } .mkt-nav__hamburger { display: none; } .mkt-nav__mobile { display: none !important; } .mkt-personas__grid { grid-template-columns: repeat(3, 1fr); } .mkt-footer__inner { flex-direction: row; } .mkt-feature__heading { font-size: var(--font-size-3xl); } } @media (min-width: 1024px) { .mkt-hiw__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } .mkt-hiw__line { display: block; } .mkt-hiw__step { gap: var(--spacing-6); } .mkt-feature { grid-template-columns: 45fr 55fr; } .mkt-feature--reversed { direction: rtl; } .mkt-feature--reversed > * { direction: ltr; } } @media (max-width: 1023px) { .stacked-shots-container { max-width: 480px; margin: 0 auto; } .stacked-shot--back { transform: rotate(-1.5deg); } .stacked-shot--middle { transform: rotate(1deg); } .stacked-shot--front { transform: rotate(1deg); } .stacked-shot--back.mkt-fade-up.mkt-visible { transform: translateX(0) rotate(-1.5deg); } .stacked-shot--middle.mkt-fade-up.mkt-visible { transform: translateY(0) rotate(1deg); } .stacked-shot--front.mkt-fade-up.mkt-visible { transform: translateX(0) rotate(1deg); } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .mkt { scroll-behavior: auto; } .mkt-aurora, .mkt-aurora__field { animation: none !important; } html:has([data-page="marketing"]) { scroll-behavior: auto; } .mkt-nav__link::after { transition: none; } .mkt-fade-up, .mkt-fade-left, .mkt-fade-right, .mkt-fade-scale, .stacked-shot--back.mkt-fade-up, .stacked-shot--middle.mkt-fade-up, .stacked-shot--front.mkt-fade-up { opacity: 1 !important; transform: none !important; transition: none !important; } .stacked-shot--back { transform: rotate(-3deg); } .stacked-shot--middle { transform: rotate(1.5deg); } .stacked-shot--front { transform: rotate(2deg); } }