/* ---------------------------------------------------------------- colour Every colour in the app comes from these eight names, so a theme is eight values and nothing else needs to know. Changing one here changes it everywhere; a hard-coded colour anywhere else would survive a theme change and look like a bug. paper the page behind everything card the raised surfaces ink/muted text, and text that matters less line the hairline between rows clay money, deadlines, anything wanting attention sage times, and anything settled *-tint the same colour at background strength Set on as data-theme, written before the first paint so the app never flashes one theme on its way to another. The selectors deliberately do not say :root, so a theme also applies to any element carrying the attribute - which is what lets five of them be put side by side and looked at. */ :root, [data-theme="warm"]{ color-scheme: light only; --paper:#F5EFE6; --card:#FFFCF7; --ink:#2A2521; --muted:#6B625A; --line:#E6DCCF; --clay:#A34C29; --clay-tint:#F3E1D6; --sage:#4F6B4A; --sage-tint:#E1E9DC; --shadow:0 1px 2px rgba(42,37,33,.06); --faint:#655C53; --faint-when:#93A18E; --edge:#B3A597; --hero-a:#DCCBB5; --hero-b:#D3C0A7; --hero-sun:#EAD9C2; } /* Cool grey-blues and a deeper green. Quieter than warm in daylight. */ [data-theme="harbour"]{ color-scheme: light only; --paper:#EFF2F4; --card:#FFFFFF; --ink:#1F2933; --muted:#5C6B7A; --line:#DCE3E8; --clay:#B4552F; --clay-tint:#F6E3D9; --sage:#2F6B62; --sage-tint:#DDEBE8; --shadow:0 1px 2px rgba(31,41,51,.07); --faint:#5A6874; --faint-when:#8D9EA9; --edge:#A8B6C0; --hero-a:#C6D3DC; --hero-b:#B4C4D0; --hero-sun:#DCE6EC; } /* Soft greens and a plum accent. */ [data-theme="garden"]{ color-scheme: light only; --paper:#F1F3EC; --card:#FDFEFB; --ink:#252B22; --muted:#5E6A57; --line:#DDE3D5; --clay:#8A4368; --clay-tint:#F2E0EA; --sage:#41653C; --sage-tint:#DFEAD9; --shadow:0 1px 2px rgba(37,43,34,.07); --faint:#5B6555; --faint-when:#93A189; --edge:#AEBBA4; --hero-a:#CBD9C0; --hero-b:#BACBAE; --hero-sun:#E2EBD9; } /* Almost no colour at all, for anyone who wants the photograph to do the work. */ [data-theme="paper"]{ color-scheme: light only; --paper:#F4F4F2; --card:#FFFFFF; --ink:#222222; --muted:#6A6A66; --line:#E2E2DE; --clay:#8C3B2E; --clay-tint:#F1E0DC; --sage:#4A5A55; --sage-tint:#E3E8E6; --shadow:0 1px 2px rgba(0,0,0,.06); --faint:#66665F; --faint-when:#9A9A93; --edge:#B5B5AE; --hero-a:#D8D8D4; --hero-b:#CACAC5; --hero-sun:#E8E8E4; } /* Quirkier than the rest: a pale lilac page, raspberry for anything wanting attention, and a sharp teal for times. Cheerful without being a toy. */ [data-theme="sherbet"]{ color-scheme: light only; --paper:#F3EFF7; --card:#FFFDFF; --ink:#2C2436; --muted:#6C6280; --line:#E4DCEF; --clay:#C33C6B; --clay-tint:#FBE0EA; --sage:#1F7A78; --sage-tint:#DAEEEE; --shadow:0 1px 2px rgba(44,36,54,.08); --faint:#6A6080; --faint-when:#9A93AD; --edge:#B9AECD; --hero-a:#D6C8EA; --hero-b:#C4B2DF; --hero-sun:#F0E4F7; } /* Dark, for a bedside table. Tints become deepened shades rather than washes, or "attention" would glow brighter than the thing it is attached to. */ [data-theme="dusk"]{ color-scheme: dark; --paper:#1B1A18; --card:#252321; --ink:#F0EAE1; --muted:#A39A8E; --line:#37342F; --clay:#E08A63; --clay-tint:#402A20; --sage:#8FB484; --sage-tint:#24301F; --shadow:0 1px 3px rgba(0,0,0,.4); --faint:#B6ABA0; --faint-when:#7E8C78; --edge:#4A453E; --hero-a:#332F2A; --hero-b:#28241F; --hero-sun:#3E382F; } *{box-sizing:border-box} html,body{margin:0;background:var(--paper);color:var(--ink)} body{font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.45; padding-bottom:calc(84px + env(safe-area-inset-bottom))} .screen{max-width:560px;margin-inline:auto;padding:0 18px} h1{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:30px;line-height:1.15;margin:0} h2{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:19px;margin:0} .sectionHead{margin:22px 0 8px} .muted{color:var(--muted);font-size:14px} .date{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.02em} .hidden{display:none !important} /* hero */ #hero{margin:0 -18px 18px} .heroArt{height:170px;background: radial-gradient(circle at 78% 34%, var(--hero-sun) 0 34px, transparent 35px), linear-gradient(var(--hero-a), var(--hero-b)); background-size:cover;background-position:center;transition:background-image .2s} /* A photograph replaces the drawing entirely, rather than sitting on top of it - the sun showing through somebody's kitchen window looked like a fault. */ .heroArt.hasPhoto{background-image:var(--hero-photo);background-color:var(--hero-b)} .heroText{padding:16px 18px 0} .stale{font-size:12px;color:var(--muted);padding:2px 0 6px} /* the ingester has gone quiet. Clay, because it wants noticing. */ .ingestNote{font-size:13px;color:var(--clay);font-weight:600; background:var(--clay-tint);border-radius:12px;padding:9px 12px;margin:6px 0} /* Only the title is struck out. A descendant cannot undo an ancestor's line-through, so striking the whole line took the reason with it - and the reason is the part you want to read. */ .line.cancelled{opacity:.6} .line.cancelled .t{text-decoration:line-through} /* cards */ .card{background:var(--card);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:var(--shadow)} .cardHead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px} .line{display:flex;gap:12px;align-items:baseline;padding:7px 0} .line + .line{border-top:1px solid var(--line)} .when{width:62px;flex-shrink:0;font-size:13px;font-weight:700;color:var(--sage)} .when.deadline{color:var(--clay)} .dayHead{display:flex;align-items:center;justify-content:space-between; font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--muted);margin:14px 0 4px} .dayHead:first-child{margin-top:0} /* add straight into a day */ .dayAdd{width:30px;height:30px;margin:-6px -6px -6px 0;padding:0;border:0;background:none; border-radius:50%;cursor:pointer;font-size:22px;line-height:1;color:var(--clay);opacity:.55} .dayAdd:active{background:var(--clay-tint);opacity:1} @media (hover:hover){ .dayAdd:hover{opacity:1;background:var(--clay-tint)} } /* which week you're looking at */ .weekNav{display:flex;align-items:center;gap:10px;margin-bottom:12px} .weekRange{flex:1;text-align:center;font-size:13px;font-weight:600;color:var(--muted); letter-spacing:.02em} .navBtn{width:38px;height:38px;flex-shrink:0;padding:0;border:1px solid var(--line); background:var(--paper);border-radius:50%;cursor:pointer; font-size:20px;line-height:1;color:var(--ink)} .navBtn:active{background:var(--clay-tint)} .seg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:999px; padding:3px;margin-bottom:12px} .segBtn{border:0;background:transparent;border-radius:999px;height:34px;padding:0 14px; font-size:13px;font-weight:600;color:var(--muted);cursor:pointer} .segBtn[aria-pressed="true"]{background:var(--card);color:var(--ink);font-weight:700; box-shadow:var(--shadow)} #quickCard textarea{border:0;padding:4px 2px;font-size:17px;background:transparent} #quickCard{padding:14px 16px} .answer{background:var(--sage-tint);border-radius:14px;padding:12px 14px;margin-top:12px;font-size:15px} .answer .q{color:var(--muted);font-size:13px;font-style:italic;margin-bottom:6px} /* items needing action */ .item{display:flex;align-items:center;gap:6px;background:var(--card);border-radius:14px; padding:6px 12px 6px 4px;margin-bottom:8px;box-shadow:var(--shadow)} .tick{width:44px;height:44px;border:0;background:none;display:flex;align-items:center; justify-content:center;flex-shrink:0;cursor:pointer} .tick span{width:22px;height:22px;border-radius:50%;border:2px solid var(--edge);display:block} .item.doneNow{opacity:.45} .item.doneNow .tick span{background:var(--sage);border-color:var(--sage)} .itemBody{flex:1;min-width:0} .itemTitle{font-size:15px;font-weight:600} .itemMeta{font-size:13px;color:var(--muted)} .avatar{width:30px;height:30px;border-radius:50%;color:#fff;font-size:13px;font-weight:700; display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#3F5E73} .avatar.a2{background:#8A4F6B} .avatar.shared{background:#6B7A8F;font-size:11px} .claim{border:1.5px solid var(--clay);background:transparent;color:var(--clay);border-radius:999px; padding:0 12px;height:36px;font-size:13px;font-weight:700;flex-shrink:0;cursor:pointer} .item.pinned{border-left:3px solid var(--clay)} .item.overdue{border-left:3px solid var(--clay);background:var(--clay-tint)} .item.missed{opacity:.7} .overdueAge{font-size:12px;font-weight:700;color:var(--clay)} .pinMark{color:var(--clay);font-weight:700;margin-right:4px} .confirmBtn{border:1.5px solid var(--sage);background:transparent;color:var(--sage);border-radius:999px; padding:0 12px;height:36px;font-size:13px;font-weight:700;flex-shrink:0;cursor:pointer} /* waiting, done, banner */ .doneStrip{display:flex;gap:10px;align-items:center;padding:4px 4px 0;margin-bottom:10px;font-size:14px;color:var(--muted)} .doneDot{width:30px;height:30px;border-radius:50%;background:var(--sage-tint);display:flex; align-items:center;justify-content:center;color:var(--sage);font-weight:700;flex-shrink:0} .banner{background:var(--clay-tint);border-radius:14px;padding:12px 14px;font-size:14px;margin-bottom:14px} .note{background:var(--clay-tint);border-radius:12px;padding:10px 12px;font-size:14px;margin:10px 0} /* buttons, fields */ button{font:inherit} .primary{background:var(--clay);color:#fff;font-weight:700;border:0;border-radius:999px; min-height:48px;padding:0 20px;flex:1;cursor:pointer} .primary:disabled{opacity:.55} /* inline-flex, not just min-height: a