/* ═══════════════════════════════════════════════════════════ VELARO — Ristorante · Bar, Berlin-Tegel Built on the v09-cinema treatment: near-black, letterboxed, sticky chapters, scroll-driven cross-dissolves — but the logistics (phone, hours, address, menu) never fade out. ═══════════════════════════════════════════════════════════ */ :root{ --ink:#06080a; --paper:#f2ede4; --paper-ink:#14181b; --haze:#8d8f8a; --gold:#c9a15c; /* brass accent on the dark side */ --navy:#1b3a55; /* the velvet banquettes */ --line:#1c2124; --line-ink:#c9c0ae; /* rules on the paper side */ /* Letterbox off: black bands on a near-black page read as wasted height rather than as a cinema frame. Kept as a token at 0 instead of deleted — thirteen calc() expressions key off it (nav offset, scroll hint, chips, scroll-margin), and they all stay correct. */ --bar:0px; --navh:3.4rem; /* height of the fixed nav — sticky offsets key off this */ --pad:clamp(20px, 7vw, 110px); --serif:"Cormorant Garamond", "Times New Roman", serif; --didone:"Bodoni Moda", "Playfair Display", Georgia, serif; --mono:"DM Mono", ui-monospace, "SF Mono", Menlo, monospace; } *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; /* clip, not hidden: `overflow-x:hidden` on makes the scroll container, which moves the snap points off the document scroller. */ overflow-x:clip; /* One flick, one frame. `proximity`, not `mandatory`: with mandatory the scroller must always come to rest on a snap point, and the sections after the chapters (the menu is ~13 000 px tall) have no snap point inside them — measured at 1440 and 390, a flick inside the menu got yanked back to the last chapter and the foot of the menu, the gallery and the footer were unreachable. Then `proximity` turned out to be the whole problem, not a milder form of it — see the chapter block below. There is no snap container here now. Anchor offsets still live on the targets (scroll-margin-top) rather than scroll-padding, which would shrink the snapport it no longer has and is simply the wrong tool for an anchor offset. */ } body{ margin:0; background:var(--ink); color:var(--paper); font-family:var(--serif); font-weight:300; -webkit-font-smoothing:antialiased; } img{max-width:100%} a{color:inherit} h2,h3{font-weight:400} /* ── bilingual switching: one class pair, no JS per string ── */ html[lang="de"] .en{display:none} html[lang="en"] .de{display:none} .sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0} .skip{ position:absolute; left:-9999px; top:0; z-index:99; background:var(--gold); color:var(--ink); padding:.8rem 1.2rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none} .skip:focus{left:0; top:0} :focus-visible{outline:2px solid var(--gold); outline-offset:3px} /* ── the notched double-rule frame from the printed menu ──── */ .rule{ position:relative; border:1px solid var(--gold); --n:11px; clip-path:polygon(var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n)); } .rule::before{ content:""; position:absolute; inset:5px; border:1px solid var(--gold); opacity:.55; pointer-events:none; --n:7px; clip-path:polygon(var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, 0 calc(100% - var(--n)), 0 var(--n)); } /* ── letterbox + chrome ─────────────────────────────────── */ .bar{display:none; position:fixed; left:0; right:0; height:var(--bar); background:#000; z-index:70; pointer-events:none} .bar-top{top:0} .bar-bot{bottom:0} .progress{position:fixed; top:var(--bar); left:0; right:0; height:1px; z-index:71; background:rgba(255,255,255,.07); pointer-events:none} .progress i{display:block; height:100%; background:var(--gold); transform-origin:0 50%; scale:0 1; animation:prog linear both; animation-timeline:scroll(root block)} @keyframes prog{from{scale:0 1}to{scale:1 1}} /* the nav does NOT fade in — the phone number is reachable from the first pixel */ .nav{ position:fixed; top:var(--bar); left:0; right:0; z-index:72; display:flex; align-items:center; gap:1rem; padding:.7rem var(--pad); font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--haze); min-height:var(--navh); background:linear-gradient(180deg, rgba(6,8,10,.97) 0%, rgba(6,8,10,.93) 74%, rgba(6,8,10,0) 100%); } .nav-mark{font-family:var(--didone); font-size:1.05rem; letter-spacing:.36em; color:var(--paper); text-decoration:none; flex:0 0 auto} .nav-links{display:flex; gap:clamp(.8rem,2.2vw,1.9rem); flex:1 1 auto; justify-content:center; flex-wrap:nowrap; overflow:hidden} .nav-links a{text-decoration:none; white-space:nowrap; transition:color .3s} .nav-links a:hover,.nav-links a:focus-visible{color:var(--gold)} .nav-act{display:flex; align-items:center; gap:.5rem; flex:0 0 auto} .lang-btn{ font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; background:transparent; color:var(--haze); border:1px solid var(--line); padding:.45rem .6rem; cursor:pointer; min-width:2.9em} .lang-btn:hover{color:var(--paper); border-color:var(--gold)} .tel-btn{ display:inline-flex; align-items:center; gap:.45em; text-decoration:none; background:var(--gold); color:var(--ink); padding:.5rem .85rem; letter-spacing:.14em; white-space:nowrap} .tel-btn:hover{background:#dcb676} .tel-short{display:none} @media (max-width:900px){ .nav-links{display:none} .nav{justify-content:space-between} } @media (max-width:560px){ .tel-full{display:none} .tel-short{display:inline} .nav-mark{font-size:.9rem; letter-spacing:.24em} /* thumb-sized targets: this is the button that books the table */ .tel-btn,.lang-btn{min-height:44px; padding-inline:.9rem; display:inline-flex; align-items:center; justify-content:center} :root{--navh:4.6rem} .cta .cta-tel{display:none} } /* ── chapters: one screen each ────────────────────────────── Each chapter is exactly one viewport. The chapter-at-a-time feeling comes from the wheel handler in app.js, NOT from CSS snapping, and that is a correction rather than a preference: snapping and the handler were pulling in opposite directions and the visitor felt the fight. Measured at 1440, leaving the last chapter downwards — the handler scrolls to the foot of the run while `proximity` drags back to the frame's own snap point, which is nearer. Six wheel gestures moved the page 831px and three of them moved it nothing at all. Coming back up out of Willkommen was worse: its snap point sat 831px below the last chapter's, so every gesture short of that fell back into it — six gestures, 4431 every time, the page never moved once. Giving the sections below snap points of their own was the previous attempt at this and it is what built that trap. With no snap container at all the same six gestures travel 900px and 1801px, and the handler still delivers one frame per gesture on a wheel or a trackpad. On touch there is no wheel event, so a phone now scrolls natively — which is the right place to land anyway: a chapter is not one viewport on a phone once the frame and the text stack, and iOS resizes the viewport under your thumb as the address bar collapses. To bring it back: `scroll-snap-type:y proximity` on html and `scroll-snap-align:start` here. */ .chapter{ position:relative; height:100svh; overflow:clip; } .stage{ position:relative; height:100%; background:transparent; /* height of one letterbox band, so the type can be placed inside the photograph instead of drifting onto the black at short viewports */ --lb:max(0px, calc((100svh - 100vw / 2.39) / 2)); } .frame{ position:absolute; left:0; right:0; top:50%; translate:0 -50%; aspect-ratio:2.39; max-height:100%; overflow:clip; } .frame picture{display:contents} .frame img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.16) saturate(.82) brightness(.84); transform-origin:52% 48%; transform:scale(1.07); transition:transform 1.7s cubic-bezier(.22,.61,.36,1); } .chapter.in .frame img{transform:scale(1)} .grade{position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; background:linear-gradient(197deg, rgba(255,196,128,.34) 0%, rgba(255,196,128,0) 46%, rgba(12,42,64,.58) 100%)} .grade::after{content:""; position:absolute; inset:0; background:#0d2436; mix-blend-mode:lighten; opacity:.13} .vignette{position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 80% 88% at 50% 44%, rgba(0,0,0,0) 30%, rgba(0,0,0,.8) 100%)} /* ── one thought per screen ───────────────────────────────── Placement is per photograph, not per rule: bottom-left is the default, but each frame's quiet quarter was measured (mean luminance and standard deviation of every quadrant) and the type put there, so it never lands on a plate, a face or the horizon. A soft radial scrim carries the contrast the photograph cannot. */ .say{position:absolute; z-index:2; max-width:min(44rem,calc(100% - 2 * var(--pad)))} /* A wash across the full width of the frame, fading out towards the middle — the same device as the logistics slab on the title card. Two of the allowed photographs (v090 and v106) are white linen edge to edge and have no dark quarter at all, so display type on them needs carried contrast, not luck. */ .say::before{ content:""; position:absolute; z-index:-1; pointer-events:none; inset:-3.4rem calc(-100vw) -10svh calc(-1 * var(--pad)); background:linear-gradient(to top, rgba(6,8,10,.9) 0%, rgba(6,8,10,.86) 55%, rgba(6,8,10,.55) 79%, rgba(6,8,10,0) 100%); } .say-br::before{inset:-3.4rem calc(-1 * var(--pad)) -10svh -100vw} .say-tr::before{inset:-10svh calc(-1 * var(--pad)) -3.4rem -100vw; background:linear-gradient(to bottom, rgba(6,8,10,.9) 0%, rgba(6,8,10,.86) 55%, rgba(6,8,10,.55) 79%, rgba(6,8,10,0) 100%)} .say>*{opacity:0; translate:0 20px; filter:blur(6px); transition:opacity .85s ease, translate .85s cubic-bezier(.22,.61,.36,1), filter .85s ease} .chapter.in .say>*{opacity:1; translate:0 0; filter:blur(0)} .chapter.in .say>*+*{transition-delay:.16s} .say-bl{left:var(--pad); bottom:calc(var(--lb) + 4svh); --sx:0%; --sy:100%} .say-br{right:var(--pad); bottom:calc(var(--lb) + 4svh); text-align:right; --sx:100%; --sy:100%} .say-tr{right:var(--pad); text-align:right; --sx:100%; --sy:0%; top:max(calc(var(--lb) + 4svh), calc(var(--bar) + var(--navh) + 1.2rem))} .say-br .line,.say-tr .line{margin-left:auto} .line{margin:0; font-family:var(--didone); font-weight:400; font-size:clamp(1.7rem,4.2vw,3.4rem); line-height:1.08; letter-spacing:-.005em; text-wrap:balance; max-width:22ch} .line.small{margin-top:.9rem; font-family:var(--serif); font-size:clamp(1rem,1.7vw,1.45rem); line-height:1.45; color:#cfc8ba; max-width:44ch; letter-spacing:0} .line.small a{text-decoration:none; border-bottom:1px solid rgba(201,161,92,.6); white-space:nowrap} /* ── title card ─────────────────────────────────────────── */ .say-mid{left:var(--pad); right:var(--pad); top:50%; translate:0 -50%; max-width:none; display:grid; place-items:center; text-align:center; text-shadow:0 2px 22px rgba(0,0,0,.72)} .say-mid::before{inset:-3rem -2rem; background:radial-gradient(70% 80% at 50% 50%, rgba(6,8,10,.58) 0%, rgba(6,8,10,0) 76%)} .wordmark{display:inline-block; background:rgba(6,8,10,.35); padding:clamp(.9rem,2.4vw,1.7rem) clamp(1.1rem,4vw,2.8rem) clamp(1.2rem,3vw,2.1rem)} h1{margin:0; font-family:var(--didone); font-weight:400; font-size:clamp(2.4rem,9vw,6.4rem); line-height:1; letter-spacing:.14em; text-indent:.14em} .wm-sub{margin:.5em 0 0; font-family:var(--mono); font-size:clamp(.56rem,1.2vw,.78rem); letter-spacing:.42em; text-indent:.42em; color:var(--gold)} .sub{margin:1.1rem 0 0; font-size:clamp(.98rem,1.7vw,1.3rem); color:#d5cec1; font-style:italic; text-wrap:balance} /* logistics slab — never animated, never hidden */ .hero-facts{ position:absolute; left:0; right:0; bottom:calc(var(--bar) + 4svh); padding:2.6rem var(--pad) 1.4rem; text-align:center; z-index:3; background:linear-gradient(180deg, rgba(6,8,10,0) 0%, rgba(6,8,10,.78) 46%, rgba(6,8,10,.9) 100%)} .hf-line{margin:0 0 1rem; font-family:var(--mono); font-size:clamp(.6rem,1.3vw,.72rem); letter-spacing:.2em; text-transform:uppercase; color:#ded7c9; display:flex; gap:.4rem .8em; justify-content:center; align-items:baseline; flex-wrap:wrap} @media (max-width:620px){ .hf-line{flex-direction:column; gap:.5rem} .hf-line .sep{display:none} } .hf-line a{text-decoration:none; border-bottom:1px solid rgba(201,161,92,.5)} .hf-line .sep{margin:0 .8em; color:var(--gold)} .hf-cta{margin:0; display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap} .cta{ display:inline-block; text-decoration:none; background:var(--gold); color:var(--ink); font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; padding:.85rem 1.5rem; transition:background .25s} .cta:hover{background:#dcb676} .cta-ghost{background:transparent; color:var(--paper); border:1px solid var(--gold)} .cta-ghost:hover{background:rgba(201,161,92,.14)} .label,.scroll-hint{font-family:var(--mono); font-weight:300; font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--haze); margin:0} .scroll-hint{position:absolute; left:var(--pad); bottom:calc(var(--bar) + 2.2svh); z-index:2; opacity:0; transition:opacity .6s ease} #title.in .scroll-hint{opacity:1} /* ── phone / portrait window: portrait frame, type underneath ── On a phone the photograph is portrait (see the