/* ============================================================
Ludy Lo — Portfolio
Tokens + components, translated from the Portfolio design
system (Documents/Portfolio). Monochrome, dark-first,
1px hairlines, no rounding, no shadows.
============================================================ */
/* Fonts are loaded via in each page's — a top-of-file
@import here render-blocks the whole stylesheet on the font fetch,
which caused white flashes during page transitions. */
:root {
/* Surfaces */
--surface-page: #0a0a0b;
--surface-raised: #111214;
--surface-media: #141416;
--surface-media-active: #1c1c20;
/* Text tints — high to low emphasis */
--text-primary: #e8e8ea;
--text-secondary: #b6b6b8;
--text-tertiary: #a0a0a2;
--text-muted: #8a8a8c;
--text-faint: #6d6d70;
--text-disabled: #5c5c5e;
--text-invert: #ffffff;
/* Hairlines & strokes */
--line: rgba(255, 255, 255, 0.10);
--line-strong: rgba(255, 255, 255, 0.18);
--line-stripe: rgba(255, 255, 255, 0.035);
/* Interaction */
--hover-surface: #111214;
--hover-text: #ffffff;
--accent: #ffffff;
/* Type */
--font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
--fs-h1: 34px; --lh-h1: 1.12;
--fs-h2: 26px; --lh-h2: 1.15;
--fs-h3: 28px; --lh-h3: 1.12; /* detail-page phase headings */
/* lead matches body so paragraph text is one size everywhere;
kept as its own token in case they diverge again later */
--fs-lead: 15px; --lh-lead: 1.6;
--fs-body: 15px; --lh-body: 1.6;
--fs-label: 12px; --ls-label: 0.10em;
--fs-caption: 11px; --ls-caption: 0.08em;
--fs-micro: 9px; --ls-micro: 0.12em;
--fs-stat: 36px;
/* Spacing */
--pad: 40px; /* content padding */
--pad-row: 24px; /* section-header row padding */
--space-h1: 24px; /* below h1 */
--space-title: 10px; /* below title row */
--space-para: 16px; /* below paragraphs */
/* Layout */
--container-max: 1180px;
--sidebar-width: 340px;
}
/* ---------- page transitions ----------
Cross-document View Transitions: the two columns slide with a
short stagger (sidebar first, content ~80ms later). Forward
(home → project) travels right-to-left; back travels left-to-
right. js/main.js tags each navigation with a 'back' type.
Browsers without support simply load pages instantly. */
@view-transition { navigation: auto; }
/* Keep every layer behind the sliding snapshots dark, otherwise the
browser's white canvas can flash through mid-transition.
color-scheme:dark also makes the browser's own between-documents
canvas dark — that layer is unreachable by page styles and is what
flashes white during navigation on dark sites. (Each page also
declares .) */
html { background: #0a0a0b; color-scheme: dark; }
::view-transition { background-color: #0a0a0b; }
/* Only the sidebar gets its own snapshot — it's sticky, so it's
always fully in view. The content column rides the root snapshot,
which is captured viewport-accurate (scroll position included);
naming the tall itself made transitions jump to page top.
On mobile the sidebar scrolls offscreen, so there the whole page
slides as one root snapshot. */
@media (min-width: 900px) {
.sidebar { view-transition-name: sidebar; }
}
/* Starts slow, accelerates hard toward the end — a "drag" feel. */
:root {
--vt-duration: .45s;
--vt-ease: cubic-bezier(.55, 0, .85, .25);
--vt-stagger: 100ms;
}
@keyframes vt-out-to-left { to { opacity: 0; transform: translateX(-32px); } }
@keyframes vt-in-from-right { from { opacity: 0; transform: translateX(32px); } }
@keyframes vt-out-to-right { to { opacity: 0; transform: translateX(32px); } }
@keyframes vt-in-from-left { from { opacity: 0; transform: translateX(-32px); } }
/* forward (default): right → left */
::view-transition-old(sidebar) { animation: vt-out-to-left var(--vt-duration) var(--vt-ease) both; }
::view-transition-new(sidebar) { animation: vt-in-from-right var(--vt-duration) var(--vt-ease) both; }
::view-transition-old(root) { animation: vt-out-to-left var(--vt-duration) var(--vt-ease) var(--vt-stagger) both; }
::view-transition-new(root) { animation: vt-in-from-right var(--vt-duration) var(--vt-ease) var(--vt-stagger) both; }
/* back: left → right */
html:active-view-transition-type(back)::view-transition-old(sidebar) { animation-name: vt-out-to-right; }
html:active-view-transition-type(back)::view-transition-new(sidebar) { animation-name: vt-in-from-left; }
html:active-view-transition-type(back)::view-transition-old(root) { animation-name: vt-out-to-right; }
html:active-view-transition-type(back)::view-transition-new(root) { animation-name: vt-in-from-left; }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
/* ---------- base ---------- */
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--surface-page);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
/* Mono utility text */
.mono {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
/* ---------- shell ---------- */
.container {
max-width: var(--container-max);
margin: 0 auto;
min-height: 100vh;
border-left: 1px solid var(--line);
border-right: 1px solid var(--line);
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}
/* Every divider between stacked blocks comes from this one rule,
so hairlines can never double up. */
main > * + * { border-top: 1px solid var(--line); }
/* ---------- sidebar (profile / case-study rail) ---------- */
.sidebar {
border-right: 1px solid var(--line);
padding: 24px var(--pad) var(--pad);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.sidebar .brand {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
font-weight: 500;
}
/* Sits where the brand does on the home page, baseline-aligned with
the first section-header row in the right column. */
.sidebar .back {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted);
transition: color .25s ease;
}
.sidebar .back:hover { color: var(--hover-text); }
.sidebar h1 {
margin: 56px 0 var(--space-h1);
font-size: var(--fs-h1);
line-height: var(--lh-h1);
font-weight: 500;
letter-spacing: -0.02em;
}
.sidebar .lead {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text-secondary);
}
.facts {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 44px;
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.06em;
color: var(--text-muted);
}
.facts dt { color: var(--text-disabled); margin-bottom: 6px; text-transform: uppercase; }
.facts dd { margin: 0; }
.facts > div { margin: 0; }
.sidebar nav {
margin-top: auto;
padding-top: 44px;
display: flex;
flex-direction: column;
gap: 12px;
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--ls-caption);
text-transform: uppercase;
color: var(--text-muted);
}
.sidebar nav a { transition: color .25s ease; }
.sidebar nav a:hover { color: var(--hover-text); }
/* ---------- section header rows ---------- */
.section-header {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--pad-row) var(--pad);
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--ls-label);
text-transform: uppercase;
color: var(--text-muted);
}
/* ---------- project entries ---------- */
.project {
display: block;
padding: var(--pad);
transition: background .25s ease;
}
.project:hover { background: var(--hover-surface); }
.title-row {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: var(--space-title);
}
.title-row .index {
font-family: var(--font-mono);
font-size: calc(var(--fs-h2) / 2);
line-height: 1.5;
color: var(--text-faint);
}
.title-row h3 {
font-size: var(--fs-h2);
line-height: var(--lh-h2);
font-weight: 500;
letter-spacing: -0.01em;
}
.project .desc {
margin-bottom: var(--space-para);
color: var(--text-tertiary);
}
.meta {
font-family: var(--font-mono);
font-size: var(--fs-caption);
letter-spacing: var(--ls-caption);
color: #7a7a7c;
}
/* side-project row variant */
.project--row {
display: flex;
gap: 28px;
align-items: center;
}
.project--row .media { width: 280px; flex: none; aspect-ratio: 16 / 10; margin-bottom: 0; }
.project--row .desc { max-width: 440px; }
/* ---------- media slot (still → motion on hover) ----------
To use real assets, put an ![]()
and a