/* ============================================================ Ben Macdonald — personal brand site Built on LC2026 tokens (assets/lc2026-tokens.css). Light-by-default. Papaya accent. Fraunces display + Inter. ============================================================ */ /* ---- Accent + theme reconciliation ------------------------------- LC2026 ships dark as :root and light via [data-theme="light"]. This site is light-first, so is the default; the toggle drops the attribute to reveal LC2026 dark. The single accent is Papaya (Ben's brand orange), overriding LC2026 tangerine everywhere. ------------------------------------ */ :root { --papaya: #FF8000; --papaya-deep: #F96800; --papaya-700: #D85800; --papaya-ink: #BA4A00; /* readable burnt-papaya for accent TEXT on light bg (~5:1) */ --accent: var(--papaya); --accent-hover: var(--papaya-deep); --accent-dark: var(--papaya-700); --accent-soft: rgba(255,128,0,.10); /* accent used as TEXT — bright papaya clears ~8:1 on the dark canvas */ --accent-text: var(--papaya); /* near-black ink that always sits on a papaya fill (buttons); theme-independent */ --on-accent: #1A1916; --maxw: 1140px; --prose: 64ch; } [data-theme="light"] { --accent: var(--papaya); --accent-hover: var(--papaya-deep); --accent-dark: var(--papaya-ink); /* accent as TEXT on the light canvas must clear 4.5:1 — bright papaya does not */ --accent-text: var(--papaya-ink); /* warm the light canvas a touch beyond bone-50 */ --bg: #FBFAF7; --surface: #FFFFFF; --surface-2: #F3F1EB; --border: #E7E3DA; --text: #1A1916; --text-muted:#6E6A60; --accent-soft: rgba(255,128,0,.08); } /* dark (LC2026 :root) accent + soft halo */ :root:not([data-theme="light"]) { --accent-soft: rgba(255,128,0,.12); } ::selection { background: rgba(255,128,0,.28); color: var(--text); } :focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,128,0,.35); border-radius: var(--r-sm); } /* Visually-hidden but screen-reader-available (heading-structure fixes) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Skip link — hidden until focused by keyboard */ .skip-link { position: absolute; left: .75rem; top: -3rem; z-index: 100; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); padding: .55rem .9rem; font-weight: 600; font-size: var(--text-base); transition: top var(--dur-fast) var(--ease); } .skip-link:focus-visible { top: .75rem; } /* ---- Base ---------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-sans); font-size: var(--text-lg); /* 17px personal-site reading size */ line-height: 1.6; letter-spacing: -0.005em; transition: none; /* avoid stuck var()-backed theme transition; toggle repaints instantly */ } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } main { flex: 1 0 auto; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; border: 3px solid var(--bg); } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.025em; margin: 0; text-wrap: balance; font-optical-sizing: auto; } /* ---- Layout -------------------------------------------------- */ .container { width: min(var(--maxw), 100%); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem); } section { padding-block: clamp(3.25rem, 7vw, 6rem); } .rule { border-top: 1px solid var(--border); } /* ---- Eyebrow ------------------------------------------------- */ .eyebrow { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: var(--accent-text); display: inline-flex; align-items: center; gap: .55rem; } .eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--accent); } .eyebrow.plain::before { display: none; } /* ---- Buttons & links ---------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-sans); font-weight: 600; font-size: var(--text-base); padding: .72rem 1.15rem; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); white-space: nowrap; } .btn i, .btn [data-lucide] { width: 17px; height: 17px; } .btn-primary { background: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); } .btn-secondary { background: transparent; color: var(--text); border-color: var(--border); } .btn-secondary:hover { border-color: var(--text-muted); color: var(--text); } .btn-ghost { background: transparent; color: var(--text-muted); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } /* Inline text link — quiet underline that warms to papaya */ a.tlink { color: var(--text); display: inline-flex; align-items: center; gap: .4rem; box-shadow: inset 0 -1px 0 var(--border); transition: box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); font-weight: 500; } a.tlink:hover { color: var(--accent-text); box-shadow: inset 0 -2px 0 var(--accent); } a.tlink i, a.tlink [data-lucide] { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); } a.tlink:hover i, a.tlink:hover [data-lucide] { transform: translateX(3px); } /* ============================================================ HEADER ============================================================ */ header.site { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--border); } .nav-row { display: flex; align-items: center; gap: 1.5rem; padding-block: .85rem; } .brandmark { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.01em; font-size: var(--text-base); } .monogram { width: 30px; height: 30px; display: inline-grid; place-items: center; background: var(--accent); color: #fff; border-radius: var(--r-sm); font-family: var(--font-serif); font-weight: 500; font-size: .95rem; letter-spacing: -.03em; line-height: 1; } .avatar { width: 33px; height: 33px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 1px solid var(--border); background: var(--surface-2); } .avatar-lg { width: 46px; height: 46px; } nav.primary { margin-left: auto; } nav.primary ul { display: flex; align-items: center; gap: 1.6rem; } nav.primary a { font-size: var(--text-base); color: var(--text-muted); font-weight: 500; padding-block: .25rem; position: relative; transition: color var(--dur-fast) var(--ease); } nav.primary a:hover { color: var(--text); } nav.primary a.active { color: var(--text); } nav.primary a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); } .nav-end { display: flex; align-items: center; gap: .65rem; } .icon-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-muted); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .icon-btn:hover { border-color: var(--text-muted); color: var(--text); } .icon-btn i, .icon-btn [data-lucide] { width: 18px; height: 18px; } .nav-toggle { display: none; } @media (max-width: 860px) { nav.primary { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--border); margin: 0; padding: .5rem clamp(1.25rem,5vw,3rem) 1rem; box-shadow: var(--shadow-md); } nav.primary.open { display: block; } nav.primary ul { flex-direction: column; align-items: flex-start; gap: .15rem; } nav.primary a { display: block; width: 100%; padding-block: .7rem; font-size: var(--text-lg); border-bottom: 1px solid var(--border); } nav.primary li:last-child a { border-bottom: 0; } nav.primary a.active::after { display: none; } nav.primary a.active { color: var(--accent-dark); } header.site { position: relative; } .nav-toggle { display: inline-grid; } nav.primary { margin-left: 0; } } /* ============================================================ HERO ============================================================ */ .hero { padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 4.5rem); } .hero-grid { display: grid; grid-template-columns: 1fr 340px; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero-name { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; letter-spacing: .02em; color: var(--text-muted); margin-bottom: 1.4rem; } .hero h1 { font-size: clamp(2.6rem, 5.2vw + 1rem, 4.6rem); line-height: 1.02; font-weight: 400; max-width: 16ch; } .hero h1 .accent { color: var(--accent-text); font-style: italic; } .hero .lede { font-size: clamp(1.15rem, 1.1vw + 1rem, 1.5rem); color: var(--text); max-width: 48ch; margin-top: 1.8rem; line-height: 1.45; } .hero .sub { color: var(--text-muted); max-width: 50ch; margin-top: 1.15rem; font-size: var(--text-lg); } .hero .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; align-items: center; } /* Portrait */ .portrait-wrap { position: relative; } .portrait-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); filter: saturate(.92) contrast(1.03) brightness(.99); } @media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; } .portrait-wrap { max-width: 300px; order: -1; } .portrait-img { aspect-ratio: 1 / 1; } } /* ============================================================ SECTION HEADER (shared) ============================================================ */ .sec-head { max-width: 52ch; } .sec-head h2 { font-size: clamp(1.7rem, 2.4vw + 1rem, 2.6rem); line-height: 1.08; margin-top: 1rem; } .sec-head p:not(.eyebrow) { color: var(--text-muted); margin-top: .9rem; font-size: var(--text-lg); } /* ============================================================ ECOSYSTEM — "Things I'm building" ============================================================ */ .eco-list { margin-top: 2.4rem; } .eco-item { display: grid; grid-template-columns: auto minmax(220px,.7fr) 1fr auto; gap: 1.5rem; align-items: center; padding-block: 1.5rem; border-top: 1px solid var(--border); transition: background var(--dur-fast) var(--ease); } .eco-list .eco-item:last-child { border-bottom: 1px solid var(--border); } .eco-item:hover { background: var(--surface-2); } .eco-idx { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-text); font-weight: 500; } /* Brand plate — fixed-size white tile so every logo reads uniformly in both themes */ .eco-name { margin: 0; display: inline-flex; align-items: center; justify-content: center; width: 168px; height: 56px; padding: 10px 18px; box-sizing: border-box; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); } /* Logo scales to fit inside the plate — contained by both height and width, centred */ .eco-logo { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; } /* Transpeye carries extra internal whitespace — nudge it up so it reads at the same weight */ .eco-logo[src*="transpeye"] { transform: scale(1.28); } .eco-item h3 { font-size: 1.45rem; font-weight: 500; letter-spacing: -.02em; } .eco-item .desc { color: var(--text-muted); font-size: var(--text-base); } .eco-item .go { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); color: var(--accent-dark); display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } .eco-item .go i, .eco-item .go [data-lucide] { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); } .eco-item:hover .go i, .eco-item:hover .go [data-lucide] { transform: translate(2px,-2px); } @media (max-width: 760px) { .eco-item { grid-template-columns: auto 1fr; gap: .35rem 1rem; padding-block: 1.3rem; } .eco-item .eco-idx { grid-row: 1 / 3; align-self: start; padding-top: .35rem; } .eco-item .eco-name { grid-column: 2; } .eco-item .desc { grid-column: 2; } .eco-item .go { grid-column: 2; margin-top: .5rem; } } /* ============================================================ FIELD NOTES — index rows ============================================================ */ .notes-blurb { color: var(--text-muted); margin-top: 1rem; max-width: 50ch; font-size: var(--text-lg); } .notes-index { margin-top: 2.2rem; } .note-row { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 1.4rem; align-items: baseline; padding-block: 1.35rem; border-top: 1px solid var(--border); transition: background var(--dur-fast) var(--ease); } .notes-index .note-row:last-child { border-bottom: 1px solid var(--border); } .note-row:hover { background: var(--surface-2); } .note-row .num { font-family: var(--font-mono); font-weight: 500; color: var(--accent-text); font-size: var(--text-base); } .note-row .note-body h3 { font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; display: inline; } .note-row .note-body p { color: var(--text-muted); margin-top: .35rem; font-size: var(--text-base); } .note-row .chev { color: var(--text-muted); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); align-self: center; } .note-row .chev i, .note-row .chev [data-lucide] { width: 18px; height: 18px; } .note-row:hover .chev { opacity: 1; transform: translateX(0); } .soon { font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .12rem .5rem; margin-left: .6rem; vertical-align: middle; white-space: nowrap; } @media (max-width: 600px) { .note-row { grid-template-columns: 2.6rem 1fr; } .note-row .chev { display: none; } } /* ============================================================ SINGLE NOTE — reading view ============================================================ */ .note-single { max-width: var(--prose); margin-inline: auto; } .note-back { margin-bottom: 2rem; } .note-back a { white-space: nowrap; } .note-kicker { display: flex; align-items: center; gap: .8rem; } .note-kicker .num { font-family: var(--font-mono); font-weight: 500; color: var(--accent-text); font-size: var(--text-base); } .note-kicker .kicker-rule { flex: 1; height: 1px; background: var(--border); } .note-single h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); line-height: 1.06; margin-top: 1.1rem; } .note-single .prose { margin-top: 2rem; } .note-single .prose p { font-size: 1.2rem; line-height: 1.72; color: var(--text); } .note-single .prose p + p { margin-top: 1.4rem; } .note-single .prose p:first-child { font-size: 1.34rem; font-family: var(--font-serif); font-weight: 400; line-height: 1.4; letter-spacing: -.015em; color: var(--text); } .note-stub { margin-top: 2rem; padding: 1.6rem 1.8rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text-muted); } .note-stub .idea { color: var(--text); margin-top: .8rem; } .note-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--border); } .note-nav .next-wrap { text-align: right; } .note-nav .next-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); display: block; margin-bottom: .25rem; } /* ============================================================ WORK WITH ME — paths ============================================================ */ .paths { margin-top: 2.4rem; display: grid; gap: 1.1rem; } .path { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; padding: 1.9rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--dur-fast) var(--ease); } .path:hover { border-color: var(--text-muted); } .path .pnum { font-family: var(--font-serif); font-size: 2rem; font-weight: 400; color: var(--accent-text); line-height: 1; } .path h3 { font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; } .path p { color: var(--text-muted); margin-top: .6rem; font-size: var(--text-base); max-width: 60ch; } .path .ctas { display: flex; flex-wrap: wrap; gap: .6rem .9rem; margin-top: 1.2rem; } @media (max-width: 600px) { .path { grid-template-columns: 1fr; gap: .9rem; padding: 1.5rem; } } /* ============================================================ IN THE FIELD — photo gallery ============================================================ */ .field-grid { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } .field-card { display: flex; flex-direction: column; gap: .75rem; margin: 0; } .field-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--border); border-radius: var(--r-lg); filter: saturate(.92) contrast(1.03) brightness(.99); transition: filter var(--dur) var(--ease); } .field-card:hover img { filter: saturate(1.02) contrast(1.05); } .field-cap { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; } .field-cap .where { display: block; color: var(--text); font-weight: 600; } @media (max-width: 900px) { .field-grid { grid-template-columns: repeat(2, 1fr); gap: 1.3rem; } } @media (max-width: 480px) { .field-grid { grid-template-columns: 1fr; } .field-card img { aspect-ratio: 4 / 3; } } /* Speaking page banner */ .speaking-banner { margin-top: 2.2rem; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 32%; border: 1px solid var(--border); border-radius: var(--r-lg); filter: saturate(.92) contrast(1.03) brightness(.99); } @media (max-width: 600px) { .speaking-banner { aspect-ratio: 4 / 3; } } /* ============================================================ GENERIC PAGE / lists / topics ============================================================ */ .page-head { max-width: 54ch; } .page-head h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); line-height: 1.06; margin-top: 1rem; } .page-head p:not(.eyebrow) { color: var(--text-muted); margin-top: 1rem; font-size: var(--text-lg); line-height: 1.5; } .list-rows { margin-top: 2.4rem; } .list-rows .row { display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; padding-block: 1.3rem; border-top: 1px solid var(--border); transition: background var(--dur-fast) var(--ease); } .list-rows .row:last-child { border-bottom: 1px solid var(--border); } .list-rows .row .row-title { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; color: var(--text); transition: color var(--dur-fast) var(--ease); } .list-rows .row:hover .row-title { color: var(--accent-dark); } .list-rows .row .meta { color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; } .topics { margin-top: 2.4rem; } .topics li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding-block: 1.3rem; border-top: 1px solid var(--border); font-size: 1.3rem; font-family: var(--font-serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.3; align-items: baseline; } .topics li:last-child { border-bottom: 1px solid var(--border); } .topics li .tnum { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-text); font-weight: 500; } /* Contact */ .contact-email { margin-top: 2rem; } .contact-email a { font-family: var(--font-serif); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 400; letter-spacing: -.025em; color: var(--text); box-shadow: inset 0 -2px 0 var(--border); transition: box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .contact-email a:hover { color: var(--accent-dark); box-shadow: inset 0 -3px 0 var(--accent); } .contact-links { display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; margin-top: 2rem; } /* ============================================================ FOOTER ============================================================ */ footer.site { border-top: 1px solid var(--border); margin-top: 2rem; background: var(--surface); } footer.site .inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; padding-block: 3rem; align-items: start; } footer.site .who .fname { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; } footer.site .who p { color: var(--text-muted); font-size: var(--text-base); margin-top: .8rem; max-width: 40ch; } footer.site .fnav { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.5rem; justify-self: end; } footer.site .fnav a { color: var(--text-muted); font-size: var(--text-base); display: inline-flex; align-items: center; gap: .4rem; transition: color var(--dur-fast) var(--ease); } footer.site .fnav a:hover { color: var(--accent-dark); } footer.site .fnav a i, footer.site .fnav a [data-lucide] { width: 15px; height: 15px; } .colophon { color: var(--text-muted); font-size: var(--text-sm); padding-bottom: 2.5rem; border-top: 1px solid var(--border); padding-top: 1.5rem; } @media (max-width: 680px) { footer.site .inner { grid-template-columns: 1fr; gap: 2rem; } footer.site .fnav { justify-self: start; } } /* ============================================================ MOTION ============================================================ */ @keyframes enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .anim > * { animation: enter 460ms var(--ease) both; } .anim > *:nth-child(1) { animation-delay: 0ms; } .anim > *:nth-child(2) { animation-delay: 70ms; } .anim > *:nth-child(3) { animation-delay: 140ms; } .anim > *:nth-child(4) { animation-delay: 210ms; } .anim > *:nth-child(5) { animation-delay: 280ms; } .anim > *:nth-child(6) { animation-delay: 350ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } } .muted { color: var(--text-muted); } [hidden] { display: none !important; }