/* Arka — site stylesheet Color is driven entirely by CSS variables set on . The tweaks panel rewrites these by toggling [data-palette] and [data-mode]. */ :root { --bg: #1A1F2B; --surface: #1A1F2B; --surface-2: #232A37; --hairline: rgba(244, 240, 230, 0.10); --text: #F4F0E6; --text-muted: #9A9684; --text-dim: #5E5A4D; --accent: #B89456; --max-w: 1280px; --gutter: clamp(24px, 5vw, 80px); --font-display: 'Archivo', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-serif: 'Instrument Serif', Georgia, serif; } /* ── Palettes ─────────────────────────────────────────────────────── */ html[data-palette="ink"] { --bg: #1A1F2B; --surface: #1A1F2B; --surface-2: #232A37; --text: #F4F0E6; --text-muted: #9A9684; --text-dim: #5E5A4D; --accent: #B89456; --hairline: rgba(244, 240, 230, 0.10); } html[data-palette="forest"] { --bg: #1B2520; --surface: #1B2520; --surface-2: #243029; --text: #ECE9DE; --text-muted: #8E9389; --text-dim: #525A53; --accent: #C9A961; --hairline: rgba(236, 233, 222, 0.10); } html[data-palette="charcoal"] { --bg: #15171A; --surface: #15171A; --surface-2: #1F2226; --text: #F2EFE8; --text-muted: #92908A; --text-dim: #55534E; --accent: #E8794B; --hairline: rgba(242, 239, 232, 0.10); } html[data-palette="oxblood"] { --bg: #211618; --surface: #211618; --surface-2: #2C1E20; --text: #F1E7DC; --text-muted: #9A8A85; --text-dim: #5C504B; --accent: #C99172; --hairline: rgba(241, 231, 220, 0.10); } /* Light mode swaps bg/text */ html[data-mode="light"][data-palette="ink"] { --bg: #F4F0E6; --surface: #F4F0E6; --surface-2: #EAE3D2; --text: #1A1F2B; --text-muted: #5E5A4D; --text-dim: #9A9684; --hairline: rgba(26, 31, 43, 0.10); } html[data-mode="light"][data-palette="forest"] { --bg: #EFEBDD; --surface: #EFEBDD; --surface-2: #E2DBC7; --text: #1B2520; --text-muted: #525A53; --text-dim: #8E9389; --hairline: rgba(27, 37, 32, 0.10); } html[data-mode="light"][data-palette="charcoal"] { --bg: #F4F1EA; --surface: #F4F1EA; --surface-2: #E8E3D7; --text: #15171A; --text-muted: #55534E; --text-dim: #92908A; --hairline: rgba(21, 23, 26, 0.10); } html[data-mode="light"][data-palette="oxblood"] { --bg: #F1EBDD; --surface: #F1EBDD; --surface-2: #E5DBC7; --text: #211618; --text-muted: #5C504B; --text-dim: #9A8A85; --hairline: rgba(33, 22, 24, 0.10); } /* ── Royal Navy — 5th palette ───────────────────────────────────── */ html[data-palette="civic"] { --hero-bg: #0B2545; --hero-text: #F4EFE2; --hero-accent: #C9A961; --hero-mute: rgba(244, 239, 226, 0.62); /* Page body = charcoal dark (hero is the only colored zone) */ --bg: #15171A; --surface: #15171A; --surface-2: #1F2226; --text: #F2EFE8; --text-muted: #92908A; --text-dim: #55534E; --accent: #E8794B; --hairline: rgba(242, 239, 232, 0.10); } html[data-mode="light"][data-palette="civic"] { --bg: #F4F1EA; --surface: #F4F1EA; --surface-2: #E8E3D7; --text: #15171A; --text-muted: #55534E; --text-dim: #92908A; --hairline: rgba(21, 23, 26, 0.10); } /* ── Reset ────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 250ms ease, color 250ms ease; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* ── Layout ───────────────────────────────────────────────────────── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } /* ── Nav ──────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--hairline); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav-logo { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.035em; color: var(--text); line-height: 1; } .nav-links { display: flex; align-items: center; gap: 36px; font-size: 14px; color: var(--text-muted); } .nav-links a { position: relative; transition: color 200ms ease; } .nav-links a:hover { color: var(--text); } .nav-links a.active { color: var(--text); } .nav-cta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; padding: 10px 18px; border: 1px solid var(--text); color: var(--text); border-radius: 999px; transition: background 200ms ease, color 200ms ease; white-space: nowrap; } .nav-cta:hover { background: var(--text); color: var(--bg); } @media (max-width: 720px) { .nav-links { gap: 20px; } .nav-links .hide-sm { display: none; } } @media (max-width: 640px) { .nav-links { gap: 16px; } .nav-cta { display: none; } } /* ── Mobile sticky sign-in bar ───────────────────────────────────── */ .mobile-signin { display: none; } @media (max-width: 640px) { .mobile-signin { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 49; padding: 12px 24px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-top: 1px solid var(--hairline); } .mobile-signin a { display: block; width: 100%; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; padding: 13px 0; border: 1px solid var(--text); color: var(--text); border-radius: 999px; transition: background 200ms ease, color 200ms ease; } .mobile-signin a:hover { background: var(--text); color: var(--bg); } /* Civic palette: teal background on the bar when hero is visible */ html[data-palette="civic"] .mobile-signin { background: color-mix(in srgb, var(--bg) 92%, transparent); } /* Push footer up so content isn't hidden behind the bar */ footer { padding-bottom: calc(40px + 60px + env(safe-area-inset-bottom)); } } /* ── Hero ─────────────────────────────────────────────────────────── */ .hero { position: relative; padding: clamp(80px, 14vw, 180px) 0 clamp(60px, 10vw, 140px); overflow: hidden; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 32px; } .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 9vw, 132px); line-height: 0.95; letter-spacing: -0.04em; margin: 0; max-width: 14ch; text-wrap: balance; } .hero h1 em { font-style: normal; font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; color: var(--text); } .hero-sub { margin-top: clamp(24px, 4vw, 44px); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: var(--text-muted); max-width: 52ch; text-wrap: pretty; } .hero-cta-row { margin-top: clamp(36px, 5vw, 56px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* ── Buttons ──────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 999px; font-family: var(--font-body); font-weight: 500; font-size: 15px; transition: transform 200ms ease, background 200ms ease, color 200ms ease; cursor: pointer; white-space: nowrap; } .btn-primary { background: var(--text); color: var(--bg); } .btn-primary:hover { transform: translateY(-1px); } .btn-primary .arc { display: inline-block; width: 18px; height: 12px; position: relative; overflow: visible; } .btn-primary .arc svg { position: absolute; inset: 0; transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1); } .btn-primary:hover .arc svg { transform: translateX(4px); } .btn-ghost { color: var(--text-muted); padding-left: 0; } .btn-ghost:hover { color: var(--text); } /* ── Ledger (stats row) ───────────────────────────────────────────── */ .ledger { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: clamp(40px, 6vw, 72px) 0; } .ledger-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; } @media (max-width: 880px) { .ledger-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; } } .ledger-item .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; } .ledger-item .v { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); letter-spacing: -0.025em; line-height: 1; color: var(--text); } .ledger-item .v .unit { font-size: 0.5em; color: var(--text-muted); margin-left: 4px; font-weight: 400; } /* ── Section ──────────────────────────────────────────────────────── */ .section { padding: clamp(80px, 12vw, 160px) 0; } .section-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 24px; display: flex; align-items: center; gap: 14px; } .section-eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--text-muted); } .section h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 5vw, 64px); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 clamp(40px, 6vw, 80px); max-width: 18ch; text-wrap: balance; } /* Steps */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } @media (max-width: 880px) { .steps { grid-template-columns: 1fr; } } .step { background: var(--bg); padding: clamp(32px, 4vw, 48px) clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px; } .step .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--text-dim); } .step h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; margin: 0; color: var(--text); } .step p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.55; text-wrap: pretty; } /* ── Closer ───────────────────────────────────────────────────────── */ .closer { padding: clamp(100px, 16vw, 200px) 0; text-align: left; position: relative; overflow: hidden; } .closer h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 7vw, 96px); letter-spacing: -0.035em; line-height: 1; margin: 0 0 40px; max-width: 14ch; text-wrap: balance; } .closer h2 em { font-style: normal; font-family: var(--font-serif); font-weight: 400; } /* ── Footer ───────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--hairline); padding: 56px 0 40px; color: var(--text-muted); font-size: 13px; } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; } @media (max-width: 880px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; } } .footer-brand .mark { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.035em; color: var(--text); margin-bottom: 16px; line-height: 1; } .footer-brand p { max-width: 32ch; line-height: 1.55; margin: 0; } .footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 16px; font-weight: 500; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a:hover { color: var(--text); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 32px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); } .footer-bottom .legal { display: flex; gap: 24px; } @media (max-width: 720px) { .footer-bottom { flex-direction: column; gap: 20px; align-items: flex-start; } } /* ── Sub-page heading ────────────────────────────────────────────── */ .page-header { padding: clamp(60px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--hairline); } .page-header .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 24px; } .page-header h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.04em; line-height: 0.95; margin: 0; max-width: 16ch; text-wrap: balance; } .page-header h1 em { font-style: normal; font-family: var(--font-serif); font-weight: 400; } .page-header .lede { margin-top: 32px; font-size: clamp(17px, 1.5vw, 20px); color: var(--text-muted); max-width: 56ch; line-height: 1.5; text-wrap: pretty; } /* ── Two-column body for sub-pages ────────────────────────────────── */ .twocol { display: grid; grid-template-columns: minmax(220px, 1fr) 2.4fr; gap: clamp(36px, 5vw, 80px); padding: clamp(60px, 8vw, 120px) 0; border-bottom: 1px solid var(--hairline); } @media (max-width: 880px) { .twocol { grid-template-columns: 1fr; gap: 16px; } } .twocol .label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-top: 6px; } .twocol h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 24px; max-width: 20ch; } .twocol p { font-size: 17px; line-height: 1.55; color: var(--text); margin: 0 0 16px; max-width: 64ch; } .twocol p.muted { color: var(--text-muted); } /* ── Deal table (portfolio page) ──────────────────────────────────── */ .deals { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; } .deals thead th { text-align: left; font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); padding: 14px 0; border-bottom: 1px solid var(--hairline); } .deals tbody td { padding: 22px 0; border-bottom: 1px solid var(--hairline); color: var(--text); vertical-align: middle; } .deals tbody tr:last-child td { border-bottom: none; } .deals .sector { color: var(--text-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .deals .num { font-variant-numeric: tabular-nums; text-align: right; } .deals .status { display: inline-block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--text-muted); } .deals .status.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } /* ── Language switcher ────────────────────────────────────────────── */ .lang-switch { display: flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; } .lang-btn { padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; color: var(--text-dim); cursor: pointer; background: none; transition: color 180ms ease, border-color 180ms ease; line-height: 1; } .lang-btn.active { color: var(--text); border-color: color-mix(in srgb, var(--text) 40%, transparent); } .lang-btn:not(.active):hover { color: var(--text-muted); } .lang-sep { color: var(--text-dim); line-height: 1; pointer-events: none; } /* ── Royal Navy nav — navy band that blends with the hero ────────── */ html[data-palette="civic"] .nav { background: color-mix(in srgb, #0B2545 90%, transparent); border-bottom-color: rgba(244, 239, 226, 0.15); } html[data-palette="civic"] .nav-logo { color: #F4EFE2; } html[data-palette="civic"] .nav-links { color: rgba(244, 239, 226, 0.6); } html[data-palette="civic"] .nav-links a:hover, html[data-palette="civic"] .nav-links a.active { color: #F4EFE2; } html[data-palette="civic"] .nav-cta { border-color: #F4EFE2; color: #F4EFE2; } html[data-palette="civic"] .nav-links .nav-cta:hover { background: #F4EFE2; color: #0B2545; } html[data-palette="civic"] .lang-btn { color: rgba(244, 239, 226, 0.5); } html[data-palette="civic"] .lang-btn.active { color: #F4EFE2; border-color: rgba(244, 239, 226, 0.4); } html[data-palette="civic"] .lang-sep { color: rgba(244, 239, 226, 0.3); } /* ── Civic hero overrides ────────────────────────────────────────── */ html[data-palette="civic"] .hero { background: var(--hero-bg); min-height: clamp(420px, 42vw, 540px); } html[data-palette="civic"] .hero-eyebrow { color: var(--hero-accent); } html[data-palette="civic"] .hero-eyebrow .dot { background: var(--hero-accent); } html[data-palette="civic"] .hero h1 { color: var(--hero-text); } html[data-palette="civic"] .hero h1 em { color: var(--hero-accent); } html[data-palette="civic"] .hero .hero-sub { color: var(--hero-mute); } html[data-palette="civic"] .hero .btn-primary { background: var(--hero-accent); color: #15171A; } html[data-palette="civic"] .hero .btn-ghost { color: var(--hero-mute); } html[data-palette="civic"] .hero .btn-ghost:hover { color: var(--hero-text); } /* Accent rhyme: unit suffix on ledger numbers ($2.4B, 11.8%, …) */ html[data-palette="civic"] .ledger-item .v .unit { color: var(--hero-accent); } /* Hero wordmark watermark */ .hero-watermark { position: absolute; right: -16px; bottom: -24px; font-family: var(--font-display); font-weight: 900; font-size: clamp(180px, 22vw, 320px); letter-spacing: -0.07em; line-height: 0.8; color: var(--hero-text); opacity: 0; pointer-events: none; user-select: none; white-space: nowrap; transition: opacity 250ms ease; } html[data-palette="civic"] .hero-watermark { opacity: 0.06; } /* Growth-chart SVG overlay */ .hero-chart { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 250ms ease; } html[data-palette="civic"] .hero-chart { opacity: 0.25; } /* ── Auth Modal ──────────────────────────────────────────────────── */ .auth-modal { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; } .auth-modal.open { display: flex; } .auth-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .auth-modal-panel { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: clamp(28px, 5vw, 44px); width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4); } .auth-modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 6px; line-height: 0; border-radius: 6px; transition: color 0.15s, background 0.15s; } .auth-modal-close:hover { color: var(--text); background: var(--surface-2); } .auth-modal-logo { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.04em; color: var(--text); } .auth-modal-title { font-family: var(--font-display); font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; color: var(--text); margin: -4px 0 0; line-height: 1.2; } .auth-modal-sub { font-size: 13px; color: var(--text-muted); margin: -10px 0 0; line-height: 1.5; } .auth-google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 8px; color: var(--text); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .auth-google-btn:hover { border-color: var(--text-muted); } .auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); } #auth-email-form { display: flex; flex-direction: column; gap: 10px; } #auth-email-form input { width: 100%; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 8px; color: var(--text); font-family: var(--font-body); font-size: 14px; outline: none; transition: border-color 0.15s; box-sizing: border-box; } #auth-email-form input::placeholder { color: var(--text-dim); } #auth-email-form input:focus { border-color: var(--accent); } .auth-submit { width: 100%; justify-content: center; padding: 11px; font-size: 14px; margin-top: 2px; } .auth-toggle { font-size: 12px; color: var(--text-muted); text-align: center; margin: 0; } .auth-toggle-btn { background: none; border: none; padding: 0; margin-left: 4px; color: var(--accent); font-family: var(--font-body); font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: underline; } .auth-toggle-btn:hover { color: var(--text); } .auth-resend-btn { display: block; background: none; border: none; padding: 0; margin: -8px auto 0; color: var(--accent); font-family: var(--font-body); font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: underline; } .auth-resend-btn:hover { color: var(--text); } .auth-resend-btn[hidden] { display: none; } .auth-verify-notice { font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.5; margin: 0; } .auth-error { font-size: 12px; color: #E8794B; min-height: 1.4em; text-align: center; line-height: 1.5; } /* Civic palette: accent the modal submit button with gold */ html[data-palette="civic"] .auth-submit { background: var(--hero-accent); color: #15171A; border-color: var(--hero-accent); } html[data-palette="civic"] .auth-submit:hover { background: #d4b66e; border-color: #d4b66e; } /* ── Misc ─────────────────────────────────────────────────────────── */ ::selection { background: var(--accent); color: var(--bg); }