/* theme.css — generated by tools/build-theme.mjs from tools/source/theme-source.css.
The full bespoke style layer of the Atlas direction, ported verbatim for the
Bootstrap 4 + jQuery 4 build (no Tailwind / no build step at runtime).
Loads AFTER bootstrap.min.css so these rules win. Do not edit by hand —
re-run: node tools/build-theme.mjs */
:root {
/* Global multiplier for scroll-reveal durations + delays. 1.0 = original,
0.7 = 30% faster. Every scroll-triggered reveal in this file wraps its
time values in `calc(time * var(--rs))` so this single knob controls
the pace of the entire page reveal experience. Hover effects and
continuous ambient loops (lava-lamp, dot drift, gold-shimmer, etc.)
are NOT scaled — only entrance / scroll-in motion. */
--rs: 0.7;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
/* font-synthesis: style forces browsers to synthesize italic by
slanting the loaded Inter face rather than falling back to a
system serif (which on some systems renders as Times Italic for
any italic request). Belt-and-braces against Instrument Serif's
ghost showing up via missing-italic-face fallback. */
font-synthesis: style weight;
}
body {
background-color:#FFFFFF;color:#0E0E0F;font-family:Inter,system-ui,sans-serif;
margin: 0;
font-feature-settings: "ss01", "cv11", "cv09", "tnum";
}
/* Hard guarantee: nothing in the codebase renders in a serif. Inter is
loaded; if anything else is requested, fall through to system sans. */
*,
*::before,
*::after {
font-family: inherit;
}
h1, h2, h3, h4 {
font-family:"Inter Display",Inter,system-ui,sans-serif;letter-spacing:-0.025em;
text-wrap: balance;
}
/* Tabular numerals everywhere a number lives — operations sites lock columns */
.nums, [data-nums] {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* Header nav — refined cream-bar treatment (2026-05-28 redesign).
Idle ink-soft, hover near-black, brand-green underline that grows from
the centre on hover or when the link is the active route. */
.nav-link {
position: relative;
color: #3A3B3F;
transition: color 0.2s ease;
}
.nav-link::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -8px;
height: 2px;
border-radius: 2px;
background: #9FCB52;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover { color: #0E0E0F; }
.nav-link[data-active='true'] { color: #0E0E0F; }
.nav-link:hover::after,
.nav-link[data-active='true']::after { transform: scaleX(1); }
/* Account icon button — subtle lift on hover */
.account-btn { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.account-btn:hover {
background: rgba(14,14,15,0.05) !important;
border-color: rgba(14,14,15,0.22) !important;
}
/* Header nav CHIPS — interactive pills, not raw text. Idle is ink-soft;
hover paints a soft chip behind the label; the active route gets a clean
white "selected" pill with a hairline ring + soft shadow so it lifts off
the cream bar. This is the treatment that makes the nav read as UI. */
/* Clean text nav items separated by hairline "|" dividers (no pill).
Brand-green underline beneath the label grows from centre on hover and
stays for the active route. */
.nav-chip {
position: relative;
display: inline-flex;
align-items: center;
padding: clamp(6px, 0.5vw, 9px) 2px;
color: #3A3B3F;
white-space: nowrap;
transition: color 0.2s ease;
}
.nav-chip::after {
content: '';
position: absolute;
/* Inset symmetrically so the underline is a little narrower than the
label and scales with it (longer label → wider underline). */
left: 12%;
right: 12%;
/* Sit a little further below the text. */
bottom: clamp(-5px, -0.35vw, -2px);
height: 2px;
border-radius: 2px;
background: #9FCB52;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-chip:hover { color: #0E0E0F; }
.nav-chip[data-active='true'] { color: #0E0E0F; }
/* Active route keeps the GREEN underline. */
.nav-chip[data-active='true']::after { transform: scaleX(1); }
/* Non-selected items get a BLUE underline on hover. */
.nav-chip:not([data-active='true']):hover::after {
background: #4EA8DA;
transform: scaleX(1);
}
/* "|" divider between nav items — a thin vertical hairline. */
.nav-sep {
flex: none;
width: 1px;
height: clamp(13px, 1vw, 17px);
background: rgba(14,14,15,0.18);
border-radius: 1px;
}
/* ─── Dark-hero pages (heroTop: about / shop / support) ──────────────────
These float a transparent header over their OWN dark full-bleed hero, so
the ink nav chrome is unreadable until the hero scrolls past. While the
header is over the hero (data-hero-dark set AND not yet data-scrolled),
paint the nav chrome LIGHT. Once data-scrolled flips (the frosted-white
backdrop fades in), these stop applying and the normal ink nav returns. */
header[data-hero-dark='true']:not([data-scrolled='true']) .nav-chip { color: rgba(255,255,255,0.92); }
header[data-hero-dark='true']:not([data-scrolled='true']) .nav-chip:hover,
header[data-hero-dark='true']:not([data-scrolled='true']) .nav-chip[data-active='true'] { color: #ffffff; }
header[data-hero-dark='true']:not([data-scrolled='true']) .nav-sep { background: rgba(255,255,255,0.34); }
header[data-hero-dark='true']:not([data-scrolled='true']) [data-lang-toggle] { color: rgba(255,255,255,0.9); }
header[data-hero-dark='true']:not([data-scrolled='true']) [data-lang-toggle]:hover { color: #ffffff; }
header[data-hero-dark='true']:not([data-scrolled='true']) [data-nav-open] { color: #ffffff; }
/* Hero brand marquee — moving partner-logo strip. Own keyframe (Tailwind
tree-shakes its `tickerSlide` keyframe out when no `animate-*` class
references it, which left the inline reference pointing at nothing). */
@keyframes brandMarqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.brand-marquee-track { will-change: transform; }
.brand-marquee-logo,
.brand-marquee-word { opacity: 0.85; }
.brand-marquee:hover .brand-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.brand-marquee-track { animation: none !important; }
}
/* TagFeatures hero tag — barely-there float so the lit artifact feels
alive without being distracting. */
.tag-float { animation: tagFloat 7s ease-in-out infinite; will-change: transform; }
@keyframes tagFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
.tag-float { animation: none; }
}
/* Metrics sharp photo — full-bleed sharp on normal screens; on very wide
screens its left/right edges feather into the blurred full-bleed backdrop
behind it so the width cap is invisible (no hard vertical seam). */
@media (min-width: 2561px) {
.metrics-sharp-clip {
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
}
/* Metrics parallax layers — base scale lives in CSS (so a React re-render
can't wipe it); the parallax effect sets the translate imperatively on
top. Under reduced-motion the JS bails and these static scales remain. */
.metrics-pllx,
.metrics-pllx-blur {
will-change: transform;
backface-visibility: hidden;
}
.metrics-pllx { transform: scale(1.3); }
.metrics-pllx-blur { transform: scale(1.36); }
/* Hero CTAs — neon outline pills over the dark hero. Transparent dark
interior, glowing colour border, uppercase tracked white label + arrow.
Green = Activate, blue = Found. */
.hero-cta {
position: relative;
text-transform: uppercase;
font-family: "Switzer","Switzer Placeholder",Inter,system-ui,sans-serif;
font-weight: 600;
letter-spacing: 0.16em;
color: #FFFFFF;
border-radius: 9999px;
border: 1.5px solid var(--cta-line);
background: rgba(8,10,12,0.22);
box-shadow: 0 0 24px -2px var(--cta-glow), inset 0 0 18px -9px var(--cta-glow);
transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.hero-cta:hover {
background: rgba(8,10,12,0.34);
border-color: var(--cta-line-hover);
box-shadow: 0 0 34px 0 var(--cta-glow), inset 0 0 26px -7px var(--cta-glow);
}
.hero-cta:active { transform: translateY(1px); }
.hero-cta-green {
--cta-line: rgba(150,224,108,0.85);
--cta-line-hover: rgba(150,224,108,1);
--cta-glow: rgba(126,217,87,0.55);
}
.hero-cta-blue {
--cta-line: rgba(110,176,235,0.85);
--cta-line-hover: rgba(110,176,235,1);
--cta-glow: rgba(91,163,224,0.55);
}
.hero-cta .cta-arrow { transition: transform 0.25s ease; }
.hero-cta:hover .cta-arrow { transform: translateX(4px); }
/* Hero entrance — staggered fade-up. Each step waits ~80ms longer than the
previous so the eye picks up the pill → headline → subhead → CTAs → trust
strip → partner logos cadence. */
.hero-rise {
opacity: 0;
transform: translateY(14px);
animation: heroRise calc(0.7s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-rise-1 { animation-delay: calc(0.05s * var(--rs, 1)); }
.hero-rise-2 { animation-delay: calc(0.13s * var(--rs, 1)); }
.hero-rise-3 { animation-delay: calc(0.21s * var(--rs, 1)); }
.hero-rise-4 { animation-delay: calc(0.29s * var(--rs, 1)); }
.hero-rise-5 { animation-delay: calc(0.37s * var(--rs, 1)); }
.hero-rise-6 { animation-delay: calc(0.5s * var(--rs, 1)); }
/* Glossy black pill — used for every dark CTA (header + hero). Combines a
soft lift, a deepening shadow, and a specular shine that sweeps across
the surface on hover, like light catching polished obsidian. */
.btn-glossy {
position: relative;
overflow: hidden;
isolation: isolate;
transition:
transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.32s ease,
background-color 0.32s ease;
box-shadow: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 4px 14px -6px rgba(14,14,15,0.35);
}
.btn-glossy::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 55%);
opacity: 0;
transition: opacity 0.32s ease;
pointer-events: none;
}
.btn-glossy::after {
content: '';
position: absolute;
top: 0;
left: -60%;
width: 50%;
height: 100%;
background: linear-gradient(
100deg,
transparent 0%,
rgba(255,255,255,0.0) 40%,
rgba(255,255,255,0.32) 50%,
rgba(255,255,255,0.0) 60%,
transparent 100%
);
transform: skewX(-18deg);
transition: left 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
pointer-events: none;
}
.btn-glossy:hover {
transform: translateY(-2px);
box-shadow:
0 1px 0 0 rgba(255,255,255,0.10) inset,
0 18px 38px -14px rgba(14,14,15,0.55),
0 6px 14px -6px rgba(14,14,15,0.4);
}
.btn-glossy:hover::before { opacity: 1; }
.btn-glossy:hover::after { left: 140%; }
.btn-glossy:active {
transform: translateY(-1px);
transition-duration: 0.1s;
}
/* Hero primary CTA layers on top of btn-glossy with an arrow nudge */
.cta-primary .cta-arrow {
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.cta-primary:hover .cta-arrow { transform: translateX(5px); }
/* Secondary (white pill) — lift + outline shift */
.cta-secondary {
transition:
transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.28s ease,
background-color 0.28s ease;
}
.cta-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px -14px rgba(14,14,15,0.22);
}
.cta-secondary .cta-play { transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
.cta-secondary:hover .cta-play { transform: scale(1.1); }
/* White pill on a busy hero — needs its own treatment because the dark
btn-glossy specular highlight would just blow it out. This version
stays on a white surface, lifts on hover, and gains a subtle tinted
halo so it reads as deliberately "lit" rather than just bigger. */
.btn-light {
position: relative;
isolation: isolate;
transition:
transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.32s ease,
background-color 0.32s ease;
box-shadow:
0 0 0 1px rgba(14,14,15,0.08),
0 4px 14px -6px rgba(14,14,15,0.18);
}
.btn-light:hover {
transform: translateY(-2px);
background-color: #ffffff;
box-shadow:
0 0 0 1px rgba(14,14,15,0.18),
0 16px 32px -12px rgba(14,14,15,0.32),
0 6px 14px -6px rgba(14,14,15,0.18);
}
.btn-light:active {
transform: translateY(-1px);
transition-duration: 0.1s;
}
/* Header link underline — used on Log In and the language switcher.
Slides in from the left, matches the currentColor. */
.link-underline { position: relative; transition: color 0.22s ease; }
.link-underline::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 1.5px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.link-underline:hover::after,
.link-underline[aria-expanded='true']::after { transform: scaleX(1); }
/* Language popover */
.lang-pop {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 116px;
background: rgba(255,255,255,0.98);
backdrop-filter: blur(10px);
border-radius: 14px;
padding: 6px;
box-shadow:
0 1px 0 0 rgba(14,14,15,0.06),
0 20px 50px -16px rgba(14,14,15,0.22);
transform-origin: top right;
animation: langPopIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) both;
z-index: 50;
}
.lang-opt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 8px 12px;
border-radius: 9px;
font-size: 13.5px;
font-weight: 500;
color: #242424;
background: transparent;
transition: background-color 0.18s ease, color 0.18s ease;
cursor: pointer;
}
.lang-opt:hover { background-color: rgba(14,14,15,0.06); }
.lang-opt[data-active='true'] { color: #0e0e0f; background-color: rgba(14,14,15,0.04); }
.lang-opt[data-active='true']::after {
content: '';
width: 6px;
height: 6px;
border-radius: 9999px;
background: #9FCB52;
}
@keyframes langPopIn {
from { opacity: 0; transform: scale(0.94) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* ─── Typewriter primitive (used by ) ──────────────────── */
.tw-root {
position: relative;
display: inline-block;
line-height: inherit;
}
.tw-ghost {
visibility: hidden;
pointer-events: none;
user-select: none;
}
.tw-shown {
position: absolute;
inset: 0;
white-space: pre-wrap;
}
.tw-cursor {
display: inline-block;
margin-left: 0.06em;
color: currentColor;
animation: twBlink 1s steps(2, start) infinite;
font-weight: 400;
}
@keyframes twBlink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* ─── Brush-stroke wipe — used on serif italic accent words ──────────── */
/* Stays masked-off until a [data-revealed="true"] ancestor flips it on.
The mask is a hard horizontal gradient that animates from 0% → 100% so
the word paints in left-to-right like a brush stroke. */
.brush-wipe {
display: inline-block;
/* Editorial accent — Newsreader UPRIGHT. Picked to mirror Inter's
proportions while reading as a clear serif (subtle bracketed
terminals, modern humanist letterforms). Weight inherits from
the parent headline so the accent visually matches the
surrounding sans in weight + density. Italic explicitly disabled
per 2026-05-28 boss direction — they wanted serif terminals, not
a wispy italic. */
font-family: 'Newsreader', 'Source Serif Pro', Georgia, serif !important;
font-style: normal !important;
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 0%);
mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 0%);
/* Vertically oversize + centre the mask so the horizontal wipe never clips
glyph overflow (descenders like the "g"/"p" in "keeping.", and any
ascenders) under the heading's tight line-height. The gradient is purely
horizontal, so a taller mask changes nothing visually — it just stops the
mask box (= the inline-block's line-height) from cropping the letters. */
-webkit-mask-size: 100% 200%;
mask-size: 100% 200%;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
/* Belt-and-suspenders: the mask is the only thing that could clip an
inline-block whose ancestors are overflow:visible. mask-clip:no-clip means
the mask only varies alpha within the gradient — it never clips painting to
the (line-height-tight) mask box, so descenders can't be cropped under any
browser's mask-clip default. Unrecognized values are simply ignored, so
this can only ever RELAX clipping. */
-webkit-mask-clip: no-clip;
mask-clip: no-clip;
/* And in case a browser ignores mask-clip:no-clip (older Chrome / Safari),
grow the painted box DOWN past the descenders with padding, then pull the
layout back with an equal negative margin. The border-box (what mask-clip
uses) now contains the descenders, so they can't be cropped — yet the
inline-block's margin-box (what the line height uses) is unchanged, so
surrounding layout doesn't move (verified: h2 height + lede top identical
with and without). This is the mechanism-proof guarantee. */
padding-bottom: 0.22em;
margin-bottom: -0.22em;
transition:
-webkit-mask-image calc(0.6s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1) calc(0.18s * var(--rs, 1)),
mask-image calc(0.6s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1) calc(0.18s * var(--rs, 1));
}
[data-revealed='true'] .brush-wipe,
.brush-wipe[data-revealed='true'] {
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%, transparent 100%);
mask-image: linear-gradient(90deg, #000 0%, #000 100%, transparent 100%);
}
/* ─── Section reveal — fade-up triggered by data-revealed="true" ───── */
/* Anything with the [data-reveal] attribute starts hidden + 16px below
its final position. The parent (or itself) gets data-revealed="true"
via useInView, which flips it back to visible. Use --reveal-delay for
cascades. */
[data-reveal] {
opacity: 0;
transform: translateY(16px);
transition:
opacity calc(0.65s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1),
transform calc(0.65s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: calc(var(--reveal-delay, 0ms) * var(--rs, 1));
will-change: opacity, transform;
}
[data-reveal][data-revealed='true'],
[data-revealed='true'] [data-reveal] {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; transition: none; }
.brush-wipe { -webkit-mask-image: none; mask-image: none; transition: none; }
}
/* ─── Header scroll-blur — header gains backdrop blur once scrolled ── */
header[data-scrolled='true']::before { opacity: 1; }
header::before {
content: '';
position: absolute;
inset: 0;
background: #ffffff;
border-bottom: 1px solid rgba(14,14,15,0.08);
opacity: 0;
transition: opacity 0.28s ease;
pointer-events: none;
z-index: -1;
}
/* When scrolled, flip the white header text back to ink so it stays
readable against the now-frosted-white backdrop. */
header[data-scrolled='true'] .text-white\/95 {
color: #0E0E0F !important;
text-shadow: none !important;
}
/* ─── How-It-Works auto-advance progress bar ─────────────────────────
A thin green line that fills left→right across the active step row
over its auto-advance interval (duration set inline). Restarts on each
new active row because the element is keyed + remounted. */
.hiw-progress {
background: linear-gradient(90deg, #B4D564 0%, #8FB444 100%);
transform: scaleX(0);
transform-origin: left center;
animation-name: hiwProgress;
animation-timing-function: linear;
animation-fill-mode: forwards;
border-radius: 0 2px 2px 0;
}
@keyframes hiwProgress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
.hiw-progress { display: none; }
}
/* ─── Hero scroll cue — bouncing chevron at the bottom of the hero ──── */
.scroll-cue { animation: scrollCue 1.8s ease-in-out infinite; }
@keyframes scrollCue {
0%, 100% { transform: translateY(0); opacity: 0.55; }
50% { transform: translateY(6px); opacity: 1; }
}
/* ─── Chat widget (fake AI assistant) ─────────────────────────────────── */
.chat-panel {
animation: chatPanelIn 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
transform-origin: bottom right;
}
@keyframes chatPanelIn {
from { opacity: 0; transform: translateY(14px) scale(0.96); }
to { opacity: 1; transform: none; }
}
.chat-teaser {
animation: chatTeaserIn 0.3s ease both;
transform-origin: bottom right;
}
@keyframes chatTeaserIn {
from { opacity: 0; transform: translateY(8px) scale(0.96); }
to { opacity: 1; transform: none; }
}
.chat-typing i {
display: inline-block;
width: 6px; height: 6px;
border-radius: 9999px;
background: rgba(14, 14, 15, 0.4);
animation: chatTyping 1s infinite ease-in-out;
}
.chat-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatTyping {
0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
40% { transform: translateY(-3px); opacity: 1; }
}
/* ─── Counter primitive (used by ) ────────────────────────── */
.counter-root {
position: relative;
display: inline-block;
line-height: inherit;
}
.counter-ghost {
visibility: hidden;
pointer-events: none;
user-select: none;
}
.counter-shown {
position: absolute;
inset: 0;
white-space: nowrap;
}
/* ─── ActivationStrip — orchestrated reveal sequence ─────────────────── */
/* Dot texture starts at 0 opacity, ramps up to 0.35 when section reveals */
.activation-dots {
opacity: 0;
transition: opacity calc(0.7s * var(--rs, 1)) ease calc(0.15s * var(--rs, 1));
}
[data-revealed='true'] .activation-dots { opacity: 0.35; }
/* Tag icon avatar — pop-in with a single 360° rotate. Starts hidden,
triggered when the section gets data-revealed. */
.activation-tag {
opacity: 0;
transform: scale(0.5) rotate(0deg);
}
[data-revealed='true'] .activation-tag {
animation: activationTagPop calc(0.85s * var(--rs, 1)) cubic-bezier(0.34, 1.4, 0.64, 1) calc(0.25s * var(--rs, 1)) forwards;
}
@keyframes activationTagPop {
0% { opacity: 0; transform: scale(0.45) rotate(0deg); }
60% { opacity: 1; transform: scale(1.08) rotate(300deg); }
100% { opacity: 1; transform: scale(1) rotate(360deg); }
}
/* Input pill — drawer-opens from left. We use scaleX with transform-origin
left, then snap to scaleX(1) once revealed. */
.activation-form {
transform-origin: left center;
transform: scaleX(0.04);
opacity: 0;
transition:
transform calc(0.55s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1) calc(0.7s * var(--rs, 1)),
opacity calc(0.35s * var(--rs, 1)) ease calc(0.7s * var(--rs, 1)),
box-shadow 0.32s ease;
}
[data-revealed='true'] .activation-form {
transform: scaleX(1);
opacity: 1;
}
/* While the drawer is opening the inner contents would smear horizontally
— counter-stretch them so the input + button stay readable mid-anim. */
.activation-form > * {
transform: scaleX(25);
transform-origin: left center;
opacity: 0;
transition:
transform calc(0.55s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1) calc(0.85s * var(--rs, 1)),
opacity calc(0.35s * var(--rs, 1)) ease calc(1s * var(--rs, 1));
}
[data-revealed='true'] .activation-form > * {
transform: scaleX(1);
opacity: 1;
}
/* Gold-tinted focus glow on the input wrapper */
.activation-form:focus-within {
box-shadow: 0 0 0 4px rgba(181,138,75,0.12), 0 6px 20px -8px rgba(181,138,75,0.28);
}
/* Activate submit — scale-in with overshoot. Layered on top of the form
drawer so it lands as a separate beat. */
.activation-cta {
opacity: 0;
transform: scale(0.7);
transition:
transform calc(0.45s * var(--rs, 1)) cubic-bezier(0.34, 1.56, 0.64, 1),
opacity calc(0.35s * var(--rs, 1)) ease;
transition-delay: calc(var(--reveal-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .activation-cta {
opacity: 1;
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
.activation-dots { opacity: 0.35; transition: none; }
.activation-tag { opacity: 1; transform: none; animation: none; }
.activation-form,
.activation-form > *,
.activation-cta {
opacity: 1; transform: none; transition: none;
}
}
/* ─── ImpactSection ─────────────────────────────────────────────────── */
/* Tile lifts on hover + brand-tinted halo grows under it */
.impact-tile {
position: relative;
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: 0;
}
.impact-tile::after {
content: '';
position: absolute;
inset: 8px;
border-radius: 18px;
background: var(--tile-halo, transparent);
filter: blur(28px);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: -1;
}
.impact-tile:hover { transform: translateY(-4px); }
.impact-tile:hover::after { opacity: 0.6; }
/* The first tile's coral wash blob breathes on a slow loop — ambient life
so the section feels alive even after the counters resolve. */
.coral-breathe {
animation: coralBreathe 8s ease-in-out infinite;
}
@keyframes coralBreathe {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.08); }
}
/* "+" suffix that pops in after a counter resolves. Triggered when the
section gets [data-revealed='true'] via useInView. Delay tuned to land
~50ms after the counter finishes (counter duration 2s + start delay). */
.plus-pop {
display: inline-block;
opacity: 0;
transform: scale(0.5);
transition:
opacity calc(0.3s * var(--rs, 1)) ease,
transform calc(0.45s * var(--rs, 1)) cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(var(--plus-delay, 2.1s) * var(--rs, 1));
}
[data-revealed='true'] .plus-pop {
opacity: 1;
transform: scale(1);
}
/* "mi" suffix that fades up after the 47M counter settles */
.unit-pop {
display: inline-block;
opacity: 0;
transform: translateY(8px);
transition:
opacity calc(0.4s * var(--rs, 1)) ease,
transform calc(0.45s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: calc(var(--unit-delay, 2.15s) * var(--rs, 1));
}
[data-revealed='true'] .unit-pop {
opacity: 1;
transform: translateY(0);
}
/* Distribution bar segments grow from width 0 to their target. Each
segment uses a CSS var --w with its target width; the cascade is
handled via per-child transition-delay. */
.impact-bar-seg {
width: 0 !important;
transition: width calc(0.9s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: calc(var(--seg-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .impact-bar-seg {
width: var(--seg-w) !important;
}
/* Time-to-reunion bar animates from 0 to 14% on reveal */
.impact-time-bar {
transform-origin: left center;
transform: scaleX(0);
transition: transform calc(1.1s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: calc(0.4s * var(--rs, 1));
}
[data-revealed='true'] .impact-time-bar {
transform: scaleX(1);
}
/* Year-line bars in the 2007 tile rise from 0 height with a left→right
cascade so it feels like the company "growing" over the years. */
.impact-year-bar {
transform-origin: bottom center;
transform: scaleY(0);
transition: transform calc(0.7s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: calc(var(--year-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .impact-year-bar {
transform: scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
.coral-breathe { animation: none; }
.plus-pop, .unit-pop { opacity: 1; transform: none; transition: none; }
.impact-bar-seg { width: var(--seg-w) !important; transition: none; }
.impact-time-bar, .impact-year-bar { transform: none; transition: none; }
}
/* ─── HowItWorks lava-lamp mesh ─────────────────────────────────────── */
/* Each card's mesh bg is built from a base linear gradient + 3 absolutely
positioned blobs (radial gradients) that drift independently on slow
loops. Each blob has its own keyframe so the three move out of phase —
gives that "lava lamp" wandering feel without becoming visually busy. */
.lava-mesh {
position: absolute;
inset: 0;
overflow: hidden;
}
/* Blob shape only — drift + hover-acceleration are driven in JS by
useLavaMotion. Lighter blur + multiply blend so saturated blobs read
through the card content as clearly visible orbiting color, not just
a faint wash. */
.lava-blob {
position: absolute;
border-radius: 50%;
filter: blur(28px);
mix-blend-mode: multiply;
opacity: 0.65;
will-change: transform;
}
.lava-blob-1, .lava-blob-2, .lava-blob-3 {
/* Placeholder — class names are referenced from JSX so Tailwind keeps
them in the compiled CSS. Real motion comes from useLavaMotion. */
}
/* Step-number per-character reveal — each glyph in "01" / "02" / "03"
fades up with 100ms stagger after the card lands. */
.step-glyph {
display: inline-block;
opacity: 0;
transform: translateY(10px);
transition:
opacity calc(0.4s * var(--rs, 1)) ease,
transform calc(0.45s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: calc(var(--glyph-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .step-glyph {
opacity: 1;
transform: translateY(0);
}
/* Status chip slides up from bottom + soft micro-bounce on settle */
.step-chip {
opacity: 0;
transform: translateY(20px);
transition:
opacity calc(0.45s * var(--rs, 1)) ease,
transform calc(0.6s * var(--rs, 1)) cubic-bezier(0.34, 1.4, 0.64, 1);
transition-delay: calc(var(--chip-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .step-chip {
opacity: 1;
transform: translateY(0);
}
.group:hover .step-chip { transform: translateY(-4px); }
/* Card cascade reveal — uses [data-reveal] from the foundation */
.step-card {
transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.45s ease;
}
.step-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 50px -20px rgba(14,14,15,0.18);
}
/* Product photo settles in with a tiny scale once card is revealed */
.step-photo {
transition: transform calc(0.7s * var(--rs, 1)) ease;
transform: scale(1.06);
}
[data-revealed='true'] .step-photo { transform: scale(1.02); }
.group:hover .step-photo { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
.lava-blob-1, .lava-blob-2, .lava-blob-3 { animation: none; }
.step-glyph, .step-chip { opacity: 1; transform: none; transition: none; }
.step-photo { transform: scale(1.02); transition: none; }
}
/* ─── Products grid ─────────────────────────────────────────────────── */
/* Each card lifts + glows on hover; the image inside scales gently and
the chevron circle in the corner slides + flips bg-color (already wired
via group-hover in JSX). The "In stock" chip pops in last per card. */
.product-card {
transition:
transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.4s ease,
border-color 0.4s ease;
box-shadow: 0 0 0 transparent;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 22px 50px -20px rgba(14,14,15,0.16);
}
/* Product image — settles in with a small entrance scale that fades out
to its rest position once the section reveals. */
.product-img {
transition: transform calc(0.7s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1);
transform: scale(0.92);
}
[data-revealed='true'] .product-img { transform: scale(1); }
.group:hover .product-img { transform: scale(1.05); }
/* "In stock" chip — soft pop in after the card lands */
.product-chip {
opacity: 0;
transform: scale(0.85);
transition:
opacity calc(0.3s * var(--rs, 1)) ease,
transform calc(0.4s * var(--rs, 1)) cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(var(--chip-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .product-chip { opacity: 1; transform: scale(1); }
/* Chevron round button — slides right on hover (visual reinforcement of
the existing color swap already coded in the JSX). */
.product-chev {
transition:
background-color 0.25s ease,
color 0.25s ease,
transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.group:hover .product-chev { transform: translateX(3px); }
/* Price tag — gains a subtle pop into the brand-ink color on hover */
.product-price {
transition: color 0.3s ease, transform 0.3s ease;
}
.group:hover .product-price {
color: #0E0E0F;
transform: translateX(2px);
}
@media (prefers-reduced-motion: reduce) {
.product-card, .product-img, .product-chip, .product-chev, .product-price {
transition: none; transform: none; opacity: 1;
}
[data-revealed='true'] .product-img { transform: none; }
}
/* ─── Testimonials ──────────────────────────────────────────────────── */
/* Each card lifts on hover with a brand-tinted halo underneath; the halo
color is set per-card via the --card-halo CSS var (gold/blue/green to
match the badge). Same pattern as the ImpactSection tiles. */
.testimonial-card {
position: relative;
transition:
transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.4s ease;
z-index: 0;
}
/* Hover glow removed per Rayan — just a clean, subtle lift. */
.testimonial-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px -24px rgba(14,14,15,0.16);
}
/* Avatar circle — overshoot pop after the card lands */
.testimonial-avatar {
opacity: 0;
transform: scale(0.4);
transition:
opacity calc(0.35s * var(--rs, 1)) ease,
transform calc(0.5s * var(--rs, 1)) cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(var(--avatar-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .testimonial-avatar {
opacity: 1;
transform: scale(1);
}
/* Badge gentle scale-in */
.testimonial-badge {
opacity: 0;
transform: scale(0.85);
transition:
opacity calc(0.35s * var(--rs, 1)) ease,
transform calc(0.45s * var(--rs, 1)) cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(var(--badge-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .testimonial-badge {
opacity: 1;
transform: scale(1);
}
/* Stars cascade-fill left → right with a tiny overshoot pop */
.testimonial-star {
display: inline-block;
opacity: 0;
transform: scale(0);
transition:
opacity calc(0.25s * var(--rs, 1)) ease,
transform calc(0.4s * var(--rs, 1)) cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(var(--star-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .testimonial-star {
opacity: 1;
transform: scale(1);
}
/* Value chip wrapper — soft glow when its counter resolves */
.testimonial-value {
opacity: 0;
transform: translateY(8px);
transition:
opacity calc(0.4s * var(--rs, 1)) ease,
transform calc(0.5s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: calc(var(--value-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .testimonial-value {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.testimonial-card, .testimonial-avatar, .testimonial-badge,
.testimonial-star, .testimonial-value {
transition: none; transform: none; opacity: 1;
}
}
/* ─── PricingPeek ───────────────────────────────────────────────────── */
/* Each tier card lifts + brand-tinted halo blurs in on hover. Silver
(featured) keeps its visual emphasis from the JSX (md:scale-1.015
md:-translate-y-1) and gets the same halo treatment in silver tint. */
.tier-card {
position: relative;
transition:
transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.4s ease,
ring-color 0.4s ease;
z-index: 0;
}
.tier-card::after {
content: '';
position: absolute;
inset: 6px;
border-radius: 20px;
background: var(--card-halo, transparent);
filter: blur(32px);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: -1;
}
.tier-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -20px rgba(14,14,15,0.16); }
.tier-card:hover::after { opacity: 0.7; }
/* Featured Silver tier sits slightly elevated already — hover compounds */
.tier-card.tier-featured:hover { transform: translateY(-6px) scale(1.018); }
/* Tier price — scale-pop on reveal with overshoot */
.tier-price {
opacity: 0;
transform: scale(0.6);
transition:
opacity calc(0.35s * var(--rs, 1)) ease,
transform calc(0.55s * var(--rs, 1)) cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(var(--price-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .tier-price {
opacity: 1;
transform: scale(1);
}
/* "Most popular" badge — gentle vertical bob loop, runs forever */
.tier-badge {
animation: tierBadgeBob 3s ease-in-out infinite;
}
@keyframes tierBadgeBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
/* "Free for 1 year with activation" pill — soft scale pulse */
.tier-pill {
opacity: 0;
transform: scale(0.9);
transition:
opacity calc(0.4s * var(--rs, 1)) ease,
transform calc(0.5s * var(--rs, 1)) cubic-bezier(0.34, 1.4, 0.64, 1);
transition-delay: calc(var(--pill-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .tier-pill {
opacity: 1;
transform: scale(1);
animation: tierPillPulse 4s ease-in-out infinite;
animation-delay: calc((var(--pill-delay, 0ms) + 0.7s) * var(--rs, 1));
}
@keyframes tierPillPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(159,203,82,0); }
50% { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(159,203,82,0.15); }
}
/* Perks list — each row cascades in */
.tier-perk {
opacity: 0;
transform: translateY(6px);
transition:
opacity calc(0.35s * var(--rs, 1)) ease,
transform calc(0.4s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: calc(var(--perk-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .tier-perk {
opacity: 1;
transform: translateY(0);
}
/* Checkmark path-draw — stroke-dasharray animates from full length
(invisible) to 0 (fully drawn). The check path is ~7.5 units long. */
.perk-check {
stroke-dasharray: 8;
stroke-dashoffset: 8;
transition: stroke-dashoffset calc(0.55s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: calc(var(--check-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .perk-check { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
.tier-card, .tier-price, .tier-pill, .tier-perk {
transition: none; transform: none; opacity: 1;
}
.tier-badge { animation: none; }
[data-revealed='true'] .tier-pill { animation: none; }
.perk-check { stroke-dashoffset: 0; transition: none; }
}
/* ─── BusinessTeaser dark panel ──────────────────────────────────────── */
/* Dot texture slow drifts — a tiny, continuous parallax pan on the dot
bg gives the otherwise-static dark panel a sense of ambient life. */
.panel-drift {
background-position: 0 0;
animation: panelDrift 28s linear infinite;
}
@keyframes panelDrift {
0% { background-position: 0 0; }
100% { background-position: 22px 22px; } /* exactly one dot-grid step */
}
/* Brand bloom blobs breathe softly */
.panel-bloom {
opacity: 0.6;
animation: panelBloom 7s ease-in-out infinite;
}
@keyframes panelBloom {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.75; }
}
/* Map reveal — a wireframe world map sits hidden across the dark panel
and is unmasked by a soft radial-gradient that follows the cursor.
Only the area near the cursor shows map detail; everything else stays
pitch black. JS sets --mx / --my (pixel coords inside the section). */
.panel-map {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.45s ease;
-webkit-mask-image: radial-gradient(
circle 280px at var(--mx, 50%) var(--my, 50%),
black 0%,
rgba(0,0,0,0.55) 50%,
transparent 100%
);
mask-image: radial-gradient(
circle 280px at var(--mx, 50%) var(--my, 50%),
black 0%,
rgba(0,0,0,0.55) 50%,
transparent 100%
);
z-index: 1;
}
.panel-map.active { opacity: 1; }
/* Gold flashlight sweep — a soft elliptical gold glow enters from the
upper-left, drifts diagonally across the card to the lower-right, then
fades out and pauses before sweeping again. Uses mix-blend-mode: screen
so it adds light to whatever's underneath without tinting the surface
gold — it reads as a stray gleam, not a recolor. */
.gold-flash-wrap {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
z-index: 4;
}
.gold-flash {
position: absolute;
width: 40%;
height: 75%;
top: -10%;
left: -25%;
background: radial-gradient(
ellipse at center,
rgba(255, 245, 211, 0.42) 0%,
rgba(232, 216, 168, 0.22) 28%,
rgba(181, 138, 75, 0.08) 55%,
transparent 75%
);
filter: blur(28px);
mix-blend-mode: screen;
opacity: 0;
transform: translate3d(0, 0, 0);
animation: goldFlashSweep 9s cubic-bezier(0.45, 0.04, 0.55, 0.96) infinite;
will-change: transform, opacity;
}
@keyframes goldFlashSweep {
/* fade in upper-left, sweep diagonally to lower-right, fade out, pause */
0% { transform: translate3d(0, 0, 0); opacity: 0; }
8% { opacity: 1; }
42% { transform: translate3d(260%, 60%, 0); opacity: 1; }
50% { opacity: 0; }
100% { transform: translate3d(260%, 60%, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.gold-flash { animation: none; opacity: 0; }
}
/* Industry card — border glows brand-blue + icon pops on hover */
.industry-card {
position: relative;
transition:
background-color 0.32s ease,
box-shadow 0.4s ease;
}
.industry-card:hover {
box-shadow: inset 0 0 0 1px rgba(58,143,204,0.4);
background-color: rgba(43, 43, 44, 0.85);
}
.industry-icon {
transition:
transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1),
background-color 0.32s ease,
color 0.32s ease;
}
.industry-card:hover .industry-icon {
transform: scale(1.1);
background-color: rgba(58,143,204,0.18);
color: #C8E6FF;
}
.industry-examples {
transition: color 0.32s ease;
}
.industry-card:hover .industry-examples {
color: rgba(200,230,255,0.6);
}
/* SVG path-draw on icon entrance. The dasharray is intentionally generous
(60) so it covers all our icon paths regardless of their actual length. */
.icon-trace {
stroke-dasharray: 60;
stroke-dashoffset: 60;
transition: stroke-dashoffset calc(0.9s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: calc(var(--trace-delay, 0ms) * var(--rs, 1));
}
[data-revealed='true'] .icon-trace { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
.panel-drift, .panel-bloom { animation: none; }
.panel-map { display: none; }
.industry-card, .industry-icon, .industry-examples { transition: none; }
.icon-trace { stroke-dashoffset: 0; transition: none; }
}
/* ─── FAQ accordion ─────────────────────────────────────────────────── */
/* Smooth height animation via grid-template-rows 0fr → 1fr — no JS height
measurement, no jank. The child grid row is overflow-hidden so the
answer text is clipped at the row boundary. */
.faq-item {
transition: background-color 0.32s ease;
border-radius: 12px;
}
.faq-item:hover {
background-color: rgba(235, 241, 250, 0.55); /* lavender wash */
}
.faq-item[data-open='true']:hover {
background-color: transparent;
}
.faq-trigger {
transition: color 0.25s ease;
}
.faq-trigger .faq-chevron {
transition:
transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
background-color 0.32s ease;
}
.faq-item:hover .faq-chevron { transform: rotate(45deg); }
.faq-item[data-open='true'] .faq-chevron {
transform: rotate(45deg);
background-color: rgb(14, 14, 15);
color: rgb(255, 255, 255);
}
.faq-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows calc(0.42s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1);
}
.faq-item[data-open='true'] .faq-panel {
grid-template-rows: 1fr;
}
.faq-panel-inner {
overflow: hidden;
min-height: 0;
/* a11y: a collapsed answer is removed from the accessibility tree + tab order
(visibility:hidden) so screen readers don't read all answers at once. The
transition keeps it present during the collapse animation, then hides it. */
visibility: hidden;
transition: visibility calc(0.42s * var(--rs, 1));
}
.faq-item[data-open='true'] .faq-panel-inner { visibility: visible; }
/* Answer text fades up slightly after the height animation kicks off */
.faq-answer {
opacity: 0;
transform: translateY(-4px);
transition:
opacity calc(0.3s * var(--rs, 1)) ease calc(0.1s * var(--rs, 1)),
transform calc(0.3s * var(--rs, 1)) cubic-bezier(0.22, 0.61, 0.36, 1) calc(0.1s * var(--rs, 1));
}
.faq-item[data-open='true'] .faq-answer {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.faq-panel, .faq-chevron, .faq-answer, .faq-item {
transition: none;
}
}
/* ─── Footer ───────────────────────────────────────────────────────── */
/* Link hover — underline draws in left-to-right (same pattern as nav) */
.footer-link {
position: relative;
transition: color 0.22s ease;
}
.footer-link::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-link:hover::after { transform: scaleX(1); }
/* Social icon — scales + flips bg to ink with a small bounce */
.footer-social {
transition:
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
background-color 0.25s ease,
color 0.25s ease;
}
.footer-social:hover {
transform: scale(1.12) translateY(-2px);
}
/* Language pill segments — smooth swap */
.footer-lang-btn {
transition: background-color 0.25s ease, color 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
.footer-link, .footer-social, .footer-lang-btn { transition: none; }
.footer-link::after { transition: none; }
}
/* Pill — subtle ring lift on hover */
.hero-pill { transition: box-shadow 0.3s ease, transform 0.3s ease; }
.hero-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(14,14,15,0.18); }
/* Trust item — icon gently lifts + glow on hover */
.trust-item { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
.trust-item:hover { transform: translateY(-2px); }
.trust-item img { transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), filter 0.28s ease; }
.trust-item:hover img { transform: scale(1.06) rotate(-2deg); filter: drop-shadow(0 4px 10px rgba(14,14,15,0.18)); }
/* One-time pop-in on initial hero reveal — the row fades up via
.hero-rise-5 (delay 0.37s, duration 0.7s); the icons then play this
overshoot pop with a 70ms cascade so the three icons land like beats. */
.hero-rise-5 .trust-item:nth-child(1) img { animation: trustIconPop calc(0.7s * var(--rs, 1)) cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.55s * var(--rs, 1)); }
.hero-rise-5 .trust-item:nth-child(2) img { animation: trustIconPop calc(0.7s * var(--rs, 1)) cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.62s * var(--rs, 1)); }
.hero-rise-5 .trust-item:nth-child(3) img { animation: trustIconPop calc(0.7s * var(--rs, 1)) cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(0.69s * var(--rs, 1)); }
@keyframes trustIconPop {
0% { transform: scale(0.55) rotate(-14deg); opacity: 0; }
55% { transform: scale(1.08) rotate(3deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hero-rise-5 .trust-item img { animation: none; }
}
/* Partner brand wordmark — saturation lift on hover */
.brand-mark { transition: color 0.25s ease, transform 0.25s ease; }
.brand-mark:hover { transform: translateY(-1px); }
@keyframes heroRise {
to { opacity: 1; transform: translateY(0); }
}
/* Metallic gold shimmer — a bright highlight sweeps diagonally across the
text like polished gold catching light. The base color is the warm tan
(#726651) the user chose; the sweep eases in/out so each pass feels like
one slow reflection rather than a strobe. */
.gold-shimmer {
background-image: linear-gradient(
100deg,
#726651 0%,
#726651 35%,
#a8946a 45%,
#e8d8a8 50%,
#fff5d3 52%,
#e8d8a8 54%,
#a8946a 59%,
#726651 70%,
#726651 100%
);
/* Height must extend past the line box so descenders (the "y" in
"Anywhere") still have gradient to clip into. 200% with a 50% Y
anchor gives 50% overhang above + below the text. */
background-size: 240% 200%;
background-position: 0% 50%;
background-repeat: no-repeat;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
/* Slightly looser line-height than the surrounding h1 so the line box
itself is tall enough to host descenders cleanly. */
line-height: 1.08;
padding-bottom: 0.05em;
animation: goldShimmer 5.5s cubic-bezier(0.45, 0.04, 0.55, 0.96) infinite;
-webkit-text-stroke: 0;
}
/* At bg-size 240%, the bg image is 2.4× wider than the element, so only
positions 0% → 100% keep the gradient covering the text. Going outside
that range (180% / -80%) pushed the image fully off-screen and the
transparent text-fill-color left nothing painted. */
@keyframes goldShimmer {
0% { background-position: 100% 50%; } /* highlight just past left edge */
28% { background-position: 0% 50%; } /* highlight just past right edge */
100% { background-position: 0% 50%; } /* rest in solid gold */
}
@media (prefers-reduced-motion: reduce) {
.gold-shimmer { animation: none; color: #726651; -webkit-text-fill-color: #726651; }
.hero-rise { animation: none; opacity: 1; transform: none; }
}
/* Atlas world-map continent styling — applied to inline SVG paths */
.map-land path,
.map-land .land {
fill: #E8EEF3;
stroke: #B6C2CC;
stroke-width: 0.5;
vector-effect: non-scaling-stroke;
transition: fill .8s ease;
}
.map-land .ocean {
fill: transparent;
}
/* Soft graticule lines (lat/long) for atlas flavor */
.map-graticule line {
stroke: #C9D4DC;
stroke-width: 0.4;
opacity: 0.55;
vector-effect: non-scaling-stroke;
}
/* Recovery pin with pulsing ring */
.pin-pulse::before {
content: '';
position: absolute;
inset: 0;
border-radius: 9999px;
background: currentColor;
opacity: 0.5;
animation: pulseRing 2.4s ease-out infinite;
z-index: -1;
}
/* Subtle scrollbar hide for ticker rail */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
/* Karvio-style dot pattern overlay */
.panel-dots {
background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 22px 22px;
}
.panel-dots-light {
background-image: radial-gradient(rgba(14,14,15,0.08) 1px, transparent 1px);
background-size: 22px 22px;
}
/* Live recovery card cycles through 3 entries via stagger.
Each card visible for ~5s of a 12s loop with 0.5s crossfade.
Negative delays put cards 2 and 3 mid-cycle on first paint so the feed
is never blank, including initial load. */
.live-cycle > * {
position: absolute;
inset: 0;
opacity: 0;
animation: liveSwapCard 12s ease-in-out infinite;
}
.live-cycle > *:nth-child(1) { animation-delay: 0s; }
.live-cycle > *:nth-child(2) { animation-delay: -8s; }
.live-cycle > *:nth-child(3) { animation-delay: -4s; }
@keyframes liveSwapCard {
0% { opacity: 0; transform: translateY(4px); }
4%, 33% { opacity: 1; transform: translateY(0); }
37%, 100% { opacity: 0; transform: translateY(-4px); }
}
/* ============================================================
PORTAL DIRECTION THEMES
Each design direction snapshots the same component tree, then a scoped
theme block re-maps the shared Tailwind tokens (bg-paper*, brand-*) and a
few shared classes (nav-chip underline, brush-wipe) to a distinct palette.
The wrapper class lives on each style's App root (theme-mono / theme-sunlit).
Unlayered + 2-class specificity, so these win over Tailwind utilities.
Inline accent hexes (#B4D564 etc.) are swapped per-folder; see git history.
============================================================ */
/* ---- MONO — cool, minimal, Swiss-tech. Cool-grey canvas, indigo accent. ---- */
.theme-mono.bg-paper { background-color: #FAFBFC; } /* the root carries both classes */
.theme-mono .bg-paper { background-color: #FAFBFC; }
.theme-mono .bg-paper-soft { background-color: #EEF1F5; }
.theme-mono .bg-paper-softer { background-color: #E6EAF1; }
.theme-mono .bg-paper-sand { background-color: #EDEFF4; }
.theme-mono .bg-paper-mint { background-color: #E9EEF7; }
.theme-mono .bg-paper-lavender { background-color: #EAEDF7; }
/* accent — indigo (primary) / lighter indigo (secondary) */
.theme-mono .bg-brand-green, .theme-mono .bg-brand-gold { background-color: #4F46E5; }
.theme-mono .bg-brand-blue, .theme-mono .bg-brand-coral { background-color: #6366F1; }
.theme-mono .text-brand-green, .theme-mono .text-brand-gold { color: #4F46E5; }
.theme-mono .text-brand-blue, .theme-mono .text-brand-coral { color: #6366F1; }
.theme-mono .ring-brand-green, .theme-mono .ring-brand-gold { --tw-ring-color: #4F46E5; }
.theme-mono .ring-brand-blue, .theme-mono .ring-brand-coral { --tw-ring-color: #6366F1; }
.theme-mono .nav-chip[data-active='true']::after { background: #4F46E5; }
.theme-mono .nav-chip:not([data-active='true']):hover::after { background: #6366F1; }
/* minimal direction → drop the editorial serif accent; tight sans in indigo */
.theme-mono .brush-wipe {
font-family: 'Inter Display', Inter, system-ui, sans-serif !important;
color: #4F46E5;
}
/* recolour the How-It-Works auto-advance bar to indigo (shared .hiw-progress
ships green) so the ported row accordion matches the mono accent. */
.theme-mono .hiw-progress { background: linear-gradient(90deg, #4F46E5 0%, #6366F1 100%); }
/* ---- ATLAS — AXION-inspired editorial. Off-white mono-tone canvas (close to
Mono, slightly warmer/neutral), near-black ink + charcoal chrome, and the
ReturnMe green/blue reserved for CTAs. Unlisted direction (hidden in the
nexus); reach it at /atlas/home. Added 2026-05-29. ---- */
.theme-atlas.bg-paper { background-color: #FBFBFC; } /* root carries both classes */
.theme-atlas .bg-paper { background-color: #FBFBFC; }
.theme-atlas .bg-paper-soft { background-color: #F2F3F5; }
.theme-atlas .bg-paper-softer { background-color: #E9EBEF; }
.theme-atlas .bg-paper-sand { background-color: #F4F3F1; }
.theme-atlas .bg-paper-mint { background-color: #EFF3F5; }
.theme-atlas .bg-paper-lavender { background-color: #F0F2F6; }
/* accent — ReturnMe green (primary CTA) / blue (finder CTA). Fills use the bright
brand hexes; text uses deeper variants for legibility on the light canvas. */
.theme-atlas .bg-brand-green, .theme-atlas .bg-brand-gold { background-color: #34A853; }
.theme-atlas .bg-brand-blue, .theme-atlas .bg-brand-coral { background-color: #2D6BEB; }
.theme-atlas .text-brand-green, .theme-atlas .text-brand-gold { color: #1F7A33; }
.theme-atlas .text-brand-blue, .theme-atlas .text-brand-coral { color: #2257C7; }
.theme-atlas .ring-brand-green, .theme-atlas .ring-brand-gold { --tw-ring-color: #34A853; }
.theme-atlas .ring-brand-blue, .theme-atlas .ring-brand-coral { --tw-ring-color: #2D6BEB; }
/* nav underline — charcoal active (monochrome chrome), green undertone on hover */
.theme-atlas .nav-chip[data-active='true']::after { background: #16181A; }
.theme-atlas .nav-chip:not([data-active='true']):hover::after { background: #34A853; }
/* emphasis accent — bold sans charcoal (no serif), matching the grotesque feel */
.theme-atlas .brush-wipe {
font-family: 'Inter Display', Inter, system-ui, sans-serif !important;
color: #16181A;
}
/* How-It-Works auto-advance bar — green brand undertone */
.theme-atlas .hiw-progress { background: linear-gradient(90deg, #34A853 0%, #2E944A 100%); }
/* Shared button type — crisp, tech/Linear-feel: Inter Display, medium-tight,
stylistic sets for a more geometric (SF/Geist-like) read, antialiased. */
.theme-atlas .atlas-btn {
font-family: 'Inter Display', Inter, system-ui, sans-serif;
font-weight: 600;
letter-spacing: -0.014em;
font-feature-settings: 'cv11', 'ss01', 'cv05';
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ── Atlas chat demo ───────────────────────────────────────────────────────
Panel entry, per-message reveal, map pin pulse, in-transit dot, typing dots. */
.atlas-pop { animation: atlasPop 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: bottom right; }
@keyframes atlasPop {
from { opacity: 0; transform: translateY(16px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.atlas-msg { animation: atlasMsg 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes atlasMsg {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.atlas-pulse { transform-box: fill-box; transform-origin: center; animation: atlasPulse 2s ease-out infinite; }
@keyframes atlasPulse {
0% { transform: scale(0.6); opacity: 0.5; }
70% { transform: scale(1.6); opacity: 0; }
100% { transform: scale(1.6); opacity: 0; }
}
.atlas-ping-dot { animation: atlasDrift 3.2s ease-in-out infinite alternate; }
@keyframes atlasDrift { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
.atlas-typing span {
width: 6px; height: 6px; border-radius: 9999px; background: #9aa1ad; display: inline-block;
animation: atlasTyping 1.2s ease-in-out infinite;
}
.atlas-typing span:nth-child(2) { animation-delay: 0.15s; }
.atlas-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes atlasTyping { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
/* Solid CTA hover — lift + subtle brighten. Uses transform/filter so it works
even on buttons whose background is set via inline style (Tailwind hover:bg-*
can't override an inline background). */
.atlas-cta { transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease; }
.atlas-cta:hover { transform: translateY(-1px); filter: brightness(1.07); }
.atlas-cta:active { transform: translateY(0); filter: brightness(0.97); }
/* 3D "raised" CTA — a solid coloured bottom lip (its own darker shade) gives the
button physical depth; it lifts a touch on hover and presses IN on click as the
lip shrinks. Per-button colours come from inline --edge (the lip) and --glow
(ambient). A top inset highlight adds a subtle rounded sheen. */
.atlas-cta-3d {
position: relative;
border-radius: 12px;
box-shadow:
0 5px 0 0 var(--edge, rgba(0,0,0,0.35)),
0 10px 18px -6px var(--glow, rgba(0,0,0,0.3)),
inset 0 1px 0 0 rgba(255,255,255,0.28);
transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
will-change: transform;
}
.atlas-cta-3d:hover {
transform: translateY(-2px);
filter: brightness(1.05);
box-shadow:
0 7px 0 0 var(--edge, rgba(0,0,0,0.35)),
0 16px 26px -8px var(--glow, rgba(0,0,0,0.3)),
inset 0 1px 0 0 rgba(255,255,255,0.3);
}
.atlas-cta-3d:active {
transform: translateY(3px);
filter: brightness(0.98);
box-shadow:
0 2px 0 0 var(--edge, rgba(0,0,0,0.35)),
0 4px 10px -6px var(--glow, rgba(0,0,0,0.3)),
inset 0 1px 0 0 rgba(255,255,255,0.22);
}
@media (prefers-reduced-motion: reduce) {
.atlas-cta-3d { transition: none; }
.atlas-cta-3d:hover, .atlas-cta-3d:active { transform: none; }
}
/* "Log in / Account" button — transparent w/ black border, inverts to solid on hover + lifts. */
.atlas-dark-btn { background: transparent; color: #16181A; box-shadow: inset 0 0 0 1px #16181A; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease; }
.atlas-dark-btn:hover { background: #16181A; color: #fff; box-shadow: 0 6px 16px -6px rgba(16,24,40,0.35); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
.atlas-cta, .atlas-dark-btn { transition: none; }
.atlas-cta:hover, .atlas-dark-btn:hover { transform: none; }
}
/* Brand-trust marquee strip (below the hero) — seamless infinite scroll with
soft edge fades. The track is duplicated, so -50% loops with no jump. */
.atlas-marquee-mask {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.atlas-marquee { animation: atlasMarquee 38s linear infinite; }
.atlas-marquee:hover { animation-play-state: paused; }
@keyframes atlasMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .atlas-marquee { animation: none; } }
/* "Why ReturnMe" SPOTLIGHT — one cohesive section: a section title on top, a
large changing stage (big icon + rotating title + copy) as the centrepiece,
and ONE full-width row of all nine icons beneath, each labelled, acting as the
selector. The active row item fills an autoplay progress ring, then advances.
Grid-stacked panels crossfade (height tracks the tallest, so no layout jump).
Driven by app.js ([data-spotlight]). */
.spot-stage { display: grid; }
.spot-panel {
grid-area: 1 / 1;
opacity: 0;
transform: translateY(14px) scale(0.985);
transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
pointer-events: none;
}
.spot-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
/* The big stage icon eases in a touch behind the text for a layered feel. */
.spot-panel .spot-stage-icon { transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); transform: scale(0.92); }
.spot-panel.is-active .spot-stage-icon { transform: scale(1); }
/* CARD CAROUSEL (selector) — a scroll-snap row of clean minimal cards. The
active card centres, lifts, and fully lights; neighbours dim; the outer edges
fade via a mask. Prev/next arrows + a progress line drive it (app.js sets the
active card, scrolls it to centre, and fills the progress bar over autoplay). */
.spot-cards-mask {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.spot-track {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
/* Vertical breathing room so the lifted card + its drop shadow aren't clipped
by the scroll container (overflow-x:auto also clips the y-axis). */
padding-top: 16px;
padding-bottom: 34px;
}
.spot-track::-webkit-scrollbar { display: none; }
.spot-card {
flex: 0 0 auto;
background: #fff;
box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.09);
opacity: 0.55;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
box-shadow 0.45s ease;
}
.spot-card:hover { opacity: 0.92; transform: translateY(-4px); box-shadow: 0 16px 36px -18px rgba(16, 24, 40, 0.26); }
.spot-card.is-active {
opacity: 1;
transform: translateY(-6px) scale(1.03);
box-shadow: 0 28px 54px -22px rgba(16, 24, 40, 0.34);
}
.spot-card:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(78, 168, 218, 0.7); }
.spot-card-tile { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.spot-card-img { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.spot-card.is-active .spot-card-img { transform: scale(1.08); }
/* Progress line beneath the carousel. */
.spot-progress-track { background: rgba(16, 24, 26, 0.1); }
.spot-progress-fill { background: #16181A; transition: width 0.12s linear; }
@media (prefers-reduced-motion: reduce) {
.spot-panel { transition: none; }
.spot-panel .spot-stage-icon { transition: none; }
.spot-progress-fill { transition: none; }
}
/* "Why ReturnMe" FEATURE ACCORDION — the redesigned section: a sticky tag photo
beside a vertical list of the tag's qualities. Every row is always visible;
the active one expands to reveal its copy (grid-rows 0fr→1fr animates to the
exact content height, no max-height guesswork). A hairline at the foot of the
open row fills over the autoplay interval — app.js sets --spot-frac (0→1) on
the root each frame, then advances. Click a row to jump; hover/focus pauses.
Shares the [data-spotlight] engine — each row is a [data-spot-panel]. */
.acc-list { border-top: 1px solid rgba(16, 24, 26, 0.10); }
.acc-item { position: relative; border-bottom: 1px solid rgba(16, 24, 26, 0.10); }
.acc-head {
display: flex; align-items: center; gap: 1rem; width: 100%;
padding: 0.9rem 0.25rem; background: transparent; border: 0;
text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.acc-head:focus-visible { outline: none; }
.acc-head:focus-visible .acc-title { text-decoration: underline; text-underline-offset: 4px; }
/* Icon chip — hairline by default, a brand-green wash when its row is active. */
.acc-icon {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 13px;
background: #F7F7F7; box-shadow: inset 0 0 0 1px rgba(16, 24, 26, 0.09);
color: #6B6B6B;
transition: background 0.4s ease, box-shadow 0.4s ease, color 0.4s ease,
transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.acc-icon svg { width: 22px; height: 22px; }
.acc-item.is-active .acc-icon {
background: rgba(180, 213, 100, 0.18);
box-shadow: inset 0 0 0 1px rgba(143, 180, 68, 0.45);
color: #5C7A1E; transform: scale(1.04);
}
.acc-title {
flex: 1 1 auto; min-width: 0;
font-family: "Inter Display", Inter, system-ui, sans-serif;
font-weight: 600; letter-spacing: -0.01em;
font-size: clamp(17px, 1.6vw, 20px); line-height: 1.2;
color: #6B6B6B; transition: color 0.35s ease;
}
.acc-item.is-active .acc-title { color: #16181A; }
.acc-mark {
flex: 0 0 auto; color: #9A9A9A;
transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s ease;
}
.acc-mark svg { display: block; width: 18px; height: 18px; }
.acc-item.is-active .acc-mark { transform: rotate(180deg); color: #16181A; }
/* Collapsible body — the grid-rows trick animates to the exact content height. */
.acc-body {
display: grid; grid-template-rows: 0fr; opacity: 0;
transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
}
.acc-item.is-active .acc-body { grid-template-rows: 1fr; opacity: 1; }
.acc-body-inner { overflow: hidden; min-height: 0; }
.acc-copy {
margin: 0;
padding: 0 2.4rem 0.95rem 4.1rem; /* align under the title, clear of the icon */
font-size: clamp(15px, 1.3vw, 16.5px); line-height: 1.6; color: #3A3B3F;
max-width: 46ch;
}
/* Autoplay progress — a hairline that fills across the foot of the open row. */
.acc-track {
height: 2px; margin: 0 2.4rem 0.9rem 4.1rem; border-radius: 2px;
background: rgba(16, 24, 26, 0.08); overflow: hidden;
}
.acc-track > i { display: block; height: 100%; width: calc(var(--spot-frac, 0) * 100%); background: #B4D564; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
.acc-icon, .acc-mark, .acc-title, .acc-body { transition: none; }
.acc-track > i { width: 0; }
}
/* "Why ReturnMe" TAG STAGE.
Desktop: one soft gradient panel (.whyv-side) bleeds across the ENTIRE right
side of the section to the page edge (rendered once at section level, behind
the content); the tag floats large on top with a soft drop shadow — no rings,
no reflection. Mobile: the tag just sits on the paper canvas (panel hidden). */
.whyv-stage { position: relative; isolation: isolate; }
/* Desktop-only: a real diagonal gradient washes the WHOLE section — light paper
top-left → a clearly deeper cool blue-grey bottom-right (the stops contrast
enough to read as a gradient, not a flat fill). */
.whyv-side {
position: absolute; z-index: 0; pointer-events: none;
inset: 0;
background: linear-gradient(125deg, #f8fafc 0%, #e7eef6 38%, #c6d4e4 100%);
}
/* The tag sits in the RIGHT column (in flow). Sizing is fully in CSS so the
theme-vs-utilities load order can't override it. On desktop it's bounded to
its column (max-width:100%) so it never overflows into the accordion, but it
stays in the right portion of the content — not pushed off to the page edge. */
.whyv-tagimg {
position: relative; z-index: 1;
max-width: 86%; max-height: 320px; width: auto; height: auto;
filter: drop-shadow(0 24px 44px rgba(16, 24, 40, 0.20));
}
@media (min-width: 640px) and (max-width: 1023.98px) {
.whyv-tagimg { max-width: 66%; max-height: 380px; }
}
@media (min-width: 1024px) {
.whyv-stage { min-height: 440px; }
.whyv-tagimg { max-width: 100%; max-height: 460px; }
}
/* Metrics card "notification" — frosted off-white banner that eases in from the
top-right (Apple-style) once the metrics image card reveals. */
.metrics-notif {
opacity: 0;
transform: translate3d(20px, -6px, 0);
transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: 0.5s;
}
[data-revealed] .metrics-notif { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.metrics-notif { opacity: 1; transform: none; transition: none; }
}
/* Nav "Activate a tag" button — hidden over the hero (which shows its own
Activate CTA); once the hero scrolls away, the hero's Activate button flies
diagonally up into this slot (app.js headerState adds .is-in + an animated
clone). Scrolling back up adds .is-out, then the clone slides diagonally back
down to the hero CTA's spot. */
/* [data-cta-activate] is carried on the button so these selectors out-specify the
generated `.inline-flex { display:inline-flex }` utility (which loads after
theme.css) — otherwise the button would show by default over the hero. */
.cta-activate[data-cta-activate] { display: none; }
.cta-activate[data-cta-activate].is-in {
display: inline-flex;
animation: ctaActivatePop 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) both;
animation-delay: 0.3s;
}
.cta-activate[data-cta-activate].is-out {
display: inline-flex;
animation: ctaActivateOut 0.34s cubic-bezier(0.4, 0, 0.7, 0.6) both;
}
@keyframes ctaActivatePop {
from { opacity: 0; transform: scale(0.6) translateY(-6px); }
60% { opacity: 1; }
to { opacity: 1; transform: none; }
}
@keyframes ctaActivateOut {
from { opacity: 1; transform: none; }
to { opacity: 0; transform: scale(0.55) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
.cta-activate[data-cta-activate].is-in, .cta-activate[data-cta-activate].is-out { animation: none; }
}
/* While the CTAs are "merged" into the nav button, the real hero CTAs fade out
so the flying clones read as the buttons themselves lifting off (merge) and
landing back (split) — instead of the originals sitting there unchanged. */
/* The hero CTAs' fade in/out during the merge↔split is driven by inline styles
in app.js (setHeroCtas) — inline so the opacity transition reliably beats the
buttons' own .atlas-cta-3d transition from app.css. Nothing needed here. */
/* TAG MODAL — two-tab quick actions (Activate / Found). Sleek, modern card. */
.tagmodal { position: fixed; inset: 0; z-index: 90; display: none; }
.tagmodal.is-open { display: grid; place-items: center; padding: 20px; }
.tagmodal-overlay {
position: absolute; inset: 0; background: rgba(12, 14, 18, 0.45);
-webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
opacity: 0; transition: opacity 0.3s ease;
}
.tagmodal.is-open .tagmodal-overlay { opacity: 1; }
.tagmodal-card {
position: relative; width: min(440px, 100%); background: #fff;
border-radius: 26px; padding: 30px 30px 26px;
box-shadow: 0 48px 100px -32px rgba(12, 14, 18, 0.6), 0 0 0 1px rgba(16, 24, 26, 0.06);
opacity: 0; transform: translateY(14px) scale(0.97);
transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.tagmodal.is-open .tagmodal-card { opacity: 1; transform: none; }
.tagmodal-x {
position: absolute; top: 18px; right: 18px; width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 9999px; color: #8a8a88; background: rgba(16, 24, 26, 0.04);
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.tagmodal-x:hover { background: rgba(16, 24, 26, 0.09); color: #0E0E0F; transform: rotate(90deg); }
/* Segmented tabs with a sliding active indicator. */
.tagmodal-tabs {
position: relative; display: grid; grid-template-columns: 1fr 1fr;
margin-top: 20px; padding: 5px; background: #F1F1EF; border-radius: 14px;
}
.tagmodal-tab-ind {
position: absolute; top: 5px; left: 5px; bottom: 5px; width: calc(50% - 5px);
background: #fff; border-radius: 10px;
box-shadow: 0 3px 10px -3px rgba(16, 24, 40, 0.3), 0 0 0 1px rgba(16, 24, 26, 0.03);
transition: transform 0.34s cubic-bezier(0.4, 0.1, 0.2, 1);
}
.tagmodal-tabs[data-active='found'] .tagmodal-tab-ind { transform: translateX(100%); }
.tagmodal-tab {
position: relative; z-index: 1; padding: 10px 8px; border-radius: 10px; cursor: pointer;
font-weight: 600; font-size: 13.5px; letter-spacing: -0.015em; white-space: nowrap;
color: #6B6B6B; transition: color 0.22s ease;
}
.tagmodal-tab.is-active { color: #0E0E0F; }
.tagmodal-panel { display: none; }
.tagmodal-panel.is-active { display: block; }
.tagmodal-input {
width: 100%; border-radius: 13px; background: #F6F6F4;
border: 1px solid rgba(16, 24, 26, 0.08); padding: 13px 15px;
font-size: 15px; color: #0E0E0F;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.tagmodal-input::placeholder { color: #a2a2a0; }
.tagmodal-input:focus {
outline: none; background: #fff; border-color: rgba(78, 168, 218, 0.75);
box-shadow: 0 0 0 3.5px rgba(78, 168, 218, 0.16);
}
.tagmodal-submit {
width: 100%; border-radius: 13px; padding: 13px 16px; margin-top: 2px;
font-weight: 600; font-size: 15px; letter-spacing: -0.01em; cursor: pointer;
transition: filter 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
.tagmodal-submit:hover { filter: brightness(0.97); transform: translateY(-1px); }
.tagmodal-submit:active { transform: translateY(0); }
.tagmodal-success { text-align: center; padding: 26px 6px 10px; }
.tagmodal-success-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 50px; height: 50px; border-radius: 9999px;
animation: tagSuccessPop 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
@keyframes tagSuccessPop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.tagmodal-overlay, .tagmodal-card, .tagmodal-tab-ind { transition: none; }
.tagmodal-success-mark { animation: none; }
}
/* "new / has an update" notification dot on the Atlas nav button + launcher */
.atlas-badge {
position: absolute; top: -3px; right: -3px;
width: 9px; height: 9px; border-radius: 9999px;
background: #34A853; box-shadow: 0 0 0 2px #fff;
}
.atlas-badge::after {
content: ''; position: absolute; inset: 0; border-radius: 9999px;
background: #34A853; animation: atlasBadge 1.8s ease-out infinite;
}
@keyframes atlasBadge {
0% { transform: scale(1); opacity: 0.6; }
70%, 100% { transform: scale(2.4); opacity: 0; }
}
/* Atlas chat — Leaflet map embeds + Google-Maps-style pulsing location dot */
.atlas-loc { position: relative; display: block; width: 22px; height: 22px; }
.atlas-loc-ring { position: absolute; inset: 0; border-radius: 9999px; opacity: 0.25; animation: atlasLoc 1.9s ease-out infinite; }
.atlas-loc-dot { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 9999px; box-shadow: 0 0 0 2.5px #fff; }
@keyframes atlasLoc { 0% { transform: scale(0.5); opacity: 0.5; } 70%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.atlas-pop, .atlas-msg, .atlas-pulse, .atlas-ping-dot, .atlas-typing span, .atlas-badge::after, .atlas-loc-ring { animation: none !important; }
}
/* Hero photo — on desktop the image is anchored bottom-right and (on ultra-wide
/ 4K) doesn't span the full width; fade its LEFT edge into the matched canvas
so it never shows a hard vertical seam. Mobile (object-cover fill) is exempt. */
@media (min-width: 768px) {
.theme-atlas .atlas-hero-photo {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 100%);
mask-image: linear-gradient(to right, transparent 0, #000 15%, #000 100%);
}
}
/* ── Docs page responsiveness ──────────────────────────────────────────────
The docs shell uses an inline `220px minmax(0,1fr)` grid (fixed sidebar +
article). On phones that squeezes the article to nothing, so below 760px we
stack: the sidebar becomes a wrap of pill links above the content, and the
article takes the full width. !important is needed to beat the inline styles. */
@media (max-width: 760px) {
.docs-cols {
grid-template-columns: minmax(0, 1fr) !important;
gap: 18px !important;
}
.docs-cols > nav {
position: static !important;
top: auto !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.docs-cols > nav > a {
border-left: 0 !important;
border: 1px solid rgba(17, 24, 39, 0.12) !important;
border-radius: 999px !important;
padding: 7px 13px !important;
}
}
/* ── Big-screen fill ───────────────────────────────────────────────────────
The homepage HERO already scales fluidly (max-width: clamp(1180px, 92vw,
1700px); heading clamp(40px, 5vw, 86px)), but every static section shell
below it caps hard at 1400px — so on 1920/2560/4K the hero stretches to
1700 while the rest of the page floats as a 1400 island. These rules let the
shells TRACK the hero: they grow on the same 92vw curve to the same 1700 cap.
max(1400px, …) means the result is exactly 1400 until ~92vw passes 1400 (≈a
1520px viewport), so at and below the approved desktop width the layout is
pixel-identical to what the employer signed off — nothing moves until the
screen is genuinely bigger than the old cap. Above that it fills out, capped
at 1700 so line lengths stay sane. Scoped to .theme-atlas + the shell pattern
(mx-auto + the width class) so it can't touch unrelated 1400/1280 elements,
and the 3-class specificity beats the utilities-layer width class regardless
of stylesheet order. */
.theme-atlas .mx-auto.max-w-\[1400px\] { max-width: max(1400px, min(92vw, 1700px)); }
.theme-atlas .mx-auto.max-w-\[1280px\] { max-width: max(1280px, min(88vw, 1560px)); }
/* ── Skip-to-content link (WCAG 2.4.1 Bypass Blocks) ───────────────────────
Visually hidden until it receives keyboard focus, then slides into the
top-left corner. Global (the link sits outside .theme-atlas, as the first
focusable element in ), so it is NOT scoped to the theme wrapper. */
.skip-link {
position: fixed; left: 12px; top: -56px; z-index: 200;
display: inline-block; padding: 10px 16px;
background: #16181A; color: #FFFFFF;
font-family: "Inter Display", Inter, system-ui, sans-serif;
font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none;
border-radius: 9px; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.45);
transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; outline: 2px solid #4EA8DA; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }
/* ==========================================================================
How It Works page — styles ported from returnme-new-design/how-it-works.html
========================================================================== */
/* ── Masthead ── */
.hiw-mast {
position: relative; overflow: hidden; isolation: isolate;
background: linear-gradient(180deg, #ffffff 0%, #f4f5f7 100%);
}
.hiw-mast__wrap {
position: relative; margin: 0 auto; max-width: 1080px; text-align: center;
padding: clamp(132px, 17vh, 200px) clamp(20px, 5vw, 40px) clamp(56px, 8vh, 88px);
}
.hiw-mast__title {
margin: 0; font-family: "Inter Display", Inter, system-ui, sans-serif;
font-weight: 700; letter-spacing: -0.04em; line-height: 1.0;
font-size: clamp(40px, 6vw, 68px); color: #16181A; text-wrap: balance;
}
.hiw-mast__lede {
margin: clamp(20px, 3vh, 26px) auto 0; max-width: 640px;
font-size: clamp(16px, 1.25vw, 18px); line-height: 1.62; color: #44454a; text-wrap: pretty;
}
.hiw-mast__trust {
margin: clamp(22px, 3vh, 30px) auto 0; max-width: 540px;
font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.6; color: #6B6B6B;
}
.hiw-mast__trust .nums { color: #16181A; font-weight: 600; }
.hiw-film__player {
position: relative; width: 100%; max-width: 900px; aspect-ratio: 16 / 9;
margin: clamp(36px, 5vh, 60px) auto 0; overflow: hidden; text-align: left;
border-radius: clamp(14px, 1.4vw, 22px); background: #05070f; cursor: pointer;
box-shadow: 0 30px 70px -40px rgba(5,7,15,0.7), inset 0 0 0 1px rgba(14,14,15,0.08);
}
.hiw-film__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; user-select: none; }
.hiw-film__scrim {
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(5,7,15,0.5) 0%, rgba(5,7,15,0) 30%),
radial-gradient(60% 60% at 50% 56%, rgba(5,7,15,0) 40%, rgba(5,7,15,0.34) 100%);
}
.hiw-film__cap {
position: absolute; top: clamp(14px, 2vw, 22px); left: clamp(14px, 2vw, 24px);
display: inline-flex; align-items: center; gap: 10px;
padding: 8px 14px; border-radius: 9999px;
background: rgba(8,10,18,0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.18);
}
.hiw-film__cap-label { font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; color: #fff; }
.hiw-film__cap-dur {
font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.72);
padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.28);
}
.hiw-film__play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
display: inline-flex; align-items: center; justify-content: center;
width: clamp(64px, 7vw, 84px); height: clamp(64px, 7vw, 84px); border-radius: 9999px;
background: rgba(255,255,255,0.95); color: #16181A; border: 0; cursor: pointer;
box-shadow: 0 14px 40px -10px rgba(0,0,0,0.5);
transition: transform 0.22s cubic-bezier(0.2,0.7,0.3,1), background 0.2s ease;
}
.hiw-film__play svg { margin-left: 4px; }
.hiw-film__player:hover .hiw-film__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.hiw-film__play:focus-visible { outline: 2px solid #C7E08B; outline-offset: 4px; }
.hiw-film__player.is-playing { cursor: default; }
.hiw-film__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .hiw-film__cap-dur { display: none; } }
@media (prefers-reduced-motion: reduce) {
.hiw-film__play, .hiw-film__player:hover .hiw-film__play { transition: none; }
}
/* ── Journey / Storyboard ── */
.hiw-jrn { background: #ffffff; padding: clamp(64px, 12vh, 150px) 0; border-top: 1px solid rgba(14,14,15,0.08); }
.hiw-jrn__wrap { margin: 0 auto; max-width: clamp(1040px, 92vw, 1320px); padding: 0 clamp(20px, 3vw, 64px); }
.hiw-jrn__head { max-width: 40rem; }
.hiw-jrn__title {
margin: 0; font-family: "Inter Display", Inter, system-ui, sans-serif;
font-weight: 700; letter-spacing: -0.04em; line-height: 1.0;
font-size: clamp(32px, 4.4vw, 56px); color: #16181A; text-wrap: balance;
}
.hiw-jrn__lede { margin: 18px 0 0; max-width: 38ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.62; color: #44454a; }
.hiw-jrn__row {
list-style: none; margin: clamp(40px, 6vh, 64px) 0 0; padding: 0;
display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3.4vh, 32px);
}
.hiw-jrn__step { display: flex; align-items: flex-start; gap: clamp(18px, 5vw, 22px); }
.hiw-jrn__copy { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.hiw-jrn__media { position: relative; flex: 0 0 auto; width: clamp(112px, 30vw, 142px); }
.hiw-jrn__frame {
position: relative; overflow: hidden; border-radius: clamp(14px, 1.4vw, 20px);
width: 100%; aspect-ratio: 440 / 887;
background: rgba(180,212,101,0.08); box-shadow: inset 0 0 0 1px rgba(14,14,15,0.08);
}
.hiw-jrn__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.hiw-jrn__num {
position: absolute; top: -9px; left: -9px;
width: 30px; height: 30px; border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
font-family: "Inter Display", Inter, system-ui, sans-serif; font-weight: 700;
font-size: 13.5px; line-height: 1; letter-spacing: -0.02em;
background: #16181A; color: #fff; box-shadow: 0 0 0 3px #ffffff;
}
.hiw-jrn__num--done { background: #5F8E1E; }
.hiw-jrn__step-title {
margin: 0; font-family: "Inter Display", Inter, system-ui, sans-serif;
font-weight: 600; letter-spacing: -0.02em; line-height: 1.18;
font-size: clamp(18px, 1.4vw, 21px); color: #16181A;
}
.hiw-jrn__step-body { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: #44454a; max-width: 34ch; }
@media (min-width: 720px) {
.hiw-jrn__row { grid-template-columns: repeat(3, 1fr); column-gap: clamp(22px, 3vw, 48px); align-items: stretch; }
.hiw-jrn__step { flex-direction: column; align-items: center; text-align: center; gap: clamp(18px, 2.2vh, 22px); }
.hiw-jrn__media { width: 100%; max-width: clamp(196px, 22vw, 252px); margin-inline: auto; }
.hiw-jrn__step-body { margin-inline: auto; }
}
/* ── Paths ── */
.hiw-paths { background: #ffffff; padding: clamp(64px, 12vh, 150px) 0; border-top: 1px solid rgba(20,20,22,0.1); }
.hiw-paths__wrap { margin: 0 auto; max-width: clamp(1040px, 90vw, 1320px); padding: 0 clamp(20px, 3vw, 64px); }
.hiw-paths__head { max-width: 40rem; }
.hiw-paths__title {
margin: 0; font-family: "Inter Display", Inter, system-ui, sans-serif;
font-weight: 700; letter-spacing: -0.04em; line-height: 1.0;
font-size: clamp(30px, 4.2vw, 52px); color: #16181a; text-wrap: balance;
}
.hiw-paths__lede { margin: 18px 0 0; max-width: 44ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.62; color: #44454a; }
.hiw-paths__cols {
margin-top: clamp(40px, 6vh, 64px);
display: grid; grid-template-columns: 1fr; gap: 0;
border-top: 1px solid rgba(20,20,22,0.14);
}
.hiw-paths__col { padding: clamp(30px, 4vh, 44px) 0; border-bottom: 1px solid rgba(20,20,22,0.14); }
@media (min-width: 820px) {
.hiw-paths__cols { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 88px); border-bottom: 0; }
.hiw-paths__col { border-bottom: 0; }
.hiw-paths__col + .hiw-paths__col { border-left: 1px solid rgba(20,20,22,0.14); padding-left: clamp(40px, 5vw, 88px); }
}
.hiw-paths__rule { display: block; width: 34px; height: 2px; border-radius: 2px; background: #B4D465; }
.hiw-paths__rule--blue { background: #4EA8DA; }
.hiw-paths__label { margin: 14px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #4A7016; }
.hiw-paths__label--blue { color: #236A96; }
.hiw-paths__col-title {
margin: 12px 0 0; font-family: "Inter Display", Inter, system-ui, sans-serif;
font-weight: 700; letter-spacing: -0.025em; line-height: 1.12;
font-size: clamp(22px, 2.2vw, 27px); color: #16181a;
}
.hiw-paths__col-body { margin: 14px 0 0; max-width: 40ch; font-size: 15px; line-height: 1.62; color: #44454a; }
.hiw-paths__list { list-style: none; margin: clamp(20px, 3vh, 28px) 0 0; padding: 0; }
.hiw-paths__list li {
display: flex; align-items: baseline; gap: 14px;
font-size: 14.5px; line-height: 1.5; color: #44454a;
padding: 11px 0; border-top: 1px solid rgba(20,20,22,0.1);
}
.hiw-paths__list li:first-child { border-top: 0; padding-top: 0; }
.hiw-paths__n {
flex-shrink: 0; width: 1.4em; font-family: "Inter Display", Inter, system-ui, sans-serif;
font-weight: 700; letter-spacing: -0.02em; font-size: 17px; line-height: 1;
}
.hiw-paths__n--green { color: #5F8E1E; }
.hiw-paths__n--blue { color: #3A8FCC; }
.hiw-paths__link {
margin: clamp(24px, 3.4vh, 32px) 0 0; display: inline-flex; align-items: center; gap: 12px;
font-size: 14px; font-weight: 600; color: #16181a; text-decoration: none;
}
.hiw-paths__link:focus-visible { outline: 2px solid #4EA8DA; outline-offset: 3px; border-radius: 3px; }
.hiw-paths__arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 9999px; color: #fff;
transition: transform 0.3s ease;
}
.hiw-paths__link:hover .hiw-paths__arrow { transform: translateX(4px); }
/* ── VS / Comparison ── */
.hiw-vs { background: #F6F5F1; padding: clamp(64px, 12vh, 150px) 0; border-top: 1px solid rgba(20,20,22,0.08); }
.hiw-vs__wrap { margin: 0 auto; max-width: clamp(1000px, 90vw, 1200px); padding: 0 clamp(20px, 3vw, 64px); }
.hiw-vs__head { max-width: 44rem; }
.hiw-vs__eyebrow { margin: 0 0 14px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: #4D6618; }
.hiw-vs__title {
margin: 0; font-family: "Inter Display", Inter, system-ui, sans-serif;
font-weight: 700; letter-spacing: -0.04em; line-height: 1.04;
font-size: clamp(28px, 4vw, 48px); color: #16181a; text-wrap: balance;
}
.hiw-vs__lede { margin: 18px 0 0; max-width: 54ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.64; color: #44454a; }
.hiw-vs__table { position: relative; margin-top: clamp(40px, 6vh, 60px); isolation: isolate; }
.hiw-vs__wash { display: none; }
.hiw-vs__rowhead { display: none; }
.hiw-vs__row {
padding: clamp(18px, 3vh, 24px) 0;
border-top: 1px solid rgba(20,20,22,0.14);
display: grid; grid-template-columns: 1fr; gap: 12px;
}
.hiw-vs__row--last { border-bottom: 1px solid rgba(20,20,22,0.14); }
.hiw-vs__c { display: block; }
.hiw-vs__val {
display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; line-height: 1.5;
padding-left: 12px; border-left: 2px solid transparent;
}
.hiw-vs__val--reg { color: #6B6B6B; border-left-color: rgba(20,20,22,0.18); }
.hiw-vs__val--rm { font-weight: 600; color: #2E3A14; border-left-color: #86A63E; }
.hiw-vs__glyph {
display: inline-block; flex: none; align-self: center;
width: 12px; height: 2px; border-radius: 2px; background: rgba(20,20,22,0.3);
transform: translateY(-1px);
}
@media (min-width: 760px) {
.hiw-vs__wash {
display: block; position: absolute; z-index: -1; top: 0; bottom: 0;
left: 50%; width: 50%; background: rgba(180,212,101,0.13);
}
.hiw-vs__rowhead {
display: grid; grid-template-columns: 50% 50%; align-items: end;
padding-bottom: clamp(16px, 2.2vh, 24px);
}
.hiw-vs__pos { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: #6B6B6B; }
.hiw-vs__pos--rm { color: #4D6618; }
.hiw-vs__name {
margin: 0; font-family: "Inter Display", Inter, system-ui, sans-serif;
font-weight: 700; letter-spacing: -0.02em; font-size: clamp(20px, 1.7vw, 24px); color: #16181a;
}
.hiw-vs__name--muted { color: #6B6B6B; }
.hiw-vs__row { grid-template-columns: 50% 50%; align-items: center; gap: 0; padding: clamp(18px, 2.4vh, 24px) 0; }
.hiw-vs__c { padding-left: clamp(18px, 2vw, 30px); padding-right: clamp(18px, 2vw, 30px); }
.hiw-vs__c--reg { padding-left: 0; }
.hiw-vs__val { font-size: 15px; padding-left: 0; border-left: 0; }
.hiw-vs__val--reg { color: #6B6B6B; }
.hiw-vs__val--rm { color: #16181a; }
}
/* ── Stats band ── */
.hiw-stats {
position: relative; overflow: hidden; isolation: isolate;
background:
radial-gradient(120% 90% at 86% 8%, rgba(78,168,218,0.10) 0%, rgba(78,168,218,0) 56%),
radial-gradient(110% 84% at 2% 100%, rgba(180,212,101,0.08) 0%, rgba(180,212,101,0) 52%),
linear-gradient(180deg, #1c1c1e 0%, #0c0c0e 100%);
padding: clamp(64px, 12vh, 150px) 0;
}
.hiw-stats__wrap { position: relative; margin: 0 auto; max-width: clamp(1040px, 90vw, 1320px); padding: 0 clamp(20px, 3vw, 64px); }
.hiw-stats__head { max-width: 40rem; }
.hiw-stats__title {
margin: 0; font-family: "Inter Display", Inter, system-ui, sans-serif;
font-weight: 700; letter-spacing: -0.04em; line-height: 1.0;
font-size: clamp(30px, 4.2vw, 54px); color: #f5f5f7; text-wrap: balance;
}
.hiw-stats__lede { margin: 16px 0 0; max-width: 42ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.62; color: rgba(255,255,255,0.72); }
.hiw-stats__grid {
margin: clamp(40px, 6vh, 68px) 0 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
border-top: 1px solid rgba(255,255,255,0.16);
}
.hiw-stats__stat { padding: clamp(22px, 3vh, 30px) 0; border-bottom: 1px solid rgba(255,255,255,0.16); }
.hiw-stats__stat:nth-child(odd) { padding-right: 18px; }
.hiw-stats__stat:nth-child(even) { padding-left: 18px; border-left: 1px solid rgba(255,255,255,0.16); }
@media (min-width: 860px) {
.hiw-stats__grid { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid rgba(255,255,255,0.16); }
.hiw-stats__stat { padding: clamp(26px, 3.4vh, 34px) 0; border-bottom: 0; }
.hiw-stats__stat:nth-child(odd) { padding-right: 0; }
.hiw-stats__stat:nth-child(even) { padding-left: 0; border-left: 0; }
.hiw-stats__stat + .hiw-stats__stat { border-left: 1px solid rgba(255,255,255,0.16); padding-left: clamp(20px, 2vw, 32px); }
}
.hiw-stats__num {
margin: 0; font-family: "Inter Display", Inter, system-ui, sans-serif;
font-weight: 700; letter-spacing: -0.035em; line-height: 0.96;
font-size: clamp(34px, 4.6vw, 56px); color: #f5f5f7;
}
.hiw-stats__lbl {
margin: 12px 0 0; font-size: 11.5px; letter-spacing: 0.13em;
text-transform: uppercase; color: rgba(255,255,255,0.62);
}