/* ================================================================ VILLA BIDASOA – style-new.css (v2 – alle pagina's) Voeg toe in NA uw bestaande stylesheet.css: ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=DM+Sans:wght@300;400;500&display=swap'); /* ── VARIABELEN ─────────────────────────────────────────────── */ :root { --sand: #f7f3ed; --cream: #fdfaf6; --terra: #c4714a; --terra-dk:#a35c38; --navy: #1e2d3d; --navy-dk: #0f1a27; --gold: #c9a96e; --text: #2a2a2a; --muted: #6b6b6b; --white: #ffffff; --border: rgba(0,0,0,0.08); --r: 6px; --tr: 0.3s ease; --shadow: 0 4px 22px rgba(0,0,0,0.09); --display: 'Cormorant Garamond', Georgia, serif; --body: 'DM Sans', system-ui, sans-serif; } /* ── RESET ──────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } .vb-body { font-family: var(--body); color: var(--text); background: var(--cream); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ── TOPBAR ─────────────────────────────────────────────────── */ .vb-topbar { background: var(--navy); color: #aab8c6; font-size: 0.75rem; display: flex; justify-content: space-between; align-items: center; padding: 7px 5%; } .vb-topbar a { color: #aab8c6; text-decoration: none; } .vb-topbar a:hover { color: var(--white); } .vb-lang { display: flex; gap: 12px; } .vb-lang a { color: #aab8c6; text-decoration: none; font-size: 0.72rem; letter-spacing: 0.05em; } .vb-lang-active { color: var(--gold); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.05em; } /* ── HEADER ─────────────────────────────────────────────────── */ .vb-header { position: sticky; top: 0; z-index: 999; display: flex; align-items: center; justify-content: space-between; padding: 22px 5%; background: var(--navy); transition: background var(--tr), box-shadow var(--tr), padding var(--tr); } .vb-header--solid { background: var(--navy); } .vb-header.scrolled, .vb-header--solid.scrolled { background: var(--navy); box-shadow: 0 2px 20px rgba(0,0,0,0.22); padding: 13px 5%; } .vb-logo { font-family: var(--display); font-size: 1.65rem; font-weight: 300; color: var(--white); text-decoration: none; letter-spacing: 0.04em; } .vb-nav { display: flex; gap: 28px; } .vb-nav a { font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.85); text-decoration: none; transition: color var(--tr); } .vb-nav a:hover, .vb-nav a.active { color: var(--gold); } .vb-btn-book { background: var(--terra); color: var(--white); padding: 9px 22px; border-radius: var(--r); font-size: 0.8rem; text-decoration: none; font-weight: 500; transition: background var(--tr); white-space: nowrap; } .vb-btn-book:hover { background: var(--terra-dk); } .vb-burger { display: none; background: none; border: none; color: var(--white); font-size: 1.5rem; cursor: pointer; } /* ── HERO (homepage) ────────────────────────────────────────── */ .vb-hero { position: relative; height: 100vh; min-height: 580px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .vb-hero-slides { position: absolute; inset: 0; } .vb-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; } .vb-slide.active { opacity: 1; } .vb-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18,28,42,0.58) 0%, rgba(18,28,42,0.22) 50%, rgba(18,28,42,0.75) 100%); } .vb-hero-content { position: relative; text-align: center; color: var(--white); padding: 0 24px; animation: vb-fadeup 1.1s ease both; } @keyframes vb-fadeup { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } } .vb-hero-sub { font-size: 0.82rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; display: block; } .vb-hero-title { font-family: var(--display); font-size: clamp(3.2rem,8vw,6.8rem); font-weight: 300; line-height: 1.04; margin-bottom: 18px; } .vb-hero-tag { font-size: 1.08rem; font-weight: 300; opacity: 0.87; margin-bottom: 38px; } .vb-hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .vb-hero-badges { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); display: flex; background: rgba(255,255,255,0.13); backdrop-filter: blur(12px); border-radius: 50px; border: 1px solid rgba(255,255,255,0.2); overflow: hidden; } .vb-badge { display: flex; flex-direction: column; align-items: center; padding: 13px 26px; color: var(--white); border-right: 1px solid rgba(255,255,255,0.15); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; gap: 3px; white-space: nowrap; } .vb-badge:last-child { border-right: none; } .vb-badge-num { font-family: var(--display); font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--gold); } .vb-scroll-hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.45); font-size: 1.2rem; animation: vb-bounce 2s infinite; transition: opacity 0.4s; } @keyframes vb-bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)} } /* ── PAGE HERO (subpages) ───────────────────────────────────── */ .vb-page-hero { background: var(--navy); padding: 70px 5% 60px; text-align: center; position: relative; overflow: hidden; } .vb-page-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(196,113,74,0.12) 0%, transparent 60%); pointer-events: none; } .vb-page-hero-sub { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: block; } .vb-page-hero h1 { font-family: var(--display); font-size: clamp(2.4rem,5vw,4rem); font-weight: 300; color: var(--white); margin-bottom: 14px; hyphens: auto; overflow-wrap: break-word; } .vb-page-hero p { color: rgba(255,255,255,0.70); font-size: 1rem; max-width: 560px; margin: 0 auto; } /* ── USP STRIP ──────────────────────────────────────────────── */ .vb-usp-strip { background: var(--navy); display: flex; justify-content: center; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.07); } .vb-usp-item { display: flex; align-items: center; gap: 10px; padding: 18px 26px; font-size: 0.82rem; color: rgba(255,255,255,0.85); letter-spacing: 0.04em; border-right: 1px solid rgba(255,255,255,0.09); } .vb-usp-item:last-child { border-right: none; } .vb-usp-icon { font-size: 1.1rem; } /* ── SHARED ─────────────────────────────────────────────────── */ .vb-section { padding: 90px 0; } .vb-section--alt { background: var(--sand); } .vb-container { max-width: 1160px; margin: 0 auto; padding: 0 5%; } .vb-label { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terra); margin-bottom: 12px; display: block; } .vb-h2 { font-family: var(--display); font-size: clamp(2rem,4vw,3.2rem); font-weight: 300; line-height: 1.15; color: var(--navy); margin-bottom: 24px; } .vb-center { text-align: center; } .vb-intro { color: var(--muted); font-size: 1rem; line-height: 1.82; max-width: 660px; margin: 0 auto 48px; text-align: center; } /* ── BUTTONS ────────────────────────────────────────────────── */ .vb-btn { display: inline-block; padding: 13px 32px; border-radius: var(--r); font-size: 0.88rem; font-weight: 500; text-decoration: none; transition: background var(--tr), transform var(--tr), color var(--tr); } .vb-btn--primary { background: var(--terra); color: var(--white); } .vb-btn--primary:hover { background: var(--terra-dk); transform: translateY(-2px); } .vb-btn--outline { border: 1.5px solid var(--terra); color: var(--terra); } .vb-btn--outline:hover { background: var(--terra); color: var(--white); } .vb-btn--ghost { border: 1.5px solid rgba(255,255,255,0.7); color: var(--white); } .vb-btn--ghost:hover { background: rgba(255,255,255,0.12); } .vb-btn--gold { background: var(--gold); color: var(--white); } .vb-btn--gold:hover { background: #b8933a; } /* ── CARDS ──────────────────────────────────────────────────── */ .vb-card { background: var(--white); border-radius: 8px; padding: 32px 26px; box-shadow: var(--shadow); transition: transform var(--tr), box-shadow var(--tr); } .vb-card:hover { transform: translateY(-4px); box-shadow: 0 14px 38px rgba(0,0,0,0.13); } .vb-card-icon { font-size: 2rem; margin-bottom: 14px; } .vb-card h3 { font-family: var(--display); font-size: 1.28rem; font-weight: 400; color: var(--navy); margin-bottom: 12px; } .vb-card p, .vb-card li { font-size: 0.85rem; color: var(--muted); line-height: 1.72; } .vb-card ul { list-style: none; padding: 0; } .vb-card li { padding: 5px 0; border-bottom: 1px solid var(--border); } /* ── GRID HELPERS ───────────────────────────────────────────── */ .vb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .vb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .vb-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } /* ── PRICING TABLE ──────────────────────────────────────────── */ .vb-price-table { width: 100%; border-collapse: collapse; margin-top: 32px; background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); } .vb-price-table th { background: var(--navy); color: var(--white); padding: 16px 20px; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; font-weight: 500; } .vb-price-table td { padding: 14px 20px; font-size: 0.88rem; border-bottom: 1px solid var(--border); } .vb-price-table tr:last-child td { border-bottom: none; } .vb-price-table tr:nth-child(even) td { background: var(--sand); } .vb-price-table td:not(:first-child) { font-weight: 500; color: var(--navy); } .vb-price-season { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; } .vb-price-season--high { background: rgba(196,113,74,0.15); color: var(--terra); } .vb-price-season--mid { background: rgba(201,169,110,0.18); color: #8a6820; } .vb-price-season--low { background: rgba(30,45,61,0.10); color: var(--navy); } /* ── INFO BOX ───────────────────────────────────────────────── */ .vb-infobox { background: var(--navy); color: var(--white); border-radius: 8px; padding: 32px 36px; margin-top: 40px; } .vb-infobox h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 300; margin-bottom: 14px; color: var(--white); } .vb-infobox p, .vb-infobox li { font-size: 0.88rem; color: rgba(255,255,255,0.75); line-height: 1.78; } .vb-infobox ul { list-style: none; padding: 0; margin-top: 12px; } .vb-infobox li { padding: 5px 0 5px 18px; position: relative; border-bottom: 1px solid rgba(255,255,255,0.08); } .vb-infobox li::before { content: "→"; position: absolute; left: 0; color: var(--gold); } /* ── STEPS ──────────────────────────────────────────────────── */ .vb-steps { display: flex; flex-direction: column; gap: 0; } .vb-step { display: flex; gap: 28px; align-items: flex-start; padding: 36px 0; border-bottom: 1px solid var(--border); } .vb-step:last-child { border-bottom: none; } .vb-step-num { font-family: var(--display); font-size: 4rem; font-weight: 300; color: rgba(196,113,74,0.18); line-height: 1; min-width: 64px; text-align: center; } .vb-step-body h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 400; color: var(--navy); margin-bottom: 10px; } .vb-step-body p { font-size: 0.90rem; color: var(--muted); line-height: 1.78; } .vb-step-body strong { color: var(--terra); } /* ── CONTACT FORM ───────────────────────────────────────────── */ .vb-form { display: flex; flex-direction: column; gap: 18px; } .vb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .vb-field { display: flex; flex-direction: column; gap: 6px; } .vb-field label { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); font-weight: 500; } .vb-field input, .vb-field select, .vb-field textarea { padding: 12px 16px; border: 1.5px solid #ddd; border-radius: var(--r); font-family: var(--body); font-size: 0.90rem; color: var(--text); background: var(--white); transition: border-color var(--tr); outline: none; } .vb-field input:focus, .vb-field select:focus, .vb-field textarea:focus { border-color: var(--terra); } .vb-field textarea { min-height: 130px; resize: vertical; } /* ── MAP EMBED ──────────────────────────────────────────────── */ .vb-map-wrap { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); } .vb-map-wrap iframe { display: block; width: 100%; height: 420px; border: none; } /* ── CALENDAR ───────────────────────────────────────────────── */ .vb-cal-wrap { background: var(--white); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; } .vb-cal-wrap iframe { display: block; width: 100%; min-height: 600px; border: none; } .vb-legend { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 18px; } .vb-legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; color: var(--muted); } .vb-legend-dot { width: 14px; height: 14px; border-radius: 3px; } .vb-legend-dot--booked { background: #e05a5a; } .vb-legend-dot--free { background: #5aad7a; } .vb-legend-dot--option { background: var(--gold); } /* ── CTA BANNER ─────────────────────────────────────────────── */ .vb-cta-banner { background: linear-gradient(135deg, var(--terra) 0%, #a35c38 100%); text-align: center; padding: 84px 5%; } .vb-cta-banner h2 { font-family: var(--display); font-size: clamp(1.9rem,3.5vw,3.1rem); font-weight: 300; color: var(--white); margin-bottom: 14px; } .vb-cta-banner p { color: rgba(255,255,255,0.86); font-size: 1rem; margin-bottom: 34px; } .vb-cta-banner .vb-btn--white { background: var(--white); color: var(--terra); font-weight: 600; padding: 14px 34px; border-radius: var(--r); text-decoration: none; font-size: 0.9rem; display: inline-block; transition: background var(--tr); } .vb-cta-banner .vb-btn--white:hover { background: var(--sand); } /* ── FOOTER ─────────────────────────────────────────────────── */ .vb-footer { background: var(--navy-dk); color: rgba(255,255,255,0.60); padding: 62px 0 0; } .vb-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; padding-bottom: 50px; } .vb-footer-logo { font-family: var(--display); font-size: 1.65rem; font-weight: 300; color: var(--white); margin-bottom: 14px; } .vb-footer-brand p { font-size: 0.83rem; line-height: 1.82; margin-bottom: 5px; } .vb-footer-social { display: flex; gap: 18px; margin-top: 18px; flex-wrap: wrap; align-items: center; } .vb-footer-social a { color: var(--gold); font-size: 0.82rem; text-decoration: none; } .vb-footer-social a:hover { color: var(--white); } .vb-footer-links h4 { color: var(--white); font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 18px; } .vb-footer-links ul { list-style: none; padding: 0; } .vb-footer-links li { margin-bottom: 11px; } .vb-footer-links a { color: rgba(255,255,255,0.50); font-size: 0.83rem; text-decoration: none; transition: color var(--tr); } .vb-footer-links a:hover { color: var(--gold); } .vb-footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding: 18px 5%; text-align: center; font-size: 0.75rem; color: rgba(255,255,255,0.28); } /* ── RESPONSIVE ─────────────────────────────────────────────── */ @media (max-width: 1024px) { .vb-grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .vb-hero { min-height: 380px; height: 55vw; max-height: 520px; } .vb-slide { background-size: cover; background-position: center 25%; } .vb-nav { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--navy); padding: 20px 5%; gap: 14px; z-index: 998; } .vb-nav.open { display: flex; } .vb-btn-book { display: none; } .vb-burger { display: block; } .vb-grid-2, .vb-grid-3, .vb-grid-4 { grid-template-columns: 1fr; } .vb-hero-badges { display: none; } .vb-form-row { grid-template-columns: 1fr; } .vb-footer-grid { grid-template-columns: 1fr; gap: 28px; } .vb-step { flex-direction: column; gap: 10px; } .vb-step-num { font-size: 2.5rem; min-width: auto; } .vb-price-table { font-size: 0.8rem; } .vb-price-table th, .vb-price-table td { padding: 10px 12px; } }