*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box
}
html {
scroll-behavior: smooth
}
img {
display: block;
max-width: 100%;
height: auto
}
button {
cursor: pointer;
font-family: inherit;
border: none;
background: none
}
p+p {
margin-top: 15px;
} :root {
--bg: #080e1b;
--bg2: #070d1a;
--gold: #c4984a;
--gl: #d8b068;
--gd: #7a5e28;
--cr: #ddd0b4;
--mu: #8f8b85;
--ln: rgba(196, 152, 74, .12);
--ln2: rgba(196, 152, 74, .06);
} html,
body {
background: #09101f !important;
background-color: #09101f !important
}
body {
color: var(--cr);
font-family: 'Jost', sans-serif;
font-weight: 300;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} body::after {
content: '';
position: fixed;
inset: 0;
z-index: 9000;
pointer-events: none;
opacity: .018;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 180px;
} .skip-link {
position: absolute;
top: -100%;
left: 1rem;
background: var(--gold);
color: var(--bg);
font-size: .75rem;
padding: .6rem 1.4rem;
text-decoration: none;
z-index: 99999;
transition: top .2s;
display: none;
}
.skip-link:focus {
top: .6rem
} :focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px
}
:focus:not(:focus-visible) {
outline: none
} .rv {
opacity: 0;
transform: translateY(18px);
transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1)
}
@media(max-width:767px) {
.gallerij .rv:nth-child(3) {
grid-column: span 2;
}
}
.rv.on {
opacity: 1;
transform: none
}
.d1 {
transition-delay: .1s
}
.d2 {
transition-delay: .2s
}
.d3 {
transition-delay: .32s
} .cap {
font-size: .72rem;
font-weight: 500;
letter-spacing: .4em;
text-transform: uppercase;
color: var(--gold);
} .btn {
display: inline-block;
text-decoration: none;
font-family: 'Jost', sans-serif;
font-size: .66rem;
font-weight: 500;
letter-spacing: .28em;
text-transform: uppercase;
padding: .95rem 2.6rem;
transition: all .28s;
}
.btn-g {
color: var(--bg);
background: var(--gold);
border: 1px solid var(--gd)
}
.btn-g:hover {
background: var(--gl);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(196, 152, 74, .22)
}
.btn-o {
color: var(--gold);
border: 1px solid rgba(196, 152, 74, .34);
background: transparent
}
.btn-o:hover {
border-color: var(--gold);
background: rgba(196, 152, 74, .07);
transform: translateY(-2px)
} .bs-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 500;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5vw;
height: 64px;
background: transparent;
transition: background .4s, backdrop-filter .4s, height .4s;
}
.bs-nav.solid {
background: rgba(7, 13, 26, .93);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
height: 56px;
border-bottom: 1px solid var(--ln);
}
.nav-logo {
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .12em;
color: var(--cr);
text-decoration: none;
opacity: 0;
max-width: 130px;
transition: opacity .3s;
}
.bs-nav.solid .nav-logo,
.menu-top-logo {
opacity: 1;
a {
max-width: 130px;
}
}
.nav-right {
display: flex;
align-items: center;
gap: 1.6rem
}
.nav-link {
font-size: .65rem;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: rgba(221, 208, 180, .45);
text-decoration: none;
transition: color .25s;
}
.nav-link:hover {
color: var(--gold)
}
.nav-menu-btn {
font-size: .65rem;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold);
padding: .55rem 1.4rem;
border: 1px solid rgba(196, 152, 74, .34);
background: transparent;
transition: all .25s;
}
.nav-menu-btn:hover {
border-color: var(--gold);
background: rgba(196, 152, 74, .08)
} .hero {
height: 100svh;
min-height: 640px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 50%;
background-repeat: no-repeat;
filter: brightness(.2) saturate(0.9);
animation: hzoom 32s ease-in-out infinite alternate;
}
@keyframes hzoom {
from {
transform: scale(1.07)
}
to {
transform: scale(1)
}
}
.hero-fade {
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(9, 16, 31, .55) 0%, rgba(9, 16, 31, 0) 20%,
rgba(9, 16, 31, 0) 52%, rgba(9, 16, 31, .98) 100%);
}
.hero-vline {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(196, 152, 74, .07) 30%, rgba(196, 152, 74, .06) 70%, transparent);
pointer-events: none;
}
.hero-vline:nth-child(3) {
left: 8vw
}
.hero-vline:nth-child(4) {
right: 8vw
}
.hero-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
text-align: center;
padding: 2rem 5vw;
animation: hfade 2s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes hfade {
from {
opacity: 0;
transform: translateY(12px)
}
to {
opacity: 1;
transform: none
}
}
.hero-extra {
text-align: center;
margin-top: 50px;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold);
opacity: .75;
}
.logo-card {
display: inline-flex;
position: relative;
padding: 64px 72px 60px;
background: rgba(7, 13, 26, .78);
margin-bottom: 4rem;
border: 1px solid rgba(196, 152, 74, .12);
}
.logo-card::before,
.logo-card::after,
.logo-card .tc,
.logo-card .bc {
content: '';
position: absolute;
width: 14px;
height: 14px;
border-color: rgba(196, 152, 74, .38);
border-style: solid;
}
.logo-card::before {
top: -1px;
left: -1px;
border-width: 1px 0 0 1px
}
.logo-card::after {
top: -1px;
right: -1px;
border-width: 1px 1px 0 0
}
.logo-card .tc {
bottom: -1px;
left: -1px;
border-width: 0 0 1px 1px
}
.logo-card .bc {
bottom: -1px;
right: -1px;
border-width: 0 1px 1px 0
}
.logo-img {
width: min(460px, 68vw);
height: auto
}
.hero-tag {
font-family: 'Playfair Display', serif;
font-size: clamp(2.2rem, 2.4vw, 2rem);
font-weight: 400;
font-style: italic;
color: var(--cr);
margin-bottom: .75rem;
opacity: .88;
}
.hero-tag-sub {
font-size: 15px;
font-weight: 400;
color: var(--cr);
margin-bottom: 3.5rem;
opacity: .88;
max-width: 590px;
}
.hero-ctas {
display: flex;
gap: .85rem;
flex-wrap: wrap;
justify-content: center
}
.hero-bar {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--ln);
}
.hb {
padding: 1.4rem 2vw;
border-right: 1px solid var(--ln);
display: flex;
flex-direction: column;
gap: .4rem;
}
.hb:last-child {
border-right: none
}
.hb-l {
font-size: .62rem;
font-weight: 500;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold);
opacity: .55
}
.hb-v {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-style: italic;
color: var(--cr)
}
.hero-scroll {
position: absolute;
bottom: 7.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
opacity: .16;
pointer-events: none;
}
.hero-scroll span {
font-size: .62rem;
letter-spacing: .36em;
text-transform: uppercase;
color: var(--mu)
}
.scroll-bar {
width: 1px;
height: 38px;
background: linear-gradient(to bottom, var(--gold), transparent);
animation: spulse 3s ease-in-out infinite;
}
@keyframes spulse {
0% {
opacity: 0;
transform: scaleY(0);
transform-origin: top
}
40% {
opacity: 1
}
100% {
opacity: 0;
transform: scaleY(1);
transform-origin: top
}
} #concept {
background: var(--bg);
}
.concept {
max-width: 960px;
margin: 0 auto;
padding: 10rem 5vw;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8rem;
align-items: start;
}
.c-hl {
font-family: 'Playfair Display', serif;
font-size: clamp(2.4rem, 4.5vw, 3.6rem);
font-weight: 700;
line-height: 1.08;
color: var(--cr);
letter-spacing: -.01em;
margin-top: 2rem;
}
.c-hl em {
color: var(--gl);
font-style: italic;
font-weight: 400;
display: block;
font-size: .82em;
margin-top: .12em
}
.c-right {
padding-top: 2rem
}
.c-p {
font-size: 1rem;
font-weight: 300;
line-height: 2.1;
color: var(--mu);
margin-bottom: 1.4rem
}
.c-p strong {
color: var(--cr);
font-weight: 400
}
.c-quote {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
font-style: italic;
color: var(--cr);
border-left: 2px solid var(--gold);
padding: 0 0 0 1.5rem;
margin: 2.4rem 0;
line-height: 1.7;
}
.c-tags {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-top: 2rem
}
.ctag {
font-size: .65rem;
font-weight: 400;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mu);
border: 1px solid var(--ln);
padding: .3rem 1rem;
transition: all .3s;
cursor: default;
}
.ctag:hover {
border-color: rgba(196, 152, 74, .4);
color: var(--gold)
} .foto-breed {
width: 100%;
height: clamp(280px, 55vh, 600px);
overflow: hidden;
position: relative
}
.foto-breed img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 65%;
filter: brightness(.8) saturate(.8);
transition: transform 2.5s cubic-bezier(.22, 1, .36, 1);
}
.foto-breed:hover img {
transform: scale(1.03)
}
.foto-breed::before,
.foto-breed::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(196, 152, 74, .18), transparent);
z-index: 1;
}
.foto-breed::before {
top: 0
}
.foto-breed::after {
bottom: 0
} .smaken {
padding: 9rem 5vw;
overflow: hidden;
position: relative
}
.smaken-inner {
max-width: 1000px;
margin: 0 auto
} .smaken-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0
}
.sm-item {
display: flex;
align-items: flex-start;
gap: 2.5rem;
padding: 3.5rem 0;
border-bottom: 1px solid var(--ln);
transition: padding-left .4s cubic-bezier(.22, 1, .36, 1);
}
.sm-item:nth-child(odd) {
padding-right: 5rem;
border-right: 1px solid var(--ln)
}
.sm-item:nth-child(even) {
padding-left: 5rem
}
.sm-item:last-child {
border-bottom: none
}  .sm-num {
font-family: 'Playfair Display', serif;
font-size: 3.2rem;
font-weight: 900;
font-style: italic;
color: rgba(196, 152, 74, .12);
line-height: 1;
flex-shrink: 0;
transition: color .35s;
}
.sm-item:hover .sm-num {
color: rgba(196, 152, 74, .3)
}
.sm-nl {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 400;
font-style: italic;
color: var(--gl);
display: block;
margin-bottom: .3rem;
line-height: 1
}
.sm-en {
font-size: .64rem;
font-weight: 500;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--mu);
opacity: .45;
display: block;
margin-bottom: 1rem
}
.sm-desc {
font-size: 1rem;
font-weight: 300;
line-height: 1.85;
color: var(--mu)
}
.sm-item.full {
grid-column: 1/-1;
border-right: none;
padding-left: 0;
padding-right: 0;
border-bottom: none;
border-top: 1px solid var(--ln);
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
gap: 1.2rem;
padding-top: 4rem;
}
.sm-item.full .sm-num {
font-size: 5.5rem
}
.sm-item.full .sm-nl {
font-size: 2.2rem
}
.sm-item.full:hover {
padding-left: 0
} .gallerij { padding-top: 2rem
}
.gal-hdr {
padding: 4rem 5vw 2.5rem;
max-width: 1100px;
margin: 0 auto
}
.gal-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
grid-template-rows: 300px 240px;
gap: 4px;
}
.gc {
overflow: hidden;
position: relative;
cursor: pointer
}
.gc.tall {
grid-row: span 2
}
.gc.wide {
grid-column: span 2
}
.gc img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(.75) saturate(.8);
transition: transform 1.2s cubic-bezier(.22, 1, .36, 1), filter .5s;
}
.gc:hover img {
transform: scale(1.07);
filter: brightness(.85) saturate(.9)
}
.gc::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(7, 13, 26, .5));
pointer-events: none
}
.gc-lbl {
position: absolute;
bottom: 1.4rem;
left: 1.6rem;
z-index: 1;
font-size: .65rem;
font-weight: 500;
letter-spacing: .28em;
text-transform: uppercase;
color: rgba(221, 208, 180, .5);
border-bottom: 1px solid rgba(196, 152, 74, .28);
padding-bottom: .35rem;
} .dagdelen {
background: #060c17;
}
.dagdelen-balk {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 0.5px solid rgba(196, 152, 74, 0.3);
border-bottom: 0.5px solid rgba(196, 152, 74, 0.3);
}
.db-item {
padding: 2rem 2.5rem;
border-right: 0.5px solid rgba(196, 152, 74, 0.2);
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
text-align: center;
}
.db-item:last-child {
border-right: none;
}
.db-tijd {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #c4984a;
}
.db-titel {
font-size: 16px;
font-weight: 500;
color: #f0ebe0;
margin-top: 2px;
}
.db-desc {
font-size: 13px;
color: #9aa5b4;
line-height: 1.6;
}
.db-prijs {
font-size: 22px;
font-weight: 500;
color: #f0ebe0;
margin-top: 6px;
}
.db-prijs span {
font-size: 13px;
font-weight: 400;
color: #9aa5b4;
}
@media (max-width: 768px) {
.dagdelen-balk {
grid-template-columns: 1fr;
}
.db-item {
border-right: none;
border-bottom: 0.5px solid rgba(196, 152, 74, 0.2);
padding: 1.5rem;
}
.db-item:last-child {
border-bottom: none;
}
} .sfeer {
padding: 11rem 5vw;
border-top: 1px solid var(--ln);
position: relative;
overflow: hidden
}
.sfeer::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 55% 60% at 100% 50%, rgba(196, 152, 74, .04) 0%, transparent 65%);
pointer-events: none
}
.sfeer-in {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10rem;
align-items: start
}
.sw {
font-family: 'Playfair Display', serif;
display: block;
padding: .18rem 0;
border-bottom: 1px solid rgba(196, 152, 74, .09);
line-height: 1.05
}
.sw-xl {
font-size: clamp(2.8rem, 6vw, 5rem);
font-weight: 700;
color: var(--cr);
}
.sw-lg {
font-size: clamp(1.6rem, 3vw, 2.5rem);
font-weight: 400;
font-style: italic;
color: var(--cr)
}
.sw-sm {
font-size: clamp(1rem, 1.8vw, 1.45rem);
font-weight: 300;
font-style: italic;
color: var(--mu)
}
.sfeer-r {
padding-top: 4rem
}
.sep {
width: 40px;
height: 1px;
background: var(--gold);
opacity: .45;
margin-bottom: 2.4rem
}
.sfeer-p {
font-size: 1rem;
font-weight: 300;
line-height: 2.1;
color: var(--mu);
margin-bottom: 1.4rem
}
.sfeer-p strong {
color: var(--cr);
font-weight: 400
} .praktisch {
padding: 11rem 5vw 10rem;
background: var(--bg2);
position: relative;
overflow: hidden
}
.praktisch::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 45% 50% at 5% 90%, rgba(196, 152, 74, .05) 0%, transparent 65%)
}
.praktisch::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(196, 152, 74, .18), transparent)
}
.pr-in {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10rem;
align-items: start;
position: relative;
z-index: 1
}
.pr-hl {
font-family: 'Playfair Display', serif;
font-size: clamp(4rem, 9vw, 8rem);
font-weight: 900;
line-height: .88;
letter-spacing: -.03em;
color: var(--cr);
margin-bottom: 5rem
}
.pr-hl em {
display: block;
font-weight: 400;
font-style: italic;
color: var(--gl);
letter-spacing: 0;
font-size: .72em
}
.ib {
margin-bottom: 3.5rem;
padding-bottom: 3.5rem;
border-bottom: 1px solid var(--ln)
}
.ib:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0
}
.ibl {
font-size: .66rem;
font-weight: 500;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold);
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.2rem
}
.ibl::before {
content: '';
width: 12px;
height: 1px;
background: var(--gold);
opacity: .4;
flex-shrink: 0
}
.ibv {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 400;
color: var(--cr);
line-height: 1.9
}
.ibv a {
color: var(--gl);
text-decoration: none;
border-bottom: 1px solid rgba(196, 152, 74, .18);
transition: border-color .3s
}
.ibv a:hover {
border-color: var(--gl)
}
.uren {
display: grid;
grid-template-columns: auto 1fr;
gap: .45rem 2rem;
font-family: 'Playfair Display', serif;
font-size: 1rem;
color: var(--cr);
align-items: end;
}
.dag {
color: var(--mu);
font-family: 'Jost', sans-serif;
font-weight: 300;
font-size: .88rem
}
.gsl {
opacity: .28;
font-style: italic
}
.pr-r {
padding-top: 2rem
}
.ghost {
font-family: 'Playfair Display', serif;
font-size: clamp(4.5rem, 10vw, 9rem);
font-weight: 900;
font-style: italic;
line-height: .86;
letter-spacing: -.03em;
color: rgba(196, 152, 74, .1);
user-select: none;
margin-bottom: 4rem
}
.ig-link {
display: flex;
align-items: center;
gap: 1.2rem;
text-decoration: none;
padding: 1.4rem 1.8rem;
border: 1px solid var(--ln);
transition: border-color .3s, background .3s;
margin-bottom: 2rem;
background-color: #040914;
}
.ig-link:hover {
border-color: rgba(196, 152, 74, .36);
background: rgba(196, 152, 74, .04)
}
.ig-icon {
width: 17px;
height: 17px;
opacity: .62;
flex-shrink: 0
}
.ig-handle {
font-size: .76rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--mu)
}
.ig-arrow {
margin-left: auto;
opacity: .2;
color: var(--gold)
}
.pr-note {
font-size: .65rem;
font-weight: 300;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--mu); line-height: 2.2
} .site-footer {
background: var(--bg2);
border-top: 1px solid var(--ln);
padding: 3.5rem 5vw;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
overflow: hidden;
min-height: 110px;
}
.site-footer::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' fill='none'%3E%3Cg stroke='%23c4984a' stroke-width='0.6' opacity='0.16'%3E%3Crect x='340' y='80' width='120' height='80' rx='2'/%3E%3Crect x='355' y='95' width='35' height='50' rx='1'/%3E%3Crect x='400' y='92' width='45' height='55' rx='1'/%3E%3Cpath d='M390 95L390 60L395 52L400 60L400 95'/%3E%3Cline x1='200' y1='140' x2='600' y2='140'/%3E%3Cline x1='340' y1='40' x2='340' y2='240'/%3E%3Cline x1='460' y1='40' x2='460' y2='240'/%3E%3Cline x1='150' y1='100' x2='650' y2='100'/%3E%3Cline x1='150' y1='180' x2='650' y2='180'/%3E%3Cpath d='M100 200Q200 185 300 195Q400 205 500 190Q600 175 700 185' stroke-width='2.2' opacity='0.2'/%3E%3Ccircle cx='400' cy='140' r='5' stroke='%23c4984a' stroke-width='1.4' opacity='0.55'/%3E%3Ccircle cx='400' cy='140' r='12' stroke='%23c4984a' stroke-width='0.7' opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
background-position: center;
pointer-events: none;
}
.site-footer::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--bg2) 0%, rgba(7, 13, 26, .65) 40%, rgba(7, 13, 26, .65) 60%, var(--bg2) 100%);
pointer-events: none;
}
.ft-logo {
height: 18px;
opacity: .75;
background: rgba(7, 13, 26, .8);
padding: 4px 11px;
position: relative;
z-index: 1
}
.ft-loc {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: .4rem
}
.ft-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--gold);
opacity: .55;
box-shadow: 0 0 0 3px rgba(196, 152, 74, .13), 0 0 0 6px rgba(196, 152, 74, .05)
}
.ft-loc-lbl {
font-size: .62rem;
font-weight: 500;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold);
opacity: .5
}
.ft-copy {
font-size: .6rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--mu);
opacity: .2;
text-align: right;
position: relative;
z-index: 1
}
.ft-copy span {
display: block;
margin-bottom: .2rem
}
.site-footer__copy {
z-index: 9;
} .menu-overlay {
position: fixed;
inset: 0;
z-index: 800;
display: flex;
background: rgba(7, 13, 26, 0);
opacity: 0;
pointer-events: none;
transition: opacity .4s cubic-bezier(.22, 1, .36, 1), background .4s;
}
.menu-overlay.open {
opacity: 1;
pointer-events: all;
background: rgba(7, 13, 26, .92)
}
.menu-panel {
position: relative;
width: min(660px, 100%);
margin-left: auto;
background: var(--bg2);
border-left: 1px solid var(--ln);
display: flex;
flex-direction: column;
transform: translateX(60px);
transition: transform .5s cubic-bezier(.22, 1, .36, 1);
overflow: hidden;
}
.menu-overlay.open .menu-panel {
transform: translateX(0)
}
.menu-backdrop {
position: absolute;
inset: 0;
right: min(660px, 100%);
cursor: pointer
}
.menu-top {
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem 1rem;
border-bottom: 1px solid var(--ln);
flex-shrink: 0;
}
.menu-top-logo {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 700;
letter-spacing: .1em;
color: var(--cr)
}
.menu-top-logo .logo-img {
max-width: 130px;
}
.menu-close {
width: 38px;
height: 38px;
border: 1px solid rgba(196, 152, 74, .28);
background: transparent;
color: var(--gold);
font-size: 20px;
font-weight: 300;
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s;
}
.menu-close:hover {
border-color: var(--gold);
background: rgba(196, 152, 74, .1)
}
.menu-tabs {
display: flex;
border-bottom: 1px solid var(--ln);
padding: 0 1rem;
flex-shrink: 0
}
.menu-tab {
font-size: .64rem;
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--mu);
padding: 1rem 1.5rem .8rem;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
background: transparent;
transition: color .25s, border-color .25s;
}
.menu-tab:hover {
color: var(--cr)
}
.menu-tab.on {
color: var(--gold);
border-bottom-color: var(--gold)
}
.menu-body {
flex: 1;
overflow-y: auto;
padding: 0 1rem 2.8rem;
scrollbar-width: thin;
scrollbar-color: rgba(196, 152, 74, .18) transparent;
}
.mpanel {
display: none
}
.mpanel.on {
display: block
} .mgroup {
font-size: .64rem;
font-weight: 500;
letter-spacing: .34em;
text-transform: uppercase;
color: var(--gold);
opacity: .65;
display: flex;
align-items: center;
gap: 1rem;
margin: 2.4rem 0 1rem;
}
.mgroup::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, rgba(196, 152, 74, .22), transparent)
}
.mgroup:first-child {
margin-top: 2rem
} .mitem {
display: grid;
grid-template-columns: 1fr auto;
gap: 1.4rem;
align-items: start;
padding: 1.1rem 0;
border-bottom: 1px solid var(--ln2);
transition: border-color .25s;
}
.mitem:hover {
border-color: rgba(196, 152, 74, .2)
}
.mitem:last-child {
border-bottom: none
}
.mitem-name {
font-family: 'Playfair Display', serif;
font-size: 1.02rem;
font-weight: 400;
color: var(--cr);
display: block;
margin-bottom: .28rem;
}
.mitem-desc {
font-size: .78rem;
font-weight: 300;
line-height: 1.65;
color: var(--mu)
}
.mitem-price {
font-family: 'Playfair Display', serif;
font-size: .96rem;
color: var(--gl);
white-space: nowrap;
text-align: right;
padding-top: .1rem;
}
.mitem-price-lbl {
font-size: .56rem;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--mu);
display: block;
text-align: right;
margin-bottom: .18rem;
opacity: .55;
}
.menu-note {
font-size: .64rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--mu); margin-top: 2rem;
padding-top: 1.4rem;
border-top: 1px solid var(--ln2);
} .drank-item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: .85rem 0;
border-bottom: 1px solid var(--ln2);
font-family: 'Playfair Display', serif;
}
.drank-item:last-child {
border-bottom: none
}
.drank-naam {
font-size: .95rem;
color: var(--cr)
}
.drank-prijs {
font-size: .95rem;
color: var(--gl);
padding-left: 1.4rem;
white-space: nowrap
} .wijn-hdr {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 0;
padding: .4rem 0 .6rem;
border-bottom: 1px solid var(--ln);
margin-bottom: .2rem;
}
.wijn-hdr-lbl {
font-size: .56rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--mu);
opacity: .4;
text-align: right;
padding-left: 1.6rem;
font-family: 'Jost', sans-serif;
}
.wijn-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 0;
padding: .82rem 0;
border-bottom: 1px solid var(--ln2)
}
.wijn-row:last-child {
border-bottom: none
}
.wijn-naam {
font-family: 'Playfair Display', serif;
font-size: .94rem;
color: var(--cr)
}
.wijn-kar {
font-size: .74rem;
color: var(--mu);
font-family: 'Jost', sans-serif;
margin-top: .14rem;
font-style: italic
}
.wijn-prijs {
font-family: 'Playfair Display', serif;
font-size: .94rem;
color: var(--gl);
text-align: right;
padding-left: 1.6rem
} .comb-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.4rem 2.8rem;
margin-top: .5rem
}
.comb-col-title {
font-size: .62rem;
font-weight: 500;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--gold);
opacity: .6;
padding-bottom: .6rem;
border-bottom: 1px solid var(--ln);
margin-bottom: .2rem;
}
.comb-item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: .66rem 0;
border-bottom: 1px solid var(--ln2);
font-family: 'Playfair Display', serif;
}
.comb-item:last-child {
border-bottom: none
}
.comb-naam {
font-size: 1rem;
color: var(--cr)
}
.comb-prijs {
font-size: 1rem;
color: var(--gl);
padding-left: 1rem;
white-space: nowrap
} @media(max-width:900px) {
.logo-card {
padding: 30px 32px 32px;
margin-bottom: 1rem;
}
.hb {
padding: 1.4rem 5vw;
}
.concept,
.sfeer-in,
.pr-in {
grid-template-columns: 1fr;
gap: 4rem;
padding: 5rem 5vw;
}
.sfeer {
padding: 0 5vw;
}
.c-right {
padding-top: 0
}
.sfeer-r {
padding-top: 0
}
.smaken {
background: var(--bg);
padding: 5rem 5vw;
}
.smaken-grid {
grid-template-columns: 1fr
}
.sm-item:nth-child(odd) {
border-right: none;
padding-right: 0
}
.sm-item:nth-child(even) {
padding-left: 0
}
.sm-item.full {
grid-column: 1;
border-top: 1px solid var(--ln);
padding-top: 3rem
}
.gal-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: 220px 220px 180px
}
.gc.tall {
grid-row: span 1
}
.gc.wide {
grid-column: span 2
}
.hero-bar {
grid-template-columns: 1fr 1fr
}
.hb:nth-child(3) {
border-top: 1px solid var(--ln)
}
.ghost {
display: none
}
.foto-breed {
height: 44vw;
min-height: 260px
}
.comb-cols {
grid-template-columns: 1fr
}
.praktisch {
padding: 0 5vw;
}
}
@media(max-width:600px) {
.hb-v {
font-size: 10px;
}
.hero-bar {
grid-template-columns: 1fr 1fr
}
.nav-link {
display: none
}
.site-footer {
flex-direction: column;
gap: 1.5rem;
text-align: center
}
.ft-copy {
text-align: center
}
.menu-panel {
width: 100%;
border-left: none
}
.menu-backdrop {
display: none
}
.hero-tag {
font-size: 26px;
margin-bottom: 0px;
}
.hero-tag-sub {
margin-bottom: 2.5rem;
}
.hero-extra {
max-width: 245px;
}
}