/* ============================================= */ /* ===== 1. ROOT VARIABLES & GLOBAL STYLES ===== */ /* ============================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap'); :root { /* Locked Light Theme - Optimized for a clean, modern look with accent */ --accent-color: #20d57d; --accent-color-darker: #16b76c; --background-primary: #ffffff; --background-secondary: #f0f4f8; --text-primary: #1a202c; --text-secondary: #4a5568; --border-color: #e2e8f0; --card-bg: #ffffff; --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1); --gradient-start: #edf2f7; --gradient-end: #e2e8f0; } /* Force the light theme on every */ body { font-family: 'Inter', sans-serif; font-weight: 400; margin: 0; color: var(--text-primary); line-height: 1.6; background-color: var(--background-primary); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: scroll; transition: background-color 0.4s ease, color 0.4s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } /* ============================================= */ /* ===== 2. TEXT BLOCK & GLOBAL ELEMENTS ===== */ /* ============================================= */ .text-block { background: var(--background-secondary); border-left: 5px solid var(--accent-color); padding: clamp(0.75rem, 1.5vw, 1rem); border-radius: 10px; color: var(--text-primary); margin-bottom: clamp(0.75rem, 1vw, 0.75rem); font-size: 1rem; line-height: 1.5; box-shadow: var(--card-shadow); text-align: center; } .text-block ul { list-style-position: inside; padding-left: 0; margin: 1rem auto; max-width: fit-content; text-align: left; } .text-block li { margin-bottom: 0.5rem; color: var(--text-primary); } /* =================================== */ /* ===== 3. LAYOUT & CONTAINER ===== */ /* =================================== */ .container { width: clamp(90%, 80vw, 1200px); margin-inline: auto; padding: 0; } main { position: relative; /* Needed for transform: translateY to work correctly */ margin-top: 0; /* Initial margin-top will be set by JS on load */ transition: transform 0.3s ease-out; /* Smooth transition for main's transform */ } main > section { padding-block: clamp(1rem, 2.5vw, 2rem); background-color: var(--background-primary); } .section-with-background-image { background-image: url('/static/images/background.webp'); background-size: cover; /* This will be dynamically updated by JS */ background-repeat: no-repeat; background-position: center center; /* Ensure background stays centered during zoom */ min-height: clamp(200px, 20vw, 40vh); /* Responsive height */ padding: 2rem; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background-size 0.3s ease; /* Smooth transition for background-size */ } /* Specific background positioning for different image sections */ #image-section-1 { background-position: center top; /* Initial alignment to top */ } #image-section-2 { background-position: center bottom; /* Initial alignment to bottom */ } /* ============================ */ /* ===== 4. TYPOGRAPHY ===== */ /* ============================ */ h1, h2, h3, h4 { font-weight: 600; color: var(--text-primary); line-height: 1.2; } h1 { font-size: clamp(2rem, 3.5vw, 3rem); text-align: center; margin-bottom: 0.75rem; } h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); text-align: center; margin-bottom: 0.75rem; } h3 { font-size: clamp(1.2rem, 2vw, 1.75rem); font-weight: 500; margin-bottom: 0.5rem; } main > section > .container > p { text-align: center; margin-bottom: 1rem; color: var(--text-secondary); max-width: 700px; margin-inline: auto; font-size: 1.05rem; line-height: 1.7; } /* ======================================= */ /* ===== 5. HEADER & NAVIGATION ===== */ /* ======================================= */ header { background-color: rgba(255, 255, 255, 0.9); padding-block: 0.4rem; position: fixed; width: 100%; top: 0; left: 0; transform: translateY(0); /* Default state for header animation */ transition: transform 0.3s ease-out, background-color 0.4s ease; z-index: 1000; /* Default z-index for header */ border-bottom: 1px solid var(--border-color); box-shadow: var(--card-shadow); backdrop-filter: blur(10px); } header.hidden { /* This class is still used by JS to mark the hidden state, but transform is applied directly */ } header .container { display: flex; justify-content: space-between; align-items: center; position: relative; } .logo-container { display: flex; align-items: center; text-decoration: none; color: inherit; position: relative; z-index: 1000; /* Default, adjusted by JS for mobile menu */ } .logo { height: clamp(50px, 9vw, 65px); } .logo-text { font-size: clamp(1.3rem, 1.2rem + 1vw, 1.6rem); font-weight: 600; margin-left: 0.85rem; } .orange-text { color: var(--accent-color); font-weight: 700; } nav a { color: var(--text-primary); text-decoration: none; margin-left: clamp(0.75rem, 1.5vw, 1.25rem); transition: color 0.3s ease, transform 0.2s ease; font-weight: 500; position: relative; padding-bottom: 3px; } nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--accent-color); transition: width 0.3s ease; } nav a:hover, nav a:focus { color: var(--accent-color); } nav a:hover::after, nav a:focus::after { width: 100%; } /* ================================== */ /* ===== 6. CARDS & GRIDS ===== */ /* ================================== */ .card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(0.4rem, 0.8vw, 0.65rem); } .card { position: relative; background: var(--card-bg); padding: clamp(0.8rem, 1.3vw, 1rem); border-radius: 12px; text-decoration: none; color: var(--text-primary); border: 1px solid var(--border-color); box-shadow: var(--card-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; justify-content: space-between; } .card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); } .card p { text-align: left; margin-bottom: 0; color: var(--accent-color); font-weight: 600; font-size: 1.05rem; } /* ======================================== */ /* ===== 7. SLIDERS & ACTION BUTTONS ===== */ /* ======================================== */ .slider-container { display: flex; gap: clamp(1.25rem, 3vw, 2rem); justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; } .slider-group { flex-basis: 450px; text-align: center; } .slider-group label { display: block; margin-bottom: 0.6rem; font-size: 1.15rem; font-weight: 500; color: var(--text-primary); } .slider-group output { display: block; margin-top: 0.5rem; font-size: 1.8rem; font-weight: 600; color: var(--accent-color); } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; background: linear-gradient(to right, var(--accent-color) var(--track-fill, 0%), #dfe4ea var(--track-fill, 0%)); border-radius: 5px; cursor: grab; transition: background 0.3s ease; outline: none; } input[type="range"]:focus { outline: none; } input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; background: var(--accent-color-darker); border-radius: 50%; border: 5px solid var(--card-bg); box-shadow: 0 4px 8px rgba(0,0,0,0.35); transition: background 0.3s ease, transform 0.2s ease; cursor: grab; } input[type="range"]:active::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb { transform: scale(1.1); cursor: grabbing; } input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:hover::-moz-range-thumb { background: var(--accent-color-darker); } /* Add JS for track fill */ input[type="range"] { --track-fill: 0%; } /* Saldering Toggle Styles */ .saldering-toggle-container { text-align: center; margin-top: 1.5rem; } .saldering-toggle-container p { font-size: 1rem; font-weight: 500; color: var(--text-primary); margin-bottom: 0.5rem; } .toggle-switch { display: inline-flex; background-color: var(--background-secondary); border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); } .toggle-switch .btn { /* Use .btn styles for padding etc. */ padding: 0.75rem 1rem; font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; flex-grow: 1; text-align: center; border: none; /* Override default .btn border */ background-color: transparent; /* Default background */ box-shadow: none; /* Remove default .btn shadow */ } .toggle-switch .btn.active { background-color: var(--accent-color); color: #fff; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); } .toggle-switch .btn:hover { background-color: rgba(var(--accent-color), 0.1); /* Lighter hover for non-active */ } .toggle-switch .btn.active:hover { background-color: var(--accent-color-darker); /* Darker hover for active */ } /* ======================================== */ /* ===== 8. CALCULATE & CTA BUTTONS ===== */ /* ======================================== */ .calculate-button-container { text-align: center; margin-top: 1.5rem; } #calculateBtn, .cta-button, .btn-submit { padding: clamp(0.9rem, 1.8vw, 1.2rem) clamp(2rem, 4vw, 2.8rem); font-size: clamp(1.05rem, 1.6vw, 1.2rem); border-radius: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; border: none; display: inline-flex; align-items: center; justify-content: center; } #calculateBtn { background-color: var(--accent-color); color: #fff; position: relative; min-width: 250px; box-shadow: 0 7px 15px rgba(32, 213, 125, 0.45); } #calculateBtn:hover:not(:disabled) { background-color: var(--accent-color-darker); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(32, 213, 125, 0.55); } #calculateBtn:focus-visible { outline: 3px solid var(--accent-color-darker); outline-offset: 4px; } #calculateBtn:disabled { background-color: #cbd5e0; cursor: not-allowed; box-shadow: none; transform: none; } /* Loader for calculate button */ .loader { border: 3px solid rgba(255, 255, 255, 0.3); border-top: 3px solid #fff; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: none; margin-left: 10px; } .calculate-button-container button.loading .btn-text { visibility: hidden; } .calculate-button-container button.loading .loader { display: inline-block; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .cta-button-container { text-align: center; } .cta-button { background-color: var(--accent-color); color: #fff; text-decoration: none; box-shadow: 0 7px 15px rgba(32, 213, 125, 0.45); } .cta-button:hover { background-color: var(--accent-color-darker); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(32, 213, 125, 0.55); } .btn-submit { background-color: var(--accent-color); color: #fff; box-shadow: 0 7px 15px rgba(32, 213, 125, 0.45); } .btn-submit:hover { background-color: var(--accent-color-darker); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(32, 213, 125, 0.55); } /* ================================== */ /* ===== 9. FORMS & INPUT FIELDS ===== */ /* ================================== */ #leadForm { max-width: 600px; margin-inline: auto; background: var(--background-secondary); padding: clamp(1rem, 2vw, 1.5rem); border-radius: 12px; box-shadow: var(--card-shadow); } .form-group { margin-bottom: 0.75rem; } .form-group label { display: block; font-size: 1rem; font-weight: 500; margin-bottom: 0.25rem; color: var(--text-primary); } #leadForm input[type="text"], #leadForm input[type="email"], #leadForm input[type="tel"] { width: 100%; padding: 0.9rem; border: 1px solid var(--border-color); background-color: var(--card-bg); color: var(--text-primary); border-radius: 8px; font-size: 1.05rem; font-family: 'Inter', sans-serif; font-weight: 400; transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.4s ease; } #leadForm input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 6px rgba(32, 213, 125, 0.4); } #leadForm input.invalid { border-color: #ef4444; box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.25); } .form-check-group { margin-top: 0.75rem; margin-bottom: 0.75rem; text-align: center; } .checkbox-container input[type="checkbox"] { display: none; /* Hide default checkbox */ } .checkbox-container label { position: relative; padding-left: 28px; /* Space for custom checkbox */ font-size: 0.95rem; line-height: 1.4; cursor: pointer; color: var(--text-secondary); margin-bottom: 0; display: inline-block; /* Allows text wrapping */ text-align: left; } .checkbox-container label::before { content: ''; position: absolute; left: 0; top: 0; width: 20px; /* Size of custom checkbox */ height: 20px; border: 2px solid var(--border-color); border-radius: 4px; background-color: var(--card-bg); transition: all 0.2s ease; } .checkbox-container label::after { content: '✔'; position: absolute; left: 3px; top: 3px; font-size: 14px; color: #fff; opacity: 0; transition: opacity 0.2s ease; } .checkbox-container input[type="checkbox"]:checked + label::before { background-color: var(--accent-color); border-color: var(--accent-color); } .checkbox-container input[type="checkbox"]:checked + label::after { opacity: 1; } .checkbox-container label a { color: var(--accent-color); text-decoration: none; font-weight: 500; } .checkbox-container label a:hover { text-decoration: underline; } .form-error { color: #ef4444; font-size: 0.9rem; text-align: center; margin-top: -0.4rem; margin-bottom: 0.5rem; font-weight: 500; } /* ================================== */ /* ===== 10. MISC COMPONENTS ===== */ /* ================================== */ .results-explanation { background: rgba(32, 213, 125, 0.1); padding: 1.5rem; margin-top: 1rem; border-left: 5px solid var(--accent-color); border-radius: 10px; box-shadow: var(--card-shadow); } .results-explanation h3 { margin-top: 0; font-weight: 600; color: var(--text-primary); } .results-explanation p { text-align: left; margin-bottom: 0; color: var(--text-secondary); line-height: 1.6; } .chart-container { position: relative; width: 100%; height: 46vh; margin-top: 1.25rem; background: var(--card-bg); border-radius: 12px; padding: 1.5rem; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); } .chart-container h3 { text-align: center; margin-top: 0; margin-bottom: 1rem; color: var(--text-primary); } /* Results Grid */ .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.75rem; margin-top: 1rem; } .result-card { background: var(--card-bg); padding: 1rem; border-radius: 12px; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); transition: transform 0.3s ease, box-shadow 0.3s ease; } .result-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); } .result-card h3 { color: var(--accent-color); font-weight: 600; margin-top: 0; margin-bottom: 0.75rem; text-align: center; } .result-card ul { list-style: none; padding: 0; margin: 0; } .result-card li { margin-bottom: 0.5rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.4; } .result-card li:last-child { margin-bottom: 0; } .result-card li strong { color: var(--text-primary); font-weight: 600; } /* Testimonials */ .testimonial-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.6rem; margin-top: 0.75rem; } .testimonial { background: var(--background-secondary); padding: 0.8rem; border-radius: 10px; border-left: 5px solid var(--accent-color); box-shadow: var(--card-shadow); } .testimonial .quote { text-align: left; font-style: italic; margin-bottom: 0.6rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; } .testimonial .author { text-align: right; font-weight: 600; margin-bottom: 0; color: var(--text-primary); font-size: 1rem; } /* Advisor cards */ .advisor-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.75rem; margin-top: 1rem; } .advisor-card { text-align: center; background: var(--card-bg); padding: 1rem; border-radius: 12px; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); transition: transform 0.3s ease, box-shadow 0.3s ease; } .advisor-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow-hover); } .advisor-card img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 0.5rem; border: 4px solid var(--accent-color); box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .advisor-card h3 { margin-bottom: 0.15rem; font-size: 1.3rem; font-weight: 600; color: var(--text-primary); } .advisor-card h4 { margin: 0; font-size: 0.95rem; color: var(--accent-color-darker); font-weight: 500; margin-bottom: 0.4rem; } .advisor-card p { font-size: 0.95rem; color: var(--text-secondary); text-align: center; line-height: 1.5; } /* Tooltips */ .tooltip-icon { position: relative; margin-left: 5px; cursor: help; color: var(--text-secondary); font-size: 0.9em; font-weight: 600; vertical-align: middle; } .tooltip-text { visibility: hidden; position: absolute; z-index: 10; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 250px; max-width: calc(100vw - 40px); background-color: var(--text-primary); color: #fff; text-align: center; border-radius: 8px; padding: 0.4rem; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; box-shadow: 0 6px 15px rgba(0,0,0,0.4); font-size: 0.9rem; font-weight: 400; line-height: 1.4; box-sizing: border-box; } .tooltip-icon:hover .tooltip-text { visibility: visible; opacity: 1; } /* ================================== */ /* ===== 11. FAQ COMPONENT ===== */ /* ================================== */ /* faq-answer and faq-block styles are dynamically added by JS now */ #faq-root { max-width: 850px; margin-inline: auto; background: var(--background-secondary); padding: clamp(0.75rem, 1.5vw, 1rem); border-radius: 16px; backdrop-filter: blur(7px); box-shadow: var(--card-shadow); border-left: 6px solid var(--accent-color); } #faq-root details { margin-bottom: 0.6rem; background: var(--card-bg); padding: 0.8rem 1rem; border-radius: 10px; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); transition: box-shadow 0.3s ease, background-color 0.3s ease; } #faq-root details[open] { box-shadow: var(--card-shadow-hover); background-color: var(--background-primary); } #faq-root summary { cursor: pointer; list-style: none; font-weight: 600; font-size: 1.1rem; display: flex; justify-content: space-between; align-items: center; color: var(--text-primary); transition: color 0.3s ease; } #faq-root summary:hover { color: var(--accent-color); } #faq-root summary::-webkit-details-marker { display: none; } #faq-root summary svg { width: 18px; height: 18px; transition: transform 0.3s ease; color: var(--text-secondary); } #faq-root details[open] summary svg { transform: rotate(180deg); color: var(--accent-color); } #faq-root .faq-answer { margin-top: 0.35rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; max-height: none; overflow: visible; } /* ================================== */ /* ===== 12. FOOTER ===== */ /* ================================== */ footer { background-color: rgba(44, 62, 80, 0.9); color: #ecf0f1; padding-top: 1rem; margin-top: 1rem; backdrop-filter: blur(10px); transition: background-color 0.4s ease; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; /* Default desktop layout */ gap: 1.25rem; } .footer-col h4 { color: #fff; font-weight: 600; margin-bottom: 0.75rem; } .footer-col p { color: #cbd5e0; font-size: 0.95rem; line-height: 1.5; } .footer-col ul { list-style: none; padding: 0; } .footer-col li { margin-bottom: 0.35rem; } .footer-col li a { color: #cbd5e0; /* Default link color for footer */ text-decoration: none; transition: color 0.3s ease; font-size: 0.95rem; } .footer-col li a:hover { color: var(--accent-color); text-decoration: underline; } /* Contact Info in Footer */ .footer-col .contact-info p { margin: 0.2rem 0; font-size: 0.9rem; color: #cbd5e0; } .footer-col .contact-info a { color: #cbd5e0; text-decoration: none; } .footer-col .contact-info a:hover { color: var(--accent-color); text-decoration: underline; } .copyright { text-align: center; padding: 0.75rem 0; margin-top: 0.75rem; border-top: 1px solid #64748b; color: #cbd5e0; font-size: 0.9rem; } /* Cookie Banner Styles - Replicated from Oranje-Eco */ .cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(44, 62, 80, 0.98); color: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; z-index: 10000; transform: translateY(100%); opacity: 0; transition: transform 0.5s ease-out, opacity 0.5s ease-out; box-shadow: 0 -4px 15px rgba(0,0,0,0.2); } .cookie-banner:not(.hidden) { transform: translateY(0); opacity: 1; } .cookie-banner.hidden { transform: translateY(100%); opacity: 0; } .cookie-banner .cookie-content { flex-grow: 1; margin-right: 15px; } .cookie-banner p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #f0f0f0; } .cookie-banner p a { color: var(--accent-color); text-decoration: underline; font-weight: 500; } .cookie-banner p a:hover { color: var(--accent-color-darker); } .cookie-banner .cookie-buttons { display: flex; gap: 15px; flex-shrink: 0; } .cookie-banner .btn { padding: 10px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 0.3s ease; white-space: nowrap; font-size: 1rem; } .cookie-banner .btn.accept { background-color: var(--accent-color); color: #fff; box-shadow: 0 4px 10px rgba(32, 213, 125, 0.3); } .cookie-banner .btn.accept:hover { background-color: var(--accent-color-darker); box-shadow: 0 6px 15px rgba(32, 213, 125, 0.4); } .cookie-banner .btn.decline { background-color: #7f8c8d; color: #fff; border-color: #7f8c8d; } .cookie-banner .btn.decline:hover { background-color: #616a6b; border-color: #616a6b; } /* ================================== */ /* ===== 13. ANIMATIONS & MEDIA ===== */ /* ================================== */ /* Keyframe Animations */ @keyframes fadeInSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Fade-in sections */ main > section { opacity: 0; transform: translateY(20px); animation: fadeInSlideUp 0.8s ease-out forwards; } /* Focus outlines */ :is(a, button, input[type="range"], input[type="text"], input[type="email"], input[type="tel"]):focus-visible { outline: 3px solid var(--accent-color); outline-offset: 3px; border-radius: 6px; } /* Dynamic margin for main content when menu is open */ body.menu-open main { /* This will be managed dynamically by JS for header scroll effect */ } /* ================================== */ /* ===== 14. RESPONSIVE & MOBILE ===== */ /* ================================== */ /* Mobile first (up to 1536px) */ @media (max-width: 1536px) { .container { width: 100%; padding-inline: 1.25rem; } main { /* Initial top offset for main content, managed by JS. */ /* Its transform: translateY will handle the scroll effect */ } main > section > .container > p, #leadForm, #faq-root { max-width: none; } h1 { font-size: clamp(2rem, 5vw, 2.8rem); } h2 { font-size: clamp(1.8rem, 4.5vw, 2.2rem); } .logo { height: clamp(45px, 8vw, 55px); } .slider-container { gap: 1rem; } .results-grid { gap: 0.75rem; } .footer-grid { grid-template-columns: 1fr; /* Stack all columns on very small mobile */ text-align: center; } /* Footer: Snelle Links and Juridisch side-by-side on smaller screens */ @media (min-width: 480px) and (max-width: 1024px) { /* Tablet-like devices */ .footer-grid { grid-template-columns: 1fr 1fr; /* Two columns */ gap: 1.25rem; } .footer-grid .footer-col:first-child { /* Over Ons */ grid-column: 1 / -1; /* Spans all columns */ } .footer-grid .footer-col:nth-child(2), /* Snelle Links */ .footer-grid .footer-col:nth-child(3) { /* Juridisch */ grid-column: span 1; /* Each takes one column */ text-align: center; /* Center text within their columns */ } .footer-grid .footer-col:nth-child(2) ul, .footer-grid .footer-col:nth-child(3) ul { padding-left: 0; } } .menu-toggle { display: flex; flex-direction: column; justify-content: space-around; width: 32px; height: 28px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1003; } .logo-container { z-index: 1003; } .menu-toggle .bar { height: 4px; width: 100%; background: var(--text-primary); border-radius: 2px; transition: all 0.35s cubic-bezier(0.68,-0.55,0.27,1.55); } .menu-toggle.active .bar:nth-child(1) { transform: translateY(11px) rotate(45deg); } .menu-toggle.active .bar:nth-child(2) { opacity: 0; } .menu-toggle.active .bar:nth-child(3) { transform: translateY(-11px) rotate(-45deg); } nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; padding: 100px 1rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transform: translateY(-50px); transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease; z-index: 1002; } nav.show { opacity: 1; visibility: visible; transform: translateY(0); } nav a { font-size: 1.6rem; font-weight: 700; padding: 0.75rem 1rem; transition: color 0.3s ease, transform 0.3s ease; } nav a:hover, nav a:focus-visible { color: var(--accent-color); transform: scale(1.05); } body.menu-open { overflow: hidden; } .faq-block { width: 100%; padding: 1.5rem; } .faq-question, .faq-answer { width: 100%; text-align: left; } /* Cookie Banner for mobile */ .cookie-banner { flex-direction: column; text-align: center; padding: 15px; gap: 10px; } .cookie-banner .cookie-content { margin-right: 0; margin-bottom: 0; } .cookie-banner .cookie-buttons { flex-direction: column; width: 100%; gap: 10px; } .cookie-banner .btn { width: 100%; } } /* Desktop (1537px and up) */ @media (min-width: 1537px) { .menu-toggle { display: none; } nav { display: flex; flex-direction: row; align-items: center; gap: 1.5rem; position: static; width: auto; height: auto; padding: 0; background: none; backdrop-filter: none; opacity: 1; visibility: visible; transform: none; transition: none; z-index: auto; } nav a { font-size: 1rem; font-weight: 500; padding: 0.25rem 0.5rem; } nav a:hover, nav a:focus-visible { color: var(--accent-color); transform: none; } }