/* ———————————————————————————————————————————————— Lawrence Altaffer — warm, plump, full of color. Slate navy ⇄ cream ⇄ blush ⇄ butter: the page itself changes mood as you scroll. ———————————————————————————————————————————————— */ /* registered so the mood morph interpolates smoothly */ @property --bg { syntax: ""; inherits: true; initial-value: oklch(0.31 0.034 248); } @property --fg { syntax: ""; inherits: true; initial-value: oklch(0.962 0.018 88); } @property --accent { syntax: ""; inherits: true; initial-value: oklch(0.83 0.139 84); } :root { /* palette — pulled from the 2022 file & the pin board */ --navy: oklch(0.31 0.034 248); --navy-text: oklch(0.28 0.034 248); --cream: oklch(0.962 0.018 88); --marigold: oklch(0.83 0.139 84); --blush: oklch(0.917 0.043 27); --butter: oklch(0.925 0.066 92); --blue: oklch(0.49 0.15 245); --steel: oklch(0.58 0.09 236); /* the colophon's tonal GitHub mark */ --col-w: 1108px; --gutter: clamp(20px, 4.5vw, 44px); /* space — 4pt scale */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; --space-section: clamp(96px, 15vh, 168px); /* type */ --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 1.0625rem; --text-lg: clamp(1.25rem, 1.05rem + 1vw, 1.625rem); --text-xl: clamp(1.45rem, 1.1rem + 1.7vw, 2.2rem); --text-2xl: clamp(2rem, 1.4rem + 3vw, 3.6rem); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; } @media (max-width: 679px) { html { scroll-padding-top: 132px; /* stacked mobile header is taller */ } } /* the mood morph — main.js flips data-mood on */ body { --bg: var(--navy); --fg: var(--cream); --accent: var(--marigold); background: var(--bg); color: var(--fg); transition: --bg 0.9s ease, --fg 0.9s ease, --accent 0.9s ease, background-color 0.9s ease, color 0.9s ease; font-family: "Schibsted Grotesk", system-ui, sans-serif; font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } body.no-morph { transition: none; } body[data-mood="navy"] { --bg: var(--navy); --fg: var(--cream); --accent: var(--marigold); } body[data-mood="cream"] { --bg: var(--cream); --fg: var(--navy-text); --accent: var(--blue); } body[data-mood="blush"] { --bg: var(--blush); --fg: var(--navy-text); --accent: var(--blue); } body[data-mood="butter"] { --bg: var(--butter); --fg: var(--navy-text); --accent: var(--blue); } ::selection { background: var(--accent); color: var(--bg); } a { color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* press feedback — instant, no transition */ a:active, button:active { opacity: 0.72; } .col { max-width: var(--col-w); margin-inline: auto; padding-inline: var(--gutter); } /* ——— type voices ——— */ .display { font-family: "Caprasimo", Georgia, serif; font-weight: 400; line-height: 1.08; letter-spacing: 0.002em; } .dot { color: var(--accent); } .mono-label { font-family: "Spline Sans Mono", monospace; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklch, var(--fg) 76%, var(--bg)); } .mono-meta { font-family: "Spline Sans Mono", monospace; font-size: var(--text-sm); letter-spacing: 0.01em; color: color-mix(in oklch, var(--fg) 76%, var(--bg)); } .mono-meta b { font-weight: 400; color: color-mix(in oklch, var(--fg) 66%, var(--bg)); } /* ——— header ——— */ .site-header { position: sticky; top: 0; z-index: 40; /* solid mood paper + a dotted rule — the manifest's leader motif, not the translucent-blur hairline kit */ background: var(--bg); border-bottom: 1px dotted color-mix(in oklch, var(--fg) 45%, transparent); } .site-header .col { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-md); } @media (max-width: 679px) { .site-header .col { flex-direction: column; align-items: flex-start; gap: var(--space-xs); padding-block: var(--space-sm); } .site-nav { width: 100%; justify-content: space-between; flex-wrap: wrap; /* five items — wrap, never overflow */ gap: var(--space-2xs) var(--space-md); } } .wordmark { font-family: "Caprasimo", Georgia, serif; font-size: 1.2rem; text-decoration: none; white-space: nowrap; } .site-nav { display: flex; gap: clamp(14px, 3vw, 36px); } .site-nav a { font-family: "Spline Sans Mono", monospace; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: color-mix(in oklch, var(--fg) 76%, var(--bg)); padding-block: var(--space-2xs); transition: color 0.25s var(--ease-out-quint); } .site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); } /* ——— hero — the manifesto, set as a poster lockup ——— Each line is sized with cqi units so it fills the column exactly. A line can never wrap; every break is chosen. */ .hero { padding-top: clamp(64px, 12vh, 144px); padding-bottom: var(--space-section); container-type: inline-size; } .hero-kicker { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-bottom: clamp(32px, 6vh, 56px); } .hero-manifesto { line-height: 1.04; } .hero-manifesto em { font-style: normal; color: var(--accent); } .hero-manifesto .line { display: block; overflow: hidden; padding-block: 0.07em; /* room for Caprasimo's descenders inside the clip */ white-space: nowrap; } .hero-manifesto .line-inner { display: inline-block; } /* per-line lockup sizes — tuned so each line spans the column */ .hero-manifesto .l1 { font-size: 11.08cqi; } .hero-manifesto .l2 { font-size: 5.16cqi; } .hero-manifesto .l3 { font-size: 5.92cqi; } .hero-manifesto .l4 { font-size: 6.58cqi; } .hero-footnote { margin-top: clamp(40px, 7vh, 72px); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); } .hero-footnote .tenure { color: var(--fg); } /* load choreography */ @media (prefers-reduced-motion: no-preference) { .rise { opacity: 0; transform: translateY(24px); animation: rise 0.9s var(--ease-out-quint) forwards; } .rise-1 { animation-delay: 0.05s; } .rise-5 { animation-delay: 0.72s; } @keyframes rise { to { opacity: 1; transform: none; } } .hero-manifesto .line-inner { transform: translateY(118%); animation: line-up 0.95s var(--ease-out-quint) forwards; } .li-1 { animation-delay: 0.16s; } .li-2 { animation-delay: 0.3s; } .li-3 { animation-delay: 0.44s; } .li-4 { animation-delay: 0.58s; } @keyframes line-up { to { transform: none; } } } /* ——— sections ——— */ .section { padding-block: var(--space-section); } /* chapter label stacks above the title — one column at every width (label-beside-heading on a shared row is the templated tell) */ .section-head { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: clamp(40px, 7vh, 72px); } .section-head .mono-label { order: -1; } .section-head .index { color: var(--accent); } .section-title { font-size: var(--text-2xl); max-width: 16ch; text-wrap: balance; } /* long-word safety net for display-size text */ .section-title, .work-title, .mani-name { overflow-wrap: anywhere; min-width: 0; } /* scroll reveal */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease-out-quint), transform 0.8s var(--ease-out-quint); } .reveal.is-visible { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .work-summary:hover .work-title, .say-hello:hover { transform: none; } .work-detail, .work-toggle { transition: none; } } /* ——— work index ——— */ .work-index { list-style: none; } .work-row { border-top: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); } .work-row:last-child { border-bottom: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); } .work-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num toggle" "title toggle" "meta toggle"; align-items: start; gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-lg); margin-inline: calc(-1 * var(--space-md)); padding-inline: var(--space-md); width: calc(100% + 2 * var(--space-md)); border-radius: 0; background: none; border: none; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background-color 0.35s var(--ease-out-quint); } @media (min-width: 800px) { .work-summary { grid-template-columns: 72px minmax(0, 1fr) auto auto; grid-template-areas: "num title meta toggle"; align-items: baseline; gap: var(--space-lg); padding-block: var(--space-xl); } } .work-summary:hover { background: color-mix(in oklch, var(--accent) 9%, transparent); } .work-num { grid-area: num; font-family: "Spline Sans Mono", monospace; font-size: var(--text-sm); color: color-mix(in oklch, var(--fg) 66%, var(--bg)); transition: color 0.3s var(--ease-out-quint); } .work-title { grid-area: title; font-size: var(--text-xl); text-wrap: balance; transition: color 0.3s var(--ease-out-quint), transform 0.45s var(--ease-out-quint); } .work-summary:hover .work-title { color: var(--accent); transform: translateX(8px); } .work-meta { grid-area: meta; } .work-toggle { grid-area: toggle; align-self: center; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid color-mix(in oklch, var(--fg) 30%, transparent); border-radius: 50%; position: relative; transition: border-color 0.3s var(--ease-out-quint), background-color 0.3s var(--ease-out-quint), transform 0.45s var(--ease-out-quint); } .work-toggle::before, .work-toggle::after { content: ""; position: absolute; background: color-mix(in oklch, var(--fg) 76%, var(--bg)); transition: background 0.3s var(--ease-out-quint); } .work-toggle::before { width: 13px; height: 1.5px; } .work-toggle::after { width: 1.5px; height: 13px; } .work-summary:hover .work-num, .work-summary:focus-visible .work-num { color: var(--accent); } .work-summary:hover .work-toggle { border-color: var(--accent); } .work-summary:hover .work-toggle::before, .work-summary:hover .work-toggle::after { background: var(--accent); } .work-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .work-row-inner[data-open="true"] .work-toggle { transform: rotate(135deg); background: var(--accent); border-color: var(--accent); } .work-row-inner[data-open="true"] .work-toggle::before, .work-row-inner[data-open="true"] .work-toggle::after { background: var(--bg); } .work-row-inner[data-open="true"] .work-num { color: var(--accent); } /* expansion — animate grid rows, not height */ .work-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease-out-quint); } .work-row-inner[data-open="true"] .work-detail { grid-template-rows: 1fr; } .work-detail-inner { overflow: hidden; } .work-detail-body { display: grid; gap: var(--space-xl); padding-bottom: var(--space-2xl); max-width: 100%; } @media (min-width: 800px) { .work-detail-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-3xl); padding-left: calc(72px + var(--space-lg) + var(--space-md)); } } .work-detail-body p { max-width: 58ch; color: color-mix(in oklch, var(--fg) 80%, var(--bg)); } .work-story p + p { margin-top: var(--space-md); } .work-detail-body p strong { color: var(--fg); font-weight: 600; } .work-receipts { display: grid; gap: var(--space-md); align-content: start; } .receipt { display: flex; align-items: baseline; gap: var(--space-sm); } .receipt .figure { font-family: "Caprasimo", Georgia, serif; font-size: var(--text-lg); color: var(--accent); white-space: nowrap; } .receipt .what { font-family: "Spline Sans Mono", monospace; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklch, var(--fg) 76%, var(--bg)); } /* the sum line — a receipt total under the work index */ .work-coda { text-align: right; margin-top: var(--space-md); } /* ——— side projects — the after-hours manifest ——— Name … dotted leader … where it lives. The old ledger's leaders survive here; the accent does the only talking. */ .mani-list { list-style: none; display: grid; } .mani-row { display: grid; gap: var(--space-sm); padding-block: var(--space-xl); border-top: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); } .mani-row:last-child { border-bottom: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); } .mani-line { display: flex; flex-wrap: wrap; /* long name drops the leader + destination to their own line */ align-items: baseline; gap: var(--space-xs) var(--space-md); } .mani-name { font-size: var(--text-xl); text-wrap: balance; } .mani-leader { flex: 1; border-bottom: 1px dotted color-mix(in oklch, var(--fg) 45%, transparent); transform: translateY(-0.35em); min-width: 24px; } .mani-dest { color: var(--accent); text-decoration: none; white-space: nowrap; } a.mani-dest:hover, a.mani-dest:focus-visible { color: var(--fg); } .mani-what { color: color-mix(in oklch, var(--fg) 80%, var(--bg)); max-width: 58ch; } .mani-meta a, .mani-outro a { text-decoration: none; font-weight: 500; color: color-mix(in oklch, var(--fg) 92%, var(--bg)); transition: color 0.25s var(--ease-out-quint); } .mani-meta a:hover, .mani-meta a:focus-visible, .mani-outro a:hover, .mani-outro a:focus-visible { color: var(--accent); } .mani-outro { margin-top: var(--space-xl); } /* ——— writing — the thought-piece index ——— Numbered rows like the work index; no accordion — the piece itself is the destination. */ .writing-list { list-style: none; } .writing-row { border-top: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); } .writing-row:last-child { border-bottom: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); } .writing-link { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "title" "what" "meta"; gap: var(--space-2xs) var(--space-lg); align-items: start; padding-block: var(--space-lg); margin-inline: calc(-1 * var(--space-md)); padding-inline: var(--space-md); text-decoration: none; color: inherit; transition: background-color 0.35s var(--ease-out-quint); } @media (min-width: 800px) { .writing-link { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "num title arrow" "num what arrow" "num meta arrow"; padding-block: var(--space-xl); } } .writing-link:hover { background: color-mix(in oklch, var(--accent) 9%, transparent); } .writing-num { grid-area: num; font-family: "Spline Sans Mono", monospace; font-size: var(--text-sm); color: color-mix(in oklch, var(--fg) 66%, var(--bg)); transition: color 0.3s var(--ease-out-quint); } .writing-title { grid-area: title; font-size: var(--text-xl); text-wrap: balance; overflow-wrap: anywhere; min-width: 0; transition: color 0.3s var(--ease-out-quint), transform 0.45s var(--ease-out-quint); } .writing-link:hover .writing-title { color: var(--accent); transform: translateX(8px); } .writing-link:hover .writing-num { color: var(--accent); } .writing-what { grid-area: what; max-width: 58ch; color: color-mix(in oklch, var(--fg) 80%, var(--bg)); margin-top: var(--space-xs); } .writing-meta { grid-area: meta; margin-top: var(--space-xs); } .writing-arrow { display: none; grid-area: arrow; align-self: center; color: color-mix(in oklch, var(--fg) 66%, var(--bg)); transition: color 0.3s var(--ease-out-quint), transform 0.45s var(--ease-out-quint); } @media (min-width: 800px) { .writing-arrow { display: block; } } .writing-link:hover .writing-arrow { color: var(--accent); transform: translateX(6px); } @media (prefers-reduced-motion: reduce) { .writing-link:hover .writing-title, .writing-link:hover .writing-arrow { transform: none; } } /* ——— article pages — /writing/ ——— */ .article-hero { padding-top: clamp(56px, 10vh, 120px); padding-bottom: var(--space-3xl); } .article-kicker { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-bottom: clamp(28px, 5vh, 48px); } .article-title { font-size: var(--text-2xl); line-height: 1.08; max-width: 14ch; text-wrap: balance; } .article-lede { margin-top: var(--space-lg); font-size: var(--text-lg); line-height: 1.45; max-width: 42ch; color: color-mix(in oklch, var(--fg) 88%, var(--bg)); } .article-body { padding-block: var(--space-section); } .article-chapter { padding-block: var(--space-2xl); border-top: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); } .article-chapter:first-child { border-top: none; padding-top: 0; } .article-chapter > .mono-label { display: block; margin-bottom: var(--space-md); } .article-chapter h2 { font-family: "Caprasimo", Georgia, serif; font-weight: 400; font-size: var(--text-xl); line-height: 1.25; max-width: 30ch; text-wrap: balance; margin-bottom: var(--space-lg); } .article-chapter p { max-width: 58ch; color: color-mix(in oklch, var(--fg) 84%, var(--bg)); margin-bottom: var(--space-md); } .article-chapter p strong { color: var(--fg); font-weight: 600; } .article-quote { border-left: 2px solid var(--accent); padding-left: var(--space-lg); margin-block: var(--space-lg); max-width: 48ch; } .article-quote p { font-family: "Caprasimo", Georgia, serif; font-size: var(--text-lg); line-height: 1.35; color: var(--fg); margin: 0; } .article-close { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px dotted color-mix(in oklch, var(--fg) 45%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-xs) var(--space-lg); } .article-close a { text-decoration: none; font-weight: 600; transition: color 0.25s var(--ease-out-quint); } .article-close a:hover { color: var(--accent); } /* ——— road / timeline ——— */ .road { display: grid; gap: 0; } .road-stop { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-xl); border-top: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); } @media (min-width: 800px) { .road-stop { grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-2xl); } } .road-year { font-family: "Caprasimo", Georgia, serif; font-size: var(--text-lg); line-height: 1.3; } .road-year span { display: block; font-family: "Spline Sans Mono", monospace; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklch, var(--fg) 66%, var(--bg)); margin-top: var(--space-2xs); } .road-what h3 { font-weight: 600; font-size: var(--text-base); margin-bottom: var(--space-2xs); } .road-what p { color: color-mix(in oklch, var(--fg) 80%, var(--bg)); max-width: 62ch; } /* ——— story ——— */ /* the story is a letter — the one chapter with no index idiom. the belief line stands (sticky) while the story scrolls past it. */ .story-belief-rail { container-type: inline-size; } .story-belief { font-size: 9.2cqi; line-height: 1.12; margin-bottom: var(--space-2xl); } .story-belief .bl { display: block; white-space: nowrap; } .story-letter { max-width: 58ch; } .story-letter > p:not(.story-sign) { color: color-mix(in oklab, var(--fg) 86%, var(--bg)); } .story-letter > p + p { margin-top: var(--space-lg); } .story-lede::first-letter { font-family: "Caprasimo", serif; float: left; font-size: 3.4em; line-height: 0.82; padding: 0.04em 0.12em 0 0; color: var(--accent); } .story-sign { margin-top: var(--space-xl); line-height: 2; } @media (min-width: 900px) { .story-essay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-4xl); align-items: start; } .story-belief-rail { position: sticky; top: 128px; /* header clearance; tracks scroll-padding-top's intent */ } .story-belief { margin-bottom: 0; } } /* ——— contact ——— */ .contact { padding-block: var(--space-section); } .say-hello { display: inline-block; font-size: clamp(2.5rem, 9.5vw, 7.25rem); line-height: 1.05; text-decoration: none; margin-left: -0.03em; transition: color 0.3s var(--ease-out-quint), transform 0.45s var(--ease-out-quint); } .say-hello:hover { color: var(--accent); transform: translateX(10px); } .contact-rows { margin-top: clamp(40px, 7vh, 72px); display: grid; gap: 0; } .contact-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-md); border-top: 1px solid color-mix(in oklch, var(--fg) 22%, transparent); } /* the whole row is the link; the value lights on hover */ a.contact-row { text-decoration: none; } a.contact-row .contact-value { font-weight: 600; transition: color 0.25s var(--ease-out-quint); } a.contact-row:hover .contact-value { color: var(--accent); } /* ——— colophon ——— */ .colophon { border-top: 1px solid color-mix(in oklch, var(--fg) 18%, transparent); } .colophon .col { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-lg); } .colophon-github { display: inline-flex; /* a bluer, lighter cousin of the navy ground — tonal, found not shouted */ color: var(--steel); transition: color 0.3s var(--ease-out-quint); } .colophon-github:hover, .colophon-github:focus-visible { color: var(--accent); }