/* ───────────────────────────────────────────────────────────── Moor — design tokens (3 themes, applied via class on ) ───────────────────────────────────────────────────────────── */ .moor-warmlight { --canvas: #EAE2D2; --sidebar: #D9CFBC; --surface: #F7F2E7; --surface-raised: #FCF9F0; --surface-hover: rgba(36, 60, 56, 0.04); --overlay: rgba(36, 60, 56, 0.06); --ink: #15201D; --ink-mid: #3F574F; --ink-lo: #6E8478; --ink-faint: #A8B7AB; --line: rgba(36, 60, 56, 0.10); --line-strong: rgba(36, 60, 56, 0.16); --line-faint: rgba(36, 60, 56, 0.05); --accent: #2A6B5E; --accent-soft: rgba(42, 107, 94, 0.10); --primary: #2A6B5E; --primary-hover: #234F46; --income: #3F8A66; --income-soft: rgba(63, 138, 102, 0.10); --expense: #B85F4E; --expense-soft: rgba(184, 95, 78, 0.10); --warning: #B3852C; --warning-soft: rgba(179, 133, 44, 0.12); --shadow-1: 0 1px 0 rgba(36,60,56,0.04), 0 1px 3px rgba(36,60,56,0.06); --shadow-2: 0 1px 0 rgba(36,60,56,0.04), 0 6px 18px -8px rgba(36,60,56,0.18); --ring-focus: 0 0 0 3px rgba(42, 107, 94, 0.22); color-scheme: light; } .moor-seaglass { --canvas: #0B1817; --sidebar: #142A28; --surface: #122826; --surface-raised: #1B3936; --surface-hover: rgba(143, 189, 181, 0.05); --overlay: rgba(143, 189, 181, 0.08); --ink: #EEF5F2; --ink-mid: #B1CDC8; --ink-lo: #6F938E; --ink-faint: #3B5957; --line: rgba(143, 189, 181, 0.12); --line-strong: rgba(143, 189, 181, 0.22); --line-faint: rgba(143, 189, 181, 0.07); --accent: #9ECEC5; --accent-soft: rgba(158, 206, 197, 0.14); --primary: #9ECEC5; --primary-hover: #B5DCD3; --income: #6FB386; --income-soft: rgba(111, 179, 134, 0.12); --expense: #E08177; --expense-soft: rgba(224, 129, 119, 0.12); --warning: #DAA756; --warning-soft: rgba(218, 167, 86, 0.14); --shadow-1: 0 1px 0 rgba(255,255,255,0.02), 0 2px 8px rgba(0,0,0,0.30); --shadow-2: 0 1px 0 rgba(255,255,255,0.02), 0 10px 24px -8px rgba(0,0,0,0.45); --ring-focus: 0 0 0 3px rgba(158, 206, 197, 0.28); color-scheme: dark; } .moor-midnight { --canvas: #060D0C; --sidebar: #0E1B19; --surface: #0D1716; --surface-raised: #142322; --surface-hover: rgba(117, 180, 172, 0.05); --overlay: rgba(117, 180, 172, 0.07); --ink: #E4EFEC; --ink-mid: #95B9B3; --ink-lo: #547772; --ink-faint: #2A4441; --line: rgba(117, 180, 172, 0.10); --line-strong: rgba(117, 180, 172, 0.18); --line-faint: rgba(117, 180, 172, 0.06); --accent: #8AC3BB; --accent-soft: rgba(138, 195, 187, 0.12); --primary: #8AC3BB; --primary-hover: #A2D2CB; --income: #66B380; --income-soft: rgba(102, 179, 128, 0.11); --expense: #DD7C71; --expense-soft: rgba(221, 124, 113, 0.11); --warning: #C99449; --warning-soft: rgba(201, 148, 73, 0.12); --shadow-1: 0 1px 0 rgba(255,255,255,0.02), 0 2px 10px rgba(0,0,0,0.45); --shadow-2: 0 1px 0 rgba(255,255,255,0.02), 0 12px 28px -10px rgba(0,0,0,0.55); --ring-focus: 0 0 0 3px rgba(138, 195, 187, 0.26); color-scheme: dark; } /* ───────────────────────────────────────────────────────────── Moor — site layout & component styles ───────────────────────────────────────────────────────────── */ :root { --page-max: 1200px; --page-pad: clamp(20px, 4vw, 56px); --section-gap: clamp(96px, 12vw, 180px); --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --sans: 'Manrope', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --announce-h: 40px; --nav-h: 68px; } html, body { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: var(--sans); background: var(--canvas); color: var(--ink); font-size: 16px; line-height: 1.55; font-feature-settings: 'ss01' on, 'cv11' on; transition: background 240ms ease, color 240ms ease; } *, *::before, *::after { box-sizing: border-box; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img, svg { display: block; max-width: 100%; } main { overflow: clip; } /* ── Layout primitives ── */ .container { width: 100%; max-width: var(--page-max); margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); } section { padding: var(--section-gap) 0; scroll-margin-top: calc(var(--announce-h) + var(--nav-h) + 20px); } section + section { padding-top: 0; } /* ── Typography ── */ .eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-lo); font-weight: 600; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--ink-lo); display: inline-block; flex-shrink: 0; } h1, h2, h3, h4 { margin: 0; font-weight: 400; } h1.display, h2.display { font-family: var(--serif); font-size: clamp(38px, 4vw, 52px); line-height: 1.18; letter-spacing: -0.015em; font-weight: 400; text-wrap: balance; } h2.display { font-size: clamp(34px, 3.8vw, 48px); } h1.display em, h2.display em { font-style: italic; color: var(--accent); } .lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-mid); max-width: 56ch; text-wrap: pretty; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .section-intro { max-width: 760px; margin-bottom: 56px; } .section-intro .eyebrow { margin-bottom: 18px; } .section-intro h2 { margin-bottom: 20px; } /* ── Announcement bar ── */ .announcement { position: sticky; top: 0; z-index: 110; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-mid); transition: background 240ms ease; } .announcement .container { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; min-height: var(--announce-h); } .announcement .container > span:last-child { flex: 1 1 auto; } .announcement .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 4px 8px; border-radius: 4px; font-weight: 500; } .announcement .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--income); display: inline-block; flex-shrink: 0; box-shadow: 0 0 0 4px var(--income-soft); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ── Nav ── */ .nav { position: sticky; top: var(--announce-h); z-index: 100; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); background: color-mix(in oklab, var(--canvas) 78%, transparent); border-bottom: 1px solid var(--line-faint); transition: background 240ms ease, border-color 240ms ease; } .nav .container { display: flex; align-items: center; gap: 24px; padding-top: 16px; padding-bottom: 16px; min-height: var(--nav-h); } .nav-logo { display: inline-flex; align-items: center; gap: 10px; } .nav-logo img { height: 30px; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: 4px; margin-left: 24px; } .nav-links a { font-size: 14px; color: var(--ink-mid); padding: 8px 14px; border-radius: 8px; white-space: nowrap; transition: color 160ms, background 160ms; } .nav-links a:hover { color: var(--ink); background: var(--surface-hover); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .theme-toggle { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-mid); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 160ms, color 160ms, border-color 160ms; } .theme-toggle:hover { color: var(--ink); background: var(--surface-hover); border-color: var(--line-strong); } /* Sun/moon icon switching via theme class on */ .icon-sun { display: none; } .icon-moon { display: block; } .moor-seaglass .icon-sun, .moor-midnight .icon-sun { display: block; } .moor-seaglass .icon-moon, .moor-midnight .icon-moon { display: none; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; border-radius: 10px; padding: 11px 18px; border: 1px solid transparent; cursor: pointer; transition: transform 120ms ease, background 160ms, color 160ms, border-color 160ms, box-shadow 160ms; text-decoration: none; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 8px; } .btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 12px; } .btn-primary { background: var(--primary); color: var(--canvas); border-color: var(--primary); } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.18); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn-outline:hover { background: var(--surface-hover); border-color: var(--ink-lo); transform: translateY(-1px); } .btn .arrow { display: inline-flex; align-items: center; transition: transform 200ms ease; } .btn:hover .arrow { transform: translateX(3px); } /* ── Hero ── */ .hero { padding-top: 80px; padding-bottom: var(--section-gap); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 85% 18%, var(--accent-soft), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 90%, var(--warning-soft), transparent 60%); pointer-events: none; opacity: 0.9; } .hero .container { position: relative; } .hero-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 5vw, 72px); align-items: center; } .hero-copy { max-width: 580px; } .hero-copy h1 { margin: 20px 0 24px; display: block; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } .trust-strip { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 12.5px; color: var(--ink-lo); font-family: var(--mono); letter-spacing: -0.01em; } .trust-strip span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .trust-strip svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; } /* ── Product mock (hero) ── */ .mock-stage { position: relative; width: 100%; max-width: 640px; margin-left: auto; padding: 56px 50px 64px; display: block; } .mock-frame { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-2); overflow: hidden; position: relative; z-index: 1; will-change: transform; transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1); } .mock-titlebar { height: 30px; display: flex; align-items: center; padding: 0 12px; gap: 6px; border-bottom: 1px solid var(--line-faint); background: var(--surface-raised); } .mock-titlebar .tdot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); } .mock-titlebar .filename { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-lo); } .mock-body { display: grid; grid-template-columns: 140px 1fr; min-height: 360px; } .mock-sidebar { background: var(--sidebar); padding: 14px 12px; border-right: 1px solid var(--line); font-size: 12px; display: flex; flex-direction: column; gap: 4px; } .mock-sidebar .brand { display: flex; align-items: center; gap: 8px; padding: 4px 6px 14px; border-bottom: 1px solid var(--line-faint); margin-bottom: 8px; } .mock-sidebar .brand-mark { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: var(--canvas); font-family: var(--serif); font-style: italic; font-size: 14px; } .mock-sidebar .brand-name { font-family: var(--serif); font-size: 16px; letter-spacing: -0.01em; color: var(--ink); } .mock-section-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); padding: 8px 6px 4px; } .mock-nav-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--ink-mid); font-weight: 500; } .mock-nav-item.active { background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-1); } .mock-nav-item .ndot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; } .mock-nav-item.active .ndot { background: var(--accent); } .mock-main { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; } .mock-greet { display: flex; align-items: baseline; justify-content: space-between; } .mock-greet h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); } .mock-greet .period { font-family: var(--mono); font-size: 10.5px; color: var(--ink-lo); letter-spacing: 0.08em; text-transform: uppercase; } .mock-balance { display: flex; align-items: flex-end; gap: 12px; } .mock-balance .amount { font-family: var(--serif); font-size: 40px; letter-spacing: -0.02em; line-height: 1; color: var(--ink); } .mock-balance .delta { font-family: var(--mono); font-size: 12px; color: var(--income); padding: 2px 6px; border-radius: 4px; background: var(--income-soft); margin-bottom: 4px; } .mock-spark { height: 56px; border-radius: 8px; background: var(--surface-raised); position: relative; overflow: hidden; border: 1px solid var(--line-faint); } .mock-spark svg { width: 100%; height: 100%; display: block; } .mock-rows { display: flex; flex-direction: column; gap: 1px; background: var(--line-faint); border-radius: 8px; overflow: hidden; } .mock-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 12px; background: var(--surface-raised); align-items: center; font-size: 12px; } .mock-row .merch { color: var(--ink); font-weight: 500; } .mock-row .cat { color: var(--ink-lo); font-family: var(--mono); font-size: 10.5px; } .mock-row .amt { font-family: var(--mono); font-size: 12px; color: var(--ink); } .mock-row .amt.in { color: var(--income); } .mock-row .amt.out { color: var(--expense); } /* Floating cards */ .mock-card { position: absolute; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-2); font-size: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; } .mock-card .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-lo); text-transform: uppercase; } .mock-card strong { font-family: var(--serif); font-size: 18px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); } .mock-card .row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--ink-mid); white-space: nowrap; } .mock-card .row strong { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--ink); } .mock-card--tl { top: 0; left: 0; max-width: 200px; } .mock-card--br { bottom: 0; right: 0; max-width: 220px; } /* ── Features grid ── */ .feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .feat-card { background: var(--surface); padding: 28px; display: flex; flex-direction: column; gap: 12px; min-height: 280px; position: relative; transition: background 200ms; } .feat-card:hover { background: var(--surface-raised); } .feat-num { position: absolute; top: 18px; right: 22px; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: 0.08em; } .feat-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; } .feat-card h3 { font-family: var(--serif); font-size: 24px; letter-spacing: -0.01em; line-height: 1.15; } .feat-card p { color: var(--ink-mid); font-size: 14.5px; line-height: 1.5; margin: 0; } /* ── Privacy ── */ .split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 88px); align-items: center; } .privacy-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; } .privacy-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15px; color: var(--ink-mid); align-items: flex-start; padding-top: 2px; } .privacy-list li svg { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; } .diagram { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 36px; box-shadow: var(--shadow-1); } .diagram-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-lo); margin-bottom: 20px; display: flex; justify-content: space-between; } .diagram-canvas { position: relative; height: 280px; background: var(--surface-raised); border-radius: 14px; border: 1px solid var(--line-faint); overflow: hidden; } .diagram-canvas::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line-faint) 1px, transparent 1px), linear-gradient(90deg, var(--line-faint) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.55; } .dnode { position: absolute; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-1); font-weight: 500; color: var(--ink); z-index: 2; } .dnode svg { width: 14px; height: 14px; color: var(--ink-mid); } .dnode-you { top: 30px; left: 24px; } .dnode-mac { top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--accent); color: var(--canvas); border-color: var(--accent); } .dnode-mac svg { color: var(--canvas); } .dnode-csv { top: 30px; right: 24px; } .dnode-cloud { bottom: 24px; right: 24px; opacity: 0.5; text-decoration: line-through; } .dnode-data { bottom: 24px; left: 24px; } .dlabel { position: absolute; font-family: var(--mono); font-size: 10px; color: var(--ink-lo); letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface-raised); padding: 2px 6px; border-radius: 3px; z-index: 3; } /* ── Alpha status ── */ .status-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .status-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 16px; } .status-card .pill { align-self: flex-start; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; font-weight: 500; } .status-card.ready .pill { background: var(--income-soft); color: var(--income); } .status-card.rough .pill { background: var(--warning-soft); color: var(--warning); } .status-card.want .pill { background: var(--accent-soft); color: var(--accent); } .status-card h3 { font-family: var(--serif); font-size: 28px; letter-spacing: -0.01em; line-height: 1.1; } .status-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .status-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14.5px; color: var(--ink-mid); line-height: 1.5; align-items: flex-start; } .status-list li::before { content: ''; width: 4px; height: 4px; background: var(--ink-faint); border-radius: 50%; margin-top: 9px; margin-left: 7px; } .alpha-warn { margin-top: 32px; padding: 20px 24px; background: var(--warning-soft); border-left: 3px solid var(--warning); border-radius: 0 12px 12px 0; font-size: 14.5px; color: var(--ink); font-family: var(--mono); letter-spacing: -0.005em; } /* ── Open source / code card ── */ .code-card { background: var(--sidebar); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-2); border: 1px solid var(--line); } .code-toolbar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); } .code-toolbar .cdot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); } .code-toolbar .code-filename { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-lo); } .code-body { padding: 22px 24px; font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: var(--ink-mid); margin: 0; background: var(--sidebar); } .code-body .key { color: var(--ink); } .code-body .str { color: var(--accent); } .code-body .bool-t { color: var(--income); } .code-body .bool-f { color: var(--expense); } .code-body .cmt { color: var(--ink-faint); font-style: italic; } .source-paths { display: grid; gap: 12px; margin-top: 28px; } .source-path { display: grid; grid-template-columns: 32px 1fr auto; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--line); } .source-path:last-child { border-bottom: none; } .source-path .step { font-family: var(--mono); font-size: 11px; color: var(--ink-lo); padding-top: 4px; } .source-path h4 { font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); } .source-path p { margin: 4px 0 0; color: var(--ink-mid); font-size: 13.5px; line-height: 1.5; } .source-path .stag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; white-space: nowrap; align-self: flex-start; margin-top: 4px; } .source-path .stag.devs { background: var(--surface); color: var(--ink-lo); border: 1px solid var(--line); } .source-path .stag.devs-warn { background: var(--warning-soft); color: var(--warning); } .source-path .stag.recommended { background: var(--accent); color: var(--canvas); } /* ── Signup ── */ .signup { background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%); border: 1px solid var(--line); border-radius: 24px; padding: clamp(36px, 5vw, 64px); box-shadow: var(--shadow-2); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: flex-start; } .signup-copy h2 { font-size: clamp(32px, 4.5vw, 48px); margin: 14px 0 16px; } .signup-copy .lead { margin-bottom: 24px; } .signup-copy .perks { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-mid); } .signup-copy .perk { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: flex-start; } .signup-copy .perk svg { color: var(--accent); width: 18px; height: 18px; margin-top: 2px; } .signup-copy .perk strong { color: var(--ink); } .form-grid { display: grid; gap: 16px; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-lo); font-weight: 600; font-family: var(--mono); } .field label .opt { color: var(--ink-faint); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; font-family: var(--sans); font-size: 12px; } .field input, .field textarea { font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; outline: none; resize: vertical; transition: border-color 160ms, box-shadow 160ms, background 160ms; width: 100%; } .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); } .field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: var(--ring-focus); } .field input.input-error { border-color: var(--expense); } .form-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; } .form-note { font-size: 12.5px; color: var(--ink-lo); line-height: 1.55; margin: 0; } .form-success[hidden], .form-error[hidden], .turnstile-shell[hidden] { display: none !important; } .form-success { padding: 14px 18px; background: var(--income-soft); color: var(--income); border-radius: 10px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; } .form-error { padding: 14px 18px; background: var(--expense-soft); color: var(--expense); border-radius: 10px; font-size: 14px; font-weight: 500; } /* Turnstile & honeypot */ .form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .turnstile-shell { padding: 10px 12px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); } .turnstile-widget { min-height: 66px; } /* ── Footer ── */ .footer { padding: 64px 0 48px; border-top: 1px solid var(--line); background: var(--surface); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; align-items: flex-start; } .footer .brand { display: flex; flex-direction: column; gap: 14px; } .footer .brand img { height: 32px; width: auto; } .footer .brand p { color: var(--ink-mid); font-size: 14px; max-width: 28ch; margin: 0; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-lo); font-weight: 500; margin-bottom: 6px; } .footer-links a { color: var(--ink-mid); font-size: 14px; transition: color 160ms; } .footer-links a:hover { color: var(--ink); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 56px; font-size: 13px; color: var(--ink-lo); flex-wrap: wrap; gap: 12px; } .footer-bottom .mono { font-family: var(--mono); } /* ── Reveal animation (intersection-observer driven) ── */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); } .reveal.revealed { opacity: 1; transform: none; } } /* ── Responsive ── */ @media (max-width: 1100px) { .mock-card--tl { left: -2%; top: 2%; } .mock-card--br { right: -2%; bottom: 2%; } } @media (max-width: 1000px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 960px) { .hero-layout { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; } } @media (max-width: 900px) { .status-grid { grid-template-columns: 1fr; } .signup { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 800px) { .nav-links { display: none; } .nav .container { gap: 16px; } } @media (max-width: 720px) { .mock-card { display: none; } .mock-stage { padding: 16px 0 24px; } .diagram-canvas { height: 220px; } .dnode { font-size: 11px; padding: 8px 10px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 600px) { .feat-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 24px; } .footer-bottom { flex-direction: column; align-items: flex-start; } .hero { padding-top: 48px; } section { padding: clamp(64px, 10vw, 96px) 0; } .signup { padding: 24px; } .mock-body { grid-template-columns: 110px 1fr; } .mock-balance .amount { font-size: 32px; } .mock-greet h3 { font-size: 18px; } } @media (max-width: 420px) { :root { --announce-h: 52px; } .announcement .container { font-size: 12px; } .mock-body { grid-template-columns: 1fr; } .mock-sidebar { border-right: none; border-bottom: 1px solid var(--line); } }