@charset "UTF-8"; /* ============================================ CLUB TROPICANA thema — kleur-neutrale core Lokale partials uit ./sass (zonder home — geen splash-hero). De thema-kleuren (--primary/--primary-dark/--secondary) staan in theme.css, dat ná deze stylesheet wordt ingeladen. Hierdoor is deze compiled CSS identiek voor club én roast (alleen theme.css verschilt). ============================================ */ /* ------------------------- Scaling System by Osmo [https://osmo.supply/] ------------------------- */ /* Desktop */ :root { --size-unit: 16; /* body font-size in design - no px */ --size-container-ideal: 1440; /* screen-size in design - no px */ --size-container-min: 992px; --size-container-max: 1920px; --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max)); --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit))); } /* Tablet */ @media screen and (max-width: 991px) { :root { --size-container-ideal: 834; /* screen-size in design - no px */ --size-container-min: 768px; --size-container-max: 991px; } } /* Mobile Landscape */ @media screen and (max-width: 767px) { :root { --size-container-ideal: 550; /* screen-size in design - no px */ --size-container-min: 480px; --size-container-max: 767px; } } /* Mobile Portrait */ @media screen and (max-width: 479px) { :root { --size-container-ideal: 390; /* screen-size in design - no px */ --size-container-min: 320px; --size-container-max: 479px; } } /* --- Toepassing ------------------------------------------------------------- rem schaalt t.o.v. , dus zetten we de font-size dáár. Nu site-breed (alle pagina's schalen mee met het systeem). */ html { font-size: var(--size-font); } /* -- Fonts (brand webfonts) -----------------*/ @font-face { font-family: "Tay Sundae"; src: url("../fonts/TAYSundaeRegular.woff2") format("woff2"), url("../fonts/TAYSundaeRegular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Tay Birdie"; src: url("../fonts/TAYBirdieRegular.woff2") format("woff2"), url("../fonts/TAYBirdieRegular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } :root { --font-size: 16px; --container-width: 100%; --gutter: clamp(1.5rem, 1.2444rem + 0.7111vw, 2rem); --radius-sm: 0.75rem; --radius-md: 1.25rem; --radius-lg: 2rem; --radius-pill: 999px; /* -- Brand colors -- */ --white: #ffffff; --black: #000000; --zand: #f4f2ef; --zon: #f2a500; --zon-dark: #F38300; --oceaan: #004181; --lagune: #7cc6c7; --grillvuur: #c1563a; --drijfhout: #251a0c; /* -- Fonts -- */ --ff-figtree: "Figtree", Arial, sans-serif; --ff-birdie: "Tay Birdie", cursive; --ff-sundae: "Tay Sundae", serif; --ff-body: var(--ff-figtree); --ff-display: var(--ff-birdie); --ff-accent: var(--ff-sundae); /* -- Font sizes -- */ --fs1: clamp(2rem, 1.5604rem + 1.7582vw, 3rem); --fs2: clamp(1.75rem, 1.4203rem + 1.3187vw, 2.5rem); --fs3: clamp(1.25rem, 0.9203rem + 1.3187vw, 2rem); --fs4: clamp(1.5rem, 1.3901rem + 0.4396vw, 1.75rem); --fs5: 1.25rem; --fs6: 1.125rem; --fs-lead: clamp(1.125rem, 1.0417rem + 0.1736vw, 1.25rem); --fs-xs: 0.875rem; /* -- Spacing -- */ --spacing-sm: clamp(2.2rem, 0.7334rem + 3.0556vw, 4.4rem); --spacing-md: clamp(2.75rem, 0.9167rem + 3.8194vw, 5.5rem); --spacing-lg: clamp(6rem, 4.2857rem + 3.5714vw, 10rem); --transition-fast: 0.2s ease; --transition-base: 0.3s ease; /* -- Z-index -- */ --z-bg: 0; --z-overlay: 1; --z-base: 2; --z-content: 3; --z-footer: 5; --z-reserve: 6; --z-ring: 180; --z-drawer: 200; --z-ui: 210; --z-menu-btn: 212; } /* -- Thema-kleuren --------------------------- Default = club, zodat de core ook los geldig is. Elk thema zet z'n eigen --primary/--primary-dark/--secondary in zijn stylesheet.scss (ná deze import). */ :root { --primary: var(--oceaan); --primary-dark: var(--oceaan); --secondary: var(--lagune); } @media (min-width: 576px) { :root { --container-width: 540px; } } @media (min-width: 768px) { :root { --container-width: 720px; } } @media (min-width: 992px) { :root { --container-width: 960px; } } @media (min-width: 1200px) { :root { --container-width: 1140px; } } @media (min-width: 1400px) { :root { --container-width: 1320px; } } html { font-size: var(--font-size); -webkit-text-size-adjust: none; text-size-adjust: none; } * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: var(--ff-body); font-weight: 400; font-size: 1rem; line-height: 2; color: var(--primary); background: var(--zand); scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } body.drawer--is-open { overflow: hidden; width: 100vw; height: 100vh; height: 100dvh; } /* Volledige-hoogte helper: dvh voorkomt de iOS-adresbalk "spring". Override van Bootstrap's .min-vh-100 met 100vh-fallback. */ .min-vh-100 { min-height: 100vh !important; min-height: 100dvh !important; } img, video { display: block; max-width: 100%; } /* -- Container ------------------------------*/ .container { --bs-gutter-x: clamp(2rem, 0.2353rem + 3.1373vw, 4rem); max-width: var(--container-width); padding-right: var(--gutter); padding-left: var(--gutter); } .fw-wrapper { --bs-gutter-x: clamp(2rem, 0.2353rem + 3.1373vw, 4rem); max-width: var(--container-width); padding-right: var(--gutter); padding-left: var(--gutter); margin: 0 auto; } .container-fluid { --bs-gutter-x: clamp(2rem, 0.2353rem + 3.1373vw, 4rem); } /* -- Fonts ----------------------------------*/ .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .ff-body { font-family: var(--ff-body); } .ff-display { font-family: var(--ff-display); } .ff-accent { font-family: var(--ff-accent); } h1, h2, h3, h4, h5, h6 { font-family: var(--ff-body); font-weight: 400; line-height: 1.2; } .fs-1 { font-size: var(--fs1); line-height: 1.1; } .fs-2 { font-size: var(--fs2); line-height: 1.1; } .fs-3 { font-size: var(--fs3); line-height: 1.1; } .fs-4 { font-size: var(--fs4); line-height: 1.1; } .fs-5 { font-size: var(--fs5); line-height: 1.2; } .fs-6 { font-size: var(--fs6); line-height: 1.2; } .fs-lead { font-size: var(--fs-lead); line-height: 1.4; } .fs-xs { font-size: var(--fs-xs); line-height: 1.4; } p:not([class]) { line-height: 1.8; } .text-balance { text-wrap: balance; } .text-uppercase { text-transform: uppercase; } .text-center { text-align: center; } /* -- Links ----------------------------------*/ a, a:hover, a:focus, a:active { box-shadow: none; text-decoration: none; } a:not([class]) { color: inherit; } a:not([class]):hover { color: inherit; } .link--underline { position: relative; } .link--underline:not(.is-active)::before { content: ""; position: absolute; bottom: -0.2em; left: 0; width: 100%; height: 0.0825em; background: currentColor; transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1); transform-origin: right; transform: scaleX(0) rotate(0.001deg); } .link--underline:not(.is-active):hover::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); } /* -- Colors ---------------------------------*/ .clr--white { color: var(--white); } .clr--zand { color: var(--zand); } .clr--zon { color: var(--zon); } .clr--oceaan { color: var(--oceaan); } .clr--lagune { color: var(--lagune); } .clr--grillvuur { color: var(--grillvuur); } .clr--drijfhout { color: var(--drijfhout); } .clr--primary { color: var(--primary); } .clr--secondary { color: var(--secondary); } /* -- SVG fills ------------------------------*/ .svg-text-white { fill: var(--white); } .svg-text-zon { fill: var(--zon); } /* -- Backgrounds ----------------------------*/ .bcg--white { background-color: var(--white); } .bcg--zand { background-color: var(--zand); } .bcg--zon { background-color: var(--zon); } .bcg--oceaan { background-color: var(--oceaan); } .bcg--lagune { background-color: var(--lagune); } .bcg--grillvuur { background-color: var(--grillvuur); } .bcg--drijfhout { background-color: var(--drijfhout); } .bcg--primary { background-color: var(--primary); } /* -- Buttons --------------------------------*/ .buttons-wrapper { display: flex; flex-wrap: wrap; gap: 1rem; } .buttons-wrapper--center { justify-content: center; } .button { display: inline-flex; align-items: center; justify-content: center; font-family: var(--ff-body); font-weight: 600; font-size: 1rem; line-height: 1; min-height: 44px; padding: 1rem 1.75rem; border: 0; border-radius: var(--radius-md); color: var(--button-color, var(--white)); background-color: var(--button-background, var(--primary)); cursor: pointer; transition: background-color var(--transition-fast), transform var(--transition-fast); } .button:hover { color: var(--button-color, var(--white)); transform: translateY(-1px); } .button--primary { --button-color: var(--white); --button-background: var(--primary); } .button--secondary { --button-color: var(--white); --button-background: var(--secondary); } .button--white { --button-color: var(--primary); --button-background: var(--white); } /* -- Button 3D (kenmerkende CTA) ------------*/ .button--3d { font-family: var(--ff-display); --button-3d-color: var(--zon); --button-3d-shadow: color-mix(in srgb, var(--button-3d-color) 65%, white); padding: 14px 28px; border-radius: 12px; color: var(--white); font-size: 1rem; font-weight: 600; text-transform: uppercase; background: var(--button-3d-color); box-shadow: 0 8px 0 var(--button-3d-shadow); transition: all 0.2s ease; } .button--3d:hover { color: var(--white); transform: translateY(4px); box-shadow: 0 2px 0 var(--button-3d-shadow); } .button--3d:active { transform: translateY(6px); box-shadow: 0 0 0 var(--button-3d-shadow); } /* -- Content flow ---------------------------*/ .content-flow > * + * { margin-block-start: var(--flow-space, 1em); } .content-flow :is(h1, h2, h3, h4, h5, h6, blockquote) { --flow-space: 2rem; } .content-flow :is(h1, h2, h3, h4, h5, h6) + * { --flow-space: 1rem; } /* -- Visually hidden ------------------------*/ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* -- Hamburger ------------------------------*/ .button-menu { position: relative; display: grid; place-items: center; width: 60px; height: 80px; padding: 0; border: 0; border-radius: 999px; background: var(--button-background, var(--white)); z-index: var(--z-menu-btn); /* witte knop: hamburger in de donkere themakleur */ } .button-menu.bcg--white { --hamburger-color: var(--primary-dark); } .theme-club .button-menu { --button-background: var(--white); --hamburger-color: var(--oceaan); } .theme-roast .button-menu { --button-background: var(--white); --hamburger-color: var(--drijfhout); } /* Swiper-pagina's (sfeer/vacatures): lichte achtergrond → menu-button in de themakleur met witte hamburger i.p.v. een witte knop. */ .theme-club--swiper .button-menu, .theme-roast--swiper .button-menu { --button-background: var(--primary); --hamburger-color: var(--white); } /* Open (drawer actief): altijd de witte variant — ook op de swiper-pagina's — want de knop ligt dan op de gekleurde drawer-achtergrond. */ .button-menu.is-active { --button-background: var(--white); --hamburger-color: var(--primary-dark); } .hamburger { display: inline-block; cursor: pointer; position: relative; width: 28px; height: 22px; } .hamburger-box { width: 28px; height: 22px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -1px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 28px; height: 2px; background-color: var(--hamburger-color, var(--white)); border-radius: 999px; position: absolute; transition-property: transform, opacity, top; transition-duration: 0.3s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -9px; } .hamburger-inner::after { top: 9px; width: 75%; } .is-active .hamburger-inner { transform: rotate(45deg); } .is-active .hamburger-inner::before { top: 0; opacity: 0; } .is-active .hamburger-inner::after { top: 0; width: 100%; transform: rotate(-90deg); } /* -- Site wrapper ---------------------------*/ .site-wrapper { overflow: clip; } .site-main { background: transparent; border-bottom-left-radius: clamp(1.5rem, 0.2762rem + 3.3994vw, 3rem); border-bottom-right-radius: clamp(1.5rem, 0.2762rem + 3.3994vw, 3rem); overflow: hidden; } .site-main section:first-of-type { margin-block-start: 0; } .site-main section:last-of-type { margin-block-end: 0; } /* -- Stage (media hero met overscroll) ------*/ /* Gebruikt op club/roast/menu/event-single: een full-screen video- of beeldachtergrond waar de content-tiles overheen scrollen. */ .stage { position: relative; overflow: hidden; isolation: isolate; } .stage__video, .stage__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: var(--z-bg); background-attachment: fixed; } .stage__image { background-size: cover; background-position: center; background-attachment: fixed; } .stage__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.16); z-index: var(--z-overlay); pointer-events: none; } .stage__content { position: relative; z-index: var(--z-base); padding-top: 100vh; padding-top: 100dvh; } .stage__cards { position: relative; z-index: var(--z-content); margin-top: -60vh; } .stage__cards--flush { margin-top: 0; } .stage__tail { height: 180px; position: relative; z-index: var(--z-base); } @media all and (max-width: 992px) { .stage__tail { height: 60px; } } /* -- Site header (vaste UI-laag) ------------*/ .site-header { position: fixed; display: flex; justify-content: space-between; margin: clamp(0.5rem, -0.6613rem + 3.2258vw, 2rem); width: calc(100% - calc(clamp(0.5rem, -0.6613rem + 3.2258vw, 2rem) * 2)); z-index: var(--z-ui); } .site-header--swiper { position: static; padding-bottom: clamp(0.5rem, -0.6613rem + 3.2258vw, 2rem); } .site-header__logo { width: 200px; height: auto; pointer-events: auto; } .site-header--swiper .site-header__logo .logo__white { display: none; } .drawer--is-open .site-header--swiper .site-header__logo .logo__color { display: none; } .drawer--is-open .site-header--swiper .site-header__logo .logo__white { display: block; } .site-header__actions { display: flex; align-items: center; gap: clamp(1rem, 0.2258rem + 2.1505vw, 2rem); pointer-events: auto; } .site-header__lang { color: var(--white); } /* -- Language switch ------------------------*/ .language-switch { display: flex; align-items: center; justify-content: center; } .language-switch .lang { margin: 0 0.2rem; padding: 16px 6px; background: transparent; color: var(--white); font-family: var(--ff-body); font-size: 14px; font-weight: 700; line-height: 1; text-transform: uppercase; border: 2px solid transparent; border-radius: 999px; cursor: pointer; transition: background 0.5s; } .language-switch .lang:hover { background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.15); } .language-switch .lang.is-active { border: 2px solid var(--white); background: none; } .theme-club--swiper .site-header__lang, .theme-roast--swiper .site-header__lang { position: static; inset: auto; } .theme-club--swiper .language-switch .lang, .theme-roast--swiper .language-switch .lang { color: var(--primary); } .theme-club--swiper .language-switch .lang:hover, .theme-roast--swiper .language-switch .lang:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 12%, transparent); } .theme-club--swiper .language-switch .lang.is-active, .theme-roast--swiper .language-switch .lang.is-active { border-color: var(--primary); } .drawer--is-open.theme-club--swiper .language-switch .lang, .drawer--is-open.theme-roast--swiper .language-switch .lang { color: var(--white); } .drawer--is-open.theme-club--swiper .language-switch .lang:hover, .drawer--is-open.theme-roast--swiper .language-switch .lang:hover { background: color-mix(in srgb, var(--white) 12%, transparent); border-color: color-mix(in srgb, var(--white) 12%, transparent); } .drawer--is-open.theme-club--swiper .language-switch .lang.is-active, .drawer--is-open.theme-roast--swiper .language-switch .lang.is-active { border-color: var(--white); } /* -- Reserve button (vaste CTA) -------------*/ .button--reserve { position: fixed; right: 2rem; bottom: 2rem; z-index: var(--z-reserve); gap: 1rem; border-radius: 12px; height: 56px; pointer-events: auto; } .button--reserve .reserve-icon { width: 20px; height: 20px; object-fit: contain; } .button--reserve .reserve-divider { width: 1px; height: 32px; background-color: rgba(255, 255, 255, 0.7); } /* Statische plaatsing (binnen een hero-bar i.p.v. fixed) */ .is-static { position: static; inset: auto; } /* -- Drawer (full-screen navigatie) ---------*/ .drawer { position: fixed; inset: 0; z-index: var(--z-drawer); opacity: 0; visibility: hidden; pointer-events: none; overflow-y: auto; transition: opacity 0.4s ease, visibility 0.4s ease; } .drawer.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .drawer .container-fluid { min-height: 100dvh; padding: 2rem; } .drawer { /* Hoogte minus de container-padding (2rem boven + 2rem onder), zodat de inhoud exact past en er alleen scroll is als het écht niet past. */ } .drawer .row { min-height: calc(100dvh - 4rem); } .theme-club .drawer { background: var(--zon); } .theme-roast .drawer { background: var(--grillvuur); } /* -- Brand pills (links) --------------------*/ .drawer__pills { display: flex; justify-content: center; align-items: center; gap: 1.5rem; } .brand-pill { padding: 1.5rem; aspect-ratio: 1/1.7; border-radius: var(--radius-pill); border: 2px solid var(--white); color: var(--white); text-align: center; display: grid; place-items: center; } .theme-club .brand-pill--club { background: var(--primary-dark); border: none; } .theme-roast .brand-pill--roast { background: var(--primary-dark); border: none; } .brand-pill svg { display: block; width: clamp(60px, 6vw, 70px); height: auto; } /* -- Center panel + menu --------------------*/ .drawer__center { display: flex; justify-content: center; align-items: center; } .drawer__panel { position: relative; width: min(100%, 536px); /* Schaalt mee met de vensterhoogte zodat het menu binnen 100dvh past. */ height: min(950px, 100dvh - 4rem); border-radius: var(--radius-pill); padding: 20% clamp(2rem, 4vw, 4rem) clamp(2rem, 5dvh, 5rem) clamp(2rem, 4vw, 4rem); display: flex; flex-direction: column; justify-content: space-around; align-items: center; gap: clamp(0.75rem, 2.5dvh, 2rem); overflow: hidden; text-align: center; } .theme-club .drawer__panel { background: var(--primary-dark); } .theme-roast .drawer__panel { background: var(--primary-dark); } .main-menu { display: flex; flex-direction: column; gap: 0; } .main-menu__link { color: var(--white); font-family: var(--ff-birdie); font-size: clamp(2.25rem, 4.2dvh, 3rem); text-transform: uppercase; line-height: 1.1; transition: color 0.45s ease, transform 0.25s ease; } .main-menu__link:hover, .main-menu__link.is-active { color: var(--zon); } .sub-menu { margin-top: 0; display: flex; flex-direction: column; } .sub-menu__link { color: var(--white); font-family: var(--ff-birdie); font-size: clamp(1rem, 1vw, 1.25rem); text-transform: uppercase; transition: color 0.25s ease; line-height: 1.2; } .sub-menu__link:hover, .sub-menu__link.is-active { color: var(--zon); } .drawer__star { margin-top: 0; font-size: clamp(2.5rem, 5vw, 4rem); color: var(--zon); } .drawer__star svg { display: block; width: clamp(40px, 5dvh, 70px); height: auto; } /* -- Info kolom (rechts) --------------------*/ .drawer__info { color: var(--primary-dark); padding-left: 2rem; } .drawer__info .drawer__title { font-family: var(--ff-accent); font-size: clamp(1.5rem, 1.1129rem + 1.0753vw, 2rem); margin: 0; } .drawer__info .drawer__subtitle { margin-bottom: 0; font-family: var(--ff-birdie); font-size: clamp(1rem, 0.8065rem + 0.5376vw, 1.25rem); text-transform: uppercase; } .drawer__info p { font-size: clamp(0.9rem, 1vw, 1rem); margin: 0; } .drawer__info p + p { margin-top: 1rem; } .social-links { display: flex; gap: 0.25rem; font-size: clamp(1.5rem, 2vw, 2rem); margin-top: 1rem; } .social-links i { cursor: pointer; transition: transform 0.25s ease, opacity 0.25s ease; } .social-links i:hover { transform: translateY(-2px); opacity: 0.85; } /* -- Responsive ------------------------------*/ @media (max-width: 991px) { .drawer .container-fluid { padding: 8rem 1.5rem 1.5rem 1.5rem; } .drawer .row { min-height: auto !important; gap: 1.5rem; padding-top: 5rem; padding-bottom: 2rem; } .drawer__panel { width: min(100%, 450px); height: auto; overflow: visible; padding: 10rem 2rem; } .drawer__info { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; padding-left: 0; text-align: left; } .drawer__info h3 { grid-column: 1/-1; text-align: center; margin-bottom: 0; } .drawer__info h4 { margin-top: 0; margin-bottom: 0.5rem; } .social-links { grid-column: 1/-1; justify-content: center; margin-top: 0.5rem; } } @media (min-width: 992px) and (max-width: 1199px) { .drawer__panel { max-width: 380px; } .drawer__pills { gap: 0.75rem; } .drawer__info { padding-left: 1rem; } .drawer__info p { font-size: 0.9rem; } } @media (max-width: 576px) { .drawer .container-fluid { padding: 8rem 1rem 1rem 1rem; } .drawer .row { gap: 1rem; padding-top: 4.5rem; padding-bottom: 1.5rem; } .drawer__pills { gap: 0.75rem; } .drawer__panel { width: min(100%, 340px); padding: 6rem 1.5rem; } .main-menu__link { font-size: clamp(1.55rem, 8vw, 2.1rem); } .sub-menu { margin-top: 1.5rem; } .drawer__star { margin-top: 1rem; } .drawer__info { grid-template-columns: 1fr; gap: 1rem; text-align: center; } .social-links { justify-content: center; } } /* ============================================ Menu-lijst (anker-navigatie binnen kaarten) ============================================ */ .menu { display: flex; flex-direction: column; } .menu-item { display: flex; align-items: center; text-decoration: none; color: inherit; font-family: var(--ff-display); text-transform: uppercase; gap: .5rem; font-size: clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem); } .menu-item .arrow { transition: transform 0.3s ease; font-size: .85em; } .menu-item:hover .arrow { animation: bounceRight 0.6s; } @keyframes bounceRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } } /* ============================================ Menukaart (gerechten-/drankenlijst met prijzen) ============================================ */ .menukaart { list-style: none; margin: 0; padding: 0; text-align: center; font-size: 1rem; line-height: 1.5; /* Ruimte tussen de gerechten; binnen een gerecht alleen regelhoogte. */ } .menukaart__item + .menukaart__item { margin-top: 1.25rem; } .menukaart { /* Kopregel: naam / hoeveelheid • prijs — body-font, vet. */ } .menukaart__head { margin: 0; font-weight: 700; } .menukaart__sep { margin-inline: 0.35rem; } .menukaart__desc { margin: 0; } .menukaart__allergens { display: block; font-style: italic; } /* ============================================ FAQ (accordion via
) ============================================ */ .faq { text-align: left; } .faq__item { border-bottom: 0.0625rem solid color-mix(in srgb, currentColor 25%, transparent); } .faq { /* Vraag-regel: body-font, vet, met +/×-icoon rechts. */ } .faq__question { list-style: none; /* standaard disclosure-marker weg */ cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; font-weight: 700; line-height: 1.3; } .faq__question::-webkit-details-marker { display: none; } .faq__question::marker { content: ""; } .faq__icon { flex: 0 0 auto; transition: transform 0.3s ease; } .faq__item[open] .faq__icon { transform: rotate(45deg); } .faq { /* + wordt × */ } .faq__answer { padding-bottom: 1rem; line-height: 1.5; } .faq__answer p { margin: 0; } .faq__answer p + p { margin-top: 0.75rem; } .faq__answer a { text-decoration: underline; } /* ============================================ Scroll indicator + arrow pill ============================================ */ .scroll-indicator { margin-top: clamp(2rem, 6vw, 70px); margin-bottom: clamp(2.5rem, 8vw, 100px); text-align: center; display: inline-block; font-size: 1.5rem; color: var(--white); opacity: 0; transform: rotate(180deg) scaleY(1.15); animation: dropInArrow 1s ease-out 1s forwards; } .arrow-circle { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--white); display: flex; align-items: center; justify-content: center; margin: 0 auto; } @keyframes dropInArrow { 0% { transform: rotate(180deg) translateY(50px); opacity: 0; } 60% { transform: rotate(180deg) translateY(-10px); opacity: 1; } 80% { transform: rotate(180deg) translateY(5px); } 100% { transform: rotate(180deg) translateY(0); opacity: 1; } } .arrow-pill { width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: var(--z-content); border: 2px solid var(--white); } .arrow-pill i { font-size: 2rem; display: inline-block; transition: transform 0.35s ease; color: var(--white); } /* ============================================ Sfeer-hero (sfeerimpressie + vacatures) ============================================ */ .sfeer-hero { position: relative; min-height: 100vh; min-height: 100dvh; background: var(--zand); overflow: hidden; display: flex; flex-direction: column; } .sfeer-hero > .container.flex-grow-1 { display: flex; align-items: center; } /* ============================================ Events ============================================ */ /* Eén hele sectie per scroll (alleen op de events-pagina). Snap wordt pas dóór JS ingeschakeld (.is-snapping) nadat de pagina bovenaan staat — anders springt 'mandatory' bij het laden naar het laatste item. */ /* site-main mag op de events-pagina GEEN scroll-container zijn: overflow:hidden zou de scroll-snap "afvangen" waardoor de secties niet t.o.v. het document snappen. overflow:clip klipt wél (afgeronde onderhoeken blijven dus behouden) maar wordt géén scroll-container — zo blijft de snap op het document werken. */ .page-events .site-main { overflow: clip; } html:has(.page-events.is-snapping) { scroll-snap-type: y mandatory; scroll-behavior: smooth; } .page-events .events-section { scroll-snap-align: start; scroll-snap-stop: always; } @media (prefers-reduced-motion: reduce) { html:has(.page-events.is-snapping) { scroll-snap-type: none; scroll-behavior: auto; } } .events-section { position: relative; overflow: hidden; /* Subtiele scrim zodat de witte tekst leesbaar blijft op de foto's */ } .events-section::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: var(--z-overlay); pointer-events: none; } /* Pil-maat van ring + stage: past binnen de viewporthoogte, pill-ratio behouden. 0.5826 = 536/920. */ .page-events { /* rem-based zodat de ring meeschaalt met het Osmo-systeem, met viewporthoogte-cap zodat hij in beeld blijft. 0.5826 = 536/920. */ --event-pill-h: min(55rem, calc(100svh - 3rem)); --event-pill-w: min(90vw, calc(var(--event-pill-h) * 0.5826)); } .event-ring { position: fixed; left: 50%; top: 50%; width: var(--event-pill-w); height: var(--event-pill-h); border: 0.1875rem solid var(--zon); border-radius: var(--radius-pill); transform: translate(-50%, -50%); pointer-events: none; /* Decoratief kader: boven de scrim, maar achter de kaarten/caption en UI */ z-index: var(--z-base); /* Ring hoort alleen bij de events-loop, niet bij het modules-gedeelte erboven. Standaard verborgen; verschijnt zodra .events-active actief is (JS zet dat zolang een events-sectie het midden van het scherm vult). */ opacity: 0; transition: opacity 0.4s ease; } .page-events.events-active .event-ring { opacity: 1; } .event-stage { position: relative; z-index: var(--z-base); width: var(--event-pill-w); height: var(--event-pill-h); } .event-bg--1, .event-bg--2, .event-bg--3, .event-bg--4 { background-size: cover; background-repeat: no-repeat; background-position: center; height: 100%; } /* ============================================ Tile-card (pill-vormige content kaarten) ============================================ */ .tile-card--404 { aspect-ratio: 1/1.5; justify-content: center !important; } .tile-card--main, .tile-card--main-menu, .tile-card--menu, .tile-card--atmosphere { padding-inline: clamp(1.5rem, 5vw, 69px); } .tile-card--main, .tile-card--main-menu { position: relative; border-radius: 337px; width: min(536px, 100%); display: flex; flex-direction: column; justify-content: space-between; } .tile-card--menu, .tile-card--atmosphere { position: relative; border-radius: 337px; width: min(536px, 100%); display: flex; flex-direction: column; justify-content: space-between; } .tile-card--menu { margin-top: 120px; } .tile-card__inner { /* De clamp-ondergrens (= de waarde op kleine schermen) is verdubbeld voor meer ademruimte op mobiel; de desktop-cap blijft gelijk. */ } .tile-card--main .tile-card__inner, .tile-card--main-menu .tile-card__inner { margin-top: clamp(6rem, 12vw, 146px); margin-bottom: clamp(6rem, 12vw, 146px); } .tile-card--menu .tile-card__inner, .tile-card--atmosphere .tile-card__inner { margin-top: clamp(7rem, 14vw, 175px); margin-bottom: clamp(6rem, 9vw, 114px); } .tile-card__title { text-transform: uppercase; margin-bottom: clamp(1.25rem, 0.2823rem + 2.6882vw, 2.5rem); font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); font-family: var(--ff-display); line-height: 1.625rem; } .tile-card--main-menu .tile-card__title, .tile-card--menu .tile-card__title, .tile-card--atmosphere .tile-card__title { margin-bottom: 16px; } .tile-card__subtitle { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); font-family: var(--ff-accent); line-height: 1; } .tile-card--menu .tile-card__subtitle, .tile-card--atmosphere .tile-card__subtitle { margin-bottom: 24px; } .tile-card__text { line-height: 1.5rem; } .tile-card--main .tile-card__text { margin-bottom: 60px; } .tile-card--menu .tile-card__text, .tile-card--atmosphere .tile-card__text { margin-bottom: 24px; } .tile-card__signature { display: block; font-family: var(--ff-display); font-size: clamp(1.125rem, 1.0282rem + 0.2688vw, 1.25rem); line-height: 1; text-transform: uppercase; } .tile-card__icon { display: block; margin-inline: auto; width: clamp(5rem, 2.5806rem + 6.7204vw, 8.125rem); height: auto; margin-top: clamp(1.875rem, 0.4234rem + 4.0323vw, 3.75rem); margin-bottom: 0; } /* .tile-card--main .tile-card__icon, .tile-card--main-menu .tile-card__icon { margin-top: clamp(3.75rem, 0.8468rem + 8.0645vw, 7.5rem); } */ .tile-card--menu .tile-card__icon, .tile-card--atmosphere .tile-card__icon { margin-bottom: 0; } #tropicana-bites, .tile-card--atmosphere { margin-top: -200px; } /* Grote schermen: de vervolg-modules overlappen elkaar verticaal (diagonale cascade, omdat de kaarten links/rechts afwisselen). De introductie én de 1e vervolg-module blijven staan; pas vanaf de 2e vervolg-module trekt elke kaart negatief omhoog. Daarom alleen rijen die ná een links/rechts-rij komen (niet de rij ná de gecentreerde intro). Tune met --card-overlap. */ @media (min-width: 992px) { .stage__cards { --card-overlap: clamp(6rem, 20vw, 18rem); } .stage__cards .row.justify-content-start + .row, .stage__cards .row.justify-content-end + .row { margin-top: calc(var(--card-overlap) * -1); } } .img-sfeer { margin-bottom: 1.5rem; width: 100%; max-width: 427px; height: auto; aspect-ratio: 427/229; border-radius: .75rem; object-fit: cover; } @media all and (max-width: 992px) { #luxe-bites, #tropicana-bites, .tile-card--menu, .tile-card--main, .tile-card--main-menu, .tile-card--atmosphere { margin-top: 60px; margin-inline: auto; width: min(536px, 100% - 2.5rem); } } /* ============================================ Tile-swiper (sfeer-/vacature-carrousel) ============================================ */ .swiper { overflow: visible; } .swiper img { display: block; width: 100%; height: auto; } .swiper-wrapper { align-items: stretch; } .swiper-slide { width: min(398px, 80vw) !important; flex-shrink: 0; height: 100%; display: flex; justify-content: center; align-items: center; } .swiper-slide:nth-child(even):not(:first-child) { transform: translateY(-40px); } .tile-swiper { width: min(398px, 80vw); height: min(706px, 142vw); overflow: hidden; border-radius: 268px; } .tile-swiper img, .tile-swiper video { width: 100%; height: 100%; object-fit: cover; } .tile-swiper .titel { margin-top: clamp(4rem, 24vw, 180px); line-height: 1; font-size: clamp(1.75rem, 6vw, 2.5rem); } .tile-swiper .slogan { margin-top: clamp(2rem, 8vw, 60px); line-height: 1; } .tile-card--swiper .tile-card__inner { margin-top: clamp(3.5rem, 14vw, 175px); margin-bottom: clamp(3rem, 9vw, 114px); } .tile-card--swiper .tile-card__icon { width: 77.12px; display: inline; margin-top: clamp(1.5rem, 5vw, 50px); } .swiper-overlay { display: flex; flex-direction: column; align-items: center; color: var(--white); background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 70%); } .slide-caption { position: absolute; bottom: 5rem; display: flex; flex-direction: column; align-items: center; } .slide-caption span { color: var(--white); } .slide-caption .button--3d { width: 140px; height: 50px; } .vacature-text { font-size: clamp(1.125rem, 4vw, 1.5rem); font-family: var(--ff-display); line-height: 1; } .locatie-text { font-size: clamp(1.125rem, 4vw, 1.5rem); font-family: var(--ff-accent); margin-bottom: 40px !important; } /* ============================================ Tile-event (event-kaarten + caption) ============================================ */ .tile-event { position: absolute; /* width: min(16.25rem, 62vw); min-height: 23.625rem; */ padding: clamp(1.5rem, -0.0484rem + 4.3011vw, 3.5rem);; aspect-ratio: 1 / 1.6; border-radius: 16.75rem; z-index: var(--z-content); /* flank-kaart staat grotendeels buiten de ring zodat hij niet kort op de gecentreerde caption-tekst zit (extra vw-marge voor smallere ringen) */ } .tile-event__inner { display: flex; flex-direction: column; gap: 1rem; } .tile-event__inner .tile-event__text { color: var(--drijfhout); margin: 0; } .tile-event__inner .tile-card__icon { margin: 0 auto 0 auto; } .tile-event--left { left: 0; top: 50%; transform: translate(calc(-75% - 1vw), -50%); } .tile-event--right { right: 0; top: 50%; transform: translate(calc(75% + 1vw), -50%); } .tile-event__text { font-size: 1.05rem; font-family: var(--ff-display); text-transform: uppercase; line-height: 1.1; } .event-caption { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: var(--z-content); display: flex; flex-direction: column; align-items: center; gap: 1rem; width: max-content; max-width: min(90vw, 18rem); } .event-caption__title { font-size: 2rem; font-family: var(--ff-display); line-height: 1.15; } .event-caption__location { font-size: 1.75rem; font-family: var(--ff-accent); margin-bottom: 1.75rem; } .event-caption .button--3d { width: 8.75rem; height: 3.125rem; padding: 0.5rem 0; } /* Scroll-hint onderin de ring */ .event-scroll { position: absolute; left: 50%; bottom: clamp(1.5rem, 7%, 4rem); transform: translateX(-50%); width: 3rem; height: 3rem; display: grid; place-items: center; border: 0.125rem solid var(--white); border-radius: 50%; color: var(--white); font-size: 1.25rem; z-index: var(--z-content); pointer-events: none; /* location-arrow-down bestaat niet: up-variant 180° draaien */ } .event-scroll i { display: block; transform: rotate(180deg); } @media (max-width: 991px), (max-height: 800px) { .event-scroll { display: none; } } /* ============================================ Events op mobiel/tablet: nette gestapelde layout (staat bewust ná de basis-regels zodat het deze overschrijft) ============================================ */ @media (max-width: 991px), (max-height: 800px) { .event-ring { display: none; } .events-section { min-height: 100dvh; padding: 7rem 1.5rem 6rem; } .event-stage { width: 100%; max-width: 26.25rem; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; } /* Flank-kaart wordt een gewone, gecentreerde pil */ .tile-event { position: static; } .tile-event--left, .tile-event--right { transform: none; } /* Caption uit absolute positionering halen */ .event-caption { position: static; transform: none; max-width: 100%; } } /* ============================================ Parallax slider (Smooothy) — sfeerimpressie v2 Techniek: Osmo Supply / Smooothy. Opmaak: pill-stijl zoals het ontwerp. ============================================ */ .parallax-slider__group, .parallax-slider__collection { width: 100%; } /* v2-sfeerpagina: hero exact 100svh, geen pagina-scroll (alleen waar de parallax-slider in de hero zit, dus v1 blijft ongemoeid). */ .sfeer-hero:has(.parallax-slider__group) { min-height: 0; height: 100svh; overflow: hidden; } .parallax-slider__list { width: 100%; display: flex; overflow: hidden; padding-block: 3rem; /* ruimte voor de verticale stagger */ padding-left: clamp(1rem, 4vw, 5rem); /* begin-inset zoals in het ontwerp */ cursor: grab; } .parallax-slider__list:active { cursor: grabbing; } .parallax-slider__item { flex: none; padding-inline: 1rem; position: relative; } /* Verticale stagger (afwisselend omhoog) zoals in het ontwerp. Op de inner i.p.v. het item, want Smooothy zet zelf een inline transform op het item (translateX) die anders de stagger zou wissen. */ .parallax-slider__item:nth-child(even) .parallax-slider__item-inner { transform: translateY(-2.5rem); } .parallax-slider__item-inner { /* Hoogte schaalt mee met de viewport zodat alles binnen 100svh past; breedte volgt de hoogte (0.563 = 398/706) om de pill-verhouding te behouden. */ --pill-h: min(706px, 66svh); position: relative; width: min(80vw, var(--pill-h) * 0.563); height: var(--pill-h); border-radius: 268px; overflow: clip; } .parallax-slider__item-visual { will-change: transform; position: absolute; inset: 0; width: 100%; height: 100%; } /* Beeld breder dan de pill, zodat er parallax-ruimte is */ .parallax-slider__item-img, .parallax-slider__item-visual video { object-fit: cover; -webkit-user-select: none; user-select: none; width: 160%; max-width: none; height: 100%; position: absolute; left: -30%; pointer-events: none; } /* Sfeerimpressie: foto's klikbaar maken voor de lightbox. Het beeld heeft in de parallax-slider standaard pointer-events:none (zodat slepen niet hapert); binnen de lightbox-anchor zetten we dat terug op auto + een zoom-cursor. */ .parallax-slider__zoom .parallax-slider__item-img { pointer-events: auto; cursor: zoom-in; } /* Intro-tegel (content, geen beeld/parallax) */ .parallax-slider__item-inner--intro { display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(2rem, 5vw, 4rem); } /* Bijschrift + leesbaarheidsverloop */ .parallax-slider__caption { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding-bottom: clamp(2.5rem, 9%, 5rem); color: var(--white); pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 70%); } .parallax-slider__caption span { font-family: var(--ff-accent); font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; } /* Content-overlay MÉT klikbare knop (vacatures/sfeer v2). Ligt bóven het beeld; container laat slepen door, alleen de knop/links vangen de klik. */ .parallax-slider__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0; text-align: center; padding-bottom: clamp(2.5rem, 9%, 5rem); color: var(--white); pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 70%); } .parallax-slider__content .button, .parallax-slider__content a { pointer-events: auto; margin-top: 1.5rem; margin-bottom: 3rem; } .vacancy__title { font-family: var(--ff-display); text-transform: uppercase; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1; } .vacancy__location { font-family: var(--ff-accent); font-size: clamp(1.125rem, 3vw, 1.5rem); } @media (max-width: 767px) { .parallax-slider__item { padding-inline: 0.5rem; } } /* -- Site footer ----------------------------*/ .site-footer { position: relative; z-index: var(--z-footer); margin: 0; padding: 2.4rem 0; background: var(--zand); } .site-footer-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; } .footer-credits { position: static; transform: none; margin: 0; justify-self: start; } .footer-credits span { color: var(--drijfhout); opacity: 0.33; } .footer-credits span a { color: var(--drijfhout); } .footer-socials { font-size: 1.5rem; font-weight: 300; font-family: var(--ff-accent); justify-self: center; } .footer-socials span { color: var(--primary); } .footer-socials .footer-socials__link { font-size: clamp(1.5rem, 1.1129rem + 1.0753vw, 2rem); color: var(--zon); } .footer-action { justify-self: end; } @media (max-width: 991.98px) { .site-footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-credits, .footer-socials, .footer-action { justify-self: center; } } /* Mobiele volgorde voor de variant met actieknop */ @media all and (max-width: 992px) { .site-footer--with-action .footer-credits { order: 3; } .site-footer--with-action .footer-socials { order: 2; } .site-footer--with-action .footer-action { order: 1; } } /*# sourceMappingURL=stylesheet.css.map */