/* ============================================================================ STYLES.CSS — Theme tokens, layout structures, motion. You normally won't need to edit this. Palette tokens live in :root blocks below if you ever want to retune a color. ============================================================================ */ /* ---- TYPE TOKENS (overridable by Tweaks) ---- */ :root{ --font-serif: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace; --maxw: 640px; /* reading measure for content column */ --ease: cubic-bezier(.22,.61,.36,1); --gut: clamp(22px, 5vw, 56px); } /* ========================================================================= COLOR SCHEMES Three palettes selected at runtime via [data-theme] on . Accent hue is injected separately as --accent (so Tweaks can swap it). ========================================================================= */ /* LIGHT + ACCENT (default) */ [data-theme="accent"]{ --bg: oklch(0.992 0.003 95); --bg-soft: oklch(0.965 0.004 95); --ink: oklch(0.24 0.012 95); --ink-soft: oklch(0.48 0.012 95); --ink-faint: oklch(0.64 0.010 95); --line: oklch(0.90 0.006 95); --line-soft: oklch(0.94 0.005 95); --accent: var(--accent-hue); --accent-ink: var(--accent-hue); --sel: color-mix(in oklch, var(--accent-hue) 22%, transparent); } /* LIGHT MINIMAL NEUTRAL (monochrome — accent collapses to ink) */ [data-theme="light"]{ --bg: oklch(0.985 0 0); --bg-soft: oklch(0.955 0 0); --ink: oklch(0.22 0 0); --ink-soft: oklch(0.46 0 0); --ink-faint: oklch(0.63 0 0); --line: oklch(0.89 0 0); --line-soft: oklch(0.93 0 0); --accent: oklch(0.22 0 0); --accent-ink: oklch(0.22 0 0); --sel: oklch(0.85 0 0); } /* DARK */ [data-theme="dark"]{ --bg: oklch(0.19 0.006 95); --bg-soft: oklch(0.235 0.008 95); --ink: oklch(0.93 0.006 95); --ink-soft: oklch(0.74 0.008 95); --ink-faint: oklch(0.56 0.008 95); --line: oklch(0.32 0.010 95); --line-soft: oklch(0.27 0.008 95); --accent: color-mix(in oklch, var(--accent-hue) 78%, white 22%); --accent-ink: color-mix(in oklch, var(--accent-hue) 78%, white 22%); --sel: color-mix(in oklch, var(--accent-hue) 30%, transparent); } /* ---- RESET ---- */ *{ box-sizing:border-box; margin:0; padding:0; } html{ -webkit-text-size-adjust:100%; } body{ font-family:var(--font-sans); background:var(--bg); color:var(--ink); line-height:1.6; font-size:17px; letter-spacing:-0.003em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .5s var(--ease), color .5s var(--ease); min-height:100vh; } ::selection{ background:var(--sel); } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } /* ========================================================================= APP SHELL — two layout structures share these tokens. ========================================================================= */ .app{ min-height:100vh; } /* ---------- SIDEBAR LAYOUT ---------- */ [data-layout="sidebar"] .app{ display:grid; grid-template-columns: minmax(220px, 280px) 1fr; align-items:start; } [data-layout="sidebar"] .sidebar{ position:sticky; top:0; height:100vh; padding:var(--gut); display:flex; flex-direction:column; border-right:1px solid var(--line); } [data-layout="sidebar"] .main{ padding:var(--gut); padding-top:max(var(--gut), 7vh); min-width:0; } [data-layout="sidebar"] .topbar{ display:none; } /* ---------- CENTERED LAYOUT ---------- */ [data-layout="centered"] .sidebar{ display:none; } [data-layout="centered"] .topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px var(--gut); background:color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter:saturate(1.1) blur(10px); border-bottom:1px solid var(--line-soft); } [data-layout="centered"] .main{ padding:clamp(40px,7vh,88px) var(--gut) 120px; display:flex; flex-direction:column; align-items:center; } [data-layout="centered"] .main .page{ width:100%; max-width:var(--maxw); } [data-layout="centered"] .topbar .brand-name{ font-size:18px; } /* ========================================================================= BRAND + NAV ========================================================================= */ .brand{ display:flex; flex-direction:column; gap:4px; } .brand-name{ font-family:var(--font-serif); font-weight:500; font-size:22px; line-height:1.1; letter-spacing:-0.01em; } .brand-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); } .nav{ margin-top:42px; display:flex; flex-direction:column; gap:2px; } [data-layout="centered"] .nav{ margin-top:0; flex-direction:row; gap:6px; } .nav-link{ display:flex; align-items:baseline; gap:10px; padding:8px 0; color:var(--ink-soft); font-size:15.5px; position:relative; transition:color .3s var(--ease); } [data-layout="centered"] .nav-link{ padding:8px 12px; } .nav-link .num{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); transition:color .3s var(--ease); } [data-layout="centered"] .nav-link .num{ display:none; } .nav-link .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:0; transform:scale(.4); transition:opacity .35s var(--ease), transform .35s var(--ease); align-self:center; } .nav-link:hover{ color:var(--ink); } .nav-link.active{ color:var(--ink); } .nav-link.active .num{ color:var(--accent-ink); } .nav-link.active .dot{ opacity:1; transform:scale(1); } /* sidebar footer cluster */ .side-foot{ margin-top:auto; padding-top:32px; display:flex; flex-direction:column; gap:18px; } .side-meta{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); line-height:1.7; } /* ========================================================================= THEME SWITCH ========================================================================= */ .theme-switch{ display:inline-flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:999px; width:max-content; } .theme-dot{ width:24px; height:24px; border-radius:50%; border:1px solid var(--line); cursor:pointer; padding:0; background:transparent; display:grid; place-items:center; transition:transform .25s var(--ease), border-color .25s var(--ease); position:relative; } .theme-dot:hover{ transform:translateY(-1px); } .theme-dot[data-on="true"]{ border-color:var(--accent); } .theme-dot[data-on="true"]::after{ content:""; position:absolute; inset:-4px; border:1px solid var(--accent); border-radius:50%; opacity:.5; } .swatch{ width:13px; height:13px; border-radius:50%; border:1.5px solid var(--accent); } /* ========================================================================= TYPOGRAPHY / PAGE PRIMITIVES ========================================================================= */ .page{ max-width:var(--maxw); } .eyebrow{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:22px; } .hero-name{ font-family:var(--font-serif); font-weight:400; font-size:clamp(40px, 7vw, 64px); line-height:1.02; letter-spacing:-0.02em; margin-bottom:22px; } .hero-name em{ font-style:italic; } .lede{ font-family:var(--font-serif); font-weight:300; font-size:clamp(20px, 2.6vw, 25px); line-height:1.4; color:var(--ink-soft); letter-spacing:-0.01em; max-width:30ch; } .section{ margin-top:clamp(48px,8vh,84px); } .section-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-ink); padding-bottom:14px; margin-bottom:26px; border-bottom:1px solid var(--accent); display:flex; justify-content:space-between; align-items:baseline; } .sec-no{ color:var(--accent-ink); font-weight:600; letter-spacing:0.06em; } .prose p{ margin-bottom:1.15em; color:var(--ink-soft); } .prose p:last-child{ margin-bottom:0; } /* ---- highlights ---- */ .highlights{ display:flex; flex-direction:column; } .hl{ display:grid; grid-template-columns: 1fr; gap:3px; padding:18px 0; border-bottom:1px solid var(--line-soft); } .hl:last-child{ border-bottom:0; } .hl-label{ font-weight:600; font-size:16px; color:var(--ink); letter-spacing:-0.01em; } .hl-detail{ font-size:15px; color:var(--ink-soft); } /* ---- inline links ---- */ .link{ color:var(--accent-ink); position:relative; background-image:linear-gradient(var(--accent),var(--accent)); background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .35s var(--ease); padding-bottom:1px; } .link:hover{ background-size:100% 1px; } /* ---- contact row ---- */ .contact-row{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; } .btn{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; font-weight:500; padding:11px 18px; border-radius:999px; border:1px solid var(--line); color:var(--ink); transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease), color .3s var(--ease); } .btn .ico{ width:15px; height:15px; opacity:.7; transition:opacity .3s var(--ease); } .btn:hover{ transform:translateY(-1px); border-color:var(--ink-faint); } .btn:hover .ico{ opacity:1; } .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--bg); } [data-theme="dark"] .btn-primary{ color:oklch(0.19 0.006 95); } .btn-primary .ico{ opacity:.85; } .btn-primary:hover{ filter:brightness(1.04); border-color:var(--accent); } /* ========================================================================= WRITING ========================================================================= */ .writing-list{ display:flex; flex-direction:column; } .entry{ display:block; padding:26px 0; border-top:1px solid var(--line); transition:background .3s var(--ease); } .entry:last-child{ border-bottom:1px solid var(--line); } .entry-meta{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:var(--ink-faint); text-transform:uppercase; display:flex; gap:14px; margin-bottom:9px; } .entry-title{ font-family:var(--font-serif); font-weight:500; font-size:clamp(21px,2.6vw,26px); line-height:1.18; letter-spacing:-0.015em; margin-bottom:8px; display:inline-block; background-image:linear-gradient(var(--ink),var(--ink)); background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .4s var(--ease); } .entry:hover .entry-title{ background-size:100% 1px; } .entry-blurb{ color:var(--ink-soft); font-size:16px; max-width:54ch; } .entry-arrow{ font-family:var(--font-mono); font-size:13px; color:var(--accent-ink); margin-top:12px; display:inline-flex; align-items:center; gap:7px; opacity:0; transform:translateX(-4px); transition:opacity .35s var(--ease), transform .35s var(--ease); } .entry:hover .entry-arrow{ opacity:1; transform:translateX(0); } /* reading view */ .reading .back{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); display:inline-flex; gap:8px; align-items:center; margin-bottom:38px; transition:gap .3s var(--ease), color .3s var(--ease); } .reading .back:hover{ gap:12px; color:var(--ink); } .reading-meta{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; color:var(--ink-faint); text-transform:uppercase; display:flex; gap:14px; margin-bottom:18px; } .reading h1{ font-family:var(--font-serif); font-weight:400; font-size:clamp(30px,4.4vw,44px); line-height:1.1; letter-spacing:-0.02em; margin-bottom:34px; } .reading-body{ font-size:18px; line-height:1.72; } .reading-body p{ margin-bottom:1.3em; color:var(--ink-soft); } /* ---- rendered markdown (long writeups) ---- */ .md-loading{ color:var(--ink-faint); font-family:var(--font-mono); font-size:14px; } .reading-body.md{ color:var(--ink-soft); } .reading-body.md > :first-child{ margin-top:0; } .reading-body.md h2{ font-family:var(--font-serif); font-weight:500; color:var(--ink); font-size:clamp(22px,3vw,28px); line-height:1.2; letter-spacing:-0.015em; margin:2em 0 0.7em; } .reading-body.md h3{ font-family:var(--font-sans); font-weight:600; color:var(--ink); font-size:18px; letter-spacing:-0.005em; margin:1.7em 0 0.6em; } .reading-body.md strong{ color:var(--ink); font-weight:600; } .reading-body.md em{ font-style:italic; } .reading-body.md a{ color:var(--accent-ink); text-decoration:none; border-bottom:1px solid color-mix(in oklch, var(--accent) 40%, transparent); transition:border-color .25s var(--ease); } .reading-body.md a:hover{ border-bottom-color:var(--accent); } .reading-body.md ul, .reading-body.md ol{ margin:0 0 1.3em; padding-left:1.4em; } .reading-body.md li{ margin-bottom:0.5em; } .reading-body.md li::marker{ color:var(--ink-faint); } .reading-body.md hr{ border:0; height:1px; background:var(--line); margin:2.6em 0; } .reading-body.md img{ display:block; width:100%; height:auto; margin:1.6em 0; border:1px solid var(--line); border-radius:4px; background:var(--bg-soft); } .reading-body.md code{ font-family:var(--font-mono); font-size:0.86em; background:var(--bg-soft); border:1px solid var(--line-soft); padding:0.1em 0.4em; border-radius:3px; color:var(--ink); } .reading-body.md pre{ background:var(--bg-soft); border:1px solid var(--line); border-radius:5px; padding:16px 18px; overflow-x:auto; margin:1.4em 0; } .reading-body.md pre code{ background:none; border:0; padding:0; font-size:13.5px; line-height:1.6; } /* TL;DR / pull-quote */ .reading-body.md blockquote{ margin:0 0 1.6em; padding:16px 20px; border-left:3px solid var(--accent); background:var(--bg-soft); border-radius:0 4px 4px 0; font-size:0.96em; } .reading-body.md blockquote p{ margin:0; color:var(--ink); } /* tables (wrapped in .md-table for horizontal scroll) */ .md-table{ overflow-x:auto; margin:1.6em 0; -webkit-overflow-scrolling:touch; } .reading-body.md table{ border-collapse:collapse; width:100%; min-width:520px; font-family:var(--font-sans); font-size:14px; } .reading-body.md th, .reading-body.md td{ text-align:left; padding:9px 14px; border-bottom:1px solid var(--line); white-space:nowrap; } .reading-body.md thead th{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; border-bottom:1px solid var(--ink-faint); } .reading-body.md tbody tr:last-child td{ border-bottom:0; } /* ========================================================================= GALLERY ========================================================================= */ .gallery{ width:100%; } [data-layout="centered"] .gallery .page{ max-width:760px; } .gframe{ position:relative; width:100%; aspect-ratio:3/2; background:var(--bg-soft); border:1px solid var(--line); border-radius:3px; overflow:hidden; cursor:pointer; } .gframe img, .gframe .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s var(--ease); } .gframe img.show, .gframe .ph.show{ opacity:1; } .gframe .ph{ display:grid; place-items:center; } .gbar{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; gap:16px; } .gcount{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); letter-spacing:0.05em; } .gnext{ display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; padding:11px 20px; border-radius:999px; border:1px solid var(--line); color:var(--ink); cursor:pointer; background:transparent; transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); } .gnext .ico{ transition:transform .5s var(--ease); } .gnext:hover{ border-color:var(--accent); color:var(--accent-ink); transform:translateY(-1px); } .gnext:hover .ico{ transform:rotate(150deg); } .gnext:active{ transform:translateY(0) scale(.98); } /* ========================================================================= ENTRANCE REVEALS + PAGE TRANSITION ========================================================================= */ /* Scroll-reveal disabled: content is always visible (no fade/slide on scroll). */ .reveal{ opacity:1; transform:none; } .reveal.in{ opacity:1; transform:none; } /* Gentle per-route entrance via transition, toggled by JS (.entered). */ .page-anim{ opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .page-anim.entered{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } .reveal{ opacity:1; transform:none; } .page-anim{ opacity:1; transform:none; } } /* ========================================================================= RESPONSIVE — sidebar collapses to a top bar on narrow screens ========================================================================= */ @media (max-width: 820px){ [data-layout="sidebar"] .app{ display:block; } [data-layout="sidebar"] .sidebar{ position:sticky; top:0; height:auto; z-index:20; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px var(--gut); border-right:0; border-bottom:1px solid var(--line); background:color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter:saturate(1.1) blur(10px); } [data-layout="sidebar"] .brand{ flex-direction:row; align-items:baseline; gap:10px; } [data-layout="sidebar"] .brand-tag{ display:none; } [data-layout="sidebar"] .nav{ margin-top:0; flex-direction:row; gap:2px; order:3; flex-basis:100%; } [data-layout="sidebar"] .nav-link{ padding:6px 0; margin-right:18px; } [data-layout="sidebar"] .nav-link .num{ display:none; } [data-layout="sidebar"] .side-foot{ margin-top:0; padding-top:0; flex-direction:row; align-items:center; } [data-layout="sidebar"] .side-meta{ display:none; } [data-layout="sidebar"] .main{ padding-top:var(--gut); } } @media (max-width: 540px){ body{ font-size:16px; } [data-layout="centered"] .nav .label-full{ } .reading-body{ font-size:17px; } }