/* ========================================================================== John Harmon — personal résumé site Flat, hairline-ruled layout. Border radius is 0 everywhere except the toolkit logo chip and the theme-toggle pill. No shadows anywhere. ========================================================================== */ /* IBM Plex Mono, self-hosted (OFL). Served from our own origin rather than Google Fonts: the hosted version cost two blocking round trips — the stylesheet on fonts.googleapis.com, then the file on fonts.gstatic.com — which measured ~1.6s of render-blocking on throttled mobile. Latin subset only; swap so text paints immediately in the fallback. */ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------------------- Theme tokens Light is the base. Dark overrides only what changes. The inline script in stamps data-theme on before paint; the media query below is the no-JS fallback. -------------------------------------------------------------------------- */ :root { /* The single configurable accent. Alternates considered: #2B4A7D, #1F4B3F, #1A1A1A */ --accentFill: #b4491f; --accent: var(--accentFill); --bg: #f6f7f9; --bgTrans: rgba(246, 247, 249, 0.86); --ink: #16181d; --muted: #656b78; --faint: #696f7b; --rule: #e1e4ea; --stripeA: #e6e9ef; --stripeB: #eff1f5; --trackBg: #e9ecf1; --knobX: 2px; --logoFilter: none; --logoBlend: multiply; --logoPlate: transparent; --toolBlend: multiply; --toolPlate: transparent; --sans: "Helvetica Neue", Helvetica, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --container: 1160px; --pad: 40px; --gutter: 48px; color-scheme: light; } /* Dark tokens, shared by the explicit toggle and the no-JS OS fallback. */ [data-theme="dark"] { --accent: color-mix(in oklch, var(--accentFill) 48%, white); --bg: #111317; --bgTrans: rgba(17, 19, 23, 0.86); --ink: #f0f1f4; --muted: #9ba2af; --faint: #969dab; --rule: #282c34; --stripeA: #1b1e24; --stripeB: #22262d; --trackBg: #22262d; --knobX: 20px; --logoFilter: invert(1); --logoBlend: screen; --logoPlate: #f6f7f9; --toolBlend: normal; --toolPlate: #ffffff; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --accent: color-mix(in oklch, var(--accentFill) 48%, white); --bg: #111317; --bgTrans: rgba(17, 19, 23, 0.86); --ink: #f0f1f4; --muted: #9ba2af; --faint: #969dab; --rule: #282c34; --stripeA: #1b1e24; --stripeB: #22262d; --trackBg: #22262d; --knobX: 20px; --logoFilter: invert(1); --logoBlend: screen; --logoPlate: #f6f7f9; --toolBlend: normal; --toolPlate: #ffffff; color-scheme: dark; } } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); background: var(--bg); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--ink); } ul { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; } ::selection { background: var(--accentFill); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Layout primitives -------------------------------------------------------------------------- */ .wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); } .section { padding-top: 88px; padding-bottom: 88px; } .section--ruled { border-top: 1px solid var(--rule); } /* Mono kicker in a fixed left column, content on the right. */ .grid-std { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--gutter); align-items: start; } .kicker { margin: 6px 0 0; font-family: var(--mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .eyebrow { margin: 0 0 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .lead { margin: 0; font-size: 22px; line-height: 1.5; letter-spacing: -0.015em; max-width: 46ch; text-wrap: pretty; } .caption { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; color: var(--faint); } h2 { font-size: 36px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; } /* Buttons: filled = primary, outline = secondary. Square corners. */ .btn { display: inline-flex; align-items: center; padding: 13px 22px; font-size: 14px; letter-spacing: 0.01em; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .btn--fill { background: var(--accentFill); color: #fff; } /* The hover ground is --ink, which inverts between themes — near-black in light, near-white in dark. The label has to invert with it, so it uses --bg rather than a hardcoded white that vanished on the dark theme's light ink. */ .btn--fill:hover { background: var(--ink); color: var(--bg); } .btn--outline { border: 1px solid var(--rule); color: var(--ink); } .btn--outline:hover { border-color: var(--ink); color: var(--ink); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } /* Framed image that scales slightly on hover. */ .frame { border: 1px solid var(--rule); overflow: hidden; } /* The responsive wrappers must not become the img's layout parent, or height:100% below would resolve against an inline box with no height instead of against .frame. */ .frame picture, .about__photos picture { display: contents; } .frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .zoom img { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .zoom:hover img { transform: scale(1.05); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--bgTrans); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); } .progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0%; background: var(--accentFill); } .header-inner { height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .header-left { display: flex; align-items: center; gap: 16px; } .wordmark { font-size: 14px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); transition: color 0.18s ease; } .wordmark:hover { color: var(--muted); } /* Theme toggle: pill track with a knob that slides right in dark. */ .theme-toggle { display: block; width: 40px; height: 22px; padding: 0; border: 1px solid var(--rule); border-radius: 999px; background: var(--trackBg); position: relative; cursor: pointer; flex: 0 0 auto; transition: border-color 0.18s ease; } .theme-toggle:hover { border-color: var(--muted); } .theme-toggle__knob { position: absolute; top: 2px; left: var(--knobX); width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: left 0.18s ease; } .theme-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .site-nav { display: flex; align-items: center; gap: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .site-nav a { color: var(--accent); transition: color 0.18s ease; } /* Grey, not white — white is invisible on the light background. The Résumé button is the one exception; it keeps white text on its accent fill. */ .site-nav a:hover { color: var(--muted); } .nav-resume { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--accent); color: var(--accent); transition: background 0.18s ease, color 0.18s ease; } /* Scoped through .site-nav so it out-specifies .site-nav a:hover above. */ .site-nav .nav-resume:hover { background: var(--accentFill); color: #fff; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { padding-top: 104px; padding-bottom: 88px; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; align-items: start; } .hero__place { margin: 0 0 34px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .hero h1 { margin: 0; font-size: 66px; line-height: 1.02; letter-spacing: -0.035em; font-weight: 500; max-width: 15ch; } .hero__deck { margin: 30px 0 0; font-size: 20px; line-height: 1.55; max-width: 52ch; color: var(--muted); text-wrap: pretty; } .hero .btn-row { margin-top: 40px; } .hero__portrait { aspect-ratio: 4 / 5; } .hero__portrait img { object-position: 50% 34%; transform: scale(1.04); will-change: transform; } /* -------------------------------------------------------------------------- Stats band -------------------------------------------------------------------------- */ .stats-band { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .stat { padding: 34px 30px; border-right: 1px solid var(--rule); } .stat:first-child { padding-left: 0; } .stat:last-child { padding-right: 0; border-right: 0; } .stat__num { font-size: 34px; letter-spacing: -0.02em; font-weight: 500; } .stat__label { margin-top: 8px; font-family: var(--mono); font-size: 10px; line-height: 1.6; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } /* -------------------------------------------------------------------------- Selected work -------------------------------------------------------------------------- */ .work { padding-top: 104px; padding-bottom: 0; } .cases { display: grid; gap: 2px; margin-top: 56px; } .case { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 44px; padding: 40px 0; border-top: 1px solid var(--rule); } .case:last-child { border-bottom: 1px solid var(--rule); } .case__media { aspect-ratio: 4 / 3; } .case h3 { margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 500; } .case__body { margin: 16px 0 0; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 60ch; text-wrap: pretty; } .case__result { margin: 18px 0 0; font-size: 15px; line-height: 1.6; } .case__result strong { font-weight: 500; } .case__result span { color: var(--muted); } /* -------------------------------------------------------------------------- Brands — the 1px grid gap over a --rule ground *is* the hairline grid -------------------------------------------------------------------------- */ .brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .brands__cell { background: var(--bg); min-height: 104px; display: flex; align-items: center; justify-content: center; padding: 18px; text-align: center; } .brands__cell img { width: auto; max-width: 86%; object-fit: contain; } /* Marks that need inverting in dark. */ .brands__cell img[data-logo] { filter: var(--logoFilter); } /* Flat marks on a white ground: invert *and* blend so the ground drops out. */ .brands__cell img[data-logo-flat] { filter: var(--logoFilter); mix-blend-mode: var(--logoBlend); } .brands__caption { margin: 14px 0 0; } /* -------------------------------------------------------------------------- What I do -------------------------------------------------------------------------- */ .skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 56px; } .skill { padding: 30px 0; border-top: 1px solid var(--rule); } .skill h3 { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; } .skill p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--muted); text-wrap: pretty; } /* -------------------------------------------------------------------------- Experience -------------------------------------------------------------------------- */ .role { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 44px; padding: 42px 0; border-top: 1px solid var(--rule); } .role__dates { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .role__meta { margin: 12px 0 0; font-family: var(--mono); font-size: 10px; line-height: 1.8; letter-spacing: 0.04em; color: var(--faint); white-space: pre-line; } .role h3 { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; } .role__company { margin: 6px 0 0; font-size: 16px; color: var(--muted); } .role__bullets { display: grid; gap: 12px; margin-top: 22px; } .role__bullets li { display: grid; grid-template-columns: 16px minmax(0, 1fr); font-size: 15px; line-height: 1.65; color: var(--muted); } .role__bullets li::before { content: "—"; color: var(--accent); } .role__bullets li span { text-wrap: pretty; } /* -------------------------------------------------------------------------- About -------------------------------------------------------------------------- */ .about__inner { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 56px; align-items: start; } .about__body { margin: 24px 0 0; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 62ch; text-wrap: pretty; } /* The lead sets up a wider gap; body paragraphs sit closer to each other. */ .about__body + .about__body { margin-top: 18px; } .about .btn-row { margin-top: 34px; } .about__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .about__photos .frame { aspect-ratio: 1 / 1; } .about__caption { margin: 12px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.65; letter-spacing: 0.04em; color: var(--faint); } /* -------------------------------------------------------------------------- Toolkit — horizontally scrollable rows of logo tiles -------------------------------------------------------------------------- */ .tool-group { padding: 34px 0 0; } .tool-group__label { margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .tool-row { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 12px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; } .tool-row:hover { scrollbar-color: var(--accentFill) transparent; } .tool-row::-webkit-scrollbar { height: 8px; } .tool-row::-webkit-scrollbar-track { background: transparent; border-top: 1px solid var(--rule); } .tool-row::-webkit-scrollbar-thumb { background: var(--rule); border-top: 1px solid var(--rule); transition: background 0.2s ease; } .tool-row:hover::-webkit-scrollbar-thumb { background: var(--accentFill); border-top-color: var(--accentFill); } /* Touch devices get no hover, so the thumb is always accent. */ @media (hover: none) { .tool-row { scrollbar-color: var(--accentFill) transparent; } .tool-row::-webkit-scrollbar-thumb { background: var(--accentFill); border-top-color: var(--accentFill); } } .tool { flex: 0 0 190px; scroll-snap-align: start; border: 1px solid var(--rule); padding: 20px 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 14px; transition: border-color 0.18s ease; } .tool:hover { border-color: var(--accent); } /* The blend knocks the white grounds out of the raster logos in light mode; the white chip is what makes them sit cleanly in dark. Keep them together. */ .tool__chip { width: 100%; padding: 6px; border-radius: 4px; background: var(--toolPlate); display: flex; align-items: center; justify-content: center; } .tool__chip img { width: 100%; height: 84px; object-fit: contain; display: block; mix-blend-mode: var(--toolBlend); } .tool p { margin: 0; font-size: 13px; line-height: 1.35; text-align: center; color: var(--ink); } /* -------------------------------------------------------------------------- Education -------------------------------------------------------------------------- */ .cred { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 44px; padding: 24px 0; border-top: 1px solid var(--rule); } .cred__year { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--faint); } .cred__title { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 500; } .cred__detail { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 64ch; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--rule); background: var(--bg); } .site-footer .wrap { padding-top: 72px; padding-bottom: 56px; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; } .footer-grid h2 { margin: 0; font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; max-width: 20ch; } .footer-links { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 30px; font-size: 15px; } .footer-meta { margin: 0; font-family: var(--mono); font-size: 10px; line-height: 1.8; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); text-align: right; } /* -------------------------------------------------------------------------- Reveal on scroll — JS adds .is-in once the element intersects. .reveal only hides when JS is present (main.js sets data-reveal-ready), so the page stays fully visible without JS. -------------------------------------------------------------------------- */ [data-reveal-ready] .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1); } [data-reveal-ready] .reveal.is-in { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Tablet — 901px to 1140px -------------------------------------------------------------------------- */ @media (min-width: 901px) and (max-width: 1140px) { :root { --pad: 28px; --gutter: 34px; } .hero__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; } .case { grid-template-columns: 240px minmax(0, 1fr); } .about__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; } } /* -------------------------------------------------------------------------- Mobile — 900px and below -------------------------------------------------------------------------- */ @media (max-width: 900px) { :root { --pad: 20px; --gutter: 26px; } .section, .hero, .work { padding-top: 60px; padding-bottom: 60px; } .work { padding-bottom: 0; } h2, .footer-grid h2 { font-size: 27px; } .hero h1 { font-size: 38px; letter-spacing: -0.03em; } .case h3, .role h3 { font-size: 20px; } .grid-std, .hero__grid, .case, .role, .cred, .about__inner, .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } .skills { grid-template-columns: minmax(0, 1fr); gap: 0; } .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; } .stat { padding: 24px 0; border-right: 0; } .hero__portrait { max-width: 340px; } .footer-meta { text-align: left; } /* Header becomes two rows: name + toggle, then a scrollable nav strip. */ .header-inner { height: auto; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 10px; padding-bottom: 10px; } .site-nav { width: 100%; overflow-x: auto; overflow-y: hidden; gap: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .site-nav::-webkit-scrollbar { display: none; } /* ~44px tap targets. */ .site-nav a { flex: 0 0 auto; padding: 8px 0; } .site-nav .nav-resume { padding: 8px 12px; } } /* -------------------------------------------------------------------------- Small phones — 560px and below -------------------------------------------------------------------------- */ @media (max-width: 560px) { .hero h1 { font-size: 32px; } .tool { flex: 0 0 150px; } .tool__chip img { height: 66px; } } /* -------------------------------------------------------------------------- Reduced motion — kill reveal, parallax, zoom and smooth scroll -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal-ready] .reveal { opacity: 1; transform: none; } .zoom:hover img { transform: none; } }