met losse (eventueel doorklikbare) items, en maar één knop (geen losse
"strong"-intro-regel). De uitklapanimatie gebruikt daarom ook eigen --hotel-gtk-*-variabelen
i.p.v. die van Recommendations, en de open/dicht-logica zit in een los script
(assets/js/hotel-good-to-know.js) zodat de twee accordeons elkaar niet kunnen sluiten. */
.hotel-gtk {
--hotel-gtk-duration: 220ms;
--hotel-gtk-ease: cubic-bezier(0.65, 0, 0.35, 1);
padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) var(--rooms-pad);
background: var(--brand-gold);
color: var(--menu-ink);
}
@media (prefers-reduced-motion: reduce) {
.hotel-gtk {
--hotel-gtk-duration: 0ms;
}
}
.hotel-gtk__inner {
max-width: var(--rooms-max);
margin: 0 auto;
}
.hotel-gtk__title {
margin: 0 0 clamp(4rem, 2.4rem + 8vw, 8rem);
font-family: var(--brand-ui-font);
font-weight: 700;
font-size: clamp(1.75rem, 0.946rem + 3.429vw, 4.375rem); /* 70px, zelfde als "OUR ROOMS" */
line-height: 1;
text-transform: uppercase;
}
.hotel-gtk__row {
display: grid;
grid-template-columns: minmax(0, 30fr) minmax(0, 65fr);
column-gap: 5%;
align-items: end; /* intro-kolom lijnt onderin uit met de accordeon */
}
.hotel-gtk__intro-text {
margin: 0 0 1.1em;
font-family: var(--brand-text-font);
font-weight: var(--brand-text-weight);
font-size: var(--hotel-size-text);
line-height: 1.4;
}
/* Knop: transparant met --menu-ink-rand (beige op boutique, wit op budget). --btn-pad-y
3px korter, zelfde reden als bij Rooms/Location/room-about-specs (zie .hotel-button). */
.hotel-gtk .hotel-button {
--btn-pad-y: calc(1rem - 3px);
border: 3px solid var(--menu-ink);
background: transparent;
color: var(--menu-ink);
}
/* Rand in --menu-ink (i.p.v. --brand-ink zoals Recommendations): die zou op deze goud/oranje
achtergrond nauwelijks zichtbaar zijn. */
.hotel-gtk__item {
border-bottom: 1px solid var(--menu-ink);
}
.hotel-gtk__item:first-child {
border-top: 1px solid var(--menu-ink);
}
.hotel-gtk__row-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 2.2em 0;
list-style: none;
cursor: pointer;
}
.hotel-gtk__row-head::-webkit-details-marker {
display: none;
}
.hotel-gtk__row-title {
font-family: var(--brand-ui-font);
font-weight: 600;
font-size: clamp(0.875rem, 0.569rem + 1.306vw, 1.875rem); /* 30px */
line-height: 1;
text-transform: uppercase;
}
/* Plusje in --menu-ink (i.p.v. --brand-gold: op een gouden/oranje achtergrond zou dat
wegvallen). Het verticale streepje verdwijnt als de rij openstaat, blijft een - over. */
.hotel-gtk__icon {
position: relative;
flex: none;
width: clamp(0.875rem, 0.569rem + 1.306vw, 1.875rem);
height: clamp(0.875rem, 0.569rem + 1.306vw, 1.875rem);
}
.hotel-gtk__icon::before,
.hotel-gtk__icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: var(--menu-ink);
transform: translate(-50%, -50%);
}
.hotel-gtk__icon::before {
width: 100%;
height: 2px;
}
.hotel-gtk__icon::after {
width: 2px;
height: 100%;
transition: transform var(--hotel-gtk-duration) var(--hotel-gtk-ease);
}
.hotel-gtk__item.is-open .hotel-gtk__icon::after {
transform: translate(-50%, -50%) scaleY(0);
}
/* Zelfde 0fr -> 1fr grid-transitietechniek als bij Recommendations. */
.hotel-gtk__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--hotel-gtk-duration) var(--hotel-gtk-ease);
}
.hotel-gtk__item.is-open .hotel-gtk__panel {
grid-template-rows: 1fr;
}
.hotel-gtk__text {
margin: 0;
padding: 0 0 1.5em;
overflow: hidden;
min-height: 0; /* nodig binnen een grid-rij, anders blijft de content zijn eigen hoogte opeisen */
font-family: var(--brand-text-font);
font-weight: var(--brand-text-weight);
font-size: var(--hotel-size-text);
line-height: 1.4;
white-space: pre-line; /* een lege regel in het veld = eigen alinea, net als bij een per stuk */
}
/* --- Ticker: rustig scrollende USP-balk direct onder het About-blok ---------------
Twee identieke groepen achter elkaar; de track schuift precies één groep op en begint dan
opnieuw, dus de lus is naadloos. Een groep bevat 4 items (samen ~114em breed), genoeg om
ook een ultrawide scherm te vullen (het lettertype stopt op 54px). */
.hotel-ticker {
overflow: hidden;
padding-block: 0.85em;
background: var(--brand-accent);
color: var(--brand-bar-bg);
font-family: var(--brand-ui-font);
font-size: clamp(1.375rem, 0.763rem + 2.612vw, 3.375rem); /* 54px vanaf 1600px */
line-height: 1;
letter-spacing: 0.12em; /* tracking 120 (Illustrator) */
text-transform: uppercase;
}
.hotel-ticker__track {
display: flex;
width: max-content;
animation: hotel-ticker 100s linear infinite;
will-change: transform;
}
.hotel-ticker__group {
display: flex;
flex: none;
}
.hotel-ticker__item {
flex: none;
white-space: pre; /* bewaart de spatie tussen de delen en achter elk item */
}
.hotel-ticker__strong {
font-weight: var(--brand-button-weight); /* semibold */
}
.hotel-ticker__regular {
font-weight: 400;
}
@keyframes hotel-ticker {
to {
transform: translateX(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
.hotel-ticker__track {
animation: none;
}
}
/* --- Rooms: carousel met de kamers van dit merk ---------------------------------
Alle maten in de carousel zijn een percentage van de content-breedte (cqw, van
.hotel-rooms__viewport), zodat hij op elk scherm dezelfde verhoudingen houdt. Uit het ontwerp:
actieve foto 59.29% | ruimte 1.67% | volgende foto 39.04% (samen 100%). De foto's links en
rechts steken buiten de content en worden door de schermrand afgeknipt. Vanaf --rooms-max
groeit de content niet meer mee; de zijkanten worden dan breder en de buitenste foto's komen
helemaal in beeld (het afknippen, .hotel-rooms__stage, stopt precies na de buitenste foto's). */
/* Zodat de zwevende header (position: fixed) niet bovenop het blok komt te staan bij een
sprong vanuit het menu (#good-to-know/#rooms/#location/#recommendations) - zelfde hoogte
als de pill (--hotel-button-height) + zijn afstand tot de bovenkant (--hotel-header-offset)
+ ademruimte. */
#good-to-know,
#rooms,
#location,
#recommendations {
scroll-margin-top: calc(var(--hotel-header-offset) + var(--hotel-button-height) + 1.5rem);
}
.hotel-rooms {
--rooms-move: 600ms;
--rooms-fade: 200ms;
--rooms-ease: cubic-bezier(0.65, 0, 0.35, 1);
overflow: hidden;
padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) var(--rooms-pad);
background: var(--brand-rooms-bg);
color: var(--brand-rooms-ink);
}
@media (prefers-reduced-motion: reduce) {
.hotel-rooms {
--rooms-move: 0ms;
--rooms-fade: 0ms;
}
.hotel-recs {
--hotel-recs-duration: 0ms;
}
}
.hotel-rooms__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
/* De helft van de normale blok-afstand: deze ruimte geldt nu naar de intro-tekst toe
(of, als die leeg is, rechtstreeks naar de carousel). */
margin-bottom: clamp(0.625rem, 0.4rem + 1vw, 1.25rem);
}
.hotel-rooms__title {
margin: 0;
font-family: var(--brand-ui-font);
font-weight: 700;
font-size: clamp(1.75rem, 0.946rem + 3.429vw, 4.375rem); /* 70px */
line-height: 1;
text-transform: uppercase;
}
/* Tekst tussen de titel en de carousel, in de gewone merkstijl (Sangbleu/Fakt Pro) en gewone
tekstgrootte. Max-width: de helft van de ruimte die 'm normaal (volle breedte) toekomt. */
.hotel-rooms__intro {
max-width: 50%;
margin: 0 0 clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
font-family: var(--brand-text-font);
font-weight: var(--brand-text-weight);
font-size: var(--hotel-size-text);
line-height: 1.4;
}
.hotel-rooms__arrows {
display: flex;
gap: 0.4rem;
}
/* Pijl uit de hero, gedraaid naar links/rechts; de SVG is een masker, dus de kleur volgt het merk */
.hotel-rooms__arrow {
flex: none;
width: var(--hotel-button-height);
height: var(--hotel-button-height);
padding: 0;
border: 0;
background-color: var(--brand-rooms-ink);
-webkit-mask: url('../images/logos/boutique/boutique-arrow.svg') center / contain no-repeat;
mask: url('../images/logos/boutique/boutique-arrow.svg') center / contain no-repeat;
cursor: pointer;
}
.hotel-rooms__arrow--prev {
transform: rotate(90deg);
}
.hotel-rooms__arrow--next {
transform: rotate(-90deg);
}
/* Foto's en tekst delen dezelfde cel: de rij is minstens zo hoog als de foto's, en groeit mee als de
tekst (die onder de volgende foto moet blijven staan) hoger is dan de ruimte daar. */
.hotel-rooms__viewport {
position: relative;
display: grid;
container-type: inline-size;
}
/* Hoogte = hoogte van de actieve foto (59.29cqw breed, beeldverhouding 0.74).
clip-path: knipt precies af na de buitenste foto's (links 40.71cqw, rechts 30.17cqw buiten de content). */
.hotel-rooms__stage {
position: relative;
grid-area: 1 / 1;
align-self: start;
aspect-ratio: 100 / 80.12;
clip-path: inset(0 -30.17cqw 0 -40.71cqw);
touch-action: pan-y; /* horizontaal swipen/slepen is voor de carousel, verticaal scrollen blijft van de pagina */
cursor: grab;
user-select: none;
-webkit-user-select: none;
}
.hotel-rooms__card {
position: absolute;
top: 0;
left: var(--l);
width: var(--w);
height: calc(var(--w) / 0.74);
overflow: hidden;
border-radius: 0.75rem;
transition:
left var(--rooms-move) var(--rooms-ease),
width var(--rooms-move) var(--rooms-ease),
height var(--rooms-move) var(--rooms-ease);
}
.hotel-rooms__card.is-jumping {
transition: none;
}
.hotel-rooms__card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-user-drag: none;
}
/* Posities (q = 0 is de actieve kamer). -3, -2, 3 en 4 liggen buiten beeld. */
.hotel-rooms__card[data-q="-3"] { --l: -101.05cqw; --w: 28.5cqw; }
.hotel-rooms__card[data-q="-2"] { --l: -70.88cqw; --w: 28.5cqw; }
.hotel-rooms__card[data-q="-1"] { --l: -40.71cqw; --w: 39.04cqw; }
.hotel-rooms__card[data-q="0"] { --l: 0cqw; --w: 59.29cqw; }
.hotel-rooms__card[data-q="1"] { --l: 60.96cqw; --w: 39.04cqw; }
.hotel-rooms__card[data-q="2"] { --l: 101.67cqw; --w: 28.5cqw; }
.hotel-rooms__card[data-q="3"] { --l: 131.84cqw; --w: 28.5cqw; }
.hotel-rooms__card[data-q="4"] { --l: 162.01cqw; --w: 28.5cqw; }
/* Tekst + knoppen: rechts onder de volgende foto, onderkant gelijk met de actieve foto */
.hotel-rooms__panel {
position: relative;
z-index: 2;
grid-area: 1 / 1;
align-self: end;
justify-self: start;
/* margin-top = onderkant van de volgende foto (52.75cqw) + de ruimte ertussen (1.67cqw) */
margin: calc(52.75cqw + 1.67cqw) 0 0 65.16cqw;
width: 40.7cqw;
transition: opacity var(--rooms-fade) ease;
}
.hotel-rooms__panel.is-hidden {
opacity: 0;
pointer-events: none;
}
.hotel-rooms__name {
margin: 0 0 0.25em;
font-family: var(--brand-ui-font);
font-weight: var(--brand-button-weight);
font-size: clamp(0.875rem, 0.569rem + 1.306vw, 1.875rem); /* 30px */
line-height: 1.15;
text-transform: uppercase;
}
.hotel-rooms__text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-clamp: 5;
overflow: hidden;
margin: 0 0 1.1em;
font-family: var(--brand-text-font);
font-weight: var(--brand-text-weight);
font-size: var(--hotel-size-text);
line-height: 1.15;
}
.hotel-rooms__buttons {
display: flex;
flex-wrap: wrap;
gap: calc(var(--hotel-gap) * 0.5);
}
/* Knoppen zoals overal, in de kleuren van dit blok. Beide krijgen dezelfde 3px rand,
zodat ze even hoog zijn; de rechter heeft een transparante achtergrond. --btn-pad-y
3px korter, zodat de rand niet bovenop de normale knophoogte optelt (zie .hotel-button). */
.hotel-rooms .hotel-button {
--btn-pad-y: calc(1rem - 3px);
border: 3px solid var(--brand-rooms-ink);
background: var(--brand-rooms-ink);
color: var(--brand-rooms-bg);
}
.hotel-rooms .hotel-button--outline {
background: transparent;
color: var(--brand-rooms-ink);
}
/* --- Location: foto links, titel + tekst + knoppen rechts ------------------------
Maximale breedte = precies de breedte van de "OUR ROOMS"-titel + pijlen hierboven
(dezelfde --rooms-pad/--rooms-max), en gecentreerd i.p.v. links/rechts uitgelijnd.
CSS Grid met named areas: de foto beslaat beide rijen en wordt zo (via stretch)
vanzelf precies zo hoog als titel + tussenruimte + tekstgroep samen. */
.hotel-location {
/* Zelfde bovenpadding als het Rooms-blok hierboven */
padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) var(--rooms-pad) clamp(2.5rem, 1.5rem + 5vw, 6rem);
background: var(--brand-bar-bg);
color: var(--brand-ink);
}
/* Kolomverhouding zo gekozen dat de tekstkolom (38%) niet breder is dan de rendered breedte
van "OUR LOCATION" op 70px Degular Display bold (~432px bij de maximale content-breedte
van 1120px) - de foto-kolom is daarom breder (55%) dan in het About-blok. */
.hotel-location__inner {
display: grid;
max-width: var(--rooms-max);
margin: 0 auto;
grid-template-columns: minmax(0, 55fr) minmax(0, 38fr);
grid-template-areas:
"media title"
"media group";
column-gap: 5%;
row-gap: clamp(3rem, 2.25rem + 5.25vw, 6rem); /* gegarandeerde minimale ruimte tussen titel en ondertitel */
}
.hotel-location__title {
grid-area: title;
align-self: start;
margin: 0;
font-family: var(--brand-ui-font);
font-weight: 700;
font-size: clamp(1.75rem, 0.946rem + 3.429vw, 4.375rem); /* 70px, zelfde als "OUR ROOMS" */
line-height: 1;
text-transform: uppercase;
}
/* Geen eigen beeldverhouding: door "grid-row: span 2" + stretch (default) wordt de foto altijd
precies zo hoog als titel + rij-tussenruimte + tekstgroep samen. */
.hotel-location__media {
position: relative;
grid-area: media;
min-height: 10rem;
}
.hotel-location__image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0.75rem;
}
/* --- Leaflet-kaart (OpenStreetMap) i.p.v. een link naar Google Maps ----------------
Op desktop: exact dezelfde plek/maat als de foto hierboven (toggle via de "View map"-
knop, zie assets/js/hotel-location-map.js). Op mobiel (zie media query onderaan dit
bestand): een bijna-volledig-scherm overlay met eigen kruisje en klik-ernaast-om-te-
sluiten, i.p.v. inline op dezelfde plek als de foto. */
.hotel-map {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
border-radius: 0.75rem;
opacity: 0;
visibility: hidden;
transition: opacity 250ms ease, visibility 0s linear 250ms;
}
.hotel-map.is-open {
opacity: 1;
visibility: visible;
transition: opacity 250ms ease, visibility 0s linear 0s;
}
.hotel-map__viewport {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* De Leaflet-kaart mount hier in (zie hotel-location-map.js); Leaflet regelt zijn eigen
tiles/cursor/dragging/attributie via leaflet.css, dit is puur de afmeting van het vak. */
.hotel-map__canvas {
position: absolute;
inset: 0;
}
/* Alleen zichtbaar op mobiel (zie media query onderaan dit bestand) */
.hotel-map__close {
display: none;
}
.hotel-location__group {
grid-area: group;
align-self: start;
}
.hotel-location__subtitle {
margin: 0 0 0.6em;
font-family: var(--brand-text-font);
font-weight: 500;
font-size: clamp(1.15rem, 0.96rem + 0.79vw, 1.75rem); /* 28px */
line-height: 1.25;
}
.hotel-location__text {
margin: 0 0 1.4em;
font-family: var(--brand-text-font);
font-weight: var(--brand-text-weight);
font-size: var(--hotel-size-text);
line-height: 1.4;
}
.hotel-location__buttons {
display: flex;
flex-wrap: wrap;
gap: calc(var(--hotel-gap) * 0.5);
}
/* Linkerknop roze/gevuld, rechterknop transparant met gouden rand. Beide krijgen dezelfde
rand, zodat ze even hoog blijven. --btn-pad-y 3px korter, zelfde reden als bij Rooms. */
.hotel-location .hotel-button {
--btn-pad-y: calc(1rem - 3px);
border: 3px solid var(--brand-accent);
background: var(--brand-accent);
color: #fff;
}
.hotel-location .hotel-button--outline {
border-color: var(--brand-gold);
background: transparent;
color: var(--brand-gold);
}
/* --- Recommendations: intro + knop links, accordeon rechts ----------------------
Zelfde content-breedte als Rooms/Location. Onderpadding is bewust dubbel zo groot
als bij de andere blokken (dit is voorlopig het laatste blok op de pagina). */
.hotel-recs {
/* Duur/easing van de uitklapanimatie: hier zodat CSS (icoontje) en JS (paneelhoogte,
assets/js/hotel-recs.js) precies gelijk lopen. Snel, maar met een merkbare ease. */
--hotel-recs-duration: 220ms;
--hotel-recs-ease: cubic-bezier(0.65, 0, 0.35, 1);
padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) var(--rooms-pad) calc(clamp(2.5rem, 1.5rem + 5vw, 6rem) * 2);
background: var(--brand-bar-bg);
color: var(--brand-ink);
}
.hotel-recs__inner {
max-width: var(--rooms-max);
margin: 0 auto;
}
.hotel-recs__title {
margin: 0 0 clamp(4rem, 2.4rem + 8vw, 8rem);
font-family: var(--brand-ui-font);
font-weight: 700;
font-size: clamp(1.75rem, 0.946rem + 3.429vw, 4.375rem); /* 70px, zelfde als "OUR ROOMS" */
line-height: 1;
text-transform: uppercase;
}
.hotel-recs__row {
display: grid;
grid-template-columns: minmax(0, 30fr) minmax(0, 65fr);
column-gap: 5%;
align-items: end; /* intro-kolom lijnt onderin uit met de accordeon */
}
.hotel-recs__intro-text {
margin: 0 0 1.1em;
font-family: var(--brand-text-font);
font-weight: var(--brand-text-weight);
font-size: var(--hotel-size-text);
line-height: 1.4;
}
.hotel-recs__intro-text--strong {
font-weight: var(--brand-strong-weight);
}
/* Elke rij is een ; de rand tussen rijen is in tekstkleur, alleen de eerste rij
krijgt ook een rand erboven, zodat er niet twee lijnen op elkaar staan. */
.hotel-recs__item {
border-bottom: 1px solid var(--brand-ink);
}
.hotel-recs__item:first-child {
border-top: 1px solid var(--brand-ink);
}
.hotel-recs__row-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 2.2em 0;
list-style: none;
cursor: pointer;
}
.hotel-recs__row-head::-webkit-details-marker {
display: none;
}
.hotel-recs__row-title {
font-family: var(--brand-ui-font);
font-weight: 600;
font-size: clamp(0.875rem, 0.569rem + 1.306vw, 1.875rem); /* 30px */
line-height: 1;
text-transform: uppercase;
}
/* Plusje in goud; het verticale streepje verdwijnt als de rij openstaat, zodat er een - blijft */
.hotel-recs__icon {
position: relative;
flex: none;
width: clamp(0.875rem, 0.569rem + 1.306vw, 1.875rem);
height: clamp(0.875rem, 0.569rem + 1.306vw, 1.875rem);
}
.hotel-recs__icon::before,
.hotel-recs__icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: var(--brand-gold);
transform: translate(-50%, -50%);
}
.hotel-recs__icon::before {
width: 100%;
height: 2px;
}
.hotel-recs__icon::after {
width: 2px;
height: 100%;
transition: transform var(--hotel-recs-duration) var(--hotel-recs-ease);
}
/* .is-open i.p.v. het native [open]-attribuut, zodat dit precies gelijk loopt met de
panel-animatie hieronder (assets/js/hotel-recs.js zet/haalt beide tegelijk weg). */
.hotel-recs__item.is-open .hotel-recs__icon::after {
transform: translate(-50%, -50%) scaleY(0);
}
/* Zelfde soepele techniek als bijvoorbeeld [data-q] bij de room-carousel: een pure
CSS-transition, geen JS die elke frame de hoogte herberekent. Het paneel is een
1-rijige grid die van 0fr naar 1fr gaat; de erin krijgt daardoor vanzelf zijn
echte hoogte als bovengrens, zonder dat we die in JS hoeven te meten. */
.hotel-recs__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--hotel-recs-duration) var(--hotel-recs-ease);
}
.hotel-recs__item.is-open .hotel-recs__panel {
grid-template-rows: 1fr;
}
.hotel-recs__list {
margin: 0;
padding: 0 0 1.5em;
list-style: none;
overflow: hidden;
min-height: 0; /* nodig binnen een grid-rij, anders blijft de content zijn eigen hoogte opeisen */
}
.hotel-recs__list li + li {
margin-top: 0.6em;
}
.hotel-recs__list li {
font-family: var(--brand-text-font);
font-weight: var(--brand-text-weight);
font-size: var(--hotel-size-text);
line-height: 1.4;
}
.hotel-recs__list a {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* --- Crosssell: het enige blok dat bewust de stijl van het ANDERE merk toont -------
Op een boutique-pagina dus in budget-kleuren/fonts (en andersom), los van de
--brand-*-tokens hierboven (die volgen altijd het merk van de huidige pagina).
Fonts komen wel uit dezelfde, merk-neutrale --font-*-vars uit variables.css. */
.hotel-crosssell {
padding: clamp(2.5rem, 1.5rem + 5vw, 6rem) 1.5rem;
text-align: center;
}
.hotel-crosssell__title {
margin: 0 0 clamp(1.5rem, 1rem + 3vw, 3rem);
line-height: 0.95;
text-transform: uppercase;
}
/* Zelfde sizing-logica als .hotel-button (zie hierboven): hoogte uit padding + line-height,
Fakt Pro standaard 2px lager (dit is de standaardstijl; de boutique-upsell hieronder zet
het weer recht). */
.hotel-crosssell__button {
--btn-pad-y: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: calc(var(--btn-pad-y) + 2px) 1.75em calc(var(--btn-pad-y) - 2px);
border-radius: 999px;
font-family: var(--font-budget-sans);
font-weight: 700;
font-size: var(--hotel-size-button-budget);
line-height: 1.2;
text-transform: uppercase;
text-decoration: none;
}
/* Downsell (op boutique): budget-oranje, FaktPro bold, 150px op groot scherm */
.hotel-crosssell--budget {
background: #FF6900;
color: #fff;
}
.hotel-crosssell--budget .hotel-crosssell__title {
font-family: var(--font-budget-sans);
font-weight: 700;
font-size: clamp(3.75rem, 2.028rem + 7.347vw, 9.375rem); /* 150px */
line-height: 0.8; /* 120px bij 150px font-size, unitless zodat 'm meeschaalt met de fluid size */
}
.hotel-crosssell--budget .hotel-crosssell__button {
background: #fff;
color: #FF6900;
}
/* Upsell (op budget): boutique-plum, Sangbleu Sunrise medium, 120px op groot scherm */
.hotel-crosssell--boutique {
background: #42222A;
color: #FFF0E5;
}
.hotel-crosssell--boutique .hotel-crosssell__title {
font-family: var(--font-boutique-serif);
font-weight: 500;
font-size: clamp(3rem, 1.622rem + 5.878vw, 7.5rem); /* 120px */
}
.hotel-crosssell--boutique .hotel-crosssell__button {
background: #FFF0E5;
color: #42222A;
font-family: var(--font-boutique-display);
font-size: var(--hotel-size-button);
line-height: 1.217;
/* Geen 2px-verschuiving: die is alleen voor Fakt Pro (budget), niet voor Sangbleu/Degular. */
padding-top: var(--btn-pad-y);
padding-bottom: var(--btn-pad-y);
}
/* --- Footer -----------------------------------------------------------------------
Achtergrond/tekstkleur hergebruiken de bestaande merktokens (--brand-ink is voor
boutique donker plum en voor budget al oranje; --menu-ink is crème/wit). Titel en
links gebruiken bewust letterlijk Degular Display (niet de per-merk --brand-ui-font),
op verzoek voor beide merken hetzelfde lettertype. Content-breedte = zelfde
--rooms-max/--rooms-pad-schaal als Rooms/Location/Recommendations hierboven. */
.hotel-footer {
padding: var(--hotel-block-top) var(--rooms-pad) clamp(2rem, 1.2rem + 4vw, 4rem);
background: var(--brand-ink);
color: var(--menu-ink);
}
.hotel-footer__inner {
display: grid;
max-width: var(--rooms-max);
margin: 0 auto;
grid-template-columns: 16fr 45fr 27fr 27fr; /* "about" (tekst+knop) 1.5x breder dan voorheen */
column-gap: clamp(2rem, 4vw, 4rem);
row-gap: clamp(2rem, 4vw, 3.5rem);
grid-template-areas:
"logo about col1 col2"
". rights privacy terms";
align-items: start;
}
/* Op desktop "onzichtbaar" als layout-element: logo/about behouden hun eigen grid-area
t.o.v. .hotel-footer__inner. Wordt op mobiel (< 700px) een echte flex-rij. */
.hotel-footer__top {
display: contents;
}
.hotel-footer__logo {
grid-area: logo;
}
.hotel-footer__logo-mark {
display: block;
width: clamp(8.25rem, 5.4rem + 9vw, 12.75rem); /* 1.5x de vorige maat */
aspect-ratio: 1 / 1;
background-color: currentColor;
-webkit-mask: var(--logo-src) center / contain no-repeat;
mask: var(--logo-src) center / contain no-repeat;
}
.hotel-footer__about {
grid-area: about;
}
.hotel-footer__about p {
margin: 0 0 1.5rem;
font-family: var(--brand-text-font);
font-weight: var(--brand-text-weight);
font-size: var(--hotel-size-text);
line-height: 1.4;
}
.hotel-footer__button {
background: var(--menu-ink);
color: var(--brand-ink);
}
.hotel-footer__col--1 {
grid-area: col1;
}
.hotel-footer__col--2 {
grid-area: col2;
}
.hotel-footer__col-title {
margin: 0 0 1.5rem;
font-family: var(--font-boutique-display); /* = Degular Display, bewust merk-onafhankelijk */
font-weight: 600;
font-size: clamp(0.875rem, 0.569rem + 1.306vw, 1.875rem); /* 30px */
line-height: 1.15;
text-transform: uppercase;
}
.hotel-footer__col ul {
display: flex;
flex-direction: column;
gap: 0.375rem; /* was 0.75rem: links dichter op elkaar (zelfde maat als al op mobiel) */
margin: 0;
padding: 0;
list-style: none;
}
.hotel-footer__col a {
font-family: var(--font-boutique-display); /* = Degular Display, bewust merk-onafhankelijk */
font-weight: 500;
font-size: clamp(0.55rem, 0.297rem + 1.078vw, 1.375rem); /* 22px */
line-height: 1.3;
color: inherit;
text-decoration: none;
}
.hotel-footer__divider {
display: none;
}
.hotel-footer__rights,
.hotel-footer__legal-link {
font-family: var(--font-boutique-display); /* = Degular Display, bewust merk-onafhankelijk */
font-weight: 500;
font-size: clamp(0.45rem, 0.243rem + 0.882vw, 1.125rem); /* 18px */
line-height: 1.3;
}
.hotel-footer__rights {
grid-area: rights;
margin: 0;
text-transform: uppercase;
}
.hotel-footer__legal-link {
color: inherit;
text-decoration: none;
}
.hotel-footer__legal-link--privacy {
grid-area: privacy;
}
.hotel-footer__legal-link--terms {
grid-area: terms;
}
/* --- Contact-balk onder de footer: adres/telefoon/e-mail, volle breedte, eigen kleuren
(--footer-bar-bg/-ink, zie de merk-tokens bovenin) i.p.v. de gewone footerkleuren.
Blijft bewust op één regel (geen wrap); overflow-x: auto als vangnet voor het geval de
tekst op een heel smal scherm toch niet past, zodat die nooit de hele pagina breder maakt. */
.hotel-footer-bar {
padding: 1em var(--rooms-pad);
overflow-x: auto;
background: var(--footer-bar-bg);
color: var(--footer-bar-ink);
}
.hotel-footer-bar__inner {
display: flex;
flex-wrap: nowrap;
justify-content: center;
width: max-content;
max-width: var(--rooms-max);
margin: 0 auto;
font-family: var(--font-boutique-display); /* = Degular Display, bewust merk-onafhankelijk */
font-weight: 400;
font-size: clamp(1rem, 0.847rem + 0.653vw, 1.5rem); /* 24px, 16px op kleine schermen */
line-height: 1.3;
text-align: center;
white-space: nowrap;
}
.hotel-footer-bar__item {
color: inherit;
text-decoration: none;
}
/* Bolletje tussen de drie onderdelen; niet na het laatste. */
.hotel-footer-bar__item:not(:last-child)::after {
content: '\00B7';
display: inline-block;
margin: 0 0.5em;
}
/* --- Kleine schermen: voorlopige fallback tot het mobiele ontwerp er is ---------- */
/* Header: mobiele opzet vanaf 950px en kleiner ("Take me back" boven de pill, pill over de
volle breedte). De rest van de mobiele opzet (hieronder) begint pas bij 700px. */
@media (max-width: 950px) {
.hotel-page {
/* Afstand tot de schermrand: voor "Take me back", de pill, de titel en de balk */
--hotel-inset: 1rem;
/* Bovenkant van "Take me back" én de plek waar de pill blijft plakken bij scrollen */
--hotel-sticky-top: 1rem;
}
/* Op mobiel scrolt "Take me back" gewoon mee met de pagina; alleen de pill blijft plakken
(sticky). De header is daarvoor even hoog als de hele pagina (absoluut over de hero heen),
want een sticky element blijft alleen plakken binnen zijn eigen bovenliggende blok. */
.hotel-header {
position: absolute;
inset: 0;
display: block;
padding: var(--hotel-sticky-top) var(--hotel-inset) 0;
}
.hotel-header__back {
display: flex;
width: fit-content;
}
/* Bovenaan de pagina staat de pill gewoon onder "Take me back" en schuift dus nergens
overheen; pas bij scrollen komt hij op de bovenkant van "Take me back" vast te zitten. */
.hotel-header__pill {
position: sticky;
top: var(--hotel-sticky-top);
margin-top: 0.75rem;
gap: 1rem;
padding: 0.4rem 1.25rem;
}
/* Ingelogde beheerders: de header staat al onder de adminbalk (html heeft een marge),
alleen de sticky pill moet onder de vaste adminbalk blijven. */
.admin-bar .hotel-header {
top: 0;
}
.admin-bar .hotel-header__pill {
top: calc(var(--hotel-sticky-top) + 32px);
}
.hotel-header__logo-mark {
height: 1.2rem;
}
/* De pill is nu zo breed als het scherm (min de rand): die extra breedte komt uit de
ruimte tussen logo en BOOK NOW. */
.hotel-header__book {
margin-left: auto;
}
/* "Close menu"-tekst staat hier nooit, alleen het kruisje (zie ook de knop-gap hieronder) */
.hotel-header__menu-label {
display: none;
}
.hotel-header__menu {
gap: 0;
}
/* Menu: nu een kind van .hotel-header__pill (zie template), zodat het letterlijk meebeweegt
met de pill zelf - ook op het exacte moment dat de pill "sticky" wordt tijdens scrollen.
"top: 0" betekent hier dus "waar de pill nu ook staat", niet een vaste viewport-afstand. */
.hotel-menu {
position: absolute;
inset: auto;
top: 0;
left: 50%;
width: calc(100vw - 2 * var(--hotel-inset));
height: calc(100vh - var(--hotel-sticky-top) - 1.5rem);
border-radius: 1.25rem;
/* De centrering (translateX) moet in dezelfde transform-waarde staan als de open/dicht-
schaal hieronder, anders overschrijft de één de ander. */
transform: translateX(-50%) scale(0.82);
/* align-items blijft op de standaard "stretch": .hotel-menu__inner moet de volle hoogte
van het paneel vullen, anders heeft "justify-content: space-between" hieronder niets
om ruimte in te verdelen. */
}
.menu-open .hotel-menu {
transform: translateX(-50%) scale(1);
}
/* Links boven uitgelijnd, formulier onder: met space-between groeit de tussenruimte vanzelf
mee als het paneel (op een hoger scherm, of met meer/minder content) langer/korter is. */
.hotel-menu__inner {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2.5rem; /* ondergrens, voor als de inhoud niet in de beschikbare hoogte past */
padding: 5.5rem 1.5rem 2.5rem;
text-align: left;
}
.hotel-menu__nav a {
font-size: 1.875rem; /* 30px */
}
.brand-budget .hotel-menu__nav a {
font-size: 1.5rem; /* 30px x0.8 = 24px */
}
/* About: foto boven (links, 2/3 van de breedte), tekst + knop eronder (rechts, 75%).
Ruimte onder de statement-tekst (eigen padding-bottom + .hotel-about's padding-top,
die hieronder op 0 staat) gelijk aan de ruimte erboven (padding-top, ongewijzigd). */
.hotel-statement {
padding-bottom: var(--hotel-block-top);
}
.hotel-about {
display: block;
padding-top: 0;
}
.hotel-about__media {
width: 66.667%;
min-height: 0;
aspect-ratio: 5 / 4;
}
.hotel-about__content {
width: 75%;
margin-top: 1.5rem;
margin-left: auto;
}
/* Rooms, Location, Recommendations, Footer, Room-About, Gallery, Good-to-know en de
footer-contactbalk gebruiken op mobiel de gewone content-rand i.p.v. de desktop-schaal */
.hotel-rooms,
.hotel-location,
.hotel-recs,
.hotel-footer,
.room-about,
.hotel-gallery,
.hotel-gtk,
.hotel-footer-bar {
--rooms-pad: var(--hotel-content-pad);
}
.hotel-rooms__stage {
aspect-ratio: 100 / 121.62;
clip-path: none;
}
.hotel-rooms__card[data-q="-3"] { --l: -232cqw; --w: 59.8cqw; }
.hotel-rooms__card[data-q="-2"] { --l: -170cqw; --w: 59.8cqw; }
.hotel-rooms__card[data-q="-1"] { --l: -110cqw; --w: 59.8cqw; }
.hotel-rooms__card[data-q="0"] { --l: 0cqw; --w: 90cqw; }
.hotel-rooms__card[data-q="1"] { --l: 92.2cqw; --w: 59.8cqw; }
.hotel-rooms__card[data-q="2"] { --l: 154cqw; --w: 59.8cqw; }
.hotel-rooms__card[data-q="3"] { --l: 216cqw; --w: 59.8cqw; }
.hotel-rooms__card[data-q="4"] { --l: 278cqw; --w: 59.8cqw; }
/* Gallery op mobiel: 1 hoofdfoto + 1 die rechts overlapt met de schermrand - zelfde
verhoudingen als de Rooms-carousel hierboven op mobiel (90cqw hoofd + 59.8cqw buur).
Hoogte zo gekozen dat een foto er hetzelfde formaat (breedte : hoogte) uitziet als
op desktop: 90cqw breed / (44/57 van de desktop-verhouding) = 116.6cqw hoog. */
.hotel-gallery__stage {
aspect-ratio: 100 / 116.6;
clip-path: none;
}
.hotel-gallery__card[data-q="-3"] { --l: -232cqw; --w: 59.8cqw; }
.hotel-gallery__card[data-q="-2"] { --l: -170cqw; --w: 59.8cqw; }
.hotel-gallery__card[data-q="-1"] { --l: -110cqw; --w: 59.8cqw; }
.hotel-gallery__card[data-q="0"] { --l: 0cqw; --w: 90cqw; }
.hotel-gallery__card[data-q="1"] { --l: 92.2cqw; --w: 59.8cqw; }
.hotel-gallery__card[data-q="2"] { --l: 154cqw; --w: 59.8cqw; }
.hotel-gallery__card[data-q="3"] { --l: 216cqw; --w: 59.8cqw; }
.hotel-gallery__card[data-q="4"] { --l: 278cqw; --w: 59.8cqw; }
.hotel-rooms__viewport {
display: block;
}
.hotel-rooms__panel {
width: auto;
margin: clamp(1rem, 0.6rem + 2vw, 1.5rem) 0 0;
}
/* Kamernaam iets groter op mobiel (17px op 390px breed); sluit bij 950px aan op de desktop-maat */
.hotel-rooms__name {
font-size: clamp(1.0625rem, 0.866rem + 0.804vw, 1.5rem);
}
/* De tekst neemt maar 60% van de beschikbare breedte in; de knoppen eronder blijven vrij */
.hotel-rooms__name,
.hotel-rooms__text {
max-width: 60%;
}
/* Location: zelfde opzet als About, maar met de titel als eigen volle-breedte rij bovenaan
(title -> media -> group), i.s.v. naast de foto zoals op desktop. */
.hotel-location__inner {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"media"
"group";
row-gap: 0;
}
.hotel-location__title {
margin-bottom: 4rem;
}
.hotel-location__media {
width: 66.667%;
min-height: 0;
aspect-ratio: 3 / 4;
}
/* Op mobiel geen inline kaart op de plek van de foto, maar een bijna-volledig-scherm
overlay erbovenop, met een donkere rand eromheen (klik erop = sluiten, zie de JS). */
.hotel-map {
position: fixed;
inset: 0;
z-index: 50; /* boven de zwevende header (z-index: 20) */
display: flex;
align-items: center;
justify-content: center;
padding: 2.5rem 1.5rem;
border-radius: 0;
background: rgba(0, 0, 0, 0.6);
}
/* Vierkant i.p.v. het hele scherm: begrensd door de kleinste van breedte/hoogte (op
staand formaat dus de breedte), gecentreerd via .hotel-map hierboven. Scheelt ook
meteen een hoop onnodig uitvergroten van de (landscape, 1632x964px) brondata. */
.hotel-map__viewport {
width: 100%;
max-height: 100%;
aspect-ratio: 1 / 1;
border-radius: 1rem;
}
.hotel-map__close {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 1.25rem;
right: 1.25rem;
/* Hoger dan Leaflet's eigen interne elementen (zoom-knoppen/attributie zitten op
z-index: 1000), anders ligt de kaart er met knijpen/slepen overheen en is dit
kruisje niet meer te klikken. */
z-index: 1001;
width: 2.5rem;
height: 2.5rem;
padding: 0.6rem;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
}
.hotel-map__close svg {
display: block;
width: 100%;
height: 100%;
}
.hotel-location__group {
width: 75%;
margin-top: 1.5rem;
margin-left: auto;
}
/* Op mobiel is de ondertitel gewoon de lopende tekst, geen apart formaat/gewicht */
.hotel-location__subtitle {
font-weight: var(--brand-text-weight);
font-size: var(--hotel-size-text);
line-height: 1.4;
}
/* "OUR ROOMS", "OUR LOCATION" en "RECOMMENDATIONS": 30px vast op mobiel, i.p.v. de
vloeiende desktopschaal */
.hotel-rooms__title,
.hotel-location__title,
.hotel-recs__title,
.room-about__title,
.hotel-gallery__title,
.hotel-gtk__title {
font-size: 1.875rem;
}
/* Recommendations/Good-to-know: titel -> accordeon (volle breedte) -> intro + knop (70%,
rechtsuitgelijnd). Zelfde ruimte titel->content als bij Location hierboven. */
.hotel-recs__title,
.hotel-gtk__title {
margin-bottom: 4rem;
}
/* Accordeon-titels ("HAVE BREAKFAST" etc.): 24px vast op mobiel */
.hotel-recs__row-title,
.hotel-gtk__row-title {
font-size: 1.5rem;
}
/* Grid i.p.v. block, puur om de accordeon (die later in de HTML staat, voor de knopvolgorde
bij toetsenbordgebruik) hier vóór de intro te tonen. Zelfde opzet voor Good-to-know. */
.hotel-recs__row,
.hotel-gtk__row {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"accordion"
"intro";
}
.hotel-recs__accordion,
.hotel-gtk__accordion {
grid-area: accordion;
}
.hotel-recs__intro,
.hotel-gtk__intro {
grid-area: intro;
width: 75%;
margin: 1.5rem 0 0 auto;
}
/* Crosssell, FaktPro (downsell op boutique): 60px vast op mobiel.
De Sangbleu-variant (upsell op budget) heeft hier bewust GEEN eigen mobiele regel: die
volgt zijn vloeiende schaal (75px bij ~834px breed, kleiner op telefoons). */
.hotel-crosssell--budget .hotel-crosssell__title {
font-size: 3.75rem;
}
/* Footer: logo+tekst/knop naast elkaar, daaronder de 2 linkkolommen naast elkaar,
dan privacy+terms naast elkaar, en onderaan de all-rights-tekst over de volle breedte. */
.hotel-footer__inner {
grid-template-columns: 1fr 1fr;
column-gap: 1rem; /* de 2 linkkolommen dichter bij elkaar */
row-gap: 2rem;
grid-template-areas:
"logo about"
"col1 col2"
"privacy terms"
"rights rights";
}
.hotel-footer__logo-mark {
width: clamp(6rem, 4.5rem + 7.5vw, 8.25rem); /* 1.5x de vorige maat */
}
.hotel-footer__rights {
margin-top: 0.5rem;
}
/* Links, Privacy/Terms en All rights krijgen op mobiel dezelfde grootte als de gewone
footertekst (.hotel-footer__about p) i.p.v. hun eigen (kleinere) schaal. */
.hotel-footer__col a,
.hotel-footer__rights,
.hotel-footer__legal-link {
font-size: var(--hotel-size-text);
}
}
/* WordPress-adminbalk: 46px hoog onder 783px, en onder 601px scrolt hij zelf mee weg */
@media (max-width: 782px) {
.admin-bar .hotel-header__pill {
top: calc(var(--hotel-sticky-top) + 46px);
}
}
@media (max-width: 600px) {
.admin-bar .hotel-header__pill {
top: var(--hotel-sticky-top);
}
}
@media (max-width: 700px) {
.hotel-page {
/* Zijrand tot de schermrand vanaf hier overal 32px (was 16px) */
--hotel-inset: 2rem;
/* Helft van de badge-hoogte (2 regels x 0.95 + 1em padding, gedeeld door 2) */
--hotel-badge-overhang: calc(var(--hotel-size-badge) * 1.45);
/* Op mobiel is de zijrand van de content gelijk aan die van de hero */
--hotel-content-gutter: var(--hotel-inset);
/* De smalle content gebruikt op mobiel dezelfde rand, zodat er zoveel mogelijk breedte is */
--hotel-content-small-pad: var(--hotel-content-pad);
}
/* Op mobiel 2/3 van de ruimte i.p.v. de helft op desktop */
.hotel-rooms__intro {
max-width: 66.667%;
}
/* Knoppen: zelfde mobiele padding als op de keuzepagina (.split-half__cta), i.p.v. de
vaste desktop-rem's. --btn-pad-y hier opnieuw zetten (i.p.v. alleen padding), zodat de
rand-correctie en de Fakt Pro-verschuiving (die allebei var(--btn-pad-y) gebruiken) op
mobiel automatisch meeschalen met deze kleinere waarde. */
.hotel-button {
--btn-pad-y: 0.9em;
padding: var(--btn-pad-y) 1.4em;
}
.hotel-rooms .hotel-button,
.hotel-location .hotel-button,
.room-about .room-about__spec,
.hotel-gtk .hotel-button {
--btn-pad-y: calc(0.9em - 3px);
}
.hotel-crosssell__button {
--btn-pad-y: 0.9em;
}
/* Titel linksonder in het fotoblok, boven de plek waar de badge in de foto hangt.
Geldt ook voor de room-hero (.room-hero__photo = alias van .hotel-hero__photo), die
geen badge heeft maar dezelfde onderpadding gebruikt voor exact hetzelfde mobiele gedrag. */
.hotel-hero__photo,
.room-hero__photo {
align-items: flex-end;
padding: 8rem var(--hotel-inset) calc(var(--hotel-badge-overhang) + 1rem);
}
/* Zelfde 8rem als de hero's hierboven op mobiel (i.p.v. de 9rem op desktop) */
.room-about--no-hero {
padding-top: 8rem;
}
/* Badge rechts in plaats van links */
.hotel-hero__badge {
left: auto;
right: 0;
padding: 0.5em 0.45em 0.5em 1em;
border-radius: 999px 0 0 999px;
}
/* Extra ruimte boven in de balk, zodat de badge nooit over de inhoud valt */
.hotel-bar {
padding-top: calc(var(--hotel-badge-overhang) + var(--hotel-space-bar));
}
/* Room "About this room": alles onder elkaar, in document-volgorde (content vóór prijs) */
.room-about__columns {
display: flex;
flex-direction: column;
gap: var(--hotel-block-top);
}
.room-about__price {
justify-content: flex-start;
}
/* Description/Equipment-titels: 24px vast op mobiel i.p.v. de vloeiende desktopschaal */
.room-about__group-title {
font-size: 1.5rem;
}
/* From/prijs/Per night: 1,5x zo groot als de normale mobiele weergave hierboven
(30px -> 45px voor het bedrag, ~14px -> 21px voor from/per night). Alleen op deze
room-template-pagina, want deze klassen bestaan alleen hier. */
.room-about__price-label,
.room-about__price-unit {
font-size: 1.3125rem;
}
.room-about__price-amount {
font-size: 2.8125rem;
}
.hotel-bar__inner {
margin-left: 0;
padding-left: var(--hotel-inset);
padding-right: var(--hotel-inset);
}
/* Footer: logo op zijn eigen (ongewijzigde) breedte, tekst+knop neemt de rest van de
breedte in - los van de kolombreedtes die de linkblokken eronder gebruiken. */
.hotel-footer__top {
display: flex;
align-items: flex-start;
gap: 1.5rem;
grid-area: top;
}
.hotel-footer__inner {
grid-template-areas:
"top top"
"col1 col2"
"privacy terms"
"rights rights";
}
.hotel-footer__logo {
flex: none;
}
.hotel-footer__about {
flex: 1;
min-width: 0;
}
/* Titels van de linkblokken: 24px vast i.p.v. de vloeiende schaal */
.hotel-footer__col-title {
font-size: 1.5rem;
}
}