/* Lané Hanekom, Kreative Lane Studio and Co. (360° marketing agency) Mallorca brand & marketing consultant --------------------------------------------- Sections: 1. Tokens 2. Base / typography 3. Ambient motion layer (orbs + grain) 4. Header / nav 5. Hero (with word stagger) 6. Section dividers (signature dot) 7. About + portrait (parallax) 8. Services / Work / Brands / Experience / FAQ / Contact 9. Footer + imprint 10. Scroll reveal */ :root { /* Stone & ink, quiet luxury (terracotta reserved for signature dots only) */ --bg: #F4F1EB; --bg-2: #EBE6DD; --bg-deep: #E5DFD4; --surface: transparent; --surface-elevated: color-mix(in srgb, #FFFFFF 35%, var(--bg)); --ink: #141210; --ink-2: #3d3a36; --mute: #5c5955; --rule: rgba(20, 18, 16, 0.08); --rule-strong: rgba(20, 18, 16, 0.13); --accent: #C4653A; --accent-text: #6B4423; --accent-soft: #C4B8C8; --font-serif: 'Cormorant', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --max: 76rem; --gutter: clamp(1.5rem, 5vw, 3.5rem); --section-y: clamp(4.5rem, 11vw, 8rem); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; --shadow-xs: 0 1px 0 rgba(20, 18, 16, 0.06); --shadow-sm: 0 8px 32px rgba(20, 18, 16, 0.04); --shadow-md: 0 16px 48px rgba(20, 18, 16, 0.06); /* Emil-strong ease-out (cubic-bezier(0.23,1,0.32,1)) — built-in CSS easings are too weak; this gives more punch to ease-outs across the system. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } * { box-sizing: border-box; } ::selection { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: var(--bg); background-image: linear-gradient( 180deg, #FAF8F4 0%, var(--bg) 28%, #EDE8E0 100% ); background-attachment: fixed; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: transparent; color: var(--ink); font-family: var(--font-sans); font-weight: 300; font-size: clamp(0.98rem, 0.6vw + 0.88rem, 1.05rem); line-height: 1.72; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; /* NOTE: do NOT use isolation: isolate here, it breaks opacity transitions on .reveal descendants in some Chromium versions. The ambient layer's z-index: -1 works fine without it since we moved the cream background to . */ } .path-hint { font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace; font-size: 0.92em; color: var(--mute); letter-spacing: 0.02em; } /* ============================================================ AMBIENT MOTION LAYER, drifting orbs + paper grain ------------------------------------------------------------ Fixed behind all content, pointer-events none. Three large blurred circles drift on long cycles (90 to 110s) using transform-only animations for GPU compositing. A static SVG noise texture sits on top at ~3.5% opacity for paper feel. prefers-reduced-motion disables the drift but keeps the static colour wash + grain. ============================================================ */ .ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: transparent; } .ambient-orb { position: absolute; display: block; border-radius: 50%; filter: blur(140px); mix-blend-mode: multiply; will-change: transform; } /* Ambient orbs, pulled back ~40% from the previous pass. The hero is now photo-led and doesn't need orb support; the orbs only show in the cream sections below the hero, where they add gentle warmth without competing with photography. */ .ambient-orb--cream { width: 60vmax; height: 60vmax; top: -18vmax; left: -12vmax; background: #E4D7C8; opacity: 0.14; animation: orb-drift-1 140s ease-in-out infinite alternate; } .ambient-orb--terracotta { width: 52vmax; height: 52vmax; top: 32%; right: -18vmax; background: var(--accent); opacity: 0.045; animation: orb-drift-2 160s ease-in-out infinite alternate; } .ambient-orb--peach { width: 46vmax; height: 46vmax; bottom: -14vmax; left: 18%; background: #E5D2C2; opacity: 0.11; animation: orb-drift-3 150s ease-in-out infinite alternate; } @keyframes orb-drift-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4vmax, 6vmax, 0) scale(1.10); } } @keyframes orb-drift-2 { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-6vmax, -4vmax, 0) scale(1); } } @keyframes orb-drift-3 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(5vmax, -3vmax, 0) scale(1.07); } } @media (prefers-reduced-motion: reduce) { .ambient-orb { animation: none; } } .ambient-grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.035; mix-blend-mode: multiply; pointer-events: none; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ink); text-decoration: none; text-underline-offset: 0.2em; transition: color 240ms var(--ease-out), opacity 240ms var(--ease-out); } a:hover { color: var(--ink-2); } .skip { position: absolute; left: -9999px; top: auto; background: var(--ink); color: var(--bg); padding: 0.5rem 1rem; z-index: 1000; } .skip:focus { left: 1rem; top: 1rem; } .container { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); } .dot { color: var(--accent); font-weight: 500; } .dot.pink { color: var(--accent-soft); } .amp { font-family: var(--font-serif); font-style: italic; font-weight: 400; } /* Section anchor offset so sticky header doesn't overlap */ section[id] { scroll-margin-top: 5.5rem; } /* Header / Nav */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid transparent; transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out), box-shadow 380ms var(--ease-out); } html.scrolled .site-header { background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom-color: var(--rule); box-shadow: var(--shadow-xs); } .site-header nav { max-width: var(--max); margin: 0 auto; padding: 1rem var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.15; text-wrap: balance; max-width: min(100%, 16rem); } .brand .dot { margin-left: 0.05em; } @media (max-width: 720px) { .brand { font-size: 1.05rem; letter-spacing: 0.006em; max-width: 11.5rem; } } /* Header right-side group: nav links + client login + mobile toggle */ .nav-actions { display: flex; align-items: center; gap: 1.5rem; } /* Client login — handoff to The Kreative Room app (app.kreativelanestudio.com/login) */ .client-login { font-family: var(--font-sans); font-size: 0.9rem; letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; padding: 0.5rem 1.1rem; border: 1px solid var(--rule-strong); border-radius: 999px; /* Push out to the top-right corner: shift right by the centered container's side margin so the button lands at the right gutter. Auto-clamps to 0 once the viewport is narrower than --max, so the mobile hamburger row is untouched. */ position: relative; left: max(0px, calc((100vw - var(--max)) / 2)); transition: color 240ms var(--ease-out), background 240ms var(--ease-out), border-color 240ms var(--ease-out), transform 120ms var(--ease-out); } .client-login:active { transform: scale(0.97); transition-duration: 120ms; } .client-login:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .client-login:hover { color: var(--bg); background: var(--ink); border-color: var(--ink); } } @media (max-width: 720px) { .nav-actions { gap: 0.75rem; } .client-login { font-size: 0.82rem; padding: 0.45rem 0.85rem; } .client-login__full { display: none; } /* "Client Login" -> "Login" on phones */ } @media (max-width: 440px) { /* keep brand + Login + hamburger on one row on the narrowest phones */ .brand { max-width: 9.5rem; } .nav-actions { gap: 0.6rem; } .client-login { font-size: 0.78rem; padding: 0.42rem 0.75rem; } } .nav-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; font-size: 0.95rem; } .nav-links a { position: relative; padding: 0.25rem 0; color: var(--ink-2); } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: color-mix(in srgb, var(--ink) 55%, transparent); transition: width 320ms var(--ease-out); } .nav-links a:hover::after, .nav-links a:focus-visible::after { width: 100%; } /* Current section (scroll spy) */ .nav-links a.is-active { color: var(--ink); font-weight: 500; } .nav-links a.is-active::after { width: 100%; background: color-mix(in srgb, var(--ink) 70%, transparent); } .nav-toggle { display: none; width: 40px; height: 40px; border: 0; background: transparent; flex-direction: column; gap: 5px; justify-content: center; align-items: center; cursor: pointer; padding: 0; border-radius: 8px; transition: background 200ms var(--ease-out), transform 160ms var(--ease-out); } .nav-toggle:active { transform: scale(0.94); transition-duration: 120ms; } .nav-toggle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .nav-toggle:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } } .nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform 240ms var(--ease-out), opacity 160ms var(--ease-out); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } @media (max-width: 720px) { .nav-toggle { display: flex; } .site-header.menu-open { z-index: 60; } html.nav-open, html.nav-open body { overflow: hidden; touch-action: none; } .nav-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(26, 26, 26, 0.32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* visibility delays on hide so opacity fade can complete; instant on show */ transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms; opacity: 0; visibility: hidden; pointer-events: none; } .nav-backdrop.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 280ms var(--ease-out), visibility 0s linear 0s; } @media (prefers-reduced-motion: reduce) { .nav-backdrop { transition: opacity 1ms linear, visibility 0s linear; } } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--rule); padding: 0.5rem var(--gutter) 1.25rem; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-6px); visibility: hidden; transition: max-height 320ms var(--ease-out), opacity 200ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s linear 320ms; } .nav-links.open { max-height: 28rem; opacity: 1; transform: translateY(0); visibility: visible; transition: max-height 320ms var(--ease-out), opacity 200ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s linear 0s; } .nav-links li { border-top: 1px solid var(--rule); } .nav-links a { display: block; padding: 0.85rem 0; } } /* Hero, full bleed cinematic photo with text overlay (Mallorca as hero) */ .hero { max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 12vw, 8rem) var(--gutter) clamp(3rem, 8vw, 6rem); } .hero--cinematic { max-width: none; margin: 0; padding: 0; position: relative; min-height: clamp(640px, 92vh, 920px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; /* contains the photo + overlay stacking */ } .hero--cinematic .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero--cinematic .hero__bg picture { display: block; width: 100%; height: 100%; } .hero--cinematic .hero__bg img, .hero--cinematic .hero__bg-video { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; } .hero--cinematic .hero__overlay { position: absolute; inset: 0; z-index: 1; background: /* darken bottom half band so all overlay text reads */ linear-gradient(180deg, rgba(20,15,10,0.32) 0%, rgba(20,15,10,0.10) 28%, rgba(20,15,10,0.20) 50%, rgba(20,15,10,0.58) 78%, rgba(20,15,10,0.80) 100%), /* and a gentle left side dim to anchor copy block contrast */ linear-gradient(90deg, rgba(20,15,10,0.30) 0%, rgba(20,15,10,0.10) 38%, rgba(20,15,10,0) 70%); pointer-events: none; } .hero--cinematic .hero__content { position: relative; z-index: 2; max-width: var(--max); width: 100%; margin: 0 auto; padding: clamp(2rem, 8vw, 4.5rem) var(--gutter) clamp(2.5rem, 6vw, 4rem); color: rgba(255, 255, 255, 0.95); } .hero--cinematic .eyebrow { color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); } .hero--cinematic h1 { color: rgba(255, 255, 255, 1); text-shadow: 0 2px 28px rgba(0, 0, 0, 0.42); } .hero--cinematic h1 em { color: rgba(255, 255, 255, 0.96); font-style: italic; } .hero--cinematic .lede { color: rgba(255, 255, 255, 0.96); max-width: 38rem; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45); } .hero--cinematic .lede strong { color: rgba(255, 255, 255, 1); } /* Hero overlay button variants, invert on photo */ .hero--cinematic .btn { background: rgba(255, 255, 255, 0.96); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.96); } .hero--cinematic .btn:hover { background: transparent; color: rgba(255, 255, 255, 0.98); border-color: rgba(255, 255, 255, 0.7); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .hero--cinematic .btn:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.95); outline-offset: 3px; } .hero--cinematic .btn-ghost { color: rgba(255, 255, 255, 0.96); border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; } .hero--cinematic .btn-ghost:hover { border-color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 1); transform: translateY(-1px); } .hero--cinematic .btn-ghost:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 3px; } /* Status pill on photo, translucent dark surface so it reads */ .hero--cinematic .status-pill { background: rgba(20, 15, 10, 0.38); border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* H1 word stagger, strong text shadow for legibility on photo */ .hero--cinematic h1 .word { text-shadow: 0 2px 28px rgba(0, 0, 0, 0.42); } .eyebrow { font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); margin: 0 0 1.75rem; } .hero h1 { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.75rem, 7.5vw, 6rem); line-height: 1.02; letter-spacing: -0.018em; margin: 0 0 1.5rem; } .hero h1 em { font-style: italic; color: var(--ink-2); } /* ────────────────────────────────────────────────────────────── Hero visibility, above-the-fold, always visible. The hero is the first thing a viewer sees; a reveal animation on it risks flashing-invisible-content on slow networks. We force opacity:1 / transform:none here so .reveal + .word pre-animation states (defined elsewhere) cannot leave content stuck-hidden, regardless of any compositor / transition quirk. Scroll-triggered reveals on the sections BELOW the fold keep the staggered fade-up animation. ────────────────────────────────────────────────────────────── */ .hero .reveal, .hero h1 .word { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .hero h1 .word { opacity: 1; transform: none; transition: none; } } .lede { max-width: 44rem; font-size: clamp(1rem, 0.5vw + 0.92rem, 1.12rem); line-height: 1.62; color: var(--ink-2); margin: 0 0 2rem; } .lede strong { color: var(--ink); font-weight: 500; } .cta-row .btn-ghost span[aria-hidden="true"] { display: inline-block; transition: transform 320ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .cta-row .btn-ghost:hover span[aria-hidden="true"] { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .cta-row .btn-ghost span[aria-hidden="true"] { transition: none; } } /* Small editorial status pill below the hero CTAs */ .status-pill { display: inline-flex; align-items: center; gap: 0.6rem; margin: 1.6rem 0 0; padding: 0.55rem 0.95rem 0.55rem 0.8rem; border-radius: 999px; border: 1px solid var(--rule-strong); background: color-mix(in srgb, var(--bg-2) 50%, transparent); font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); width: max-content; max-width: 100%; } .status-pill__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #4a9d6c; /* emerald, NOT the brand terracotta, semantic = "open / available" */ flex-shrink: 0; } /* Slow breath pulse on the status dot — emil framework: animation earns its place when it communicates state ("we're live, accepting projects"). 2.4s is long enough to feel breath-paced, not nervous; reduced-motion safe. */ .status-pill__dot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: #4a9d6c; opacity: 0; pointer-events: none; animation: status-pulse 2.4s var(--ease-out) infinite; will-change: transform, opacity; } @keyframes status-pulse { 0% { transform: scale(0.7); opacity: 0; } 50% { transform: scale(1.9); opacity: 0.35; } 100% { transform: scale(2.7); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .status-pill__dot::after { animation: none; opacity: 0; } } .btn, .btn-ghost { display: inline-block; padding: 0.85rem 1.6rem; font-family: var(--font-sans); font-size: 0.95rem; letter-spacing: 0.02em; border-radius: 999px; transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out); will-change: transform; } .btn { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); } .btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; } .btn:active { transform: scale(0.97); transition-duration: 120ms; } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); } .btn-ghost:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; } .btn-ghost:active { transform: scale(0.97); transition-duration: 120ms; } /* Hover lifts gated under (hover: hover) + (pointer: fine) so touch taps don't leave the button stuck in a lifted state. */ @media (hover: hover) and (pointer: fine) { .btn:hover { background: transparent; color: var(--ink); transform: translateY(-1px); box-shadow: none; } .btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); } } /* Rules between sections, signature centered dot ornament */ .rule { max-width: var(--max); margin: 0 auto; padding-block: 1.25rem; position: relative; height: auto; border: 0; } .rule::before { content: ''; display: block; height: 1px; width: min(520px, 70%); background: var(--rule); margin: 0 auto; } .rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); box-shadow: 0 0 0 5px var(--bg); } /* Section spacing */ section { padding-block: var(--section-y); } section.hero { padding-block: clamp(4rem, 12vw, 8rem) clamp(3rem, 8vw, 6rem); } .kicker { font-family: var(--font-serif); font-style: italic; font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; margin: 0 0 0.5rem; color: var(--ink); letter-spacing: -0.005em; } .kicker .dot { color: var(--accent-soft); font-style: normal; display: inline-block; animation: none; transform-origin: center; } h2.display, .display { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.125rem, 4.2vw, 3.25rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 2.75rem; text-wrap: balance; } .prose { max-width: 42rem; font-size: 1.02rem; line-height: 1.75; color: var(--ink-2); } .prose p { margin: 0 0 1.1rem; } .prose strong, .prose em { color: var(--ink); } .prose em { font-style: italic; } /* Drop cap removed 2026-05-12, reference sites (P&Y, Coertze & Clacher) are minimal-typographic, no editorial flourish. Kept the rule commented in case we want to bring it back. */ /* #about .prose > p:first-of-type::first-letter { font-family: var(--font-serif); font-weight: 400; float: left; font-size: 3.4em; line-height: 0.88; padding: 0.12em 0.16em 0 0; color: var(--ink); } */ /* About */ .about-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 880px) { .about-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4rem; } .about-grid.about-grid--no-photo { grid-template-columns: 1fr; } } .about-grid--no-photo .prose { max-width: 46rem; } .portrait { margin: 0; } .portrait-frame { position: relative; aspect-ratio: 4 / 5; background: var(--bg-2); border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule); box-shadow: none; /* JS updates --parallax-offset on scroll; default 0 */ --parallax-offset: 0px; transition: border-color 500ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .portrait-frame:hover { border-color: var(--rule-strong); } } .portrait-frame picture { display: block; width: 100%; height: 100%; position: relative; z-index: 2; } .portrait-frame img { transition: transform 1200ms var(--ease-out), filter 600ms var(--ease-out); transform: translate3d(0, var(--parallax-offset), 0) scale(1.06); filter: saturate(0.94); will-change: transform; } @media (hover: hover) and (pointer: fine) { .portrait-frame:hover img { filter: saturate(1.05); transform: translate3d(0, var(--parallax-offset), 0) scale(1.085); } } @media (prefers-reduced-motion: reduce) { .portrait-frame img { transition: none; transform: none; } } .portrait-frame::after { /* decorative dot pattern when no photo */ content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, var(--accent) 0 4px, transparent 4px), radial-gradient(circle at 70% 55%, var(--accent) 0 4px, transparent 4px), radial-gradient(circle at 45% 80%, var(--accent-soft) 0 4px, transparent 4px), radial-gradient(circle at 80% 18%, var(--accent-soft) 0 4px, transparent 4px); background-repeat: no-repeat; opacity: 0.55; pointer-events: none; } .portrait-frame.is-empty::before { content: 'Lané Hanekom'; position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem; font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; color: var(--ink-2); z-index: 1; } .portrait-frame img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; /* transform + filter set in the parallax block above */ } /* Services, single-column editorial list (quiet luxury) */ .services-grid { display: grid; grid-template-columns: 1fr; max-width: 46rem; gap: 0; counter-reset: svc; } .services-grid details { position: relative; padding: 2.35rem 0 2.5rem; margin: 0; border: none; border-radius: 0; border-top: 1px solid var(--rule); background: transparent; box-shadow: none; transition: background 400ms var(--ease-out); } .services-grid details:last-child { border-bottom: 1px solid var(--rule); } .services-grid details::before { counter-increment: svc; content: counter(svc, decimal-leading-zero); font-family: var(--font-sans); font-size: 0.65rem; letter-spacing: 0.32em; font-weight: 500; color: var(--mute); display: block; margin-bottom: 1rem; } @media (hover: hover) and (pointer: fine) { .services-grid details:hover { background: color-mix(in srgb, var(--ink) 2.5%, transparent); transform: none; box-shadow: none; border-color: var(--rule); } } .services-grid summary { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.35rem, 1.6vw, 1.65rem); margin: 0; letter-spacing: -0.012em; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.2rem 0; transition: color 240ms var(--ease-out), transform 120ms var(--ease-out); transform-origin: left center; } .services-grid summary:active { transform: scale(0.99); transition-duration: 120ms; } .services-grid summary .svc-name { margin: 0; font: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; flex: 1; min-width: 0; } .services-grid summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 40%, transparent); outline-offset: 3px; } .services-grid summary::-webkit-details-marker { display: none; } .services-grid summary:hover { color: var(--ink-2); } .services-grid summary::after { content: '+'; font-family: var(--font-sans); font-weight: 300; font-size: 1.35rem; color: var(--mute); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; line-height: 1; transition: transform 420ms var(--ease-out); transform-origin: center; } .services-grid details[open] summary::after { transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .services-grid summary::after { transition: none; } } .services-grid details > p { color: var(--ink-2); margin: 1rem 0 0; line-height: 1.75; font-size: 1.01rem; max-width: 44rem; } /* Selected work, editorial plates, hairline structure */ .case-study { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem 3rem; padding: 3.25rem 0; margin-inline: 0; border: none; border-top: 1px solid var(--rule); border-radius: 0; transition: background 500ms var(--ease-out); } .case-image { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; box-shadow: none; border: 1px solid var(--rule); transition: border-color 450ms var(--ease-out); } .case-image:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .case-study:hover .case-image { border-color: var(--rule-strong); box-shadow: none; } } .case-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 1200ms var(--ease-out), filter 600ms var(--ease-out); filter: saturate(0.95); will-change: transform; } /* Hover/focus overlay: "what we did" over the image */ .case-overlay { position: absolute; inset: 0; margin: 0; display: flex; align-items: flex-end; padding: 1.4rem 1.5rem; background: linear-gradient(to top, color-mix(in srgb, var(--ink) 86%, transparent) 0%, color-mix(in srgb, var(--ink) 52%, transparent) 48%, color-mix(in srgb, var(--ink) 6%, transparent) 100%); opacity: 0; /* hidden by default on every device; revealed on hover/focus/tap */ transition: opacity 450ms var(--ease-out); } .case-overlay p { margin: 0; color: var(--bg); font-size: 0.98rem; line-height: 1.6; text-wrap: pretty; } /* Revealed globally — hover (desktop) or focus/tap (keyboard + touch) — so phones show clean photography instead of a permanent dark scrim. */ .case-image:hover .case-overlay, .case-image:focus .case-overlay, .case-image:focus-within .case-overlay { opacity: 1; } @media (prefers-reduced-motion: reduce) { .case-overlay { transition: none; } } /* Unused case-image variants (square / portrait / carousel) removed 2026-06-07 — current Work cards use a single uniform .case-image, no modifiers in the markup. */ @media (hover: hover) and (pointer: fine) { .case-study:hover .case-image img { filter: saturate(1.03); transform: scale(1.006); } } @media (prefers-reduced-motion: reduce) { .case-image img { transition: none; transform: none; } } .case-study:last-of-type { border-bottom: 1px solid var(--rule); } @media (hover: hover) and (pointer: fine) { .case-study:hover { background: color-mix(in srgb, var(--ink) 2%, transparent); border-color: transparent; box-shadow: none; } } @media (min-width: 780px) { .case-study { grid-template-columns: 1.15fr 1fr; gap: 1rem 4rem; align-items: center; } .case-info { order: 1; } /* name/meta on the left */ .case-image { order: 2; } /* photo on the right */ } .case-info { display: flex; flex-direction: column; gap: 0.4rem; } .case-num { display: block; font-family: var(--font-sans); font-style: normal; font-weight: 500; font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; line-height: 1.4; color: var(--mute); margin-bottom: 0.85rem; user-select: none; } .case-study h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.75rem, 2.5vw, 2.35rem); margin: 0; line-height: 1.08; letter-spacing: -0.02em; } .case-meta { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin: 0; } .case-tag { font-family: var(--font-serif); font-style: italic; font-size: 0.98rem; font-weight: 400; color: var(--ink-2); margin: 1rem 0 0; letter-spacing: 0.01em; } .case-study > p { margin: 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.78; max-width: 42rem; } /* Photography, uniform CSS Grid with 4:5 cells and object fit cover. Avoids the random-gap problem of CSS-columns masonry when items have mixed portrait/landscape aspects (which they do here). Some content gets cropped to fit the cell, but the visual rhythm is consistent. */ .lens-lede { font-size: 1.02rem; color: var(--ink-2); margin: 0 0 2.5rem; max-width: 38rem; line-height: 1.65; text-wrap: balance; } .lens-quote { margin: 0 0 2.5rem; padding: 0 0 0 1.15rem; border-left: 2px solid color-mix(in srgb, var(--accent) 50%, var(--rule-strong)); max-width: 40rem; } .lens-quote p { margin: 0; font-family: var(--font-serif); font-size: clamp(1.05rem, 1.15vw, 1.22rem); font-style: italic; font-weight: 400; line-height: 1.65; color: var(--ink); letter-spacing: -0.01em; } .lens-quote footer { margin: 0.9rem 0 0; font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); } .lens-quote cite { font-style: normal; } .photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin: 0; } @media (max-width: 540px) { .photo-grid { grid-template-columns: 1fr; gap: 0.75rem; } } .photo-grid picture { display: block; margin: 0; width: 100%; height: 100%; } .photo-grid figure { margin: 0; overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; border: 1px solid var(--rule); box-shadow: none; transition: border-color 480ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .photo-grid figure:hover, .photo-grid figure:focus-within { border-color: var(--rule-strong); transform: none; box-shadow: none; } } .photo-grid img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 1200ms var(--ease-out), filter 600ms var(--ease-out); filter: saturate(0.95); will-change: transform; } @media (hover: hover) and (pointer: fine) { .photo-grid figure:hover img, .photo-grid figure:focus-within img { filter: saturate(1.05); transform: scale(1.03); } } @media (prefers-reduced-motion: reduce) { .photo-grid img { transition: none; transform: none; } } /* Photography "show more": hide extras until expanded, ghost-style toggle */ .photo-grid.is-collapsed .photo-extra { display: none; } .photo-more-wrap { display: flex; justify-content: center; margin-top: 1.75rem; } .photo-more { font: inherit; font-size: 0.95rem; color: var(--ink); background: transparent; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0.7rem 1.6rem; cursor: pointer; transition: background 400ms var(--ease-out), border-color 400ms var(--ease-out), transform 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .photo-more:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); color: var(--accent); } } .photo-more:active { transform: translateY(1px); } .photo-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } /* Brand list */ .brand-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem 2rem; } .brand-list li { padding: 1.1rem 1rem 1.1rem 1rem; margin: 0 -0.5rem; border-radius: var(--radius-sm); border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.15rem; font-size: 1rem; transition: background 280ms var(--ease-out), box-shadow 280ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .brand-list li:hover { background: color-mix(in srgb, var(--ink) 2.5%, transparent); box-shadow: inset 2px 0 0 0 color-mix(in srgb, var(--ink) 35%, transparent); } } .brand-list li:last-child { border-bottom: 1px solid var(--rule); } .brand-list strong { font-weight: 400; font-family: var(--font-serif); font-size: 1.3rem; letter-spacing: -0.005em; } .brand-list span { color: var(--mute); font-size: 0.9rem; letter-spacing: 0.02em; } .brands-lede { margin-bottom: 1.75rem; } .services-lede { margin-bottom: 1.75rem; } .process-lede { margin-bottom: clamp(2rem, 4vw, 3rem); } /* ═════════════════════════════════════════════════════════════════════ Process — four numbered phases (Discover · Define · Create · Launch) Desktop: 4 columns; narrow: 2-up; mobile: stacked. Each step has a number eyebrow + serif title + body. Hairline top border per cell. ═════════════════════════════════════════════════════════════════════ */ .process-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem); } .process-steps li { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--rule); } .process-step__num { display: block; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.32em; color: var(--mute); margin-bottom: 0.95rem; } .process-steps h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.35rem, 1.6vw, 1.65rem); letter-spacing: -0.012em; margin: 0 0 0.55rem; color: var(--ink); } .process-steps li p { color: var(--ink-2); line-height: 1.7; font-size: 0.98rem; margin: 0; max-width: 26rem; } /* ═════════════════════════════════════════════════════════════════════ Ethos / "What we don't do" — hairline stack, anti-positioning ═════════════════════════════════════════════════════════════════════ */ .ethos-list { list-style: none; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; max-width: 48rem; } .ethos-list li { padding: 1.5rem 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.4rem; } .ethos-list li:last-child { border-bottom: 1px solid var(--rule); } .ethos-list strong { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.15rem, 1.5vw, 1.42rem); letter-spacing: -0.01em; color: var(--ink); } .ethos-list span { color: var(--ink-2); line-height: 1.7; font-size: 1rem; } /* ═════════════════════════════════════════════════════════════════════ Contact chips — small editorial pills for languages + working region ═════════════════════════════════════════════════════════════════════ */ .contact-chips { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .contact-chips li { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); padding: 0.45rem 0.9rem; border: 1px solid var(--rule); border-radius: 999px; background: color-mix(in srgb, var(--bg-2) 35%, transparent); } .brand-list strong a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 32%, transparent); text-underline-offset: 0.18em; } @media (hover: hover) and (pointer: fine) { .brand-list strong a:hover { text-decoration-color: color-mix(in srgb, var(--ink) 65%, transparent); } } /* Timeline (Experience) */ .timeline { list-style: none; counter-reset: tl; margin: 0; padding: 0; } .timeline li { display: grid; grid-template-columns: 1fr; gap: 0.5rem; padding: 2.25rem 0; border-top: 1px solid var(--rule); position: relative; } .timeline li:last-child { border-bottom: 1px solid var(--rule); } @media (min-width: 780px) { .timeline li { grid-template-columns: 11rem 1fr; gap: 0 4rem; align-items: baseline; } } .timeline time { font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); } .timeline h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.3rem, 1.7vw, 1.65rem); margin: 0 0 0.6rem; letter-spacing: -0.005em; } .timeline div p { margin: 0; color: var(--ink-2); line-height: 1.7; max-width: 44rem; } /* FAQ, hairline stack (no card chrome) */ .faq { display: flex; flex-direction: column; gap: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; padding: 0; overflow: visible; max-width: 48rem; } .faq details { border-top: 1px solid var(--rule); padding: 1.5rem 0; } .faq details:last-child { border-bottom: 1px solid var(--rule); } .faq summary { font-family: var(--font-serif); font-size: clamp(1.15rem, 1.5vw, 1.42rem); font-weight: 400; letter-spacing: -0.01em; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.2rem 0; transition: color 240ms var(--ease-out), transform 120ms var(--ease-out); transform-origin: left center; } .faq summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 40%, transparent); outline-offset: 3px; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--ink-2); } .faq summary:active { transform: scale(0.99); transition-duration: 120ms; } .faq summary::after { content: '+'; font-family: var(--font-sans); font-weight: 300; font-size: 1.35rem; color: var(--mute); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; line-height: 1; transition: transform 420ms var(--ease-out); transform-origin: center; } .faq details[open] summary::after { transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } } .faq details > p { margin: 1rem 0 0; max-width: 44rem; color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; } .faq details > p a { color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-text) 45%, transparent); text-underline-offset: 0.18em; transition: color 180ms var(--ease-out), text-decoration-color 180ms var(--ease-out); } .faq details > p a:hover { color: var(--ink); text-decoration-color: var(--ink); } /* Contact */ .contact-head { max-width: 30ch; text-wrap: balance; } .contact-line { color: var(--ink-2); font-size: 1.02rem; margin: 0 0 3rem; max-width: 38rem; line-height: 1.68; } .contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 38rem; gap: 0; } .contact-list li { padding: 1.85rem 0; border: none; border-top: 1px solid var(--rule); border-radius: 0; background: transparent; box-shadow: none; display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; justify-content: flex-start; transition: background 400ms var(--ease-out); } .contact-list li:last-child { border-bottom: 1px solid var(--rule); } @media (hover: hover) and (pointer: fine) { .contact-list li:hover { transform: none; box-shadow: none; border-color: var(--rule); background: color-mix(in srgb, var(--ink) 2%, transparent); } } .contact-label { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 0.5rem; } .contact-list li:nth-child(1) .contact-label::before { content: ''; width: 1.1rem; height: 1.1rem; flex-shrink: 0; background: currentColor; opacity: 0.35; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") center / contain no-repeat; } .contact-list li:nth-child(2) .contact-label::before { content: ''; width: 1.1rem; height: 1.1rem; flex-shrink: 0; background: currentColor; opacity: 0.35; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E") center / contain no-repeat; } .contact-list li:nth-child(3) .contact-label::before { content: ''; width: 1.1rem; height: 1.1rem; flex-shrink: 0; background: currentColor; opacity: 0.35; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat; } .contact-list a, .contact-list span { font-family: var(--font-serif); font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 400; color: var(--ink); letter-spacing: -0.005em; } .contact-list a { position: relative; transition: color 200ms var(--ease-out), transform 120ms var(--ease-out); transform-origin: left center; } .contact-list a:hover { color: var(--accent-text); } .contact-list a:active { transform: scale(0.985); transition-duration: 120ms; } /* Footer */ .site-footer { border-top: 1px solid var(--rule); padding-block: 2.75rem; margin-top: 2rem; background: linear-gradient(180deg, var(--bg-2) 0%, color-mix(in srgb, var(--bg-2) 92%, var(--bg)) 100%); color: var(--ink-2); font-size: 0.9rem; } .footer-inner { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } @media (min-width: 720px) { .footer-inner { flex-direction: row; justify-content: space-between; align-items: center; } } .footer-brand { font-family: var(--font-serif); font-size: 1.1rem; margin: 0; color: var(--ink); } .footer-sep { color: var(--mute); margin: 0 0.5em; } .footer-meta { margin: 0; color: var(--mute); } .footer-meta a { color: var(--mute); text-decoration: underline; text-underline-offset: 0.2em; } .footer-meta a:focus-visible { outline: 2px solid color-mix(in srgb, var(--ink) 45%, transparent); outline-offset: 2px; } /* Imprint */ .imprint { padding-block: clamp(3rem, 6vw, 5rem) 1rem; border-top: 1px solid var(--rule); margin-top: 2.5rem; } .imprint-head { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -0.005em; margin: 0 0 2rem; color: var(--ink); } .imprint-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 720px) { .imprint-grid { grid-template-columns: 1fr 1.4fr; gap: 4rem; } } .imprint .imprint-grid--single { grid-template-columns: 1fr; max-width: 36rem; } @media (min-width: 720px) { .imprint .imprint-grid--single { grid-template-columns: 1fr; gap: 2.5rem; } } .imprint h3 { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin: 0 0 0.75rem; font-weight: 500; } .imprint p { margin: 0 0 0.85rem; color: var(--ink-2); font-size: 0.95rem; line-height: 1.65; } .imprint a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.2em; } .imprint a:hover { color: var(--accent-text); } .imprint a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } /* Standalone legal pages (e.g. privacy.html) */ .legal-page { padding-block: clamp(3.25rem, 10vw, 5.5rem); } .legal-page__title { margin-bottom: 2rem; } .legal-page__body { max-width: 42rem; } .legal-page .imprint--plain { border-top: none; margin-top: 0; padding-block: 0; padding-bottom: 0; } .back-to-top { position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)); z-index: 48; width: 3rem; height: 3rem; padding: 0; border-radius: var(--radius-full); border: 1px solid var(--rule-strong); background: var(--surface-elevated); color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; display: grid; place-items: center; /* Base hidden state — fades + rises in. Visibility delays so opacity can finish before the element leaves the a11y tree. */ opacity: 0; transform: translateY(8px) scale(0.96); visibility: hidden; pointer-events: none; transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out), visibility 0s linear 320ms; } .back-to-top.is-visible { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out), visibility 0s linear 0s; } @media (hover: hover) and (pointer: fine) { .back-to-top.is-visible:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent-text) 35%, var(--rule-strong)); } } .back-to-top.is-visible:active { transform: translateY(-1px) scale(0.97); transition-duration: 120ms; } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity 1ms linear, visibility 0s linear; transform: none; } .back-to-top.is-visible { transform: none; } } .back-to-top__glyph { width: 0.5rem; height: 0.5rem; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); margin-top: 0.2rem; } .back-to-top:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; } /* Avoid oversized focus ring when #top receives programmatic focus */ #top:focus { outline: none; } /* Focus states */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* Scroll reveal (Emil principles: ease out, fade up, once, reduced motion safe) */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity 920ms var(--ease-out), transform 920ms var(--ease-out); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal[data-reveal="1"].is-visible { transition-delay: 0ms; } .reveal[data-reveal="2"].is-visible { transition-delay: 80ms; } .reveal[data-reveal="3"].is-visible { transition-delay: 160ms; } .reveal[data-reveal="4"].is-visible { transition-delay: 240ms; } /* Stagger children of certain reveal containers, 40 to 80ms apart per child (Emil) */ #services.reveal .services-grid > details, #work.reveal .case-study, #process.reveal .process-steps > li, #photography.reveal .photo-grid > figure, #brands.reveal .brand-list > li, #ethos.reveal .ethos-list > li, #contact.reveal .contact-list > li { opacity: 0; transform: translateY(8px); transition: opacity 820ms var(--ease-out), transform 820ms var(--ease-out); } #services.is-visible .services-grid > details, #work.is-visible .case-study, #process.is-visible .process-steps > li, #photography.is-visible .photo-grid > figure, #brands.is-visible .brand-list > li, #ethos.is-visible .ethos-list > li, #contact.is-visible .contact-list > li { opacity: 1; transform: translateY(0); } /* Process — 4 phases, 80ms cascade for editorial pacing */ #process.is-visible .process-steps > li:nth-child(1) { transition-delay: 60ms; } #process.is-visible .process-steps > li:nth-child(2) { transition-delay: 140ms; } #process.is-visible .process-steps > li:nth-child(3) { transition-delay: 220ms; } #process.is-visible .process-steps > li:nth-child(4) { transition-delay: 300ms; } /* Ethos — 3 lines, 80ms cascade */ #ethos.is-visible .ethos-list > li:nth-child(1) { transition-delay: 60ms; } #ethos.is-visible .ethos-list > li:nth-child(2) { transition-delay: 140ms; } #ethos.is-visible .ethos-list > li:nth-child(3) { transition-delay: 220ms; } #services.is-visible .services-grid > details:nth-child(1) { transition-delay: 60ms; } #services.is-visible .services-grid > details:nth-child(2) { transition-delay: 120ms; } #services.is-visible .services-grid > details:nth-child(3) { transition-delay: 180ms; } #services.is-visible .services-grid > details:nth-child(4) { transition-delay: 240ms; } #services.is-visible .services-grid > details:nth-child(5) { transition-delay: 300ms; } #work.is-visible .case-study:nth-of-type(1) { transition-delay: 60ms; } #work.is-visible .case-study:nth-of-type(2) { transition-delay: 140ms; } #work.is-visible .case-study:nth-of-type(3) { transition-delay: 220ms; } /* Photography grid — 6 tiles, 60ms cascade */ #photography.is-visible .photo-grid > figure:nth-child(1) { transition-delay: 60ms; } #photography.is-visible .photo-grid > figure:nth-child(2) { transition-delay: 120ms; } #photography.is-visible .photo-grid > figure:nth-child(3) { transition-delay: 180ms; } #photography.is-visible .photo-grid > figure:nth-child(4) { transition-delay: 240ms; } #photography.is-visible .photo-grid > figure:nth-child(5) { transition-delay: 300ms; } #photography.is-visible .photo-grid > figure:nth-child(6) { transition-delay: 360ms; } /* Brands list — many items, gentler 40ms cascade so the tail doesn't drag too long */ #brands.is-visible .brand-list > li:nth-child(1) { transition-delay: 40ms; } #brands.is-visible .brand-list > li:nth-child(2) { transition-delay: 80ms; } #brands.is-visible .brand-list > li:nth-child(3) { transition-delay: 120ms; } #brands.is-visible .brand-list > li:nth-child(4) { transition-delay: 160ms; } #brands.is-visible .brand-list > li:nth-child(5) { transition-delay: 200ms; } #brands.is-visible .brand-list > li:nth-child(6) { transition-delay: 240ms; } #brands.is-visible .brand-list > li:nth-child(7) { transition-delay: 280ms; } #brands.is-visible .brand-list > li:nth-child(8) { transition-delay: 320ms; } #brands.is-visible .brand-list > li:nth-child(9) { transition-delay: 360ms; } #brands.is-visible .brand-list > li:nth-child(10) { transition-delay: 400ms; } #brands.is-visible .brand-list > li:nth-child(11) { transition-delay: 440ms; } #brands.is-visible .brand-list > li:nth-child(12) { transition-delay: 480ms; } #brands.is-visible .brand-list > li:nth-child(13) { transition-delay: 520ms; } /* Contact list — 3 rows, 80ms cascade for editorial pacing */ #contact.is-visible .contact-list > li:nth-child(1) { transition-delay: 80ms; } #contact.is-visible .contact-list > li:nth-child(2) { transition-delay: 160ms; } #contact.is-visible .contact-list > li:nth-child(3) { transition-delay: 240ms; } @media (prefers-reduced-motion: reduce) { #services.reveal .services-grid > details, #work.reveal .case-study, #process.reveal .process-steps > li, #photography.reveal .photo-grid > figure, #brands.reveal .brand-list > li, #ethos.reveal .ethos-list > li, #contact.reveal .contact-list > li { opacity: 1; transform: none; transition: none; } .services-grid details:hover, .contact-list li:hover, .photo-grid figure:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* Print */ @media print { .site-header, .nav-toggle, .cta-row, .site-footer, .nav-backdrop, .back-to-top { display: none; } body { background: white; color: black; } .reveal { opacity: 1; transform: none; } html.nav-open, html.nav-open body { overflow: visible !important; } }