/* ============================================================ Project-page system — the portfolio shell around a project. Depends on style.css for primitives + semantic tokens. Per-project identity enters through --project-accent / --project-ink, set inline on . ============================================================ */ :root { --project-accent: var(--brick); --project-ink: var(--umber-deep); --measure: 68ch; } /* ---------- sub-page header (static, not the hero overlay) ---------- */ .site-header--sub { position: sticky; top: 0; background: color-mix(in oklab, var(--color-bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in oklab, var(--color-fg) 12%, transparent); } .nav-list a[aria-current="page"] { color: var(--project-accent); } /* ---------- shared page furniture ---------- */ .measure { max-width: var(--measure); } .eyebrow { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--project-accent); margin: 0 0 var(--space-2); } .backlink { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; text-decoration: none; color: var(--color-muted); transition: color 200ms var(--ease-out); } .backlink:hover { color: var(--project-accent); } /* ---------- project header ---------- */ .project-header { padding-block: clamp(var(--space-6), 10vw, var(--space-8)) var(--space-6); border-bottom: 1px solid color-mix(in oklab, var(--color-fg) 14%, transparent); } .project-title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 0.95; letter-spacing: -0.02em; margin: var(--space-2) 0 var(--space-3); text-wrap: balance; } .project-lede { font-size: var(--step-1); line-height: 1.4; max-width: 30ch; margin: 0 0 var(--space-5); color: var(--color-fg); } /* metadata rail */ .project-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; } .project-meta div { border-top: 2px solid var(--project-accent); padding-top: var(--space-1); } .project-meta dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 2px; } .project-meta dd { margin: 0; font-weight: 600; } /* ---------- sections ---------- */ .project-section { padding-block: clamp(var(--space-6), 8vw, var(--space-7)); } .project-section + .project-section { border-top: 1px solid color-mix(in oklab, var(--color-fg) 10%, transparent); } .project-section--dark { background: var(--project-ink); color: var(--chalk); border-top: 0; } .project-section--dark .section-title, .project-section--dark strong { color: var(--chalk); } .project-section--dark :focus-visible { outline-color: var(--chalk); } .section-title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 var(--space-3); } .project-section p { max-width: var(--measure); } .project-section p + p { margin-top: var(--space-2); } /* two-column: sticky label left, prose right */ .split { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } @media (min-width: 900px) { .split { grid-template-columns: minmax(180px, 22%) 1fr; gap: var(--space-6); } .split > :first-child { position: sticky; top: 96px; align-self: start; } } /* ---------- process steps ---------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); } @media (min-width: 760px) { .steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } .steps li { border-top: 2px solid color-mix(in oklab, var(--project-accent) 60%, transparent); padding-top: var(--space-2); } .steps h3 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; margin: 0 0 var(--space-1); line-height: 1.1; } .steps p { margin: 0; color: var(--color-muted); font-size: 0.95rem; } .project-section--dark .steps p { color: oklch(0.82 0.02 85); } /* before / after contrast pair */ .compare { display: grid; gap: var(--space-4); } @media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; gap: var(--space-5); } } .compare > div { padding: var(--space-3); border-radius: var(--radius-md); background: color-mix(in oklab, var(--color-fg) 5%, transparent); } .compare h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: var(--step-1); } .compare ul { margin: 0; padding-left: 1.1em; } .compare li + li { margin-top: var(--space-1); } .compare--after { background: color-mix(in oklab, var(--project-accent) 10%, transparent) !important; } /* stat row */ .stats { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-4) 0 0; padding: 0; } .stats b { display: block; font-family: var(--font-display); font-size: var(--step-2); line-height: 1; color: var(--project-accent); } .stats span { font-size: 0.85rem; color: var(--color-muted); } .project-section--dark .stats span { color: oklch(0.8 0.02 85); } /* ---------- the embedded presentation ---------- */ .deck-embed { margin-top: var(--space-4); } .deck-frame { position: relative; border: 1px solid color-mix(in oklab, var(--color-fg) 18%, transparent); border-radius: var(--radius-md); overflow: hidden; background: color-mix(in oklab, var(--color-fg) 6%, transparent); aspect-ratio: 16 / 9; } /* decks scale a fixed 16:9 stage, so the frame matches it at every width. Scrolling showcases get a taller frame instead. */ .deck-frame--scroll { aspect-ratio: 4 / 3; } @media (max-width: 700px) { .deck-frame--scroll { aspect-ratio: 3 / 4; } } .deck-frame iframe { width: 100%; height: 100%; border: 0; display: block; } /* click-to-activate poster — keeps unrelated assets off the wire until asked */ .deck-poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; border: 0; cursor: pointer; background: var(--project-ink); color: var(--chalk); font: inherit; text-align: center; padding: var(--space-4); } .deck-poster b { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1.05; } .deck-poster span { color: oklch(0.82 0.02 85); font-size: 0.9rem; max-width: 40ch; } .deck-poster .play { margin-top: var(--space-1); display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--project-accent); color: var(--chalk); font-weight: 600; } .deck-poster:focus-visible { outline: 3px solid var(--chalk); outline-offset: -6px; } .deck-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-2); font-size: 0.9rem; color: var(--color-muted); } .project-section--dark .deck-actions { color: oklch(0.8 0.02 85); } /* ---------- links ---------- */ .link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .link-list li { border-top: 1px solid color-mix(in oklab, var(--color-fg) 16%, transparent); } .link-list li:last-child { border-bottom: 1px solid color-mix(in oklab, var(--color-fg) 16%, transparent); } .link-list a, .link-list .is-disabled { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; text-decoration: none; color: inherit; font-family: var(--font-display); font-size: var(--step-1); transition: color 200ms var(--ease-out), padding-left 200ms var(--ease-out); } .link-list a:hover { color: var(--project-accent); padding-left: var(--space-1); } .link-list .is-disabled { color: var(--color-muted); } .link-list em { font-family: var(--font-body); font-style: normal; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); } /* ---------- prev / next ---------- */ .project-nav { display: grid; gap: var(--space-3); padding-block: var(--space-6); border-top: 1px solid color-mix(in oklab, var(--color-fg) 14%, transparent); } @media (min-width: 700px) { .project-nav { grid-template-columns: 1fr 1fr; } } .project-nav a { display: block; text-decoration: none; color: inherit; padding: var(--space-3); border-radius: var(--radius-md); background: color-mix(in oklab, var(--color-fg) 5%, transparent); transition: background 200ms var(--ease-out), transform 200ms var(--ease-out); } .project-nav a:hover { background: color-mix(in oklab, var(--project-accent) 12%, transparent); transform: translateY(-2px); } .project-nav .dir { display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; } .project-nav .name { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; line-height: 1.1; } .project-nav .next { text-align: right; } /* ============================================================ Work index ============================================================ */ .work-index-head { padding-block: clamp(var(--space-6), 10vw, var(--space-8)) var(--space-5); } .project-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); } @media (min-width: 720px) { .project-grid { grid-template-columns: repeat(2, 1fr); } } .project-card { position: relative; } .project-card a { display: flex; flex-direction: column; height: 100%; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); text-decoration: none; color: var(--chalk); background: var(--card-ink, var(--umber-deep)); transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out); } .project-card a:hover { transform: translateY(-4px); box-shadow: 0 14px 40px -18px rgb(0 0 0 / 0.6); } .project-card a:focus-visible { outline: 3px solid var(--card-accent, var(--brick)); outline-offset: 3px; } .project-card .tag { align-self: start; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px var(--space-1); border-radius: var(--radius-pill); background: var(--card-accent, var(--brick)); color: var(--chalk); } .project-card h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 600; line-height: 1; margin: var(--space-1) 0 0; } .project-card p { margin: 0; color: oklch(0.84 0.02 85); font-size: 0.95rem; max-width: 42ch; } .project-card .meta { margin-top: auto; padding-top: var(--space-3); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--card-accent, var(--brick)); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .project-card a:hover, .project-nav a:hover { transform: none; } .link-list a:hover { padding-left: 0; } } /* ============================================================ Home page — app-concepts block inside the dark .work section ============================================================ */ .home-concepts { margin-top: clamp(var(--space-6), 8vw, var(--space-7)); padding-top: var(--space-5); border-top: 1px solid oklch(1 0 0 / 0.16); } .section-subheading { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1; letter-spacing: -0.01em; } .home-concepts .project-card h4 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; line-height: 1; margin: var(--space-1) 0 0; } .home-concepts .section-note a { color: var(--chalk); text-underline-offset: 3px; } .work .project-card a { border: 1px solid oklch(1 0 0 / 0.14); }