/* ============================================================ EdgeQ Design System — Colors & Type Foundations ------------------------------------------------------------ Single source of truth for color + typography tokens. Import this file first, then layer component styles on top. FONT NOTE: EdgeQ's brand face is **Poppins** (the geometric humanist sans used across the site). The official font files are self-hosted below from fonts/ — no CDN dependency. Weights: 300 Light · 400 Regular · 500 Medium · 600 SemiBold · 700 Bold · 800 ExtraBold · 900 Black. ============================================================ */ @font-face { font-family:'Poppins'; font-weight:300; font-style:normal; font-display:swap; src:url('assets/fonts/Poppins-Light.otf') format('opentype'); } @font-face { font-family:'Poppins'; font-weight:400; font-style:normal; font-display:swap; src:url('assets/fonts/Poppins-Regular.otf') format('opentype'); } @font-face { font-family:'Poppins'; font-weight:500; font-style:normal; font-display:swap; src:url('assets/fonts/Poppins-Medium.otf') format('opentype'); } @font-face { font-family:'Poppins'; font-weight:600; font-style:normal; font-display:swap; src:url('assets/fonts/Poppins-SemiBold.otf') format('opentype'); } @font-face { font-family:'Poppins'; font-weight:700; font-style:normal; font-display:swap; src:url('assets/fonts/Poppins-Bold.otf') format('opentype'); } @font-face { font-family:'Poppins'; font-weight:800; font-style:normal; font-display:swap; src:url('assets/fonts/Poppins-ExtraBold.otf') format('opentype'); } @font-face { font-family:'Poppins'; font-weight:900; font-style:normal; font-display:swap; src:url('assets/fonts/Poppins-Black.otf') format('opentype'); } :root { /* ---------- BRAND / ACCENT ---------- */ --edgeq-orange: #F47B20; /* primary accent — keywords, CTAs, logo, active */ --edgeq-orange-600: #E06A12; /* hover / pressed fill */ --edgeq-orange-700: #C85A08; /* deep pressed */ --edgeq-orange-300: #F9A968; /* lighter tints */ --edgeq-orange-100: #FDE7D4; /* faint wash / chips */ --edgeq-orange-tint: #FFF4EC; /* hover background wash */ /* ---------- NEUTRALS / INK ---------- */ --ink-900: #1C1C1E; /* near-black — display headings */ --ink-800: #2B2B2E; /* charcoal — headings, logo wordmark */ --ink-700: #3D3D42; /* body strong */ --ink-600: #565659; /* body default */ --ink-500: #6E6E73; /* secondary text */ --ink-400: #9A9AA0; /* tertiary / captions / muted labels */ --ink-300: #C7C7CC; /* borders, dividers (strong) */ --ink-200: #E2E2E6; /* hairline borders */ --ink-100: #F1F1F3; /* subtle fills */ --ink-050: #F8F8FA; /* section tint */ /* ---------- SURFACES ---------- */ --bg: #FFFFFF; /* primary canvas */ --bg-soft: #F8F8FA; /* alternating light section */ --bg-dark: #0E1320; /* deep navy/black hero & press band */ --bg-dark-2: #161C2D; /* dark card on dark section */ --on-dark: #FFFFFF; /* text on dark */ --on-dark-2: #B7BEC8; /* secondary text on dark */ /* Themeable surface roles — flip under [data-theme="dark"] below. Components reference THESE for cards/header/footer so the whole page can switch to the Starlink-style dark theme via one attr. */ --surface-card: #FFFFFF; /* award/video/content cards */ --surface-header: #FFFFFF; /* sticky header (top of page) */ --surface-header-scrolled: rgba(255,255,255,.86); /* header after scroll */ --surface-footer: var(--spectrum); /* footer fill */ /* ---------- SEMANTIC ---------- */ --success: #2BB673; --info: #2D9CDB; --warning: #F2B705; --danger: #E5484D; /* ---------- SIGNATURE SPECTRUM GRADIENT ---------- */ /* Soft pastel wash used in the sticky header top-edge + footer. pink -> lavender -> mint -> cyan. Keep it low-opacity + airy. */ --spectrum: linear-gradient(90deg, #FBD5E6 0%, #E7D8F4 26%, #D6E9EC 52%, #D2EFE4 74%, #CDEAF4 100%); /* Chip / waveform render gradient (used on chip art) */ --chip-gradient: linear-gradient(135deg, #BCEAE6 0%, #C9C2EC 45%, #EBB7DF 100%); /* ---------- FONT FAMILIES ---------- */ --font-display: 'Poppins', system-ui, sans-serif; --font-body: 'Poppins', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- TYPE SCALE (desktop) ---------- */ /* Display headings are LARGE + LIGHT (300/400) — the editorial hero feel. */ --fs-hero: clamp(48px, 6vw, 92px); /* hero statements "A wireless world…" */ --fs-h1: clamp(40px, 4.4vw, 64px); --fs-h2: clamp(30px, 3vw, 44px); --fs-h3: clamp(24px, 2vw, 30px); --fs-h4: 22px; --fs-lead: 20px; /* intro paragraphs */ --fs-body: 17px; --fs-sm: 15px; --fs-xs: 13px; --fs-label: 12px; /* eyebrow / uppercase labels */ --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.6; --lh-relaxed: 1.75; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.14em; /* uppercase eyebrows */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; /* ---------- RADII ---------- */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; /* image cards / market cards */ --r-xl: 28px; --r-pill: 999px; /* all buttons + filter chips */ /* ---------- SPACING (8px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---------- SHADOWS ---------- */ --shadow-xs: 0 1px 2px rgba(28,28,30,.06); --shadow-sm: 0 2px 8px rgba(28,28,30,.07); --shadow-md: 0 10px 30px rgba(28,28,30,.10); --shadow-lg: 0 24px 60px rgba(28,28,30,.14); /* floating product renders */ --shadow-orange: 0 12px 28px rgba(244,123,32,.32); /* primary CTA lift */ /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(.22,.61,.36,1); --ease-soft: cubic-bezier(.4,0,.2,1); --dur-fast: .18s; --dur: .32s; --dur-slow: .6s; } /* ============================================================ STARLINK-INSPIRED DARK THEME ------------------------------------------------------------ Set data-theme="dark" on a container (we put it on the scroll root) and these token overrides cascade to every descendant. Near-black cool canvas, light type, the EdgeQ orange retained as the single warm signal — premium, editorial, high-contrast. ============================================================ */ [data-theme="dark"] { /* canvases */ --bg: #05070C; /* near-black primary canvas */ --bg-soft: #0A0D14; /* barely-lifted alternating section */ --bg-dark: #04060B; /* hero / deepest band */ --bg-dark-2: #0F141E; /* ink ramp inverts — high tokens become light */ --ink-900: #FFFFFF; --ink-800: #F5F7FB; /* display headings */ --ink-700: #DDE2EC; /* body strong / kicker */ --ink-600: #B3BAC7; /* body default */ --ink-500: #888F9D; /* secondary text */ --ink-400: #6A7180; /* tertiary / eyebrow */ --ink-300: rgba(255,255,255,.24); /* dots, strong dividers */ --ink-200: rgba(255,255,255,.12); /* hairline borders */ --ink-100: rgba(255,255,255,.06); /* subtle fills */ --ink-050: #0A0D14; /* themeable surfaces */ --surface-card: #0E121B; /* dark content card */ --surface-header: rgba(5,7,12,.55); /* transparent over hero */ --surface-header-scrolled: rgba(5,7,12,.82); --surface-footer: #06080E; /* shadows become depth-on-black + a touch of orange lift */ --shadow-xs: none; --shadow-sm: 0 2px 20px rgba(0,0,0,.55); --shadow-md: 0 16px 44px rgba(0,0,0,.60); --shadow-lg: 0 32px 80px rgba(0,0,0,.65); --shadow-orange: 0 12px 34px rgba(244,123,32,.42); /* dim the pastel spectrum to a faint aurora line on black */ --spectrum: linear-gradient(90deg, rgba(251,213,230,.55) 0%, rgba(231,216,244,.55) 26%, rgba(214,233,236,.55) 52%, rgba(210,239,228,.55) 74%, rgba(205,234,244,.55) 100%); } /* ============================================================ SEMANTIC TYPE PRIMITIVES ============================================================ */ .eq-eyebrow { font: var(--fw-semibold) var(--fs-label)/1.4 var(--font-display); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-400); } .eq-hero { font: var(--fw-light) var(--fs-hero)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-tight); color: var(--ink-800); } .eq-h1 { font: var(--fw-light) var(--fs-h1)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-tight); color: var(--ink-800); } .eq-h2 { font: var(--fw-light) var(--fs-h2)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-tight); color: var(--ink-800); } .eq-h3 { font: var(--fw-medium) var(--fs-h3)/1.25 var(--font-display); color: var(--ink-800); } .eq-h4 { font: var(--fw-semibold) var(--fs-h4)/1.3 var(--font-display); color: var(--ink-800); } .eq-lead { font: var(--fw-regular) var(--fs-lead)/var(--lh-relaxed) var(--font-body); color: var(--ink-500); } .eq-body { font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-body); color: var(--ink-600); } .eq-sm { font: var(--fw-regular) var(--fs-sm)/var(--lh-normal) var(--font-body); color: var(--ink-500); } /* The brand's core device: emphasis word in orange inside a grey/black headline */ .eq-accent { color: var(--edgeq-orange); } *{box-sizing:border-box} html{ scroll-snap-type: y proximity; scroll-behavior:smooth; } body{ margin:0; padding:0; background:#05070C; font-family:var(--font-body); overflow-x:hidden; cursor:none; } ::-webkit-scrollbar{width:0;height:0} h1,h2,p,ul{text-wrap:pretty} a{-webkit-tap-highlight-color:transparent} @media (pointer: coarse){ body{cursor:auto} } .snap-sec{ scroll-snap-align:start; } /* responsive two-column */ .two-col{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,70px); align-items:center; width:100%; } @media (max-width:920px){ .two-col{ grid-template-columns:1fr; gap:40px; } } /* reveal on active section */ .snap-sec .reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); } .snap-sec.is-active .reveal{ opacity:1; transform:none; } .snap-sec .reveal.d0{ transition-delay:.02s } .snap-sec .reveal.d1{ transition-delay:.10s } .snap-sec .reveal.d2{ transition-delay:.18s } .snap-sec .reveal.d3{ transition-delay:.26s } .snap-sec .reveal.d4{ transition-delay:.34s } .snap-sec .reveal-chip{ opacity:0; transform:translateY(64px) scale(.8) rotate(-8deg); transition:opacity 1s var(--ease-out), transform 1.15s cubic-bezier(.16,.84,.3,1); transition-delay:.16s; } .snap-sec.is-active .reveal-chip{ opacity:1; transform:none; } /* masked-reveal headline (section 3) */ .mask{ display:block; overflow:hidden; padding-bottom:.04em; } .mask-line{ display:block; transform:translateY(115%); transition:transform 1.05s cubic-bezier(.16,.9,.3,1); } .snap-sec.is-active .mask-line{ transform:translateY(0); } .snap-sec.is-active .mask-line.m1{ transition-delay:.12s } .snap-sec.is-active .mask-line.m2{ transition-delay:.26s } /* use-case nav links (section 3) — right-aligned divided rows */ .uc-link{ display:flex; align-items:center; justify-content:flex-end; gap:12px; text-decoration:none; font-family:var(--font-body); font-size:17px; color:rgba(255,255,255,.85); padding:14px 2px; white-space:nowrap; border-bottom:1px solid rgba(255,255,255,.1); transition:color .3s var(--ease-out), padding .3s var(--ease-out); } .uc-link:last-child{ border-bottom:none; } .uc-link svg{ color:var(--edgeq-orange); opacity:.7; transition:transform .3s var(--ease-out), opacity .3s var(--ease-out); } .uc-link:hover{ color:var(--edgeq-orange); padding-right:8px; } .uc-link:hover svg{ transform:translate(3px,-3px); opacity:1; } /* Point & Connect text entrance — slide in from the right, staggered */ .snap-sec .pc-rx{ opacity:0; transform:translateX(48px); transition:opacity .85s var(--ease-out), transform 1s var(--ease-out); } .snap-sec.is-active .pc-rx{ opacity:1; transform:none; } .snap-sec.is-active .pc-rx.s1{ transition-delay:.22s } .snap-sec.is-active .pc-rx.s2{ transition-delay:.36s } /* orange outline button (Final Frontier "Learn More") */ .btn-outline-orange{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:15px; padding:13px 26px; border-radius:var(--r-pill,999px); border:1.6px solid var(--edgeq-orange); background:transparent; color:var(--edgeq-orange); cursor:none; transition:background .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease-out); } .btn-outline-orange:hover{ background:var(--edgeq-orange); color:#fff; transform:translateY(-1px); } .btn-outline-orange:active{ transform:scale(.97); } /* ===== Animated cosmic backdrop (space section) ===== */ .neb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.7; will-change:transform; mix-blend-mode:screen; } .neb-a{ width:60vw; height:60vw; left:35%; top:-10%; background:radial-gradient(circle at 50% 50%, rgba(244,123,32,.55), rgba(244,123,32,0) 62%); animation:nebDriftA 34s ease-in-out infinite; } .neb-b{ width:55vw; height:55vw; left:-10%; top:40%; background:radial-gradient(circle at 50% 50%, rgba(34,184,207,.5), rgba(34,184,207,0) 62%); animation:nebDriftB 42s ease-in-out infinite; } .neb-c{ width:48vw; height:48vw; left:55%; top:45%; background:radial-gradient(circle at 50% 50%, rgba(124,92,236,.42), rgba(124,92,236,0) 62%); animation:nebDriftC 50s ease-in-out infinite; } @keyframes nebDriftA{ 0%,100%{ transform:translate3d(0,0,0) scale(1) } 50%{ transform:translate3d(-6vw,7vh,0) scale(1.18) } } @keyframes nebDriftB{ 0%,100%{ transform:translate3d(0,0,0) scale(1.05) } 50%{ transform:translate3d(8vw,-6vh,0) scale(.9) } } @keyframes nebDriftC{ 0%,100%{ transform:translate3d(0,0,0) scale(.95) } 50%{ transform:translate3d(-7vw,-5vh,0) scale(1.15) } } /* parallax starfields built from layered radial-gradients */ .stars{ position:absolute; inset:-50% -50%; background-repeat:repeat; will-change:transform; } .stars-far{ background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 85% 15%, rgba(200,220,255,.6), transparent), radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.5), transparent); background-size:340px 340px; animation:starDrift 120s linear infinite, twinkleFar 6s ease-in-out infinite; } .stars-near{ background-image: radial-gradient(2px 2px at 15% 50%, rgba(255,255,255,.95), transparent), radial-gradient(2px 2px at 60% 20%, rgba(255,236,210,.9), transparent), radial-gradient(1.6px 1.6px at 80% 70%, rgba(210,235,255,.9), transparent), radial-gradient(2px 2px at 35% 85%, rgba(255,255,255,.85), transparent); background-size:520px 520px; animation:starDrift 70s linear infinite, twinkleNear 4.5s ease-in-out infinite; } @keyframes starDrift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(0,340px,0) } } @keyframes twinkleFar{ 0%,100%{ opacity:.55 } 50%{ opacity:.9 } } @keyframes twinkleNear{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } } /* slow aurora sweep across the top */ .aurora-sweep{ position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(34,184,207,.10) 46%, rgba(244,123,32,.12) 54%, transparent 70%); background-size:260% 260%; animation:auroraSweep 26s ease-in-out infinite; } @keyframes auroraSweep{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } } /* space chip: clean professional slide-in from the LEFT (no overshoot/bounce) */ .snap-sec .chip-fly-left{ opacity:0; transform:translateX(-120px); transition:opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay:.2s; } .snap-sec.is-active .chip-fly-left{ opacity:1; transform:none; } /* ===== Space chip: entrance + 3 selectable motion variations ===== */ .snap-sec .chip-fly-right{ opacity:0; transform:translateX(90px); transition:opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay:.2s; } .snap-sec.is-active .chip-fly-right{ opacity:1; transform:none; } @keyframes eqChipShimmer{ 0%,100%{ filter: drop-shadow(0 22px 46px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(236,72,153,0.4)); } 50%{ filter: drop-shadow(0 22px 46px rgba(0,0,0,.6)) drop-shadow(0 0 32px rgba(34,211,238,0.6)); } } @keyframes eqGlowPulse{ 0%,100%{ opacity:.5 } 50%{ opacity:.92 } } .chip-glow-pulse{ animation:eqGlowPulse 7s ease-in-out infinite; animation-delay:-3s; } @keyframes eqChipFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-15px) } } .chipvar-drift .chip-l1{ animation:eqChipFloat 6s ease-in-out infinite; animation-delay:-1s; } @keyframes eqDriftTilt{ 0%,100%{ transform:rotateY(-13deg) } 50%{ transform:rotateY(13deg) } } .chipvar-drift .chip-l2{ animation:eqDriftTilt 11s ease-in-out infinite; transform-origin:50% 55%; } .chipvar-drift .chip-img{ animation:eqChipShimmer 4s ease-in-out infinite; animation-delay:-2s; } @keyframes eqBeaconBreathe{ 0%,100%{ transform:scale(.965) } 50%{ transform:scale(1.05) } } @keyframes eqBeaconShimmer{ 0%,100%{ filter: drop-shadow(0 22px 46px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(236,72,153,0.35)); } 50%{ filter: drop-shadow(0 22px 46px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(34,211,238,0.75)); } } @keyframes eqBeaconGlow{ 0%,100%{ opacity:.4; transform:scale(.92) } 50%{ opacity:1; transform:scale(1.12) } } .chipvar-beacon .chip-l1{ animation:eqChipFloat 7s ease-in-out infinite; animation-delay:-2s; } .chipvar-beacon .chip-l2{ animation:eqBeaconBreathe 5s ease-in-out infinite; } .chipvar-beacon .chip-img{ animation:eqBeaconShimmer 3.5s ease-in-out infinite; } .chipvar-beacon .chip-glow-pulse{ animation:eqBeaconGlow 5s ease-in-out infinite; animation-delay:-1s; } @keyframes eqZeroGWobble{ 0%,100%{ transform:rotateX(6deg) rotateY(-10deg) rotateZ(-2deg) } 33%{ transform:rotateX(-5deg) rotateY(8deg) rotateZ(2.5deg) } 66%{ transform:rotateX(4deg) rotateY(11deg) rotateZ(-1.5deg) } } @keyframes eqChipFloatSlow{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } } .chipvar-zero-g .chip-l1{ animation:eqChipFloatSlow 6.5s ease-in-out infinite; animation-delay:-3s; } .chipvar-zero-g .chip-l2{ animation:eqZeroGWobble 15s ease-in-out infinite; transform-origin:50% 50%; } .chipvar-zero-g .chip-img{ animation:eqChipShimmer 4.5s ease-in-out infinite; animation-delay:-1.5s; } /* ===== Point & Connect: entrance + animated floating chip ===== */ .snap-sec .pc-chip{ opacity:0; transform:translateX(60px) scale(.94); transition:opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay:.35s; } .snap-sec.is-active .pc-chip{ opacity:1; transform:none; } @keyframes eqPcFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } } @keyframes eqPcTilt{ 0%,100%{ transform:rotateY(-10deg) rotateZ(-1.2deg) } 50%{ transform:rotateY(10deg) rotateZ(1.2deg) } } @keyframes eqPcShimmer{ 0%,100%{ filter: drop-shadow(0 26px 50px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(244,123,32,.45)); } 50%{ filter: drop-shadow(0 26px 50px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(34,184,207,.6)); } } @keyframes eqPcGlow{ 0%,100%{ opacity:.5 } 50%{ opacity:.92 } } .pc-chip-float{ animation:eqPcFloat 6.5s ease-in-out infinite; animation-delay:-1.5s; } .pc-chip-tilt{ animation:eqPcTilt 11s ease-in-out infinite; transform-origin:50% 55%; } .pc-chip-img{ animation:eqPcShimmer 4.2s ease-in-out infinite; animation-delay:-2s; } .pc-chip-glow{ animation:eqPcGlow 7s ease-in-out infinite; animation-delay:-3s; } @media (max-width:920px){ .pc-chip{ display:none } } @media (prefers-reduced-motion: reduce){ html{ scroll-snap-type:none; scroll-behavior:auto; } .snap-sec .reveal,.snap-sec .reveal-chip,.snap-sec .chip-fly-left,.snap-sec .chip-fly-right,.snap-sec .mask-line,.snap-sec .pc-rx{ transition:none; opacity:1; transform:none; } .chip-l1,.chip-l2,.chip-img,.chip-glow-pulse,.neb,.stars,.aurora-sweep{ animation:none !important; } .chip-img{ filter: drop-shadow(0 22px 46px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(34,211,238,0.5)); } } /* ===== Brand halo hues — orange/cyan/violet glow on every section ===== */ .halo-hues{ position:absolute; inset:0; pointer-events:none; z-index:6; mix-blend-mode:screen; opacity:.85; background: radial-gradient(42vw 42vw at 82% 6%, rgba(244,123,32,.30), transparent 60%), radial-gradient(46vw 46vw at 4% 80%, rgba(34,184,207,.24), transparent 62%), radial-gradient(38vw 38vw at 94% 92%, rgba(124,92,236,.20), transparent 62%); } @media (max-width:920px){ .halo-hues{ opacity:.7; } } /* Point & Connect responsive two-column collapse */ @media (max-width:860px){ .pc-grid{ grid-template-columns:1fr !important; } .pc-grid > div:first-child{ aspect-ratio:16/10 !important; } } /* Markets auto-scroll crossfade for the active video */ @keyframes mktFade{ from{ opacity:0; transform:scale(.965) } to{ opacity:1; transform:scale(1) } } .mkt-fade{ animation:mktFade .65s var(--ease-out); } @media (prefers-reduced-motion: reduce){ .mkt-fade{ animation:none; } }