/* laderchi.com — site-wide styles for the public pages (homepage + 404). * * Deliberately small and token-driven: everything visual is a custom property * in :root, so a design pass can be done by editing this block alone. This is * NOT the Granola design system (docs/granola/design-system/) — that one is * scoped to the Granola app, and the personal site keeps its own identity so * the two can evolve independently. * * The homepage is a single screen: header, a centred block of copy, one call * to action, footer. It came out of a Claude Design export whose every value * was an inline style; the values are transcribed into the tokens below so the * page keeps this file's light/dark behaviour instead of being pinned to the * export's light-only palette. * * Cache-busted via ?v=… on the href in index.html — bump it when editing. */ /* Light / dark. * * The default is the operating system's preference, and the public pages leave * it at that. `/me` adds a Settings control that can pin a mode, and does it by * stamping `data-mode="light"|"dark"` on before first paint — so the * three rules below are, in order: the OS preference unless something has * pinned light; an explicit dark; an explicit light (already the base tokens, * but `color-scheme` still has to be told, or the browser paints form controls * and scrollbars dark under a light page). * * The dark tokens are written twice rather than being reached through a second * layer of custom properties. A `--dark-paper`-style indirection would remove * the duplication and cost every colour on the site an extra variable hop to * read; ten repeated lines in one place is the cheaper of the two. */ :root { color-scheme: light dark; /* Palette — monochrome ink on warm paper, one accent used sparingly. * --accent is the hairline/marker accent; --accent-deep is the same hue * pushed until white text sits on it at ~5.5:1, which is what the one * filled button needs. In dark the relationship inverts: the accent is * already bright, so the button takes dark ink on it instead. */ --paper: #fbfaf8; --paper-2: #f3f1ed; --ink: #14161a; --ink-muted: #5e6673; --ink-faint: #8d94a1; --rule: #e5e2dc; --accent: #d9502f; --accent-deep: #b64327; --accent-ink: #ffffff; /* Type */ --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem); --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem); --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.12rem); --step-1: clamp(1.25rem, 1.10rem + 0.60vw, 1.55rem); --step-2: clamp(1.70rem, 1.45rem + 1.20vw, 2.50rem); --step-3: clamp(2.40rem, 1.60rem + 3.40vw, 4.75rem); /* Space + shape */ --gap: clamp(1rem, 0.4rem + 1.8vw, 1.75rem); --pad-y: clamp(1.25rem, 1rem + 1.4vw, 2.25rem); --pad-x: clamp(1.25rem, 0.6rem + 3vw, 3rem); --measure: 34rem; --shell: 46rem; } @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { --paper: #0e0f12; --paper-2: #16181d; --ink: #eceef2; --ink-muted: #9aa1af; --ink-faint: #6b7280; --rule: #24272e; --accent: #ff7a5c; --accent-deep: #ff7a5c; --accent-ink: #16181d; } } :root[data-mode="dark"] { color-scheme: dark; --paper: #0e0f12; --paper-2: #16181d; --ink: #eceef2; --ink-muted: #9aa1af; --ink-faint: #6b7280; --rule: #24272e; --accent: #ff7a5c; --accent-deep: #ff7a5c; --accent-ink: #16181d; } :root[data-mode="light"] { color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--accent-ink); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } /* ── The page ─────────────────────────────────────────── * * One screen: the header pinned to the top, the footer to the bottom, the copy * centred in whatever is left. `min-height` rather than a fixed height, and no * `overflow: hidden`: the design assumes the block fits, and on a phone held * sideways — or with the text size turned up — it does not, and a page that * clips its own bio is worse than a page that scrolls. `dvh` so the mobile URL * bar collapsing doesn't leave a gap, and the safe-area insets so the notch and * the home indicator don't sit on the header and the footer. */ .page { min-height: 100dvh; display: flex; flex-direction: column; padding: var(--pad-y) var(--pad-x); padding-top: max(var(--pad-y), env(safe-area-inset-top)); padding-bottom: max(var(--pad-y), env(safe-area-inset-bottom)); padding-left: max(var(--pad-x), env(safe-area-inset-left)); padding-right: max(var(--pad-x), env(safe-area-inset-right)); } /* ── Header ─────────────────────────────────────────── */ .site-head { flex: none; display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; } .wordmark { font-size: var(--step--1); font-weight: 600; letter-spacing: -0.015em; } .wordmark .dot { color: var(--accent); } .locus { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.10em; color: var(--ink-faint); } /* ── Hero ───────────────────────────────────────────── */ .hero { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--gap); width: 100%; max-width: var(--shell); margin-inline: auto; padding-block: clamp(1.5rem, 4vh, 3rem); } .hero h1 { font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; } .hero .role { font-size: var(--step-1); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-muted); max-width: 30ch; text-wrap: pretty; } .hero .role strong { color: var(--ink); font-weight: 550; } .hero .bio { color: var(--ink-muted); max-width: var(--measure); text-wrap: pretty; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: clamp(0.25rem, 1.2vh, 0.75rem); } /* The one filled control on the page. 44px minimum so it is a real thumb * target, and the hover state is CSS rather than the export's JS-driven * `style-hover` attribute — a touch device gets the resting state and the * :active feedback, which is what it can actually use. */ .cta { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .6rem 1.15rem; border-radius: 999px; background: var(--accent-deep); color: var(--accent-ink); font-size: var(--step--1); transition: filter .18s ease; -webkit-tap-highlight-color: transparent; } .cta:hover { filter: brightness(0.88); } .cta:active { filter: brightness(0.82); } .cta svg { width: 1.05em; height: 1.05em; flex: none; } /* ── Footer ─────────────────────────────────────────── */ .site-foot { flex: none; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: var(--step--1); color: var(--ink-faint); } .site-foot .mono { font-family: var(--font-mono); letter-spacing: 0.04em; }