/* ============================================ Sheft Farrace — Global Styles ============================================ */ /* Smooth cross-fade between pages (Chrome 126+, Edge; gracefully ignored elsewhere) */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: ease; } @font-face { font-family: 'Gerstner-Programm'; font-weight: 300; font-style: normal; font-display: swap; src: url('https://bfqlcbkcjyvjyvhlskyr.supabase.co/storage/v1/object/public/website-assets/fonts/Gerstner-ProgrammLight.woff2') format('woff2'); } @font-face { font-family: 'Gerstner-Programm'; font-weight: 400; font-style: normal; font-display: swap; src: url('https://bfqlcbkcjyvjyvhlskyr.supabase.co/storage/v1/object/public/website-assets/fonts/Gerstner-ProgrammRegular.woff2') format('woff2'); } @font-face { font-family: 'Gerstner-Programm'; font-weight: 500; font-style: normal; font-display: swap; src: url('https://bfqlcbkcjyvjyvhlskyr.supabase.co/storage/v1/object/public/website-assets/fonts/Gerstner-ProgrammMedium.woff2') format('woff2'); } :root { --bg: #FAFAF8; --text: #1a1a1a; --text-muted: #888; --nav-height: 0px; --footer-bg: #FAFAF8; --footer-text: #1a1a1a; } /* ---- Reset ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Gerstner-Programm', sans-serif; font-size: 12px; font-weight: 400; color: var(--text); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ============================================ Navigation — Left Sidebar ============================================ */ :root { --sidebar-w: 220px; --sidebar-pad: 24px; /* Top Y for all main content + nav items; logo sits above this line */ --content-top: 96px; } .site-nav { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; z-index: 1000; padding: var(--content-top) 0 var(--sidebar-pad) var(--sidebar-pad); background: var(--bg); } .nav-logo { position: absolute; top: 24px; left: var(--sidebar-pad); } .nav-logo img { height: auto; width: 160px; aspect-ratio: 700 / 102; } .nav-inner { display: flex; flex-direction: column; gap: 32px; height: 100%; } .nav-footer { margin-top: auto; display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 400; color: var(--text-muted); line-height: 1.6; padding-right: var(--sidebar-pad); } .nav-footer a { color: var(--text-muted); transition: color 0.3s ease; } .nav-footer a:hover { color: var(--text); } .nav-links, .sub-nav { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; } .nav-links a, .sub-nav a, .sub-nav button { font-family: inherit; font-size: 12px; font-weight: 400; color: var(--text-muted); background: none; border: none; padding: 0; cursor: pointer; text-align: left; transition: color 0.3s ease; } .nav-links a:hover, .sub-nav a:hover, .sub-nav button:hover { color: var(--text); } .nav-links a.active, .sub-nav a.active, .sub-nav button.active { color: var(--text); } /* Static active states (data attrs on ) — no JS needed */ body[data-page="projects"] .nav-links a[data-key="projects"], body[data-page="press"] .nav-links a[data-key="press"], body[data-page="about"] .nav-links a[data-key="about"], body[data-page="contact"] .nav-links a[data-key="contact"] { color: var(--text); } body[data-sub="in-progress"] .sub-nav a[data-sub="in-progress"] { color: var(--text); } /* Content area sits to the right of the sidebar */ body { padding-left: var(--sidebar-w); } /* Hamburger (mobile only) */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; position: absolute; top: 24px; right: 24px; } .hamburger span { display: block; width: 24px; height: 1.5px; background: var(--text); transition: transform 0.3s ease, opacity 0.3s ease; } /* Mobile: collapse sidebar to a hamburger top bar */ @media (max-width: 768px) { :root { --sidebar-w: 0px; --topbar-h: 56px; --content-top: calc(var(--topbar-h) + 16px); } body { padding-left: 0; padding-top: var(--topbar-h); } .site-nav { width: 100%; height: var(--topbar-h); padding: 0 24px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0; border-bottom: 1px solid rgba(0,0,0,0.06); } /* Logo back into flex flow on mobile */ .nav-logo { position: static; display: flex; align-items: center; } .nav-logo img { width: 120px; } .nav-inner { position: fixed; top: 0; right: -100%; width: 80%; max-width: 320px; height: 100vh; background: var(--bg); padding: calc(var(--topbar-h) + 24px) 32px 32px; z-index: 1000; transition: right 0.4s ease; gap: 32px; } .nav-inner.open { right: 0; } .hamburger { display: flex; position: static; z-index: 1001; } .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } } /* ============================================ Section Headings ============================================ */ .section-heading { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-bottom: 48px; } /* ============================================ Works List (Projects index) ============================================ */ .works-page { padding-top: var(--nav-height); } .works-list { display: flex; flex-direction: column; gap: 80px; padding: var(--content-top) 48px 120px; } /* Text on the left, image on the right */ .work-row { display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; text-decoration: none; color: inherit; } .work-meta { grid-column: 1; display: flex; flex-direction: column; gap: 4px; } .work-image { grid-column: 2; } .work-meta h2 { font-size: 12px; font-weight: 500; margin: 0; color: var(--text); } .work-meta p { font-size: 12px; font-weight: 400; color: var(--text-muted); line-height: 1.7; margin: 0; } /* Prose blocks (about/contact): space paragraphs apart */ .work-meta--prose p + p { margin-top: 12px; } /* Press + About: pin image cell to the same 16:9 footprint as the Trousdale hero, so press rows and the team photo all share the same scale as a project hero image. */ body[data-page="press"] .work-image, body[data-page="about"] .work-image { aspect-ratio: 16 / 9; width: 100%; } body[data-page="press"] .work-image img, body[data-page="about"] .work-image img { width: 100%; height: 100%; object-fit: contain; object-position: left center; } .work-meta a { color: var(--text); text-decoration: underline; } .work-image { overflow: hidden; max-width: 1000px; } .work-image img { width: 100%; height: auto; display: block; transition: opacity 0.3s ease; } .work-row:hover .work-image img { opacity: 0.88; } @media (max-width: 900px) { .works-list { gap: 56px; padding: var(--content-top) 24px 80px; } .work-row { grid-template-columns: 1fr; gap: 16px; } .work-meta, .work-image { grid-column: 1; } .work-meta { padding-top: 0; } } /* ============================================ Page Wrapper / Content ============================================ */ .page-content { padding: var(--content-top) 48px 96px; max-width: 1400px; margin: 0; } @media (max-width: 768px) { .page-content { padding: var(--content-top) 24px 64px; } } /* ============================================ Individual Project Pages ============================================ */ .project-page { padding: var(--content-top) 48px 96px; max-width: none; margin: 0; display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; } .project-info { display: flex; flex-direction: column; gap: 24px; /* Fixed to viewport (not just sticky) so it doesn't bounce with the macOS rubber-band overscroll. The 280px grid column above reserves the space so the layout still flows around it. */ position: fixed; top: var(--content-top); left: calc(var(--sidebar-w) + 48px); width: 280px; } .project-content { /* grid-column: 2 because .project-info is position: fixed (out of flow); without this, .project-content would auto-place into the first column and overlap the fixed title. */ grid-column: 2; display: flex; flex-direction: column; gap: 8px; max-width: 1000px; min-width: 0; } .project-back { display: inline-block; font-size: 12px; font-weight: 400; color: var(--text-muted); transition: color 0.3s ease; } .project-back:hover { color: var(--text); } .project-header h1 { font-size: 12px; font-weight: 500; margin: 0 0 4px; } .project-meta { display: flex; flex-direction: column; gap: 4px; } .project-meta span, .project-meta .meta-link { font-size: 12px; font-weight: 400; color: var(--text-muted); line-height: 1.6; } .project-meta .meta-link { transition: opacity 0.2s ease; } .project-meta .meta-link:hover { opacity: 0.55; } .project-description { margin-top: 12px; font-size: 12px; font-weight: 400; line-height: 1.7; color: var(--text); } /* Hero image — first child of .project-content (which itself is pinned to grid column 2) */ .project-hero { display: flex; justify-content: flex-start; } .project-hero img { max-width: 100%; max-height: calc(100vh - var(--content-top) - 48px); width: auto; height: auto; display: block; } .project-images { display: flex; flex-direction: column; gap: 8px; } .img-full img, .img-pair img { width: 100%; height: auto; display: block; vertical-align: bottom; } .img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .img-pair > div { background: var(--bg); } /* Gallery — 8-unit grid, left-to-right. Portrait = 1 unit, landscape = 2 units. Cell HEIGHT is pinned explicitly (col_width × 1.5) so both orientations share the exact same row height regardless of the inner gap a landscape spans. */ .project-gallery { container-type: inline-size; display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; grid-auto-flow: row dense; padding-top: 8px; } /* row height = (gallery_width − 7 gaps) / 8 cols × 1.5 */ .project-gallery a { display: block; overflow: hidden; cursor: pointer; grid-column: span 1; height: calc((100cqi - 7 * 8px) / 8 * 1.5); } .project-gallery a.landscape { grid-column: span 2; } .project-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.3s ease; } .project-gallery a:hover img { opacity: 0.85; } /* Collapse to single column on narrow viewports */ @media (max-width: 900px) { .project-page { grid-template-columns: 1fr; gap: 24px; } .project-info { /* Single-column layout: title lives above the content */ position: static; width: auto; } .project-content { grid-column: auto; max-width: none; } .project-hero { grid-column: auto; } .project-hero img { max-height: 80vh; } .project-gallery { grid-template-columns: repeat(4, 1fr); } .project-gallery a { height: calc((100cqi - 3 * 8px) / 4 * 1.5); } } @media (max-width: 768px) { .project-page { padding: var(--content-top) 24px 64px; } .img-pair { grid-template-columns: 1fr; } } @media (max-width: 480px) { .project-gallery { grid-template-columns: repeat(2, 1fr); } .project-gallery a { height: calc((100cqi - 8px) / 2 * 1.5); } } /* ============================================ Lightbox ============================================ */ .lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; cursor: pointer; } .lightbox.open { opacity: 1; pointer-events: auto; } .lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; user-select: none; } .lightbox-close { position: fixed; top: 24px; right: 24px; width: 32px; height: 32px; background: none; border: none; cursor: pointer; padding: 0; z-index: 2001; } .lightbox-close::before, .lightbox-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 22px; height: 1px; background: rgba(255, 255, 255, 0.7); transform-origin: center; transition: background 0.2s ease; } .lightbox-close::before { transform: translate(-50%, -50%) rotate(45deg); } .lightbox-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .lightbox-close:hover::before, .lightbox-close:hover::after { background: #fff; } .lightbox-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; background: none; border: none; cursor: pointer; padding: 0; z-index: 2001; display: flex; align-items: center; justify-content: center; } .lightbox-arrow svg { width: 24px; height: 24px; stroke: rgba(255, 255, 255, 0.7); transition: stroke 0.2s ease; } .lightbox-arrow:hover svg { stroke: #fff; } .lightbox-arrow--prev { left: 24px; } .lightbox-arrow--next { right: 24px; } body.lightbox-open { overflow: hidden; } /* ============================================ Splash Page (index.html) ============================================ */ .splash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; cursor: pointer; } .splash-bg { position: absolute; inset: 0; z-index: 0; } .splash-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease; } .splash-slide.active { opacity: 1; } .splash::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); z-index: 1; } .splash-logo { position: relative; z-index: 2; width: min(340px, 60vw); height: auto; aspect-ratio: 700 / 102; filter: brightness(0) invert(1); opacity: 0; animation: fadeIn 1.2s ease 0.3s forwards; } @keyframes fadeIn { to { opacity: 1; } } .splash.leaving { animation: fadeOut 0.6s ease forwards; } @keyframes fadeOut { to { opacity: 0; } } /* ============================================ Footer ============================================ */ .site-footer { background: var(--footer-bg); color: var(--text-muted); margin-top: 96px; padding: 32px 48px; border-top: 1px solid rgba(0,0,0,0.06); display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 28px; font-size: 12px; font-weight: 400; } .site-footer a { color: var(--text-muted); transition: color 0.3s ease; } .site-footer a:hover { color: var(--text); opacity: 1; } @media (max-width: 768px) { .site-footer { flex-direction: column; align-items: flex-end; gap: 12px; padding: 32px 24px; } }