/* ===================================================== SITE HEADER & NAVIGATION ===================================================== */ :root { /* Shared so the floating header bar and the detached desktop nav stay vertically aligned — and condense together on scroll. */ --header-pt: max(2rem, calc(env(safe-area-inset-top, 0px) + 1.5rem)); --header-pb: 1.5rem; } .site-header { position: fixed; top: 0; inset-inline: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding-top: var(--header-pt); padding-bottom: var(--header-pb); padding-inline: 1.5rem; border-bottom: 1px solid transparent; transition: background-color 0.6s ease, backdrop-filter 0.6s ease, border-color 0.6s ease, padding 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); } @media (min-width: 768px) { .site-header { padding-inline: 3rem; } } /* Condense + frost on scroll. The flag lives on so the detached desktop nav (a fixed sibling) reacts to the same state. */ html.is-scrolled { --header-pt: 1rem; --header-pb: 1rem; } html.is-scrolled .site-header { background-color: rgba(12, 12, 13, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--color-border); } .site-header__inner { width: 100%; display: flex; align-items: center; justify-content: space-between; } .site-logo { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.05em; color: var(--color-text); transition: font-size 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); } html.is-scrolled .site-logo { font-size: 1.1rem; } /* ===================================================== PRIMARY NAVIGATION — desktop inline ===================================================== */ .site-nav__list { display: flex; align-items: center; gap: var(--space-md); list-style: none; } .site-nav__list a { position: relative; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(235, 235, 235, 0.55); transition: color var(--transition-fast); } .site-nav__list a:hover, .site-nav__list .current-menu-item > a { color: var(--color-text); opacity: 1; } /* ===================================================== HAMBURGER TOGGLE Always rendered, hidden on desktop via CSS ===================================================== */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; padding: 0 4px; cursor: pointer; z-index: 200; position: relative; flex-shrink: 0; } .nav-toggle__bar { display: block; width: 22px; height: 1px; background-color: var(--color-text); transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease, width 0.3s ease; transform-origin: center; } /* Morph to X when open */ .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(-6px) rotate(-45deg); } /* Close ("Zurück") button — lives inside the menu, only shown in the full-screen mobile overlay (the header's hamburger is covered by it). */ .site-nav__close { display: none; } /* ===================================================== SIDE DRAWER — slides in from right ===================================================== */ /* Desktop: fixed sibling of
, aligned to its right. Mirrors header's padding so nav links sit at the same vertical center as the logo. */ @media (min-width: 901px) { .site-nav { position: fixed; top: 0; right: 3rem; z-index: 51; padding-top: var(--header-pt); padding-bottom: var(--header-pb); display: flex; align-items: center; pointer-events: auto; transition: padding 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .site-nav__meta { display: none; } /* Ink underline — drawn from the left on hover / focus / current page */ .site-nav__list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .site-nav__list a:hover::after, .site-nav__list a:focus-visible::after, .site-nav__list .current-menu-item > a::after { transform: scaleX(1); } .site-nav__list a:focus-visible { outline: none; color: var(--color-text); } /* Ink dot — marks the current page only (echoes the splash ink-drop) */ .site-nav__list .current-menu-item > a::before { content: ''; position: absolute; left: -0.95em; top: 50%; width: 5px; height: 5px; border-radius: 50%; background-color: var(--color-text); transform: translateY(-50%); } } /* Backdrop */ .nav-backdrop { position: fixed; inset: 0; background-color: rgba(12, 12, 13, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 149; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .nav-backdrop.is-visible { opacity: 1; pointer-events: auto; } @media (max-width: 900px) { .nav-toggle { display: flex; } /* Full-screen editorial menu */ .site-nav { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg); padding: var(--space-xl) var(--space-lg); background-color: var(--color-bg-deep); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.45s; } .site-nav.is-open { opacity: 1; visibility: visible; transform: none; } /* Close / back button — pinned top-right inside the overlay */ .site-nav__close { display: inline-flex; align-items: center; gap: 0.5rem; position: absolute; top: max(2rem, calc(env(safe-area-inset-top, 0px) + 1.5rem)); right: var(--space-lg); z-index: 2; padding: 0.35rem 0; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(235, 235, 235, 0.6); transition: color var(--transition-fast); } .site-nav__close:hover, .site-nav__close:focus-visible { color: var(--color-text); outline: none; } .site-nav__close svg { transition: transform var(--transition-fast); } .site-nav__close:hover svg, .site-nav__close:focus-visible svg { transform: translateX(-3px); } /* Studio label, pinned top-left */ .site-nav::before { content: '21 Inkstreet'; position: absolute; top: max(2rem, calc(env(safe-area-inset-top, 0px) + 1.5rem)); left: var(--space-lg); font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.08em; color: rgba(235, 235, 235, 0.35); } .site-nav__list { flex-direction: column; align-items: flex-start; gap: 0.3rem; } /* Each item hidden until the menu opens → staggered ink-reveal */ .site-nav__list li { width: 100%; opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .site-nav.is-open .site-nav__list li { opacity: 1; transform: none; } .site-nav.is-open .site-nav__list li:nth-child(1) { transition-delay: 0.10s; } .site-nav.is-open .site-nav__list li:nth-child(2) { transition-delay: 0.16s; } .site-nav.is-open .site-nav__list li:nth-child(3) { transition-delay: 0.22s; } .site-nav.is-open .site-nav__list li:nth-child(4) { transition-delay: 0.28s; } .site-nav.is-open .site-nav__list li:nth-child(5) { transition-delay: 0.34s; } .site-nav.is-open .site-nav__list li:nth-child(6) { transition-delay: 0.40s; } /* Big serif links, gallery-style */ .site-nav__list a { display: block; padding: 0.35rem 0; font-family: var(--font-display); font-size: clamp(2.25rem, 11vw, 3.5rem); line-height: 1.1; letter-spacing: -0.01em; text-transform: none; color: rgba(235, 235, 235, 0.55); transition: color var(--transition-fast), transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .site-nav__list a:hover, .site-nav__list a:focus-visible, .site-nav__list .current-menu-item > a { color: var(--color-text); transform: translateX(0.4rem); opacity: 1; } .site-nav__list a:focus-visible { outline: none; } /* Ink dot — marks the current page (echoes the splash ink-drop) */ .site-nav__list .current-menu-item > a::before { content: ''; position: absolute; left: -0.95rem; top: 50%; width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-text); transform: translateY(-50%); } /* Studio meta, pinned bottom-left */ .site-nav__meta { position: absolute; left: var(--space-lg); bottom: max(2rem, env(safe-area-inset-bottom, 2rem)); display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(235, 235, 235, 0.4); opacity: 0; transition: opacity 0.5s ease 0.4s; } .site-nav.is-open .site-nav__meta { opacity: 1; } } /* Honour reduced-motion: keep the menu usable without the choreography */ @media (prefers-reduced-motion: reduce) { .site-header, .site-logo, .site-nav, .site-nav__list a, .site-nav__list a::after, .site-nav__list li, .site-nav__meta { transition: none !important; } .site-nav__list li { transition-delay: 0s !important; } }