/* ============================================================ Geschmackssache — Layout: horizontal scroll, nav, footer ------------------------------------------------------------ Three scroll modes, toggled by a class on : (default / no JS) → native sideways scroll-snap (works everywhere) .mode-pin → GSAP scroll-jacked horizontal (desktop) .mode-stack → vertical stack (reduced motion) ============================================================ */ /* ---- Horizontal scroll shell ---- */ .hscroll { position: relative; height: 100dvh; overflow: hidden; z-index: 2; } .hscroll__track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hscroll__track::-webkit-scrollbar { display: none; } /* Track sits above any sticky background sequence layer */ .hscroll__track { position: relative; z-index: 1; } .panel { flex: 0 0 100vw; height: 100%; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; justify-content: center; padding: var(--panel-pad); padding-top: max(var(--panel-pad), calc(var(--nav-h) + var(--space-8))); padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); overflow: hidden; } /* Wider editorial panels for content-heavy sections */ .panel--wide { flex-basis: clamp(100vw, 100vw, 140vw); } @media (min-width: 1024px) { .panel--wide { flex-basis: 120vw; } } /* ---- Mode: GSAP pinned horizontal (desktop) ---- */ .mode-pin .hscroll__track { overflow: visible; scroll-snap-type: none; width: max-content; } /* ---- Mode: vertical stack (reduced motion / opt-out) ---- */ .mode-stack .hscroll { height: auto; overflow: visible; } .mode-stack .hscroll__track { flex-direction: column; overflow: visible; scroll-snap-type: none; width: auto; } .mode-stack .panel { flex-basis: auto; min-height: 100dvh; height: auto; width: 100%; } /* ============================================================ Top navigation ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); } /* Brand logo — two files, swapped by theme (white on dark, black on light) */ .nav__brand { display: inline-flex; align-items: center; line-height: 0; } .nav__logo { height: clamp(4rem, 2.6rem + 3.6vw, 6.4rem); width: auto; transition: opacity var(--dur-fast); } .nav__logo--dark { display: none; } .nav--on-light .nav__logo--light { display: none; } .nav--on-light .nav__logo--dark { display: block; } .nav__right { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); } .nav__reserve { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,0.5); padding: 0.7em 1.2em; border-radius: var(--radius); transition: background var(--dur-fast), color var(--dur-fast); } .nav__reserve:hover { background: #fff; color: #000; } @media (max-width: 640px) { .nav__reserve { display: none; } } .nav__toggle { display: flex; flex-direction: column; gap: 5px; width: 30px; padding: 6px 0; color: #fff; } /* Light-background theme: dark logo + dark controls */ .nav--on-light .nav__reserve { color: var(--color-bg-deep); border-color: rgba(0,0,0,0.45); } .nav--on-light .nav__reserve:hover { background: #000; color: #fff; } .nav--on-light .nav__toggle { color: var(--color-bg-deep); } .nav__toggle span { display: block; height: 1.5px; width: 100%; background: currentColor; transition: transform var(--dur-normal) var(--ease-out-expo), opacity var(--dur-fast); } .nav-open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-open .nav__toggle span:nth-child(2) { opacity: 0; } .nav-open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Menu open → overlay is dark, force white logo + light controls */ .nav-open .nav__logo--light { display: block; } .nav-open .nav__logo--dark { display: none; } .nav-open .nav__toggle { color: #fff; } .nav-open .nav__reserve { color: #fff; border-color: rgba(255,255,255,0.5); } /* ============================================================ Fullscreen menu overlay ============================================================ */ .menu-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--color-bg-deep); display: grid; grid-template-rows: 1fr auto; padding: calc(var(--nav-h) + var(--space-8)) var(--gutter) var(--space-12); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path var(--dur-slow) var(--ease-out-expo), visibility 0s linear var(--dur-slow); } .nav-open .menu-overlay { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path var(--dur-slow) var(--ease-out-expo); } .menu-overlay__nav { display: flex; flex-direction: column; justify-content: center; gap: clamp(0.2rem, 1vw, 0.6rem); } .menu-overlay__link { font-family: var(--font-display); font-size: clamp(2.4rem, 1.5rem + 6vw, 6rem); font-weight: 500; line-height: 1.05; color: var(--color-text); width: max-content; max-width: 100%; position: relative; transition: color var(--dur-normal), letter-spacing var(--dur-normal) var(--ease-out-expo); } .menu-overlay__link .idx { font-family: var(--font-sans); font-size: 0.85rem; vertical-align: super; color: var(--color-accent); margin-right: 0.5em; font-weight: 400; } .menu-overlay__link:hover, .menu-overlay__link[aria-current="page"] { color: var(--color-accent); letter-spacing: 0.01em; } .menu-overlay__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-6); padding-top: var(--space-8); border-top: 1px solid var(--color-line); color: var(--color-text-dim); font-size: var(--text-sm); } .menu-overlay__foot a:hover { color: var(--color-accent); } .menu-overlay__legal { display: flex; gap: var(--space-6); flex-wrap: wrap; } /* ============================================================ Footer panel (last panel of every page) ============================================================ */ .footer { background: var(--color-bg-deep); justify-content: flex-end; gap: var(--space-8); } .footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-12); } .footer__mark { display: inline-block; line-height: 0; } .footer__mark img { width: clamp(8.5rem, 6rem + 11vw, 15rem); height: auto; } .footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-8); width: min(38rem, 100%); } .footer__col h4 { font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-3); font-weight: 400; } .footer__col li { margin-bottom: 0.4em; } .footer__col a, .footer__col p { color: var(--color-text-dim); font-size: var(--text-sm); } .footer__col a:hover { color: var(--color-text); } .footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--color-line); font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.04em; } .footer__bottom a:hover { color: var(--color-accent); } /* Generic content container for inner-page panels */ .measure { max-width: var(--maxw); } .stack > * + * { margin-top: var(--space-6); }