:root {
--ink: #E9EDF8;
--coal: #101828;
--coal-deep: #0B1220;
--haze: #8FB0FF;
--brand: #2451E6;
--ink-mute: #7D89A2;
/* The page surface is now dark; `cream` keeps its name so the existing
markup does not all have to be rewritten. */
--cream: #070D1B;
--haze-wash: rgba(143, 176, 255, .14);
/* Ink values for the few surfaces that stay light on purpose: the phone
notifications and the UI mock-ups inside the illustration cards. */
--on-light: #101828;
--on-light-soft: #344054;
--on-light-mute: #5A6779;
--spring: cubic-bezier(.34, 1.56, .64, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--shadow-1: 0 2px 6px rgba(2, 5, 12, .45), 0 10px 24px -8px rgba(2, 5, 12, .55);
--shadow-2: 0 4px 10px rgba(2, 5, 12, .5), 0 18px 40px -10px rgba(2, 5, 12, .65);
--shadow-3: 0 8px 18px rgba(2, 5, 12, .55), 0 32px 70px -18px rgba(2, 5, 12, .8);
}
html { scroll-behavior: smooth; overflow-x: clip; }
body {
background: var(--cream);
color: var(--ink);
font-family: 'Manrope', system-ui, sans-serif;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
/* clip, not hidden: overflow-x:hidden makes body a scroll container, which
silently stops position:sticky working for anything inside it (the hero's
marquee dock). clip does the same horizontal containment without that. */
overflow-x: clip;
}
h1, h2, h3, .font-display { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.03em; line-height: 1.08; }
::selection { background: var(--haze); color: var(--coal-deep); }
/* Grain overlay */
.grain { position: relative; isolation: isolate; }
.grain::after {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
opacity: .08; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.grain > * { position: relative; z-index: 1; }
.bg-soft {
background:
radial-gradient(46rem 28rem at 100% 0%, rgba(36, 81, 230, .22), transparent 64%),
radial-gradient(38rem 26rem at 0% 100%, rgba(143, 176, 255, .10), transparent 64%),
radial-gradient(30rem 20rem at 52% 45%, rgba(255, 209, 102, .05), transparent 72%),
var(--cream);
}
.shadow-e1 { box-shadow: var(--shadow-1); }
.shadow-e2 { box-shadow: var(--shadow-2); }
.shadow-e3 { box-shadow: var(--shadow-3); }
/* Buttons */
.btn {
display: inline-flex; align-items: center; gap: .6rem;
padding: .85rem 1.5rem; font-weight: 700; font-size: .95rem;
/* Fully rounded: the aurora has no hard corners, and the site already speaks
this shape in .priority-chip and .choice. */
border-radius: 999px;
position: relative;
isolation: isolate;
transition: transform .35s var(--spring), box-shadow .35s var(--ease-out), background-color .2s, color .2s;
will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.btn:focus-visible, .link:focus-visible, .nav-link:focus-visible, .field:focus-visible {
outline: 3px solid var(--haze); outline-offset: 3px;
}
/* Raked the same way as the shader's ribbons, so the fill reads as part of the
aurora rather than a flat swatch sitting on top of it. */
.btn-primary {
color: #fff;
background: linear-gradient(105deg, #1F49D6 0%, var(--brand) 45%, #4E77F7 100%);
box-shadow: 0 10px 28px -10px rgba(36, 81, 230, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}
/* Two gradients cannot cross-fade, so the brighter state rides in on its own
layer at z-index -1 -- opacity only, per the motion rules. */
.btn-primary::after {
content: ''; position: absolute; inset: 0; z-index: -1;
border-radius: inherit;
background: linear-gradient(105deg, var(--brand) 0%, #3A63F0 45%, #6E93FF 100%);
opacity: 0;
transition: opacity .35s var(--ease-out);
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:hover { box-shadow: 0 16px 38px -12px rgba(36, 81, 230, .85), inset 0 1px 0 rgba(255, 255, 255, .3); }
/* On a dark page a coal fill and a white fill both stopped working as the
secondary action, so both now resolve to the same glass treatment. */
.btn-dark, .btn-outline {
color: var(--ink);
background: rgba(143, 176, 255, .10);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .34), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn-dark:hover, .btn-outline:hover {
color: #fff;
background: rgba(143, 176, 255, .2);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .66), 0 14px 32px -16px rgba(36, 81, 230, .8);
}
.btn-light { background: #fff; color: var(--brand); box-shadow: 0 10px 28px -10px rgba(7, 11, 20, .45); }
.btn-light:hover { background: #F1F4FF; }
.btn .arrow { transition: transform .35s var(--spring); }
.btn:hover .arrow, .link:hover .arrow { transform: translateX(4px); }
.link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--haze); border-radius: 4px; }
.link:hover { color: #C5D5FF; }
.link:active { opacity: .7; }
.link .arrow { transition: transform .35s var(--spring); }
.nav-link { position: relative; padding: .35rem 0; font-weight: 600; border-radius: 4px; transition: color .2s; }
.nav-link::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
background: var(--haze); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link:active { opacity: .7; }
/* Header */
.site-header { transition: background-color .3s, box-shadow .3s, backdrop-filter .3s; }
.site-header.scrolled {
background: rgba(7, 13, 27, .78);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
box-shadow: 0 1px 0 rgba(143, 176, 255, .12), 0 12px 34px -16px rgba(2, 5, 12, .9);
}
.mobile-menu { transform: translateY(-8px); opacity: 0; pointer-events: none; transition: transform .35s var(--ease-out), opacity .25s; }
.mobile-menu.open { transform: none; opacity: 1; pointer-events: auto; }
/* Reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
@media (min-width: 768px) {
.reveal.from-left { transform: translateX(-40px); }
.reveal.from-right { transform: translateX(40px); }
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* Stacking service pages ----------------------------------------------------
Each service is a sheet. With .is-stacking (set by site.js when every sheet
fits the viewport) the sheets are sticky, each a little lower than the one
before, so the next page slides up over the last and their top edges pile
up like paper. --p (0..1) is how far the next page has covered this one.
-------------------------------------------------------------------------- */
.zigzag { position: relative; }
.sv-pages { display: grid; gap: 2.5rem; }
.sv-page { position: relative; }
.sv-sheet {
position: relative; overflow: hidden; padding: 1.75rem 1.5rem 1.5rem; border-radius: 1.75rem;
background: linear-gradient(180deg, #121B35, #0B1224);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .07), var(--shadow-3);
}
/* folded page corner */
.sv-sheet::after {
content: ''; position: absolute; top: 0; right: 0; width: 2.75rem; height: 2.75rem; border-bottom-left-radius: .7rem;
background: linear-gradient(225deg, var(--cream) 50%, rgba(143, 176, 255, .26) 50%, rgba(143, 176, 255, .1));
box-shadow: -4px 4px 10px rgba(2, 5, 12, .35);
}
.sv-sheet > :not(.sv-ghost):not(.sv-dim) { position: relative; z-index: 1; }
.sv-ghost {
position: absolute; right: 1.25rem; bottom: -2.2rem; z-index: 0; pointer-events: none;
font-family: 'Fraunces', Georgia, serif; font-size: clamp(8rem, 17vw, 15rem); line-height: 1; letter-spacing: -.05em;
color: transparent; -webkit-text-stroke: 1.5px rgba(143, 176, 255, .13);
}
.sv-dim {
position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
background: #050A18; opacity: 0;
}
.sv-sheet-bar {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding-bottom: 1.25rem; margin-bottom: 1.75rem; padding-right: 2.5rem;
border-bottom: 1px solid rgba(143, 176, 255, .1);
}
.sv-count { font-size: .75rem; font-weight: 800; letter-spacing: .14em; color: var(--ink-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-outcome {
display: flex; gap: .75rem; align-items: baseline; padding: .8rem 1rem; border-radius: .9rem;
background: rgba(255, 209, 102, .07); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .16); color: var(--ink);
}
.sv-outcome span { flex-shrink: 0; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sun); }
.sv-end { margin-top: 6rem; text-align: center; }
@media (min-width: 768px) {
.sv-sheet { padding: 2.5rem; }
}
@media (min-width: 1024px) {
.sv-sheet { padding: 2.75rem 3rem 3rem; }
/* Sticky stack. Scroll room between pages comes from the gap. */
.zigzag.is-stacking .sv-pages { gap: 30vh; padding-bottom: 6rem; }
.zigzag.is-stacking .sv-page {
position: sticky; top: calc(7rem + var(--i) * 1rem);
transform-origin: 50% 0;
transform: scale(calc(1 - var(--p, 0) * .06));
will-change: transform;
}
.zigzag.is-stacking .sv-dim { opacity: calc(var(--p, 0) * .55); }
.zigzag.is-stacking .sv-sheet { box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .08), 0 -18px 40px -20px rgba(2, 5, 12, .9), var(--shadow-3); }
}
@media (prefers-reduced-motion: reduce) {
.zigzag.is-stacking .sv-page { transform: none; }
}
/* Sideways gallery (data-style="gallery") ----------------------------------
.sv-gallery is as tall as the horizontal travel; .sv-stage sticks for that
whole distance and site.js slides .sv-track across it. The stage bleeds to
the full viewport width so pages can enter from the screen edge.
-------------------------------------------------------------------------- */
.sv-hud { display: none; }
@media (min-width: 1024px) {
.zigzag.is-gallery .sv-stage {
position: sticky; top: 0; height: 100vh; width: 100vw; margin-left: calc(50% - 50vw);
overflow: clip; display: flex; flex-direction: column; justify-content: center; gap: 2.25rem;
padding-top: 5rem;
}
.zigzag.is-gallery .sv-track {
--pw: min(66rem, 78vw);
display: flex; gap: 3.5rem; width: max-content; align-items: center;
padding: 0 calc((100vw - var(--pw)) / 2);
will-change: transform;
}
.zigzag.is-gallery .sv-page {
flex: 0 0 var(--pw);
opacity: .3; transform: scale(.9);
transition: opacity .7s var(--ease-out), transform .8s var(--ease-out);
}
.zigzag.is-gallery .sv-page.is-active { opacity: 1; transform: none; }
.zigzag.is-gallery .sv-sheet { padding: 2.25rem 2.75rem 2.5rem; }
.zigzag.is-gallery .sv-sheet-bar { padding-bottom: 1rem; margin-bottom: 1.25rem; }
.zigzag.is-gallery .sv-page:not(.is-active) .sv-sheet a { pointer-events: none; }
.zigzag.is-gallery .sv-hud {
display: flex; align-items: center; gap: 1.5rem;
width: min(66rem, 78vw); margin: 0 auto;
}
.sv-hud-count { font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-hud-bar { position: relative; flex: 1; height: 2px; border-radius: 99px; background: rgba(143, 176, 255, .14); overflow: hidden; }
.sv-hud-bar span {
position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
background: linear-gradient(90deg, var(--sun), var(--haze) 40%, var(--brand));
}
.sv-hud-nav { display: flex; gap: .6rem; }
.sv-hud-nav button {
width: 2.9rem; height: 2.9rem; border-radius: 999px; display: grid; place-items: center; color: var(--ink);
background: rgba(143, 176, 255, .08); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .25);
transition: transform .35s var(--spring), background-color .2s, color .2s, opacity .2s;
}
.sv-hud-nav button:hover:not(:disabled) { background: var(--brand); color: #fff; transform: translateY(-2px); }
.sv-hud-nav button:active:not(:disabled) { transform: scale(.94); }
.sv-hud-nav button:focus-visible { outline: 3px solid var(--haze); outline-offset: 3px; }
.sv-hud-nav button:disabled { opacity: .35; cursor: default; }
.zigzag.is-gallery .sv-end { margin-top: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
.zigzag.is-gallery .sv-page { transition: none; }
}
.priority-chip {
display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 999px;
font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
background: var(--haze-wash); color: var(--haze);
}
.priority-chip.top { background: rgba(255, 209, 102, .16); color: var(--sun); }
/* Illustration cards */
.ill {
position: relative; border-radius: 1.5rem; padding: 1.5rem; overflow: hidden;
background:
radial-gradient(22rem 14rem at 100% 0%, rgba(143, 176, 255, .45), transparent 60%),
radial-gradient(18rem 14rem at 0% 100%, rgba(255, 209, 102, .18), transparent 60%),
linear-gradient(150deg, #2451E6, #1A3CB8 70%);
box-shadow: var(--shadow-3);
transition: transform .6s var(--spring);
}
.ill:hover { transform: translateY(-4px) rotate(-.4deg); }
.ill-surface { background: rgba(255, 255, 255, .96); border-radius: 1rem; box-shadow: 0 20px 40px -18px rgba(16, 24, 40, .45); }
.ill-float { box-shadow: 0 18px 36px -12px rgba(16, 24, 40, .45); }
.pulse-dot { animation: pulse 2s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }
.typing span { display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: #98A2B3; animation: bob 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.bar { transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--ease-out); }
.hbar { transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
.in .bar { transform: scaleY(1); }
.in .hbar { transform: scaleX(1); }
/* Logo */
.logo {
display: inline-flex; align-items: baseline;
font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.6rem;
letter-spacing: -0.03em; line-height: 1;
}
.logo b { font-weight: 600; color: var(--haze); font-size: 1.14em; }
.logo.on-dark b { color: var(--haze); }
.hub-mark {
display: grid; place-items: center; width: 7rem; height: 7rem; border-radius: 2rem;
background: linear-gradient(140deg, #3A63F0, #1A3CB8); color: #fff;
font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 4.2rem; line-height: 1;
transform: rotate(-4deg); transition: transform .6s var(--spring);
}
.hub-mark:hover { transform: rotate(-4deg) scale(1.04); }
/* Hero */
.rotator { display: inline-block; min-height: 1.6em; }
.rotator span { display: inline-block; animation: rot-in .5s var(--ease-out) both; }
.rotator.out span { animation: rot-out .35s var(--ease-out) both; }
@keyframes rot-in { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: none; } }
@keyframes rot-out { to { opacity: 0; transform: translateY(-.5em); } }
.scene-label { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.mess-stack { display: flex; flex-direction: column; align-items: stretch; }
.mess { transition: transform .5s var(--spring); transform-origin: center; }
.mess + .mess { margin-top: -.35rem; }
.mess-1 { --r: -2.4deg; width: 92%; animation: drift 7s ease-in-out infinite; }
.mess-2 { --r: 1.8deg; width: 96%; align-self: flex-end; animation: drift 8s ease-in-out .6s infinite; z-index: 1; }
.mess-3 { --r: -1.4deg; width: 94%; animation: drift 9s ease-in-out 1.2s infinite; }
@keyframes drift {
0%, 100% { transform: translateY(0) rotate(var(--r, -2deg)); }
50% { transform: translateY(-5px) rotate(calc(var(--r, -2deg) * -.5)); }
}
.scene:hover .mess { animation-play-state: paused; }
.flow-v { position: absolute; width: 2px; height: 1.25rem; overflow: hidden; }
.flow-v::before {
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(180deg, rgba(36, 81, 230, .55) 0 6px, transparent 6px 12px);
animation: flow-down 1.4s linear infinite;
}
.flow-v-top { top: 0; }
.flow-v-bottom { bottom: 0; }
@keyframes flow-down { to { transform: translateY(12px); } }
.hub-mark { width: 4.6rem; height: 4.6rem; font-size: 2.6rem; border-radius: 1.4rem; }
.tick {
width: 1.15rem; height: 1.15rem; border-radius: 99px; background: #fff; flex: none;
position: relative; box-shadow: 0 0 0 0 rgba(255, 255, 255, .5);
}
.tick::after {
content: ''; position: absolute; left: .3rem; top: .27rem; width: .3rem; height: .55rem;
border: solid var(--brand); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg) scale(0);
transition: transform .45s var(--spring);
}
.done { opacity: 0; transform: translateX(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in .done { opacity: 1; transform: none; }
.reveal.in .done .tick::after { transform: rotate(45deg) scale(1); }
.done-1 { transition-delay: .15s; } .done-1 .tick::after { transition-delay: .45s; }
.done-2 { transition-delay: .3s; } .done-2 .tick::after { transition-delay: .6s; }
.done-3 { transition-delay: .45s; } .done-3 .tick::after { transition-delay: .75s; }
.done-4 { transition-delay: .6s; } .done-4 .tick::after { transition-delay: .9s; }
@media (prefers-reduced-motion: reduce) {
.mess, .flow-v::before { animation: none; }
}
/* Marquee */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 36s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Cards */
.card { transition: transform .5s var(--spring), box-shadow .4s var(--ease-out); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); }
/* Form */
.field {
width: 100%; border-radius: .9rem; padding: .85rem 1rem;
background: rgba(255, 255, 255, .05);
border: 1.5px solid rgba(143, 176, 255, .24); color: var(--ink);
transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field::placeholder { color: var(--ink-mute); }
.field:hover { border-color: rgba(143, 176, 255, .45); }
.field:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(143, 176, 255, .3); outline: none; }
.choice input { position: absolute; opacity: 0; }
.choice span {
display: inline-block; padding: .5rem .95rem; border-radius: 999px; cursor: pointer; font-size: .88rem; font-weight: 600;
border: 1.5px solid rgba(143, 176, 255, .24); background: rgba(255, 255, 255, .05); transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--spring);
}
.choice span:hover { border-color: var(--brand); }
.choice span:active { transform: scale(.96); }
.choice input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--haze); outline-offset: 2px; }
details summary { cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary:focus-visible { outline: 3px solid var(--haze); outline-offset: 4px; border-radius: 8px; }
details .plus { transition: transform .4s var(--spring); }
details[open] .plus { transform: rotate(45deg); }
/* ==========================================================================
AURORA
The shader hero, plus the motion language taken from it and reused
site-wide: long slow drifts, light sweeping across a surface, things
rising out of blur rather than sliding in.
========================================================================== */
:root {
--night: #050A18;
--night-deep: #03060F;
/* These two were referenced with fallbacks elsewhere in this file but never
declared; defining them keeps chips and highlights on one source. */
--sun: #FFD166;
--haze-wash: #F1F4FF;
--aurora-slow: 9s;
}
/* --- Aurora surface (hero, CTA panel, footer) ---------------------------- */
.aurora-surface {
position: relative;
isolation: isolate;
background: var(--night);
color: #fff;
}
/* Grain is inlined here rather than using .grain, because .grain > * forces
z-index 1 onto every direct child and would drag the canvas in front. */
.aurora-surface::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
opacity: .07; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* The gradient here is the no-WebGL fallback: it is what you see before
three.js loads, and all you see if it never does. */
.aurora-stage {
position: absolute; inset: 0; z-index: -2;
overflow: hidden;
background:
radial-gradient(60rem 38rem at 78% 8%, rgba(36, 81, 230, .55), transparent 62%),
radial-gradient(44rem 30rem at 12% 88%, rgba(143, 176, 255, .28), transparent 64%),
radial-gradient(30rem 22rem at 42% 52%, rgba(255, 209, 102, .12), transparent 70%),
linear-gradient(165deg, #0B1220 0%, var(--night) 60%, var(--night-deep) 100%);
}
.aurora-canvas {
position: absolute; inset: 0;
display: block;
width: 100%; height: 100%;
opacity: 0;
animation: aurora-in 1.8s var(--ease-out) forwards;
/* The shader renders opaque, so straight over the top it would hide the
gradient above. Screening it in keeps the deep navy base and lets the
ribbons read as light added to it. */
mix-blend-mode: screen;
}
@keyframes aurora-in { to { opacity: 1; } }
/* Scrim weighted toward the copy so the headline keeps contrast wherever the
ribbons happen to drift, plus a vignette to hold the edges down. */
.aurora-veil {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
linear-gradient(100deg, rgba(5, 10, 24, .86) 0%, rgba(5, 10, 24, .58) 34%, rgba(5, 10, 24, .06) 64%, transparent 100%),
radial-gradient(130% 95% at 50% 0%, transparent 46%, rgba(3, 6, 15, .55) 100%);
}
@media (max-width: 1023px) {
.aurora-veil {
background:
linear-gradient(180deg, rgba(5, 10, 24, .82) 0%, rgba(5, 10, 24, .68) 55%, rgba(5, 10, 24, .86) 100%);
}
}
/* CTA panel: copy sits left, the white button carries itself on the right. */
.aurora-veil--panel {
background:
linear-gradient(92deg, rgba(5, 10, 24, .90) 0%, rgba(5, 10, 24, .68) 46%, rgba(5, 10, 24, .26) 80%, rgba(5, 10, 24, .38) 100%);
}
/* Stacked on a phone the panel is no longer a left/right split, so the scrim
stops being horizontal too. */
@media (max-width: 767px) {
.aurora-veil--panel {
background:
linear-gradient(180deg, rgba(5, 10, 24, .86) 0%, rgba(5, 10, 24, .7) 58%, rgba(5, 10, 24, .84) 100%);
}
}
/* Centred page heroes (services) need the scrim centred too, not raked to one
side the way the split homepage hero is. */
.aurora-veil--center {
background:
radial-gradient(85% 80% at 50% 45%, rgba(5, 10, 24, .80) 0%, rgba(5, 10, 24, .66) 55%, rgba(5, 10, 24, .30) 100%),
linear-gradient(180deg, rgba(3, 6, 15, .5) 0%, transparent 35%, rgba(3, 6, 15, .45) 100%);
}
/* Footer carries a lot of small, low-contrast text, so it needs a heavier and
more even scrim than the hero, weighted to the bottom for the fine print. */
.aurora-veil--footer {
background:
linear-gradient(180deg, rgba(5, 10, 24, .5) 0%, rgba(5, 10, 24, .74) 48%, rgba(3, 6, 15, .93) 100%);
}
/* --- Aurora-swept headline ----------------------------------------------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.aurora-surface h1 .aurora-em {
color: transparent;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(100deg, var(--haze) 0%, #fff 32%, var(--sun) 64%, var(--haze) 100%);
background-size: 240% 100%;
-webkit-background-clip: text;
background-clip: text;
animation: aurora-sweep var(--aurora-slow) var(--ease-out) infinite;
}
}
@keyframes aurora-sweep {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* --- Glass button for dark surfaces -------------------------------------- */
/* Tinted with haze rather than plain white, and saturating what is behind it,
so it picks up the ribbon colour passing underneath instead of greying it. */
.btn-glass {
color: #fff;
background: rgba(143, 176, 255, .10);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
box-shadow:
inset 0 0 0 1px rgba(143, 176, 255, .38),
inset 0 1px 0 rgba(255, 255, 255, .18),
0 10px 30px -14px rgba(3, 6, 15, .9);
}
.btn-glass:hover {
background: rgba(143, 176, 255, .2);
box-shadow:
inset 0 0 0 1px rgba(143, 176, 255, .7),
inset 0 1px 0 rgba(255, 255, 255, .3),
0 16px 36px -16px rgba(36, 81, 230, .85);
}
/* --- Panels floating over the aurora ------------------------------------- */
.panel-glass {
background: rgba(255, 255, 255, .07);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -28px rgba(3, 6, 15, .95);
}
/* Balanced ragging matters far more now the hero copy is centred. */
.text-balance { text-wrap: balance; }
/* --- Header over the dark hero ------------------------------------------- */
body[data-hero='dark'] .site-header:not(.scrolled) .logo { color: #fff; }
body[data-hero='dark'] .site-header:not(.scrolled) .logo b { color: var(--haze); }
body[data-hero='dark'] .site-header:not(.scrolled) .nav-link { color: rgba(255, 255, 255, .72); }
body[data-hero='dark'] .site-header:not(.scrolled) .nav-link:hover { color: #fff; }
body[data-hero='dark'] .site-header:not(.scrolled) .nav-link::after { background: var(--haze); }
body[data-hero='dark'] .site-header:not(.scrolled) #menu-btn {
color: #fff;
background: rgba(255, 255, 255, .08);
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24);
}
/* --- Scroll cue ---------------------------------------------------------- */
.scroll-cue {
display: inline-flex; flex-direction: column; align-items: center; gap: .55rem;
padding: .5rem .8rem; border-radius: .8rem;
font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
color: rgba(255, 255, 255, .5);
transition: color .3s var(--ease-out), transform .45s var(--spring), opacity .4s var(--ease-out);
}
/* The cue has done its job once the reader scrolls, and it is exactly where
the dock slides in -- so the two hand off rather than overlapping. */
.scroll-cue.is-gone { opacity: 0; pointer-events: none; }
.scroll-cue:hover { color: #fff; transform: translateY(3px); }
.scroll-cue:active { transform: translateY(1px) scale(.96); }
.scroll-cue:focus-visible { outline: 3px solid var(--haze); outline-offset: 3px; }
.scroll-cue svg { animation: float 3.4s ease-in-out infinite; }
/* The drift from the shader, borrowed for anything that should hover. */
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.floating { animation: float 6s ease-in-out infinite; }
/* --- Surfaces -------------------------------------------------------------
.surface replaces the old white cards. Glass rather than a flat fill so the
aurora and section washes stay readable through the content.
-------------------------------------------------------------------------- */
.surface {
background: rgba(255, 255, 255, .045);
backdrop-filter: blur(14px) saturate(130%);
-webkit-backdrop-filter: blur(14px) saturate(130%);
box-shadow:
inset 0 0 0 1px rgba(143, 176, 255, .14),
inset 0 1px 0 rgba(255, 255, 255, .08),
var(--shadow-2);
}
.card.surface:hover {
background: rgba(255, 255, 255, .075);
box-shadow:
inset 0 0 0 1px rgba(143, 176, 255, .3),
inset 0 1px 0 rgba(255, 255, 255, .12),
var(--shadow-3);
}
/* Two things stay light on purpose: the phone notifications in the "day"
scene and the UI mock-ups inside the illustration cards. Both depict real
app surfaces, so they would read as wrong in glass. The ink scale is now
light, so it has to be overridden back for their contents. */
.ill-surface, .mess { color: var(--on-light); }
.ill-surface .text-ink, .mess .text-ink { color: var(--on-light); }
.ill-surface .text-ink-soft, .mess .text-ink-soft { color: var(--on-light-soft); }
.ill-surface .text-ink-mute, .mess .text-ink-mute { color: var(--on-light-mute); }
.ill-surface .bg-cream-deep, .ill-surface .bg-cream { background-color: #EEF2F8; }
.ill-surface .border-cream-deep { border-color: #E3E8F2; }
/* brand stays brand inside the light mock-ups, where it still has contrast */
.ill-surface .text-brand, .mess .text-brand { color: var(--brand); }
/* --- Marquee dock --------------------------------------------------------
Pins the channels strip to the foot of the viewport for as long as the hero
is on screen, then lets it scroll away with the hero. The tint and blur are
not decoration: hero content (the scroll cue especially) passes underneath
while it is pinned, and without them the two would collide.
-------------------------------------------------------------------------- */
.marquee-dock {
position: sticky;
bottom: 0;
z-index: 10;
background: linear-gradient(to top, rgba(5, 10, 24, .92), rgba(5, 10, 24, .66));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: opacity .4s var(--ease-out), transform .55s var(--ease-out);
}
/* The hero is taller than a laptop viewport, so at scroll 0 the pinned bar
lands exactly on the rotator line and buries it. Rather than shorten the
hero, the bar starts tucked away and slides up as soon as the reader
scrolls -- by ~90px the copy has cleared the dock zone entirely, so the two
never overlap. site.js toggles .is-tucked. */
.marquee-dock.is-tucked {
opacity: 0;
transform: translateY(100%);
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.marquee-dock { transition: none; }
}
/* --- Aurora divider ------------------------------------------------------ */
.aurora-divider {
height: 1px; border: 0; margin: 0;
background: linear-gradient(90deg, transparent, rgba(143, 176, 255, .45) 30%, rgba(255, 209, 102, .4) 62%, transparent);
}
/* --- Reveal: rising out of blur, like a ribbon resolving ----------------- */
.reveal { transition-property: opacity, transform, filter; }
.reveal.lift { transform: translateY(32px) scale(.986); filter: blur(12px); }
/* .reveal.in and .reveal.lift tie on specificity and .lift is declared later,
so the resting state has to be restated here or it never releases. */
.reveal.lift.in { opacity: 1; transform: none; filter: blur(0); }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .18s; }
.d3 { transition-delay: .28s; }
.d4 { transition-delay: .38s; }
.d5 { transition-delay: .48s; }
/* --- Sheen: a band of light crossing a surface, as the ribbons do -------- */
/* position is required here: without it the absolutely-placed sheen would
resolve against the section and sweep the whole page. */
.card, .ill { position: relative; overflow: hidden; }
.card::before, .ill::before {
content: ''; position: absolute; inset: 0; z-index: 2;
border-radius: inherit; pointer-events: none;
background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .20) 50%, transparent 58%);
opacity: 0; transform: translateX(-55%);
transition: opacity .3s var(--ease-out), transform 1s var(--ease-out);
}
.card:hover::before, .ill:hover::before { opacity: 1; transform: translateX(55%); }
@media (prefers-reduced-motion: reduce) {
.aurora-canvas { animation: none; opacity: 1; }
.aurora-surface h1 .aurora-em, .scroll-cue svg, .floating { animation: none; }
.reveal.lift { filter: none; }
.card::before, .ill::before { display: none; }
}
/* --- Interactive day scene (index #day) ----------------------------------
One switch, two states. `.is-on` on [data-day] flips everything: stacked
.day-swap children cross-fade, the tilted "messy" cards straighten, and a
scan line sweeps each card in turn (staggered by --i). Transform and
opacity only.
-------------------------------------------------------------------------- */
[data-day] { --day-step: .85s; }
.day-glow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(40rem 26rem at 78% 45%, rgba(36, 81, 230, .22), transparent 70%),
radial-gradient(22rem 16rem at 92% 80%, rgba(255, 209, 102, .07), transparent 70%);
opacity: .55; transition: opacity 2.4s var(--ease-out);
}
[data-day].is-on .day-glow { opacity: 1; }
/* Stacked states */
.day-swap { display: inline-grid; }
div.day-swap { display: grid; }
.day-swap > * { grid-area: 1 / 1; transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.day-swap > .on { opacity: 0; transform: translateY(8px); pointer-events: none; }
.day-swap > .off { transition-delay: calc(var(--i, 0) * var(--day-step) + .6s); }
[data-day].is-on .day-swap > .off { opacity: 0; transform: translateY(-8px); pointer-events: none; }
[data-day].is-on .day-swap > .on { opacity: 1; transform: none; pointer-events: auto; transition-delay: calc(var(--i, 0) * var(--day-step) + .9s); }
[data-day]:not(.is-on) .day-swap > * { transition-delay: 0s; }
/* Switch */
.day-toggle {
position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: .3rem;
border-radius: 999px; background: rgba(255, 255, 255, .05);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .18);
}
.day-toggle button {
position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .7rem 1.15rem; border-radius: 999px; font-size: .88rem; font-weight: 700; white-space: nowrap;
color: var(--ink-mute); transition: color .3s var(--ease-out), transform .3s var(--spring);
}
.day-toggle button:hover { color: var(--ink); }
.day-toggle button:active { transform: scale(.96); }
.day-toggle button:focus-visible { outline: 3px solid var(--haze); outline-offset: 2px; }
.day-toggle button[aria-pressed='true'] { color: #fff; }
.day-toggle-thumb {
position: absolute; top: .3rem; bottom: .3rem; left: .3rem; width: calc(50% - .3rem); border-radius: 999px;
background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
transition: transform .55s var(--spring);
}
.day-toggle-thumb::after {
content: ''; position: absolute; inset: 0; border-radius: inherit;
background: linear-gradient(105deg, #1F49D6, var(--brand) 45%, #4E77F7);
box-shadow: 0 8px 24px -8px rgba(36, 81, 230, .8);
opacity: 0; transition: opacity .4s var(--ease-out);
}
[data-day].is-on .day-toggle-thumb { transform: translateX(100%); }
[data-day].is-on .day-toggle-thumb::after { opacity: 1; }
.day-toggle-spark { width: .45rem; height: .45rem; border-radius: 99px; background: var(--sun); box-shadow: 0 0 10px var(--sun); }
/* Stats */
.day-stat {
padding: .9rem 1rem; border-radius: 1rem; background: rgba(255, 255, 255, .035);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .12);
}
.day-stat dt { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.day-stat dd { margin-top: .35rem; font-family: Fraunces, Georgia, serif; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.1; color: var(--ink); white-space: nowrap; }
.day-bar { height: .45rem; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.day-bar-fill {
display: block; height: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(0);
background: linear-gradient(90deg, var(--brand), var(--haze) 70%, var(--sun));
transition: transform 3.2s var(--ease-out);
}
[data-day].is-on .day-bar-fill { transform: scaleX(.94); transition-delay: .6s; }
/* Window */
.day-window {
position: relative; border-radius: 1.5rem; overflow: hidden;
background: linear-gradient(180deg, rgba(20, 30, 58, .85), rgba(10, 16, 32, .9));
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .08), var(--shadow-3);
}
.day-window-bar {
display: flex; align-items: center; gap: .9rem; padding: .95rem 1.25rem;
border-bottom: 1px solid rgba(143, 176, 255, .1); background: rgba(255, 255, 255, .025);
}
.day-dots { display: flex; gap: .4rem; }
.day-dots i { width: .6rem; height: .6rem; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.day-live {
display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .75rem; border-radius: 999px;
font-size: .75rem; font-weight: 700; color: #FDB022; background: rgba(253, 176, 34, .1);
transition: color .4s, background-color .4s;
}
.day-live-dot { position: relative; width: .45rem; height: .45rem; border-radius: 99px; background: currentColor; }
.day-live-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: currentColor; animation: pulse 2s var(--ease-out) infinite; }
[data-day].is-on .day-live { color: #6CE9A6; background: rgba(108, 233, 166, .1); }
/* Feed + timeline */
.day-feed { position: relative; padding: 1.4rem 1.25rem 1.6rem; display: grid; gap: .85rem; }
.day-feed::before {
content: ''; position: absolute; top: 1.4rem; bottom: 1.6rem; left: calc(1.25rem + 2.9rem);
width: 1px; background: linear-gradient(rgba(143, 176, 255, .05), rgba(143, 176, 255, .25), rgba(143, 176, 255, .05));
}
.day-item { position: relative; display: grid; grid-template-columns: 2.9rem 1fr; gap: 1.1rem; align-items: center; }
.day-time { font-size: .72rem; font-weight: 700; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.day-item::before {
content: ''; position: absolute; left: calc(2.9rem - .28rem); top: 50%; width: .56rem; height: .56rem; margin-top: -.28rem;
border-radius: 99px; background: #FDB022; box-shadow: 0 0 0 4px rgba(10, 16, 32, 1);
}
.day-item::after {
content: ''; position: absolute; left: calc(2.9rem - .28rem); top: 50%; width: .56rem; height: .56rem; margin-top: -.28rem;
border-radius: 99px; background: #6CE9A6; box-shadow: 0 0 12px rgba(108, 233, 166, .8);
transform: scale(0); transition: transform .8s var(--spring);
}
[data-day].is-on .day-item::after { transform: scale(1); transition-delay: calc(var(--i) * var(--day-step) + 1s); }
.day-card {
position: relative; overflow: hidden; display: flex; align-items: center; gap: .9rem;
padding: .95rem 1rem; border-radius: 1rem; background: rgba(255, 255, 255, .045);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .12), var(--shadow-1);
transform: translateX(var(--x, 0)) rotate(var(--r, 0));
transition: transform 1.3s var(--spring);
}
/* resolved outline, faded in rather than animating box-shadow */
.day-card::before {
content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(108, 233, 166, .35);
background: linear-gradient(100deg, rgba(36, 81, 230, .16), transparent 60%);
opacity: 0; transition: opacity .9s var(--ease-out);
}
/* scan line */
.day-card::after {
content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(143, 176, 255, .35), transparent);
transform: translateX(-120%); opacity: 0;
}
[data-day].is-on .day-card { transform: none; transition-delay: calc(var(--i) * var(--day-step) + .6s); }
[data-day].is-on .day-card::before { opacity: 1; transition-delay: calc(var(--i) * var(--day-step) + .9s); }
[data-day].is-on .day-card::after { animation: day-scan 1.4s var(--ease-out) calc(var(--i) * var(--day-step)) both; }
@keyframes day-scan {
0% { transform: translateX(-120%); opacity: 1; }
85% { opacity: 1; }
100% { transform: translateX(300%); opacity: 0; }
}
.day-chan { width: 2.4rem; height: 2.4rem; flex-shrink: 0; display: grid; place-items: center; border-radius: .75rem; }
.day-chan--green { color: #6CE9A6; background: rgba(108, 233, 166, .12); }
.day-chan--pink { color: #F7A4D0; background: rgba(247, 144, 202, .12); }
.day-chan--amber { color: #FDB022; background: rgba(253, 176, 34, .12); }
.day-chan--blue { color: var(--haze); background: rgba(143, 176, 255, .14); }
.day-body { position: relative; min-width: 0; flex: 1; }
.day-src { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.day-title { margin-top: .15rem; font-size: .95rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.day-meta { margin-top: .1rem; font-size: .8rem; line-height: 1.4; color: var(--ink-mute); }
.day-meta--risk { color: #FDA29B; }
.day-reply { margin-top: .1rem; font-size: .8rem; line-height: 1.4; color: #AAB5CC; font-style: italic; }
.day-state { position: relative; flex-shrink: 0; justify-items: end; }
.day-tag { padding: .28rem .6rem; border-radius: .5rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.day-tag--warn { color: #FDB022; background: rgba(253, 176, 34, .1); }
.day-tag--risk { color: #FDA29B; background: rgba(240, 68, 56, .14); }
.day-tag--ok { color: #6CE9A6; background: rgba(108, 233, 166, .1); }
.day-tag--sun { color: var(--sun); background: rgba(255, 209, 102, .12); }
@media (max-width: 520px) {
.day-feed { padding: 1.1rem .9rem 1.3rem; }
.day-feed::before, .day-item::before, .day-item::after, .day-time { display: none; }
.day-item { grid-template-columns: 1fr; }
.day-card { padding: .85rem; gap: .75rem; transform: translateX(calc(var(--x, 0px) * .35)) rotate(var(--r, 0)); }
.day-toggle button { padding: .65rem .8rem; font-size: .8rem; }
.day-stat { padding: .75rem .7rem; }
}
@media (prefers-reduced-motion: reduce) {
.day-card, .day-card::after, .day-swap > *, .day-bar-fill, .day-toggle-thumb, .day-item::after { transition: none !important; animation: none !important; }
}
/* --- How it works: sticky dial + illustrated steps (index [data-process]) --
process.js sets .is-on on the step nearest the middle of the screen and
mirrors it into the dial (ring fill, number, title) and the jump links.
-------------------------------------------------------------------------- */
.pr-dial-wrap { display: none; }
.pr-jump { display: none; }
.pr-steps { display: grid; gap: 1.5rem; }
.pr-card {
position: relative; overflow: hidden; padding: 1.75rem; border-radius: 1.75rem;
background: linear-gradient(180deg, #131C36, #0C1326);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .07), var(--shadow-2);
}
.pr-card--brand {
background:
radial-gradient(26rem 16rem at 100% 0%, rgba(143, 176, 255, .35), transparent 60%),
linear-gradient(150deg, #2C5AF0, var(--brand) 55%, #1A3CB8);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .2), var(--shadow-3);
}
.pr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pr-num { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; font-weight: 600; color: var(--haze); letter-spacing: -.02em; }
.pr-card--brand .pr-num { color: var(--sun); }
.pr-when {
padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap;
color: var(--ink-soft, #AAB5CC); background: rgba(143, 176, 255, .08); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .16);
}
.pr-card--brand .pr-when { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pr-vis { margin-top: 1.5rem; }
.pr-vis > div {
padding: 1.1rem 1.2rem; border-radius: 1.1rem;
background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .12);
}
.pr-card--brand .pr-vis > div { background: rgba(7, 13, 27, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
/* 01 call */
.pr-avatar {
width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: 999px; display: grid; place-items: center;
font-size: .72rem; font-weight: 800; color: var(--ink); background: rgba(143, 176, 255, .14);
}
.pr-avatar--brand { font-family: 'Fraunces', serif; font-size: 1.05rem; color: #fff; background: var(--brand); }
.pr-wave { flex: 1; height: 2.2rem; display: flex; align-items: center; justify-content: center; gap: 4px; }
.pr-wave i {
width: 3px; height: 100%; border-radius: 3px; background: linear-gradient(var(--haze), var(--brand));
transform: scaleY(.2); transform-origin: center;
}
.pr-step.is-on .pr-wave i { animation: pr-wave 1.2s ease-in-out infinite; }
.pr-wave i:nth-child(3n) { animation-delay: -.3s !important; }
.pr-wave i:nth-child(3n+1) { animation-delay: -.7s !important; }
.pr-wave i:nth-child(4n) { animation-duration: .9s !important; }
@keyframes pr-wave { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
.pr-live-dot { position: relative; width: .5rem; height: .5rem; border-radius: 99px; background: #6CE9A6; }
.pr-live-dot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pulse 2s var(--ease-out) infinite; }
.pr-note { padding: .3rem .6rem; border-radius: .5rem; font-size: .72rem; font-weight: 600; color: var(--sun); background: rgba(255, 209, 102, .09); }
/* 02 plan */
.pr-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.pr-chip--sun { color: var(--on-light); background: var(--sun); }
.pr-chip--live { color: #fff; background: rgba(255, 255, 255, .16); }
.pr-doc-row {
display: flex; align-items: center; gap: .7rem; font-size: .85rem; color: var(--ink);
padding: .55rem .7rem; border-radius: .7rem; background: rgba(255, 255, 255, .03);
}
.pr-doc-row b {
width: 1.4rem; height: 1.4rem; flex-shrink: 0; border-radius: .45rem; display: grid; place-items: center;
font-size: .7rem; color: var(--haze); background: rgba(143, 176, 255, .14);
}
.pr-doc-row span { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--ink-mute); white-space: nowrap; }
/* 03 tests: ticks land one by one once the step is active */
.pr-tests-bar { height: .3rem; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pr-tests-bar span {
display: block; height: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(0);
background: linear-gradient(90deg, var(--haze), #6CE9A6); transition: transform 2.4s var(--ease-out);
}
.pr-step.was-on .pr-tests-bar span { transform: scaleX(1); }
.pr-test { display: flex; align-items: center; gap: .65rem; font-size: .85rem; color: var(--ink-mute); transition: color .4s; }
.pr-tick {
position: relative; width: 1.15rem; height: 1.15rem; flex-shrink: 0; border-radius: 99px;
box-shadow: inset 0 0 0 1.5px rgba(143, 176, 255, .3);
}
.pr-tick::before {
content: ''; position: absolute; inset: 0; border-radius: inherit; background: #6CE9A6;
transform: scale(0); transition: transform .45s var(--spring);
}
.pr-tick::after {
content: ''; position: absolute; left: .4rem; top: .24rem; width: .3rem; height: .55rem;
border: solid #0B1224; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0);
transition: transform .35s var(--spring);
}
.pr-step.was-on .pr-test { color: var(--ink); transition-delay: calc(var(--d) * .55s + .3s); }
.pr-step.was-on .pr-tick::before { transform: scale(1); transition-delay: calc(var(--d) * .55s + .3s); }
.pr-step.was-on .pr-tick::after { transform: rotate(45deg) scale(1); transition-delay: calc(var(--d) * .55s + .45s); }
.pr-tests-count b { color: #6CE9A6; }
/* 04 live */
.pr-bars { height: 4.5rem; display: flex; align-items: flex-end; gap: .4rem; }
.pr-bars i {
flex: 1; height: 100%; border-radius: .35rem .35rem .15rem .15rem; transform-origin: bottom;
background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .35));
transform: scaleY(.08); transition: transform 1s var(--ease-out);
}
.pr-bars i:last-child { background: linear-gradient(var(--sun), rgba(255, 209, 102, .5)); }
.pr-step.was-on .pr-bars i { transform: scaleY(var(--h)); }
.pr-kpi { padding: .55rem .3rem; border-radius: .7rem; font-size: .68rem; color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); }
.pr-kpi b { display: block; font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 600; color: #fff; }
@media (min-width: 1024px) {
.pr-dial-col { position: sticky; top: 7.5rem; }
.pr-dial-wrap { display: flex; align-items: center; gap: 2rem; margin-top: 3rem; }
.pr-jump { display: flex; gap: .5rem; margin-top: 2.25rem; }
.pr-steps { gap: 7rem; padding: 2rem 0 6rem; }
.pr-card { padding: 2.25rem; }
.pr-step .pr-card { opacity: .4; transform: scale(.97); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); }
.pr-step .pr-card.reveal:not(.in) { opacity: 0; transform: translateY(28px); }
.pr-step.is-on .pr-card.in { opacity: 1; transform: none; }
}
.pr-dial { position: relative; width: 220px; height: 220px; flex-shrink: 0; }
.pr-dial svg { transform: rotate(-90deg); }
.pr-ring-track { fill: none; stroke: rgba(143, 176, 255, .1); stroke-width: 6; }
.pr-ring {
fill: none; stroke: url(#pr-grad); stroke-width: 6; stroke-linecap: round;
stroke-dasharray: 603.2; stroke-dashoffset: 452.4;
transition: stroke-dashoffset 1s var(--ease-out);
}
.pr-dial-num { position: absolute; inset: 0; display: grid; place-items: center; }
.pr-dial-num span, .pr-dial-swap p {
grid-area: 1 / 1; opacity: 0; transform: translateY(14px);
transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
.pr-dial-num span { font-family: 'Fraunces', Georgia, serif; font-size: 4.75rem; line-height: 1; letter-spacing: -.04em; color: var(--ink); margin-top: -.6rem; }
.pr-dial-num span.is-on, .pr-dial-swap p.is-on { opacity: 1; transform: none; }
.pr-dial-of { position: absolute; left: 0; right: 0; bottom: 3.6rem; text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.pr-dial-kicker { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--haze); }
.pr-dial-swap { display: grid; margin-top: .4rem; }
.pr-dial-swap p { font-family: 'Fraunces', Georgia, serif; font-size: 1.6rem; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); }
.pr-dial-swap span { display: block; margin-top: .35rem; font-family: 'Manrope', sans-serif; font-size: .85rem; letter-spacing: 0; color: var(--ink-mute); }
.pr-jump a {
width: 3rem; height: 2.4rem; display: grid; place-items: center; border-radius: 999px;
font-size: .8rem; font-weight: 800; color: var(--ink-mute);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .2);
transition: color .3s, background-color .3s, transform .35s var(--spring);
}
.pr-jump a:hover { color: var(--ink); transform: translateY(-2px); }
.pr-jump a:active { transform: scale(.95); }
.pr-jump a:focus-visible { outline: 3px solid var(--haze); outline-offset: 3px; }
.pr-jump a.is-on { color: #fff; background: var(--brand); box-shadow: 0 8px 20px -8px rgba(36, 81, 230, .8); }
@media (prefers-reduced-motion: reduce) {
.pr-wave i, .pr-live-dot::after { animation: none !important; }
.pr-step .pr-card, .pr-ring, .pr-dial-num span, .pr-dial-swap p { transition: none !important; }
}
/* --- CTA booking card (index) --------------------------------------------- */
.cta-pill {
display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-radius: 999px;
font-size: .85rem; font-weight: 600; color: #fff;
background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.cta-pill svg { color: var(--sun); }
.cta-book {
position: relative; padding: 1.5rem; border-radius: 1.5rem;
background: linear-gradient(180deg, rgba(19, 28, 54, .92), rgba(10, 16, 32, .94));
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 70px -20px rgba(2, 5, 12, .9);
transform: rotate(-1.2deg); transition: transform .8s var(--spring);
}
.cta-book:hover, .cta-book:focus-within { transform: none; }
.cta-mark {
width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: .9rem; display: grid; place-items: center;
font-family: 'Fraunces', Georgia, serif; font-size: 1.4rem; font-weight: 600; color: #fff;
background: linear-gradient(150deg, #3A63F0, var(--brand)); box-shadow: 0 8px 20px -8px rgba(36, 81, 230, .9);
}
.cta-dur { flex-shrink: 0; white-space: nowrap; padding: .3rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 800; color: var(--on-light); background: var(--sun); }
.cta-legend { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--haze); }
.cta-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.cta-days button {
display: grid; justify-items: center; gap: .1rem; padding: .6rem .2rem .7rem; border-radius: .9rem;
color: var(--ink); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .16);
transition: transform .35s var(--spring), background-color .25s, color .25s, box-shadow .25s;
}
.cta-days button small { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); transition: color .25s; }
.cta-days button b { font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.cta-days button span { font-size: .66rem; color: var(--ink-mute); transition: color .25s; }
.cta-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.cta-times button {
padding: .6rem 0; border-radius: .8rem; font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums;
color: var(--ink); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .16);
transition: transform .35s var(--spring), background-color .25s, color .25s, box-shadow .25s;
}
.cta-days button:hover, .cta-times button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .5); }
.cta-days button:active, .cta-times button:active { transform: scale(.95); }
.cta-days button:focus-visible, .cta-times button:focus-visible { outline: 3px solid var(--haze); outline-offset: 2px; }
.cta-days button[aria-pressed='true'], .cta-times button[aria-pressed='true'] {
color: #fff; background: var(--brand); box-shadow: 0 10px 24px -10px rgba(36, 81, 230, .9), inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.cta-days button[aria-pressed='true'] small, .cta-days button[aria-pressed='true'] span { color: rgba(255, 255, 255, .8); }
.cta-go { width: 100%; justify-content: center; padding-top: 1rem; padding-bottom: 1rem; font-size: 1rem; }
.cta-go [data-go-label] { display: inline-block; }
.cta-go.bump [data-go-label] { animation: cta-bump .45s var(--spring); }
@keyframes cta-bump { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (min-width: 640px) { .cta-book { padding: 1.9rem; } }
@media (max-width: 420px) {
.cta-book { padding: 1.15rem; }
.cta-go { padding-left: 1rem; padding-right: 1rem; font-size: .9rem; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
.cta-book { transform: none; transition: none; }
.cta-go.bump [data-go-label] { animation: none; }
}
/* --- About page (about.html, driven by assets/about.js) -------------------- */
/* Hero size slider */
.ab-dots { display: grid; grid-template-columns: repeat(12, .7rem); justify-content: space-between; row-gap: .6rem; }
.ab-dots i {
aspect-ratio: 1; border-radius: 99px; background: rgba(255, 255, 255, .1);
transform: scale(.7); transition: transform .5s var(--spring), background-color .4s, box-shadow .4s;
transition-delay: var(--dl, 0s);
}
.ab-dots i.on { background: var(--haze); transform: none; box-shadow: 0 0 10px rgba(143, 176, 255, .6); }
.ab-dots i.on.me { background: var(--sun); box-shadow: 0 0 12px rgba(255, 209, 102, .7); }
.ab-range {
-webkit-appearance: none; appearance: none; width: 100%; height: .4rem; border-radius: 99px; cursor: pointer;
background: linear-gradient(90deg, var(--sun), var(--haze) var(--v, 0%), rgba(255, 255, 255, .14) var(--v, 0%));
}
.ab-range::-webkit-slider-thumb {
-webkit-appearance: none; width: 1.4rem; height: 1.4rem; border-radius: 99px; background: #fff;
box-shadow: 0 0 0 5px rgba(143, 176, 255, .3), 0 4px 12px rgba(2, 5, 12, .5); transition: transform .3s var(--spring);
}
.ab-range::-moz-range-thumb {
width: 1.4rem; height: 1.4rem; border: 0; border-radius: 99px; background: #fff;
box-shadow: 0 0 0 5px rgba(143, 176, 255, .3), 0 4px 12px rgba(2, 5, 12, .5);
}
.ab-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.ab-range:active::-webkit-slider-thumb { transform: scale(.95); }
.ab-range:focus-visible { outline: 3px solid var(--haze); outline-offset: 6px; }
.ab-ticks { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 700; color: rgba(255, 255, 255, .45); }
.ab-size-line { min-height: 3.2em; font-size: .95rem; color: rgba(255, 255, 255, .85); }
.ab-size-line [data-size-text] { display: inline; }
.ab-size-line.swap [data-size-text] { animation: ab-in .45s var(--ease-out); }
@keyframes ab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Story visual: stacked scenes */
.ab-vis {
position: relative; display: grid; min-height: 24rem; padding: 1.75rem; border-radius: 1.75rem; overflow: hidden;
background:
radial-gradient(22rem 14rem at 100% 0%, rgba(143, 176, 255, .22), transparent 60%),
linear-gradient(180deg, #131C36, #0C1326);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .14), var(--shadow-3);
}
.ab-scene { grid-area: 1 / 1; align-self: center; opacity: 0; transform: translateY(14px); pointer-events: none;
transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.ab-scene.is-on { opacity: 1; transform: none; transition-delay: .15s; }
.ab-scene-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--haze); }
.ab-noti {
display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; border-radius: 1rem;
background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .12);
opacity: 0; transform: translateY(10px) rotate(calc(var(--d) * .8deg - 1deg));
transition: opacity .45s var(--ease-out), transform .6s var(--spring);
}
.ab-scene.is-on .ab-noti { opacity: 1; transform: rotate(calc(var(--d) * .8deg - 1deg)); transition-delay: calc(var(--d) * .12s + .25s); }
.ab-noti div { flex: 1; min-width: 0; line-height: 1.3; }
.ab-noti b { display: block; font-size: .9rem; color: var(--ink); }
.ab-noti small { font-size: .75rem; color: var(--ink-mute); }
.ab-noti-ic { width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: .7rem; display: grid; place-items: center; }
.ab-ic-green { color: #6CE9A6; background: rgba(108, 233, 166, .12); }
.ab-ic-amber { color: #FDB022; background: rgba(253, 176, 34, .12); }
.ab-ic-blue { color: var(--haze); background: rgba(143, 176, 255, .14); }
.ab-ic-red { color: #FDA29B; background: rgba(240, 68, 56, .14); }
.ab-noti em { font-style: normal; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 99px; display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: #fff; }
.ab-badge-red { background: #E5484D; }
.ab-badge-amber { background: #F79009; }
.ab-orbit { position: relative; height: 17rem; }
.ab-hub {
position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; margin: -2.25rem 0 0 -2.25rem;
border-radius: 1.4rem; display: grid; place-items: center; font-family: 'Fraunces', serif; font-size: 2.2rem; font-weight: 600; color: #fff;
background: linear-gradient(150deg, #3A63F0, var(--brand)); box-shadow: 0 0 0 10px rgba(36, 81, 230, .15), 0 0 50px rgba(36, 81, 230, .6);
transform: scale(.6); transition: transform .7s var(--spring);
}
.ab-scene.is-on .ab-hub { transform: none; transition-delay: .2s; }
.ab-tool {
position: absolute; left: 50%; top: 50%; padding: .4rem .75rem; border-radius: 999px; white-space: nowrap;
font-size: .78rem; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .22);
/* start scattered far out, settle into a ring around the hub */
transform: translate(-50%, -50%) rotate(var(--a)) translateY(-11rem) rotate(calc(var(--a) * -1)) scale(.8); opacity: 0;
transition: transform .9s var(--spring), opacity .5s var(--ease-out);
}
.ab-scene.is-on .ab-tool { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-6.6rem) rotate(calc(var(--a) * -1)); opacity: 1; transition-delay: .35s; }
.ab-done {
display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: .9rem; font-size: .9rem; color: var(--ink);
background: rgba(108, 233, 166, .06); box-shadow: inset 0 0 0 1px rgba(108, 233, 166, .16);
opacity: 0; transform: translateX(12px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
.ab-scene.is-on .ab-done { opacity: 1; transform: none; transition-delay: calc(var(--d) * .15s + .3s); }
.ab-done b { margin-left: auto; font-size: .78rem; color: var(--sun); }
.ab-check { position: relative; width: 1.15rem; height: 1.15rem; flex-shrink: 0; border-radius: 99px; background: #6CE9A6; }
.ab-check::after { content: ''; position: absolute; left: .4rem; top: .24rem; width: .3rem; height: .55rem; border: solid #0B1224; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Story tabs */
.ab-tabs {
position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: .3rem; border-radius: 999px;
background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .18);
}
.ab-tabs button {
position: relative; z-index: 1; padding: .65rem 1.1rem; border-radius: 999px; font-size: .9rem; font-weight: 700; white-space: nowrap;
color: var(--ink-mute); transition: color .3s, transform .3s var(--spring);
}
.ab-tabs button:hover { color: var(--ink); }
.ab-tabs button:active { transform: scale(.96); }
.ab-tabs button:focus-visible { outline: 3px solid var(--haze); outline-offset: 2px; }
.ab-tabs button[aria-selected='true'] { color: #fff; }
.ab-tabs-thumb {
position: absolute; top: .3rem; bottom: .3rem; left: .3rem; width: calc((100% - .6rem) / 3); border-radius: 999px;
background: linear-gradient(105deg, #1F49D6, var(--brand) 45%, #4E77F7); box-shadow: 0 8px 22px -8px rgba(36, 81, 230, .8);
transform: translateX(calc(var(--t, 0) * 100%)); transition: transform .55s var(--spring);
}
@media (max-width: 480px) {
.ab-tabs { display: grid; width: 100%; }
.ab-tabs button { padding: .6rem .4rem; font-size: .8rem; }
}
.ab-panels { display: grid; min-height: 7.5rem; }
.ab-panel { grid-area: 1 / 1; }
.ab-panel.is-on { animation: ab-in .5s var(--ease-out); }
/* Mission words */
.ab-mission { line-height: 1.15; letter-spacing: -.03em; color: var(--ink); }
.ab-mission .w { opacity: .14; transition: opacity .35s var(--ease-out); }
.ab-mission .w.lit { opacity: 1; }
.ab-mission em .w.lit { color: var(--haze); }
/* Value flip cards */
.ab-hint-ic { display: inline-block; margin-right: .35rem; color: var(--haze); animation: ab-spin 3s var(--ease-out) infinite; }
@keyframes ab-spin { 0%, 60% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.ab-flip { display: block; width: 100%; height: 17rem; perspective: 1200px; text-align: left; border-radius: 1.5rem; }
.ab-flip:focus-visible { outline: 3px solid var(--haze); outline-offset: 4px; }
.ab-flip-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s var(--spring); }
.ab-flip[aria-pressed='true'] .ab-flip-inner { transform: rotateY(180deg); }
@media (hover: hover) { .ab-flip:hover .ab-flip-inner { transform: rotateY(180deg); } }
.ab-face {
position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.75rem; border-radius: 1.5rem;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
background: linear-gradient(180deg, #131C36, #0C1326);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .14), var(--shadow-2);
}
.ab-back {
transform: rotateY(180deg); justify-content: center;
background: radial-gradient(18rem 12rem at 100% 0%, rgba(143, 176, 255, .28), transparent 60%), linear-gradient(160deg, #1B2A58, #111A38);
}
.ab-flip--brand .ab-front { background: linear-gradient(150deg, #2C5AF0, var(--brand) 55%, #1A3CB8); }
.ab-flip--brand .ab-back { background: linear-gradient(160deg, #FFD166, #F5B93A); }
.ab-val { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 2.4rem; line-height: 1.1; color: var(--haze); }
.ab-flip--brand .ab-val { color: var(--sun); }
.ab-turn { margin-top: auto; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.ab-flip--brand .ab-turn { color: rgba(255, 255, 255, .7); }
.ab-back-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--haze); }
.ab-back-list { display: grid; gap: .7rem; margin-top: 1rem; }
.ab-back-list span { position: relative; padding-left: 1.5rem; font-size: .95rem; line-height: 1.4; color: var(--ink); }
.ab-back-list span::before { content: ''; position: absolute; left: 0; top: .45em; width: .6rem; height: .6rem; border-radius: 99px; background: var(--sun); }
.ab-flip--brand .ab-back-kicker { color: var(--on-light-soft); }
.ab-flip--brand .ab-back-list span { color: var(--on-light); }
.ab-flip--brand .ab-back-list span::before { background: var(--brand); }
@media (prefers-reduced-motion: reduce) {
.ab-flip-inner, .ab-scene, .ab-noti, .ab-tool, .ab-hub, .ab-done, .ab-dots i, .ab-tabs-thumb { transition: none !important; }
.ab-hint-ic { animation: none; }
}
/* --- Contact page (contact.html, driven by assets/contact.js) -------------- */
.ct-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.ct-progress li { display: flex; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 700; color: var(--ink-mute); transition: color .3s; }
.ct-progress li span {
width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: 99px; display: grid; place-items: center; font-size: .75rem; font-weight: 800;
color: var(--ink-mute); box-shadow: inset 0 0 0 1.5px rgba(143, 176, 255, .28);
transition: background-color .3s, color .3s, box-shadow .3s, transform .45s var(--spring);
}
.ct-progress li.is-on { color: var(--ink); }
.ct-progress li.is-on span { color: #fff; background: var(--brand); box-shadow: 0 0 0 4px rgba(143, 176, 255, .18); transform: scale(1.08); }
.ct-progress li.is-done span { color: var(--on-light); background: #6CE9A6; box-shadow: none; }
.ct-bar { height: 3px; border-radius: 99px; background: rgba(143, 176, 255, .12); overflow: hidden; }
.ct-bar span {
display: block; height: 100%; border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, .333));
background: linear-gradient(90deg, var(--sun), var(--haze), var(--brand)); transition: transform .7s var(--ease-out);
}
.ct-step { min-width: 0; }
.ct-step.is-on { animation: ct-in .55s var(--ease-out); }
.ct-step.back.is-on { animation-name: ct-in-back; }
@keyframes ct-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes ct-in-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.ct-q { font-family: 'Fraunces', Georgia, serif; font-size: 1.6rem; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.ct-quick { display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-quick button {
padding: .45rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--sun);
background: rgba(255, 209, 102, .08); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .22);
transition: transform .35s var(--spring), background-color .2s, color .2s;
}
.ct-quick button::before { content: '+ '; }
.ct-quick button:hover { background: rgba(255, 209, 102, .16); transform: translateY(-2px); }
.ct-quick button:active { transform: scale(.95); }
.ct-quick button:focus-visible { outline: 3px solid var(--haze); outline-offset: 2px; }
.ct-quick button.used { color: var(--on-light); background: var(--sun); }
.ct-quick button.used::before { content: '✓ '; }
.ct-seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.ct-seg label { position: relative; }
.ct-seg input { position: absolute; opacity: 0; pointer-events: none; }
.ct-seg span {
display: inline-block; padding: .65rem 1.1rem; border-radius: 999px; cursor: pointer; font-size: .9rem; font-weight: 700; color: var(--ink);
background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px rgba(143, 176, 255, .24);
transition: background-color .2s, color .2s, box-shadow .2s, transform .35s var(--spring);
}
.ct-seg span:hover { box-shadow: inset 0 0 0 1.5px var(--brand); transform: translateY(-1px); }
.ct-seg input:checked + span { color: #fff; background: var(--brand); box-shadow: 0 8px 20px -8px rgba(36, 81, 230, .8); }
.ct-seg input:focus-visible + span { outline: 3px solid var(--haze); outline-offset: 2px; }
.ct-back {
display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
color: var(--ink-soft, #AAB5CC); transition: color .2s, background-color .2s, transform .3s var(--spring);
}
.ct-back:hover { color: var(--ink); background: rgba(143, 176, 255, .08); }
.ct-back:active { transform: scale(.96); }
.ct-back:focus-visible { outline: 3px solid var(--haze); outline-offset: 2px; }
/* Ticket */
.ct-ticket {
position: relative; border-radius: 1.75rem; overflow: hidden;
background: linear-gradient(180deg, #131C36, #0C1326);
box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .16), var(--shadow-3);
}
.ct-ticket-top {
display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.6rem;
background: radial-gradient(20rem 10rem at 100% 0%, rgba(143, 176, 255, .35), transparent 60%), linear-gradient(150deg, #2C5AF0, var(--brand) 55%, #1A3CB8);
}
.ct-mark {
width: 2.75rem; height: 2.75rem; flex-shrink: 0; border-radius: .9rem; display: grid; place-items: center;
font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 600; color: var(--brand); background: #fff;
}
.ct-status {
flex-shrink: 0; padding: .3rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
color: #fff; background: rgba(255, 255, 255, .16);
}
.ct-perf {
position: relative; height: 0; border-top: 2px dashed rgba(143, 176, 255, .22); margin: 0 1.1rem;
}
.ct-perf::before, .ct-perf::after {
content: ''; position: absolute; top: -.8rem; width: 1.5rem; height: 1.5rem; border-radius: 99px; background: var(--cream);
}
.ct-perf::before { left: -1.9rem; }
.ct-perf::after { right: -1.9rem; }
.ct-ticket-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; padding: 1.5rem 1.6rem 1.7rem; }
.ct-ticket-body dt { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.ct-ticket-body dd { margin-top: .25rem; font-size: .95rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ct-ticket-body dd.flash { animation: ct-flash .6s var(--ease-out); }
@keyframes ct-flash { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ct-quote { font-weight: 500 !important; font-style: italic; color: var(--ink-soft, #AAB5CC) !important;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ct-tag { display: inline-block; margin: 0 .3rem .35rem 0; padding: .2rem .55rem; border-radius: .5rem; font-size: .75rem; font-weight: 700; color: var(--haze); background: rgba(143, 176, 255, .12); }
.ct-stamp {
position: absolute; right: 1.4rem; bottom: 1.3rem; padding: .35rem .9rem; border: 3px solid #6CE9A6; border-radius: .7rem;
font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 700; color: #6CE9A6;
transform: rotate(-12deg) scale(2); opacity: 0; transition: transform .6s var(--spring), opacity .3s;
}
.ct-ticket.is-sent .ct-stamp { transform: rotate(-12deg); opacity: 1; }
.ct-ticket.is-sent .ct-status { color: var(--on-light); background: #6CE9A6; }
.ct-n { width: 1.6rem; height: 1.6rem; flex-shrink: 0; border-radius: 99px; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: var(--sun); background: rgba(255, 209, 102, .12); }
.ct-success-mark { position: relative; width: 5rem; height: 5rem; border-radius: 99px; background: #6CE9A6; box-shadow: 0 0 0 10px rgba(108, 233, 166, .15), 0 0 40px rgba(108, 233, 166, .4); animation: ct-pop .6s var(--spring); }
.ct-success-mark span { position: absolute; left: 1.85rem; top: 1.2rem; width: 1.15rem; height: 2.1rem; border: solid #0B1224; border-width: 0 5px 5px 0; transform: rotate(45deg); }
@keyframes ct-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 520px) {
.ct-progress li { font-size: 0; gap: 0; justify-content: center; }
.ct-progress li span { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
.ct-step.is-on, .ct-ticket-body dd.flash, .ct-success-mark { animation: none; }
.ct-stamp { transition: none; }
}
/* Services story (data-style="story") ---------------------------------------
A nav bar sticks under the site header with a progress line along its
bottom edge. Services are open rows (no card boxes) split by hairlines:
a big outlined numeral and copy on one side, a glowing, slightly tilted
illustration on the other that straightens when its row is current.
-------------------------------------------------------------------------- */
.st { position: relative; }
.st-index {
position: sticky; top: 5rem; z-index: 20; margin: 0 -1.25rem; padding: .65rem 1.25rem;
background: rgba(7, 13, 27, .8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.st-list { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.st-list::-webkit-scrollbar { display: none; }
.st-list li { flex-shrink: 0; }
.st-dot { display: none; }
.st-link {
display: inline-flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; white-space: nowrap;
padding: .55rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: #AAB5CC;
transition: background-color .25s, color .25s, box-shadow .25s, transform .35s var(--spring);
}
.st-link:hover { color: var(--ink); background: rgba(143, 176, 255, .1); }
.st-link:active { transform: scale(.96); }
.st-link:focus-visible { outline: 3px solid var(--haze); outline-offset: 2px; }
.st-link.is-active { color: #fff; background: var(--brand); box-shadow: 0 8px 22px -8px rgba(36, 81, 230, .85); }
.st-link.is-past { color: var(--haze); }
.st-n { font-variant-numeric: tabular-nums; opacity: .55; }
.st-link.is-active .st-n { opacity: 1; color: var(--sun); }
.st-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(143, 176, 255, .12); overflow: hidden; }
.st-rail span {
display: block; height: 100%; transform: scaleX(0); transform-origin: left;
background: linear-gradient(90deg, var(--sun), var(--haze) 45%, var(--brand));
}
.st-block {
display: grid; gap: 2.5rem; align-items: center; padding: 3.5rem 0;
border-bottom: 1px solid rgba(143, 176, 255, .1);
}
.st-block:last-child { border-bottom: 0; }
.st-copy { display: flex; flex-direction: column; align-items: flex-start; }
.st-big {
font-family: 'Fraunces', Georgia, serif; font-size: 4.5rem; line-height: .9; letter-spacing: -.05em;
color: transparent; -webkit-text-stroke: 1.5px rgba(143, 176, 255, .45); font-variant-numeric: tabular-nums;
transition: -webkit-text-stroke-color .4s, color .4s;
}
.st-block.is-active .st-big { -webkit-text-stroke-color: var(--sun); }
.st-visual { position: relative; }
/* Soft halo behind the illustration: opacity-only on its own layer. */
.st-visual::before {
content: ''; position: absolute; inset: 8% 4%; border-radius: 2rem; z-index: 0; pointer-events: none;
background: radial-gradient(closest-side, rgba(36, 81, 230, .75), rgba(143, 176, 255, .25) 60%, transparent);
filter: blur(40px); opacity: .35; transition: opacity .8s var(--ease-out);
}
.st-block.is-active .st-visual::before { opacity: 1; }
.st-visual .ill {
z-index: 1; transform: rotate(-2deg) scale(.96);
transition: transform .9s var(--spring);
}
.st-block--flip .st-visual .ill { transform: rotate(2deg) scale(.96); }
.st-block.is-active .st-visual .ill { transform: none; }
.st-block.is-active .st-visual .ill:hover { transform: translateY(-4px); }
@media (min-width: 640px) {
.st-index { margin: 0 -2rem; padding: .7rem 2rem; }
}
@media (min-width: 768px) {
.st-block { padding: 5rem 0; }
.st-big { font-size: 6rem; }
}
@media (min-width: 1024px) {
/* Bar fits all eight: spread them evenly instead of scrolling. */
.st-index { top: 5.75rem; margin: 0; padding: .5rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(143, 176, 255, .14), var(--shadow-2); }
.st-list { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .25rem; overflow: visible; }
.st-link { padding: .6rem .4rem; font-size: .8rem; }
.st-rail { left: 1.5rem; right: 1.5rem; bottom: -1px; }
.st-blocks { margin-top: 1rem; }
.st-block { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; padding: 6rem 0; }
.st-block--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.st-block--flip .st-visual { order: -1; }
.st-visual .ill { min-height: 22rem; padding: 2.25rem; }
}
@media (min-width: 1280px) {
.st-link { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
.st-link, .st-visual .ill, .st-visual::before, .st-big { transition: none; }
.st-visual .ill, .st-block--flip .st-visual .ill { transform: none; }
}
/* Contact: the form cards overlap the hero, so the section's corner glow is
moved down off its top edge; otherwise it draws a hard seam at the join. */
.bg-soft[data-contact] {
background:
radial-gradient(46rem 28rem at 100% 38rem, rgba(36, 81, 230, .2), transparent 64%),
radial-gradient(38rem 26rem at 0% 55%, rgba(143, 176, 255, .08), transparent 64%),
var(--cream);
}
/* Edge fades so an aurora surface melts into the section next to it instead
of ending on a hard line. The grain layer is masked out over the fade too,
since the neighbouring section has none. */
.aurora-fade { position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; }
.aurora-fade--bottom { bottom: 0; height: 16rem; background: linear-gradient(180deg, transparent, var(--cream) 92%); }
.aurora-fade--top { top: 0; height: 12rem; background: linear-gradient(180deg, var(--join, var(--cream)) 6%, transparent); }
.aurora-surface.fade-b::after { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 16rem), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 16rem), transparent); }
.aurora-surface.fade-t::after { -webkit-mask-image: linear-gradient(180deg, transparent, #000 12rem); mask-image: linear-gradient(180deg, transparent, #000 12rem); }