/* 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 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.035em; color: var(--text); line-height: 1; } .logo-mark { flex-shrink: 0; } .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 { display: flex; align-items: center; gap: 8px; 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; } .page-header--compact h1 { font-size: clamp(28px, 4vw, 44px); max-width: 28ch; } /* ── Auth action landing (email confirmation link) ─────────────────── */ .auth-action-wrap { padding: clamp(48px, 8vw, 96px) 0; display: flex; justify-content: center; } .auth-action-card { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; padding: clamp(28px, 5vw, 44px); text-align: center; } .auth-action-status p { margin: 0; color: var(--text-muted); line-height: 1.5; } .auth-action-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--text) !important; margin-bottom: 8px !important; } .auth-action-sub { margin-bottom: 24px !important; } .auth-action-cta { width: 100%; justify-content: center; } /* ── 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 { display: flex; align-items: center; gap: 8px; 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); } /* ── Client dashboard ────────────────────────────────────────────── Structure ported from the client dashboard sketch, re-skinned onto the site palette. All selectors are `dash-` prefixed so nothing here can collide with the marketing pages. Tokens are scoped to .dash-app the same way --hero-* is scoped to .hero. */ /* Tokens live on the page wrapper, not .dash-app — the drawer, overlay and modal are siblings of .dash-app and must resolve them too. */ .dash-page { --dash-panel: #FBF9F4; --dash-panel-alt: #F7F4EC; --dash-line: #E1DACB; --dash-sidebar-bg: #0B2545; --dash-sidebar-text: #F4EFE2; --dash-sidebar-mute: rgba(244, 239, 226, 0.62); --dash-accent: #C9A961; --dash-warn: #B24A3C; --dash-radius: 10px; } html[data-mode="dark"] .dash-page { --dash-panel: #1F2226; --dash-panel-alt: #24282C; --dash-line: rgba(242, 239, 232, 0.12); } .dash-app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; } /* ── Sidebar ───────────────────────────────────────────────────────── */ .dash-sidebar { background: var(--dash-sidebar-bg); color: var(--dash-sidebar-text); padding: 28px 20px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .dash-sidebar::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; background: linear-gradient(135deg, var(--dash-accent) 0%, transparent 70%); opacity: 0.16; transform: rotate(20deg); } .dash-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 44px; position: relative; z-index: 1; color: var(--dash-sidebar-text); } .dash-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.035em; line-height: 1; } .dash-nav { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; } .dash-nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--dash-sidebar-mute); transition: background 150ms ease, color 150ms ease; } .dash-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--dash-sidebar-text); } .dash-nav-item.active { background: var(--dash-accent); color: #15171A; font-weight: 600; } .dash-nav-icon { width: 16px; text-align: center; font-size: 13px; } .dash-sidebar-foot { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 16px; font-size: 13px; } .dash-client-name { font-weight: 600; color: var(--dash-sidebar-text); } .dash-logout { display: block; margin-top: 6px; padding: 0; color: var(--dash-sidebar-mute); font-size: 12.5px; transition: color 150ms ease; } .dash-logout:hover { color: var(--dash-sidebar-text); } /* ── Main column ───────────────────────────────────────────────────── */ .dash-main { padding: 36px clamp(20px, 3vw, 44px) 60px; min-width: 0; } .dash-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 32px; } .dash-greeting { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.03em; margin: 0; color: var(--text); } .dash-greeting-sub { font-size: 13.5px; color: var(--text-muted); margin: 6px 0 0; } .dash-status-pill { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--dash-accent) 20%, transparent); color: var(--text); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 100px; margin-top: 12px; } .dash-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dash-accent); } .dash-topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .dash-icon-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--dash-panel); border: 1px solid var(--dash-line); display: flex; align-items: center; justify-content: center; font-size: 15px; position: relative; } .dash-dot { position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--dash-warn); border: 1.5px solid var(--bg); } .dash-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--dash-sidebar-bg); color: var(--dash-sidebar-text); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; } /* ── KPI cards ─────────────────────────────────────────────────────── */ .dash-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; } .dash-kpi { background: var(--dash-panel); border: 1px solid var(--dash-line); border-radius: var(--dash-radius); padding: 20px 20px 18px; } .dash-kpi-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } .dash-kpi-value { font-family: var(--font-mono); font-size: 24px; font-weight: 500; color: var(--text); } .dash-kpi--warn .dash-kpi-value { color: var(--dash-warn); } .dash-kpi-foot { font-size: 12px; color: var(--text-muted); margin-top: 6px; } /* ── Section head ──────────────────────────────────────────────────── */ .dash-section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; } .dash-section-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; margin: 0; color: var(--text); } /* ── Dashboard buttons ─────────────────────────────────────────────── */ .dash-btn { border-radius: 8px; font-family: var(--font-body); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } .dash-btn--primary { background: var(--dash-sidebar-bg); color: var(--dash-sidebar-text); padding: 11px 18px; font-size: 13.5px; } .dash-btn--primary:hover { background: color-mix(in srgb, var(--dash-sidebar-bg) 82%, var(--dash-accent)); } .dash-btn--ghost { border: 1px solid var(--dash-line); color: var(--text); padding: 8px 14px; font-size: 12.5px; } .dash-btn--ghost:hover { border-color: var(--dash-accent); color: var(--dash-accent); } /* ── Invoice table ─────────────────────────────────────────────────── */ .dash-table-wrap { background: var(--dash-panel); border: 1px solid var(--dash-line); border-radius: var(--dash-radius); overflow-x: auto; margin-bottom: 36px; } .dash-table { width: 100%; border-collapse: collapse; min-width: 720px; } .dash-table thead th { text-align: left; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 500; padding: 14px 18px; border-bottom: 1px solid var(--dash-line); background: var(--dash-panel-alt); white-space: nowrap; } .dash-table tbody td { padding: 15px 18px; font-size: 13.5px; border-bottom: 1px solid var(--dash-line); vertical-align: middle; } .dash-table tbody tr:last-child td { border-bottom: none; } .dash-table tbody tr { cursor: pointer; transition: background 120ms ease; } .dash-table tbody tr:hover { background: var(--dash-panel-alt); } .dash-mono { font-family: var(--font-mono); font-size: 13px; } .dash-row-action { font-size: 12px; font-weight: 600; color: var(--dash-accent); padding: 0; white-space: nowrap; } .dash-row-action:hover { text-decoration: underline; } /* ── Status badges ─────────────────────────────────────────────────── */ .dash-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 100px; white-space: nowrap; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); } .dash-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .dash-badge--pending { background: color-mix(in srgb, #C08A2E 18%, transparent); color: #8A6414; } .dash-badge--verified { background: color-mix(in srgb, var(--dash-accent) 22%, transparent); color: #7A6224; } .dash-badge--disbursed { background: color-mix(in srgb, var(--dash-sidebar-bg) 16%, transparent); color: var(--dash-sidebar-bg); } .dash-badge--paid { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text-muted); } .dash-badge--late { background: color-mix(in srgb, var(--dash-warn) 18%, transparent); color: var(--dash-warn); } html[data-mode="dark"] .dash-badge--pending { color: #E0B865; } html[data-mode="dark"] .dash-badge--verified { color: var(--dash-accent); } html[data-mode="dark"] .dash-badge--disbursed { background: rgba(244, 239, 226, 0.12); color: #9FC0E8; } /* ── Two-panel grid ────────────────────────────────────────────────── */ .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .dash-panel { background: var(--dash-panel); border: 1px solid var(--dash-line); border-radius: var(--dash-radius); padding: 22px; } .dash-panel-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--text); } .dash-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dash-line); font-size: 13.5px; } .dash-item:last-of-type { border-bottom: none; } .dash-item-total { font-weight: 700; } .dash-check { color: var(--dash-accent); font-weight: 700; } .dash-missing { color: var(--dash-warn); font-weight: 700; } .dash-panel-cta { margin-top: 14px; } /* ── Detail drawer ─────────────────────────────────────────────────── */ .dash-overlay { position: fixed; inset: 0; background: rgba(11, 37, 69, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 40; } .dash-overlay.open { opacity: 1; pointer-events: auto; } .dash-drawer { position: fixed; top: 0; bottom: 0; right: -440px; width: min(400px, 100vw); background: var(--dash-panel); border-left: 1px solid var(--dash-line); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18); transition: right 250ms ease; z-index: 41; padding: 28px 26px; overflow-y: auto; } .dash-drawer.open { right: 0; } .dash-drawer-close { float: right; font-size: 16px; color: var(--text-muted); padding: 4px; line-height: 1; } .dash-drawer-close:hover { color: var(--text); } .dash-drawer-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--text); } .dash-drawer-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 22px; } .dash-drawer-cta { width: 100%; margin-top: 18px; } .dash-timeline { margin: 20px 0; } .dash-t-item { display: flex; gap: 12px; margin-bottom: 18px; } .dash-t-rail { position: relative; flex-shrink: 0; width: 12px; } .dash-t-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--dash-accent); margin-top: 3px; position: relative; z-index: 1; } .dash-t-dot--pending { background: var(--dash-line); } .dash-t-line { position: absolute; left: 5px; top: 16px; bottom: -22px; width: 2px; background: var(--dash-line); } .dash-t-title { font-size: 13.5px; font-weight: 600; color: var(--text); } .dash-t-title--pending { color: var(--text-muted); font-weight: 500; } .dash-t-date { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .dash-note { background: var(--dash-panel-alt); border: 1px solid var(--dash-line); border-radius: 8px; padding: 12px 14px; font-size: 12.5px; color: var(--text-muted); margin-top: 22px; line-height: 1.55; } .dash-note b { color: var(--text); } /* ── New-invoice modal ─────────────────────────────────────────────── */ .dash-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(11, 37, 69, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 50; } .dash-modal.open { display: flex; } .dash-modal-card { background: var(--surface); border: 1px solid var(--hairline); width: 440px; max-width: 100%; max-height: 90vh; overflow-y: auto; border-radius: 14px; padding: 30px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28); } .dash-modal-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--text); } .dash-modal-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; } .dash-field { margin-bottom: 14px; } .dash-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; } .dash-field input, .dash-file { width: 100%; padding: 10px 12px; border: 1px solid var(--dash-line); border-radius: 7px; font-size: 13.5px; font-family: var(--font-body); background: var(--dash-panel); color: var(--text); } .dash-field input:focus { outline: 2px solid var(--dash-accent); outline-offset: 1px; } .dash-file { color: var(--text-muted); cursor: pointer; text-align: center; border-style: dashed; } .dash-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } /* ── Responsive ────────────────────────────────────────────────────── */ @media (max-width: 1080px) { .dash-kpi-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .dash-app { grid-template-columns: 1fr; } .dash-sidebar { flex-direction: row; align-items: center; justify-content: space-between; padding: 16px 20px; } .dash-sidebar .dash-nav { display: none; } .dash-brand { margin-bottom: 0; } .dash-sidebar-foot { border-top: none; padding-top: 0; text-align: right; } .dash-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .dash-kpi-row { grid-template-columns: 1fr; } .dash-topbar { flex-direction: column; } } /* Empty and onboarding states — real conditions, not errors. */ .dash-empty { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; margin: 0; } .dash-empty-cell { color: var(--text-muted); text-align: center; padding: 28px 18px !important; } .dash-onboarding { max-width: 60ch; } .dash-onboarding p { color: var(--text-muted); font-size: 14px; line-height: 1.6; margin: 0; } /* Admin forms and flash messages */ .dash-flash { padding: 12px 16px; border-radius: 8px; font-size: 13.5px; margin-bottom: 18px; border: 1px solid var(--dash-line); } .dash-flash--ok { background: color-mix(in srgb, var(--dash-accent) 14%, transparent); color: var(--text); } .dash-flash--err { background: color-mix(in srgb, var(--dash-warn) 14%, transparent); color: var(--text); border-color: var(--dash-warn); } .dash-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .dash-inline-form select, .dash-stack-form select, .dash-stack-form input { padding: 8px 10px; border: 1px solid var(--dash-line); border-radius: 7px; background: var(--dash-panel); color: var(--text); font-family: var(--font-body); font-size: 13px; } .dash-stack-form { display: flex; flex-direction: column; gap: 4px; } .dash-stack-form .dash-btn { align-self: flex-start; margin-top: 10px; } .dash-stack-form input, .dash-stack-form select { width: 100%; } .dash-hint { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; } /* Nav entries for screens that don't exist yet: visibly pending, not clickable, so they can't masquerade as broken links. */ .dash-nav-item--soon { opacity: .45; cursor: default; } .dash-nav-item--soon:hover { background: none; color: var(--dash-sidebar-mute); } /* Salir: acción secundaria junto al nombre de la cuenta. Deliberadamente discreta — el destino primario es el panel, no cerrar sesión. */ .nav-signout { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 6px 4px; margin-left: -6px; transition: color 200ms ease; } .nav-signout:hover { color: var(--text); text-decoration: underline; }