/* Campaign PW — the public site's shared stylesheet. Plain CSS, custom-property themes. Theme contract (matches the app): localStorage 'planner.theme' is written 'light'|'dark' after first app use — the pre-paint script sets .dark or .light on ; with no class, prefers-color-scheme decides. `.light` MUST beat OS-dark (useTheme.ts persists 'light'). */ :root { --bg: #faf9f6; --panel: #ffffff; --ink: #1f2428; --ink-2: #4d565e; --ink-3: #7b858d; --line: #e3e0d8; --accent: #1f6b74; --accent-ink: #ffffff; --accent-soft: #e3eff0; --good: #2f7d4f; --warn-soft: #f6ecd6; } html.dark { --bg: #14181b; --panel: #1c2226; --ink: #e8ebed; --ink-2: #b4bcc2; --ink-3: #838d94; --line: #2c343a; --accent: #5fb7bf; --accent-ink: #0f1a1e; --accent-soft: #1d3a3f; --good: #7ccb9a; --warn-soft: #3d3117; } @media (prefers-color-scheme: dark) { html:not(.light) { --bg: #14181b; --panel: #1c2226; --ink: #e8ebed; --ink-2: #b4bcc2; --ink-3: #838d94; --line: #2c343a; --accent: #5fb7bf; --accent-ink: #0f1a1e; --accent-soft: #1d3a3f; --good: #7ccb9a; --warn-soft: #3d3117; } } * { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } .wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; } /* Nav */ .nav { border-bottom: 1px solid var(--line); background: var(--panel); } .nav .wrap { display: flex; align-items: center; gap: 20px; height: 56px; } .brand { font-weight: 700; font-size: 17px; color: var(--ink); display: flex; gap: 8px; align-items: center; } .brand:hover { text-decoration: none; } .nav .links { margin-left: auto; display: flex; gap: 18px; align-items: center; font-size: 14.5px; } .nav .links a { color: var(--ink-2); } .nav .links a.cta { color: var(--accent); font-weight: 600; } /* Hero */ .hero { padding: 56px 0 40px; } .hero h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.12; margin: 0 0 14px; letter-spacing: -0.01em; max-width: 21ch; } .hero p.sub { font-size: 18px; color: var(--ink-2); max-width: 56ch; margin: 0 0 24px; } .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; } .btn { display: inline-block; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 15px; border: 1px solid var(--accent); } .btn.primary { background: var(--accent); color: var(--accent-ink); } .btn.primary:hover { text-decoration: none; filter: brightness(1.08); } .btn.ghost { color: var(--accent); background: transparent; } .btn.ghost:hover { text-decoration: none; background: var(--accent-soft); } .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; border-color: var(--line); color: var(--ink-3); } .shot { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, var(--accent-soft), var(--panel) 70%); } .shot img { display: block; width: 100%; } .shot .alt-frame { padding: 64px 24px; text-align: center; color: var(--ink-3); font-size: 14px; } /* Sections */ section { padding: 36px 0; } section.alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } h2 { font-size: 24px; margin: 0 0 18px; letter-spacing: -0.005em; } h3 { font-size: 17px; margin: 0 0 6px; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; } .card p { margin: 0; color: var(--ink-2); font-size: 14.5px; } .steps { counter-reset: step; display: grid; gap: 14px; max-width: 62ch; } .step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; } .step::before { counter-increment: step; content: counter(step); width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .step p { margin: 0; color: var(--ink-2); } .step b { color: var(--ink); } .prose { max-width: 66ch; color: var(--ink-2); } .prose b, .prose strong { color: var(--ink); } .caplist { display: grid; gap: 18px; max-width: 72ch; } .caplist p { margin: 0; color: var(--ink-2); } .notyet { background: var(--warn-soft); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; max-width: 72ch; } .notyet ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); } .notyet li { margin: 4px 0; } /* Pricing */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 720px; } .plan { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 22px; } .plan.featured { border-color: var(--accent); } .plan h3 { font-size: 20px; } .plan ul { list-style: none; margin: 14px 0 18px; padding: 0; color: var(--ink-2); font-size: 15px; } .plan li { padding: 6px 0; border-top: 1px solid var(--line); } .plan li:first-child { border-top: 0; } .plan li b { color: var(--ink); } .truth { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; max-width: 720px; color: var(--ink-2); } .faq { max-width: 66ch; } .faq h3 { margin-top: 18px; } .faq p { color: var(--ink-2); margin: 4px 0 0; } .fineprint { color: var(--ink-3); font-size: 13.5px; max-width: 66ch; } /* Content pages (Campaign SITE) — generated by tools/build-site.mjs from apps/web/site-src/pages. Scoped under main.page; every colour is one of the tokens above, so dark mode needs nothing new. */ .nav .wrap { flex-wrap: wrap; height: auto; min-height: 56px; padding-top: 6px; padding-bottom: 6px; row-gap: 4px; } .nav .links { flex-wrap: wrap; row-gap: 4px; } .page { padding: 36px 0 24px; } .page h1 { font-size: clamp(28px, 4.6vw, 40px); line-height: 1.14; margin: 0 0 14px; letter-spacing: -0.01em; max-width: 24ch; } .page h1 + p { font-size: 18px; color: var(--ink-2); max-width: 60ch; } .page h2 { font-size: 23px; margin: 40px 0 12px; } .page h3 { font-size: 17px; margin: 22px 0 6px; } .page p, .page li { color: var(--ink-2); max-width: 66ch; } .page p { margin: 0 0 12px; } .page ul, .page ol { margin: 0 0 14px; padding-left: 22px; } .page li { margin: 4px 0; } .page b, .page strong { color: var(--ink); } .page .cta-row { margin: 18px 0 8px; max-width: none; } .page table { border-collapse: collapse; width: 100%; max-width: 860px; margin: 8px 0 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 14.5px; } .page caption { caption-side: top; text-align: left; color: var(--ink-3); font-size: 13.5px; padding: 0 0 8px; } .page th, .page td { text-align: left; vertical-align: top; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--ink-2); } .page thead th { border-top: 0; color: var(--ink); font-weight: 600; background: var(--accent-soft); } .page th[scope="row"] { color: var(--ink); font-weight: 600; white-space: nowrap; } .page nav[aria-label="Breadcrumb"] p { font-size: 13.5px; color: var(--ink-3); margin: 0 0 20px; max-width: none; } .page nav[aria-label="Breadcrumb"] a { color: var(--ink-2); } .page section[aria-labelledby="related-guides"] { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px 8px; margin: 32px 0 8px; max-width: 72ch; } .page section[aria-labelledby="related-guides"] h2 { margin: 0 0 10px; font-size: 18px; } .page section[aria-labelledby="related-guides"] p { margin: 0 0 8px; } .page .plans, .page .truth { margin-top: 8px; } .page .plan ul { padding: 0; } .page .plan li, .page .notyet li { max-width: none; } .page .plan p, .page .notyet p { margin: 0; } .page .shot { margin: 8px 0 28px; max-width: 860px; } .page figure.shot { margin: 8px 0 28px; max-width: 860px; } .shot figcaption { padding: 8px 12px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); } @media (max-width: 560px) { .page { padding-top: 26px; } .page table { display: block; overflow-x: auto; border-radius: 8px; } } /* Footer */ footer { border-top: 1px solid var(--line); padding: 26px 0 48px; margin-top: 24px; color: var(--ink-3); font-size: 14px; } footer .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; } footer a { color: var(--ink-2); } @media (max-width: 560px) { .nav .links { gap: 12px; font-size: 13.5px; } .hero { padding: 36px 0 28px; } }