/* Debtster design tokens — anchored to the Flutter app's light theme (client/lib/src/shared/theme/palette.dart). Same hex values the app uses on every screen, so marketing -> store -> app share a continuous palette and typography. */ :root { /* --- Brand (light theme) --- */ --brand-primary: #41B1D6; /* Palette.blue */ --brand-primary-dark: #1A6986; /* Palette.darkBlue */ --brand-primary-deep: #0E4A60; /* darkened for hover/active */ --brand-surface: #FFFFFF; --brand-scaffold: #D2EAF0; /* Palette.lightBlue (light scaffold) */ --brand-scaffold-soft: #E7F4F8; /* page background, slightly lighter */ --brand-divider: rgba(26, 105, 134, 0.12); /* --- Semantic --- */ --positive: #51AB42; /* gains, settled */ --positive-soft: rgba(81, 171, 66, 0.12); --negative: #D04949; /* debts owed */ --negative-soft: rgba(208, 73, 73, 0.12); --accent: #FFB43F; /* warning/orange highlights */ --accent-deep: #C57800; /* darkened orange on light bg */ /* --- Typography (matches the app's Exo 2 stack) --- */ --font-display: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* --- Text --- */ --text-strong: #0E4A60; --text-body: #1A6986; --text-muted: rgba(26, 105, 134, 0.72); --text-on-primary: #FFFFFF; /* --- Geometry --- */ --radius: 18px; --radius-sm: 12px; --radius-pill: 999px; --gap-section: 96px; --gap-section-mobile: 56px; /* --- Elevation (uses the brand-blue tint so shadows feel "in palette") --- */ --shadow-sm: 0 2px 6px rgba(26, 105, 134, 0.08); --shadow-md: 0 8px 24px rgba(26, 105, 134, 0.12); --shadow-lg: 0 24px 60px -16px rgba(26, 105, 134, 0.28); --shadow-glow-primary: 0 0 64px rgba(65, 177, 214, 0.45); --shadow-glow-accent: 0 0 48px rgba(255, 180, 63, 0.40); /* --- Motion --- */ --ease-quick: 150ms cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: 280ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* ─────────────────────────────────────────────────────────────────────── Marketing landing palette (`--l-*`). The landing page (index.html + landing.css) is themed independently from the legal / 404 pages, which keep the Exo 2 + --brand-* tokens above. The values below replicate the design's `landingPalette()` derivation for the default `cyan` brand (#42B1D6 — the app's blue), in light and dark. Only the landing page sets `data-theme="dark"` on , so the dark block never leaks into the legal pages. Light: tints/ink derived from the brand toward white / near-black. Dark: the app's cyan-dark tokens mapped directly. Alpha shades are baked in (no color-mix) for the widest browser support behind nginx. ─────────────────────────────────────────────────────────────────────── */ :root { /* Marketing typography — distinct from the in-app Exo 2 stack. */ --l-font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --l-font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Light palette (default). */ --l-brand: #42B1D6; --l-brand-dark: #2F8FAE; --l-brand-soft: #8FD3E5; --l-on-brand: #FFFFFF; --l-page-bg: #FFFFFF; --l-panel: #FFFFFF; --l-panel-tint: #ECF7FB; --l-ink: #12313B; --l-ink-2: #246176; --l-muted: #71B3C9; --l-line: #D5EEF6; --l-green: #3D9F6F; --l-red: #D86A5C; /* Brand alpha shades + effects (light). */ --l-glow: rgba(66, 177, 214, 0.32); --l-band: rgba(66, 177, 214, 0.10); --l-brand-a25: rgba(66, 177, 214, 0.25); --l-brand-a18: rgba(66, 177, 214, 0.18); --l-brand-a06: rgba(66, 177, 214, 0.06); --l-hero-radial: rgba(66, 177, 214, 0.16); --l-nav-bg: rgba(255, 255, 255, 0.82); --l-bezel: linear-gradient(150deg, #1b2730, #0a1116); } :root[data-theme="dark"] { --l-brand: #5BC0E0; --l-brand-dark: #2F8FAE; --l-brand-soft: #1E4A5A; --l-on-brand: #FFFFFF; --l-page-bg: #0E1A1F; --l-panel: #17262D; --l-panel-tint: #213C46; --l-ink: #E6F4F9; --l-ink-2: #9CC7D6; --l-muted: #6A8E9B; --l-line: #243842; --l-green: #5CC494; --l-red: #E88577; --l-glow: rgba(91, 192, 224, 0.50); --l-band: rgba(91, 192, 224, 0.10); --l-brand-a25: rgba(91, 192, 224, 0.25); --l-brand-a18: rgba(91, 192, 224, 0.18); --l-brand-a06: rgba(91, 192, 224, 0.06); --l-hero-radial: rgba(91, 192, 224, 0.16); --l-nav-bg: rgba(14, 26, 31, 0.82); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--brand-scaffold-soft); color: var(--text-body); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--brand-primary-dark); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { display: block; max-width: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }