@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap'); :root { --black: #0b0b0b; --dark: #1c1f21; --dark2: #24282b; --white: #ffffff; --line: #1b1b1b; --max: 1050px; --navTint: rgba(0, 0, 0, .55); /* pre-scroll (transparant) */ --navSolid: rgba(0, 0, 0, .92); /* scrolled (zwart) */ /* smooth timing like the original site */ --ease-smooth: cubic-bezier(0.165, 0.84, 0.44, 1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; height: auto; } /* ✅ 1 scrollbar: laat alleen scrollen */ html { overflow-y: auto; overflow-x: hidden; } body { margin: 0; padding: 0; overflow: visible; /* <-- belangrijk: body niet laten scrollen */ } main { overflow: visible; height: auto; max-height: none; } a { color: inherit; text-decoration: none; } .container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; } /* HEADER */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: var(--navTint); backdrop-filter: saturate(120%) blur(3px); transition: background-color .6s var(--ease-smooth); } .site-header.scrolled { background: var(--navSolid); } .header-inner { height: 60px; display: flex; align-items: center; justify-content: space-between; } .brand { font-size: 14px; letter-spacing: .18em; color: var(--white); text-transform: uppercase; } /* burger */ .burger { appearance: none; background: transparent; border: 0; padding: 12px; cursor: pointer; } .burger-box { width: 28px; height: 18px; display: inline-block; position: relative; } .burger-inner, .burger-inner::before, .burger-inner::after { content: ""; position: absolute; left: 0; width: 28px; height: 2px; background: var(--white); border-radius: 2px; transition: transform .35s var(--ease-smooth), top .35s var(--ease-smooth), opacity .35s var(--ease-smooth); } .burger-inner { top: 8px; } .burger-inner::before { top: -7px; } .burger-inner::after { top: 7px; } .menu-open { overflow: hidden; } .menu-open .burger-inner { transform: rotate(45deg); } .menu-open .burger-inner::before { top: 0; opacity: 0; } .menu-open .burger-inner::after { top: 0; transform: rotate(-90deg); } /* Overlay menu (smooth + transparant pre-scroll) */ .overlay-menu { position: fixed; top: 60px; /* direct onder header */ left: 0; right: 0; z-index: 9998; backdrop-filter: blur(6px); /* ✅ pre-scroll: transparant */ background: var(--navTint); /* smooth show/hide */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-10px); transition: opacity .55s var(--ease-smooth), transform .55s var(--ease-smooth), background-color .55s var(--ease-smooth), visibility 0s linear .55s; } /* ✅ na scroll: zwart */ .overlay-menu.scrolled { background: var(--navSolid); } /* open */ .menu-open .overlay-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .55s var(--ease-smooth), transform .55s var(--ease-smooth), background-color .55s var(--ease-smooth), visibility 0s linear 0s; } /* ✅ als je scrolled: menu-layer ook zwart */ .site-header.scrolled+.overlay-menu { background: var(--navSolid); } /* links wrapper ook iets zachter */ .overlay-links { list-style: none; margin: 0; padding: 18px 24px 24px; display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; color: var(--white); font-weight: 600; appearance: none; border: 0; font-size: 18px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; } /* dropdown container = ankerpunt */ .overlay-dropdown { position: relative; } /* submenu uit de flow -> knop verplaatst nooit */ .overlay-submenu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-6px); list-style: none; margin: 0; padding: 12px 16px; min-width: 220px; width: max-content; text-align: center; background: rgba(0, 0, 0, .92); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s var(--ease-smooth), transform .35s var(--ease-smooth), visibility 0s linear .35s; } .overlay-submenu:hover { background-color: var(--white); color: var(--black); } /* open state */ .overlay-dropdown.open .overlay-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity .35s var(--ease-smooth), transform .35s var(--ease-smooth), visibility 0s linear 0s; } .overlay-link-btn { appearance: none; background: transparent; border: 0; color: inherit; font-size: 18px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; position: static; } ul.overlay-submenu .overlay-submenu li .overlay-submenu a { min-width: min-content; position: relative; display: inline-block; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; opacity: .90; } ul.overlay-submenu:hover .overlay-submenu li:hover .overlay-submenu a:hover { opacity: 1; } /* HERO */ .hero { position: relative; height: 100vh; min-height: 640px; display: grid; place-items: center; padding-top: 60px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: url("img/Hush Bed & Breakfast.png") center/cover no-repeat; filter: contrast(1.05); transform: none; transition: none; } .hero-overlay { position: absolute; inset: 0; background: var(--navTint); } .hero-content { position: relative; text-align: center; color: var(--white); padding: 40px 0 90px; } .hero-title { margin: 0; font-size: 64px; letter-spacing: .28em; font-weight: 300; } .hero-subtitle { margin: 18px 0 10px; font-size: 26px; letter-spacing: .18em; font-weight: 300; } .hero-tagline { margin: 0; font-size: 13px; letter-spacing: .08em; opacity: .95; } .hero-cta { display: inline-block; margin-top: 36px; padding: 10px 18px; border: 2px solid rgba(255, 255, 255, .9); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: 12px; transition: background .6s var(--ease-smooth), transform .6s var(--ease-smooth); } .hero-cta:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); } /* SPLIT */ .split { display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; } .split--reverse .split-media { order: 2; } .split--reverse .split-text { order: 1; } .split-media { background: center/cover no-repeat; min-height: 340px; transition: transform 1.2s var(--ease-smooth), filter 1.2s var(--ease-smooth); transform: scale(1.01); } .reveal.is-visible .split-media { transform: scale(1); } .split-media--bw { filter: grayscale(1) contrast(1.05); } .split-text { display: flex; flex-direction: column; justify-content: center; padding: 64px 72px; background: var(--white); } .split-text--center { align-items: center; text-align: center; } .kicker { margin: 0; text-transform: uppercase; letter-spacing: .22em; font-size: 16px; font-weight: 400; } .subkicker { margin: 14px 0 0; text-transform: uppercase; letter-spacing: .24em; font-size: 12px; opacity: .75; } .divider { width: 54px; height: 2px; background: var(--line); margin: 18px auto 18px; } .divider--light { background: rgba(255, 255, 255, .8); } /* SECTIONS */ .section-dark { background: var(--dark2); color: var(--white); padding: 70px 0; } .section-light { background: var(--white); color: #111; padding: 70px 0; } /* ARTICLE */ .article-inner { max-width: 900px; } .article-title { margin: 0; text-transform: uppercase; letter-spacing: .22em; font-size: 18px; font-weight: 500; } .article-subtitle { margin: 12px 0 20px; opacity: .8; font-size: 13px; text-transform: uppercase; letter-spacing: .16em; } .article-lead { margin: 0 0 26px; opacity: .9; font-size: 13px; line-height: 1.7; } .article-card { margin-top: 26px; display: grid; grid-template-columns: 1fr; gap: 18px; max-width: 650px; } .article-image { width: 100%; height: 500px; background: center/cover no-repeat; border-radius: 2px; overflow: hidden; transition: transform 1.2s var(--ease-smooth); } .article-image:hover { transform: scale(1.02); } .article-body p { margin: 0 0 12px; font-size: 13px; line-height: 1.7; opacity: .9; } .article-link { display: inline-block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #50b7b1; text-decoration: underline; } /* Center dark block */ .center-block-inner { text-align: center; max-width: 820px; } .micro-title { margin: 0; opacity: .85; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; } .center-title { margin: 0 0 12px; font-size: 18px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; } .center-text { margin: 0; font-size: 12px; line-height: 1.8; opacity: .85; } /* Rooms */ .section-title { margin: 0; text-align: left; text-transform: uppercase; letter-spacing: .22em; font-weight: 500; font-size: 18px; } .rooms .divider { margin: 16px auto 22px; } .rooms-text { margin: 0 0 14px; max-width: 820px; font-size: 12px; line-height: 1.8; opacity: .9; } .rooms-grid { margin-top: 26px; display: flex; gap: 12px; justify-content: center; } .room-card { background: center/cover no-repeat; position: relative; overflow: hidden; border: 1px solid rgba(0, 0, 0, .12); transition: transform 1.2s var(--ease-smooth); width: 25rem; height: 18rem; } .room-card::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); transition: opacity .9s var(--ease-smooth); } .room-card span { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 6px 8px; background: rgba(255, 255, 255, .85); color: #111; text-transform: uppercase; font-size: 10px; letter-spacing: .12em; font-weight: 700; } .room-card:hover { transform: translateY(-2px); } .room-card:hover::before { opacity: .15; } /* Quote block */ .quote-inner { text-align: center; } .quote-text { margin: 18px 0 0; font-size: 16px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; line-height: 1.6; } /* SOCIAL (boven kaart) */ .social-hero { position: relative; height: 520px; display: grid; place-items: center; margin: 0; overflow: hidden; } .social-bg { position: absolute; inset: 0; background: center/cover no-repeat; filter: grayscale(1) contrast(1.05); transform: none; transition: none; } .social-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .25); } .social-content { position: relative; text-align: center; color: var(--white); } .social-title { margin: 0; font-size: 22px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; } .social-sub { margin: 12px 0 22px; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; opacity: .9; } /* SOCIAL ICONS — groter + smooth */ .social-icons { display: flex; justify-content: center; gap: 16px; } .social-icon { width: 56px; height: 56px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .7); border-radius: 6px; background: rgba(0, 0, 0, .10); backdrop-filter: blur(2px); transition: transform .7s var(--ease-smooth), background .7s var(--ease-smooth), border-color .7s var(--ease-smooth); } .social-icon img { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); opacity: .95; transition: transform .7s var(--ease-smooth), opacity .7s var(--ease-smooth); } .social-icon:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .95); } .social-icon:hover img { transform: scale(1.12); opacity: 1; } /* MAP: full width section */ .map-section { width: 100%; } /* 1 kolom, zodat map full width is */ .map-row { width: 100%; margin-left: 0; /* full bleed */ position: relative; left: 50%; right: 50%; margin-left: -50%; margin-right: -50%; min-height: 420px; background: #eee; } /* map vult hele row */ .map-frame { width: 100%; height: 100%; min-height: 420px; } .map-frame iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; } /* kaart OVER de map */ .map-card { position: absolute; top: 28px; right: 28px; width: 360px; max-width: calc(100% - 56px); background: var(--white); padding: 28px; border: 1px solid rgba(0, 0, 0, .12); box-shadow: 0 12px 40px rgba(0, 0, 0, .18); z-index: 5; } /* content kaart */ .map-card h2 { margin: 0 0 14px; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; } .map-card-img { width: 100%; height: 140px; background: center/cover no-repeat; border: 1px solid rgba(0, 0, 0, .12); margin: 12px 0 16px; } .map-card-address { margin: 0; font-size: 12px; line-height: 1.8; opacity: .85; } /* responsive: kaart onder de map */ @media (max-width: 900px) { .map-card { position: static; width: auto; max-width: none; margin: 0; border: 0; border-top: 1px solid rgba(0, 0, 0, .08); box-shadow: none; } } /* Logo contact block */ .logo-contact-inner { text-align: center; max-width: 700px; } .logo-mark { display: flex; justify-content: center; margin: 0 auto 10px; } .logo-img { width: min(360px, 100%); height: auto; display: block; } .logo-sub { margin: 0 0 10px; letter-spacing: .22em; text-transform: uppercase; font-size: 12px; opacity: .7; } .logo-address { margin: 0 0 16px; font-size: 12px; opacity: .75; } .pill { display: inline-block; padding: 10px 16px; background: #3f4d4d; color: var(--white); border-radius: 2px; font-size: 12px; letter-spacing: .08em; transition: transform .7s var(--ease-smooth), opacity .7s var(--ease-smooth); } .pill:hover { transform: translateY(-1px); opacity: .95; } .small-center { margin: 34px 0 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; } .outline-btn { display: inline-block; padding: 10px 18px; border: 2px solid rgba(0, 0, 0, .65); font-size: 12px; letter-spacing: .12em; text-transform: capitalize; transition: opacity .6s var(--ease-smooth), transform .6s var(--ease-smooth); margin-top: 12px; } .outline-btn--light { border-color: rgba(255, 255, 255, .8); } .outline-btn:hover { opacity: .9; transform: translateY(-1px); } /* Legal */ .legal-inner { text-align: center; } .legal-text { margin: 0 0 20px; letter-spacing: .14em; text-transform: uppercase; font-size: 12px; opacity: .9; } /* ========= Smooth scroll-reveal animations ========= */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 1.35s var(--ease-smooth), transform 1.35s var(--ease-smooth); will-change: opacity, transform; } .reveal--fade { transform: none; } .reveal--up { transform: translateY(26px); } .reveal--down { transform: translateY(-18px); } .reveal--left { transform: translateX(-22px); } .reveal--right { transform: translateX(22px); } .reveal.is-visible { opacity: 1; transform: translate(0, 0); } .reveal[data-delay="1"] { transition-delay: .10s; } .reveal[data-delay="2"] { transition-delay: .18s; } .reveal[data-delay="3"] { transition-delay: .26s; } .reveal[data-delay="4"] { transition-delay: .34s; } @media (prefers-reduced-motion: reduce) { .reveal { transition: none !important; opacity: 1 !important; transform: none !important; } } /* RESPONSIVE */ @media (max-width: 1050px) { .overlay-links { gap: 16px; } .overlay-link { font-size: 18px; } .split { grid-template-columns: 1fr; } .split--reverse .split-media { order: 0; } .split--reverse .split-text { order: 0; } .split-text { padding: 46px 26px; } .rooms-grid { grid-template-columns: repeat(2, 1fr); } .map-row { grid-template-columns: 1fr; } .map-card { border-left: 0; border-top: 1px solid rgba(0, 0, 0, .08); } } @media (max-width: 560px) { .hero-title { font-size: 44px; } .hero-subtitle { font-size: 18px; } .overlay-link { font-size: 16px; } .rooms-grid { grid-template-columns: 1fr; } }