:root { --spacing-s: 5px; --spacing-m: 10px; --spacing-l: 30px; --ease-standard: cubic-bezier(0.19, 1, 0.22, 1); --font-primary: "Saltburn-Regular", Helvetica, sans-serif; --font-serif: "Garamono-Regular", serif; --font-serif-italic: "Garamono-Regular-Italic", serif; --color-ink: black; --color-paper: white; --color-muted-bg: #6f6f6f; --color-muted-text: #767676; } /* registered so it interpolates continuously (see body.gallery-page) */ @property --gallery-left-col { syntax: ""; inherits: true; initial-value: 50%; } /* same fix, for the main build/bild split (rides on ) */ @property --main-left-col { syntax: ""; inherits: true; initial-value: 50%; } * { box-sizing: border-box; margin: 0; padding: 0; scrollbar-width: none; } *::-webkit-scrollbar { display: none; } @font-face { font-family: "Saltburn-Regular"; src: url(../fonts/WTSaltburnTRIAL-Regular.otf) format("opentype"); font-display: swap; } @font-face { font-family: "Garamono-Regular-Italic"; src: url(../fonts/WTGaramonoTRIAL-Italic.otf) format("opentype"); font-display: swap; } @font-face { font-family: "Garamono-Regular"; src: url(../fonts/WTGaramonoTRIAL-Regular.otf) format("opentype"); font-display: swap; } body { overflow: hidden; height: 100vh; height: 100dvh; display: flex; flex-direction: column; font-family: var(--font-primary); background: var(--color-paper); font-size: 13px; line-height: 1.1; --main-left-col: calc(50% - 0.5px); /* neutral, mirrors 1fr 1px 1fr */ transition: --main-left-col 0.5s var(--ease-standard); } h1, h2, h3, h4, h5, h6, a, p, span, button, input, select, textarea { font-size: inherit; line-height: inherit; } a { color: blue; text-decoration: underline; } .top-nav { position: relative; display: grid; grid-template-columns: var(--main-left-col) 1px 1fr; align-items: baseline; width: 100vw; border-bottom: 1px solid var(--color-ink); background: transparent; z-index: 1000; /* the --main-left-col transition on drives the glide */ } .nav-back { position: absolute; left: var(--spacing-s); top: 50%; transform: translateY(-50%); color: var(--color-ink); text-decoration: none; line-height: 1; cursor: pointer; transition: opacity 0.2s; } .nav-back:hover { opacity: 0.6; } .nav-column { display: flex; align-items: baseline; } .nav-column-build { justify-content: flex-end; padding: var(--spacing-s) .1em; } .nav-column-bild { justify-content: flex-start; padding: var(--spacing-s) .1em; } .grid-line-header { background: transparent; align-self: stretch; height: 100%; width: 1px; } /* Sync header and grid column resizing */ body.active-build { --main-left-col: 90%; /* mirrors 9fr 1px 1fr */ } body.active-bild { --main-left-col: 10%; /* mirrors 1fr 1px 9fr */ } .nav-item { cursor: pointer; transition: all 0.1s ease-in-out; -webkit-user-select: none; user-select: none; color: var(--color-ink); } body:has(.intro-hero:not(.hidden)) .nav-item, body:has(.intro-hero:not(.hidden)) .nav-back { visibility: hidden; } /* neutralize .top-nav's opaque bg/border so it doesn't clip the hero title */ body:has(.intro-hero:not(.hidden)) .top-nav { background: transparent; border-bottom-color: transparent; } .nav-item:hover, .nav-item.active { color: #111; } .serif-italic { font-family: var(--font-serif-italic); } .intro-hero { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background: #fcfcfc; z-index: 500; transition: opacity 0.8s var(--ease-standard), transform 0.8s var(--ease-standard), visibility 0.8s var(--ease-standard); opacity: 1; pointer-events: auto; visibility: visible; } .intro-hero.hidden { opacity: 0; transform: scale(1.02); pointer-events: none !important; visibility: hidden; } /* empty by design -- paint-order anchor for .hero-overlay */ .intro-hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .portfolio-grid { display: grid; grid-template-columns: var(--main-left-col) 1px 1fr; flex: 1; height: calc(100vh - 5vh); height: calc(100dvh - 5dvh); width: 100vw; /* the --main-left-col transition on drives the glide */ } .grid-line { background: var(--color-ink); height: 100%; } .column { height: 100%; overflow-y: auto; } .column-bild { font-family: var(--font-serif); & h3 { font-family: var(--font-serif-italic); } & .date { font-family: var(--font-serif); } } .column-inner { transition: opacity 0.6s var(--ease-standard); opacity: 1; min-width: calc(50vw - var(--spacing-m)); } .portfolio-grid.active-build .column-bild .column-inner, .portfolio-grid.active-bild .column-build .column-inner { opacity: 0.1; } body:has(.bottom-nav-drawer.expanded) .column-inner { opacity: 0.1; /* while drawer is open, clicks should only close it, not open content underneath */ pointer-events: none; } /* Gallery pages: text column stops at 65ch when active, project column keeps the rest; collapses to a 10% sliver otherwise. Desktop only. */ @media (min-width: 701px) { body.gallery-page .top-nav, body.gallery-page .portfolio-grid { grid-template-columns: var(--gallery-left-col) 1px 1fr; transition: none; /* the custom-property transition on drives the glide */ } body.gallery-page { --gallery-left-col: calc(50% - 0.5px); /* neutral, mirrors 1fr 1px 1fr */ transition: --gallery-left-col 0.5s var(--ease-standard); } body.gallery-page.active-build { --gallery-left-col: calc(65ch + 2 * var(--spacing-s)); } body.gallery-page.active-bild { --gallery-left-col: 10%; /* mirrors 1fr 1px 9fr */ } /* override .column-inner's min-width so it doesn't overflow the narrow text track */ body.gallery-page .portfolio-grid.active-build .column-build .column-inner { min-width: 0; } /* keep the project column live instead of dimming it like the homepage does */ body.gallery-page .portfolio-grid.active-build .column-bild .column-inner { opacity: 1; } body.gallery-page .portfolio-grid.active-build .column-bild { overflow-y: auto; cursor: auto; } body.gallery-page .portfolio-grid.active-build .column-bild .pdf-viewer { pointer-events: auto; } /* re-block clicks when drawer opens, since the rule above outranks the drawer rule -- a body class kept in sync by toggleDrawer()/closeDrawer() (footer.php), not :has(), since :has() support only reaches back to Safari 16.4 */ body.gallery-page.drawer-expanded .portfolio-grid.active-build .column-bild .pdf-viewer { pointer-events: none; } } .portfolio-grid.active-build .column-bild, .portfolio-grid.active-bild .column-build { overflow: hidden; cursor: pointer; } /* prevent stray scroll on the clipped sliver from leaving it mid-scroll when reopened */ .portfolio-grid.active-build .column-bild .pdf-viewer, .portfolio-grid.active-bild .column-build .pdf-viewer { pointer-events: none; } .project-container { margin-bottom: 10vh; padding: var(--spacing-s); } .project-container:first-child { border-top: none; } /* Timeline Sync: single scrollable track replacing the two columns, one grid row per timeline row (build cell, divider, bild cell) */ .timeline-sync-track { display: none; grid-column: 1 / -1; grid-template-columns: 1fr 1px 1fr; grid-auto-rows: auto; align-items: start; row-gap: 0; height: 100%; overflow-y: auto; } /* override default min-width:auto so the 1fr tracks split 50/50 instead of stretching to .pdf-viewer's full intrinsic width */ .timeline-sync-track>* { min-width: 0; } .portfolio-grid.timeline-sync-mode>.column, .portfolio-grid.timeline-sync-mode>.grid-line { display: none; } .portfolio-grid.timeline-sync-mode .timeline-sync-track { display: grid; } .project-meta { margin-top: var(--spacing-m); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--spacing-l); row-gap: 0; } .project-container h3 { font-weight: 200; } .project-description { flex: 1 1 auto; min-width: 55ch; max-width: 65ch; overflow-wrap: break-word; margin-bottom: 13px; } .pdf-viewer { display: flex; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; overflow-anchor: none; scroll-snap-type: x mandatory; touch-action: pan-x pan-y; overscroll-behavior-x: contain; gap: var(--spacing-s); width: 100%; height: 75vh; height: 75dvh; align-items: flex-end; transition: height 0.5s var(--ease-standard); } /* wrapper + edge zones built in footer.php; real elements (not a JS style.cursor rewrite) so Safari repaints the cursor at the 10% boundary */ .pdf-viewer-frame { position: relative; /* -webkit-user-select: none; user-select: none; */ } .pdf-edge { display: none; position: absolute; top: 0; bottom: 0; width: 10%; z-index: 2; } .pdf-edge-prev { left: 0; } .pdf-edge-next { right: 0; } .pdf-viewer img { flex: 0 0 auto; scroll-snap-align: start; /* background: var(--color-muted-bg); */ object-fit: contain; width: auto; height: 100%; transition: height 0.5s var(--ease-standard); } body.no-initial-transition, /* --main-left-col / --gallery-left-col both ride on */ body.no-initial-transition .top-nav, body.no-initial-transition .portfolio-grid, body.no-initial-transition .pdf-viewer, body.no-initial-transition .pdf-viewer img { transition: none !important; } @media (min-width: 701px) { .pdf-viewer img, .pdf-viewer .pdf-slide { cursor: pointer; } .pdf-viewer-frame.can-prev .pdf-edge-prev, .pdf-viewer-frame.can-next .pdf-edge-next { display: block; cursor: none; } } /* The "Previous"/"Next" text that follows the pointer in a carousel's left/right edge zones (footer.php positions it). */ .viewer-hover-label { position: fixed; top: 0; left: 0; display: none; pointer-events: none; z-index: 1000; padding: var(--spacing-s) var(--spacing-m); color: var(--color-ink); white-space: nowrap; transform: translate(-50%, -50%); } .viewer-hover-label.visible { display: block; } .viewer-hover-label-serif { font-family: var(--font-serif); } .bottom-nav-drawer { position: fixed; bottom: 0; left: 0; width: 100vw; height: auto; max-height: 2rem; overflow: hidden; background: var(--color-paper); border-top: 1px solid var(--color-ink); transition: max-height 0.6s var(--ease-standard); z-index: 100; } .bottom-nav-drawer.expanded { max-height: 90vh; max-height: 90dvh; } .drawer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; height: 100%; width: 100%; } .drawer-column { overflow-y: auto; } .drawer-title { cursor: pointer; color: var(--color-ink); font-family: var(--font-primary); -webkit-user-select: none; user-select: none; padding: var(--spacing-s); transition: all 0.1s ease-in-out; } .drawer-title:hover, .drawer-title:active { font-weight: 400; } .bottom-nav-drawer.expanded .drawer-title { border-bottom: 1px solid var(--color-ink); } .drawer-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-standard); pointer-events: none; max-width: 450px; } .bottom-nav-drawer.expanded .drawer-content { grid-template-rows: 1fr; pointer-events: auto; } .drawer-content-inner { overflow: hidden; padding: var(--spacing-s); opacity: 0; transform: translateY(10px); & p { margin-top: 0; margin-bottom: var(--spacing-s); text-wrap: balance; } } .bottom-nav-drawer.expanded .drawer-content-inner { opacity: 1; transform: translateY(0); } .format-btn { cursor: pointer; display: block; transition: opacity 0.2s; } .format-btn:hover, .format-btn:active, .format-btn.active { text-decoration: underline; } /* ========================================================================== PRIVATE PITCH PAGES ========================================================================== */ body.private-pitch-page .intro-hero { display: none !important; } /* ========================================================================== PDF SLIDES ========================================================================== */ .pdf-slide { position: relative; display: flex; align-items: flex-end; flex: 0 0 auto; height: 100%; scroll-snap-align: start; } .pdf-slide-placeholder { display: flex; align-items: center; justify-content: center; width: 240px; height: 100%; padding: var(--spacing-m); background: var(--color-muted-bg); text-align: center; color: var(--color-ink); } /* ========================================================================== REFERENCES GRID ========================================================================== */ .references-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(220px, (100% - 4 * var(--spacing-l)) / 5), 1fr)); gap: var(--spacing-l); padding: var(--spacing-m); width: 100%; margin-bottom: var(--spacing-l); } .ref-card { text-decoration: none; color: var(--color-ink); display: flex; flex-direction: column; min-width: 0; transition: opacity 0.3s ease, transform 0.3s ease, width 0.5s var(--ease-standard); /* native-ratio images reflow on every frame of the build/bild column-width transition; skip that work for cards scrolled out of view so only the visible handful need to re-layout per frame */ content-visibility: auto; contain-intrinsic-size: auto 300px; } .ref-card:hover, .ref-card:active { opacity: 0.8; } /* Are.na "Text" blocks (references-grid.php) render as non-clickable cards -- no pointer cursor or hover fade, since there's nothing to click through to */ .ref-card-text { cursor: default; } .ref-card-text:hover, .ref-card-text:active { opacity: 1; } .ref-image-wrapper { width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: width 0.5s var(--ease-standard), height 0.5s var(--ease-standard); } .ref-image-wrapper img { width: 100%; height: auto; object-fit: contain; transition: transform 0.5s ease; display: block; } .ref-card:hover .ref-image-wrapper img, .ref-card:active .ref-image-wrapper img { transform: scale(1.03); } .ref-meta { margin-top: var(--spacing-m); } .ref-meta h4 { font-weight: 200; margin: 0; overflow-wrap: break-word; } .ref-desc { margin-top: var(--spacing-s); max-width: 60ch; overflow-wrap: break-word; } .ref-desc p { margin-bottom: var(--spacing-s); } .ref-desc p:last-child { margin-bottom: 0; } /* ========================================================================== LEGAL PAGE TEXT ========================================================================== */ /* paragraph spacing sized to type (1lh); lists get the same gap plus indent stripped by the global `* { padding: 0 }` reset */ .legal-text p { margin-bottom: 1lh; } .legal-text p:last-child { margin-bottom: 0; } .legal-text ul { margin-bottom: 1lh; padding-left: 1.2em; } .legal-text ul:last-child { margin-bottom: 0; } /* ========================================================================== HERO TYPOGRAPHY OVERLAY ========================================================================== */ .hero-custom-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; /* no z-index: would create a stacking context and break .hero-title's mix-blend-mode */ /* no pointer-events: inherits auto/none from .intro-hero(.hidden) */ } .hero-click-half { position: relative; height: 100%; cursor: pointer; display: flex; } .hero-left { align-items: flex-start; justify-content: flex-start; padding: var(--spacing-l); } .hero-right { align-items: flex-end; justify-content: flex-end; padding: var(--spacing-l); } .hero-title { color: var(--color-paper); font-size: clamp(3.5rem, 5vw, 7rem); line-height: 1; font-weight: normal; -webkit-user-select: none; user-select: none; mix-blend-mode: difference; } /* ========================================================================== EXTRACTED UTILITIES & CLASSES ========================================================================== */ .references-link { text-decoration: none; display: block; margin-top: var(--spacing-s); } .format-reset-btn { margin-top: var(--spacing-m); color: var(--color-muted-text); } .settings-group+.settings-group { margin-top: var(--spacing-m); } .settings-label { display: block; color: var(--color-muted-text); } .placeholder-text { opacity: 0.5; padding: var(--spacing-m); } [role="button"]:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; } .hero-media { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; } .hero-orientation { width: 100%; height: 100%; } .hero-media-split { display: flex; width: 100%; height: 100%; } .hero-media-split-half { flex: 1 1 50%; height: 100%; overflow: hidden; } .hero-orientation-portrait { display: none; } @media (orientation: portrait) { .hero-orientation-landscape { display: none; } .hero-orientation-portrait { display: block; } } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== MOBILE (placed last to win the cascade) ========================================================================== */ @media (max-width: 700px) { /* let the real document scroll so the address bar auto-hides on scroll */ body { height: auto; overflow-x: hidden; overflow-y: visible; } .portfolio-grid { height: auto; } /* active column flows normally; inactive column stays pinned via sticky */ .portfolio-grid.active-build .column-build, .portfolio-grid.active-bild .column-bild { overflow-y: visible; height: auto; } .portfolio-grid.active-build .column-bild, .portfolio-grid.active-bild .column-build { height: 100vh; height: 100dvh; position: sticky; top: 0; } /* Timeline Sync needs the both-columns-visible state, unavailable on mobile */ .settings-group:has(.timeline-option) { display: none; } .top-nav { position: sticky; top: 0; background: var(--color-paper); } /* the 15%-wide collapsed column leaves no room for "Home/" -- span it full-width on its own row instead */ .nav-back { position: static; grid-column: 1 / -1; display: block; padding: var(--spacing-s) var(--spacing-s) 0; transform: none; } .drawer-column:first-child .drawer-title { display: flex; align-items: center; height: 100%; padding: var(--spacing-s); border-top: 1px solid var(--color-ink); } .drawer-column:not(:first-child) .drawer-title { display: grid; grid-template-rows: 0fr; padding: var(--spacing-s); transition: grid-template-rows 0.6s var(--ease-standard); } .bottom-nav-drawer.expanded .drawer-column:not(:first-child) .drawer-title { grid-template-rows: 1fr; border-top: 1px solid var(--color-ink); } .drawer-title-text { overflow: hidden; } body.active-build { --main-left-col: 85%; /* mirrors 85fr 1px 15fr */ } body.active-bild { --main-left-col: 15%; /* mirrors 15fr 1px 85fr */ } .drawer-grid { display: block; } .drawer-column:last-child { display: none; } .bottom-nav-drawer { border-top: none; padding-bottom: var(--spacing-m) } .project-meta { display: block; } .project-meta>*+* { margin-top: var(--spacing-s); } .project-description { min-width: 0; } .pdf-viewer { height: fit-content; } .references-grid { grid-template-columns: 1fr; } /* extra space so content can clear the fixed 2rem-tall drawer */ .project-container:last-child { margin-bottom: calc(10vh + 2rem); margin-bottom: calc(10dvh + 2rem); } .pdf-slide, .pdf-viewer>img { width: 90%; height: auto; background: none; } .pdf-slide img { display: block; width: 100%; height: auto; } .pdf-slide-placeholder { width: 100%; aspect-ratio: 210 / 297; background: none; } .hero-left, .hero-right { padding: var(--spacing-m); } .hero-title { font-size: clamp(1.75rem, 11.7vw, 3.5rem); } }