/* Design tokens ───────────────────────────────────────────────────────────── */ :root { /* Color */ --color-bg: #f7f5ef; --color-ink: #121417; --color-ink-deep: #000000; /* hover of dark pill — pitch black */ --color-ink-soft: #2d2d30; /* body copy on post cards */ --color-ink-muted: #3e3e3e; /* description text on stat cards */ --color-muted: #5e5e5e; --color-subtle: #626262; --color-watermark: #b6b6b6; /* faint decorative text (truth row) */ --color-accent: #f40; --color-accent-dark: #e63d00; /* hover of primary pill */ --color-navy: #142358; --color-border: rgba(18, 20, 23, 0.1); --color-card: #ffffff; --color-dark: #222222; /* Semi-transparent overlays */ --color-hover-bg: rgba(0, 0, 0, 0.05); /* subtle hover fill on icon buttons */ --color-code-bg: rgba(0, 0, 0, 0.06); /* inline code and pre blocks in prose */ --color-shadow-card: rgba(0, 0, 0, 0.08); /* soft drop under avatar ring */ /* Glass / chrome surfaces — semi-transparent bgs designed to sit atop content with backdrop-filter for the Apple "Liquid Glass" effect. Always pair --color-glass with --glass-blur; at the top of a page the glass reads as nearly opaque (nothing behind to blur), then reveals the saturated blur as content scrolls underneath. The saturate(180%) boost is Apple's trick: blur alone desaturates the image behind the glass, so boosting saturation restores color vibrance and keeps the effect looking premium rather than grey. */ --color-glass: rgba(247, 245, 239, 0.72); /* cream bg at ~72% opacity */ --glass-blur: saturate(180%) blur(20px); /* Apple-signature blur stack */ /* Typography — Adobe Fonts variable families degular-variable: weight axis 200–800 area-variable: weight axis 100–900 Use font-variation-settings: "wght" OR plain font-weight: . */ --font-display: 'degular-variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display-thin: var(--font-display); --font-body: 'area-variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-ui: var(--font-body); /* Monospaced stack for technical/editorial metadata — dates, read times, indices. Uppercase + wide tracking gives the condensed editorial label look. */ --font-mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, 'Cascadia Mono', 'Roboto Mono', monospace; /* Weight tokens — keep consistent across components */ --weight-thin: 200; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* Fluid type scale Hero & section */ --fs-hero: clamp(48px, 7vw, 88px); /* page hero titles */ --fs-hero-lede: clamp(28px, 3.5vw, 48px); /* hero description / lede */ --fs-section: clamp(36px, 5vw, 72px); /* section heading between groups */ --fs-display-xl: clamp(96px, 18vw, 240px); /* oversized display (Fin, 404 code) */ /* Stats & card titles */ --fs-stat: clamp(56px, 8vw, 96px); /* stat card big numbers */ --fs-card-title: clamp(28px, 3vw, 60px); /* flagship project card title */ --fs-title-lg: clamp(32px, 4vw, 56px); /* PostCard, TruthRow, Testimonial */ --fs-title-md: clamp(28px, 3vw, 40px); /* Header logo, WorkRow, MiniApp, blog h2 */ --fs-title-sm: clamp(24px, 2.4vw, 32px); /* BookCard, blog h3 */ /* Body & UI */ --fs-subtitle: clamp(20px, 2.5vw, 28px); /* hero subtitle, page lede */ --fs-body-lg: clamp(18px, 1.6vw, 24px); /* emphasized body, card description */ --fs-body: clamp(16px, 1.2vw, 20px); /* default paragraph */ --fs-ui-lg: 24px; /* nav link, button-lg, author name */ --fs-ui: 18px; /* quote copy, bulleted copy */ --fs-ui-sm: 14px; /* footer copy, book meta, role */ --fs-meta: 16px; /* dates, link labels */ --fs-eyebrow: 16px; /* tracked uppercase eyebrow */ /* Layout */ --container: 1280px; --container-pad: clamp(20px, 5vw, 40px); --header-h: 104px; /* Radii */ --radius-card: 16px; --radius-large: 24px; --radius-xl: 32px; --radius-pill: 80px; /* Vertical rhythm — matched to Figma About Dan (93:5411) spacing audit. Desktop maxes shown at right. Clamps down responsively below 1440px. Naming: *-section → gap between top-level (H2) sections *-subsection → gap between H3 sub-sections nested under an H2 *-heading → gap from a heading to its own content *-divider → gap around a horizontal rule when present *-hero-* → hero-specific spacing On the About page, Figma shows NO horizontal rules between top-level sections — the section break is just --space-section of whitespace plus the next heading. Dividers are opt-in on SectionHeading (divider prop). */ --space-section: clamp(120px, 14vw, 240px); /* prev content → next H2 heading */ --space-subsection: clamp(64px, 7vw, 120px); /* prev content → next H3 heading */ --space-after-hero: clamp(64px, 8vw, 120px); /* hero bottom rule → first H2 (tighter than --space-section) */ --space-after-heading: clamp(32px, 4vw, 56px); /* H2 heading → its content */ --space-after-subheading: clamp(24px, 3vw, 40px); /* H3 heading → its content */ --space-heading-lede: clamp(16px, 2vw, 24px); /* H2 → immediately-following lede paragraph (tight) */ --space-after-divider: clamp(32px, 4vw, 56px); /* divider row → heading (when divider is shown) */ --space-hero-top: clamp(48px, 6vw, 96px); /* header rule → hero text (pages without PageHero) */ /* Border widths */ --bw-hairline: 1px; /* list-item dividers */ --bw-rule: 2px; /* section rules, avatar ring */ --bw-underbar: 4px; /* active nav underbar */ /* Motion */ --ease: cubic-bezier(0.2, 0.65, 0.3, 1); --dur-fast: 200ms; /* color, text transitions */ --dur-slow: 300ms; /* transform/hover lifts on cards */ color-scheme: light; } /* ─── Dark theme ─────────────────────────────────────────────────── Activated by data-theme="dark" on , which the inline pre-paint script in BaseLayout sets from the OS colour scheme. Only the color tokens flip — every component that uses the tokens adapts for free. A few selectors below patch the handful of spots that hardcode hex values or reuse --color-ink as a *surface* (where a straight invert would break contrast). */ :root[data-theme='dark'] { color-scheme: dark; --color-bg: #14151a; --color-ink: #f4f2ea; /* Kept dark on purpose: this token doubles as a *surface* (footer panel, dark-pill hover), so it must stay near-black even in dark mode. Primary text inversion rides on --color-ink only. */ --color-ink-deep: #0b0c10; --color-ink-soft: #d7d5cc; --color-ink-muted: #bdbbb3; --color-muted: #9e9d96; --color-subtle: #95948d; --color-watermark: #34353a; --color-accent: #ff5a1f; --color-accent-dark: #ff7a4d; --color-navy: #9fb4ef; --color-border: rgba(244, 242, 234, 0.14); --color-card: #1d1f25; --color-dark: #e8e6df; --color-hover-bg: rgba(255, 255, 255, 0.08); --color-code-bg: rgba(255, 255, 255, 0.08); --color-shadow-card: rgba(0, 0, 0, 0.5); --color-glass: rgba(20, 21, 26, 0.72); } /* Patches for hardcoded text colors so prose stays legible on dark. */ :root[data-theme='dark'] .post__content { color: var(--color-ink-soft); } :root[data-theme='dark'] .post__content h2, :root[data-theme='dark'] .post__content h3 { color: var(--color-ink); } :root[data-theme='dark'] .post-card__title, :root[data-theme='dark'] .work-highlight__title { color: var(--color-ink); } /* The "dark" pill is a dark *surface* in light mode; in dark mode it becomes a light surface, so flip its label/hover to keep contrast. */ :root[data-theme='dark'] .pill--dark { color: #14151a; } :root[data-theme='dark'] .pill--dark:hover { background: var(--color-accent); color: #fff; } :root[data-theme='dark'] .pill--ghost:hover { color: #14151a; } /* In dark mode the footer's near-black panel reads as a seam against the already-dark page, so let it blend with the main background. */ :root[data-theme='dark'] .footer { background: var(--color-bg); } /* Accordion highlight: a soft translucent blue on dark instead of the light-blue used in light mode. */ :root[data-theme='dark'] .truth-row { --truth-highlight: rgba(125, 155, 235, 0.12); } /* Theme-paired artwork: pages render BOTH the -light and -dark asset and this shows whichever matches the active theme. !important keeps the swap robust against the more specific decoration sizing rules in PageHero / contact (which hardcode `display: block`). */ .theme-art--dark { display: none !important; } :root[data-theme='dark'] .theme-art--light { display: none !important; } :root[data-theme='dark'] .theme-art--dark { display: block !important; } /* * Breakpoints (CSS custom properties can't be used inside @media, so we * document them here and use the literal px value in rules). * * 640px — small tablets (2-col grids) * 768px — tablets (testimonial image column reveals, etc.) * 900px — minimum for full desktop nav (logo + 3 links + Contact pill) * 1024px — desktop (side-by-side project/post cards) * 1440px — wide desktop (currently unused; reserved) */ /* Reset + base ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; background: var(--color-bg); color: var(--color-ink); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--weight-regular); font-optical-sizing: auto; line-height: 1.5; /* clip — prevents horizontal scroll without breaking sticky positioning */ overflow-x: clip; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 0.95; letter-spacing: -0.02em; color: var(--color-ink); } p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } ul, ol { margin: 0; padding: 0; } ::selection { background: var(--color-accent); color: #fff; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } .pill[data-astro-cid-isuw4qdq]{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em;line-height:1;text-decoration:none;cursor:pointer;transition:transform var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);white-space:nowrap}.pill[data-astro-cid-isuw4qdq]:hover{transform:translateY(-1px)}.pill[data-astro-cid-isuw4qdq]:active{transform:translateY(0)}.pill--md[data-astro-cid-isuw4qdq]{padding:16px 24px;font-size:20px}.pill--lg[data-astro-cid-isuw4qdq]{padding:20px 32px;font-size:var(--fs-ui-lg)}.pill--primary[data-astro-cid-isuw4qdq]{background:var(--color-accent);color:#fff}.pill--primary[data-astro-cid-isuw4qdq]:hover{background:var(--color-accent-dark)}.pill--dark[data-astro-cid-isuw4qdq]{background:var(--color-ink);color:#fff}.pill--dark[data-astro-cid-isuw4qdq]:hover{background:var(--color-accent);color:#fff}.pill--ghost[data-astro-cid-isuw4qdq]{background:transparent;color:var(--color-ink);box-shadow:inset 0 0 0 2px var(--color-ink)}.pill--ghost[data-astro-cid-isuw4qdq]:hover{background:var(--color-ink);color:#fff}.header[data-astro-cid-qlfjksao]{position:sticky;top:0;z-index:50;width:100%;background:var(--color-glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.header[data-astro-cid-qlfjksao]{background:var(--color-bg)}}.header__inner{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h)}.header__logo[data-astro-cid-qlfjksao]{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--fs-title-md);letter-spacing:-0.02em;color:var(--color-ink);line-height:1;white-space:nowrap;flex-shrink:0;text-decoration:none;transition:color 0.15s ease}.header__logo[data-astro-cid-qlfjksao]:hover,.header__logo[data-astro-cid-qlfjksao]:focus-visible{color:var(--color-accent)}.header__logo[data-astro-cid-qlfjksao] img[data-astro-cid-qlfjksao]{height:32px;width:auto;display:block;flex-shrink:0}.header__logo[data-astro-cid-qlfjksao] img[data-astro-cid-qlfjksao].header__logo-mark--dark{display:none}[data-theme="dark"] .header__logo[data-astro-cid-qlfjksao] img[data-astro-cid-qlfjksao].header__logo-mark--light{display:none}[data-theme="dark"] .header__logo[data-astro-cid-qlfjksao] img[data-astro-cid-qlfjksao].header__logo-mark--dark{display:block}.header__right[data-astro-cid-qlfjksao]{display:none;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:48px;flex-shrink:0}.header__links[data-astro-cid-qlfjksao]{display:flex;flex-direction:row;flex-wrap:nowrap;list-style:none;gap:48px;align-items:center;margin:0;padding:0}.header__links[data-astro-cid-qlfjksao] li[data-astro-cid-qlfjksao]{display:flex;align-items:center}.header__link[data-astro-cid-qlfjksao]{position:relative;display:inline-block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--fs-ui-lg);letter-spacing:-0.02em;color:var(--color-ink);line-height:1;padding:8px 0;white-space:nowrap;transition:color var(--dur-fast) var(--ease)}.header__link[data-astro-cid-qlfjksao]:hover{color:var(--color-accent)}.header__link[data-astro-cid-qlfjksao].is-active{color:var(--color-accent)}.header__link[data-astro-cid-qlfjksao].is-active::after{content:"";position:absolute;left:0;right:0;bottom:-32px;height:var(--bw-underbar);background:var(--color-accent)}.header__toggle[data-astro-cid-qlfjksao]{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;color:var(--color-ink)}.header__toggle[data-astro-cid-qlfjksao]:hover{background:var(--color-hover-bg)}.header__rule[data-astro-cid-qlfjksao]{width:100%;height:2px;background:var(--color-border);opacity:1;transition:opacity var(--dur-fast) var(--ease)}.header--scrolled[data-astro-cid-qlfjksao] .header__rule[data-astro-cid-qlfjksao]{opacity:0}.mobile-menu[data-astro-cid-qlfjksao]{position:fixed;inset:0;z-index:100;background:var(--color-bg);overflow-y:auto}.mobile-menu[data-astro-cid-qlfjksao][hidden]{display:none}.mobile-menu__top[data-astro-cid-qlfjksao]{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);padding-inline:var(--container-pad);border-bottom:var(--bw-rule) solid var(--color-border)}.mobile-menu__links[data-astro-cid-qlfjksao]{list-style:none;margin:0;padding:32px var(--container-pad);display:flex;flex-direction:column;gap:8px}.mobile-menu__link[data-astro-cid-qlfjksao]{display:block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(40px,9vw,64px);letter-spacing:-0.025em;color:var(--color-ink);padding:12px 0;line-height:1}.mobile-menu__link[data-astro-cid-qlfjksao].is-active{color:var(--color-accent)}.mobile-menu__link--cta[data-astro-cid-qlfjksao]{color:var(--color-accent);margin-top:16px}@media (min-width: 900px){.header__right[data-astro-cid-qlfjksao]{display:flex}.header__toggle[data-astro-cid-qlfjksao]{display:none}.mobile-menu[data-astro-cid-qlfjksao]{display:none!important}}.footer[data-astro-cid-35ed7um5]{position:relative;background:var(--color-ink-deep);color:#fff;overflow:hidden;margin-top:var(--space-section)}.footer__top[data-astro-cid-35ed7um5]{position:relative;z-index:2}.footer__inner[data-astro-cid-35ed7um5]{display:flex;align-items:center;justify-content:space-between;padding-block:32px;gap:24px;flex-wrap:wrap}.footer__logo[data-astro-cid-35ed7um5]{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:40px;line-height:1;color:#fff;letter-spacing:-0.02em}.footer__links[data-astro-cid-35ed7um5]{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:clamp(24px,4vw,56px);align-items:center}.footer__links[data-astro-cid-35ed7um5] a[data-astro-cid-35ed7um5]{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--fs-ui-lg);color:#fff;letter-spacing:-0.02em;transition:color var(--dur-fast) var(--ease)}.footer__links[data-astro-cid-35ed7um5] a[data-astro-cid-35ed7um5]:hover{color:var(--color-accent)}.footer__rule[data-astro-cid-35ed7um5]{height:var(--bw-hairline);background:rgba(255,255,255,0.2)}.footer__stage[data-astro-cid-35ed7um5]{position:relative;margin-top:clamp(40px,6vw,120px);z-index:1;display:flex;justify-content:center;overflow:hidden;width:100%;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.footer__vector[data-astro-cid-35ed7um5]{width:min(1276px,calc(100% - 2 * var(--container-pad)));height:auto;display:block}.footer__stage[data-astro-cid-35ed7um5]:focus-visible{outline:none}.skip-link[data-astro-cid-37fxchfa]{position:absolute;left:8px;top:8px;padding:8px 16px;background:var(--color-ink);color:#fff;border-radius:8px;font-family:var(--font-display);z-index:200;transform:translateY(-200%)}.skip-link[data-astro-cid-37fxchfa]:focus{transform:translateY(0)}