/* Colors come from theme-vars.css (loaded before this file on every page that includes it) -- see that file for the light/dark variable definitions and theme.js for how data-theme gets set on . */ * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, sans-serif; } a { color: inherit; } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* nav */ header.nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 1100px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .brand img { height: 34px; width: auto; } .brand span { font-weight: 700; font-size: 18px; background: linear-gradient(90deg, var(--accent-teal), var(--bg2) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a.link { font-size: 14px; color: var(--fg-muted); text-decoration: none; } .nav-links a.link:hover { color: var(--fg); } /* Narrow screens: .nav-inner's space-between + .nav-links' fixed 28px gap doesn't fit a phone-width viewport at all -- it either overflows horizontally or crushes everything together. Wrapping .nav-links onto its own full-width row below the brand avoids both without hiding any of that information (a hamburger menu would be the more "native app" answer, but this is the lower-risk fix given how few items there actually are). Reported 2026-07-07: platform "not mobile friendly", this nav was one of the two concrete gaps found (see also style.css's missing viewport meta, fixed the same day). Widened from 640px to 860px (matching this codebase's other mobile breakpoints) after the item count grew from 4 to 6 (added the Windows/ Android download links) and a real device (the mobile app's WebView) still showed it cramped/overflowing at the old threshold. */ @media (max-width: 860px) { .nav-inner { flex-wrap: wrap; row-gap: 10px; padding: 12px 16px; } .nav-links { flex-wrap: wrap; justify-content: flex-end; gap: 10px 16px; width: 100%; } } .btn { display: inline-block; padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; border: none; } .btn-primary { background: linear-gradient(90deg, var(--accent-teal), var(--accent-blue)); color: #06111f; } .btn-outline { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); } /* hero -- centered, full-bleed gradient band (Zoom-style single-focus hero) rather than the old two-column layout+mascot art. Simpler DOM, one clear headline + two CTAs instead of splitting attention. */ .hero { position: relative; padding: 88px 0 64px; text-align: center; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent-blue) 22%, transparent), transparent 60%), radial-gradient(circle at 15% 30%, color-mix(in srgb, var(--accent-teal) 14%, transparent), transparent 55%); z-index: -1; } .hero-inner { max-width: 720px; margin: 0 auto; } .eyebrow { display: inline-block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-teal); background: color-mix(in srgb, var(--accent-teal) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-teal) 30%, transparent); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; } .hero h1 { font-size: 46px; font-weight: 800; line-height: 1.12; margin: 0 0 16px; letter-spacing: -0.5px; } .hero h1 .grad { background: linear-gradient(90deg, var(--accent-teal), var(--accent-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lead { font-size: 16.5px; color: var(--fg-muted); max-width: 560px; margin: 0 auto 28px; } .hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .hero .ctas .btn { padding: 14px 28px; font-size: 15.5px; } .hero .support-hint { display: block; margin-top: 18px; font-size: 13px; color: var(--fg-dim); } .hero .support-hint a { color: var(--accent-teal); text-decoration: none; font-weight: 600; } /* sections */ section { padding: 40px 0; } section.alt { background: var(--bg3); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } h2.section-title { font-size: 24px; text-align: center; margin: 0 0 8px; } p.section-sub { text-align: center; color: var(--fg-muted); max-width: 560px; margin: 0 auto 28px; font-size: 14px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .card { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; } .card .icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue)); margin-bottom: 12px; font-size: 15px; } .card h3 { margin: 0 0 6px; font-size: 15.5px; } .card p { margin: 0; font-size: 13px; color: var(--fg-muted); line-height: 1.45; } .built-for { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .built-card { padding: 20px; border-radius: 14px; background: linear-gradient(160deg, var(--bg2), var(--bg)); border: 1px solid var(--border); text-align: center; } .built-card .badge { width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 10px; background: color-mix(in srgb, var(--accent-teal) 12%, transparent); display: flex; align-items: center; justify-content: center; color: var(--accent-teal); font-weight: 700; font-size: 16px; } .built-card h3 { margin: 0 0 6px; font-size: 15px; } .built-card p { margin: 0; font-size: 13px; color: var(--fg-muted); } footer { border-top: 1px solid var(--border); padding: 20px 0; text-align: center; color: var(--fg-dim); font-size: 13px; } footer a { color: var(--accent-teal); text-decoration: none; } /* api docs (/api-docs) -- plain-language reference, not the auto-generated kind, so it's just semantic HTML dressed in the same tokens as every other page rather than a dedicated doc-site toolchain. */ .doc-content { max-width: 760px; margin: 0 auto; padding: 44px 0 60px; } .doc-content h1 { font-size: 28px; margin: 0 0 6px; } .doc-content .doc-lead { color: var(--fg-muted); font-size: 15px; margin: 0 0 32px; } .doc-content h2 { font-size: 19px; margin: 36px 0 10px; } .doc-content p { color: var(--fg-muted); font-size: 14.5px; line-height: 1.6; } .doc-content code { background: var(--bg3); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .doc-content pre { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 16px; overflow-x: auto; font-size: 13px; line-height: 1.55; } .doc-content pre code { background: none; border: none; padding: 0; } .doc-content table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0 4px; } .doc-content th, .doc-content td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .doc-content th { color: var(--fg-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; } .doc-content .doc-note { background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--accent-teal); border-radius: 8px; padding: 12px 14px; font-size: 13.5px; color: var(--fg-muted); margin: 14px 0; } .doc-content .toc { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 30px; padding: 0; list-style: none; } .doc-content .toc a { font-size: 13px; color: var(--accent-teal); text-decoration: none; border: 1px solid var(--border); background: var(--bg2); padding: 6px 12px; border-radius: 999px; } @media (max-width: 860px) { .hero { padding: 56px 0 44px; } .grid, .built-for { grid-template-columns: 1fr; } .hero h1 { font-size: 32px; } } /* dashboard */ .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } @media (max-width: 860px) { .dash-grid { grid-template-columns: 1fr; } } .panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 22px; } .panel h2 { font-size: 16px; margin: 0 0 14px; } .panel label { display: block; font-size: 13px; color: var(--fg-muted); margin: 12px 0 6px; } .panel input[type=text], .panel input[type=datetime-local] { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg); color: var(--fg); font-size: 14px; } .list-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .list-item:last-child { border-bottom: none; } .list-item .meta { color: var(--fg-muted); font-size: 12.5px; } .list-item .title { color: var(--fg); font-weight: 600; } .empty-note { color: var(--fg-dim); font-size: 13px; padding: 6px 0; } .btn-sm { padding: 7px 14px; font-size: 12.5px; border-radius: 7px; } .error { background: var(--danger-bg); border: 1px solid var(--danger); color: var(--danger-fg); padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 20px; } .panel button, .panel form button { width: 100%; padding: 11px; border: none; border-radius: 8px; background: linear-gradient(90deg, var(--accent-teal), var(--accent-blue)); color: #06111f; font-weight: 700; font-size: 14px; cursor: pointer; } .panel button.secondary { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); } .list-item button.btn-sm { width: auto; background: transparent; color: var(--accent-teal); border: 1px solid var(--accent-teal); font-weight: 700; } /* iOS "Add to Home Screen" nudge (see public/pwa.js) -- duplicated from dashboard.css/style.css rather than shared, since this page (index.html) doesn't load either of those stylesheets. */ .pwa-install-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--border-strong); border-radius: 14px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font-size: 13px; line-height: 1.4; } .pwa-install-banner button { flex-shrink: 0; background: transparent; border: none; color: var(--fg-muted); font-size: 15px; cursor: pointer; padding: 4px; } .pwa-install-banner button:hover { color: var(--fg); }