/* Nocturne — ported from the Claude Design system for Voice Notes. * * Two deviations from the source, both deliberate (see design-import/README.md): * * 1. No webfont. The original @imports Inter from Google Fonts; this app is * offline-only, so the stack resolves to the system UI face. On the Mac and * iPhone this is SF, which sits close enough to Inter that the design holds. * 2. Dark always. Nocturne is a dark system - the ink-blue ground and the * blurple accent are the whole look, and following the OS meant the app * changed character depending on the time of day. A light variant is kept, * derived from the same ramps, but it is opt-in rather than automatic: * * * * That keeps the option without letting the OS decide what the app is. */ :root { color-scheme: dark; /* Tonal ramps — shared lightness scale, so the same step of any role matches the others in visual value. Straight from Nocturne. */ --neutral-100: #f3f5fe; --neutral-200: #e4e7f5; --neutral-300: #cfd3e5; --neutral-400: #b2b6ca; --neutral-500: #9397ab; --neutral-600: #75798c; --neutral-700: #595d6c; --neutral-800: #3f424d; --neutral-900: #292b31; --accent-100: #f5f4ff; --accent-200: #e7e5fe; --accent-300: #d2cefd; --accent-400: #b5abfc; --accent-500: #968ae0; --accent-600: #796cbf; --accent-700: #5d5294; --accent-800: #423a6a; --accent-900: #2b2741; /* — dark: Nocturne as authored. This is the app's look. — */ --bg: #161826; --bg-sunken: #121320; --surface: #232532; --surface-2: #1c1e2c; --text: #e9e9ed; --text-soft: #b2b6ca; --text-faint: #75798c; --accent: #9184d9; --accent-hover: #b5abfc; --accent-wash: color-mix(in srgb, #9184d9 13%, transparent); --divider: color-mix(in srgb, #e9e9ed 16%, transparent); --rec: #e0655f; --ok: #5fbd87; --shadow-sm: 0 0 0 1px #3f424d; --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgb(0 0 0 / 0.55); --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgb(0 0 0 / 0.65); /* Nocturne's own spacing scale — the odd numbers are its 2.8px base. */ --space-1: 2.8px; --space-2: 5.6px; --space-3: 8.4px; --space-4: 11.2px; --space-6: 16.8px; --space-8: 22.4px; --space-12: 33.6px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --font-heading: -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif; --font-body: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; --heading-weight: 500; /* Nocturne's own weight; light text needs less */ --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* Opt-in light theme: same ramps read from the other end. Not automatic - set data-theme="light" on if you want it. */ :root[data-theme="light"] { color-scheme: light; --bg: #f7f8fd; --bg-sunken: #eef0f9; --surface: #ffffff; --surface-2: #f9fafe; --text: #1a1c26; --text-soft: #4a4d5e; --text-faint: #75798c; --accent: #5d5294; /* accent-700: carries contrast on white */ --accent-hover: #423a6a; --accent-wash: #f0eefc; --divider: color-mix(in srgb, #1a1c26 13%, transparent); --rec: #b4322f; --ok: #2f7d54; --heading-weight: 600; /* dark-on-light needs a touch more */ --shadow-sm: 0 0 0 1px color-mix(in srgb, #1a1c26 9%, transparent); --shadow-md: 0 1px 2px rgb(26 28 38 / 0.06), 0 8px 24px -6px rgb(26 28 38 / 0.12); --shadow-lg: 0 2px 6px rgb(26 28 38 / 0.08), 0 20px 48px -12px rgb(26 28 38 / 0.18); } /* ── base ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h1 { font-size: clamp(24px, 3vw, 34px); } h2 { font-size: clamp(20px, 2.4vw, 26px); } h3 { font-size: 19px; } h6 { font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); } p { margin: 0 0 var(--space-3); } a { color: var(--accent); text-underline-offset: 3px; } a:hover { color: var(--accent-hover); } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; font-family: var(--font-body); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); } .muted { color: var(--text-faint); } .soft { color: var(--text-soft); } /* Nocturne signature: freestanding rules fade out at both ends. */ .hr { height: 1px; border: 0; margin: var(--space-6) 0; background: linear-gradient(to right, transparent, var(--divider) 48px, var(--divider) calc(100% - 48px), transparent); } /* ── controls ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 14px; line-height: 1.2; background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); text-decoration: none; transition: background 120ms var(--ease), border-color 120ms var(--ease); } .btn-primary { color: var(--accent); border-color: var(--accent); } .btn-primary:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .btn-secondary { border-color: var(--divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--text) 7%, transparent); } .btn-ghost { color: var(--accent); padding-inline: var(--space-2); } .btn-ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .input { width: 100%; min-height: 36px; padding: 6px 10px; font-size: 14px; color: var(--text); caret-color: var(--accent); background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-md); transition: border-color 120ms var(--ease); } .input:hover { border-color: color-mix(in srgb, var(--text) 40%, transparent); } .input:focus-visible { border-color: var(--accent); outline-offset: 0; } /* Filter chips. A chip is a toggle, so it carries its state in aria-pressed. */ .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 3px 10px; background: transparent; color: var(--text-soft); border: 1px solid var(--divider); border-radius: 999px; transition: all 120ms var(--ease); white-space: nowrap; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .chip .x { opacity: 0.6; font-size: 14px; line-height: 1; } .tag { display: inline-flex; align-items: center; font-size: 11px; padding: 2px 8px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-soft); } /* Type badges — the one place colour is doing semantic work. */ .badge { display: inline-flex; align-items: center; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; padding: 2px 7px; border-radius: var(--radius-sm); } .badge[data-type="memo"] { background: var(--accent-wash); color: var(--accent); } .badge[data-type="meeting"] { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); } .badge[data-type="daily"] { background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text-soft); } /* ── surfaces ────────────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* ── speaker dialogue ──────────────────────────────────────────────────── The most common content shape in the app, and the thing the old UI read worst. Names sit in a gutter rather than inline, so the eye can follow one speaker down the column and read the speech as continuous prose. */ .dialogue { display: flex; flex-direction: column; gap: var(--space-3); } .turn { display: grid; grid-template-columns: minmax(64px, 88px) 1fr; gap: var(--space-4); padding-left: var(--space-2); border-left: 2px solid transparent; } .turn-who { font-size: 12px; font-weight: 600; text-align: right; padding-top: 2px; letter-spacing: 0.01em; } .turn-said { margin: 0; } /* Attribution is a guess, and the design says so: known speakers get a solid accent rule, everyone else a dashed grey one. */ .turn[data-speaker="alvin"] { border-left-color: var(--accent); } .turn[data-speaker="alvin"] .turn-who { color: var(--accent); } .turn[data-speaker="nikita"] { border-left-color: var(--neutral-500); } .turn[data-speaker="nikita"] .turn-who { color: var(--text-soft); } .turn[data-speaker="other"] { border-left: 2px dashed color-mix(in srgb, var(--text-faint) 60%, transparent); } .turn[data-speaker="other"] .turn-who { color: var(--text-faint); font-style: italic; } @media (max-width: 640px) { /* On a phone the gutter costs too much width: stack the name above. */ .turn { grid-template-columns: 1fr; gap: 1px; } .turn-who { text-align: left; } } /* Words Whisper wasn't sure about. Visible, not alarming. */ .low-confidence { background: color-mix(in srgb, var(--rec) 14%, transparent); border-bottom: 1px dotted var(--rec); border-radius: 2px; padding: 0 1px; } /* Raw transcript reads as machine output: monospace, unpunctuated, quieter. */ .raw { font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: var(--text-soft); white-space: pre-wrap; word-break: break-word; } /* ── action items ────────────────────────────────────────────────────── */ .action { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; transition: background 120ms var(--ease); } .action:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } .action input { margin-top: 4px; accent-color: var(--accent); width: 15px; height: 15px; flex: none; } .action[data-done="true"] .action-text { color: var(--text-faint); text-decoration: line-through; } .action-source { font-size: 11.5px; color: var(--text-faint); } /* ── rows ────────────────────────────────────────────────────────────── */ .row { display: block; width: 100%; text-align: left; padding: var(--space-4) var(--space-3); background: transparent; border: 0; border-bottom: 1px solid var(--divider); transition: background 120ms var(--ease); } .row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } .row:hover .row-title { color: var(--accent); } .row-title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 16px; } .row-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: 12px; color: var(--text-faint); } .row-snippet { font-size: 13.5px; color: var(--text-soft); margin: var(--space-1) 0 0; } mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; border-radius: 2px; } /* ── banner ──────────────────────────────────────────────────────────── */ .banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 13.5px; background: color-mix(in srgb, var(--rec) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rec) 35%, transparent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }