/* ---- themes ---- * Four, chosen from the control top-right and remembered. data-theme is written * onto by an inline script in before first paint, so switching * never flashes the previous theme. * * The prefers-color-scheme block below is the no-JS and first-visit path only: * it is scoped to :root:not([data-theme]) so that an explicit choice always * wins over the system's. --sel-* and --occ are theme-level because a fixed * yellow highlighter is wrong on three of these four. */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --fg: #111111; --muted: #8a8a8a; --line: #ededed; --tile: #f3f3f3; /* --edge is the gradient border used by the panel and the skill pills. */ --edge: linear-gradient(140deg, #dcdcdc, #f2f2f2 45%, #d4d4d4); --sel-bg: #ffe600; --sel-fg: #111111; --occ: rgba(255, 200, 0, 0.32); /* Titles. The same as the body everywhere the palette has only two useful weights of ink; midnight canvas has three and uses them. */ --strong: var(--fg); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: #0b0b0b; --fg: #ededed; --muted: #7c7c7c; --line: #1f1f1f; --tile: #171717; --edge: linear-gradient(140deg, #303030, #141414 45%, #2a2a2a); --sel-bg: #ffe600; --sel-fg: #111111; --occ: rgba(255, 200, 0, 0.32); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0b0b0b; --fg: #ededed; --muted: #7c7c7c; --line: #1f1f1f; --tile: #171717; --edge: linear-gradient(140deg, #303030, #141414 45%, #2a2a2a); --sel-bg: #ffe600; --sel-fg: #111111; --occ: rgba(255, 200, 0, 0.32); } /* Warm stock, ink, and a highlighter that looks like it dried. */ :root[data-theme="paper"] { color-scheme: light; --bg: #f4efe6; --fg: #2b2620; --muted: #8c8175; --line: #e2d9ca; --tile: #eae3d6; --edge: linear-gradient(140deg, #ded3c0, #f0ebe1 45%, #d6cab4); --sel-bg: #e0cd9c; --sel-fg: #2b2620; --occ: rgba(196, 168, 106, 0.34); } /* Sous's own palette, down to the token names it uses on sous.software: midnight canvas, moon mist, fog veil, glass edge. No chromatic accent, so the selection is a wash of the same ice rather than a colour of its own. */ :root[data-theme="midnight-canvas"] { color-scheme: dark; --bg: #05060f; --fg: #c7d3ea; --muted: #9da7ba; --line: rgba(186, 215, 247, 0.12); --tile: rgba(186, 214, 247, 0.06); --edge: linear-gradient( 140deg, rgba(186, 215, 247, 0.2), rgba(5, 6, 15, 0.5) 45%, rgba(186, 215, 247, 0.12) ); --sel-bg: rgba(186, 215, 247, 0.22); --sel-fg: #d8ecf8; --occ: rgba(186, 215, 247, 0.16); /* Sous's three levels of ink: ice for titles, moon mist for prose, fog veil for everything secondary. On this palette a title set in the body colour is indistinguishable from the paragraph under it. */ --strong: #d8ecf8; } /* Theme changes are a deliberate act, so they fade rather than cut. Scoped to the properties that actually change; a blanket transition would catch the quote rotation and the link hovers too. */ body, .item, .controls select, .links a { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { width: 0; height: 0; display: none; } body { background: var(--bg); color: var(--fg); font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; line-height: 1.6; font-size: 16px; font-weight: 400; } /* ---- highlight / selection ---- */ ::selection { background: var(--sel-bg); color: var(--sel-fg); } ::-moz-selection { background: var(--sel-bg); color: var(--sel-fg); } .wrap { max-width: 600px; margin: 0 auto; padding: 120px 28px 80px; } .id { display: flex; align-items: center; gap: 16px; } .avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--line); } h1 { color: var(--strong); font-size: 1.65rem; font-weight: 600; letter-spacing: -0.02em; } .role { color: var(--muted); margin-top: 2px; font-size: 1rem; } .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); vertical-align: -2px; margin-right: 7px; } blockquote { margin: 0; font-size: 1.1rem; line-height: 1.5; font-weight: 400; max-width: 50ch; } blockquote cite { display: block; margin-top: 12px; font-size: 0.85rem; font-style: normal; color: var(--muted); } /* ---- "On my mind" auto-rotation ---- */ #quote { transition: opacity 0.4s ease, transform 0.4s ease; } @keyframes quoteIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } #quote.animate { animation: quoteIn 0.5s ease both; } .intro { margin-top: 28px; max-width: 54ch; } .intro p + p { margin-top: 12px; } a { color: inherit; } section { margin-top: 54px; } h2 { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; } .item { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); } .item:last-child { border-bottom: 1px solid var(--line); } .logo { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: var(--tile); border: 1px solid var(--line); } .body { flex: 1; min-width: 0; } .item .pos { color: var(--strong); font-weight: 500; } /* Abbreviate the ML Engineer title on narrow screens so it never wraps. */ .mle-abbr { display: none; } @media (max-width: 480px) { .mle-full { display: none; } .mle-abbr { display: inline; } } .item .co { color: var(--muted); } .item .note { color: var(--muted); font-size: 0.92rem; margin-top: 3px; } .item .when { cursor: none; user-select: none; -webkit-user-select: none; color: var(--muted); font-size: 0.83rem; white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 1px; } .badge { color: var(--strong); display: inline-block; margin-top: 6px; font-size: 0.85rem; font-weight: 500; } .links { display: flex; flex-wrap: wrap; gap: 8px 22px; } .links a { text-decoration: none; font-size: 0.95rem; border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: border-color 0.15s ease; } .links a:hover { border-color: var(--fg); } footer { margin-top: 64px; color: var(--muted); font-size: 0.8rem; } /* ---- controls (mode + language) ---- */ .controls { position: fixed; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 10; } .select { position: relative; display: inline-flex; } .controls select { font-family: inherit; font-size: 0.8rem; color: var(--muted); background: var(--tile); border: 1px solid var(--line); border-radius: 8px; padding: 6px 30px 6px 10px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color 0.15s ease, color 0.15s ease; } .controls select:hover { color: var(--fg); border-color: var(--fg); } .controls select:hover + .chevrons { color: var(--fg); } .controls select:focus-visible { color: var(--fg); border-color: var(--fg); outline: 2px solid var(--fg); outline-offset: 2px; } .chevrons { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); pointer-events: none; } .intro a { white-space: nowrap; } .link-icon { width: 0.82em; height: 0.82em; vertical-align: -0.06em; margin-left: 3px; stroke-width: 2.25; } /* ---- certification links ---- */ .cert-link { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color 0.15s ease; } .cert-link:hover, .cert-link:focus-visible { text-decoration-color: var(--fg); } /* ---- respect reduced motion ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, #quote, #quote.animate { animation: none !important; transition: none !important; } } /* ---- 404 ---- */ .notfound { display: flex; flex-direction: column; align-items: flex-start; min-height: 100vh; justify-content: center; padding-top: 60px; } .nf-code { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; color: var(--muted); font-variant-numeric: tabular-nums; } .nf-title { margin-top: 10px; font-size: 1.65rem; font-weight: 600; letter-spacing: -0.02em; } .nf-body { margin-top: 12px; max-width: 46ch; color: var(--muted); line-height: 1.6; } .nf-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; } .nf-links a { text-decoration: none; font-size: 0.95rem; border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: border-color 0.15s ease; } .nf-links a:hover { border-color: var(--fg); } .notfound footer { margin-top: 48px; } /* Every other occurrence of the selected word, lit up in place. */ ::highlight(occurrence) { background-color: var(--occ); color: var(--fg); } /* ---- recent reads ---- */ /* Title, one line of what the thing is, and the reason behind a disclosure. The reason is the interesting part and it is also four sentences long, so it does not get to sit in the page uninvited. */ .paper-title { color: var(--strong); font-weight: 500; max-width: 54ch; } .paper-meta { color: var(--muted); font-size: 0.83rem; margin-top: 4px; font-variant-numeric: tabular-nums; } .paper-more { margin-top: 12px; } .paper-more summary { display: inline-flex; align-items: center; gap: 5px; width: max-content; color: var(--muted); font-size: 0.88rem; cursor: pointer; list-style: none; transition: color 0.15s ease; } /* Both spellings: Safari still wants the -webkit- pseudo-element. */ .paper-more summary::-webkit-details-marker { display: none; } .paper-more summary::marker { content: ""; } .paper-more summary:hover, .paper-more[open] summary { color: var(--fg); } .paper-bulb { width: 15px; height: 15px; flex-shrink: 0; } .paper-chev { width: 14px; height: 14px; transition: transform 0.2s ease; } .paper-more[open] .paper-chev { transform: rotate(180deg); } .paper-more summary:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; } .paper-why { margin-top: 10px; max-width: 58ch; font-size: 0.95rem; } /* The numbers are the reason the paper is here, so they get to be the one tabular, monospaced-feeling thing on the page. */ .paper-nums { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-variant-numeric: tabular-nums; font-size: 0.86rem; color: var(--muted); } .paper-nums b { color: var(--strong); font-weight: 500; } /* Entries in the stack, separated by the same hairline the dated rows use. */ .paper + .paper { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); } /* ---- drifting pixels, midnight canvas only ---- */ /* The same texture the product's own site carries, and the reason this theme exists. Hidden outside it: on paper or light stock a field of glowing dots is decoration borrowed from a different design. */ #px { position: fixed; inset: 0; z-index: -1; display: none; pointer-events: none; } :root[data-theme="midnight-canvas"] #px { display: block; } @media (prefers-reduced-motion: reduce) { #px { display: none !important; } }