/* ============================================================ Fates Financial — "The Gate Opens" Dark contemporary fintech. Near-black evergreen canvas, luminous hairlines, marigold signal, mint data accent. Type: Instrument Sans — headlines, tight & heavy Fraunces italic — the emphasised word (editorial signature) IBM Plex Mono — eyebrows, tags, figures (terminal precision) ============================================================ */ :root { /* --- Surfaces --- */ --void: #05100D; --void-deep: #030A08; --panel: #0B1815; --panel-2: #10221D; --panel-3: #16302A; /* --- Hairlines --- */ --line: rgba(150, 210, 190, 0.13); --line-mid: rgba(150, 210, 190, 0.22); --line-strong: rgba(150, 210, 190, 0.36); /* --- Ink --- */ --text: #E8F2EE; --text-mid: #9FB6AE; --text-dim: #6C837B; /* --- Signal --- */ --marigold: #E9A13B; --marigold-soft: #F5C878; --marigold-dim: rgba(233, 161, 59, 0.14); --mint: #5FE3B3; --mint-dim: rgba(95, 227, 179, 0.13); --clay: #E07A52; /* --- Type --- */ --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: "Fraunces", Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* --- Geometry --- */ --radius: 16px; --radius-sm: 10px; --arch: 999px 999px 14px 14px; --container: 1180px; /* --- Depth --- */ --glow-gold: 0 0 0 1px rgba(233, 161, 59, 0.28), 0 18px 50px -12px rgba(233, 161, 59, 0.35); --glow-mint: 0 0 0 1px rgba(95, 227, 179, 0.24), 0 18px 50px -14px rgba(95, 227, 179, 0.28); --lift: 0 24px 60px -24px rgba(0, 0, 0, 0.9); /* --- Motion --- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1); /* --- Accent as ink (text/icons). Bright accents are legible on the dark canvas; the light theme swaps in deeper values that hold contrast on cream. Backgrounds keep --marigold/--mint in both themes. --- */ --gold-ink: #E9A13B; --mint-ink: #5FE3B3; --clay-ink: #E07A52; /* Solid, not faded. Fading the dim ink toward the canvas never cleared 4.5:1 — even at full opacity it tops out at 4.08:1 on --panel-2 — so the quiet tiers step lighter instead of more transparent. */ --text-quiet: #8AA098; --text-faint: #7E948C; --on-accent: #05100D; /* text sitting ON a marigold/mint fill — dark in both themes */ /* --- Surfaces that assumed a dark canvas --- */ --surface-soft: rgba(255, 255, 255, 0.02); --surface-mid: rgba(255, 255, 255, 0.05); --nav-bg: rgba(5, 16, 13, 0.82); --nav-bg-solid: rgba(5, 16, 13, 0.92); --menu-bg: rgba(5, 16, 13, 0.98); --panel-glass: rgba(11, 24, 21, 0.92); /* --- Shadow tint: near-black on dark, evergreen-tinted on light --- */ --shadow-deep: rgba(0, 0, 0, 0.9); --shadow-soft: rgba(0, 0, 0, 0.55); /* --- Ambient washes behind heroes and sections --- */ --wash-gold: rgba(233, 161, 59, 0.14); --wash-mint: rgba(95, 227, 179, 0.09); } /* ============================================================ LIGHT THEME — opt in per page with . Used by /529/: the consumer page reads warm and open, while the institutional pages stay on the dark canvas. Only tokens are redefined. No layout, type, or motion rule is duplicated, so the two themes cannot drift apart structurally. ============================================================ */ [data-theme="light"] { /* --- Surfaces: warm paper, echoing the previous "Open Doors" cream --- */ --void: #FBF7EF; --void-deep: #F3EDE0; --panel: #FFFFFF; --panel-2: #F8F3E9; --panel-3: #EFE7D7; /* --- Hairlines: evergreen at low alpha, the inverse of the dark theme --- */ --line: rgba(18, 38, 31, 0.13); --line-mid: rgba(18, 38, 31, 0.22); --line-strong: rgba(18, 38, 31, 0.36); /* --- Ink --- */ --text: #12261F; --text-mid: #46605A; /* Deliberately darker than the dark theme's dim ink: on cream this token carries small 0.72–0.8rem labels, so it has to clear 4.5:1 against the darkest surface it lands on (--void-deep #F3EDE0), not just the canvas. */ --text-dim: #4E655E; /* --- Signal: fills stay bright so the brand reads the same; ink variants darken so accent text and icons stay legible on cream. --- */ --marigold: #E9A13B; --marigold-soft: #D08A22; --marigold-dim: rgba(233, 161, 59, 0.18); --mint: #5FE3B3; --mint-dim: rgba(14, 122, 87, 0.12); --clay: #C4552C; --gold-ink: #8A5605; --mint-ink: #0C7050; --clay-ink: #B14A22; --on-accent: #10221D; /* Solid, not alpha: these carry small footer and label text, and fading evergreen toward cream drops it below 4.5:1 fast. */ --text-quiet: #4E655E; --text-faint: #546B64; --surface-soft: rgba(18, 38, 31, 0.025); --surface-mid: rgba(18, 38, 31, 0.06); --nav-bg: rgba(251, 247, 239, 0.82); --nav-bg-solid: rgba(251, 247, 239, 0.94); --menu-bg: rgba(251, 247, 239, 0.98); --panel-glass: rgba(255, 255, 255, 0.94); --shadow-deep: rgba(18, 38, 31, 0.26); --shadow-soft: rgba(18, 38, 31, 0.16); --wash-gold: rgba(233, 161, 59, 0.20); --wash-mint: rgba(14, 122, 87, 0.07); /* Glows become soft lifts — a luminous halo only reads on a dark canvas. */ --glow-gold: 0 0 0 1px rgba(233, 161, 59, 0.42), 0 18px 44px -16px rgba(184, 126, 30, 0.34); --glow-mint: 0 0 0 1px rgba(14, 122, 87, 0.28), 0 18px 44px -16px rgba(14, 122, 87, 0.22); --lift: 0 22px 50px -26px rgba(18, 38, 31, 0.42); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; /* the fixed nav must not cover anchored sections */ scroll-padding-top: 90px; } body { font-family: var(--font-sans); background: var(--void); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; position: relative; } /* Fine engineering grid — the room the money lives in */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(rgba(150, 210, 190, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 210, 190, 0.028) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 20%, transparent 78%); } /* Grain — keeps flat dark from going plastic */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font: inherit; color: inherit; } ::selection { background: var(--marigold); color: var(--on-accent); } :focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 4px; } /* ---------- Layout ---------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 44px); position: relative; z-index: 2; } .section { padding: clamp(84px, 10vw, 140px) 0; position: relative; } .section--tight { padding: clamp(60px, 7vw, 96px) 0; } /* ---------- Type ---------- */ h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 700; line-height: 1.06; letter-spacing: -0.035em; } h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); } h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); } h3 { font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.25; } /* The editorial signature: one italic serif word per headline */ h1 em, h2 em, h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--gold-ink); } p { text-wrap: pretty; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mint-ink); margin-bottom: 20px; } .eyebrow--gold { color: var(--gold-ink); } .eyebrow--dim { color: var(--text-dim); } .section__head { max-width: 760px; margin: 0 0 clamp(44px, 6vw, 72px); } .section__head--center { margin-left: auto; margin-right: auto; text-align: center; } .section__sub { color: var(--text-mid); font-size: 1.06rem; max-width: 580px; margin-top: 20px; } .section__head--center .section__sub { margin-left: auto; margin-right: auto; } .lede { font-size: 1.15rem; color: var(--text-mid); } /* Mono figure treatment for anything numeric */ .figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }