/* ══════════════════════════════════════════════════ GEDEELDE NAV + FOOTER — Steiger X Geladen op elke pagina via in ══════════════════════════════════════════════════ */ /* ─── NAV ──────────────────────────────────────────────── */ nav { position: fixed; inset: 0 0 auto 0; z-index: 1100; background: rgba(17,17,17,0.96); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(57,229,53,0.15); } .nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .nav-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .nav-logo { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex-shrink: 0; } .nav-name { font-family: var(--font-h, 'Barlow Condensed', sans-serif); font-size: 1.45rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white, #fff); } .nav-name span { color: var(--green, #39e535); } .nav-links { display: flex; align-items: center; gap: 2.5rem; list-style: none; margin: 0; padding: 0; } .nav-links a { font-family: var(--font-h, 'Barlow Condensed', sans-serif); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.65); transition: color 0.2s; text-decoration: none; } .nav-links a:hover, .nav-links a.active { color: var(--green, #39e535); } .nav-right { display: flex; align-items: center; gap: 1.5rem; } .nav-tel { font-family: var(--font-h, 'Barlow Condensed', sans-serif); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; color: rgba(255,255,255,0.55); transition: color 0.2s; text-decoration: none; } .nav-tel:hover { color: var(--white, #fff); } .nav-cta { display: inline-block; background: var(--green, #39e535); color: var(--dark, #111); font-family: var(--font-h, 'Barlow Condensed', sans-serif); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.65rem 1.6rem; border-radius: 3px; transition: background 0.22s, transform 0.18s; text-decoration: none; white-space: nowrap; } .nav-cta:hover { background: var(--green-dk, #28b825); transform: translateY(-1px); } /* ─── FOOTER ───────────────────────────────────────────── */ footer { background: var(--dark, #111); border-top: 1px solid rgba(255,255,255,0.06); padding: 3rem 2.5rem; position: relative; z-index: 950; } .footer-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; } .footer-brand { display: flex; align-items: center; gap: 0.75rem; } .footer-logo { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; } .footer-name { font-family: var(--font-h, 'Barlow Condensed', sans-serif); font-size: 1.2rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white, #fff); } .footer-name span { color: var(--green, #39e535); } .footer-copy { font-size: 0.8rem; color: rgba(255,255,255,0.25); font-family: var(--font-h, 'Barlow Condensed', sans-serif); letter-spacing: 0.05em; text-transform: uppercase; } .footer-links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } .footer-links a { font-family: var(--font-h, 'Barlow Condensed', sans-serif); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.3); transition: color 0.2s; text-decoration: none; } .footer-links a:hover { color: var(--green, #39e535); } /* ─── CART KNOP ────────────────────────────────────────── */ .cart-nav-btn { position: relative; width: 44px; height: 44px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--white, #fff); transition: background .2s, border-color .2s; flex-shrink: 0; cursor: pointer; } .cart-nav-btn:hover { background: rgba(57,229,53,.13); border-color: rgba(57,229,53,.45); } .cart-nav-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .cart-badge { position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; background: var(--green, #39e535); border-radius: 50%; font-size: .6rem; font-weight: 800; color: var(--dark, #111); display: none; align-items: center; justify-content: center; font-family: var(--font-h, 'Barlow Condensed', sans-serif); letter-spacing: 0; pointer-events: none; } /* ─── HAMBURGER KNOP ───────────────────────────────────── */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 6px; cursor: pointer; flex-shrink: 0; transition: background .2s, border-color .2s; } .nav-hamburger:hover { background: rgba(57,229,53,.13); border-color: rgba(57,229,53,.45); } .ham-line { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } .nav-hamburger.open .ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open .ham-line:nth-child(2) { opacity: 0; } .nav-hamburger.open .ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ─── MOBIEL MENU ──────────────────────────────────────── */ .nav-mobile { display: none; position: fixed; top: 72px; left: 0; right: 0; background: rgba(15,15,15,.98); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(57,229,53,.15); z-index: 1099; padding: 2rem 1.5rem 2.5rem; transform: translateY(-10px); opacity: 0; transition: transform .28s ease, opacity .22s ease; pointer-events: none; } .nav-mobile.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-mobile-links { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; } .nav-mobile-links a { display: block; font-family: var(--font-h, 'Barlow Condensed', sans-serif); font-size: 1.8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75); text-decoration: none; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.06); transition: color .18s; } .nav-mobile-links a:hover, .nav-mobile-links a.active { color: var(--green, #39e535); } .nav-mobile-footer { display: flex; flex-direction: column; gap: 1rem; margin-top: .5rem; } .nav-mobile-tel { font-family: var(--font-h, 'Barlow Condensed', sans-serif); font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.45); text-decoration: none; letter-spacing: .05em; } .nav-mobile-cta { display: block; text-align: center; width: 100%; background: var(--green, #39e535); color: var(--dark, #111); font-family: var(--font-h, 'Barlow Condensed', sans-serif); font-weight: 700; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; padding: .85rem 1.6rem; border-radius: 3px; text-decoration: none; transition: background .2s; } .nav-mobile-cta:hover { background: var(--green-dk, #28b825); } /* ─── CART MOBIEL ──────────────────────────────────────── */ @media (max-width: 768px) { #cart-close-mobile { display: block !important; } #cart-drawer .cart-close-btn { width: 44px; height: 44px; font-size: 1.2rem; } } /* ─── RESPONSIVE ───────────────────────────────────────── */ @media (max-width: 768px) { .nav-links, .nav-tel { display: none; } .nav-cta { display: none; } .nav-hamburger { display: flex; } .nav-right { gap: 0.5rem; } .nav-mobile { display: block; } .nav-inner { padding: 0 1.25rem; } footer { padding: 2rem 1.25rem; } .footer-inner { flex-direction: column; text-align: center; } .footer-links { justify-content: center; flex-wrap: wrap; gap: 1.25rem; } }