/* Shared theme for every page on the site. * * Colors are TokyoNight — matching the terminal: * light = TokyoNight Day, dark = TokyoNight Moon. * * Theme follows the OS automatically (prefers-color-scheme). A page can force * a mode by setting data-theme="light" | "dark" on (the shared home * button doesn't toggle; pages that want a manual switch keep their own). * * The variable names below are the shared vocabulary — use them (var(--bg), * var(--ink), var(--orange) …) instead of hardcoding colors, and your page * gets light/dark for free. */ :root { /* TokyoNight Day (light) */ --bg: #e1e2e7; --surface: #ffffff; --surface2: #eaebf1; --ink: #2e3358; --muted: #63699a; --faint: #9ba0c4; --line: #cdd0e0; --line2: #bcc0d8; --orange: #2e7de9; /* accent — kept named "orange" for back-compat */ --orange-ink: #1a63c4; --orange-soft: #5a94ee; --orange-wash: #dce7fb; --leaf: #587539; /* green — semantic "happening now" */ --leaf-wash: #dde8d0; --on-accent: #ffffff; /* text/icons sitting on an accent fill */ --shadow: 0 1px 2px rgba(40,50,90,.06), 0 8px 24px -14px rgba(40,60,130,.30); --radius: 14px; } /* Dark values, shared by "OS is dark (and not force-light)" and "force-dark". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #222436; --surface: #2b2e45; --surface2: #31344f; --ink: #c8d3f5; --muted: #828bb8; --faint: #565f89; --line: #383b52; --line2: #454a6e; --orange: #82aaff; --orange-ink: #a5c1ff; --orange-soft: #6f9bf0; --orange-wash: #2d3f76; --leaf: #c3e88d; --leaf-wash: #2b3a2c; --on-accent: #1b1d2b; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.7); } } :root[data-theme="dark"] { --bg: #222436; --surface: #2b2e45; --surface2: #31344f; --ink: #c8d3f5; --muted: #828bb8; --faint: #565f89; --line: #383b52; --line2: #454a6e; --orange: #82aaff; --orange-ink: #a5c1ff; --orange-soft: #6f9bf0; --orange-wash: #2d3f76; --leaf: #c3e88d; --leaf-wash: #2b3a2c; --on-accent: #1b1d2b; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.7); } /* ---- Floating bottom nav bar — injected on every page by site.js ---------- * Phone-first, thumb-reachable dock of three equal-width pills (Home | Menu | * Back), modeled on the budget app's floating bottom bar. Solid --surface (no * glass), safe-area aware. Full width on phones; capped and centred mid-page * on desktop. Pages get bottom padding (via .pages-has-nav) so content clears * it. --pages-nav-h is exported so a page with its own floating bottom element * can offset above the bar (e.g. dotdev's "jump to now" pill). */ :root { --pages-nav-h: 58px; } /* Reserve space so a page's last content isn't hidden behind the fixed bar. */ .pages-has-nav body { padding-bottom: calc(var(--pages-nav-h) + 22px + env(safe-area-inset-bottom, 0px)); } .pages-nav { position: fixed; inset-inline: 0; /* span the full width … */ margin-inline: auto; /* … then centre on desktop */ width: min(640px, calc(100% - 20px)); /* full width on phones, capped mid-page on desktop */ bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line2); box-shadow: var(--shadow); } .pages-nav__btn { flex: 1 1 0; /* every pill the same size, whatever the label */ min-width: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 14px/1 "Hanken Grotesk", system-ui, -apple-system, sans-serif; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .16s, color .16s, transform .1s; } .pages-nav__btn:hover { color: var(--orange); background: var(--surface2); } .pages-nav__btn:active { transform: scale(.94); } /* Current page shown as active (e.g. Home when you're already home). */ .pages-nav__btn.is-active { background: var(--orange-wash); color: var(--orange-ink); cursor: default; } .pages-nav__btn.is-active:hover { color: var(--orange-ink); background: var(--orange-wash); } .pages-nav__ico { font-size: 17px; line-height: 1; flex: none; } /* The label fills the remaining room in its equal-width pill and shrinks (rather than widening the bar); a long one clips + fades (below). */ .pages-nav__txt { min-width: 0; overflow: hidden; white-space: nowrap; } /* When a label is clipped, fade it out at the right edge (gradient mask) rather than a hard cut or an ellipsis. Added by site.js only on overflow. */ .pages-nav__txt.is-clipped { -webkit-mask-image: linear-gradient(to right, #000 74%, transparent); mask-image: linear-gradient(to right, #000 74%, transparent); } /* Icon-only on very narrow screens to keep the bar compact. */ @media (max-width: 360px) { .pages-nav__txt { display: none; } .pages-nav__btn { padding: 0 12px; } } /* One-time "saved for offline" toast, injected by site.js — floats above the bar. */ .pages-toast { position: fixed; left: 50%; bottom: calc(var(--pages-nav-h) + 34px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); z-index: 60; padding: 10px 16px; border-radius: 999px; background: var(--surface); color: var(--ink); border: 1px solid var(--line2); box-shadow: var(--shadow); font: 600 13px/1 "Hanken Grotesk", system-ui, -apple-system, sans-serif; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; } .pages-toast.show { opacity: 1; transform: translate(-50%, 0); } /* Error variant (e.g. refresh couldn't reach the network) — wraps, warm accent. */ .pages-toast.is-error { border-color: #d9534f; border-left: 3px solid #d9534f; border-radius: 12px; max-width: min(92vw, 360px); white-space: normal; line-height: 1.35; text-align: left; } /* Refresh button while it's re-registering the worker: dim + spin its icon. */ .pages-nav__btn[aria-busy="true"] { opacity: .6; pointer-events: none; } .pages-nav__btn[aria-busy="true"] .pages-nav__ico { display: inline-block; animation: pages-spin .7s linear infinite; } @keyframes pages-spin { to { transform: rotate(360deg); } } /* Disabled bar button (e.g. Back with no history). */ .pages-nav__btn.is-disabled { opacity: .38; } .pages-nav__btn.is-disabled:hover { background: transparent; color: var(--ink); } /* ---- Slide-up menu sheet: file tree + theme, opened from the nav bar ------- * A modal bottom sheet (grows up from the bar). Solid --surface (no glass), * safe-area aware. Sits above everything (z above the bar and page overlays). */ .pages-sheet-open { overflow: hidden; } /* lock page scroll while open */ .pages-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; } .pages-sheet.open { visibility: visible; } .pages-sheet__scrim { position: absolute; inset: 0; background: rgba(16, 18, 30, .5); opacity: 0; transition: opacity .28s ease; } .pages-sheet.open .pages-sheet__scrim { opacity: 1; } .pages-sheet__panel { position: relative; width: 100%; max-width: 520px; max-height: 82vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line2); border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: var(--shadow); text-align: left; padding: 4px 0 calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateY(101%); transition: transform .28s cubic-bezier(.32, .72, 0, 1); } .pages-sheet.open .pages-sheet__panel { transform: translateY(0); } .pages-sheet__grab { width: 38px; height: 5px; border-radius: 999px; background: var(--line2); margin: 8px auto 2px; } .pages-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 8px 20px; } .pages-sheet__title { font: 700 12px/1 "Space Mono", monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .pages-sheet__close { border: 0; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; width: 40px; height: 40px; border-radius: 10px; -webkit-tap-highlight-color: transparent; } .pages-sheet__close:hover { color: var(--ink); background: var(--surface2); } /* Scrolling body region, shared by both sheets (site menu + page tools). */ .pages-sheet__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } /* File tree. */ .pages-tree-wrap { padding: 2px 12px 6px; } .pages-tree__loading { color: var(--muted); font-size: 14px; padding: 12px 14px; } .pages-tree, .pages-tree ul { list-style: none; margin: 0; padding: 0; } .pages-tree ul { padding-left: 16px; } .pages-tree__link { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 12px; color: var(--ink); text-decoration: none; font: 600 15px/1.2 "Hanken Grotesk", system-ui, -apple-system, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; } .pages-tree__link:hover { background: var(--surface2); } .pages-tree__link.is-current { background: var(--orange-wash); color: var(--orange-ink); } .pages-tree__ico { font-size: 15px; width: 20px; text-align: center; flex: none; } .pages-tree__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pages-tree__chev { color: var(--muted); font-size: 18px; transition: transform .18s ease; flex: none; } .pages-tree__folder > summary { list-style: none; } .pages-tree__folder > summary::-webkit-details-marker { display: none; } .pages-tree__folder[open] > summary .pages-tree__chev { transform: rotate(90deg); } /* Theme row at the foot of the sheet. */ .pages-sheet__theme { display: flex; align-items: center; gap: 10px; min-height: 50px; margin: 6px 18px 0; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: transparent; color: var(--ink); font: 600 15px/1 "Hanken Grotesk", system-ui, -apple-system, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; } .pages-sheet__theme:hover { background: var(--surface2); } .pages-theme-ico { font-size: 16px; width: 20px; text-align: center; flex: none; } .pages-sheet__state { margin-left: auto; color: var(--muted); font-weight: 600; } /* Page-tools section inside the menu sheet (below the file tree). */ .pages-sheet__divider { height: 1px; background: var(--line); margin: 8px 18px 2px; } .pages-sheet__subhead { font: 700 12px/1 "Space Mono", monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 12px 26px 6px; } /* Page-tools pills (per-page helpers registered via Pages.addHelper) — a two-up grid so the sheet stays short and each is a big, easy tap target. */ .pages-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 14px 10px; } .pages-tool { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); color: var(--ink); text-decoration: none; text-align: left; font: 600 14px/1.2 "Hanken Grotesk", system-ui, -apple-system, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .16s, border-color .16s; } .pages-tool:hover { background: var(--line); border-color: var(--line2); } .pages-tool.is-current { background: var(--orange-wash); border-color: transparent; color: var(--orange-ink); } .pages-tool.is-disabled { opacity: .4; cursor: default; } .pages-tool.is-disabled:hover { background: var(--surface2); border-color: var(--line); } .pages-tool__ico { font-size: 15px; width: 18px; text-align: center; flex: none; } .pages-tool__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }