/* * Solarized (Ethan Schoonover) — https://ethanschoonover.com/solarized * * Solarized Light is the default; Solarized Dark is used when the OS asks for dark, * and either can be forced with data-theme="light" / "dark" on . * * One deliberate deviation: Solarized's accents are tuned for ~4.5:1 against base00, * not as small text on base3, where they land around 3.4–4.3:1. So each accent has a * darkened "-strong" variant used for small text and filled buttons, while the pure * accent is kept for bars, markers, progress fills and other non-text colour. */ :root { /* ── Solarized base ────────────────────────────────────────────── */ --base03: #002b36; --base02: #073642; --base01: #586e75; --base00: #657b83; --base0: #839496; --base1: #93a1a1; --base2: #eee8d5; --base3: #fdf6e3; --yellow: #b58900; --orange: #cb4b16; --red: #dc322f; --magenta: #d33682; --violet: #6c71c4; --blue: #268bd2; --cyan: #2aa198; --green: #859900; /* ── Solarized Dark values, aliased in by the two rules below ──── */ --sd-bg: #002b36; --sd-surface: #073642; --sd-surface-2: #0b4150; --sd-line: #12505f; --sd-ink: #eee8d5; --sd-muted: #a3b1b1; --sd-accent: #268bd2; --sd-accent-strong: #6cb6e8; --sd-accent-ink: #002b36; --sd-now: #859900; --sd-now-strong: #a9bf2e; --sd-error: #dc322f; --sd-error-strong: #f5857c; --sd-shadow: 0 1px 2px rgba(0, 12, 16, 0.4), 0 8px 24px rgba(0, 12, 16, 0.3); --sd-scene-line: #17596b; --sd-scene-sun: #f2d98c; --sd-scene-moon: #93a1a1; --sd-scene-dust: #1c5a68; --sd-scene-ambient: 0.6; --sd-c-blue: #6cb6e8; --sd-c-cyan: #4fc0b4; --sd-c-green: #b5c93f; --sd-c-yellow: #d4a521; --sd-c-orange: #e8703a; --sd-c-magenta: #e05a9b; --sd-c-violet: #9298e0; /* ── Solarized Light (default) ─────────────────────────────────── */ --bg: var(--base2); --surface: var(--base3); --surface-2: #f6efdc; --line: #ded7c2; --ink: var(--base02); /* base01 (#586e75) lands at 4.39:1 on base2 — a shade darker clears AA on both surfaces. */ --muted: #52666d; --accent: var(--blue); --accent-strong: #1a6a9c; --accent-ink: var(--base3); --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface)); --now: var(--green); --now-strong: #5c6e00; --now-soft: color-mix(in srgb, var(--now) 16%, var(--surface)); --error: var(--red); --error-strong: #b52a26; --error-soft: color-mix(in srgb, var(--error) 10%, var(--surface)); --shadow: 0 1px 2px rgba(7, 54, 66, 0.05), 0 6px 20px rgba(7, 54, 66, 0.07); --radius: 14px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --display: 'Fraunces', Georgia, serif; /* Per-section colour, used for the card's edge, its badge and its arc markers. */ --c-blue: var(--blue); --c-cyan: var(--cyan); --c-green: var(--green); --c-yellow: var(--yellow); --c-orange: var(--orange); --c-magenta: var(--magenta); --c-violet: var(--violet); --section-calendar: var(--c-blue); --section-luma: var(--c-violet); --section-notion: var(--c-yellow); --section-slack: var(--c-cyan); --section-workout: var(--c-orange); --section-social: var(--c-magenta); --section-default: var(--c-green); /* The 3D day arc reads these, so it re-colours with the theme. */ --scene-line: #cdc4ab; --scene-progress: var(--accent); --scene-sun: #edcc72; --scene-glow: var(--orange); --scene-moon: var(--base1); --scene-dust: #c9c1aa; --scene-ambient: 0.85; } /* Solarized Dark — when the OS asks for it, unless light was forced. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: var(--sd-bg); --surface: var(--sd-surface); --surface-2: var(--sd-surface-2); --line: var(--sd-line); --ink: var(--sd-ink); --muted: var(--sd-muted); --accent: var(--sd-accent); --accent-strong: var(--sd-accent-strong); --accent-ink: var(--sd-accent-ink); --now: var(--sd-now); --now-strong: var(--sd-now-strong); --error: var(--sd-error); --error-strong: var(--sd-error-strong); --shadow: var(--sd-shadow); --c-blue: var(--sd-c-blue); --c-cyan: var(--sd-c-cyan); --c-green: var(--sd-c-green); --c-yellow: var(--sd-c-yellow); --c-orange: var(--sd-c-orange); --c-magenta: var(--sd-c-magenta); --c-violet: var(--sd-c-violet); --scene-line: var(--sd-scene-line); --scene-sun: var(--sd-scene-sun); --scene-moon: var(--sd-scene-moon); --scene-dust: var(--sd-scene-dust); --scene-ambient: var(--sd-scene-ambient); } } /* Solarized Dark — forced from the theme button. */ :root[data-theme='dark'] { --bg: var(--sd-bg); --surface: var(--sd-surface); --surface-2: var(--sd-surface-2); --line: var(--sd-line); --ink: var(--sd-ink); --muted: var(--sd-muted); --accent: var(--sd-accent); --accent-strong: var(--sd-accent-strong); --accent-ink: var(--sd-accent-ink); --now: var(--sd-now); --now-strong: var(--sd-now-strong); --error: var(--sd-error); --error-strong: var(--sd-error-strong); --shadow: var(--sd-shadow); --c-blue: var(--sd-c-blue); --c-cyan: var(--sd-c-cyan); --c-green: var(--sd-c-green); --c-yellow: var(--sd-c-yellow); --c-orange: var(--sd-c-orange); --c-magenta: var(--sd-c-magenta); --c-violet: var(--sd-c-violet); --scene-line: var(--sd-scene-line); --scene-sun: var(--sd-scene-sun); --scene-moon: var(--sd-scene-moon); --scene-dust: var(--sd-scene-dust); --scene-ambient: var(--sd-scene-ambient); } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; } body { background: var(--bg); overscroll-behavior-y: contain; color: var(--ink); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; } a { color: inherit; } .muted { color: var(--muted); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Buttons */ .btn { font: inherit; font-weight: 500; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .btn:hover { border-color: var(--muted); } .btn:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; } .btn:disabled { opacity: 0.5; cursor: default; } .btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-ink); } .btn-primary:hover { filter: brightness(1.05); border-color: var(--accent); } .btn-ghost { background: transparent; } .btn-small { padding: 6px 10px; font-size: 13px; } .btn-icon { width: 38px; padding: 8px 0; font-size: 18px; line-height: 1; } /* Login */ .login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; } .login-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 36px 28px; text-align: center; display: grid; gap: 12px; } .login-card h1 { font-family: var(--display); font-size: 28px; margin: 0; } .login-card p { margin: 0 0 8px; } .login-sun { font-size: 40px; } .login-card input { font: inherit; width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); } .login-card .btn { width: 100%; padding: 11px; } .login-error { color: var(--error-strong); font-size: 14px; min-height: 1.5em; } /* Layout */ .topbar { display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 16px 16px 0; } .brand { font-weight: 600; display: flex; gap: 8px; align-items: center; } .page { max-width: 1080px; margin: 0 auto; padding: 16px; } .footer { max-width: 1080px; margin: 0 auto; padding: 8px 16px 40px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; } .footer-account { color: var(--ink); } .footer-account a { color: var(--accent-strong); font-weight: 500; text-decoration: none; } .footer-account a:hover { text-decoration: underline; } .hero { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; padding: 20px 0 24px; } .hero p { margin: 0; } .date-title { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin: 2px 0 4px; } .day-nav { display: flex; gap: 8px; align-items: center; } .date-pick input { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; height: 38px; } /* Up next */ .up-next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; } .up-next.is-now { background: var(--now-soft); } .up-next .label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-strong); } .up-next.is-now .label { color: var(--now-strong); } .up-next .title { font-weight: 600; font-size: 17px; } .up-next .when { color: var(--muted); } .up-next .spacer { flex: 1; } /* Section grid */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 16px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px 8px; min-width: 0; } .card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .card-head h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .card-head .count { font-size: 12px; font-weight: 600; color: var(--ink); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; } .card-head .note { font-size: 12px; color: var(--muted); margin-left: auto; text-align: right; } .items { list-style: none; margin: 0; padding: 0; } .item { display: grid; grid-template-columns: 148px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .item:first-child { border-top: 0; } .item .time { color: var(--accent-strong); font-size: 13px; font-weight: 600; padding-top: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; } .item .title { font-weight: 600; overflow-wrap: anywhere; } .item .title a { text-decoration: none; } .item .title a:hover { text-decoration: underline; } .item .meta { color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; } .item .meta a { color: var(--accent-strong); font-weight: 500; text-decoration: none; } .item .meta a:hover { text-decoration: underline; } .item .details { margin: 4px 0 0; padding-left: 16px; color: var(--muted); font-size: 13px; } .item.is-past { opacity: 0.5; } .item.is-now .time { color: var(--now-strong); } .item.is-now .time::after { content: ' · now'; } .item.is-overdue .time { color: var(--error-strong); } .empty { color: var(--muted); padding: 6px 0 14px; } .section-error { color: var(--error-strong); background: var(--error-soft); border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; overflow-wrap: anywhere; } .banner-error { color: var(--error-strong); background: var(--error-soft); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; } /* Loading skeleton */ .skeleton { height: 14px; border-radius: 6px; background: var(--line); margin: 14px 0; animation: pulse 1.2s ease-in-out infinite; } .skeleton.w60 { width: 60%; } .skeleton.w80 { width: 80%; } .skeleton.w40 { width: 40%; } @keyframes pulse { 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } } /* ── The 3D day arc ─────────────────────────────────────────────── */ .day-scene { position: relative; height: 240px; margin: 0 0 20px; border-radius: var(--radius); overflow: hidden; background: radial-gradient(70% 78% at 50% 104%, color-mix(in srgb, var(--scene-glow) 16%, transparent) 0%, transparent 68%), linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%, var(--surface) 68%); border: 1px solid var(--line); box-shadow: var(--shadow); } .day-scene canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; } .scene-hours { position: absolute; inset: auto 0 10px; display: flex; justify-content: space-between; padding: 0 22px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); pointer-events: none; } .scene-hours span:nth-child(2) { opacity: 0.7; } .scene-tip { position: fixed; top: 0; left: 0; z-index: 30; pointer-events: none; display: grid; gap: 1px; max-width: 260px; background: var(--ink); color: var(--bg); border-radius: 9px; padding: 7px 11px; font-size: 13px; line-height: 1.35; box-shadow: 0 6px 24px rgba(7, 54, 66, 0.28); } .scene-tip-title { font-weight: 600; } .scene-tip-time { opacity: 0.75; font-size: 12px; } /* ── Cards get a per-section accent and a gentle lift ───────────── */ .card { --card-accent: var(--accent); position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: var(--radius) 0 0 var(--radius); background: var(--card-accent); opacity: 0.55; } .card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(7, 54, 66, 0.06), 0 14px 30px rgba(7, 54, 66, 0.11); } .card-head .count { color: var(--ink); background: color-mix(in srgb, var(--card-accent) 22%, var(--surface)); } .card.is-flash { animation: flash 1.2s ease; } @keyframes flash { 0%, 100% { box-shadow: var(--shadow); } 20% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent) 45%, transparent); } } /* ── Slack-style message rows ───────────────────────────────────── */ .msgs { display: grid; } .msg { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: start; padding: 11px 8px 11px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; border-radius: 8px; transition: background 0.12s; } .msgs > .msg:first-child { border-top: 0; } a.msg:hover { background: var(--surface-2); } a.msg:hover .msg-author { text-decoration: underline; } .msg-avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); background: color-mix(in srgb, var(--avatar) 30%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--avatar) 38%, transparent); } .msg-body { min-width: 0; } .msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .msg-author { font-weight: 600; } .msg-channel { font-size: 12px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; } .msg-time { font-size: 12px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; } .msg-text { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .msg-go { color: var(--muted); font-size: 13px; align-self: center; opacity: 0; transition: opacity 0.12s; } a.msg:hover .msg-go { opacity: 1; } /* Pagination */ .pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0 12px; border-top: 1px solid var(--line); margin-top: 2px; } .pager-status { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } /* ── Workout: tick-boxes, progress and the editor ───────────────── */ .checklist { list-style: none; margin: 8px 0 2px; padding: 0; display: grid; gap: 2px; } .checklist label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; padding: 4px 6px; margin-left: -6px; border-radius: 8px; font-size: 14px; transition: background 0.12s; } .checklist label:hover { background: var(--surface-2); } .checklist input { appearance: none; -webkit-appearance: none; flex: none; margin: 1px 0 0; width: 17px; height: 17px; border: 1.5px solid var(--line); border-radius: 5px; background: var(--surface); cursor: pointer; display: grid; place-content: center; transition: background 0.12s, border-color 0.12s; } .checklist input:checked { background: var(--card-accent); border-color: var(--card-accent); } .checklist input:checked::after { content: ''; width: 9px; height: 5px; margin-top: -2px; border: 2px solid var(--accent-ink); border-top: 0; border-right: 0; transform: rotate(-45deg); } .checklist input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .checklist .is-done span { text-decoration: line-through; color: var(--muted); } .item.is-complete .title { text-decoration: line-through; text-decoration-thickness: 1px; } .progress { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 10px 0 2px; } .progress-fill { height: 100%; background: var(--card-accent); border-radius: 999px; transition: width 0.25s ease; } .card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 0 14px; border-top: 1px solid var(--line); margin-top: 10px; } .card-actions .hint { font-size: 12px; color: var(--muted); flex: 1 1 100%; } .editor { display: grid; gap: 10px; padding: 4px 0 16px; } .editor-head { margin: 0; font-size: 13px; color: var(--muted); } .editor label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); } .editor label > span { letter-spacing: 0.04em; text-transform: uppercase; } .editor input, .editor textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; width: 100%; resize: vertical; } .editor textarea { line-height: 1.5; } .editor-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .editor-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .editor-rest { margin-left: auto; color: var(--muted); } /* ── Pull to refresh ────────────────────────────────────────────── */ .pull { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; transform: translateY(0); opacity: 0; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s; } .pull.is-visible { opacity: 1; } /* While a pull is in progress, don't let the drag smear a text selection across the page. */ body.is-pulling { user-select: none; -webkit-user-select: none; } .pull-inner { display: flex; align-items: center; gap: 10px; max-width: min(92vw, 460px); margin-top: 10px; padding: 9px 16px 9px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 30px rgba(7, 54, 66, 0.18); } .pull-text { font-size: 13.5px; line-height: 1.35; color: var(--ink); } .pull-ring { width: 22px; height: 22px; flex: none; transform: rotate(-90deg); } .pull-ring circle { fill: none; stroke-width: 3; } .pull-ring-track { stroke: var(--line); } .pull-ring-fill { stroke: var(--accent-strong); stroke-linecap: round; stroke-dasharray: 94.2; stroke-dashoffset: 94.2; } .pull.is-ready .pull-ring { transform: rotate(-90deg) scale(1.12); } .pull.is-spinning .pull-ring { animation: spin 0.9s linear infinite; } .pull.is-spinning .pull-ring-fill { stroke-dashoffset: 66; } @keyframes spin { to { transform: rotate(270deg); } } @media (prefers-reduced-motion: reduce) { .pull.is-spinning .pull-ring { animation: none; } .card:hover { transform: none; } } @media (max-width: 560px) { .item { grid-template-columns: 1fr; gap: 2px; } .hero { align-items: stretch; } .day-nav { width: 100%; } .date-pick { margin-left: auto; } .card { padding: 16px 16px 6px; } } @media (max-width: 560px) { .day-scene { height: 190px; } .scene-hours { padding: 0 14px; } .editor-row { grid-template-columns: 1fr; } .msg { grid-template-columns: 30px 1fr; } .msg-go { display: none; } .msg-avatar { width: 30px; height: 30px; border-radius: 9px; } .footer { flex-direction: column; } } /* Topbar actions */ .topbar-actions { display: flex; gap: 8px; align-items: center; } #theme { min-width: 92px; font-variant-numeric: tabular-nums; }