/* Memtale — design system. Every colour comes from the 16 custom properties below. Six packs × two themes; carries data-pack and data-mtheme and everything follows. Never hard-code a colour in a component. */ /* ---- faces ---- */ @font-face { font-family:'Spectral'; font-style:italic; font-weight:300; font-display:swap; src:url('fonts/spectral-300i.woff2') format('woff2'); } @font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/spectral-400i.woff2') format('woff2'); } @font-face { font-family:'Spectral'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/spectral-300.woff2') format('woff2'); } @font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/spectral-400.woff2') format('woff2'); } @font-face { font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/spectral-500.woff2') format('woff2'); } @font-face { font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/spectral-600.woff2') format('woff2'); } @font-face { font-family:'Alegreya'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/alegreya-400i.woff2') format('woff2'); } @font-face { font-family:'Alegreya'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/alegreya-400.woff2') format('woff2'); } @font-face { font-family:'Alegreya'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/alegreya-500.woff2') format('woff2'); } @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ibmplexmono-400.woff2') format('woff2'); } @font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibmplexmono-500.woff2') format('woff2'); } @font-face { font-family:'Work Sans'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/worksans-300.woff2') format('woff2'); } @font-face { font-family:'Work Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/worksans-400.woff2') format('woff2'); } @font-face { font-family:'Work Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/worksans-500.woff2') format('woff2'); } @font-face { font-family:'Work Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/worksans-600.woff2') format('woff2'); } @font-face { font-family:'Valkyrie'; src:url('fonts/valkyrie-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Valkyrie'; src:url('fonts/valkyrie-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } @font-face { font-family:'Valkyrie'; src:url('fonts/valkyrie-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:'Atkinson Hyperlegible'; src:url('fonts/atkinson-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:'Atkinson Hyperlegible'; src:url('fonts/atkinson-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } @font-face { font-family:'Atkinson Hyperlegible'; src:url('fonts/atkinson-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } /* ---- tokens ---- */ html { --serif:'Spectral',Georgia,serif; --sans:'Work Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace; --logo:url('assets/memtale-mark.png'); --read-font:var(--serif); --read-size:21px; --read-lh:1.75; --read-ls:0em; --measure:660px; } html[data-pack="vellum"][data-mtheme="light"] { --bg:#f6f2ea; --surface:#efe9df; --panel:#fbf8f2; --line:#e6dfd2; --chip:#ece5d9; --track:#ded5c5; --ink:#2c2822; --ink2:#5c564d; --ink3:#a09788; --accent:#b4552e; --accent2:#7d8a5c; --accent3:#8a6f9c; --shadow:rgba(44,40,34,.16); } html[data-pack="vellum"][data-mtheme="dark"] { --bg:#191713; --surface:#211e19; --panel:#232019; --line:#332f27; --chip:#2b2721; --track:#3a352d; --ink:#efe8da; --ink2:#b6ada0; --ink3:#7d7467; --accent:#d4794c; --accent2:#9aa87a; --accent3:#ac90bd; --shadow:rgba(0,0,0,.5); } html[data-pack="nord"][data-mtheme="light"] { --bg:#eceff4; --surface:#e5e9f0; --panel:#f7f9fb; --line:#dbe0e8; --chip:#e0e6ee; --track:#cfd6e0; --ink:#2e3440; --ink2:#434c5e; --ink3:#7b8494; --accent:#5e81ac; --accent2:#6d9e6a; --accent3:#a0699a; --shadow:rgba(46,52,64,.18); } html[data-pack="nord"][data-mtheme="dark"] { --bg:#2e3440; --surface:#2b303b; --panel:#333a47; --line:#3f4859; --chip:#3b4252; --track:#4c566a; --ink:#eceff4; --ink2:#d8dee9; --ink3:#8b93a4; --accent:#88c0d0; --accent2:#a3be8c; --accent3:#b48ead; --shadow:rgba(0,0,0,.5); } html[data-pack="tokyo"][data-mtheme="light"] { --bg:#e6e7ed; --surface:#dcdee6; --panel:#f0f1f5; --line:#c8cad6; --chip:#d6d8e2; --track:#c2c6d4; --ink:#343b58; --ink2:#4c5480; --ink3:#8990b3; --accent:#2e7de9; --accent2:#587539; --accent3:#9854f1; --shadow:rgba(52,59,88,.18); } html[data-pack="tokyo"][data-mtheme="dark"] { --bg:#1a1b26; --surface:#1f2030; --panel:#24283b; --line:#2f334d; --chip:#292e42; --track:#3b4261; --ink:#c0caf5; --ink2:#a9b1d6; --ink3:#6b7394; --accent:#7aa2f7; --accent2:#9ece6a; --accent3:#bb9af7; --shadow:rgba(0,0,0,.6); } html[data-pack="solarized"][data-mtheme="light"] { --bg:#fdf6e3; --surface:#f4ecd8; --panel:#fffbf0; --line:#e9e0c9; --chip:#eee8d5; --track:#ddd6c1; --ink:#073642; --ink2:#586e75; --ink3:#93a1a1; --accent:#cb4b16; --accent2:#859900; --accent3:#6c71c4; --shadow:rgba(7,54,66,.18); } html[data-pack="solarized"][data-mtheme="dark"] { --bg:#002b36; --surface:#01323d; --panel:#073642; --line:#0f4552; --chip:#0a3a46; --track:#14505d; --ink:#eee8d5; --ink2:#93a1a1; --ink3:#657b83; --accent:#cb4b16; --accent2:#859900; --accent3:#6c71c4; --shadow:rgba(0,0,0,.5); } html[data-pack="everforest"][data-mtheme="light"] { --bg:#fffbef; --surface:#f2efdf; --panel:#fffefa; --line:#e6e2cc; --chip:#efebd4; --track:#dfdbc4; --ink:#3d484d; --ink2:#5c6a72; --ink3:#939f91; --accent:#8da101; --accent2:#3a94c5; --accent3:#df69ba; --shadow:rgba(61,72,77,.18); } html[data-pack="everforest"][data-mtheme="dark"] { --bg:#2d353b; --surface:#323c41; --panel:#343f44; --line:#3f4b50; --chip:#384349; --track:#4f5b58; --ink:#d3c6aa; --ink2:#9da9a0; --ink3:#7a8478; --accent:#a7c080; --accent2:#7fbbb3; --accent3:#d699b6; --shadow:rgba(0,0,0,.5); } html[data-pack="rosepine"][data-mtheme="light"] { --bg:#faf4ed; --surface:#f2e9e1; --panel:#fffaf3; --line:#e3ddd9; --chip:#efe4dc; --track:#e0d8d4; --ink:#575279; --ink2:#797593; --ink3:#9893a5; --accent:#b4637a; --accent2:#286983; --accent3:#907aa9; --shadow:rgba(87,82,121,.18); } html[data-pack="rosepine"][data-mtheme="dark"] { --bg:#191724; --surface:#1f1d2e; --panel:#26233a; --line:#312e4a; --chip:#232132; --track:#403d52; --ink:#e0def4; --ink2:#b6b3cc; --ink3:#6e6a86; --accent:#ebbcba; --accent2:#9ccfd8; --accent3:#c4a7e7; --shadow:rgba(0,0,0,.55); } /* ---- base ---- */ html { box-sizing:border-box; } *, *::before, *::after { box-sizing:inherit; } body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); transition:background .35s ease, color .35s ease; } a { color:var(--accent); text-decoration:none; } a:hover { color:var(--ink); } button { font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; text-align:inherit; } ::-webkit-scrollbar { width:9px; } ::-webkit-scrollbar-thumb { background:var(--line); border-radius:9px; } ::-webkit-scrollbar-track { background:transparent; } ::selection { background:var(--chip); } [hidden] { display:none !important; } @keyframes mfade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } } /* ---- shared bits ---- */ .kicker { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); } .serif-title { font-family:var(--serif); letter-spacing:-.01em; } .mono { font-family:var(--mono); } .hidden { display:none !important; } .btn { display:inline-block; padding:9px 16px; border-radius:99px; font-size:13px; border:1px solid var(--line); color:var(--ink2); background:transparent; } .btn:hover { color:var(--ink); border-color:var(--ink3); } .btn-primary { background:var(--accent); color:var(--bg); border-color:transparent; font-weight:500; } .btn-primary:hover { color:var(--bg); filter:brightness(1.06); } .btn-primary:disabled { opacity:.55; cursor:default; filter:none; } .btn-block { display:block; width:100%; padding:15px; border-radius:9px; font-size:14.5px; text-align:center; } .btn-block.btn-primary { padding:16px; font-size:15px; } .chip { padding:7px 13px; border-radius:99px; background:var(--chip); color:var(--ink2); font-size:13px; } button.chip:hover { color:var(--ink); } .chip:disabled { opacity:.5; cursor:default; } .chip:disabled:hover { color:var(--ink2); } .photo-ph { border-radius:7px; display:flex; align-items:flex-end; padding:10px; background:repeating-linear-gradient(135deg,var(--chip) 0 8px,var(--line) 8px 16px); } .photo-ph span { font-family:var(--mono); font-size:10px; color:var(--ink3); } .voice-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:7px; background:var(--chip); } .voice-play { width:0; height:0; border-left:9px solid var(--ink2); border-top:6px solid transparent; border-bottom:6px solid transparent; flex:none; } .voice-bars { flex:1; display:flex; gap:2px; align-items:center; height:18px; } .voice-bars i { width:2px; background:var(--ink3); } .voice-bars i.hot { background:var(--accent); } .voice-dur { font-family:var(--mono); font-size:10.5px; color:var(--ink3); } .reading { font-family:var(--read-font); font-size:var(--read-size); line-height:var(--read-lh); letter-spacing:var(--read-ls); text-wrap:pretty; } mark { background:var(--chip); color:var(--accent); padding:0 3px; border-radius:3px; } /* ---- layout ---- */ #app { min-height:100vh; display:flex; background:var(--bg); } #rail { width:262px; flex:none; background:var(--surface); border-right:1px solid var(--line); padding:26px 20px 22px; display:flex; flex-direction:column; gap:28px; position:sticky; top:0; height:100vh; min-height:0; overflow-y:auto; } .rail-logo { display:flex; align-items:center; gap:10px; width:100%; color:var(--ink); } .logo-mark { width:62px; height:62px; margin:-10px 0 -10px -6px; background-image:var(--logo); background-size:contain; background-repeat:no-repeat; background-position:center; flex:none; } .rail-logo .wordmark { font-family:var(--serif); font-size:27px; letter-spacing:-.015em; } .nav-list { display:flex; flex-direction:column; gap:2px; font-size:14.5px; } .nav-item { padding:9px 12px; border-radius:8px; display:flex; justify-content:space-between; align-items:center; width:100%; background:transparent; } .nav-item.active { background:var(--chip); } .nav-item:hover { background:var(--chip); } .nav-item .sc { font-family:var(--mono); font-size:11px; color:var(--ink3); } .rail-section { display:flex; flex-direction:column; gap:13px; } .rail-chapters { display:flex; flex-direction:column; gap:14px; font-size:14px; } .rail-chapter { display:flex; flex-direction:column; gap:5px; width:100%; } .rail-chapter .row { display:flex; justify-content:space-between; gap:8px; } .rail-chapter .n { color:var(--ink3); font-size:12.5px; } .pbar { height:3px; border-radius:2px; background:var(--track); overflow:hidden; } .pbar > div { height:3px; } .rail-else { display:flex; justify-content:space-between; width:100%; color:var(--ink3); } .rail-else .n { font-size:12.5px; } .rail-bottom { margin-top:auto; display:flex; flex-direction:column; gap:14px; } .grant-pill { padding:11px 12px; border-radius:8px; background:var(--chip); display:flex; flex-direction:column; gap:6px; } .grant-pill .top { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink2); } .grant-dot { width:7px; height:7px; border-radius:50%; background:var(--accent3); flex:none; } .grant-dot.sealed { background:var(--accent2); } .grant-pill .sub { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11.5px; color:var(--ink3); } .grant-pill .sub button { font-size:11.5px; color:var(--accent); } .rail-stats { font-size:12.5px; color:var(--ink3); line-height:1.6; } .rail-account { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; width:100%; } .rail-account:hover, .rail-account.active { background:var(--chip); } .avatar { width:22px; height:22px; border-radius:50%; background:var(--chip); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--ink2); font-family:var(--mono); flex:none; } .rail-account .name { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #main { flex:1; min-width:0; display:flex; flex-direction:column; } .screen { flex:1; min-height:0; display:flex; flex-direction:column; } .screen-head { padding:28px 56px 20px; display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--line); } .screen-head .kicker { margin-bottom:7px; } .screen-title { font-family:var(--serif); font-size:29px; letter-spacing:-.01em; } .screen-sub { font-size:13px; color:var(--ink3); margin-top:7px; } .screen-body { flex:1; overflow-y:auto; padding:34px 56px 80px; } .head-meta { font-size:13px; color:var(--ink3); display:flex; gap:16px; align-items:center; flex-wrap:wrap; } .head-meta .sep { width:1px; height:14px; background:var(--line); } .head-meta .mono { font-size:11px; } .head-actions { display:flex; gap:9px; align-items:center; font-size:12.5px; color:var(--ink2); flex-wrap:wrap; } .section-label { display:flex; align-items:center; gap:14px; margin-bottom:18px; } .section-label .rule { height:1px; flex:1; background:var(--line); } .section-label .n { font-size:12.5px; color:var(--ink3); } /* ---- today ---- */ #today-body { max-width:960px; } .composer { border-left:2px solid var(--accent); padding:2px 0 2px 22px; margin-bottom:20px; } .composer [contenteditable] { outline:none; min-height:96px; max-width:var(--measure); color:var(--ink); } .composer [contenteditable]:empty::before { content:attr(data-placeholder); color:var(--ink3); } .composer-bar { display:flex; gap:8px; align-items:center; margin-bottom:52px; font-size:13px; flex-wrap:wrap; } .composer-bar .note { margin-left:auto; font-size:12.5px; color:var(--ink3); } .entry-block { margin-bottom:44px; width:100%; text-align:left; display:block; } .entry-meta { display:flex; align-items:baseline; gap:14px; margin-bottom:13px; } .entry-meta .ts { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink3); white-space:nowrap; } .entry-meta .rule { height:1px; flex:1; background:var(--line); } .entry-meta .mood { font-size:12.5px; color:var(--ink3); } .entry-text { color:var(--ink2); max-width:var(--measure); } .entry-cols { display:flex; gap:34px; } .entry-cols .main { flex:1; min-width:0; } .dropcap::first-letter { float:left; font-size:56px; line-height:.86; padding:4px 10px 0 0; color:var(--accent); } .media-col { width:246px; flex:none; display:flex; flex-direction:column; gap:10px; } .media-col .photo-ph { height:190px; } .empty-note { font-size:13.5px; color:var(--ink3); line-height:1.65; max-width:520px; } /* ---- chapters ---- */ .stack { max-width:1180px; display:flex; flex-direction:column; gap:38px; } .card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:20px; } .chapter-card { border-radius:11px; overflow:hidden; background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; text-align:left; width:100%; padding:0; } .chapter-card:hover { border-color:var(--ink3); } .chapter-cover { height:132px; position:relative; background:repeating-linear-gradient(135deg,var(--chip) 0 9px,var(--line) 9px 18px); } .chapter-cover .spine { position:absolute; left:0; top:0; bottom:0; width:6px; } .chapter-body { padding:20px 22px 22px; } .chapter-title { font-family:var(--serif); font-size:22px; margin-bottom:8px; } .chapter-meta { font-size:13px; color:var(--ink3); margin-bottom:16px; } .chapter-quote { font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--ink2); text-wrap:pretty; } .chapter-body .pbar { margin-top:18px; } .quiet-card { padding:24px; border-radius:11px; border:1px dashed var(--line); background:transparent; display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .quiet-card .grow { flex:1; min-width:240px; } .quiet-card .t { font-family:var(--serif); font-size:20px; margin-bottom:7px; } .quiet-card .s { font-size:13.5px; color:var(--ink3); line-height:1.6; } .quiet-card .actions { display:flex; gap:9px; font-size:13px; } .ended-row { display:flex; align-items:center; gap:20px; padding:16px 0; border-top:1px solid var(--line); width:100%; text-align:left; } .ended-row:last-child { border-bottom:1px solid var(--line); } .ended-row .spine { width:5px; height:34px; background:var(--ink3); border-radius:3px; flex:none; } .ended-row .grow { flex:1; min-width:0; } .ended-row .t { font-family:var(--serif); font-size:19px; } .ended-row .s { font-size:12.5px; color:var(--ink3); margin-top:4px; } .ended-row .aside { font-size:12.5px; color:var(--ink3); } .else-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; border-radius:11px; background:var(--surface); width:100%; text-align:left; } .else-card .t { font-family:var(--serif); font-size:19px; } .else-card .s { font-size:13px; color:var(--ink3); margin-top:5px; } .else-card .go { font-size:13px; color:var(--ink2); white-space:nowrap; } /* ---- chapter detail ---- */ .timeline { max-width:900px; position:relative; } .timeline::before { content:""; position:absolute; left:6px; top:8px; bottom:0; width:1px; background:linear-gradient(var(--accent) 0 8%, var(--line) 30%, var(--line) 100%); } .timeline-entries { display:flex; flex-direction:column; gap:36px; } .tl-entry { display:flex; gap:30px; } .tl-bead { width:13px; flex:none; padding-top:8px; } .tl-bead i { display:block; width:7px; height:7px; border-radius:50%; background:var(--ink3); margin-left:1px; } .tl-entry.new .tl-bead { padding-top:7px; } .tl-entry.new .tl-bead i { width:9px; height:9px; margin-left:0; background:var(--accent); box-shadow:0 0 0 5px var(--bg); } .tl-body { flex:1; min-width:0; text-align:left; } .tl-meta { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink3); margin-bottom:11px; } .tl-thumbs { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; } .tl-thumbs .photo-ph { width:156px; height:106px; padding:8px; } /* ---- entry read ---- */ .entry-bar { padding:22px 56px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .entry-bar .back { font-size:13.5px; color:var(--ink2); } .entry-bar .sep { height:14px; width:1px; background:var(--line); } .entry-bar .crumb { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink3); } .entry-bar .actions { margin-left:auto; display:flex; gap:9px; font-size:12.5px; color:var(--ink2); } .entry-read { max-width:var(--measure); margin:0 auto; } .entry-read .meta { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink3); margin-bottom:16px; } .entry-read h1 { font-family:var(--serif); font-size:34px; line-height:1.25; font-weight:500; margin:0 0 28px; text-wrap:pretty; } .entry-read .reading { color:var(--ink); } .entry-read .photo-ph.full { margin:32px 0; height:340px; border-radius:8px; padding:14px; } .entry-read .voice-row { margin:32px 0; padding:14px 16px; border-radius:8px; } .entry-read .voice-row .voice-bars { height:26px; gap:3px; } .tag-row { margin-top:44px; padding-top:24px; border-top:1px solid var(--line); display:flex; gap:8px; flex-wrap:wrap; font-size:12.5px; } .tag-row span { padding:5px 11px; border-radius:6px; background:var(--chip); color:var(--ink2); } .around { margin-top:36px; padding:22px; border-radius:9px; background:var(--surface); border:1px solid var(--line); } .around .kicker { margin-bottom:11px; } .around .rows { display:flex; flex-direction:column; gap:11px; font-size:14.5px; } .around .r { display:flex; gap:14px; width:100%; text-align:left; } .around .r .d { color:var(--ink3); width:76px; flex:none; font-family:var(--mono); font-size:11.5px; padding-top:2px; } .around .r .d.hot { color:var(--accent); } .around .r .t { color:var(--ink2); } .around .r:hover .t { color:var(--ink); } /* ---- look back ---- */ .year-strip { display:flex; align-items:center; gap:8px; margin-top:20px; flex-wrap:wrap; } .year-strip .lab { font-size:12.5px; color:var(--ink3); margin-right:6px; } .year-strip .tail { font-size:12.5px; color:var(--ink3); margin-left:8px; } .year-pill { cursor:pointer; padding:7px 15px; border-radius:99px; font-family:var(--mono); font-size:12px; border:1px solid var(--line); background:transparent; color:var(--ink2); } .year-pill.on { background:var(--ink); color:var(--bg); border-color:var(--ink); } .lb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:22px; max-width:1180px; } .lb-card { padding:24px; border-radius:10px; background:var(--panel); border:1px solid var(--line); text-align:left; width:100%; } .lb-card .kind { font-size:12.5px; margin-bottom:12px; } .lb-card .q { font-family:var(--serif); font-size:19px; line-height:1.6; color:var(--ink); text-wrap:pretty; } .lb-card .go { margin-top:18px; font-size:12.5px; color:var(--ink3); } .lb-card:hover .go { color:var(--accent); } .lb-card.media { padding:0; overflow:hidden; } .lb-card.media .img { height:170px; background:repeating-linear-gradient(135deg,var(--chip) 0 8px,var(--line) 8px 16px); } .lb-card.media .body { padding:20px 24px; } /* ---- years in ---- */ .years-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:22px; max-width:1180px; } .stat-card { padding:24px; border-radius:10px; background:var(--panel); border:1px solid var(--line); } .stat-card .kicker { letter-spacing:.13em; text-transform:none; margin-bottom:16px; } .stat-card.wide { grid-column:1 / -1; } .hbar-row { display:flex; align-items:center; gap:12px; margin-bottom:13px; } .hbar-row:last-child { margin-bottom:0; } .hbar-row .lab { font-family:var(--serif); font-size:18px; width:96px; flex:none; } .hbar { flex:1; height:6px; background:var(--track); } .hbar > div { height:6px; } .histo { display:flex; align-items:flex-end; gap:6px; height:96px; } .histo i { flex:1; background:var(--track); } .histo i.hot { background:var(--accent); } .stat-note { font-size:13px; color:var(--ink2); margin-top:14px; line-height:1.6; } .big-statement { font-family:var(--serif); font-size:20px; line-height:1.55; } .heatmap { display:grid; grid-template-columns:repeat(52,1fr); gap:3px; } .heatmap i { aspect-ratio:1; border-radius:1.5px; background:var(--track); } .heatmap i.some { background:var(--ink3); } .heatmap i.lots { background:var(--accent); } .heatmap-years { display:flex; justify-content:space-between; margin-top:12px; font-size:11.5px; color:var(--ink3); font-family:var(--mono); } /* ---- search ---- */ .search-head { padding:26px 56px 22px; border-bottom:1px solid var(--line); } .search-line { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .search-line .glyph { font-family:var(--mono); font-size:15px; color:var(--ink3); } .search-line [contenteditable] { font-family:var(--serif); font-size:30px; outline:none; min-width:120px; } .search-line [contenteditable]:empty::before { content:attr(data-placeholder); color:var(--ink3); } .search-line .count { font-size:13px; color:var(--ink3); margin-left:6px; } .search-line .actions { margin-left:auto; display:flex; gap:9px; font-size:12.5px; color:var(--ink2); } .facets { display:flex; gap:7px; margin-top:18px; flex-wrap:wrap; font-size:12.5px; } .facet { padding:6px 13px; border-radius:99px; border:1px solid var(--line); color:var(--ink2); background:transparent; } .facet.on { background:var(--ink); color:var(--bg); border-color:var(--ink); } .search-body { flex:1; overflow-y:auto; display:flex; flex-wrap:wrap; align-items:flex-start; } .search-results { flex:1 1 560px; min-width:min(100%,420px); padding:30px 40px 80px 56px; } .search-results .inner { max-width:760px; display:flex; flex-direction:column; gap:6px; } .result-year { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--ink3); margin:28px 0 10px; } .result-year:first-child { margin-top:0; } .result { padding:20px 0; border-top:1px solid var(--line); display:flex; gap:22px; width:100%; text-align:left; } .result .thumb { width:104px; height:78px; flex:none; border-radius:6px; padding:0; background:repeating-linear-gradient(135deg,var(--chip) 0 8px,var(--line) 8px 16px); } .result .thumb.voice { background:var(--chip); display:flex; align-items:center; justify-content:center; } .result .rmeta { font-family:var(--mono); font-size:11px; color:var(--ink3); margin-bottom:8px; } .result .rtext { font-family:var(--serif); font-size:19px; line-height:1.6; color:var(--ink2); } .result:hover .rtext { color:var(--ink); } .search-side { flex:1 1 300px; max-width:340px; min-width:280px; border-left:1px solid var(--line); padding:30px 28px; display:flex; flex-direction:column; gap:30px; } .search-side .kicker { letter-spacing:.13em; text-transform:none; margin-bottom:14px; } .side-histo { display:flex; align-items:flex-end; gap:5px; height:64px; } .side-histo i { flex:1; background:var(--track); } .side-histo i.hot { background:var(--accent); } .side-histo-labels { display:flex; justify-content:space-between; margin-top:9px; font-family:var(--mono); font-size:11px; color:var(--ink3); } .side-rows { display:flex; flex-direction:column; gap:11px; font-size:14px; color:var(--ink2); } .side-rows .r { display:flex; justify-content:space-between; } .side-rows .r .n { color:var(--ink3); } /* ---- quick search overlay ---- */ .overlay { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.34); backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center; padding:12vh 20px 20px; overflow-y:auto; } .qs-card { width:min(720px,88vw); background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 40px 90px -30px var(--shadow); overflow:hidden; animation:mfade .18s ease; } .qs-head { padding:20px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; } .qs-head .glyph { color:var(--ink3); font-family:var(--mono); font-size:13px; } .qs-head input { flex:1; min-width:0; font-family:var(--serif); font-size:22px; color:var(--ink); background:transparent; border:none; outline:none; } .qs-head .count { margin-left:auto; font-size:12.5px; color:var(--ink3); white-space:nowrap; } .qs-results { padding:14px 12px; display:flex; flex-direction:column; } .qs-result { padding:14px 12px; border-radius:8px; width:100%; text-align:left; } .qs-result.sel, .qs-result:hover { background:var(--chip); } .qs-result .rmeta { font-family:var(--mono); font-size:11px; color:var(--ink3); margin-bottom:6px; } .qs-result .rtext { font-family:var(--serif); font-size:17.5px; color:var(--ink2); } .qs-result.sel .rtext { color:var(--ink); } .qs-result .rtext mark { background:transparent; color:var(--accent); } .qs-empty { padding:18px 24px 22px; font-size:13.5px; color:var(--ink3); } .qs-foot { padding:13px 24px; border-top:1px solid var(--line); display:flex; gap:20px; font-size:12px; color:var(--ink3); font-family:var(--mono); } .qs-foot .right { margin-left:auto; } /* ---- settings ---- */ .settings-head { padding:28px 56px 0; border-bottom:1px solid var(--line); } .settings-head .kicker { margin-bottom:7px; } .tabs { display:flex; gap:4px; margin-top:22px; } .tab { padding:10px 16px; border-radius:8px 8px 0 0; font-size:14px; background:transparent; color:var(--ink2); } .tab.on { background:var(--chip); color:var(--ink); } .settings-body { max-width:820px; display:flex; flex-direction:column; gap:40px; } .set-block .kicker { letter-spacing:.13em; margin-bottom:8px; } .set-block .expl { font-size:13.5px; color:var(--ink2); margin-bottom:18px; } .pill-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .mode-pill { padding:11px 20px; border-radius:99px; font-size:14px; border:1px solid var(--line); background:transparent; color:var(--ink2); } .mode-pill.on { background:var(--ink); color:var(--bg); border-color:var(--ink); } .pill-row .now { font-size:12.5px; color:var(--ink3); margin-left:8px; } .pack-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; } .pack-card { padding:18px; border-radius:10px; background:var(--panel); border:2px solid var(--line); text-align:left; } .pack-card.on { border-color:var(--accent); } .pack-card .top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; } .pack-card .name { font-family:var(--serif); font-size:19px; } .pack-card .state { font-size:11.5px; color:var(--accent); } .pack-card .note { font-size:12.5px; color:var(--ink3); line-height:1.55; min-height:38px; } .pack-swatches { display:flex; gap:8px; margin-top:14px; } .pack-swatches .strip { flex:1; display:flex; border-radius:5px; overflow:hidden; height:26px; } .pack-swatches .strip i { flex:1; } .reading-card { border-radius:10px; background:var(--panel); border:1px solid var(--line); overflow:hidden; } .reading-preview { padding:30px 26px; border-bottom:1px solid var(--line); } .reading-preview .reading { max-width:var(--measure); color:var(--ink); } .font-grid { padding:22px 26px; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; } .font-card { padding:13px 15px; border-radius:8px; border:1.5px solid var(--line); display:flex; align-items:baseline; gap:10px; text-align:left; } .font-card.on { border-color:var(--accent); } .font-card .fname { font-size:17px; color:var(--ink); } .font-card .fnote { font-size:11.5px; color:var(--ink3); } .sliders { padding:8px 26px 26px; display:flex; flex-direction:column; gap:20px; } .slider-row .lab { display:flex; justify-content:space-between; margin-bottom:9px; font-size:13px; } .slider-row .lab .v { font-family:var(--mono); font-size:12px; color:var(--ink3); } .slider-row .lab .n { color:var(--ink2); } .slider-row input[type=range] { width:100%; accent-color:var(--accent); background:transparent; } .text-link { font-size:13px; color:var(--ink3); } .text-link:hover { color:var(--accent); } .toggle-rows { display:flex; flex-direction:column; gap:2px; } .toggle-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 0; border-top:1px solid var(--line); } .toggle-row:last-child { border-bottom:1px solid var(--line); } .toggle-row .t { font-size:15px; } .toggle-row .s { font-size:13px; color:var(--ink3); margin-top:4px; max-width:560px; } .toggle { width:44px; height:25px; border-radius:99px; background:var(--track); position:relative; flex:none; } .toggle i { position:absolute; left:3px; top:3px; width:19px; height:19px; border-radius:50%; background:var(--panel); } .toggle.on { background:var(--accent); } .toggle.on i { left:auto; right:3px; } .panel-card { padding:24px; border-radius:10px; background:var(--panel); border:1px solid var(--line); } .panel-card .t { font-family:var(--serif); font-size:21px; margin-bottom:10px; } .panel-card .b { font-size:14px; line-height:1.7; color:var(--ink2); max-width:620px; } .panel-card .actions { display:flex; gap:10px; font-size:13px; margin-top:18px; flex-wrap:wrap; } .grant-card { border:2px solid var(--accent3); } .grant-card .t { display:flex; align-items:center; gap:10px; } .grant-card .actions .btn-primary { background:var(--accent3); } .device-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; border-top:1px solid var(--line); } .device-row:last-child { border-bottom:1px solid var(--line); } .device-row .left { display:flex; align-items:center; gap:14px; min-width:0; } .device-dot { width:9px; height:9px; border-radius:50%; background:var(--track); flex:none; } .device-dot.live { background:var(--accent2); } .device-row .t { font-size:15px; } .device-row .s { font-size:13px; color:var(--ink3); margin-top:4px; } .device-row .aside { font-size:12.5px; color:var(--ink3); white-space:nowrap; } .device-row button.aside { color:var(--ink2); } .device-row button.aside:hover { color:var(--accent); } .export-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .export-card { padding:20px; border-radius:10px; border:1px solid var(--line); text-align:left; background:transparent; } .export-card:hover { border-color:var(--ink3); } .export-card .t { font-family:var(--serif); font-size:18px; margin-bottom:7px; } .export-card .s { font-size:12.5px; color:var(--ink3); line-height:1.6; } .profile-card { display:flex; align-items:center; gap:18px; } .profile-card .avatar { width:56px; height:56px; font-family:var(--serif); font-size:22px; } .profile-card .grow { flex:1; min-width:0; } .profile-card .t { font-family:var(--serif); font-size:21px; } .profile-card .s { font-size:13px; color:var(--ink3); margin-top:5px; } .account-rows { display:flex; flex-direction:column; gap:2px; } .account-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 0; border-top:1px solid var(--line); } .account-row:last-child { border-bottom:1px solid var(--line); } .account-row .t { font-size:15px; } .account-row .s { font-size:13px; color:var(--ink3); margin-top:4px; max-width:560px; } /* ---- auth ---- */ #auth { position:fixed; inset:0; background:var(--bg); z-index:60; display:flex; flex-wrap:wrap; align-items:stretch; overflow-y:auto; } .auth-form-pane { flex:1 1 460px; min-width:min(100%,340px); display:flex; align-items:center; justify-content:center; padding:56px 48px; } .auth-box { width:100%; max-width:420px; } .auth-logo { display:flex; align-items:center; gap:10px; margin-bottom:40px; } .auth-logo .logo-mark { width:66px; height:66px; } .auth-logo .wordmark { font-family:var(--serif); font-size:28px; letter-spacing:-.015em; } .auth-title { font-family:var(--serif); font-size:34px; line-height:1.25; margin-bottom:12px; text-wrap:pretty; } .auth-sub { font-size:14.5px; line-height:1.65; color:var(--ink2); margin-bottom:34px; } .auth-sub.tight { margin-bottom:28px; } .auth-or { display:flex; align-items:center; gap:14px; margin:22px 0; } .auth-or .rule { height:1px; flex:1; background:var(--line); } .auth-or span { font-size:12px; color:var(--ink3); } .auth-foot { margin-top:32px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-size:13px; } .auth-foot .q { color:var(--ink3); } .auth-foot button { color:var(--accent); } .auth-note { font-size:12.5px; color:var(--ink3); line-height:1.6; } .auth-note.center { text-align:center; margin-top:12px; margin-bottom:30px; } .auth-back { margin-top:30px; font-size:13px; color:var(--ink3); } .auth-back:hover { color:var(--ink); } .auth-field-label { font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3); margin-bottom:9px; } .auth-input { width:100%; padding:14px 16px; border-radius:9px; border:1px solid var(--line); background:var(--panel); font-family:var(--serif); font-size:19px; color:var(--ink); outline:none; margin-bottom:9px; } .auth-input:focus { border-color:var(--accent); } .auth-input.mono-in { font-family:var(--mono); font-size:16px; letter-spacing:.06em; } .auth-error { font-size:13px; color:var(--accent); line-height:1.55; margin:10px 0; min-height:1em; } .auth-status { display:flex; align-items:center; gap:9px; margin-bottom:16px; } .auth-status .dot { width:8px; height:8px; border-radius:50%; background:var(--accent3); } .auth-disclosure { margin-top:28px; padding:16px 18px; border-radius:9px; background:var(--chip); font-size:12.5px; color:var(--ink2); line-height:1.65; } .recovery-display { padding:22px; border-radius:10px; background:var(--panel); border:1px solid var(--line); margin-bottom:14px; font-family:var(--mono); font-size:19px; letter-spacing:.08em; line-height:1.9; color:var(--ink); word-spacing:.35em; word-break:break-all; } .auth-side { flex:1 1 420px; max-width:600px; background:var(--surface); border-left:1px solid var(--line); padding:56px; display:flex; flex-direction:column; justify-content:center; } .auth-side .big-mark { width:min(360px,60%); aspect-ratio:1; background-image:var(--logo); background-size:contain; background-repeat:no-repeat; background-position:center; margin:0 0 34px -14px; } .auth-side .stmt { font-family:var(--serif); font-size:26px; line-height:1.5; color:var(--ink); max-width:440px; text-wrap:pretty; } .auth-side .sub { margin-top:26px; font-size:13.5px; color:var(--ink3); line-height:1.7; max-width:420px; } .auth-busy { opacity:.6; pointer-events:none; } /* ---- onboarding ---- */ #onboarding { position:fixed; inset:0; background:var(--bg); z-index:50; display:flex; align-items:center; justify-content:center; padding:48px 40px; overflow-y:auto; } .onb-box { max-width:560px; width:100%; } .onb-box .auth-logo { margin-bottom:38px; } .onb-title { font-family:var(--serif); font-size:38px; line-height:1.2; margin-bottom:20px; text-wrap:pretty; } .onb-body { font-size:16.5px; line-height:1.7; color:var(--ink2); margin-bottom:36px; text-wrap:pretty; } .onb-row { display:flex; align-items:center; gap:20px; } .onb-cta { padding:13px 26px; border-radius:99px; background:var(--accent); color:var(--bg); font-size:14.5px; font-weight:500; } .onb-skip { font-size:13.5px; color:var(--ink3); } .onb-skip:hover { color:var(--ink); } .onb-dots { margin-left:auto; display:flex; gap:7px; } .onb-dots i { width:7px; height:7px; border-radius:50%; background:var(--line); } .onb-dots i.on { background:var(--accent); } .onb-themes { display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap; } /* ---- toast ---- */ #toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:80; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:9px; padding:11px 18px; font-size:13.5px; box-shadow:0 18px 40px -22px var(--shadow); animation:mfade .18s ease; max-width:min(560px,90vw); } /* ---- narrow ---- */ @media (max-width:1100px) { .search-side { border-left:none; max-width:none; } } @media (max-width:900px) { #rail { display:none; } .screen-head, .settings-head { padding-left:28px; padding-right:28px; } .screen-body { padding:28px 28px 80px; } .search-results { padding:24px 28px 80px; } .entry-bar { padding:18px 28px; } } /* ============================================================ COMPOSER ATTACHMENTS, MOOD, LINK, MEDIA Only the sixteen tokens. No colour is named here. ============================================================ */ .composer-text.drop, #composer-text.drop { outline:2px dashed var(--accent); outline-offset:6px; border-radius:6px; } .attach-tray { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 2px; } .attach { display:inline-flex; align-items:center; gap:8px; padding:5px 6px 5px 5px; border-radius:99px; background:var(--chip); border:1px solid var(--line); font-size:12.5px; color:var(--ink2); max-width:260px; } .attach img { width:22px; height:22px; border-radius:99px; object-fit:cover; flex:none; } .attach .label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:4px; } .attach .pct { font-family:var(--mono); font-size:11px; color:var(--ink3); padding-right:6px; } .attach .x { width:18px; height:18px; border-radius:99px; flex:none; color:var(--ink3); font-size:14px; line-height:1; } .attach .x:hover { color:var(--ink); background:var(--surface); } .attach.busy { opacity:.72; } .mood-chip { padding-left:12px; } .mood-chip .label { font-style:italic; padding-left:0; } .mood-tag { font-family:var(--sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-left:10px; } /* ---- dialogs (link, mood) ---- */ .dlg-head { padding:22px 26px 0; } .dlg-sub { margin-top:6px; font-size:13.5px; color:var(--ink3); line-height:1.55; text-wrap:pretty; } .dlg-body { padding:20px 26px; } .dlg-label { display:block; font-family:var(--sans); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); margin:14px 0 6px; } .dlg-label:first-child { margin-top:0; } .dlg-label .opt { text-transform:none; letter-spacing:0; font-size:11.5px; opacity:.7; } .dlg-input { width:100%; padding:10px 12px; border-radius:8px; background:var(--bg); border:1px solid var(--line); color:var(--ink); font-family:var(--sans); font-size:14.5px; } .dlg-input:focus { outline:2px solid var(--accent); outline-offset:-1px; } .dlg-error { margin-top:12px; min-height:18px; font-size:13px; color:var(--accent3); } .dlg-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 26px 20px; border-top:1px solid var(--line); } .dlg-ghost { padding:9px 16px; border-radius:99px; color:var(--ink2); font-size:13.5px; } .dlg-ghost:hover { color:var(--ink); background:var(--chip); } .dlg-go { padding:9px 20px; border-radius:99px; background:var(--accent); color:var(--bg); font-size:13.5px; font-weight:600; } .dlg-go:hover { filter:brightness(1.08); } .mood-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .mood-cell { padding:16px 10px; border-radius:9px; background:var(--chip); border:1px solid transparent; color:var(--ink2); font-family:var(--serif); font-size:16px; } .mood-cell:hover { color:var(--ink); border-color:var(--line); } .mood-cell.on { border-color:var(--accent); color:var(--accent); } .mood-axes { display:flex; justify-content:space-between; margin-top:14px; font-family:var(--sans); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); } /* ---- rendered markdown ---- */ .reading h1, .reading h2, .reading h3, .reading h4 { font-family:var(--serif); line-height:1.25; margin:1.4em 0 .5em; text-wrap:pretty; } .reading h1 { font-size:1.5em; } .reading h2 { font-size:1.28em; } .reading h3 { font-size:1.12em; } .reading h1:first-child, .reading h2:first-child, .reading h3:first-child { margin-top:0; } .reading p { margin:0 0 1em; } .reading p:last-child { margin-bottom:0; } .reading ul.md-list, .reading ol.md-list { margin:0 0 1em 1.2em; padding:0; } .reading .md-list li { margin:.25em 0; } .reading .md-quote { margin:1em 0; padding:.2em 0 .2em 1em; border-left:2px solid var(--accent); color:var(--ink2); font-style:italic; } .reading .md-code { font-family:var(--mono); font-size:.88em; padding:.12em .35em; border-radius:4px; background:var(--chip); } .reading .md-pre { margin:1em 0; padding:14px 16px; border-radius:8px; overflow-x:auto; background:var(--chip); border:1px solid var(--line); } .reading .md-pre code { font-family:var(--mono); font-size:13px; line-height:1.6; } .reading hr { margin:1.6em 0; border:0; border-top:1px solid var(--line); } .reading .md-link { color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .reading .md-link:hover { text-decoration-thickness:2px; } .reading .md-media { display:block; margin:1.2em 0; } .reading .md-media img, img.md-media { display:block; max-width:100%; border-radius:8px; border:1px solid var(--line); } .md-missing { font-size:13px; color:var(--ink3); font-style:italic; } /* ---- attachment gallery ---- */ .gallery { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; } .g-item { width:132px; height:132px; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--chip); padding:0; } .g-item img { width:100%; height:100%; object-fit:cover; display:block; } .g-item:hover { border-color:var(--accent); } .g-audio, .g-video { width:100%; } .g-audio audio { width:100%; } .g-video video { width:100%; max-height:420px; border-radius:8px; border:1px solid var(--line); } .g-file { padding:10px 14px; border-radius:8px; background:var(--chip); font-family:var(--mono); font-size:12px; color:var(--ink3); } .chip.recording { background:var(--accent); color:var(--bg); } /* ---- lightbox ---- */ #lightbox { cursor:zoom-out; } #lightbox img { max-width:92vw; max-height:92vh; border-radius:10px; box-shadow:var(--shadow); background:var(--panel); }