/* ================================================================ @Style Heerhugowaard — rebuild-claude Volledig statische rebuild, geen Elementor/WordPress ================================================================ */ /* Google Fonts loaded via in HTML for better performance */ /* ================================================================ 1. CUSTOM PROPERTIES ================================================================ */ :root { /* Brand kleuren */ --brand: #e10077; --brand-dark: #b40060; --brand-light: #ffe1f1; --brand-pale: #fff5fb; /* Neutrale kleuren */ --bg: #fff9f6; --surface: #ffffff; --surface-2: #fdf5f0; --text: #1f1a17; --text-2: #3d322c; --muted: #6f6158; --subtle: #a8978e; --line: #ecd8cb; --line-2: #f5e8e0; /* Footer */ --footer-bg: #1a0d07; --footer-text: #f8e8dc; --footer-muted: #b9a497; --footer-link: #ffcce8; /* Spacing */ --section-y: 4.5rem; --container: 1160px; /* Radii */ --r-xs: 6px; --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 36px; --r-full: 999px; /* Shadows */ --shadow-xs: 0 2px 6px rgba(73, 26, 14, 0.06); --shadow-sm: 0 4px 14px rgba(73, 26, 14, 0.08); --shadow: 0 12px 36px rgba(73, 26, 14, 0.10); --shadow-lg: 0 24px 60px rgba(73, 26, 14, 0.14); --shadow-brand: 0 8px 32px rgba(225, 0, 119, 0.22); /* Transitions */ --t-fast: 0.15s ease; --t: 0.25s ease; --t-slow: 0.45s ease; } /* ================================================================ 2. RESET & BASIS ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { margin: 0; font-family: "Mulish", "Segoe UI", system-ui, sans-serif; font-size: 1rem; line-height: 1.6; color: var(--text); background-color: var(--bg); background-image: radial-gradient(ellipse 60% 45% at 100% 0, #ffd3e8 0, transparent 55%), radial-gradient(ellipse 55% 40% at 0 25%, #ffe4cf 0, transparent 50%), radial-gradient(ellipse 40% 35% at 60% 90%, #ffe8f4 0, transparent 60%); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } ul, ol { padding-left: 1.4em; } /* ================================================================ 3. TYPOGRAFIE ================================================================ */ h1, h2, h3, h4 { font-family: "Trirong", Georgia, serif; line-height: 1.12; margin: 0 0 0.75rem; color: var(--text); font-weight: 700; } h1 { font-size: clamp(2.2rem, 4.5vw, 4rem); } h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); } h4 { font-size: 1.05rem; font-weight: 800; } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: "Mulish", sans-serif; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-dark); background: var(--brand-light); padding: 0.35rem 0.85rem; border-radius: var(--r-full); margin-bottom: 1rem; } .eyebrow::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0; } .lead { font-size: 1.1rem; color: var(--muted); line-height: 1.7; } .note { font-size: 0.875rem; color: var(--subtle); font-style: italic; margin-top: 0.75rem; } /* ================================================================ 4. LAYOUT HULPKLASSEN ================================================================ */ .container { width: min(100% - 2.8rem, var(--container)); margin-inline: auto; } .section { padding-block: var(--section-y); } .section--alt { background: var(--surface-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); } .section-head { margin-bottom: 2.5rem; } .section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .section-head p { color: var(--muted); max-width: 55ch; margin-inline: auto; } .grid-2 { display: grid; gap: 1.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { display: grid; gap: 1.4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { display: grid; gap: 1.2rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ================================================================ 5. KNOPPEN ================================================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; border-radius: var(--r-full); padding: 0.72rem 1.3rem; font-family: "Mulish", sans-serif; font-size: 0.92rem; font-weight: 800; border: 1.5px solid transparent; cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--shadow-brand); } .btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: 0 12px 36px rgba(225, 0, 119, 0.30); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-xs); } .btn-secondary:hover { border-color: var(--brand-light); background: var(--brand-pale); color: var(--brand-dark); box-shadow: var(--shadow-sm); } .btn-ghost { background: transparent; color: var(--brand-dark); border-color: var(--brand-light); } .btn-ghost:hover { background: var(--brand-light); } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } /* ================================================================ 6. KAARTEN (CARDS) ================================================================ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); transition: box-shadow var(--t), transform var(--t); } .card:hover { box-shadow: var(--shadow); } .card--flat { box-shadow: none; } .card--brand { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; border-color: transparent; } .card--brand h2, .card--brand h3, .card--brand p { color: #fff; } .card--brand .lead { color: rgba(255,255,255,0.85); } /* ================================================================ 7. NAVIGATIEBALK (HEADER) ================================================================ */ .topbar { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--line); transition: box-shadow var(--t); } .topbar.scrolled { box-shadow: var(--shadow-sm); } .topbar-inner { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .logo-link { flex-shrink: 0; width: 120px; transition: opacity var(--t-fast); } .logo-link:hover { opacity: 0.85; } .nav-toggle { display: none; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r); padding: 0.5rem 0.7rem; font-size: 1.25rem; cursor: pointer; line-height: 1; color: var(--text); transition: background var(--t-fast), border-color var(--t-fast); } .nav-toggle:hover { background: var(--brand-pale); border-color: var(--brand-light); color: var(--brand-dark); } .main-nav ul { display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0; } .main-nav a { text-decoration: none; padding: 0.5rem 0.9rem; border-radius: var(--r-full); font-weight: 700; font-size: 0.92rem; color: var(--text-2); transition: background var(--t-fast), color var(--t-fast); } .main-nav a:hover, .main-nav a.active { background: var(--brand-light); color: var(--brand-dark); } .nav-cta { flex-shrink: 0; } /* ================================================================ 8. VOORTGANGSBALK ================================================================ */ .progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--brand), #ff6eb8); z-index: 200; transition: width 0.1s linear; pointer-events: none; } /* ================================================================ 9. HERO SECTIE ================================================================ */ .hero { padding: 5rem 0 4rem; position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center; } .hero-content { position: relative; z-index: 1; } .hero-title { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.06; margin-bottom: 1.2rem; font-style: italic; } .hero-title span { display: block; font-style: normal; color: var(--brand); } .hero-lead { font-size: 1.12rem; color: var(--muted); max-width: 42ch; line-height: 1.7; margin-bottom: 0; } .hero-info { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.55rem; } .hero-info li { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.93rem; } .hero-info li::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; } .hero-info a { text-decoration: none; color: var(--text-2); transition: color var(--t-fast); } .hero-info a:hover { color: var(--brand-dark); } .hero-visual { position: relative; } .hero-img-wrap { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .hero-img-wrap img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; } .hero-badge { position: absolute; bottom: 1.5rem; left: -1.2rem; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 0.8rem 1.1rem; box-shadow: var(--shadow); display: flex; align-items: center; gap: 0.75rem; max-width: 200px; } .hero-badge-icon { font-size: 1.6rem; flex-shrink: 0; } .hero-badge-text { font-weight: 800; font-size: 0.8rem; line-height: 1.35; color: var(--text); } .hero-badge-text span { display: block; color: var(--brand-dark); font-size: 1.1rem; } /* Decoratieve blob achtergrond */ .hero::before { content: ''; position: absolute; top: -20%; right: -10%; width: 55%; height: 100%; background: radial-gradient(ellipse at center, var(--brand-light) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ================================================================ 10. VIRTUAL TOUR ================================================================ */ .tour-embed { width: 100%; border: 0; border-radius: var(--r-xl); min-height: 520px; box-shadow: var(--shadow); display: block; } /* ================================================================ 11. DIENSTEN KAARTEN (homepage) ================================================================ */ .service-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; transition: transform var(--t), box-shadow var(--t), border-color var(--t); text-decoration: none; color: inherit; position: relative; overflow: hidden; } .service-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--brand-pale), transparent 70%); opacity: 0; transition: opacity var(--t); pointer-events: none; } .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--brand-light); } .service-card:hover::after { opacity: 1; } .service-icon { width: 52px; height: 52px; border-radius: var(--r); background: var(--brand-pale); border: 1px solid var(--brand-light); display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 0.4rem; position: relative; z-index: 1; } .service-card h3 { font-size: 1.1rem; margin-bottom: 0.3rem; position: relative; z-index: 1; } .service-card p { font-size: 0.9rem; color: var(--muted); margin: 0; position: relative; z-index: 1; } .service-link { margin-top: auto; padding-top: 0.8rem; font-size: 0.85rem; font-weight: 800; color: var(--brand-dark); text-decoration: none; display: flex; align-items: center; gap: 0.35rem; position: relative; z-index: 1; transition: gap var(--t-fast); } .service-card:hover .service-link { gap: 0.6rem; } /* ================================================================ 12. MERKENBALK (brands) ================================================================ */ .brands-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: center; max-width: 700px; margin-inline: auto; } .brand-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; display: grid; place-items: center; min-height: 100px; box-shadow: var(--shadow-xs); transition: box-shadow var(--t), transform var(--t); } .brand-item:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); } .brand-item img { max-height: 52px; width: auto; object-fit: contain; } /* ================================================================ 13. CTA STRIP ================================================================ */ .cta-strip { background: linear-gradient(135deg, var(--brand) 0%, #c4006a 50%, var(--brand-dark) 100%); border-radius: var(--r-xl); padding: 3rem 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; box-shadow: var(--shadow-brand); position: relative; overflow: hidden; } .cta-strip::before { content: ''; position: absolute; top: -30%; right: -5%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 65%); pointer-events: none; } .cta-strip h2, .cta-strip p { color: #fff; } .cta-strip h2 { margin-bottom: 0.5rem; } .cta-strip p { color: rgba(255,255,255,0.85); margin: 0; } .cta-strip .btn-secondary { background: #fff; color: var(--brand-dark); border-color: transparent; } .cta-strip .btn-secondary:hover { background: var(--brand-pale); } /* ================================================================ 14. CONTACTFORMULIER ================================================================ */ .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } .form-grid .full { grid-column: 1 / -1; } .form-field { display: flex; flex-direction: column; gap: 0.35rem; } .form-field label { font-size: 0.82rem; font-weight: 700; color: var(--text-2); letter-spacing: 0.02em; } input[type="text"], input[type="email"], input[type="tel"], textarea, select { width: 100%; border: 1.5px solid var(--line); border-radius: var(--r); padding: 0.72rem 0.9rem; font: inherit; font-size: 0.95rem; color: var(--text); background: var(--surface); outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast); } input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(225, 0, 119, 0.12); } textarea { resize: vertical; min-height: 120px; } /* ================================================================ 15. OPENINGSTIJDEN TABEL ================================================================ */ .hours-table { width: 100%; border-collapse: collapse; margin-top: 1rem; } .hours-table tr { border-bottom: 1px dashed var(--line); transition: background var(--t-fast); } .hours-table tr:last-child { border-bottom: none; } .hours-table tr:hover { background: var(--brand-pale); } .hours-table td { padding: 0.55rem 0.25rem; font-size: 0.95rem; } .hours-table td:last-child { text-align: right; font-weight: 700; color: var(--text-2); } .hours-table .closed { color: var(--subtle); font-weight: 400; } /* ================================================================ 16. PRIJSTABELLEN (diensten pagina) ================================================================ */ .price-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; } .price-table tbody tr { border-bottom: 1px solid var(--line-2); transition: background var(--t-fast); } .price-table tbody tr:last-child { border-bottom: none; } .price-table tbody tr:nth-child(even) { background: var(--surface-2); } .price-table tbody tr:hover { background: var(--brand-pale); } .price-table td { padding: 0.6rem 0.5rem; font-size: 0.93rem; vertical-align: middle; } .price-table td:last-child { text-align: right; font-weight: 800; color: var(--brand-dark); white-space: nowrap; padding-right: 0; } .price-table .sublabel { font-size: 0.8rem; color: var(--muted); display: block; margin-top: 0.15rem; } /* ================================================================ 17. CATEGORIE-NAV (diensten pagina) ================================================================ */ .cat-nav { position: sticky; top: 81px; z-index: 50; background: rgba(255, 249, 246, 0.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); padding: 0.75rem 0; } .cat-nav-inner { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; } .cat-nav-inner::-webkit-scrollbar { display: none; } .cat-pill { flex-shrink: 0; padding: 0.45rem 1rem; border-radius: var(--r-full); font-size: 0.82rem; font-weight: 700; text-decoration: none; color: var(--muted); border: 1.5px solid transparent; background: transparent; white-space: nowrap; transition: all var(--t-fast); cursor: pointer; } .cat-pill:hover, .cat-pill.active { background: var(--brand-light); color: var(--brand-dark); border-color: var(--brand-light); } /* ================================================================ 18. DIENSTEN SECTIE-KAARTEN ================================================================ */ .dienst-section { padding-block: 3.5rem; scroll-margin-top: 140px; } .dienst-section + .dienst-section { border-top: 1px solid var(--line-2); } .dienst-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.8rem; } .dienst-icon-lg { width: 60px; height: 60px; border-radius: var(--r-lg); background: var(--brand-pale); border: 1.5px solid var(--brand-light); display: grid; place-items: center; font-size: 1.8rem; flex-shrink: 0; } .dienst-header-text h2 { margin-bottom: 0.35rem; } .dienst-header-text p { color: var(--muted); margin: 0; font-size: 0.97rem; } /* ================================================================ 19. TEAM KAARTEN ================================================================ */ .team-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--t), box-shadow var(--t); } .team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .team-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; transition: transform 0.6s ease; } .team-card:hover .team-img { transform: scale(1.03); } .team-info { padding: 1.3rem 1.4rem 1.5rem; border-top: 3px solid var(--brand-light); position: relative; } .team-info::before { content: ''; position: absolute; top: 0; left: 1.4rem; width: 40px; height: 3px; background: var(--brand); border-radius: 0 0 3px 3px; } .team-info h3 { margin-bottom: 0.2rem; } .team-role { font-size: 0.82rem; font-weight: 700; color: var(--brand-dark); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.6rem; } .team-bio { font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin: 0; } /* ================================================================ 20. USP / WAARDEN STRIP ================================================================ */ .usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .usp-item { text-align: center; padding: 1.6rem 1rem; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); transition: border-color var(--t), background var(--t); } .usp-item:hover { border-color: var(--brand-light); background: var(--brand-pale); } .usp-icon { font-size: 2rem; display: block; margin-bottom: 0.6rem; } .usp-item h4 { margin-bottom: 0.3rem; font-size: 0.97rem; } .usp-item p { font-size: 0.85rem; color: var(--muted); margin: 0; } /* ================================================================ 21. VOETTEKST (FOOTER) ================================================================ */ footer { background: var(--footer-bg); color: var(--footer-text); margin-top: 5rem; } .footer-top { padding: 3.5rem 0 2.5rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-brand .logo-link { width: 140px; display: block; margin-bottom: 1rem; opacity: 0.9; filter: brightness(1.1); } .footer-brand p { font-size: 0.9rem; color: var(--footer-muted); line-height: 1.65; max-width: 26ch; margin: 0; } .footer-col h4 { color: var(--footer-text); font-family: "Mulish", sans-serif; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; opacity: 0.55; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .footer-col a { color: var(--footer-muted); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color var(--t-fast); display: flex; align-items: flex-start; gap: 0.4rem; } .footer-col a:hover { color: var(--footer-link); } .footer-bottom { padding: 1.2rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .footer-bottom p { font-size: 0.82rem; color: var(--footer-muted); margin: 0; } .footer-socials { display: flex; gap: 0.6rem; } .social-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); display: grid; place-items: center; text-decoration: none; font-size: 0.85rem; color: var(--footer-muted); transition: background var(--t-fast), color var(--t-fast); } .social-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; } /* ================================================================ 22. SCROLL-ANIMATIES ================================================================ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ================================================================ 23. TERUG NAAR BOVEN ================================================================ */ .back-top { position: fixed; bottom: 1.8rem; right: 1.8rem; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; border: none; box-shadow: var(--shadow-brand); display: grid; place-items: center; font-size: 1.1rem; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity var(--t), transform var(--t), background var(--t-fast); pointer-events: none; z-index: 90; text-decoration: none; } .back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-top:hover { background: var(--brand-dark); } /* ================================================================ 24. DIVERSE HULPKLASSEN ================================================================ */ .text-brand { color: var(--brand); } .text-muted { color: var(--muted); } .text-center { text-align: center; } .mt-xs { margin-top: 0.5rem; } .mt-sm { margin-top: 1rem; } .mt-md { margin-top: 1.8rem; } .divider { border: none; border-top: 1px solid var(--line); margin: 0; } .badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: var(--r-full); text-transform: uppercase; letter-spacing: 0.08em; } .badge-pink { background: var(--brand-light); color: var(--brand-dark); } .badge-gold { background: #fff3d6; color: #9a6b00; } /* ── Formulier feedback ───────────────────────────────────────── */ .form-success, .form-error { border-radius: var(--r-lg); padding: 1.6rem 1.8rem; display: flex; gap: 1rem; align-items: flex-start; } .form-success { background: #f0faf4; border: 1.5px solid #a3d9b4; } .form-error { background: #fff5f5; border: 1.5px solid #f5b8b8; margin-top: 1rem; } .form-success-icon, .form-error-icon { font-size: 1.8rem; flex-shrink: 0; } .form-success h4 { color: #1a6b34; margin-bottom: 0.35rem; } .form-success p { color: #2d7a47; font-size: 0.93rem; margin: 0; } .form-error h4 { color: #a82020; margin-bottom: 0.35rem; } .form-error p { color: #c23030; font-size: 0.93rem; margin: 0; } .btn-loading { opacity: 0.7; cursor: not-allowed; pointer-events: none; } /* ================================================================ 25. RESPONSIVE / MOBIEL ================================================================ */ @media (max-width: 1020px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .usp-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { :root { --section-y: 3rem; } /* Nav */ .nav-toggle { display: block; } .nav-cta { display: none; } .main-nav { position: absolute; inset: 80px 0 auto; background: #fff7f3; border-bottom: 1px solid var(--line); transform-origin: top; transform: scaleY(0); opacity: 0; pointer-events: none; transition: transform 0.22s ease, opacity 0.22s ease; } .main-nav.open { transform: scaleY(1); opacity: 1; pointer-events: auto; } .main-nav ul { padding: 1rem 1.2rem; flex-direction: column; gap: 0.2rem; } .main-nav a { display: block; padding: 0.65rem 1rem; border-radius: var(--r); } /* Grids */ .hero-grid, .grid-2, .grid-3, .grid-4, .brands-grid { grid-template-columns: 1fr; } /* Hero */ .hero { padding: 3rem 0 2.5rem; } .hero-badge { display: none; } .hero::before { display: none; } /* CTA Strip */ .cta-strip { padding: 2rem 1.8rem; flex-direction: column; text-align: center; } .cta-strip .btn-row { justify-content: center; } /* Footer */ .footer-top { grid-template-columns: 1fr; gap: 1.8rem; } .footer-brand { grid-column: auto; } .footer-bottom { flex-direction: column; text-align: center; } /* Form */ .form-grid { grid-template-columns: 1fr; } .form-grid .full { grid-column: auto; } /* USP */ .usp-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .usp-grid { grid-template-columns: 1fr; } .hero-title { font-size: clamp(2rem, 8vw, 2.8rem); } .cta-strip h2 { font-size: 1.5rem; } } /* ================================================================ 26. DIENSTEN PAGINA — snel keuzemenu & prijskaarten ================================================================ */ .quick-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 2rem; } .quick-btn { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 1rem 0.75rem; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: var(--text); font-weight: 700; font-size: 0.82rem; text-align: center; line-height: 1.3; box-shadow: var(--shadow-xs); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .quick-btn:hover { background: var(--brand-pale); border-color: var(--brand-light); color: var(--brand-dark); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .quick-btn .qi { font-size: 1.6rem; display: block; } .price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-xs); } .price-card-head { background: var(--brand-pale); border-bottom: 1px solid var(--brand-light); padding: 0.7rem 1.1rem; font-weight: 800; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--brand-dark); } .price-card table { width: 100%; border-collapse: collapse; } .price-card td { padding: 0.55rem 1.1rem; font-size: 0.9rem; vertical-align: top; border-bottom: 1px solid var(--line-2); } .price-card tr:last-child td { border-bottom: none; } .price-card tr:nth-child(even) td { background: var(--surface-2); } .price-card tr:hover td { background: var(--brand-pale); } .price-card td:last-child { text-align: right; font-weight: 800; color: var(--brand-dark); white-space: nowrap; padding-left: 0.5rem; } .price-sub { display: block; font-size: 0.78rem; color: var(--subtle); font-weight: 400; margin-top: 0.1rem; } .price-indent { color: var(--muted); font-size: 0.87rem; } .afspraak-card { background: var(--brand-pale); border: 1.5px solid var(--brand-light); border-radius: var(--r-lg); padding: 1.4rem; } .afspraak-card h4 { color: var(--brand-dark); margin-bottom: 0.5rem; } .afspraak-card p { font-size: 0.9rem; color: var(--muted); margin-bottom: 1rem; } .section-label { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem; border-radius: var(--r-lg); border: 1.5px solid var(--brand-light); background: var(--brand-pale); } .section-label--gold { background: #fff9e8; border-color: #ffe599; } .section-label strong { font-family: "Trirong", serif; font-size: 1rem; color: var(--brand-dark); } .section-label--gold strong { color: #9a6b00; } .section-label p { margin: 0; font-size: 0.83rem; color: var(--muted); } @media (max-width: 820px) { .quick-nav { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } } @media (max-width: 420px) { .quick-btn { font-size: 0.78rem; } } /* ================================================================ 27. PRINT STIJLEN ================================================================ */ @media print { .topbar, .back-top, .progress-bar, .nav-toggle { display: none; } .hero { padding: 1rem 0; } body { background: white; } }