/* ─ Midnight Violet palette ─ */ :root { --bg: #0a0510; /* near-black with violet tint */ --bg-card: #1a0f2b; /* deep purple card */ --bg-input: #1f1233; /* form inputs / search bar */ --border: #2a1a42; --fg: #ede9fe; /* lavender-white text */ --fg-muted: #b8a5e0; --accent: #a855f7; /* violet-500 — primary actions */ --accent-hover: #c084fc; --overdue: #f43f5e; /* rose — past-due warning */ --today: #c4b5fd; /* violet-300 — due today */ --upcoming: #8b5cf6; /* violet-500 — future */ --success: #86efac; /* saved/ok states */ --bg-header: #160a24; /* header gradient top stop */ --on-accent: #ffffff; /* text/icon color for content sitting on --accent */ --font-body: "Space Grotesk", system-ui, -apple-system, sans-serif; } /* ─ Deep Ocean palette ─ */ [data-theme="deep-ocean"] { --bg: #04090f; --bg-header: #0a1624; --bg-card: #0e1a2b; --bg-input: #112033; --border: #1a2e42; --fg: #e9f2fe; --fg-muted: #a5c2e0; --accent: #38bdf8; --accent-hover: #7dd3fc; --on-accent: #062033; --overdue: #f43f5e; --today: #7dd3fc; --upcoming: #3b82f6; --success: #86efac; } /* ─ Ember palette ─ */ [data-theme="ember"] { --bg: #0f0904; --bg-header: #241407; --bg-card: #2b1a0e; --bg-input: #332011; --border: #42301a; --fg: #fef3e9; --fg-muted: #e0c8a5; --accent: #f59e0b; --accent-hover: #fbbf24; --on-accent: #331f05; --overdue: #f43f5e; --today: #fcd34d; --upcoming: #fb923c; --success: #86efac; } /* ─ Eclipse palette (journey prestige unlock) ─ */ [data-theme="eclipse"] { --bg: #060608; --bg-header: #131316; --bg-card: #1e1e22; --bg-input: #232327; --border: #2e2e33; --fg: #ececef; --fg-muted: #b8b8c0; --accent: #c0c3cc; --accent-hover: #d7d9e0; --on-accent: #18181b; --overdue: #f43f5e; --today: #d7d9e0; --upcoming: #9c9ca8; --success: #86efac; } /* ─ Comet palette (referral reward unlock) ─ */ [data-theme="comet"] { --bg: #071019; --bg-header: #0a1826; --bg-card: #0d1b28; --bg-input: #0a1622; --border: #1d3348; --fg: #e8f2fa; --fg-muted: #8fa9bd; --accent: #4dd0e1; --accent-hover: #26c6da; --on-accent: #04252b; --overdue: #f43f5e; --today: #80deea; --upcoming: #4a9fd4; --success: #86efac; } * { box-sizing: border-box; } /* Inline SVG icons (sprite in tasks/_icons.html) — sized in em, themed via currentColor so they inherit each context's palette. */ .icon { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -0.15em; flex-shrink: 0; } .task-checkbox .icon { width: 1.4rem; height: 1.4rem; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-feature-settings: "ss01", "ss02"; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } /* Header — scoped to the site header (a direct child of ) so a nested
inside a card (e.g. .suggestion-card-header) doesn't inherit the gradient, the bottom border and `justify-content: space-between`. */ body > header { background: linear-gradient(180deg, var(--bg-header) 0%, var(--bg) 100%); border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; } body > header a, body > header strong { color: var(--fg); text-decoration: none; font-weight: 600; letter-spacing: 0.02em; } main { padding: 1.25rem; max-width: 720px; margin: 0 auto; } /* Content links. Deliberately placed BEFORE `form a` below: both are (0,0,2), so the later `form a` rule keeps winning inside forms (Cancel next to Save must stay low-emphasis) while prose links everywhere else stop rendering in the browser's default #0000EE. Every class-based link treatment (.task-body, .list-chip, .btn, .link-danger, .list-row-actions a …) also outranks this. */ main a { color: var(--accent); } /* Search bar */ .search { display: flex; align-items: center; gap: 0.5rem; } .search input { flex: 1; padding: 0.6rem 0.85rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--fg); font-family: inherit; font-size: 0.95rem; } .search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2); } /* Inline search spinner — htmx toggles .htmx-request on the form (hx-indicator). Lives as a normal flex sibling next to the input (not an overlay) so it never covers the typed text or the native type="search" clear button. */ .search .search-spinner { flex: none; width: 1rem; height: 1rem; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; opacity: 0; transition: opacity 0.15s; } .search.htmx-request .search-spinner { opacity: 1; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Sections */ .section { margin-bottom: 1.75rem; } .section:not(:has(.task-card)) { display: none; } .section h2 { margin: 0.5rem 0 0.75rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); } .section.overdue h2 { color: var(--overdue); } .section.today h2 { color: var(--today); } .section.upcoming h2 { color: var(--upcoming); } /* Task cards */ .task-card { position: relative; /* anchor for ::before stripe */ display: flex; align-items: flex-start; gap: 0.75rem; background: var(--bg-card); padding: 0.85rem 1rem 0.85rem 1.15rem; /* extra left padding for stripe */ margin-bottom: 0.55rem; border-radius: 10px; border: 1px solid transparent; transition: border-color 0.15s, transform 0.1s, opacity 0.15s, box-shadow 0.15s; overflow: hidden; /* clip the stripe to the rounded corner */ } /* List-color stripe — driven by inline --list-color CSS var on each card. */ .task-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--list-color, var(--accent)); } /* Desktop hover: accent-tinted border + soft elevation (Material feel). Gated on a real hover-capable pointer so touch devices don't get a sticky hover state after a tap. */ @media (hover: hover) { .task-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } } /* Subtle press feedback on the whole card. */ .task-card:active { transform: scale(0.997); } .task-checkbox { background: transparent; border: none; padding: 0; width: 1.6rem; height: 1.6rem; cursor: pointer; color: var(--fg-muted); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; margin-top: 0.05rem; transition: color 0.15s, transform 0.1s; } .task-checkbox:hover { color: var(--accent); } .task-checkbox:active { transform: scale(0.9); } /* Inline-finish exit animation — a transition (not @keyframes) is deliberate: two error paths (409-stale-complete, network failure) remove this class again to roll the optimistic fade back, and only a transition eases that reversal via the base .task-card rule above (which now includes `opacity`); an @keyframes-driven animation would just cancel and snap instantly on class removal. text-decoration below applies the instant the class lands (it isn't transitioned), so the strike-through is visible on its own during the transition-delay, before opacity/ transform start easing out. delay 0.14s + duration 0.21s = 0.35s total, matching the JS setTimeout that removes the node. */ .task-card.card-finishing { opacity: 0; transform: translateX(16px); transition: opacity 0.21s ease 0.14s, transform 0.21s ease 0.14s; } .task-card.card-finishing .task-title { text-decoration: line-through; color: var(--fg-muted); } .task-body { flex: 1; display: block; color: var(--fg); text-decoration: none; } .task-title { display: block; font-weight: 500; line-height: 1.35; } .task-subtitle { display: block; font-size: 0.85rem; color: var(--fg-muted); margin-top: 0.15rem; line-height: 1.3; } .task-due { display: inline-block; font-size: 0.8rem; color: var(--fg-muted); margin-top: 0.3rem; letter-spacing: 0.01em; } .section.overdue .task-due { color: var(--overdue); font-weight: 500; } .section.today .task-due { color: var(--today); } /* Fallback for views that don't bucket cards into sections (Search). The */ /* server-side {% due_state task %} tag emits data-due-state on the card; */ /* this matches the same overdue/today treatment the section selectors */ /* give on the Today page. Spec §2 (2026-05-13) — web↔Android parity. */ .task-card[data-due-state="overdue"] .task-due { color: var(--overdue); font-weight: 500; } .task-card[data-due-state="today"] .task-due { color: var(--today); } /* Snooze button — sits at the right edge of the card. Form wrapper exists */ /* only to carry the CSRF token; it shouldn't add layout. */ .task-snooze-form { display: inline-flex; margin: 0; padding: 0; align-self: center; flex-shrink: 0; } .task-snooze { /* Both