/* ── Zelf gehoste lettertypen ──────────────────────────────
Playfair Display en DM Sans, beide SIL Open Font License 1.1.
Opgehaald bij Google Fonts en lokaal geplaatst: dat scheelt twee
externe verbindingen op het kritieke pad en voorkomt dat het
IP-adres van elke bezoeker naar Google gaat (AVG).
Alleen de latin- en latin-ext-subsets; cyrillic en vietnamese
zijn weggelaten omdat de site Nederlandstalig is. */
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/dm-sans-italic-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/dm-sans-italic-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/dm-sans-normal-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/dm-sans-normal-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/dm-sans-normal-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/dm-sans-normal-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/dm-sans-normal-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/dm-sans-normal-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/playfair-display-italic-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/playfair-display-italic-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/playfair-display-normal-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/playfair-display-normal-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/playfair-display-normal-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/playfair-display-normal-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/playfair-display-normal-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/playfair-display-normal-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
NINETY LEUSDEN — stylesheet
============================================================
1-op-1 overgenomen uit reference/ninety-website-demo.html
(SHA-256 90af650f80bb823eb933ba87f7cace20595d2dfea2035ae7f1f4e239bbbc9541).
Goedgekeurd ontwerp: niet herontwerpen. Wat hieronder is toegevoegd
staat onderaan onder een eigen kop, met reden.
============================================================ */
:root{
--gold:#C4933F;
--gold-soft:#E0BE7E;
--black:#100D0A;
--ink:#1C1814;
--charcoal:#26211B;
--cream:#F6F1E7;
--cream-2:#EDE5D6;
--line:rgba(196,147,63,.28);
--serif:'Playfair Display',Georgia,serif;
--sans:'DM Sans',system-ui,-apple-system,sans-serif;
--pad:clamp(1.25rem,5vw,5rem);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
background:var(--black);color:var(--cream);
font-family:var(--sans);font-weight:300;line-height:1.7;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:-.01em}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.eyebrow{
display:block;
font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
color:var(--gold);font-weight:500;margin-bottom:1.4rem;
}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.btn{
display:inline-flex;align-items:center;gap:.65rem;
padding:1rem 2.1rem;border:1px solid var(--gold);
font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
background:transparent;color:var(--gold);cursor:pointer;
position:relative;overflow:hidden;transition:color .5s ease;
}
.btn::after{
content:'';position:absolute;inset:0;background:var(--gold);
transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:-1;
}
.btn:hover{color:var(--black)}
.btn:hover::after{transform:translateY(0)}
.btn span{position:relative;z-index:1}
.btn-solid{background:var(--gold);color:var(--black)}
.btn-solid::after{background:var(--cream)}
/* ============ NAV ============ */
.nav{
position:fixed;top:0;left:0;right:0;z-index:100;
display:flex;align-items:center;justify-content:space-between;
padding:1.6rem var(--pad);
transition:padding .5s ease,background .5s ease,backdrop-filter .5s ease,border-color .5s ease;
border-bottom:1px solid transparent;
}
.nav.scrolled{
padding:.85rem var(--pad);
background:rgba(16,13,10,.9);backdrop-filter:blur(14px);
border-bottom-color:var(--line);
}
.nav-logo img{height:52px;transition:height .5s ease}
.nav.scrolled .nav-logo img{height:38px}
.nav-links{display:flex;align-items:center;gap:2.4rem;list-style:none}
.nav-links a{
font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
position:relative;padding:.3rem 0;
}
.nav-links a::after{
content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
background:var(--gold);transition:width .4s ease;
}
.nav-links a:hover::after{width:100%}
.nav-cta{padding:.8rem 1.6rem}
.hamburger{display:none;width:34px;height:22px;position:relative;background:none;border:0;cursor:pointer}
.hamburger i{position:absolute;left:0;height:1px;width:100%;background:var(--cream);transition:.4s}
.hamburger i:nth-child(1){top:0}
.hamburger i:nth-child(2){top:10px}
.hamburger i:nth-child(3){top:20px}
.hamburger.active i:nth-child(1){top:10px;transform:rotate(45deg)}
.hamburger.active i:nth-child(2){opacity:0}
.hamburger.active i:nth-child(3){top:10px;transform:rotate(-45deg)}
.mobile{
position:fixed;inset:0;z-index:99;background:var(--black);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.mobile.active{opacity:1;pointer-events:all}
.mobile img{height:64px;margin-bottom:1.5rem}
.mobile a{font-family:var(--serif);font-size:1.9rem}
/* ============ HERO ============ */
.hero{
position:relative;height:100dvh;min-height:640px;
display:flex;align-items:center;justify-content:center;text-align:center;
overflow:hidden;background:var(--black);
}
.hero-bg{
position:absolute;inset:-8%;
background:
radial-gradient(ellipse 70% 55% at 50% 42%,rgba(196,147,63,.24),transparent 70%),
radial-gradient(circle at 18% 78%,rgba(140,74,26,.34),transparent 58%),
radial-gradient(circle at 84% 22%,rgba(88,52,24,.4),transparent 60%),
linear-gradient(165deg,#241C13 0%,#140F0A 50%,#0B0806 100%);
animation:kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns{
from{transform:scale(1) translate3d(0,0,0)}
to{transform:scale(1.14) translate3d(-1.5%,-1.5%,0)}
}
.hero-grain{
position:absolute;inset:0;opacity:.16;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(11,8,6,.82) 100%)}
.hero-inner{position:relative;z-index:2;padding:0 var(--pad);max-width:960px}
.hero h1{
font-size:clamp(2.6rem,7.6vw,6rem);letter-spacing:-.02em;
}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero p{
margin:2rem auto 2.8rem;max-width:560px;
font-size:clamp(.95rem,1.4vw,1.1rem);color:rgba(246,241,231,.74);
}
.hero-rule{width:1px;height:66px;background:linear-gradient(var(--gold),transparent);margin:0 auto 2.2rem}
/* hero entrance */
.hero-line{display:block;overflow:hidden}
.hero-line>span{display:block;transform:translateY(110%);animation:lineUp 1.15s cubic-bezier(.16,1,.3,1) forwards}
.hero-line:nth-of-type(2)>span{animation-delay:.14s}
@keyframes lineUp{to{transform:translateY(0)}}
.fade-up{opacity:0;transform:translateY(24px);animation:fadeUp 1s ease forwards}
.d1{animation-delay:.5s}.d2{animation-delay:.72s}.d3{animation-delay:.9s}
@keyframes fadeUp{to{opacity:1;transform:none}}
.scrolldown{
position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);z-index:2;
font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(246,241,231,.5);
display:flex;flex-direction:column;align-items:center;gap:.9rem;
}
.scrolldown i{width:1px;height:46px;background:rgba(196,147,63,.6);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scaleY(.3);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}
/* ============ QUOTE BAND ============ */
.band{
background:var(--gold);color:var(--black);
padding:clamp(3rem,7vw,5.5rem) var(--pad);text-align:center;
}
.band p{font-family:var(--serif);font-size:clamp(1.5rem,3.9vw,2.9rem);line-height:1.24;max-width:900px;margin:0 auto}
.band p em{font-style:italic}
/* ============ SECTIONS ============ */
section{position:relative}
.sec{padding:clamp(4.5rem,11vw,9rem) 0}
.sec-title{font-size:clamp(2rem,4.6vw,3.5rem);margin-bottom:1.6rem}
.lead{color:rgba(246,241,231,.66);max-width:52ch}
.light{background:var(--cream);color:var(--ink)}
.light .lead{color:rgba(28,24,20,.7)}
.light .eyebrow{color:#9A6F22}
/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.figure{position:relative;aspect-ratio:4/5;overflow:hidden}
.figure .ph{position:absolute;inset:0;transform:scale(1.18);transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.figure.visible .ph{transform:scale(1)}
.figure{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s cubic-bezier(.16,1,.3,1)}
.figure.visible{clip-path:inset(0 0 0 0)}
.figure figcaption{
position:absolute;left:0;bottom:0;right:0;padding:1.1rem 1.4rem;
font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
color:rgba(246,241,231,.8);background:linear-gradient(transparent,rgba(11,8,6,.85));
}
/* photo placeholders */
.ph{background:linear-gradient(150deg,#3A2C1B,#1A130D)}
.ph-1{background:radial-gradient(circle at 32% 28%,rgba(196,147,63,.5),transparent 58%),linear-gradient(150deg,#48351F,#17110B)}
.ph-2{background:radial-gradient(circle at 68% 34%,rgba(176,96,44,.5),transparent 60%),linear-gradient(200deg,#3E2A19,#140E09)}
.ph-3{background:radial-gradient(circle at 44% 66%,rgba(140,120,60,.45),transparent 58%),linear-gradient(120deg,#33301C,#14120A)}
.ph-4{background:radial-gradient(circle at 60% 40%,rgba(196,147,63,.42),transparent 62%),linear-gradient(30deg,#2E2418,#0F0B07)}
.ph::after{
content:attr(data-label);position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(246,241,231,.34);
}
/* features */
.features{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.feature{padding:clamp(2rem,4vw,3.2rem) clamp(1.2rem,2.5vw,2.2rem);border-right:1px solid var(--line)}
.feature:last-child{border-right:0}
.feature h3{font-size:1.3rem;margin-bottom:.7rem}
.feature p{font-size:.9rem;color:rgba(246,241,231,.6)}
.feature svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.2;margin-bottom:1.4rem}
/* menu cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.5rem}
.card{
position:relative;overflow:hidden;min-height:430px;
display:flex;flex-direction:column;justify-content:flex-end;
padding:2rem;border:1px solid var(--line);
}
.card .ph{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.card:hover .ph{transform:scale(1.07)}
.card::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(11,8,6,.92))}
.card-body{position:relative;z-index:2}
.card h3{font-size:1.75rem;margin-bottom:.5rem;color:var(--cream)}
.card p{font-size:.88rem;color:rgba(246,241,231,.68);margin-bottom:1.3rem}
.card-link{
font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
display:inline-flex;align-items:center;gap:.6rem;
}
.card-link span{width:22px;height:1px;background:var(--gold);transition:width .4s ease}
.card:hover .card-link span{width:40px}
/* lunch */
.lunch{background:var(--charcoal);overflow:hidden}
.lunch .split{align-items:center}
.tag{
display:inline-block;padding:.4rem 1rem;border:1px solid var(--gold);
font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:1.6rem;
}
/* hours + prices */
.info{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2.5rem,6vw,5rem)}
.hours{width:100%;border-collapse:collapse}
.hours th{
text-align:right;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
font-weight:500;color:#9A6F22;padding-bottom:1rem;
}
.hours th:first-child{text-align:left}
.hours td{padding:.85rem 0;border-top:1px solid rgba(28,24,20,.14);font-size:.94rem;text-align:right}
.hours td:first-child{text-align:left;font-weight:500}
.hours tr.closed td{color:rgba(28,24,20,.4)}
.prices{background:var(--ink);color:var(--cream);padding:clamp(2rem,4vw,3rem);align-self:start}
.prices h3{font-size:1.6rem;margin-bottom:.4rem}
.prices .sub{font-size:.82rem;color:rgba(246,241,231,.55);margin-bottom:2rem}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1.1rem 0;border-top:1px solid rgba(246,241,231,.12)}
.price-row span{font-size:.92rem;color:rgba(246,241,231,.78)}
.price-row b{font-family:var(--serif);font-weight:400;font-size:1.7rem;color:var(--gold-soft)}
.prices small{display:block;margin-top:1.6rem;font-size:.76rem;color:rgba(246,241,231,.45);line-height:1.6}
/* faq */
.faq{max-width:880px;margin:3rem auto 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
width:100%;background:none;border:0;cursor:pointer;color:var(--cream);
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
padding:1.6rem 0;text-align:left;font-family:var(--serif);font-size:clamp(1.02rem,1.9vw,1.3rem);
transition:color .3s ease;
}
.faq-q:hover{color:var(--gold-soft)}
.faq-icon{position:relative;flex:0 0 16px;height:16px}
.faq-icon::before,.faq-icon::after{
content:'';position:absolute;background:var(--gold);transition:transform .4s ease;
}
.faq-icon::before{top:7.5px;left:0;width:16px;height:1px}
.faq-icon::after{left:7.5px;top:0;width:1px;height:16px}
.faq-item.active .faq-icon::after{transform:rotate(90deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .55s cubic-bezier(.16,1,.3,1)}
.faq-a p{padding:0 0 1.7rem;font-size:.94rem;color:rgba(246,241,231,.64);max-width:64ch}
.faq-a a{color:var(--gold);border-bottom:1px solid var(--line)}
/* app */
.app{background:var(--cream);color:var(--ink)}
.app .split{align-items:center}
.app-mock{position:relative}
.app-mock img{width:100%;height:auto;border-radius:6px}
.stores{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.stores img{height:48px;transition:transform .35s ease,opacity .35s ease}
.stores a:hover img{transform:translateY(-3px);opacity:.85}
.perks{list-style:none;margin:2rem 0 0}
.perks li{
padding:.85rem 0 .85rem 2rem;position:relative;font-size:.94rem;
color:rgba(28,24,20,.75);border-top:1px solid rgba(28,24,20,.12);
}
.perks li::before{
content:'';position:absolute;left:0;top:1.55rem;width:11px;height:1px;background:var(--gold);
}
/* insta */
.insta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-top:3rem}
.insta{position:relative;aspect-ratio:1;overflow:hidden;display:block}
.insta .ph{position:absolute;inset:0;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.insta:hover .ph{transform:scale(1.09)}
.insta em{
position:absolute;inset:0;display:flex;align-items:flex-end;padding:1rem;
font-style:normal;font-size:.74rem;color:var(--cream);opacity:0;
background:linear-gradient(transparent 40%,rgba(11,8,6,.88));transition:opacity .4s ease;z-index:2;
}
.insta:hover em{opacity:1}
.insta-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
/* reserve strip */
.reserve{
padding:clamp(4rem,9vw,7rem) 0;text-align:center;
background:
radial-gradient(ellipse 60% 80% at 50% 50%,rgba(196,147,63,.18),transparent 70%),
var(--charcoal);
border-top:1px solid var(--line);
}
.reserve h2{font-size:clamp(1.9rem,4.6vw,3.4rem);margin-bottom:1.4rem}
/* footer */
footer{background:var(--black);padding:clamp(3.5rem,7vw,5.5rem) 0 2rem;border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem}
.f-logo img{height:64px;margin-bottom:1.6rem}
footer h4{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem;font-weight:500;font-family:var(--sans)}
footer p,footer li{font-size:.9rem;color:rgba(246,241,231,.6);line-height:2}
footer ul{list-style:none}
footer a:hover{color:var(--gold-soft)}
.f-bottom{
margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid rgba(246,241,231,.1);
display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
font-size:.76rem;color:rgba(246,241,231,.4);
}
/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.stagger.visible>*{opacity:1;transform:none}
.stagger.visible>*:nth-child(2){transition-delay:.1s}
.stagger.visible>*:nth-child(3){transition-delay:.2s}
.stagger.visible>*:nth-child(4){transition-delay:.3s}
.stagger.visible>*:nth-child(5){transition-delay:.4s}
.stagger.visible>*:nth-child(6){transition-delay:.5s}
.stagger.visible>*:nth-child(7){transition-delay:.6s}
.stagger.visible>*:nth-child(8){transition-delay:.7s}
/* responsive */
@media(max-width:1000px){
.nav-links,.nav-cta{display:none}
.hamburger{display:block}
.feature-grid{grid-template-columns:1fr 1fr}
.feature:nth-child(2){border-right:0}
.feature:nth-child(1),.feature:nth-child(2){border-bottom:1px solid var(--line)}
.cards{grid-template-columns:1fr}
.card{min-height:340px}
.split,.info{grid-template-columns:1fr}
.insta-grid{grid-template-columns:1fr 1fr}
.f-grid{grid-template-columns:1fr;gap:2.2rem}
.figure{aspect-ratio:3/2}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition-duration:.01ms!important}
.reveal,.stagger>*{opacity:1;transform:none}
.figure{clip-path:none}
}
/* ── TOEVOEGINGEN OP DE DEMO (taak 07) ───────────────────────
1. Echte foto's: de demo heeft alleen gradient-placeholders.
.ph blijft bestaan als achtergrond/skeleton; ![]()
ligt
erbovenop zodra er fotografie is. width/height verplicht
tegen layout shift.
2. Reserveringswidget: slot + fallback die zonder JS blijft
staan (progressive enhancement, spec §5).
─────────────────────────────────────────────────────────── */
.ph img,
.figure img,
.card img,
.insta img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;opacity:0;transition:opacity .8s ease;
}
.ph img.loaded,
img.loaded{opacity:1}
/* zonder foto blijft het label van de placeholder zichtbaar;
met foto verdwijnt het zodra de afbeelding geladen is */
.ph:has(img.loaded)::after{opacity:0;transition:opacity .4s ease}
.widget-slot{max-width:680px;margin:0 auto}
.widget-fallback{
display:flex;flex-direction:column;align-items:center;gap:1.1rem;
padding:2.2rem var(--pad);border:1px solid var(--line);
}
.widget-fallback p{color:rgba(246,241,231,.72);font-size:.95rem;max-width:46ch}
.widget-fallback .tel{
font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--gold-soft);
}
.widget-slot[data-loaded="true"] .widget-fallback{display:none}
/* De knop naar de overlay verschijnt pas als de widget bevestigd heeft dat
online reserveren echt aanstaat — anders opent hij een lege dialoog. */
.reserve-cta{display:none;flex-direction:column;align-items:center;gap:1.2rem;
padding:2.6rem var(--pad);border:1px solid var(--line)}
.widget-slot[data-loaded="true"] .reserve-cta{display:flex}
.reserve-alt{color:rgba(246,241,231,.6);font-size:.9rem}
.reserve-alt a{color:var(--gold-soft);border-bottom:1px solid rgba(196,147,63,.35)}
.reserve-alt a:hover{color:var(--gold)}
.skip{
position:absolute;left:-9999px;top:0;z-index:200;
background:var(--gold);color:var(--black);padding:.8rem 1.4rem;
font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
}
.skip:focus{left:var(--pad);top:.8rem}
/* ── HERO-FOTO (taak 07) ─────────────────────────────────────
De demo had alleen een verloop. De foto ligt eronder; het
bestaande .hero-bg-verloop blijft eroverheen liggen zodat de
koptekst leesbaar blijft en de ken-burns-animatie intact is. */
.hero-photo{
position:absolute;inset:0;
background-image:image-set(
url("/img/foto/hero-1920.avif") type("image/avif") 1x,
url("/img/foto/hero-2560.avif") type("image/avif") 2x,
url("/img/foto/hero-1920.jpg") 1x,
url("/img/foto/hero-2560.jpg") 2x);
background-size:cover;background-position:center;
}
/* Verloop iets zwaarder dan de demo: met een echte foto eronder moet
de koptekst leesbaar blijven — contrast gaat vóór de foto. */
.hero-bg{opacity:.9}
.hero-photo::after{content:'';position:absolute;inset:0;background:rgba(11,8,6,.34)}
@media(max-width:900px){
.hero-photo{background-image:image-set(
url("/img/foto/hero-1280.avif") type("image/avif") 1x,
url("/img/foto/hero-1920.avif") type("image/avif") 2x,
url("/img/foto/hero-1280.jpg") 1x,
url("/img/foto/hero-1920.jpg") 2x)}
}
/* ── DINERKAART, VACATURES EN KAARTWEERGAVE (SEO-ronde) ──────
Drie toevoegingen op het goedgekeurde ontwerp, elk met reden:
1. .menu-* — de kaart stond alleen in een PDF; als tekst is hij
vindbaar voor zoekmachines en leesbaar voor AI-assistenten.
2. .vac-* — de vacaturepagina van de oude site verdwijnt bij
livegang; die inhoud moet ergens landen.
3. .map-* — adres zonder kaart kost bezoekers die willen komen.
Alles gebruikt de bestaande tokens: geen nieuwe kleuren of fonts. */
/* De kaart is lang; drie inklapbare blokken houden de sectie kort. Zelfde
accordeon-idee als de FAQ, maar hier mogen er meerdere tegelijk open staan:
gasten vergelijken voor- en hoofdgerechten. Alles staat in de HTML, ook
dichtgeklapt — zoekmachines en AI-assistenten lezen het gewoon. */
.menu-acc{border-top:1px solid rgba(28,24,20,.16);margin-top:3rem}
.menu-fold{border-bottom:1px solid rgba(28,24,20,.16)}
.menu-fold h3{margin:0}
.menu-fold-q{
width:100%;background:none;border:0;cursor:pointer;color:var(--ink);
display:flex;align-items:center;gap:1.2rem;
padding:1.5rem 0;text-align:left;font-family:var(--serif);
font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:400;
transition:color .3s ease;
}
.menu-fold-q:hover{color:#9A6F22}
.menu-fold-title{flex:1 1 auto}
.menu-count{
font-family:var(--sans);font-size:.68rem;font-weight:400;letter-spacing:.18em;
text-transform:uppercase;color:rgba(28,24,20,.45);white-space:nowrap;
}
.menu-fold .faq-icon::before,.menu-fold .faq-icon::after{background:#9A6F22}
.menu-fold.active .faq-icon::after{transform:rotate(90deg)}
/* Uitklappen via grid-template-rows in plaats van max-height: bij een
meerkoloms indeling rapporteert scrollHeight 0, waardoor de max-height-truc
het blok dichtgeklapt laat. Deze variant heeft geen gemeten hoogte nodig. */
.menu-fold-a{
display:grid;grid-template-rows:0fr;
transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1);
}
.menu-fold.active .menu-fold-a{grid-template-rows:1fr}
/* Het afknippen gebeurt op .menu-clip, niet op .menu-cols zelf: een
meerkoloms element vormt een eigen opmaakcontext en krimpt niet naar nul,
waardoor er dichtgeklapt een regel bleef doorschemeren. */
.menu-fold-a > .menu-clip{min-height:0;overflow:hidden}
.menu-cols{
columns:3;column-gap:2.6rem;
padding:.4rem 0 2.4rem;
}
.menu-group{break-inside:avoid;-webkit-column-break-inside:avoid;padding-bottom:1.6rem}
/* Een sectie met maar één groep (Desserts) zou anders in de eerste kolom blijven
staan met twee kolommen leeg; daar mag de lijst juist wél doorlopen. */
.menu-cols-flow .menu-group{break-inside:auto;-webkit-column-break-inside:auto}
.menu-cols-flow .menu-list li{break-inside:avoid;-webkit-column-break-inside:avoid}
.menu-sub{
font-family:var(--sans);font-size:.7rem;font-weight:500;
letter-spacing:.22em;text-transform:uppercase;color:#9A6F22;
margin:0 0 .7rem;
}
.menu-list{list-style:none}
.menu-list li{padding:.5rem 0;border-bottom:1px solid rgba(28,24,20,.07)}
.menu-list li:last-child{border-bottom:0}
/* De namen komen als blokletters uit de kaart; iets meer letterruimte houdt ze leesbaar. */
.menu-item{
display:block;color:var(--ink);font-size:.9rem;font-weight:400;
letter-spacing:.04em;
}
.menu-desc{
display:block;color:rgba(28,24,20,.62);font-size:.82rem;
line-height:1.5;margin-top:.15rem;
}
.menu-note{
margin-top:3rem;font-size:.85rem;color:rgba(28,24,20,.62);max-width:70ch;
}
.menu-note a{color:#9A6F22;border-bottom:1px solid rgba(154,111,34,.4)}
.menu-note a:hover{color:var(--ink)}
/* Vacatures */
.vac-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:3rem}
.vac{border:1px solid var(--line);padding:2.4rem;background:rgba(196,147,63,.03)}
.vac h3{font-size:1.5rem;margin-bottom:.4rem}
.vac .vac-meta{
font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--gold);margin-bottom:1.4rem;
}
.vac p{color:rgba(246,241,231,.66);font-size:.92rem}
.vac ul{list-style:none;margin:1.2rem 0 0}
.vac li{position:relative;padding-left:1.4rem;margin-bottom:.5rem;
color:rgba(246,241,231,.66);font-size:.9rem}
.vac li::before{
content:'';position:absolute;left:0;top:.6em;
width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg);
}
.vac .btn{margin-top:1.8rem}
/* Kaartweergave in de contactsectie */
.map-wrap{
position:relative;margin-top:3.5rem;border:1px solid var(--line);
background:var(--charcoal);
}
.map-wrap iframe{
display:block;width:100%;height:420px;border:0;
filter:grayscale(1) invert(.92) contrast(.86) hue-rotate(180deg);
}
/* Facade: eigen markup, dus altijd meteen zichtbaar en zonder externe verzoeken. */
.map-facade{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:1rem;height:420px;padding:2rem;text-align:center;
background:
radial-gradient(circle at 50% 45%, rgba(196,147,63,.16), transparent 62%),
repeating-linear-gradient(90deg, rgba(196,147,63,.07) 0 1px, transparent 1px 64px),
repeating-linear-gradient(0deg, rgba(196,147,63,.07) 0 1px, transparent 1px 64px),
var(--charcoal);
}
.map-pin{
width:18px;height:18px;border:2px solid var(--gold);border-radius:50% 50% 50% 0;
transform:rotate(-45deg);position:relative;
}
.map-pin::after{
content:'';position:absolute;inset:4px;background:var(--gold);border-radius:50%;
}
.map-place{font-family:var(--serif);font-size:1.3rem;line-height:1.4;color:var(--cream)}
.map-privacy{font-size:.76rem;color:rgba(246,241,231,.45);max-width:34ch}
@media(max-width:640px){.map-facade{height:320px}}
.map-bar{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:1rem;padding:1.2rem 1.6rem;border-top:1px solid var(--line);
}
.map-bar p{font-size:.88rem;color:rgba(246,241,231,.66)}
.map-bar strong{color:var(--cream);font-weight:400}
.map-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.map-actions a{
font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--gold-soft);border:1px solid var(--line);padding:.7rem 1.2rem;
transition:background .3s ease,color .3s ease;
}
.map-actions a:hover{background:var(--gold);color:var(--black)}
@media(max-width:1000px){
.menu-cols{columns:2}
.vac-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
.menu-cols{columns:1}
.map-wrap iframe{height:320px}
}
/* Zevende navigatie-item (Vacatures): tussen 1000 en 1200px wordt de balk krap. */
@media(min-width:1001px) and (max-width:1200px){
.nav-links{gap:1.5rem}
.nav-links a{font-size:.68rem}
}
/* ── Reserveerblok verwijderd, achtergrond doorgeschoven ─────
De sectie "Schuif aan bij Ninety" is eruit: de knoppen in de balk en de hero
openen dezelfde overlay, dus het blok voegde niets toe. De gloed die die
sectie had, staat nu op de vacaturesectie zodat licht en donker elkaar blijven
afwisselen. Het widget-slot zelf is naar de footer verhuisd — main.js laadt de
widget via dat element, en de terugval met telefoonnummer moet blijven staan
(progressive enhancement, spec §5). */
.sec.accent{
background:
radial-gradient(ellipse 60% 80% at 50% 45%,rgba(196,147,63,.16),transparent 70%),
var(--charcoal);
border-top:1px solid var(--line);
}
.footer-reserve{
margin:3.2rem 0;padding-top:3.2rem;border-top:1px solid var(--line);
}
.footer-reserve .widget-slot{max-width:620px}
/* ── FAQ: eerst vijf vragen, de rest achter een knop ─────────
Vijftien vragen onder elkaar maakt de sectie lang. De verborgen vragen staan
gewoon in de HTML — alleen verstopt met CSS — dus zoekmachines en
AI-assistenten lezen ze net zo goed als de zichtbare vijf. */
.faq-extra{display:none}
.faq.open .faq-extra{display:block}
.faq-more{max-width:880px;margin:2rem auto 0;text-align:center}
.faq-toggle{cursor:pointer}
/* ── Citaatbalk onder de hero ────────────────────────────────
Was een gouden vlak met zwarte tekst. Nu dezelfde donkere gloed als de
vacaturesectie, met witte tekst en het cursieve woord in goud. De regel
staat hier onderaan en niet bij .band zelf, want het goedgekeurde ontwerp
blijft in dit bestand ongewijzigd (zie kop). */
.band{
background:
radial-gradient(ellipse 60% 80% at 50% 45%,rgba(196,147,63,.16),transparent 70%),
var(--charcoal);
color:var(--cream);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.band p em{color:var(--gold);font-style:italic}
/* ── Heroverhouding: foto meer naar voren, tint neutraler ────
Boven de foto lagen vier lagen: het warme verloop van de demo op 90%, een
bruinige sluier, ruis en een vignet in dezelfde bruine tint. Samen maakten
die de foto donkerbruin en nauwelijks leesbaar. Het verloop gaat flink
omlaag zodat de foto doorkomt; de sluier en het vignet worden neutraal
zwart in plaats van bruin. Contrast onder de koptekst blijft leidend. */
.hero-bg{opacity:.18}
.hero-photo::after{background:rgba(0,0,0,.56)}
.hero-vignette{background:radial-gradient(ellipse 64% 62% at 50% 46%,#000 6%,rgba(0,0,0,.8) 40%,rgba(0,0,0,.42) 68%,transparent 96%)}
/* ── Hele pagina een tint dieper ─────────────────────────────
De donkere tinten een stap omlaag: body, navigatie, mobiel menu, footer
(--black) en de secties lunch, citaatbalk en vacatures (--charcoal), plus
het tarievenblok (--ink). De crèmekleurige secties blijven licht, anders
valt de afwisseling weg waar het ontwerp op leunt. */
:root{
--black:#0A0806;
--charcoal:#1B1712;
--ink:#151210;
}
/* "culinair" in de kop stond op de lichte goudtint (--gold-soft) en week
daarmee af van het merkgoud in het logo en de knoppen. Gelijkgetrokken. */
.hero h1 em{color:var(--gold)}
/* Eén vacature in plaats van twee: een tweekoloms raster laat dan een gat vallen. */
.vac-grid.vac-solo{grid-template-columns:1fr;max-width:680px}
/* ── DESIGNRONDE (toegankelijkheid en afwerking) ─────────────
Bevindingen uit de review met de designskills; geen herontwerp,
alleen craft. Per punt de reden:
1.