vars.css

1@font-face {2  font-family: "Cormorant Garamond";3  font-weight: 300;4  font-style: italic;5  src: url("/fonts/CormorantGaramond-LightItalic.woff2") format("woff2");6  font-display: optional;7}89@font-face {10  font-family: "Cormorant Garamond";11  font-weight: 300;12  font-style: normal;13  src: url("/fonts/CormorantGaramond-Light.woff2") format("woff2");14  font-display: optional;15}1617@font-face {18  font-family: "Cormorant Garamond";19  font-weight: 400;20  font-style: normal;21  src: url("/fonts/CormorantGaramond-Regular.woff2") format("woff2");22  font-display: optional;23}2425@font-face {26  font-family: "Cormorant Garamond";27  font-weight: 400;28  font-style: italic;29  src: url("/fonts/CormorantGaramond-RegularItalic.woff2") format("woff2");30  font-display: optional;31}3233@font-face {34  font-family: "IBM Plex Mono";35  font-weight: 300;36  font-style: normal;37  src: url("/fonts/IBMPlexMono-Light.woff2") format("woff2");38  font-display: optional;39}4041@font-face {42  font-family: "IBM Plex Mono";43  font-weight: 300;44  font-style: italic;45  src: url("/fonts/IBMPlexMono-LightItalic.woff2") format("woff2");46  font-display: optional;47}4849@font-face {50  font-family: "IBM Plex Mono";51  font-weight: 400;52  font-style: normal;53  src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");54  font-display: optional;55}5657@font-face {58  font-family: "Inter Variable";59  font-weight: 100 900;60  font-style: normal;61  src: url("/fonts/InterVariable.woff2") format("woff2-variations");62  font-display: optional;63}6465@font-face {66  font-family: "Inter";67  font-weight: 400;68  font-style: normal;69  src: url("/fonts/Inter-Regular.woff2") format("woff2");70  font-display: optional;71}7273@font-face {74  font-family: "PeachScript";75  font-weight: 400;76  font-style: normal;77  src: url("/fonts/PeachScript-Regular.otf") format("opentype");78  font-display: block;79}8081:root {82  --bg: #0C0A06;83  --s1: #131109;84  --s2: #1A1710;85  --s3: #221F14;86  --bg-1: var(--s1);87  --bg-2: var(--s2);88  --bg-3: var(--s3);89  --t0: #F0E8D8;90  --t1: rgba(240, 232, 216, 0.50);91  --t2: rgba(240, 232, 216, 0.20);92  --t3: rgba(240, 232, 216, 0.07);93  --t4: rgba(240, 232, 216, 0.04);94  --ac: #E8956D;95  --surface-card: rgba(240, 232, 216, 0.02);96  --surface-elevated: rgba(19, 17, 9, 0.88);97  --shell-top-solid: #000000;98  --shell-top-fade: rgba(12, 10, 6, 0.95);99  --shell-accent-a: color-mix(in srgb, var(--peach-accent) 8%, transparent);100  --shell-accent-b: color-mix(in srgb, var(--peach-accent) 6%, transparent);101  --breach: rgba(220, 80, 60, 0.7);102  --health: rgba(100, 210, 100, 0.75);103  --totp-tag: rgba(120, 175, 255, 0.75);104  --copy-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 14px 48px rgba(0,0,0,0.7), 0 0 0 1px rgba(240,232,216,0.04);105  --font-display: "Cormorant Garamond", "Times New Roman", serif;106  --font-display-style: italic;107  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;108  --font-ui: "Inter Variable", "Inter", system-ui, sans-serif;109  /* Body-text scale; multiplied into key font-size declarations so users110     can request small / default / large without breaking dense layouts.111     XL was deliberately excluded — clips Vault and Health. */112  --peach-text-scale: 1;113  --spring: cubic-bezier(0.16, 1, 0.3, 1);114  --retreat: cubic-bezier(0.4, 0, 1, 1);115  --settle: cubic-bezier(0.34, 1.56, 0.64, 1);116  --dur-enter: 500ms;117  --dur-exit: 280ms;118  --dur-micro: 150ms;119  --peach-bg: var(--bg);120  --peach-s1: var(--s1);121  --peach-s2: var(--s2);122  --peach-s3: var(--s3);123  --peach-t0: var(--t0);124  --peach-t1: var(--t1);125  --peach-t2: var(--t2);126  --peach-t3: var(--t3);127  --peach-t4: var(--t4);128  --peach-text: var(--peach-t4);129  --peach-text-dim: var(--peach-t1);130  --peach-bg-card: var(--surface-card);131  --peach-border: var(--peach-t3);132  --peach-mono: var(--font-mono);133  --peach-accent: var(--ac);134  --peach-accent-dim: color-mix(in srgb, var(--peach-accent) 25%, transparent);135  --peach-glow: #F49C702A;        /* accent bloom behind buttons/illustrations — set by applyAccent() */136  --peach-surface-tint: #F49C7009; /* accent tint on card surfaces — set by applyAccent() */137  --peach-border-accent: #F49C7024; /* accent-tinted border for active states — set by applyAccent() */138  --peach-breach: var(--breach);139  --peach-health-ok: var(--health);140  --peach-health-bad: var(--breach);141  --peach-totp-tag: var(--totp-tag);142  --peach-sync-ok: #5ebd5e;143  --peach-sync-busy: #c8a840;144  --peach-sync-off: var(--peach-t2);145  --peach-sync-err: var(--peach-breach);146  --peach-curve-arrival: var(--spring);147  --peach-curve-departure: var(--retreat);148  --peach-curve-settle: var(--settle);149  --peach-dur-80: 80ms;150  --peach-dur-150: 150ms;151  --peach-dur-280: 280ms;152  --peach-dur-380: 380ms;153  --peach-dur-500: 500ms;154  --peach-dur-600: 600ms;155  --peach-copy-clear: 1.4s;156  --peach-rune-idle: rgba(245, 240, 234, 0.16);157  /* Tell the browser engine which color schemes the UI knows how to render —158     this gets us correct form-control colors and scrollbar tinting in the159     WebView when the user follows the system theme. */160  color-scheme: dark light;161}162163.light {164  --bg: #EEE3CC;165  --s1: #E7DBC0;166  --s2: #E0D3B4;167  --s3: #D8CAA7;168  --bg-1: var(--s1);169  --bg-2: var(--s2);170  --bg-3: var(--s3);171  --t0: #221809;172  --t1: rgba(34, 24, 9, 0.82);173  --t2: rgba(34, 24, 9, 0.58);174  --t3: rgba(34, 24, 9, 0.12);175  --t4: rgba(34, 24, 9, 0.06);176  --surface-card: rgba(34, 24, 9, 0.03);177  --surface-elevated: rgba(238, 227, 204, 0.97);178  --shell-top-solid: rgba(238, 227, 204, 0.98);179  --shell-top-fade: rgba(231, 219, 192, 0.96);180  --shell-accent-a: color-mix(in srgb, var(--peach-accent) 6%, transparent);181  --shell-accent-b: color-mix(in srgb, var(--peach-accent) 3%, transparent);182  --copy-shadow: 0 2px 8px rgba(80, 56, 32, 0.10), 0 14px 48px rgba(80, 56, 32, 0.10), 0 0 0 1px rgba(28,25,21,0.05);183  --peach-rune-idle: rgba(34, 24, 9, 0.16);184}185186/* ─── Display font choice ──────────────────────────────────────────────187   Default is Cormorant Italic. The non-italic options swap both the188   family AND the upright variant so display copy doesn't render as189   a synthesised slant on fonts that lack a true italic weight. */190[data-display-font="cormorant-italic"] {191  --font-display: "Cormorant Garamond", "Times New Roman", serif;192  --font-display-style: italic;193}194[data-display-font="cormorant"] {195  --font-display: "Cormorant Garamond", "Times New Roman", serif;196  --font-display-style: normal;197}198[data-display-font="inter"] {199  --font-display: "Inter Variable", "Inter", system-ui, sans-serif;200  --font-display-style: normal;201}202[data-display-font="system"] {203  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;204  --font-display-style: normal;205}206207/* When the user picks an upright font, neutralise the italic-by-default208   styling on the display surfaces so the result feels intentional. */209:root[data-display-font="cormorant"] .peach-wordmark,210:root[data-display-font="cormorant"] .peach-wordmark-wrap,211:root[data-display-font="cormorant"] .peach-pro-headline,212:root[data-display-font="cormorant"] .peach-pro-mini-badge,213:root[data-display-font="inter"] .peach-wordmark,214:root[data-display-font="inter"] .peach-wordmark-wrap,215:root[data-display-font="inter"] .peach-pro-headline,216:root[data-display-font="inter"] .peach-pro-mini-badge,217:root[data-display-font="system"] .peach-wordmark,218:root[data-display-font="system"] .peach-wordmark-wrap,219:root[data-display-font="system"] .peach-pro-headline,220:root[data-display-font="system"] .peach-pro-mini-badge {221  font-style: normal;222}223224/* ─── Text size scaling ────────────────────────────────────────────────225   Implemented via the `zoom` property on the popup body so every existing226   px-based font-size in popup.css scales proportionally without rewriting227   any individual rule. Capped at 1.08 — large enough to noticeably help,228   small enough that the dense Vault and Health views don't clip the229   fixed-size popup surface. The CSS custom property is also exposed so230   desktop / mobile builds can use a calc() multiplier on layouts that231   don't fit `zoom` semantics. */232[data-text-size="small"]  { --peach-text-scale: 0.92; }233[data-text-size="medium"] { --peach-text-scale: 1; }234[data-text-size="large"]  { --peach-text-scale: 1.08; }235/* Large: zoom on html so Chrome auto-resizes the popup window upward.236   Small: zoom on body instead — Chrome cannot shrink the popup below its237   minimum width, so zooming html for small leaves click coordinates misaligned.238   Zooming body keeps the window fixed and coordinate scaling stays correct.239   The html background fill prevents a bare strip at the edges of the scaled body. */240html { background: var(--bg); }241html[data-text-size="large"]       { zoom: 1.08; }242html[data-text-size="small"] body  { zoom: 0.92; }243244/* ─── Reduced motion ───────────────────────────────────────────────────245   User-explicit setting OR OS-level prefers-reduced-motion both collapse246   transitions and ambient animations to instant. The user-explicit form247   takes precedence and works even when the OS hasn't been configured. */248[data-motion="reduce"] *,249[data-motion="reduce"] *::before,250[data-motion="reduce"] *::after {251  animation-duration: 0.001ms !important;252  animation-delay: 0.001ms !important;253  animation-iteration-count: 1 !important;254  transition-duration: 0.001ms !important;255  transition-delay: 0.001ms !important;256  scroll-behavior: auto !important;257}