/* ───────────────────────────────────────────────────────────────── monk97.me Single source of truth for design tokens. No hex values below the token block — everything reads from a var. Theme is three-state: auto (follows the OS), light, dark. `data-theme` on is written by assets/theme.js before paint. ───────────────────────────────────────────────────────────────── */ :root { /* light — the default, and what `auto` shows in daylight */ --bg: #faf8f4; --bg-panel: #f4f1ea; --ink: #2b2823; --ink-soft: #6f6a60; --ink-faint: #a09a8e; --line: #ddd8ce; --accent: #8a7358; --accent-dim: rgba(138, 115, 88, 0.15); --shadow: rgba(43, 40, 35, 0.08); --ok: #5d7f4e; --ok-dim: rgba(93, 127, 78, 0.18); --font-voice: 'Fraunces', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --gutter: clamp(22px, 6vw, 90px); --wide: 1400px; --rail-h: 46px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* dark tokens, defined once and pointed at from both triggers below */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #16150f; --bg-panel: #1d1b14; --ink: #ece7dc; --ink-soft: #9a9284; --ink-faint: #5f5a50; --line: #322f26; --accent: #c8a67c; --accent-dim: rgba(200, 166, 124, 0.18); --shadow: rgba(0, 0, 0, 0.4); --ok: #7d9a6b; --ok-dim: rgba(125, 154, 107, 0.2); } } :root[data-theme="dark"] { --ok: #7d9a6b; --ok-dim: rgba(125, 154, 107, 0.2); --bg: #16150f; --bg-panel: #1d1b14; --ink: #ece7dc; --ink-soft: #9a9284; --ink-faint: #5f5a50; --line: #322f26; --accent: #c8a67c; --accent-dim: rgba(200, 166, 124, 0.18); --shadow: rgba(0, 0, 0, 0.4); } /* ── reset ──────────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { background: var(--bg); color: var(--ink); font-family: var(--font-voice); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color 400ms var(--ease), color 400ms var(--ease); } a { color: inherit; } ::selection { background: var(--accent-dim); } /* Continuity between pages: these keep their identity across a cross-document view transition instead of popping in fresh. */ @view-transition { navigation: auto; } .rail { view-transition-name: rail; } .progress { view-transition-name: progress; } .wordmark { view-transition-name: wordmark; } /* ── the sticky terminal rail ───────────────────────────────────── */ .rail { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--rail-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 300ms var(--ease), background-color 400ms var(--ease); } .rail.is-scrolled { border-bottom-color: var(--line); } .rail__path { color: var(--ink); white-space: nowrap; } .rail__path .sigil { color: var(--accent); margin-right: 8px; } .rail__seg { display: inline-block; transition: opacity 200ms var(--ease); } /* the theme control, styled as an env var rather than an icon */ .theme { font: inherit; letter-spacing: inherit; color: var(--ink-soft); background: none; border: 1px solid var(--line); border-radius: 3px; padding: 4px 9px; cursor: pointer; white-space: nowrap; transition: color 180ms var(--ease), border-color 180ms var(--ease); } .theme:hover, .theme:focus-visible { color: var(--accent); border-color: var(--accent); } .theme:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-dim); } .theme__val { color: var(--ink); } .theme:hover .theme__val { color: var(--accent); } /* ── scroll progress, as a hairline down the left edge ──────────── */ .progress { position: fixed; top: 0; left: 0; width: 2px; height: 100vh; z-index: 50; background: var(--line); } .progress__fill { width: 100%; height: 0%; background: var(--accent); transform-origin: top; pointer-events: none; } /* One tick per section — the navigation. Visible, clickable, and it doubles as a map of how much page is left. Nothing to learn. */ .progress__tick { position: absolute; left: 0; width: 2px; height: 22px; padding: 0; border: none; border-radius: 0; background: var(--ink-faint); opacity: 0.45; cursor: pointer; transform: translateY(-50%); transition: opacity 200ms var(--ease), background-color 200ms var(--ease), width 200ms var(--ease); } .progress__tick::after { /* a wider invisible hit area */ content: ''; position: absolute; inset: -8px -14px -8px -6px; } .progress__tick:hover, .progress__tick:focus-visible { opacity: 1; width: 4px; background: var(--accent); outline: none; } .progress__tick.is-here { opacity: 1; background: var(--accent); } .progress__tip { position: absolute; left: 16px; top: 50%; transform: translate(-6px, -50%); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); background: var(--bg); padding: 3px 8px; border: 1px solid var(--line); border-radius: 3px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease); } .progress__tick:hover .progress__tip, .progress__tick:focus-visible .progress__tip { opacity: 1; transform: translate(0, -50%); } @media (max-width: 640px) { .progress__tick { height: 16px; } .progress__tip { display: none; } } /* ── panels ─────────────────────────────────────────────────────── */ .panel { padding: clamp(80px, 12vh, 150px) var(--gutter); border-top: 1px solid var(--line); } .panel--alt { background: var(--bg-panel); } .panel--flush { border-top: none; } .panel__inner { max-width: var(--wide); margin: 0 auto; width: 100%; } .panel__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-faint); margin-bottom: 36px; display: flex; align-items: center; gap: 14px; } .panel__label::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* ── hero ───────────────────────────────────────────────────────── */ .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--rail-h) + 40px) var(--gutter) 40px; border-top: none; } .hero__inner { max-width: var(--wide); margin: 0 auto; width: 100%; } .wordmark { font-size: clamp(3.2rem, 13vw, 10rem); font-weight: 400; line-height: 0.94; letter-spacing: -0.03em; } .hero__title { font-family: var(--font-mono); font-size: clamp(13px, 1.5vw, 16px); color: var(--ink-soft); margin-top: clamp(24px, 4vh, 42px); max-width: 54ch; } .term { font-family: var(--font-mono); font-size: clamp(13px, 1.4vw, 15px); color: var(--ink); margin-top: 16px; min-height: 1.7em; } .term__prompt { color: var(--accent); margin-right: 12px; user-select: none; } .term__cursor { display: inline-block; width: 8px; height: 1em; margin-left: 4px; vertical-align: text-bottom; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); animation: blink 1.1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } .hero__hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); margin-top: clamp(48px, 9vh, 110px); display: flex; align-items: center; gap: 10px; } .hero__hint span { animation: drift 2.6s var(--ease) infinite; } @keyframes drift { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(4px); opacity: 1; } } /* ── the wide content grid ──────────────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: clamp(28px, 4vw, 64px); } .entry__key { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 12px; } .entry__head { font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; } .entry__body { font-family: var(--font-mono); font-size: 13px; line-height: 1.75; color: var(--ink-soft); margin-top: 14px; max-width: 46ch; } .entry__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-faint); margin-top: 14px; } /* ── links ─────────────────────────────────────────────────────── */ /* Footnotes, not calls to action. Small, mono, no borders, no arrows — the page should read as prose with references, not as a menu. */ .quiet { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: clamp(32px, 5vh, 52px); font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); } .quiet a { color: var(--ink-soft); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid var(--line); transition: color 160ms var(--ease), border-color 160ms var(--ease); } .quiet a:hover, .quiet a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); } .quiet a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-dim); border-radius: 2px; } /* The résumé's contact rows use the same restraint, one per line. */ .links { display: flex; flex-direction: column; gap: 14px; } .link { display: flex; align-items: baseline; gap: 14px; text-decoration: none; font-family: var(--font-mono); font-size: 13px; width: fit-content; transition: color 160ms var(--ease); } .link__idx { color: var(--ink-faint); font-size: 11px; } .link__name { color: var(--ink-soft); padding-bottom: 2px; border-bottom: 1px solid var(--line); transition: color 160ms var(--ease), border-color 160ms var(--ease); } .link__note { color: var(--ink-faint); font-size: 11.5px; } .link:hover .link__name, .link:focus-visible .link__name { color: var(--accent); border-bottom-color: var(--accent); } .link:focus-visible { outline: none; } /* ── footer ─────────────────────────────────────────────────────── */ .foot { padding: 40px var(--gutter); border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); } .foot__inner { max-width: var(--wide); margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .foot a { text-decoration: none; transition: color 180ms var(--ease); } .foot a:hover, .foot a:focus-visible { color: var(--accent); } /* ── scroll reveals ─────────────────────────────────────────────── */ /* Opt-in via .reveal. Fires once, on entry, never on a timer. */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .reveal:nth-child(2) { transition-delay: 70ms; } .reveal:nth-child(3) { transition-delay: 140ms; } .reveal:nth-child(4) { transition-delay: 210ms; } /* No JS? Nothing is ever revealed, so never hide it in the first place. */ html:not(.js) .reveal { opacity: 1; transform: none; } /* ── the hidden prompt ──────────────────────────────────────────── */ .console { position: fixed; inset: auto 0 0 0; z-index: 60; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -12px 40px var(--shadow); font-family: var(--font-mono); font-size: 13px; transform: translateY(101%); transition: transform 320ms var(--ease); } .console.is-open { transform: none; } .console__inner { max-width: var(--wide); margin: 0 auto; padding: 18px var(--gutter) 22px; } .console__out { color: var(--ink-soft); line-height: 1.65; max-height: 42vh; overflow-y: auto; white-space: pre-wrap; margin-bottom: 12px; } .console__out:empty { display: none; } .console__out a { color: var(--accent); } .console__line { display: flex; align-items: center; gap: 12px; } .console__sigil { color: var(--accent); user-select: none; } .console__in { flex: 1; font: inherit; color: var(--ink); background: none; border: none; outline: none; caret-color: var(--accent); } .console__esc { color: var(--ink-faint); font-size: 11px; } /* ── narrow screens ─────────────────────────────────────────────── */ @media (max-width: 640px) { .rail { font-size: 11px; } .link { flex-wrap: wrap; gap: 8px 14px; } .link__note { text-align: left; width: 100%; } .foot__inner { flex-direction: column; gap: 8px; } } /* ── motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .term__cursor, .hero__hint span { animation: none; } @view-transition { navigation: none; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ───────────────────────────────────────────────────────────────── /resume — same bones, laid out as a record rather than a pitch ───────────────────────────────────────────────────────────────── */ /* ── /resume — a status page for a career ──────────────────────── The artifact of the profession, turned on itself: services with uptime, health dots, tenure bars scaled to real durations. Techy on purpose; the copy stays straight so the design carries the voice. One centred column at --doc, because the page scrolls. */ :root { --doc: 720px; } body.is-doc { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; padding: calc(var(--rail-h) + clamp(40px, 7vh, 76px)) var(--gutter) clamp(60px, 10vh, 110px); } .doc { max-width: var(--doc); margin: 0 auto; } /* ── header ─────────────────────────────────────────────────────── */ .doc__name { font-family: var(--font-mono); font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; } .doc__role { font-size: 13px; color: var(--accent); margin-top: 12px; } /* the status banner */ .status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding: 13px 16px; border: 1px solid var(--line); border-left: 2px solid var(--ok); border-radius: 3px; background: var(--bg-panel); font-size: 11.5px; letter-spacing: 0.1em; } .status__l { display: flex; align-items: center; gap: 10px; color: var(--ink); } .status__r { color: var(--ink-faint); } .beat { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-dim); animation: beat 2.4s ease-in-out infinite; } @keyframes beat { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } /* ── the numbers ────────────────────────────────────────────────── */ .vitals { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 3px; margin-top: 12px; overflow: hidden; } .vital { padding: 16px 12px; text-align: center; } .vital + .vital { border-left: 1px solid var(--line); } .vital__n { font-size: clamp(1.3rem, 3.6vw, 1.7rem); font-weight: 500; color: var(--accent); letter-spacing: -0.02em; line-height: 1; } .vital__k { font-size: 10px; letter-spacing: 0.14em; color: var(--ink-faint); margin-top: 8px; } .doc__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; font-size: 12.5px; color: var(--ink-faint); } .doc__contact a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color 160ms var(--ease), border-color 160ms var(--ease); } .doc__contact a:hover, .doc__contact a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); } /* ── section headings ───────────────────────────────────────────── */ .doc__h { font-size: 11px; letter-spacing: 0.16em; color: var(--ink-faint); display: flex; align-items: center; gap: 14px; margin: clamp(42px, 6.5vh, 62px) 0 22px; } .doc__h::after { content: ''; flex: 1; height: 1px; background: var(--line); } /* ── services (roles) ───────────────────────────────────────────── */ .svc { padding: 18px 0; border-top: 1px solid var(--line); } .svc:last-of-type { border-bottom: 1px solid var(--line); } .svc__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .svc__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; align-self: center; } .svc--past .svc__dot { background: var(--ink-faint); } .svc__org { font-size: 12px; letter-spacing: 0.08em; color: var(--ink); } .svc__when { font-size: 11px; color: var(--ink-faint); margin-left: auto; letter-spacing: 0.06em; } .svc__title { font-size: 15px; font-weight: 500; color: var(--ink); margin-top: 8px; letter-spacing: -0.01em; } /* tenure bar — width is proportional to real months served */ .svc__bar { height: 3px; border-radius: 2px; background: var(--line); margin-top: 12px; overflow: hidden; } .svc__fill { height: 100%; background: var(--accent); border-radius: 2px; } .svc--past .svc__fill { background: var(--ink-faint); } .svc__dur { font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-faint); margin-top: 7px; } .svc__body { list-style: none; color: var(--ink-soft); margin-top: 13px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.7; } .svc__body li { padding-left: 16px; position: relative; } .svc__body li::before { content: '·'; position: absolute; left: 3px; color: var(--accent); } .svc__body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); } /* ── capability grid ────────────────────────────────────────────── */ .caps { display: grid; grid-template-columns: 132px 1fr; gap: 0 20px; } .caps__k { font-size: 10.5px; letter-spacing: 0.12em; color: var(--accent); padding: 10px 0; border-top: 1px solid var(--line); } .caps__v { font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); padding: 10px 0; border-top: 1px solid var(--line); } .caps__k:first-of-type, .caps__k:first-of-type + .caps__v { border-top: none; } /* ── education ──────────────────────────────────────────────────── */ .edu { display: grid; grid-template-columns: 132px 1fr; gap: 8px 20px; padding: 12px 0; } .edu + .edu { border-top: 1px solid var(--line); } .edu__when { font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-faint); padding-top: 3px; } .edu__what { font-size: 13px; color: var(--ink); } .edu__where { font-size: 12px; color: var(--ink-soft); margin-top: 3px; } /* ── foot ───────────────────────────────────────────────────────── */ .doc__foot { margin-top: clamp(46px, 7vh, 74px); padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--ink-faint); } .doc__foot a { color: inherit; text-decoration: none; } .doc__foot a:hover { color: var(--accent); } @media (max-width: 560px) { .vitals { grid-template-columns: repeat(2, 1fr); } .vital:nth-child(3) { border-left: none; } .vital:nth-child(n+3) { border-top: 1px solid var(--line); } .caps, .edu { grid-template-columns: 1fr; gap: 0; } .caps__v { padding-top: 0; border-top: none; } .svc__when { margin-left: 0; width: 100%; } .doc__foot { flex-direction: column; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .beat { animation: none; } } /* ───────────────────────────────────────────────────────────────── Card layout — the home page and 404. Deliberately the same shape as lab.monk97.me: one centred column at --measure, mono throughout, bracketed by two thin rules. Scoped to body.card so /resume, which is long and scrolls, keeps its own document layout. ───────────────────────────────────────────────────────────────── */ :root { --measure: 560px; } body.card { /* svh, not %: site.css never gives html a height, so a percentage here would resolve against auto and the card would stick to the top. */ min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 6vw; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; } body.card .wrap { max-width: var(--measure); width: 100%; } /* ── rules ──────────────────────────────────────────────────────── */ .rule { font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rule--top { padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 36px; } .rule--bottom { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 11px; } /* the theme control sits in the top rule rather than a floating rail */ .rule .theme { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); background: none; border: 1px solid var(--line); border-radius: 3px; padding: 4px 9px; cursor: pointer; transition: color 180ms var(--ease), border-color 180ms var(--ease); } .rule .theme:hover, .rule .theme:focus-visible { color: var(--accent); border-color: var(--accent); } .rule .theme:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-dim); } .rule .theme__val { color: var(--ink); } .rule .theme:hover .theme__val { color: var(--accent); } /* ── the typed line, as a shell command ─────────────────────────── */ body.card .cmd { font-size: 13px; color: var(--ink-soft); margin-bottom: 20px; } body.card .cmd__prompt { color: var(--accent); margin-right: 10px; user-select: none; } body.card .cmd__cursor { display: inline-block; width: 7px; height: 1em; margin-left: 4px; vertical-align: text-bottom; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); animation: blink 1.1s step-end infinite; } /* ── name and copy ──────────────────────────────────────────────── */ body.card h1 { font-family: var(--font-mono); font-size: clamp(1.3rem, 3.4vw, 1.7rem); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; max-width: 24ch; } body.card .body { margin-top: 26px; color: var(--ink-soft); max-width: 52ch; display: flex; flex-direction: column; gap: 16px; } body.card .body strong { color: var(--ink); font-weight: 500; } /* ── the quiet links ────────────────────────────────────────────── */ body.card .quiet { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-faint); } body.card .quiet a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color 160ms var(--ease), border-color 160ms var(--ease); } body.card .quiet a:hover, body.card .quiet a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); } body.card .quiet a:focus-visible { outline: none; } body.card .ink-soft { color: var(--ink-soft); font-weight: 400; } @media (max-width: 480px) { body.card .rule { flex-direction: row; } body.card h1 { max-width: none; } } .foot__keys { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 3px; padding: 1px 5px; }