/* ════════════════════════════════════════════════════════════════ Strahl v2 · exec-facing landing Theme system: 4 palettes via [data-theme] on . Tokens every component reads: --bg --surface --card --ink --muted --line --primary --on-primary --soft --shadow + kaleidoscope --k1..--k4 --kbg (--kmode read in JS) ════════════════════════════════════════════════════════════════ */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } /* ── Iris (default · light, premium violet) ── */ :root{ --bg:#FBFAFF; --surface:#FFFFFF; --card:#FFFFFF; --ink:#191634; --muted:rgba(25,22,52,0.60); --line:rgba(25,22,52,0.12); --primary:#5B53E0; --on-primary:#FFFFFF; --soft:#F1EFFD; --soft-ink:#4A43C7; --shadow:0 18px 50px -22px rgba(40,33,120,0.40); --k1:#5B53E0; --k2:#7C6FF0; --k3:#22D3CE; --k4:#C084FC; --kbg:#0E0B26; --serif:'Spectral',Georgia,serif; --ui:'Libre Franklin',system-ui,sans-serif; --mono:'JetBrains Mono',monospace; --max:1240px; --pad:clamp(22px,5vw,72px); } /* ── Vault (dark · gold, private-banking) ── */ [data-theme="vault"]{ --bg:#14110B; --surface:#1E1A11; --card:#211C12; --ink:#F6F0E2; --muted:rgba(246,240,226,0.62); --line:rgba(246,240,226,0.14); --primary:#D7A74F; --on-primary:#1A150C; --soft:#2A2415; --soft-ink:#E8C474; --shadow:0 22px 60px -24px rgba(0,0,0,0.7); --k1:#D7A74F; --k2:#E8C474; --k3:#B5742A; --k4:#8A5A1E; --kbg:#0C0A06; } /* ── Spectrum (light · clean fintech blue) ── */ [data-theme="spectrum"]{ --bg:#F3F7FC; --surface:#FFFFFF; --card:#FFFFFF; --ink:#0B1B33; --muted:rgba(11,27,51,0.60); --line:rgba(11,27,51,0.12); --primary:#2563EB; --on-primary:#FFFFFF; --soft:#E7F0FE; --soft-ink:#1D4FBE; --shadow:0 18px 50px -22px rgba(20,60,140,0.34); --k1:#2563EB; --k2:#06B6D4; --k3:#4F46E5; --k4:#38BDF8; --kbg:#06101F; } /* ── Aurora (dark · navy + mint/iris) ── */ [data-theme="aurora"]{ --bg:#0A0F1F; --surface:#111831; --card:#141C39; --ink:#EAF0FF; --muted:rgba(234,240,255,0.62); --line:rgba(234,240,255,0.14); --primary:#7C83FF; --on-primary:#0A0F1F; --soft:#1A2244; --soft-ink:#AEB6FF; --shadow:0 22px 60px -24px rgba(0,0,0,0.6); --k1:#7C83FF; --k2:#34D399; --k3:#22D3EE; --k4:#A78BFA; --kbg:#070B16; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--ink); font-family:var(--ui); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--primary); color:var(--on-primary); } h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-0.02em; line-height:1.06; } .section{ max-width:var(--max); margin:0 auto; padding:clamp(70px,9vw,130px) var(--pad); } .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--primary); display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{ content:''; width:26px; height:1px; background:currentColor; opacity:.6; } /* ── Nav ── */ nav{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .nav-in{ max-width:var(--max); margin:0 auto; padding:16px var(--pad); display:flex; align-items:center; gap:26px; } .logo{ font-family:var(--serif); font-size:25px; font-weight:500; letter-spacing:-0.03em; } .nav-links{ display:flex; gap:30px; list-style:none; margin-left:14px; } .nav-links a{ font-size:15px; color:var(--muted); transition:color .2s; } .nav-links a:hover{ color:var(--ink); } .nav-right{ margin-left:auto; display:flex; align-items:center; gap:20px; } /* theme switcher */ .themes{ display:flex; align-items:center; gap:9px; } .themes-label{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); } .sw{ width:18px; height:18px; border-radius:50%; cursor:pointer; border:2px solid var(--line); padding:0; transition:transform .18s, border-color .18s; position:relative; } .sw:hover{ transform:scale(1.18); } .sw[aria-pressed="true"]{ border-color:var(--ink); transform:scale(1.12); } .sw-iris{ background:#5B53E0; } .sw-vault{ background:#D7A74F; } .sw-spectrum{ background:#2563EB; } .sw-aurora{ background:linear-gradient(135deg,#7C83FF,#34D399); } .btn{ font-family:var(--ui); font-size:15px; font-weight:500; padding:12px 22px; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:transform .15s, box-shadow .2s, background .2s; display:inline-block; } .btn-primary{ background:var(--primary); color:var(--on-primary); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow); } .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); } .btn-ghost:hover{ border-color:var(--ink); } .nav-cta{ padding:10px 20px; } /* ── Hero (full-bleed kaleidoscope behind centered copy) ── */ .hero{ position:relative; isolation:isolate; min-height:min(92vh,820px); display:flex; align-items:center; padding:clamp(90px,16vh,180px) var(--pad) clamp(80px,12vh,140px); overflow:hidden; text-align:center; } .hero-bg{ position:absolute; inset:0; z-index:-2; background:var(--kbg); } .kaleido{ display:block; width:100%; height:100%; } /* darken/vignette only — keeps copy legible, no fade into the page */ .hero-bg-fade{ position:absolute; inset:0; background: radial-gradient(120% 90% at 50% 38%, transparent 0%, color-mix(in srgb,var(--kbg) 55%, transparent) 60%, var(--kbg) 100%); } .hero-copy{ position:relative; z-index:1; max-width:760px; margin:0 auto; color:#FBFAFF; } .hero-eyebrow{ margin-bottom:26px; justify-content:center; color:#fff; opacity:.9; } .hero h1{ font-size:clamp(36px,5vw,64px); color:#FBFAFF; text-shadow:0 2px 40px rgba(0,0,0,0.45); } .hero h1 .grad{ color:inherit; } .hero-sub{ margin:24px auto 0; font-size:clamp(16px,1.35vw,19px); line-height:1.6; color:rgba(251,250,255,0.86); max-width:54ch; text-shadow:0 1px 20px rgba(0,0,0,0.4); } .hero-actions{ margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; } .hero-actions .btn{ white-space:nowrap; } .hero-actions .btn-ghost{ color:#fff; border-color:rgba(255,255,255,0.4); } .hero-actions .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,0.08); } .hero-trust{ margin-top:30px; font-size:14.5px; color:rgba(251,250,255,0.78); display:flex; align-items:center; justify-content:center; gap:11px; } .hero-trust .tick{ color:var(--k3); } .kaleido-hint{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:1; font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(255,255,255,0.6); pointer-events:none; display:flex; align-items:center; gap:8px; transition:opacity .5s; } .kaleido-hint.faded{ opacity:0; } /* ── For-whom band ── */ .band{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); } .band-in{ max-width:var(--max); margin:0 auto; padding:30px var(--pad); display:flex; align-items:center; gap:18px 40px; flex-wrap:wrap; } .band-lead{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); } .band-items{ display:flex; gap:14px 32px; flex-wrap:wrap; font-size:16px; } .band-items span{ display:inline-flex; align-items:center; gap:9px; } .band-items .d{ width:6px; height:6px; border-radius:50%; background:var(--primary); } /* ── Pillars ── */ .pillars-head{ max-width:var(--max); margin:0 auto; padding:clamp(70px,9vw,120px) var(--pad) 0; } .pillars-head h2{ font-size:clamp(30px,3.6vw,46px); margin-top:18px; max-width:18ch; } .pillars-head p{ margin-top:18px; font-size:18px; color:var(--muted); max-width:54ch; } .pillars{ max-width:var(--max); margin:0 auto; padding:clamp(34px,4vw,52px) var(--pad) clamp(70px,9vw,120px); display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .pillar{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:34px 32px 36px; transition:transform .25s, box-shadow .25s, border-color .25s; position:relative; overflow:hidden; } .pillar:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--primary) 40%, var(--line)); } .pillar-ic{ width:48px; height:48px; border-radius:13px; background:var(--soft); color:var(--soft-ink); display:flex; align-items:center; justify-content:center; margin-bottom:22px; } .pillar-ic svg{ width:25px; height:25px; } .pillar h3{ font-family:var(--ui); font-weight:600; font-size:21px; letter-spacing:-0.01em; } .pillar p{ margin-top:12px; font-size:16px; line-height:1.6; color:var(--muted); } .pillar .num{ position:absolute; top:26px; right:30px; font-family:var(--mono); font-size:12px; color:var(--muted); opacity:.5; } /* ── Why Strahl ── */ .why{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .why-in{ max-width:var(--max); margin:0 auto; padding:clamp(70px,9vw,120px) var(--pad); display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(40px,6vw,90px); align-items:start; } .why-in h2{ font-size:clamp(28px,3.4vw,42px); position:sticky; top:110px; } .why-in h2 .lq{ color:var(--primary); } .why-list{ display:flex; flex-direction:column; } .why-row{ padding:26px 0; border-top:1px solid var(--line); display:flex; gap:20px; } .why-row:first-child{ border-top:none; padding-top:0; } .why-k{ font-family:var(--mono); font-size:13px; color:var(--primary); flex:0 0 30px; padding-top:3px; } .why-row h4{ font-family:var(--ui); font-size:19px; font-weight:600; letter-spacing:-0.01em; } .why-row p{ margin-top:8px; font-size:16px; line-height:1.6; color:var(--muted); } /* ── CTA (full-bleed kaleidoscope, mirrors the hero) ── */ .cta{ position:relative; isolation:isolate; overflow:hidden; text-align:center; padding:clamp(92px,13vw,168px) var(--pad); } .cta-inner{ position:relative; z-index:1; max-width:780px; margin:0 auto; color:#FBFAFF; } .cta .eyebrow{ color:#fff; opacity:.9; } .cta h2{ font-size:clamp(32px,4.6vw,58px); max-width:18ch; margin:0 auto; color:#FBFAFF; text-shadow:0 2px 40px rgba(0,0,0,0.45); } .cta p{ margin:22px auto 0; font-size:18px; color:rgba(251,250,255,0.86); max-width:48ch; text-shadow:0 1px 20px rgba(0,0,0,0.4); } .cta-actions{ margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .cta-fine{ margin-top:26px; font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:rgba(251,250,255,0.72); } /* ── Footer ── */ footer{ border-top:1px solid var(--line); } .foot-in{ max-width:var(--max); margin:0 auto; padding:54px var(--pad) 30px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; } .foot-logo{ font-family:var(--serif); font-size:24px; font-weight:500; } .foot-copy{ margin-top:12px; font-size:14.5px; color:var(--muted); max-width:32ch; } .foot-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; } .foot-col ul{ list-style:none; display:flex; flex-direction:column; gap:10px; } .foot-col a{ font-size:15px; color:var(--muted); transition:color .2s; } .foot-col a:hover{ color:var(--ink); } .foot-bottom{ max-width:var(--max); margin:0 auto; padding:18px var(--pad) 40px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; color:var(--muted); border-top:1px solid var(--line); } /* ── Reveal ── */ .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } } /* ── Responsive ── */ @media (max-width:940px){ .why-in{ grid-template-columns:1fr; gap:32px; } .why-in h2{ position:static; } .nav-links{ display:none; } } @media (max-width:680px){ .pillars{ grid-template-columns:1fr; } .foot-in{ grid-template-columns:1fr 1fr; gap:30px 24px; } .themes-label{ display:none; } .band-in{ gap:14px 24px; } } @media (max-width:430px){ .foot-in{ grid-template-columns:1fr; } .hero-actions .btn{ width:100%; text-align:center; } }