/* ============================================================================= * Zonder Zorgen — shared brand layer (site.css) * * Single source of truth for the visual identity shared by every page: * reset, design tokens, base typography, buttons, navigation and footer. * Loaded by BOTH index.html and bestellen.html, before any page CSS. * * Ownership / workflow (two people iterate on this site in parallel): * - Homepage layout & content → public/index.html (its page CSS stays inline * there) + THIS FILE when the brand/nav/footer itself changes. * - Order flow → public/bestellen.html + css/order-flow.css + js/order-flow.js. * * This file is the contract between the two: after changing it, check both * pages. The nav + footer MARKUP is still duplicated in both HTML files * (static site, no build step/includes) — if you change that markup in one * page, mirror it in the other. The styling lives only here. * ===========================================================================*/ /* ── RESET ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } img { display: block; max-width: 100%; } /* Let the hidden attribute win from utility display classes (flex/grid/…). */ [hidden] { display: none !important; } /* ── TOKENS ────────────────────────────────────────────────────── */ :root { --orange : #ff8a15; --green : #22a559; --blue : #007bff; --light : #f9f9f9; --warm : #fdf7f0; --cool : #f0f6ff; --dark : #333333; --nav-h : 76px; } body { font-family: 'Poppins', sans-serif; font-weight: 400; color: var(--dark); background: #fff; /* `clip` (not `hidden`): prevents sideways scroll without turning into a scroll container, which would silently break position: sticky descendants (the order-flow summary relies on it). */ overflow-x: clip; } /* ── BUTTONS ───────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 0 24px 0 24px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; border: none; transition: all .22s; padding: 15px 32px; white-space: nowrap; letter-spacing: .15px; } .btn-orange { background: var(--orange); color: #fff; } .btn-orange:hover { background: #e67800; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,138,21,.35); } .btn-outline { background: transparent; color: var(--blue); border: 2px solid var(--blue); padding: 13px 30px; } .btn-outline:hover { background: var(--blue); color: #fff; } /* ══════════════════════════════════════════════════════════════════ NAVIGATION ══════════════════════════════════════════════════════════════════ */ .nav { height: var(--nav-h); background: #fff; padding: 0 48px; display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 200; box-shadow: 0 2px 16px rgba(0,0,0,.08); border-radius: 0 24px 0 24px; width: calc(100% - 64px); max-width: 1400px; } .nav-logo { display: flex; align-items: center; text-decoration: none; } .nav-logo svg { height: 46px; width: auto; display: block; } .nav-links { display: flex; list-style: none; gap: 36px; align-items: center; } .nav-links a { text-decoration: none; color: var(--dark); font-size: 14px; font-weight: 400; transition: color .2s; } .nav-links a.active, .nav-links a:hover { color: var(--orange); } /* Hamburger button — hidden on desktop, shown only in the mobile media query */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 0; background: none; border: none; cursor: pointer; flex-shrink: 0; } .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--dark); border-radius: 2px; transition: transform .25s, opacity .25s; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ══════════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════════ */ .footer { background: var(--dark); position: relative; overflow: hidden; padding: 76px 80px 0; border-radius: 48px 0 0 0; } .fd1 { position: absolute; top: -100px; right: 96px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #ff6a00 0%, #c04000 54%, transparent 80%); opacity: .70; pointer-events: none; } .fd2 { position: absolute; top: -10px; right: 190px; width: 224px; height: 224px; border-radius: 50%; background: var(--dark); border: 1.5px solid rgba(255,255,255,.10); pointer-events: none; } .fd3 { position: absolute; bottom: 0; right: -90px; width: 306px; height: 306px; border-radius: 50%; background: radial-gradient(circle, #ffaa00 0%, var(--orange) 38%, #a03000 68%, transparent 82%); opacity: .72; pointer-events: none; } .footer-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; } .footer-intro { font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.9; margin-bottom: 30px; } .f-link { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,.72); text-decoration: none; margin-bottom: 14px; transition: color .2s; } .f-link:hover { color: var(--orange); } .f-icon { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .f-icon.wa { background: #25D366; } .f-icon.ph { background: var(--blue); } .f-icon.mail { background: var(--orange); } .fc-title { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 20px; } .fc-title.orange { color: var(--orange); } .fc-links { list-style: none; } .fc-links li { margin-bottom: 12px; } .fc-links a { font-size: 14px; color: rgba(255,255,255,.68); text-decoration: none; transition: color .2s; } .fc-links a:hover { color: var(--orange); } .fc-links a.cl-orange { color: var(--orange); } .fc-links a.cl-blue { color: var(--blue); } .footer-cta { margin-top: 30px; } .f-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 24px; border: 1.5px solid var(--blue); border-radius: 0 24px 0 24px; color: var(--blue); font-size: 13px; font-weight: 600; text-decoration: none; transition: all .2s; } .f-cta-btn:hover { background: var(--blue); color: #fff; } .footer-wordmark { margin-top: 30px; font-weight: 700; font-size: 28px; line-height: 1.02; color: rgba(255,255,255,.82); display: flex; flex-direction: column; position: relative; z-index: 3; } .footer-bar { position: relative; z-index: 2; margin-top: 64px; padding: 16px 80px; background: linear-gradient(90deg, #091420 0%, #111922 55%, #1c1000 100%); font-size: 12px; color: rgba(255,255,255,.40); display: flex; align-items: center; gap: 4px; } .footer-bar a { color: rgba(255,255,255,.40); text-decoration: none; } .footer-bar a:hover { color: rgba(255,255,255,.80); } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE (shared: nav, footer, buttons) ══════════════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { :root { --nav-h: 64px; } .btn { white-space: normal; text-align: center; } .nav { width: calc(100% - 32px); padding: 0 20px; } .nav:has(.nav-links.open) { border-radius: 0 24px 0 0; } .nav-toggle { display: flex; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; padding: 8px 28px 16px; box-shadow: 0 12px 24px rgba(0,0,0,.10); border-radius: 0 0 0 24px; } .nav-links.open { display: flex; } .nav-links li { width: 100%; } .nav-links a { display: block; width: 100%; padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,.07); } .nav-links li:last-child a { border-bottom: none; } .footer { padding: 56px 28px 0; border-radius: 32px 0 0 0; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } .footer-bar { padding: 14px 28px; } .footer-cta { display: none; } }