:root { /* Default theme: Paper (warm sepia + Lora serif). The variant themes in the "THEMES" section below override these on . */ --bg: #EFE6CF; --surface: #FBF6E9; --inbox-bg: #F0E6CE; --text: #3B3024; --text-muted: #6B5D49; --text-faint: #9A8B73; --accent: #4F8C6E; /* one desaturated accent (calmer than the old emerald #1D9E75) */ --border: rgba(90, 70, 40, 0.16); --shadow-sm: 0 1px 2px rgba(60, 48, 36, 0.06); --shadow-md: 0 2px 6px rgba(60, 48, 36, 0.08), 0 10px 28px rgba(60, 48, 36, 0.10); --radius: 16px; --transition: 180ms ease; /* Responsive content width. Sections flow into AT MOST two columns (wide enough that titles never stack), with the inbox alongside; one column on smaller screens. Capped + centered on very large monitors to keep cards readable rather than stretching them. */ --content-max: 1500px; --content-pad: clamp(16px, 4vw, 56px); --section-min: 460px; --font: "Lora", Georgia, serif; --font-display: "Lora", Georgia, serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font); color: var(--text); background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { font-family: inherit; } /* Page header */ .page-header { max-width: var(--content-max); margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--content-pad) 28px; } /* Two-column layout: sections on the left, inbox aside on the right. The inbox width scales with the viewport; the board itself flows into auto-fit columns. */ .layout { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--content-pad); display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 40%, 680px); gap: 28px; align-items: start; } .board-column { display: flex; flex-direction: column; min-width: 0; } @media (max-width: 960px) { .layout { grid-template-columns: 1fr; gap: 16px; } .layout > .inbox { order: -1; } } /* Inbox styling: visually similar to a section but with simpler chrome and a muted neutral header instead of a colored chip. */ .inbox { background: var(--section-color, var(--inbox-bg)); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 16px 22px 14px; position: sticky; top: 24px; } .inbox-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } /* Inbox color picker, hover-revealed to match the section palette control. */ .inbox-color-btn { opacity: 0; transition: opacity var(--transition); } .inbox:hover .inbox-color-btn { opacity: 1; } .inbox-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; margin: 0; color: var(--text); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.1; } @media (max-width: 960px) { .inbox { position: static; } } .page-header h1 { font-family: var(--font-display); font-size: 64px; font-weight: 700; letter-spacing: -0.005em; margin: 0; line-height: 1; color: var(--text); } .page-header .subtitle { margin: 4px 0 0; color: var(--text-muted); font-size: 18px; font-weight: 400; font-family: var(--font); } /* Board: a single column of sections beside the inbox (one column on every screen size; Kanban still stacks full-width sections below). */ #board { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } /* Kanban sections need full width for their three columns, so stack them. */ .layout.kanban-mode #board { grid-template-columns: 1fr; } /* Section */ .section { background: var(--section-color, var(--surface)); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 16px 22px 14px 22px; transition: box-shadow var(--transition), transform var(--transition); } .section.dragging, .sortable-chosen { cursor: grabbing; } /* The placeholder gap that shows where the item will drop. */ .sortable-ghost { opacity: 0.4; } /* The item being dragged: visibly "lifted" off the page. */ .sortable-drag { box-shadow: 0 12px 32px rgba(40, 30, 20, 0.28) !important; cursor: grabbing; } /* Section header */ .section-header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; } .section-meta { display: flex; align-items: center; gap: 8px; min-height: 28px; } .section.collapsed > .task-list, .section.collapsed > .add-task-btn, .section.collapsed > .done-group { display: none; } .section.collapsed > .section-header { margin-bottom: 0; } .color-chip { width: 24px; height: 24px; border-radius: 50%; background: var(--section-color, #ccc); cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); transition: transform var(--transition); flex-shrink: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .color-chip:hover { transform: scale(1.08); } .section-chevron { font-size: 10px; line-height: 1; color: rgba(15, 23, 42, 0.55); display: inline-block; transition: transform var(--transition); } .section.collapsed .color-chip .section-chevron { transform: rotate(-90deg); } .section-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; width: 100%; outline: none; padding: 0 6px; border-radius: 6px; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.1; overflow-wrap: anywhere; } .section-title:empty::before { content: 'Untitled section'; color: var(--text-faint); pointer-events: none; } .section-title:focus { background: rgba(15, 23, 42, 0.04); } .section-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; } /* Hover-revealed buttons in the actions area (palette, trash). */ .section-actions > .icon-btn { opacity: 0; transition: opacity var(--transition); } .section:hover .section-actions > .icon-btn { opacity: 1; } /* Drag handles */ .drag-handle { background: transparent; border: none; padding: 4px 2px; color: var(--text-faint); opacity: 0.32; /* faintly visible by default so users see things are draggable */ transition: opacity var(--transition); cursor: grab; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 4px; } .section:hover .drag-handle.section-handle, .task-row:hover > .drag-handle, .subtask:hover > .drag-handle { opacity: 0.65; } .drag-handle:hover { opacity: 1 !important; color: var(--text-muted); } .drag-handle:active { cursor: grabbing; } /* Icon buttons */ .icon-btn { background: transparent; border: none; padding: 6px; border-radius: 8px; cursor: pointer; color: var(--text-faint); display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition); } .icon-btn:hover { background: rgba(15, 23, 42, 0.06); color: var(--text); } /* Task list */ .task-list, .done-list { list-style: none; padding: 0; margin: 4px 0 0; min-height: 6px; } .task { display: block; padding: 0; transition: opacity 300ms ease; border-radius: 8px; } .task-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 2px; border-radius: 8px; transition: background var(--transition); } .task-row:hover { background: rgba(15, 23, 42, 0.025); } .task-checkbox { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.5px solid #CBD5E1; border-radius: 5px; background: transparent; cursor: pointer; flex-shrink: 0; transition: all var(--transition); position: relative; margin: 0; } .task-checkbox:hover { border-color: var(--section-color, #94A3B8); } .task-checkbox:checked { background: var(--section-color, #94A3B8); border-color: var(--section-color, #94A3B8); } .task-checkbox:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #1F2A37; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0.85; } .task-text { flex: 1; font-family: var(--font); font-size: 18px; font-weight: 400; outline: none; padding: 3px 6px; border-radius: 5px; line-height: 1.4; min-width: 60px; } .task-text:empty::before { content: 'Write a task...'; color: var(--text-faint); pointer-events: none; } .task-text:focus { background: rgba(15, 23, 42, 0.04); } .task.completing .task-text { text-decoration: line-through; color: var(--text-muted); } .task.done .task-text { text-decoration: line-through; color: var(--text-faint); } .task-delete, .add-subtask-btn { opacity: 0; transition: opacity var(--transition); } .task-row:hover .task-delete, .task-row:hover .add-subtask-btn { opacity: 1; } /* Sub-tasks */ .subtask-list { list-style: none; padding: 0; margin: 0 0 0 32px; min-height: 4px; } .subtask { display: flex; align-items: center; gap: 8px; padding: 3px 6px 3px 2px; border-radius: 6px; transition: background var(--transition); } .subtask:hover { background: rgba(15, 23, 42, 0.03); } .subtask-checkbox { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border: 1.5px solid #CBD5E1; border-radius: 4px; background: transparent; cursor: pointer; flex-shrink: 0; transition: all var(--transition); position: relative; margin: 0; } .subtask-checkbox:hover { border-color: var(--section-color, #94A3B8); } .subtask-checkbox:checked { background: var(--section-color, #94A3B8); border-color: var(--section-color, #94A3B8); } .subtask-checkbox:checked::after { content: ''; position: absolute; left: 4px; top: 0; width: 4px; height: 9px; border: solid #1F2A37; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0.85; } .subtask-text { flex: 1; font-family: var(--font); font-size: 16px; font-weight: 400; outline: none; padding: 2px 5px; border-radius: 4px; line-height: 1.4; min-width: 60px; color: var(--text-muted); } .subtask-text:empty::before { content: 'Sub-task...'; color: var(--text-faint); pointer-events: none; } .subtask-text:focus { background: rgba(15, 23, 42, 0.04); color: var(--text); } .subtask.done .subtask-text { text-decoration: line-through; color: var(--text-faint); } .subtask-delete { opacity: 0; transition: opacity var(--transition); } .subtask:hover .subtask-delete { opacity: 1; } /* Pasted hyperlinks inside task / sub-task text. Strip jarring purple-underline default and let the row's link icon be the affordance for opening. */ .task-text a, .subtask-text a { color: inherit; text-decoration: underline; text-decoration-color: var(--text-faint); text-decoration-thickness: 1px; text-underline-offset: 2.5px; cursor: text; } /* Link icon (shown when task text contains an email or URL) */ .link-icon { background: transparent; border: none; padding: 2px 5px; cursor: pointer; border-radius: 5px; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; flex-shrink: 0; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; transition: background var(--transition), transform var(--transition); } .link-icon:hover { background: rgba(15, 23, 42, 0.06); transform: scale(1.15); } /* Progress badge on parent task */ .progress-badge { font-size: 11px; color: var(--text-muted); font-weight: 500; padding: 2px 7px; border-radius: 10px; background: rgba(15, 23, 42, 0.05); flex-shrink: 0; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .progress-badge[hidden] { display: none; } /* Add-task button */ .add-task-btn { background: transparent; border: none; padding: 6px 10px; margin: 6px 0 0 26px; color: var(--text-muted); font-family: var(--font); font-size: 16px; font-weight: 400; cursor: pointer; border-radius: 6px; transition: color var(--transition), background var(--transition); } .add-task-btn:hover { color: var(--text); background: rgba(15, 23, 42, 0.08); } /* Done group */ .done-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); } .done-group[hidden] { display: none; } .done-toggle { background: transparent; border: none; padding: 4px 6px; color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: 5px; transition: background var(--transition); } .done-toggle:hover { background: rgba(15, 23, 42, 0.04); } .done-toggle .chevron { display: inline-block; transition: transform var(--transition); font-size: 11px; color: var(--text-faint); } .done-group.expanded .chevron { transform: rotate(90deg); } .done-list { max-height: 0; overflow: hidden; transition: max-height 300ms ease; } .done-group.expanded .done-list { max-height: 4000px; margin-top: 4px; } /* Add-section button */ .add-section-row { margin: 18px 0 64px; } .add-section-btn { width: 100%; background: transparent; border: 1.5px dashed rgba(15, 23, 42, 0.18); border-radius: var(--radius); padding: 16px; color: var(--text-muted); font-family: var(--font); font-size: 18px; font-weight: 400; cursor: pointer; transition: all var(--transition); } .add-section-btn:hover { border-color: rgba(15, 23, 42, 0.35); background: rgba(15, 23, 42, 0.03); color: var(--text); } .add-section-btn .plus { margin-right: 4px; font-weight: 500; } /* Color popover */ .color-popover { position: absolute; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-md); padding: 10px; display: grid; grid-template-columns: repeat(5, 28px); gap: 8px; z-index: 100; border: 1px solid var(--border); } .color-swatch { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); transition: transform var(--transition); padding: 0; } .color-swatch:hover { transform: scale(1.18); } .color-swatch.selected { box-shadow: 0 0 0 2px var(--text); } /* Drag handle SVG */ .drag-handle svg { width: 10px; height: 16px; display: block; } /* Make sure the HTML hidden attribute always wins. */ [hidden] { display: none !important; } /* Auth screen */ #auth-screen { min-height: 100vh; background: var(--bg); } .auth-card { background: var(--surface); border-radius: 20px; padding: 48px 48px 40px; text-align: center; box-shadow: var(--shadow-md); max-width: 380px; width: 100%; } .auth-card h1 { font-size: 38px; font-weight: 600; letter-spacing: -0.025em; margin: 0; background: linear-gradient(135deg, #2A3645 0%, #4F6B86 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .auth-subtitle { margin: 6px 0 28px; color: var(--text-muted); font-size: 14px; } #google-signin-btn { display: flex; justify-content: center; min-height: 44px; } .auth-error { margin: 20px 0 0; color: #B03A3A; font-size: 13px; line-height: 1.45; } /* ---- Landing / sign-in page (Daystring) --------------------------------- */ .lp { max-width: 1080px; margin: 0 auto; padding: 0 32px 64px; font-family: Arial, Helvetica, sans-serif; } .lp-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 0.5px solid rgba(59, 48, 36, 0.14); } .lp-brand { display: inline-flex; align-items: center; gap: 9px; font-family: 'Lora', Georgia, serif; font-size: 20px; font-weight: 600; color: var(--text); } .lp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); } .lp-domain { font-size: 13px; color: var(--text-faint); } .lp-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; padding: 60px 0 64px; } .lp-eyebrow { margin: 0 0 16px; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-faint); } .lp-headline { margin: 0 0 20px; font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 52px; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); } .lp-sub { margin: 0 0 28px; max-width: 440px; font-size: 16px; line-height: 1.7; color: var(--text-muted); } .lp-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .lp-cta #google-signin-btn { justify-content: flex-start; } .lp-note { margin: 0; font-size: 13px; color: var(--text-faint); } .lp-hero-visual { display: flex; justify-content: center; } .lp-card { width: 300px; background: var(--surface); border: 0.5px solid rgba(59, 48, 36, 0.18); border-radius: 14px; padding: 20px; transform: rotate(-1.2deg); box-shadow: 0 8px 28px rgba(59, 48, 36, 0.09); } .lp-card-head { margin-bottom: 14px; font-size: 12px; color: var(--text-faint); letter-spacing: 0.02em; } .lp-card-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .lp-card-rows li { display: flex; align-items: center; gap: 10px; font-family: 'Lora', Georgia, serif; font-size: 15px; color: var(--text); } .lp-task { white-space: nowrap; } .lp-check { flex: none; width: 16px; height: 16px; border: 1.5px solid var(--text-muted); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; } .lp-check-on { background: #1D9E75; border-color: #1D9E75; } .lp-done .lp-task { text-decoration: line-through; color: var(--text-faint); } .lp-chip { margin-left: auto; font-size: 11px; padding: 2px 9px; border-radius: 6px; white-space: nowrap; } .lp-chip-teal { background: rgba(29, 158, 117, 0.15); color: #0F6E56; } .lp-chip-amber { background: rgba(186, 117, 23, 0.17); color: #854F0B; } .lp-quickadd { margin-top: 14px; padding-top: 12px; border-top: 0.5px solid rgba(59, 48, 36, 0.1); font-size: 13px; font-style: italic; color: var(--text-faint); } .lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5px; background: rgba(59, 48, 36, 0.12); border: 0.5px solid rgba(59, 48, 36, 0.12); border-radius: 12px; overflow: hidden; } .lp-feature { background: var(--bg); padding: 26px 24px; } .lp-feature-empty { background: var(--bg); } .lp-ico { color: var(--text-muted); display: inline-block; } .lp-ico svg { width: 22px; height: 22px; display: block; } .lp-feature h3 { margin: 14px 0 7px; font-family: 'Lora', Georgia, serif; font-size: 16px; font-weight: 600; color: var(--text); } .lp-feature p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); } .lp-foot { text-align: center; padding: 56px 0 0; } .lp-closing { margin: 0 0 24px; font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 18px; color: var(--text-muted); } #google-signin-btn-2 { display: flex; justify-content: center; min-height: 44px; margin-bottom: 30px; } .lp-brand-foot { justify-content: center; opacity: 0.8; } .lp-legal { margin: 16px 0 0; font-size: 13px; color: var(--text-faint); } .lp-legal a { color: var(--text-faint); text-decoration: none; } .lp-legal a:hover { text-decoration: underline; } @media (max-width: 760px) { .lp-hero { grid-template-columns: 1fr; gap: 36px; padding: 40px 0 48px; } .lp-hero-visual { justify-content: flex-start; } .lp-headline { font-size: 38px; } .lp-card { transform: none; } .lp-features { grid-template-columns: 1fr; } } /* Sign out button on app screen */ #app-screen { position: relative; } .top-actions { position: absolute; top: 24px; right: 32px; display: flex; align-items: center; gap: 8px; z-index: 5; } .top-btn { background: rgba(255, 255, 255, 0.7); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; font-weight: 500; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: all var(--transition); } .top-btn:hover { background: var(--surface); color: var(--text); } .theme-btn, .font-btn { display: inline-flex; align-items: center; gap: 5px; } .tb-caret { font-size: 8px; line-height: 1; color: var(--text-faint); } /* Font picker popover: each row previews in its own font. */ .font-popover { min-width: 230px; max-height: 70vh; overflow-y: auto; } .font-item { display: flex; align-items: baseline; gap: 10px; font-size: 19px; } .font-note { font-family: system-ui, -apple-system, sans-serif; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-left: auto; white-space: nowrap; } /* ---- Theme picker popover ----------------------------------------------- */ .theme-popover { position: absolute; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px; z-index: 100; border: 1px solid var(--border); min-width: 190px; } .theme-popover-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--text); transition: background var(--transition); } .theme-popover-item:hover { background: rgba(127, 127, 127, 0.12); } .theme-popover-item.selected { background: rgba(127, 127, 127, 0.16); } .theme-name { font-family: var(--font); font-size: 16px; } /* Each swatch previews its theme's surface + font, independent of the active theme. */ .theme-swatch { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border-radius: 7px; font-size: 15px; font-weight: 600; flex-shrink: 0; border: 1px solid rgba(127, 127, 127, 0.25); } .theme-swatch[data-theme-swatch="paper"] { background: #F4ECD8; color: #3B3024; font-family: "Lora", serif; } .theme-swatch[data-theme-swatch="parchment"] { background: #EBDEC1; color: #43361F; font-family: "EB Garamond", serif; } .theme-swatch[data-theme-swatch="linen"] { background: #F4F2EC; color: #2E2C28; font-family: "Newsreader", serif; } .theme-swatch[data-theme-swatch="blush"] { background: #F6E7E3; color: #4A3438; font-family: "Lora", serif; } .theme-swatch[data-theme-swatch="sage"] { background: #E7EDDD; color: #33402C; font-family: "Lora", serif; } .theme-swatch[data-theme-swatch="espresso"] { background: #2A211A; color: #EFE3D2; font-family: "Lora", serif; border-color: rgba(255, 240, 210, 0.18); } /* ========================================================================= */ /* THEMES: a family of paper styles. Paper itself is the default, in :root. */ /* Each variant below is a warm/muted paper tone + a serif personality. */ /* ========================================================================= */ /* Parchment: aged kraft tan, classic old-style serif. */ [data-theme="parchment"] { --bg: #E4D7BD; --surface: #F3E9D2; --inbox-bg: #E9DCC0; --text: #43361F; --text-muted: #6E5C3E; --text-faint: #9C8A66; --border: rgba(90, 65, 25, 0.20); --font: "EB Garamond", Georgia, serif; --font-display: "EB Garamond", Georgia, serif; } /* Linen: cool soft gray-white paper, modern editorial serif. */ [data-theme="linen"] { --bg: #ECEAE3; --surface: #FAF9F5; --inbox-bg: #EEEBE2; --text: #2E2C28; --text-muted: #5E5B54; --text-faint: #93908A; --border: rgba(40, 38, 34, 0.14); --font: "Newsreader", Georgia, serif; --font-display: "Newsreader", Georgia, serif; } /* Blush: warm pink-tinted paper. */ [data-theme="blush"] { --bg: #F0E0DC; --surface: #FBEFEC; --inbox-bg: #F2E2DE; --text: #4A3438; --text-muted: #7A5C60; --text-faint: #AC9094; --border: rgba(120, 70, 75, 0.16); --font: "Lora", Georgia, serif; --font-display: "Lora", Georgia, serif; } /* Sage: muted green-tinted paper. */ [data-theme="sage"] { --bg: #DFE6D5; --surface: #F0F3E9; --inbox-bg: #E2E9D7; --text: #33402C; --text-muted: #5C6A50; --text-faint: #8A9A7E; --border: rgba(60, 80, 45, 0.16); --font: "Lora", Georgia, serif; --font-display: "Lora", Georgia, serif; } /* Espresso: warm dark paper for night, cream text. Section colors become a left-edge accent so the board stays readable on the dark surface. */ [data-theme="espresso"] { --bg: #211A14; --surface: #322820; --inbox-bg: #2A211A; --text: #EFE3D2; --text-muted: #C2B299; --text-faint: #8E7E68; --border: rgba(255, 240, 210, 0.12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.55); --font: "Lora", Georgia, serif; --font-display: "Lora", Georgia, serif; } [data-theme="espresso"] .section { background: var(--surface); border-left: 5px solid var(--section-color, #6b5840); } [data-theme="espresso"] .inbox { background: var(--inbox-bg); border-left: 5px solid var(--section-color, transparent); } [data-theme="espresso"] .top-btn { background: rgba(255, 255, 255, 0.06); } [data-theme="espresso"] .task-row:hover, [data-theme="espresso"] .subtask:hover { background: rgba(255, 255, 255, 0.05); } [data-theme="espresso"] .task-text:focus, [data-theme="espresso"] .subtask-text:focus, [data-theme="espresso"] .section-title:focus { background: rgba(255, 255, 255, 0.07); } [data-theme="espresso"] .add-section-btn { border-color: rgba(255, 255, 255, 0.18); } [data-theme="espresso"] .add-task-btn:hover, [data-theme="espresso"] .done-toggle:hover, [data-theme="espresso"] .icon-btn:hover { background: rgba(255, 255, 255, 0.08); } [data-theme="espresso"] .progress-badge { background: rgba(255, 255, 255, 0.10); } [data-theme="espresso"] .task-checkbox, [data-theme="espresso"] .subtask-checkbox { border-color: rgba(255, 255, 255, 0.35); } [data-theme="espresso"] .theme-popover-item:hover, [data-theme="espresso"] .theme-popover-item.selected, [data-theme="espresso"] .move-popover-item:hover { background: rgba(255, 255, 255, 0.10); } /* Sync indicator */ .sync-indicator { position: fixed; bottom: 20px; right: 20px; font-size: 11px; color: var(--text-faint); background: var(--surface); padding: 6px 12px; border-radius: 20px; box-shadow: var(--shadow-sm); opacity: 0; transition: opacity var(--transition); pointer-events: none; font-variant-numeric: tabular-nums; } .sync-indicator.visible { opacity: 1; } .sync-indicator.error { color: #B03A3A; } /* ---- Board tabs ---------------------------------------------------------- */ .board-tabs { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--content-pad) 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .board-tab { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 18px; cursor: pointer; transition: all var(--transition); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.01em; } .board-tab:hover { color: var(--text); box-shadow: var(--shadow-sm); } .board-tab.active { color: var(--text); background: var(--inbox-bg); border-color: rgba(15, 23, 42, 0.18); box-shadow: var(--shadow-sm); } /* A tab being hovered as a section is dragged over it. */ .board-tab.sortable-drag-over, .board-tab.drop-target { border-color: rgba(15, 23, 42, 0.45); border-style: dashed; background: rgba(15, 23, 42, 0.04); } .board-tab.everything-tab { font-style: italic; } .board-tab.add-board-tab { font-family: var(--font); font-size: 20px; font-weight: 400; color: var(--text-faint); border-style: dashed; padding: 8px 14px; } .board-tab.add-board-tab:hover { color: var(--text); border-color: rgba(15, 23, 42, 0.35); } /* Home-board tag shown on each section in the Everything view. */ .section-board-tag { font-family: var(--font); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 6px; padding: 2px 8px; cursor: pointer; flex-shrink: 0; transition: background var(--transition); } .section-board-tag:hover { background: rgba(255, 255, 255, 0.9); } /* In the Everything view there is no inbox column, so the board spans full width. */ .layout.everything-mode { grid-template-columns: 1fr; } /* ---- Move-to-board popover ----------------------------------------------- */ .move-popover { position: absolute; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px; z-index: 100; border: 1px solid var(--border); min-width: 180px; max-height: 320px; overflow-y: auto; } .move-popover-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); padding: 6px 10px 4px; } .move-popover-item { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: 8px; padding: 8px 10px; font-family: var(--font); font-size: 16px; color: var(--text); cursor: pointer; transition: background var(--transition); } .move-popover-item:hover { background: rgba(15, 23, 42, 0.06); } .move-popover-empty { padding: 6px 10px 10px; font-size: 13px; color: var(--text-faint); font-family: var(--font); } .move-btn { opacity: 0; transition: opacity var(--transition); } .section:hover .section-actions > .move-btn { opacity: 1; } /* ---- List / Kanban view toggle ------------------------------------------ */ .view-toggle { margin-left: auto; display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 2px; } .view-toggle-btn { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--text-muted); background: transparent; border: none; border-radius: 999px; padding: 5px 14px; cursor: pointer; transition: all var(--transition); } .view-toggle-btn:hover { color: var(--text); } .view-toggle-btn.active { background: var(--inbox-bg); color: var(--text); box-shadow: var(--shadow-sm); } /* ---- Kanban layout ------------------------------------------------------- */ .layout.kanban-mode { grid-template-columns: 1fr; } .kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; } .section.collapsed > .kanban { display: none; } .kanban-col { background: rgba(127, 127, 127, 0.09); border-radius: 12px; padding: 8px 8px 4px; display: flex; flex-direction: column; min-height: 64px; } .kanban-col-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 8px; } .kanban-col-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .kanban-col-count { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .kanban-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 24px; flex: 1; } .kanban .task { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-sm); } .kanban .task-row { padding: 6px; } .kanban .task-checkbox { display: none; } .kanban .subtask-list { margin-left: 22px; } .kanban-add { margin: 6px 0 2px; padding: 4px 8px; font-size: 14px; } /* In progress accent in List view (Kanban shows status via the column). */ .layout:not(.kanban-mode) .task.doing > .task-row { box-shadow: inset 3px 0 0 0 #C99A3A; } @media (max-width: 720px) { .kanban { grid-template-columns: 1fr; gap: 8px; } } /* ---- Section board selector (which board this box is under) -------------- */ .section-board-select { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: rgba(127, 127, 127, 0.14); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; cursor: pointer; flex-shrink: 0; transition: background var(--transition); } .section-board-select:hover { background: rgba(127, 127, 127, 0.24); } .sbs-caret { font-size: 8px; line-height: 1; color: var(--text-faint); } .board-select-popover .move-popover-item { display: flex; align-items: center; gap: 4px; } .bsi-check { width: 14px; flex-shrink: 0; color: var(--text-muted); font-size: 12px; } .move-popover-new { border-top: 1px solid var(--border); margin-top: 4px; color: var(--text-muted); } /* ---- Due dates ----------------------------------------------------------- */ .due-btn { background: transparent; border: none; cursor: pointer; padding: 2px 6px; border-radius: 6px; color: var(--text-faint); opacity: 0; transition: opacity var(--transition), background var(--transition); display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; } .task-row:hover .due-btn { opacity: 0.6; } .due-btn:hover { opacity: 1; background: rgba(127, 127, 127, 0.12); } .due-btn.has-due { opacity: 1; font-family: var(--font); font-size: 11px; font-weight: 600; padding: 2px 8px; letter-spacing: 0.01em; } .due-text { white-space: nowrap; } .due-overdue { color: #B0413E; background: rgba(176, 65, 62, 0.13); } .due-today { color: #93701B; background: rgba(202, 153, 58, 0.18); } .due-future { color: var(--text-muted); background: rgba(127, 127, 127, 0.12); } /* Due-date popover */ .due-popover { min-width: 226px; } .due-quick { display: flex; gap: 6px; margin-bottom: 8px; } .due-quick-btn { flex: 1; font-family: var(--font); font-size: 12px; padding: 6px 4px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--transition), color var(--transition); } .due-quick-btn:hover { background: rgba(127, 127, 127, 0.12); color: var(--text); } .due-input { width: 100%; font-family: var(--font); font-size: 14px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); } .due-clear { color: #B0413E; margin-top: 4px; } /* ---- Today / agenda view ------------------------------------------------- */ .today-group { margin-bottom: 22px; } .today-group-head { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; color: var(--text); margin-bottom: 8px; } .today-overdue .today-group-head { color: #B0413E; } .today-count { font-family: var(--font); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-faint); } .today-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .today-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow-sm); } .today-main { flex: 1; min-width: 0; } .today-text { font-family: var(--font); font-size: 17px; color: var(--text); cursor: pointer; line-height: 1.35; } .today-text:hover { text-decoration: underline; text-decoration-color: var(--text-faint); } .today-meta { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 3px; } .today-empty { color: var(--text-muted); font-size: 17px; line-height: 1.5; max-width: 560px; padding: 20px 4px; } /* ---- Recurrence ---------------------------------------------------------- */ .due-repeat { margin-left: 3px; font-size: 10px; opacity: 0.75; } .due-repeat-row { margin-top: 10px; } .due-repeat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); margin-bottom: 5px; } .due-repeat-btn { font-family: var(--font); font-size: 12px; padding: 4px 9px; margin: 0 5px 5px 0; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--transition), color var(--transition); } .due-repeat-btn:hover { background: rgba(127, 127, 127, 0.12); color: var(--text); } .due-repeat-btn.selected { background: rgba(127, 127, 127, 0.18); color: var(--text); border-color: rgba(15, 23, 42, 0.22); } /* Brief feedback when a recurring task reschedules itself on completion. */ .task.rescheduled > .task-row { background: rgba(120, 160, 110, 0.22); transition: background 250ms ease; } /* ---- Reminders bell ------------------------------------------------------ */ .reminders-btn { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; } .reminders-btn.on { color: #93701B; background: rgba(202, 153, 58, 0.18); border-color: rgba(202, 153, 58, 0.4); } /* ---- Billing: trial banner, paywall, account menu ----------------------- */ .trial-banner { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 9px 16px; margin: 0 0 4px; background: rgba(202, 153, 58, 0.16); color: var(--text-muted); font-size: 13px; border-radius: var(--radius); } .trial-banner-btn { border: 0.5px solid rgba(202, 153, 58, 0.5); background: var(--surface); color: #854F0B; font-size: 13px; padding: 4px 12px; border-radius: 8px; cursor: pointer; } .trial-banner-btn:hover { background: rgba(202, 153, 58, 0.12); } .paywall-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(40, 30, 20, 0.45); } .paywall-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 36px 34px 30px; max-width: 420px; width: 100%; text-align: center; } .paywall-card h2 { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 0 0 12px; color: var(--text); } .paywall-card p { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0 0 12px; } .paywall-price { font-size: 14px; color: var(--text-faint); margin: 0 0 22px; } .paywall-subscribe { background: #1D9E75; color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 500; padding: 11px 28px; cursor: pointer; } .paywall-subscribe:hover { background: #0F6E56; } .paywall-links { display: flex; gap: 18px; justify-content: center; margin-top: 20px; } .paywall-link { background: none; border: none; color: var(--text-faint); font-size: 13px; cursor: pointer; text-decoration: underline; } .paywall-link:hover { color: var(--text-muted); } .account-popover { min-width: 220px; } .account-popover-head { padding: 10px 12px; border-bottom: 0.5px solid rgba(59, 48, 36, 0.12); margin-bottom: 4px; } .account-email { font-size: 13px; color: var(--text); word-break: break-all; } .account-status { font-size: 12px; color: var(--text-faint); margin-top: 2px; }