:root, :root[data-theme="light"] { --bg-top: #f4f7f2; --bg-bottom: #dde9dd; --ink: #2d3d33; --ink-soft: #6b7f70; --ink-faint: #a8bcae; --sage: #7ba888; --sage-deep: #5b8a6b; --sage-tint: rgba(123, 168, 136, 0.12); --amber: #c89b6c; --amber-tint: rgba(200, 155, 108, 0.14); --line: rgba(91, 138, 107, 0.14); --card: rgba(255, 255, 255, 0.55); --card-strong: rgba(255, 255, 255, 0.78); --shadow-soft: 0 18px 60px -28px rgba(45, 61, 51, 0.28); --blob-a: radial-gradient(circle at 30% 30%, #c9e0ce, transparent 70%); --blob-b: radial-gradient(circle at 70% 60%, #e8e0c9, transparent 70%); --blob-opacity: 0.55; --grain-opacity: 0.04; --grain-blend: multiply; --radius-lg: 28px; --radius-md: 18px; } @media (prefers-color-scheme: dark) { :root { --bg-top: #1a2420; --bg-bottom: #0f1614; --ink: #dde7e0; --ink-soft: #94a89c; --ink-faint: #62756a; --sage: #7ba888; --sage-deep: #a8d4b6; --sage-tint: rgba(123, 168, 136, 0.18); --amber: #d4a978; --amber-tint: rgba(200, 155, 108, 0.16); --line: rgba(168, 212, 182, 0.12); --card: rgba(255, 255, 255, 0.035); --card-strong: rgba(34, 46, 39, 0.78); --shadow-soft: 0 18px 60px -28px rgba(0, 0, 0, 0.6); --blob-a: radial-gradient(circle at 30% 30%, #2d4a3a, transparent 70%); --blob-b: radial-gradient(circle at 70% 60%, #3a3324, transparent 70%); --blob-opacity: 0.45; --grain-opacity: 0.06; --grain-blend: screen; color-scheme: dark; } } * { box-sizing: border-box; } html, body { margin: 0; } button, input { font: inherit; color: inherit; background: none; border: none; outline: none; } /* Background lives on so it covers the entire scrollable area — not just the first 100vh. background-attachment: fixed keeps the gradient anchored to the viewport, so long pages stay visually uniform. */ html { min-height: 100%; background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%); background-attachment: fixed; background-color: var(--bg-bottom); } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: transparent; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; position: relative; line-height: 1.55; } .blob { position: fixed; border-radius: 50%; filter: blur(80px); opacity: var(--blob-opacity); pointer-events: none; z-index: 0; } .blob-a { width: 520px; height: 520px; background: var(--blob-a); top: -160px; left: -120px; } .blob-b { width: 620px; height: 620px; background: var(--blob-b); bottom: -220px; right: -160px; } .grain { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml;utf8,"); } .stage { position: relative; z-index: 1; min-height: 100vh; max-width: 720px; margin: 0 auto; padding: 6vh 32px 6vh; display: flex; flex-direction: column; gap: 48px; } @media (max-width: 560px) { .stage { padding: 4vh 20px 5vh; gap: 36px; } } /* --- meta header --- */ .meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .brand img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 6px 16px -8px rgba(45, 61, 51, 0.35); } .brand span { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; } .nav a { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; padding: 8px 14px; border-radius: 999px; transition: color 160ms ease, background-color 160ms ease; } .nav a:hover { color: var(--sage-deep); background: var(--sage-tint); } /* --- hero --- */ .hero { display: flex; flex-direction: column; gap: 18px; } h1 { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: clamp(36px, 6.5vw, 64px); line-height: 1.05; margin: 0; letter-spacing: -0.015em; } .lede { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 19px; color: var(--ink-soft); margin: 0; max-width: 540px; line-height: 1.55; } .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; transition: background-color 180ms ease, color 180ms ease, transform 120ms ease, border-color 180ms ease; } .btn-primary { background: var(--sage-deep); color: #fff; } .btn-primary:hover { background: var(--ink); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); } .btn-ghost:hover { color: var(--ink); border-color: var(--sage); background: var(--sage-tint); } .btn[aria-disabled="true"] { opacity: 0.85; cursor: default; } .btn[aria-disabled="true"]:hover { transform: none; } /* --- preview card (mirrors the new-tab dashboard look) --- */ .preview-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 24px 26px 22px; display: flex; flex-direction: column; gap: 12px; } .pv-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pv-date { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; } .pv-streak { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; background: var(--sage-tint); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--sage-deep); letter-spacing: 0.02em; } .pv-streak svg { width: 13px; height: 13px; stroke: var(--sage-deep); fill: none; } .pv-greeting { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: clamp(26px, 3.6vw, 34px); line-height: 1.1; margin: 6px 0 0; } .pv-intention { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 16px; color: var(--ink-soft); margin: 0; border-bottom: 1px dashed var(--line); padding-bottom: 6px; } .pv-tasks { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .pv-task { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-radius: var(--radius-md); } .pv-task + .pv-task { border-top: 1px solid var(--line); } .pv-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-faint); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; background: transparent; line-height: 1; } .pv-check--on { background: var(--sage); border-color: var(--sage); } .pv-text { font-size: 16px; color: var(--ink); } .pv-task--done .pv-text { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--ink-faint); } .pv-text strong { font-weight: 600; } /* --- features --- */ .features { display: flex; flex-direction: column; gap: 14px; } .features-heading { margin: 0; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; } .feature-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 560px) { .feature-list { grid-template-columns: 1fr; } } .feature-list li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); transition: transform 180ms ease, background-color 180ms ease; } .feature-list li:hover { transform: translateY(-1px); background: var(--card-strong); } .feature-list li strong { display: block; font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 17px; color: var(--ink); margin-bottom: 3px; line-height: 1.25; } /* --- footer --- */ .footer { margin-top: 12px; text-align: center; display: flex; flex-direction: column; gap: 16px; } .quote { margin: 0; font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 15px; color: var(--ink-soft); line-height: 1.6; text-wrap: balance; } .footer-links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 13px; color: var(--ink-faint); } .footer-links a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dashed var(--line); transition: color 180ms ease, border-color 180ms ease; } .footer-links a:hover { color: var(--sage-deep); border-bottom-color: var(--sage); }