/* =========================================================================== KVK portfolio — public site styles --------------------------------------------------------------------------- Minimal, editorial, image-first. Inspired by jonaslutz.com. Three public pages share this file: /home.html, /about.html, /work/index.html. =========================================================================== */ :root { --pf-bg: #F5EFE8; /* Derived from --pf-bg with a tiny dark nudge so placeholder tiles and the gallery background track whatever bg the user picks. */ --pf-bg-alt: color-mix(in srgb, var(--pf-bg) 94%, black 6%); --pf-surface: #FFFFFF; --pf-text: #2A221D; --pf-text-soft: #4A3E34; --pf-muted: #8B7A6C; --pf-accent: #8B5A3C; --pf-accent-soft: rgba(139,90,60,0.08); --pf-accent-hover:#6F4730; --pf-border: rgba(42,34,29,0.10); --pf-border-strong: rgba(42,34,29,0.20); /* Default = Geist everywhere. The serif option (toggled via the settings tool) swaps `--pf-display` to PP Editorial New for titles while keeping Geist for body text — Editorial New is a display typeface, not meant for paragraphs. */ --pf-display: 'Geist', system-ui, -apple-system, sans-serif; --pf-serif: 'Geist', system-ui, -apple-system, sans-serif; --pf-sans: 'Geist', system-ui, -apple-system, sans-serif; --pf-mono: 'DM Mono', 'SF Mono', monospace; } /* Serif-mode override — applied when the element gets the .pf-font-serif class (set by the portfolio-theme replay script when the user picks "Fraunces" in settings). */ :root.pf-font-serif { --pf-display: 'Fraunces', Georgia, serif; --pf-serif: 'Fraunces', Georgia, serif; } /* Height of the fixed top bar — used to push page content clear of the bar. Shrinks on mobile where the bar is tighter. */ :root { --pf-bar-h: 68px; } @media (max-width: 640px) { :root { --pf-bar-h: 52px; } } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body.pf { background: var(--pf-bg); color: var(--pf-text); font-family: var(--pf-sans); font-size: 16px; line-height: 1.6; /* Shift all non-fixed content down past the bar. The work detail gallery is `position: fixed` so it ignores this padding and still covers the full viewport — that's intentional. */ padding-top: var(--pf-bar-h); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.pf a { color: inherit; text-decoration: none; } body.pf img { max-width: 100%; height: auto; display: block; } /* Stop iOS Safari from auto-zooming on input focus. Anything under 16px triggers the zoom; matching the body size disables it. */ @media (max-width: 768px) { body.pf input, body.pf textarea, body.pf select { font-size: 16px; } } body.pf h1, body.pf h2, body.pf h3 { font-family: var(--pf-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--pf-text); } /* ─── TOP BAR ────────────────────────────────────────────── */ /* About (left) · Naam (midden) · Filter (rechts) — inline on every portfolio page so there's no JS dependency. */ .pf-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; /* Horizontal padding mirrors the home grid's image-band: .pf-grid has max-width 1400px and 3rem padding, so the outer edges of the leftmost / rightmost photos sit at 1304px wide. Match that exactly so About / Filter line up with the photos. */ padding: 1.1rem max(3rem, calc((100vw - 1304px) / 2)); background: var(--pf-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.2s; } .pf-bar.has-border { border-bottom-color: var(--pf-border); } /* Subtle see-through look (Lutz) — keeps some tint of the image under the bar without letting the whole image bleed through. */ .pf-bar { background: color-mix(in srgb, var(--pf-bg) 85%, transparent); } .pf-bar-left { text-align: left; } .pf-bar-right { text-align: right; } .pf-bar-link { font-family: var(--pf-sans); font-size: 15px; font-weight: 500; color: var(--pf-text); padding: 6px 8px; transition: color 0.15s; border: none; background: transparent; cursor: pointer; } .pf-bar-link:hover { color: var(--pf-muted); } .pf-bar-title { font-family: var(--pf-display); font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; letter-spacing: -0.015em; color: var(--pf-text); text-align: center; white-space: nowrap; } .pf-bar-title:hover { color: var(--pf-muted); } /* ─── HOME GRID ──────────────────────────────────────────── */ /* Real CSS grid (not column-count masonry) so every tile locks to the same 4:5 portrait aspect ratio. Uniform tiles read more like a curated catalogue and less like an Instagram feed. */ .pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1400px; margin: 0 auto; /* Bottom padding deliberately small — the footer brings its own margin-top, so the visual breathing room comes from there rather than dead space below the last image row. */ padding: 2rem 3rem 1.5rem; } .pf-grid > a { display: block; color: inherit; } .pf-grid-media { aspect-ratio: 4 / 5; position: relative; overflow: hidden; background: var(--pf-bg-alt); } /* `.pf-grid > a img` has the same specificity as the global `body.pf img { height: auto }` reset, and since it's declared later it wins — so images fill the fixed-ratio tile instead of collapsing to their natural aspect. */ .pf-grid > a .pf-grid-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .pf-grid > a:hover .pf-grid-media img { transform: scale(1.02); } /* Optional second image per tile — fades in on desktop mouse hover. For lamp projects this is the dark hero (light-effect reveal), for everything else it's whatever image Kjell picked in the backend. `@media (hover: hover)` keeps it off touch devices so tap-to-open still works cleanly on mobile. */ .pf-grid-hover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s ease; pointer-events: none; } @media (hover: hover) { .pf-grid > a:hover .pf-grid-hover-img { opacity: 1; } } .pf-grid-empty-tile { aspect-ratio: 4 / 5; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--pf-muted); font-family: var(--pf-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; background: var(--pf-bg-alt); } .pf-grid-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.25rem; background: linear-gradient(to top, rgba(42,34,29,0.62), transparent); font-family: var(--pf-serif); font-size: 1.1rem; line-height: 1.3; color: var(--pf-surface); opacity: 0; transform: translateY(8px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; } @media (hover: hover) { .pf-grid > a:hover .pf-grid-title { opacity: 1; transform: translateY(0); } } @media (max-width: 1100px) { .pf-grid { padding: 1.5rem 2rem 4rem; gap: 24px; } } @media (max-width: 900px) { .pf-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .pf-grid { grid-template-columns: 1fr; padding: 1.5rem 1.75rem 3.5rem; gap: 24px; } .pf-grid-empty-tile { aspect-ratio: 4 / 5; } .pf-grid-title { opacity: 1; transform: translateY(0); } } /* ─── EMPTY / LOADING states ─────────────────────────────── */ .pf-empty { text-align: center; padding: 5rem 2rem; color: var(--pf-muted); font-family: var(--pf-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; } .pf-loading { text-align: center; padding: 5rem 2rem; color: var(--pf-muted); font-family: var(--pf-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; animation: pf-pulse 1.4s ease-in-out infinite; } @keyframes pf-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } /* ─── CASE STUDY DETAIL PAGE — Lutz-style split ─────────── */ /* Desktop: 50/50 split. Left = sticky image carousel, right = scrollable text column. Mobile: stacked, image first. */ .pf-detail { max-width: 1600px; margin: 0 auto; padding: 0; } /* Desktop: gallery is fixed at left 50vw, body scrolls to the right of it. Using `fixed` (not `sticky`) guarantees the gallery always gets the full 100vh regardless of how short the text column is. */ .pf-case { position: relative; min-height: 100vh; } /* ── Gallery (left) — extends under the transparent top bar, like Lutz ── */ /* On ultra-wide screens we cap the whole layout at 1600px and center it; gallery and body each get 800px max. `left: max(0, 50vw - 800)` anchors the gallery to the left edge of that centered container. */ .pf-case-gallery { position: fixed; top: 0; left: max(0px, calc(50vw - 800px)); width: min(50vw, 800px); height: 100vh; min-height: 100vh; background: var(--pf-bg-alt); overflow: hidden; z-index: 1; } .pf-carousel:focus, .pf-carousel:focus-visible { outline: none; } .pf-carousel { position: relative; width: 100%; height: 100%; } .pf-carousel-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-y pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .pf-carousel-track::-webkit-scrollbar { display: none; } .pf-slide { flex: 0 0 100%; min-width: 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background: var(--pf-bg-alt); overflow: hidden; } /* Deep selector so this wins over the `body.pf img { height: auto }` reset via specificity — without this, the image collapses to its natural aspect ratio and never fills the gallery height. */ .pf-case-gallery .pf-slide img, .pf-classic-mobile-gallery .pf-slide img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; object-position: center; display: block; } .pf-carousel-nav { position: absolute; top: 0; height: 100%; width: 50%; background: transparent; border: none; cursor: pointer; z-index: 2; display: flex; align-items: center; padding: 0 1.5rem; opacity: 0; transition: opacity 0.2s; } .pf-carousel:hover .pf-carousel-nav { opacity: 1; } .pf-carousel-nav.prev { left: 0; justify-content: flex-start; } .pf-carousel-nav.next { right: 0; justify-content: flex-end; } .pf-carousel-nav span { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.85); color: var(--pf-text); font-size: 18px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 0.15s, color 0.15s; } .pf-carousel-nav:hover span { background: var(--pf-text); color: var(--pf-bg); } .pf-carousel:not(.has-multiple) .pf-carousel-nav, .pf-carousel:not(.has-multiple) .pf-carousel-dots { display: none; } .pf-carousel-dots { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 2; pointer-events: none; padding: 6px 12px; background: rgba(255,255,255,0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 999px; } .pf-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(42,34,29,0.28); transition: background 0.2s; } .pf-carousel-dot.active { background: var(--pf-text); } /* ── Right column (head + body) — sits next to the fixed gallery ── */ /* On desktop the header is part of the right column; on mobile the carousel/gallery is ordered first so the opening image leads. */ /* Head and body share the right half. Column caps at 800px to match the gallery, so on wide screens both columns land inside the same 1600px content band and the proportions stay readable. */ .pf-case-head { /* Was 50vw / min(50vw, 800px) — but `vw` is viewport-relative while .pf-detail is capped at 1600px and centered. On screens wider than 1600px the column was being pushed past the parent's right edge and getting squeezed. `%` is parent-relative so the two halves stay in sync inside the 1600px content band. */ margin-left: 50%; padding: 3rem 3rem 0; max-width: min(50%, 800px); box-sizing: border-box; margin-bottom: 2rem; } .pf-case-head > * { max-width: 640px; } .pf-case-body { margin-left: 50%; padding: 0 3rem 5rem; max-width: min(50%, 800px); box-sizing: border-box; min-height: calc(100vh - 8rem); } .pf-case-body > * { max-width: 640px; } .pf-detail-title { font-family: var(--pf-display); font-weight: 600; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1rem; } .pf-detail-summary { font-family: var(--pf-sans); font-weight: 400; font-size: clamp(1rem, 1.2vw, 1.1rem); color: var(--pf-text-soft); line-height: 1.5; } /* Content blocks — inside right column, no auto-centering */ .pf-block-text { margin: 0 0 1.75rem; font-size: 1rem; line-height: 1.75; color: var(--pf-text-soft); white-space: pre-wrap; } .pf-detail-footer { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--pf-border); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--pf-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .pf-detail-footer a { color: var(--pf-muted); transition: color 0.15s; } .pf-detail-footer a:hover { color: var(--pf-accent); } /* ─── MOBILE CLASSIC STORY LAYOUT — final carousel + process story ──── */ .pf-classic { max-width: 900px; margin: 0 auto; padding: 3rem 1.5rem 6rem; } .pf-classic-hero { width: 100%; margin-bottom: 3rem; background: var(--pf-bg-alt); } .pf-classic-hero img { width: 100%; } .pf-classic-head { margin-bottom: 3rem; max-width: 720px; } .pf-classic-title { font-family: var(--pf-display); font-weight: 600; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1rem; } .pf-classic-summary { font-family: var(--pf-sans); font-weight: 400; font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--pf-text-soft); line-height: 1.5; max-width: 58ch; } .pf-classic .pf-block-text { max-width: 640px; margin: 0 auto 2rem; font-size: 1.05rem; line-height: 1.75; color: var(--pf-text-soft); white-space: pre-wrap; } .pf-classic-image { margin: 0 auto 2rem; background: var(--pf-bg-alt); } .pf-classic-image img { width: 100%; } .pf-classic-image figcaption { font-family: var(--pf-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--pf-muted); padding: 0.75rem 0; text-align: center; } /* Video block — self-hosted MP4 / WebM in an aspect-ratio wrapper. The wrapper's padding-bottom is set inline (per block aspect). The