/* Zion — Brand System Stylesheet
Source of truth: ./Design.md
Caribbean dusk, editorial premium with fintech rigor.
*/
:root {
/* Color tokens */
--sand: #FAF6EE;
--bone: #FFFDF7;
--night-sea: #0F2027;
--driftwood: #6B6259;
--saffron: #EF9F27;
--sunset: #D85A30;
--sunset-deep: #C44B1E;
--lagoon: #2BB890;
--ocean: #0F6E56;
--mango: #F4B942;
--hibiscus: #C84B47;
--conch: #E8DFD0;
--cream: #FFF4E6;
--slate-soft: #A89F8E;
/* Signature gradients */
--grad-dusk: linear-gradient(135deg, #EF9F27 0%, #D85A30 55%, #C44B1E 100%);
--grad-sea: linear-gradient(135deg, #2BB890 0%, #0F6E56 100%);
--grad-predawn: linear-gradient(180deg, #FFF4E6 0%, #FAF6EE 60%, #E8DFD0 100%);
/* Spacing scale (4px base) */
--xs: 4px; --sm: 8px; --md: 16px; --lg: 24px;
--xl: 40px; --xxl: 64px; --xxxl: 96px; --xxxxl: 128px;
/* Type families */
--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-std: cubic-bezier(0.4, 0, 0.2, 1);
/* Container */
--container: 1200px;
--container-tight: 880px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--sand);
color: var(--night-sea);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01" on, "cv11" on;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* ========== Type ========== */
.display { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
.serif { font-family: var(--font-display); font-weight: 600; }
.italic { font-style: italic; }
.eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--driftwood); }
.lede { font-size: 18px; line-height: 1.6; color: var(--night-sea); opacity: 0.86; }
h1.display { font-size: clamp(44px, 6.6vw, 84px); }
h2.display { font-size: clamp(36px, 4.4vw, 56px); }
h3 { font-family: var(--font-body); font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -0.01em; }
/* ========== Layout ========== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }
@media (min-width: 1100px) { .container { padding: 0 80px; } }
.section { padding: 96px 0; border-top: 1px solid var(--conch); }
.section:first-of-type { border-top: 0; }
@media (min-width: 768px) { .section { padding: 128px 0; } }
/* ========== Buttons ========== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 14px 28px; border-radius: 10px; border: 1.5px solid transparent;
font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
cursor: pointer; transition: all 200ms var(--ease-std);
text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--saffron); color: var(--night-sea); box-shadow: 0 0 0 0 rgba(239,159,39,0); }
.btn-primary:hover { background: var(--sunset); color: var(--bone); box-shadow: 0 0 24px rgba(239,159,39,0.35); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: transparent; color: var(--night-sea); border-color: var(--night-sea); }
.btn-secondary:hover { background: var(--night-sea); color: var(--sand); }
.btn-ghost { background: transparent; color: var(--night-sea); padding: 10px 16px; }
.btn-ghost:hover { background: var(--conch); }
.btn .arrow { transition: transform 240ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }
/* ========== Nav ========== */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(250, 246, 238, 0.78);
backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color 240ms var(--ease-std), background 240ms var(--ease-std);
}
.nav.scrolled { border-bottom-color: var(--conch); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-links { display: none; gap: 36px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--driftwood); transition: color 160ms; }
.nav-links a:hover { color: var(--night-sea); }
.nav-right { display: flex; align-items: center; gap: 12px; }
@media (min-width: 880px) { .nav-links { display: flex; } }
/* ========== Hero ========== */
.hero {
position: relative; padding: 80px 0 96px;
background: var(--grad-predawn);
overflow: hidden;
isolation: isolate;
}
@media (min-width: 768px) { .hero { padding: 112px 0 144px; } }
/* Signature: a breathing warm horizon. Two slow-shifting saffron→sunset
radials drift over the predawn gradient on an 18s loop. The wave-coming-
back-after-it-crests motion the spec calls for. One signature only. */
.hero::before {
content: "";
position: absolute;
inset: -8% -4%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 65% 38% at 28% 22%, rgba(244, 185, 66, 0.55), transparent 70%),
radial-gradient(ellipse 55% 35% at 78% 78%, rgba(216, 90, 48, 0.35), transparent 70%),
radial-gradient(ellipse 45% 30% at 52% 56%, rgba(239, 159, 39, 0.25), transparent 70%);
filter: blur(40px);
opacity: 0.85;
animation: zion-horizon 18s var(--ease-std) infinite;
will-change: transform, opacity;
}
.hero::after {
/* Single thin warm line — the "horizon" itself. Sits ~64% down. */
content: "";
position: absolute;
z-index: 0;
left: 8%;
right: 8%;
top: 64%;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(216, 90, 48, 0) 6%,
rgba(216, 90, 48, 0.45) 50%,
rgba(216, 90, 48, 0) 94%,
transparent 100%
);
opacity: 0.55;
pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
@keyframes zion-horizon {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.78; }
50% { transform: translate3d(1.5%, -1%, 0) scale(1.05); opacity: 1; }
}
.hero-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 72px; } }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--conch); border-radius: 999px; background: var(--bone); color: var(--driftwood); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 10px rgba(239,159,39,0.6); }
.hero h1 { margin: 24px 0 24px; }
.hero-lede { max-width: 520px; font-size: 19px; line-height: 1.55; color: var(--driftwood); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-trust { display: flex; align-items: center; gap: 18px; margin-top: 36px; flex-wrap: wrap; font-size: 13px; color: var(--driftwood); }
.hero-trust .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--bone); border: 1px solid var(--conch); border-radius: 999px; }
/* Hero visual */
.hero-visual { position: relative; }
.hero-card {
position: relative; background: var(--bone); border: 1px solid var(--conch); border-radius: 22px;
padding: 28px; box-shadow: 0 30px 80px rgba(15,32,39,0.10), 0 6px 18px rgba(15,32,39,0.04);
overflow: hidden;
}
.hero-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--conch); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.02); }
.hero-photo .photo-fallback {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(244,185,66,0.55), transparent 60%),
radial-gradient(ellipse at 70% 80%, rgba(216,90,48,0.45), transparent 65%),
linear-gradient(180deg, #F4B942 0%, #EF9F27 38%, #D85A30 78%, #C44B1E 100%);
}
.hero-photo .caption {
position: absolute; left: 16px; bottom: 14px; right: 16px;
font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--bone);
font-size: 15px; line-height: 1.3; text-shadow: 0 1px 2px rgba(15,32,39,0.4);
}
.hero-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; }
.balance-stack { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--conch); margin-top: 16px; }
.balance-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 14px; color: var(--night-sea); }
.balance-row .ccy { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--driftwood); text-transform: uppercase; }
/* Floating quote card */
.float-card {
position: absolute; right: -12px; bottom: -28px;
background: var(--night-sea); color: var(--sand);
padding: 18px 20px; border-radius: 14px; max-width: 280px;
box-shadow: 0 16px 40px rgba(15,32,39,0.25);
font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.4;
}
.float-card .by { display: block; margin-top: 10px; font-family: var(--font-body); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--saffron); text-transform: uppercase; }
/* ========== Pillars (Send / Hold / Spend) ========== */
.pillars-head { display: grid; gap: 18px; max-width: 720px; margin-bottom: 56px; }
.pillars-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .pillars-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.pillar {
background: var(--bone); border: 1px solid var(--conch); border-radius: 14px;
padding: 28px 28px 32px; transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms;
}
.pillar:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(15,32,39,0.08); border-color: var(--saffron); }
.pillar .num { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--saffron); display: block; margin-bottom: 24px; letter-spacing: 0.1em; }
.pillar h3 { margin: 0 0 12px; font-size: 24px; font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
.pillar p { color: var(--driftwood); font-size: 15px; line-height: 1.6; margin: 0; }
.pillar-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--cream); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
/* ========== Multi-currency signature ========== */
.currency-section { background: var(--night-sea); color: var(--sand); border-top: none; padding: 112px 0 128px; position: relative; overflow: hidden; }
.currency-section::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse 800px 400px at 80% 0%, rgba(239,159,39,0.18), transparent 70%);
pointer-events: none;
}
.currency-section .container { position: relative; z-index: 1; }
.currency-section .eyebrow { color: var(--saffron); }
.currency-section h2 { color: var(--sand); }
.currency-grid { display: grid; gap: 56px; align-items: center; margin-top: 72px; }
@media (min-width: 1024px) { .currency-grid { grid-template-columns: 1fr 1fr; gap: 96px; } }
.currency-text p { color: rgba(250, 246, 238, 0.78); max-width: 460px; font-size: 17px; line-height: 1.6; }
.currency-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.currency-list li { display: flex; align-items: center; gap: 12px; color: rgba(250, 246, 238, 0.86); font-size: 15px; }
.currency-list li::before { content: ""; width: 5px; height: 5px; background: var(--saffron); border-radius: 50%; flex-shrink: 0; }
.wallet-card {
background: linear-gradient(180deg, #15323A 0%, #0F2027 100%);
border: 1px solid #1F3A42; border-radius: 18px; padding: 28px;
box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.wallet-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.wallet-head .label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; color: var(--slate-soft); text-transform: uppercase; }
.wallet-head .total { display: block; font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--sand); margin-top: 8px; line-height: 1; }
.wallet-head .delta { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--lagoon); }
.wallet-head .menu { color: var(--slate-soft); font-size: 12px; letter-spacing: 0.1em; }
.wallet-rows { display: grid; gap: 4px; }
.wallet-row { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(232,223,208,0.08); }
.wallet-row:first-child { border-top: 0; }
.wallet-flag { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--bone); }
.flag-usd { background: linear-gradient(135deg, #2BB890, #0F6E56); }
.flag-jmd { background: linear-gradient(135deg, #F4B942, #D85A30); }
.flag-xcd { background: linear-gradient(135deg, #6B8FB3, #15323A); color: var(--bone); }
.flag-ttd { background: linear-gradient(135deg, #C84B47, #7A2421); }
.flag-bbd { background: linear-gradient(135deg, #EF9F27, #C44B1E); }
.wallet-name { font-size: 14px; color: var(--sand); font-weight: 500; }
.wallet-name small { display: block; font-size: 11px; color: var(--slate-soft); font-weight: 400; margin-top: 2px; letter-spacing: 0.04em; text-transform: uppercase; }
.wallet-amount { font-family: var(--font-mono); font-size: 16px; color: var(--sand); font-variant-numeric: tabular-nums; }
/* ========== Rituals ========== */
.rituals-head { display: grid; gap: 18px; margin-bottom: 56px; max-width: 700px; }
.rituals-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .rituals-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rituals-grid { grid-template-columns: repeat(4, 1fr); } }
.ritual {
position: relative; padding: 28px 24px 28px; background: var(--bone); border: 1px solid var(--conch);
border-radius: 14px; transition: all 240ms var(--ease-out); overflow: hidden;
}
.ritual:hover { border-color: var(--sunset); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(15,32,39,0.06); }
.ritual h4 { margin: 12px 0 10px; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--night-sea); }
.ritual p { font-size: 14px; color: var(--driftwood); line-height: 1.55; margin: 0; }
.ritual .glyph { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--cream); border-radius: 10px; }
.ritual .glyph svg { width: 20px; height: 20px; stroke: var(--sunset); }
/* ========== Membership ========== */
.tier-grid { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 880px) { .tier-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.tier {
background: var(--bone); border: 1px solid var(--conch); border-radius: 18px;
padding: 32px 28px 28px; display: flex; flex-direction: column; gap: 22px;
}
.tier.featured {
background: linear-gradient(180deg, #FFF4E6, #FAF6EE);
border: 1.5px solid var(--saffron); box-shadow: 0 0 0 6px rgba(239,159,39,0.10);
position: relative;
}
.tier.featured::before {
content: "Most chosen"; position: absolute; top: -12px; left: 28px;
background: var(--saffron); color: var(--night-sea); padding: 4px 12px;
font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
border-radius: 999px;
}
.tier-name { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1; }
.tier-price { font-family: var(--font-display); font-size: 36px; font-weight: 600; line-height: 1; }
.tier-price small { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--driftwood); margin-left: 6px; }
.tier-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; flex: 1; }
.tier-features li { padding-left: 26px; position: relative; font-size: 14.5px; color: var(--night-sea); line-height: 1.5; }
.tier-features li::before {
content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 14px;
background: var(--saffron); border-radius: 50%;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 14px 14px;
mask: url("data:image/svg+xml;utf8,") no-repeat center / 14px 14px;
}
.tier .btn { width: 100%; }
/* ========== Quote ========== */
.quote-section { background: var(--cream); border-top: 1px solid var(--conch); }
.quote-card {
display: grid; gap: 32px; align-items: center; max-width: 980px; margin: 0 auto;
}
.quote-card blockquote {
margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500;
font-size: clamp(28px, 3.4vw, 40px); line-height: 1.3; color: var(--night-sea);
}
.quote-card .by-block { display: flex; align-items: center; gap: 14px; }
.quote-card .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--grad-dusk); display: flex; align-items: center; justify-content: center; color: var(--bone); font-weight: 700; font-size: 18px; }
.quote-card .by-block .name { font-weight: 600; font-size: 15px; }
.quote-card .by-block .role { font-size: 13px; color: var(--driftwood); }
/* ========== FAQ ========== */
.faq-grid { display: grid; gap: 12px; max-width: 880px; margin: 56px auto 0; }
.faq-item { background: var(--bone); border: 1px solid var(--conch); border-radius: 14px; overflow: hidden; }
.faq-item summary {
cursor: pointer; padding: 22px 24px; display: flex; justify-content: space-between; align-items: center;
font-weight: 600; font-size: 17px; color: var(--night-sea); list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+"; font-family: var(--font-display); font-size: 28px; font-weight: 400; color: var(--saffron);
transition: transform 240ms var(--ease-std);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item-content { padding: 0 24px 22px; color: var(--driftwood); font-size: 15px; line-height: 1.6; }
/* ========== CTA strip ========== */
.cta-strip { background: var(--night-sea); color: var(--sand); position: relative; overflow: hidden; }
.cta-strip::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle 600px at 80% 30%, rgba(239,159,39,0.25), transparent 70%),
radial-gradient(circle 500px at 20% 70%, rgba(43,184,144,0.12), transparent 70%);
}
.cta-strip .container { position: relative; z-index: 1; }
.cta-strip h2 { color: var(--sand); margin-bottom: 16px; }
.cta-strip p { color: rgba(250,246,238,0.75); max-width: 540px; margin: 0 0 28px; font-size: 17px; }
.cta-strip .btn-primary { background: var(--saffron); }
/* ========== Footer ========== */
.footer { background: var(--night-sea); color: rgba(250,246,238,0.7); padding: 64px 0 40px; }
.footer-grid { display: grid; gap: 40px; grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h5 { color: var(--sand); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 18px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer ul a { color: rgba(250,246,238,0.65); font-size: 14px; transition: color 160ms; }
.footer ul a:hover { color: var(--saffron); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 36px; margin-top: 56px; border-top: 1px solid rgba(232,223,208,0.12); font-size: 13px; flex-wrap: wrap; gap: 12px; }
.footer p { font-size: 14px; line-height: 1.55; max-width: 280px; }
/* ========== Animations (progressive enhancement) ========== */
/* Default = visible. JS adds .is-hidden only to below-fold reveals at load.
Upgraded: clip-path masked reveal — content rises and unmasks like a wave
coming back after it crests (the spec's motion principle). Long ease. */
.reveal { opacity: 1; transform: none; clip-path: inset(0 0 0 0);
transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out), clip-path 720ms var(--ease-out); }
.reveal.is-hidden { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 12% 0); }
.reveal-stagger > * { opacity: 1; transform: none; transition: opacity 540ms var(--ease-out), transform 540ms var(--ease-out); }
.reveal-stagger.is-hidden > * { opacity: 0; transform: translateY(14px); }
.reveal-stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger > *:nth-child(5) { transition-delay: 320ms; }
/* Pillar / card hover: a soft 240ms lift + saffron shadow halo, matching
the "wave settling" motion principle. */
.pillar { transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out); }
.pillar:hover { transform: translateY(-3px); box-shadow: 0 18px 48px rgba(15,32,39,0.08); border-color: rgba(239,159,39,0.4); }
/* Mobile gate: kill heavy hero decoration below 768px. */
@media (max-width: 767px) {
.hero::before { animation: none; opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
.hero::before { animation: none !important; opacity: 0.55; }
}