/* ============================================================== home.css — the homepage (index.html). Self-contained: fonts, reset, tokens, then the layout. Case study pages use styles.css instead. ============================================================== */ @font-face { font-family: "GT Standard"; src: url("assets/fonts/GT-Standard-L-Standard-Regular.woff2") format("woff2"), url("assets/fonts/GT-Standard-L-Standard-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: "GT Standard"; src: url("assets/fonts/GT-Standard-L-Standard-Medium.woff2") format("woff2"), url("assets/fonts/GT-Standard-L-Standard-Medium.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: block; } @font-face { font-family: "GT Standard"; src: url("assets/fonts/GT-Standard-L-Standard-Bold.woff2") format("woff2"), url("assets/fonts/GT-Standard-L-Standard-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: block; } @font-face { font-family: "BoogyBrutPoster-White"; src: url("assets/fonts/BoogyBrutPoster-White.woff2") format("woff2"), url("assets/fonts/BoogyBrutPoster-White.otf") format("opentype"); font-display: block; } @font-face { font-family: "Dinamit-Regular"; src: url("assets/fonts/Dinamit-Regular.woff2") format("woff2"), url("assets/fonts/Dinamit-Regular.otf") format("opentype"); font-display: block; } @font-face { font-family: "Dinamit-Thin"; src: url("assets/fonts/Dinamit-Thin.woff2") format("woff2"), url("assets/fonts/Dinamit-Thin.otf") format("opentype"); font-display: block; } :root { --bg: #ffffff; --ink: #292a2c; --muted: #77777a; --faint: #b3b3b6; --line: #e6e6e6; --wash: #f4f3f0; --font-display: "BoogyBrutPoster-White", Georgia, serif; --font-din: "Dinamit-Regular", "Helvetica Neue", sans-serif; --font-din-thin: "Dinamit-Thin", "Helvetica Neue", sans-serif; --font-body: "GT Standard", "Open Sans", Arial, sans-serif; --gut: clamp(20px, 4vw, 40px); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: var(--ink); color: var(--bg); } .label { font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; } /* Marks copy that is a placeholder for Erin to replace. */ .todo { color: var(--muted); border-bottom: 1px dashed var(--faint); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- entrance on first load ---------- With JS running, the top of the page holds (visibility: hidden) until index.html adds .ready to : fonts loaded, desk laid out. Then everything fades up in sequence: header, hello lines, cards one by one, hint last. Without JS the .js class is never set and the page simply renders. Reduced motion: the animations are off (above), so things just appear once ready. */ @keyframes rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } } @keyframes settle { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } } .js:not(.ready) .top, .js:not(.ready) .hello, .js:not(.ready) .pile, .js:not(.ready) .hint { visibility: hidden; } .ready .top { animation: rise 0.6s cubic-bezier(.2,.8,.2,1) both; } .ready .hello > * { animation: rise 0.7s cubic-bezier(.2,.8,.2,1) both; } .ready .hello > :nth-child(2) { animation-delay: 90ms; } .ready .hello > :nth-child(3) { animation-delay: 180ms; } .ready .hello > :nth-child(4) { animation-delay: 270ms; } .ready .card { animation: settle 0.5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(120ms + var(--i, 0) * 25ms); } .ready .hint { animation: rise 0.5s cubic-bezier(.2,.8,.2,1) both; animation-delay: 500ms; } /* ---------- layout: hero desk, selected-work rail, all-work list, about ---------- */ body { overflow-x: hidden; } .top, .desk, .rail-head, .index, .about, .bottom { padding-left: var(--gut); padding-right: var(--gut); } .top { display: flex; justify-content: space-between; align-items: baseline; padding-top: 22px; padding-bottom: 16px; } .logo { font-family: var(--font-display); font-size: 22px; white-space: nowrap; } .top nav { display: flex; gap: 28px; } .top nav a:hover { color: var(--muted); } @media (max-width: 480px) { .top nav { gap: 14px; font-size: 10px; } } /* ================= desk ================= */ .desk { position: relative; min-height: calc(100vh - 80px); padding-top: 16px; padding-bottom: 40px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 22px 22px; transition: min-height 0.6s cubic-bezier(.2,.8,.2,1); /* grows with the By year columns */ } .hello { position: relative; z-index: 2; padding-top: clamp(24px, 6vh, 72px); pointer-events: none; } .hello h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 6.4vw, 96px); line-height: 0.95; letter-spacing: -0.005em; white-space: nowrap; } .hello .line { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.16; margin-top: 22px; max-width: 22ch; } .hello .line .din { font-family: var(--font-din); font-size: 0.92em; } .hello .line .din-thin { font-family: var(--font-din-thin); font-size: 0.95em; } .hero-lists { display: flex; flex-wrap: wrap; gap: 16px clamp(32px, 4vw, 64px); margin-top: 32px; } .hero-lists ul { list-style: none; } .hero-lists li { position: relative; padding: 4px 0 4px 28px; font-size: 16px; line-height: 1.5; } .hero-lists li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 16px; height: 1px; background: var(--ink); } .hero-lists li ul { margin-top: 4px; } .hero-lists li li { padding-left: 22px; color: var(--muted); font-size: 15px; } .hero-lists li li::before { width: 10px; background: var(--muted); } .modes { display: flex; gap: 6px; margin-top: 28px; pointer-events: auto; } .modes button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); transition: all 0.15s; } .modes button:hover { color: var(--ink); border-color: var(--ink); } .modes button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); } .hint { position: absolute; right: var(--gut); bottom: 12px; z-index: 2; color: var(--muted); } .pile { position: relative; z-index: 1; } .card { display: block; cursor: grab; user-select: none; perspective: 1200px; will-change: transform; } .card .inner { position: relative; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(.2,.8,.2,1); } .card.flipped .inner { transform: rotateY(180deg); } .face { backface-visibility: hidden; background: #fff; padding: 6px; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 8px 20px rgba(0,0,0,0.06); transition: box-shadow 0.25s ease; } .face.front img, .face.front video { width: 100%; height: auto; display: block; pointer-events: none; border-radius: 3px; } /* height: auto so the width/height attributes only set the aspect ratio */ .face.front video { aspect-ratio: 16 / 9; object-fit: cover; background: var(--wash); } /* unflipped: the media sets the height and the back hides behind it. flipped: the back sets the height (so blurbs fit) and the media hides behind. */ .face.back { position: absolute; inset: 0; overflow: hidden; } .card.flipped .face.back { position: relative; inset: auto; overflow: visible; } .card.flipped .face.front { position: absolute; inset: 0; } .card.flipped .face.front img, .card.flipped .face.front video { height: 100%; object-fit: cover; } .face.back { transform: rotateY(180deg); background: var(--ink); color: var(--bg); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; } .face.back .label { color: rgba(255,255,255,0.5); } .face.back h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.1; } .face.back p:not(.label) { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.85); } .face.back .open { margin-top: auto; padding-top: 10px; color: var(--bg); align-self: flex-start; border-bottom: 1px solid rgba(255,255,255,0.4); } .face.back .open:hover { border-color: #fff; } .card.lift { cursor: grabbing; } .card.lift .face { box-shadow: 0 3px 6px rgba(0,0,0,0.06), 0 16px 36px rgba(0,0,0,0.10); } @media (min-width: 720px) { .hello { position: absolute; left: var(--gut); top: 0; width: 40%; padding-top: clamp(28px, 6vh, 72px); } .pile { position: absolute; left: var(--gut); right: var(--gut); top: 24px; bottom: 40px; } .card { position: absolute; left: 0; top: 0; } } @media (max-width: 719px) { .desk { min-height: 0; padding-bottom: 24px; } .pile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; align-items: start; } .card { transform: rotate(-2deg); } .card:nth-child(even) { transform: rotate(2deg); } .modes, .hint { display: none; } } #cursor-tag { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; background: var(--ink); color: var(--bg); font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.12s; } #cursor-tag.on { opacity: 1; } #cursor-tag b { font-weight: 600; } #cursor-tag span { opacity: 0.6; } @media (hover: none) { #cursor-tag { display: none; } } /* ================= rail ================= */ .rail-wrap { padding-top: 48px; padding-bottom: 8px; } .rail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .rail-head .label { color: var(--muted); } .rail-nav { display: flex; gap: 6px; } .rail-nav button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; font-size: 14px; color: var(--ink); transition: border-color 0.15s; } .rail-nav button:hover { border-color: var(--ink); } .rail { display: flex; gap: 24px; padding: 0 var(--gut) 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rail::-webkit-scrollbar { display: none; } .rail.grab { cursor: grabbing; } .rail.grab .rcard { pointer-events: none; } .rail:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; } .rcard { flex: 0 0 auto; width: min(560px, 82vw); user-select: none; -webkit-user-drag: none; } .rcard .media { aspect-ratio: 16 / 9; background: var(--wash); overflow: hidden; border-radius: 4px; } .rcard .media img, .rcard .media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); } .rcard .media.fit img { object-fit: contain; } .rcard:hover .media img, .rcard:hover .media video { transform: scale(1.02); } .rcard .cap { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding-top: 12px; align-items: baseline; } .rcard h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.1; } .rcard p { grid-column: 1 / -1; font-size: 14px; color: var(--muted); text-wrap: pretty; } /* full card width, no orphans */ .rcard .pills { grid-column: 2; grid-row: 1; display: flex; gap: 4px; } .rcard .pills span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-weight: 400; letter-spacing: 0.8px; font-size: 10px; } @media (max-width: 600px) { .rcard .cap { grid-template-columns: 1fr; } .rcard .pills { grid-column: 1; grid-row: auto; margin-top: 6px; order: 3; } } /* ================= all work ================= */ .index { padding-top: 56px; padding-bottom: 16px; } .controls { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; padding: 14px 0; border-top: 1px solid var(--ink); } .controls > p.label { color: var(--muted); margin-right: auto; } .filters { margin-right: -10px; } /* pill padding lines the last label up with the table edge */ .filters { display: flex; gap: 4px; } .filters button { padding: 5px 10px; border: 1px solid transparent; border-radius: 999px; color: var(--muted); } .filters button:hover { color: var(--ink); } .filters button.on { color: var(--ink); border-color: var(--ink); } .row { display: grid; grid-template-columns: 84px minmax(160px, 1.1fr) minmax(220px, 2fr) minmax(120px, 0.9fr) 24px; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; } .row.head { color: var(--muted); font-size: 11px; padding: 10px 0; border-top: 1px solid var(--line); } .row[hidden] { display: none; } .row .yr { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; visibility: hidden; } .row.first .yr { visibility: visible; } .row.first { border-top-color: var(--faint); } .row .name { font-family: var(--font-display); font-size: 26px; line-height: 1.1; } .row .what small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; letter-spacing: 0.2px; } .row .with { color: var(--muted); font-size: 14px; } .row .arrow { text-align: right; color: var(--faint); transition: color 0.15s, transform 0.15s; } a.row:hover { background: var(--wash); box-shadow: 0 0 0 10px var(--wash); } a.row:hover .arrow { color: var(--ink); transform: translateX(3px); } .table > .row:last-child { border-bottom: 1px solid var(--ink); } @media (max-width: 860px) { .row { grid-template-columns: 64px 1fr; gap: 2px 12px; } .row .yr { grid-row: 1 / 4; align-self: start; } .row .what, .row .with { grid-column: 2; } .row .arrow { display: none; } .row.head span:nth-child(n+3) { display: none; } } #peek { position: fixed; left: 0; top: 0; z-index: 50; width: 300px; background: #fff; padding: 6px; border-radius: 6px; /* same frame as the hero cards */ pointer-events: none; opacity: 0; scale: 0.96; transition: opacity 0.18s ease, scale 0.18s ease; box-shadow: 0 12px 40px rgba(0,0,0,0.14); } #peek.on { opacity: 1; scale: 1; } #peek img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 3px; background: var(--wash); } /* ================= about / footer ================= */ .about { display: grid; grid-template-columns: 1fr; gap: 28px; padding-top: 56px; padding-bottom: 40px; } .portrait { width: 100%; max-width: 280px; } .about .label { color: var(--muted); margin-bottom: 16px; } .about p:not(.label):not(.cta) { max-width: 60ch; } .about .find { margin-top: 14px; } .about .find a { border-bottom: 1px solid var(--faint); } .about .find a:hover { border-color: var(--ink); } .cta { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; margin-top: 32px; max-width: 20ch; } .cta a { border-bottom: 1px solid var(--ink); } /* same grid as an All-work row, so the text starts on the "What" column and the portrait fills Year + Project */ @media (min-width: 900px) { .about { grid-template-columns: 84px minmax(160px, 1.1fr) minmax(220px, 2fr) minmax(120px, 0.9fr) 24px; gap: 16px; align-items: start; } .portrait { grid-column: 1 / 3; max-width: none; border-radius: 6px; } .about > div { grid-column: 3 / -1; } } .bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: 0 var(--gut); padding: 24px 0 36px; border-top: 1px solid var(--ink); color: var(--muted); } .bottom .links { display: flex; gap: 24px; } .bottom a:hover { color: var(--ink); }