/* ------------------------------------------------------------------ Palettes. Set data-palette on (paper | slate | forest) and data-theme (light | dark). Absent data-theme follows the OS. ------------------------------------------------------------------ */ :root, :root[data-palette="paper"] { --bg: #fbfaf7; --bg-tint: #f3efe7; --surface: #ffffff; --ink: #17161a; --ink-soft: #3d3b40; --muted: #74706c; --line: #e4ded3; --line-soft: #efeae1; --accent: #8f2d3c; --accent-ink: #6f222e; --accent-wash: #f6ecec; } :root[data-palette="slate"] { --bg: #fcfcfd; --bg-tint: #eef0f4; --surface: #ffffff; --ink: #14161b; --ink-soft: #383d47; --muted: #6b7280; --line: #dfe3ea; --line-soft: #edeff3; --accent: #33478f; --accent-ink: #26356c; --accent-wash: #eceff9; } :root[data-palette="forest"] { --bg: #fbfaf5; --bg-tint: #eef1e7; --surface: #ffffff; --ink: #161914; --ink-soft: #343a2f; --muted: #6c7265; --line: #e0e4d7; --line-soft: #eef1e8; --accent: #2f6149; --accent-ink: #244b39; --accent-wash: #e9f0ea; } /* dark variants -------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), :root[data-palette="paper"]:not([data-theme="light"]) { --bg: #17151a; --bg-tint: #201d24; --surface: #1d1a21; --ink: #eeeae4; --ink-soft: #cdc7c0; --muted: #98908a; --line: #322d38; --line-soft: #272330; --accent: #e7929c; --accent-ink: #f0b4bb; --accent-wash: #2b2026; } :root[data-palette="slate"]:not([data-theme="light"]) { --bg: #12141a; --bg-tint: #1a1d25; --surface: #181b22; --ink: #e8eaf0; --ink-soft: #c3c8d4; --muted: #8b93a3; --line: #2a2f3b; --line-soft: #222632; --accent: #9db4f0; --accent-ink: #b9c9f6; --accent-wash: #1d2333; } :root[data-palette="forest"]:not([data-theme="light"]) { --bg: #141711; --bg-tint: #1c2018; --surface: #1a1e15; --ink: #e9ece2; --ink-soft: #c6ccbc; --muted: #8d9484; --line: #2b3125; --line-soft: #23281e; --accent: #8fc7a5; --accent-ink: #abd6bb; --accent-wash: #1d2a21; } } :root[data-theme="dark"], :root[data-theme="dark"][data-palette="paper"] { --bg: #17151a; --bg-tint: #201d24; --surface: #1d1a21; --ink: #eeeae4; --ink-soft: #cdc7c0; --muted: #98908a; --line: #322d38; --line-soft: #272330; --accent: #e7929c; --accent-ink: #f0b4bb; --accent-wash: #2b2026; } :root[data-theme="dark"][data-palette="slate"] { --bg: #12141a; --bg-tint: #1a1d25; --surface: #181b22; --ink: #e8eaf0; --ink-soft: #c3c8d4; --muted: #8b93a3; --line: #2a2f3b; --line-soft: #222632; --accent: #9db4f0; --accent-ink: #b9c9f6; --accent-wash: #1d2333; } :root[data-theme="dark"][data-palette="forest"] { --bg: #141711; --bg-tint: #1c2018; --surface: #1a1e15; --ink: #e9ece2; --ink-soft: #c6ccbc; --muted: #8d9484; --line: #2b3125; --line-soft: #23281e; --accent: #8fc7a5; --accent-ink: #abd6bb; --accent-wash: #1d2a21; } :root { --display: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wrap: 60rem; } /* ------------------------------------------------------------------ */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16.5px/1.68 var(--sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } a { color: var(--accent); text-underline-offset: .16em; } a:hover { color: var(--accent-ink); } main { max-width: var(--wrap); margin: 0 auto; padding: 3rem 1.5rem 5rem; } ::selection { background: var(--accent-wash); } /* ---- top bar ---- */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .85rem 1.5rem; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-soft); } .brand { font-family: var(--display); font-size: 1.24rem; font-weight: 500; letter-spacing: -.012em; text-decoration: none; color: var(--ink); margin-right: auto; } .topbar nav { display: flex; gap: .15rem; flex-wrap: wrap; } .topbar nav a { position: relative; padding: .35rem .7rem; border-radius: 7px; text-decoration: none; color: var(--muted); font-size: .9rem; transition: color .15s ease, background .15s ease; } .topbar nav a:hover { color: var(--ink); background: var(--bg-tint); } .topbar nav a.on { color: var(--accent); font-weight: 600; } .topbar nav a.on::after { content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .05rem; height: 2px; border-radius: 2px; background: var(--accent); } .controls { display: flex; gap: .3rem; align-items: center; } .swatches { display: flex; gap: .25rem; } .swatch { width: 1.15rem; height: 1.15rem; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid var(--line); outline-offset: 2px; transition: transform .12s ease; } .swatch:hover { transform: scale(1.14); } .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); } .swatch.paper { background: #8f2d3c; } .swatch.slate { background: #33478f; } .swatch.forest { background: #2f6149; } .theme { border: 1px solid var(--line); background: var(--bg-tint); color: var(--muted); border-radius: 7px; width: 2rem; height: 2rem; cursor: pointer; font-size: .92rem; line-height: 1; transition: color .15s ease, border-color .15s ease; } .theme:hover { color: var(--accent); border-color: var(--accent); } /* ---- headings ---- */ h1 { font-family: var(--display); font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3rem); font-weight: 400; line-height: 1.12; letter-spacing: -.021em; margin: 0 0 .5rem; } h2 { font-family: var(--display); font-size: 1.5rem; font-weight: 500; letter-spacing: -.012em; margin: 3rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line-soft); } h3 { font-family: var(--display); font-size: 1.12rem; font-weight: 500; margin: 0 0 .2rem; } .lede { color: var(--muted); font-size: 1.02rem; margin: 0 0 1.8rem; } p { color: var(--ink-soft); } /* ---- home hero ---- */ .hero { display: flex; gap: 2.4rem; align-items: center; flex-wrap: wrap; padding-bottom: 2rem; } .portrait { width: 168px; height: 168px; flex: none; border-radius: 14px; object-fit: cover; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 32px -14px rgba(0,0,0,.28); } .who { min-width: 16rem; flex: 1; } .who h1 { margin-bottom: .55rem; } .role { margin: 0 0 .5rem; font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .role span { color: var(--ink-soft); } .email { margin: 0 0 1.15rem; color: var(--muted); font-size: .93rem; } .pills { display: flex; flex-wrap: wrap; gap: .45rem; } .pill { display: inline-block; padding: .38rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); text-decoration: none; font-size: .875rem; transition: color .15s ease, border-color .15s ease, background .15s ease; } .pill:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); } /* ---- cards ---- */ .cards { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .card { display: block; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 26px -16px rgba(0,0,0,.4); } .card h3 { color: var(--accent); } .card p { margin: 0; color: var(--muted); font-size: .88rem; } /* ---- toolbar ---- */ .toolbar { position: sticky; top: 3.6rem; z-index: 20; display: flex; gap: .5rem; flex-wrap: wrap; padding: .8rem 0; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); } .toolbar input[type="search"] { flex: 1 1 19rem; min-width: 0; padding: .58rem .85rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: inherit; font-size: .94rem; transition: border-color .15s ease, box-shadow .15s ease; } .toolbar input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .toolbar select, .toolbar button { padding: .58rem .8rem; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-soft); font: inherit; font-size: .88rem; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .toolbar select:hover, .toolbar button:hover { color: var(--accent); border-color: var(--accent); } .status { color: var(--muted); font-size: .89rem; min-height: 1.5em; margin: .7rem 0 0; } /* ---- collapsible sections ---- */ .sec { border-bottom: 1px solid var(--line-soft); } .sec > summary { display: flex; align-items: baseline; gap: .65rem; padding: .95rem .15rem; cursor: pointer; list-style: none; font-family: var(--display); font-size: 1.24rem; font-weight: 500; letter-spacing: -.01em; transition: color .15s ease; } .sec.sub > summary { font-size: 1.04rem; padding-left: 1.2rem; } .sec > summary::-webkit-details-marker { display: none; } .sec > summary::before { content: ""; flex: none; width: 0; height: 0; margin-top: .1rem; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .18s ease; } .sec[open] > summary::before { transform: rotate(90deg); } .sec > summary:hover { color: var(--accent); } .sec > summary:hover::before { border-left-color: var(--accent); } .sec .t { flex: 1; } .count { font-family: var(--sans); font-size: .76rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--bg-tint); border-radius: 999px; padding: .12rem .55rem; white-space: nowrap; } .group { margin: 3rem 0 .1rem; padding: 0; border: 0; font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); } .entries { margin: .1rem 0 1.3rem; padding-left: 2.6rem; } .entries li { margin: .5rem 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.6; } .entries li::marker { color: var(--muted); font-variant-numeric: tabular-nums; } .entries li.hide { display: none; } .entries strong { color: var(--ink); font-weight: 650; } .entries li mark { background: var(--accent-wash); color: var(--accent-ink); border-radius: 3px; padding: 0 .12em; font-weight: 600; } /* ---- software ---- */ .proj { padding: 1.6rem 0; border-bottom: 1px solid var(--line-soft); } .proj h2 { margin: 0 0 .15rem; padding: 0; border: 0; } .proj h2 a { text-decoration: none; } .proj h2 a:hover { text-decoration: underline; } .tagline { margin: 0 0 .7rem; font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } .proj > p:not(.tagline) { margin: 0 0 1rem; } footer { border-top: 1px solid var(--line-soft); padding: 1.6rem 1.5rem 2.6rem; color: var(--muted); font-size: .84rem; text-align: center; } @media (max-width: 620px) { main { padding-top: 2rem; } .hero { gap: 1.4rem; } .portrait { width: 104px; height: 104px; border-radius: 12px; } .entries { padding-left: 1.7rem; } .toolbar { top: 0; } .brand { font-size: 1.1rem; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------ CV page ------------------------------------------------------------------ */ .cv-actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 2rem; } .cv-actions button { padding: .55rem 1.1rem; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent-wash); color: var(--accent-ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .15s ease; } .cv-actions button:hover { background: var(--surface); } .cv-note { color: var(--muted); font-size: .85rem; } .cv-head { margin-bottom: 2.2rem; } .cv-head h1 { margin-bottom: .3rem; } .cv-role { margin: 0 0 .3rem; font-size: 1.02rem; color: var(--ink-soft); } .cv-contact { margin: 0; color: var(--muted); font-size: .9rem; } .cv-block { margin-bottom: 2.2rem; } .cv-block > h2 { font-size: .82rem; font-family: var(--sans); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 .8rem; padding-bottom: .4rem; border-bottom: 1.5px solid var(--accent); } .cv-sub { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 1.2rem 0 .4rem; } .cv-list { margin: 0 0 .5rem; padding-left: 2.3rem; } .cv-list li { margin: .34rem 0; color: var(--ink-soft); font-size: .93rem; line-height: 1.52; } .cv-list li::marker { color: var(--muted); font-variant-numeric: tabular-nums; } .cv-list strong { color: var(--ink); font-weight: 650; } /* ---- print: the CV becomes a clean black-on-white document ---- */ @media print { .topbar, footer, .cv-actions { display: none !important; } html, body { background: #fff !important; color: #000 !important; font-size: 9.6pt; line-height: 1.4; } main { max-width: none; margin: 0; padding: 0; } a { color: #000 !important; text-decoration: none; } .cv-head { margin-bottom: 14pt; } .cv-head h1 { font-size: 21pt; margin-bottom: 2pt; } .cv-role, .cv-contact { color: #000 !important; font-size: 9.2pt; } .cv-block { margin-bottom: 12pt; } .cv-block > h2 { font-size: 9pt; color: #000 !important; border-bottom: 0.8pt solid #000; margin-bottom: 6pt; padding-bottom: 2pt; break-after: avoid; page-break-after: avoid; } .cv-sub { font-size: 8.4pt; color: #333 !important; margin: 8pt 0 3pt; break-after: avoid; page-break-after: avoid; } .cv-list { padding-left: 16pt; } .cv-list li { font-size: 8.8pt; margin: 2pt 0; color: #000 !important; break-inside: avoid; page-break-inside: avoid; orphans: 2; widows: 2; } .cv-list strong { color: #000 !important; } @page { margin: 16mm 15mm; } }