/* ========================================= Global polish (werkt naast Tailwind) ========================================= */ :root{ /* Navbar hoogte (voor fixed nav offset) */ --nav-h: 76px; --nav-h-mobile: 68px; /* Subtiele radius / shadow consistentie */ --radius-xl: 16px; --radius-2xl: 24px; /* Glass */ --glass-bg: rgba(0,0,0,.55); --glass-blur: 10px; } @media (max-width: 640px){ :root{ --nav-h: var(--nav-h-mobile); } } /* Smoother scrolling, maar respecteer reduced motion */ html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Fixed navbar offset: alle pagina’s krijgen netjes ruimte */ #main{ padding-top: var(--nav-h); } /* Op de home/hero wil je vaak “bovenaan” starten. Je kunt op home blijven gebruiken. Dan halen we de offset weg, maar geven we de hero zelf padding. */ body.has-hero #main{ padding-top: 0; } /* ========================================= Navbar states (werkt met jouw navbar.js) ========================================= */ #navbar{ transition: background .35s ease, backdrop-filter .35s ease, transform .35s ease, opacity .25s ease, padding .35s ease; will-change: transform, background, opacity; } /* Hidden/visible classes (in navbar.js) */ .navbar-hidden{ transform: translateY(-110%); } .navbar-visible{ transform: translateY(0); } /* Transparant (start state) */ .navbar-transparent{ background: transparent !important; backdrop-filter: none !important; } /* Solid (scrolled state) */ .navbar-solid{ background: rgba(0,0,0,.80) !important; backdrop-filter: blur(8px) !important; } /* Als navbar.js .scrolled toevoegt */ #navbar.scrolled{ background: rgba(0,0,0,.82) !important; backdrop-filter: blur(10px) !important; } /* Home: subtiele gradient bovenaan + fade-in behavior (jij gebruikte eerder opacity 0; dat kan ‘zoek’ gedrag geven. Hier: default zichtbaar, maar gradient. */ body.has-hero #navbar:not(.scrolled){ background: linear-gradient(rgba(0,0,0,.70), rgba(0,0,0,0)) !important; backdrop-filter: none !important; } /* Niet-home: altijd solid */ body:not(.has-hero) #navbar{ background: rgba(0,0,0,.92) !important; backdrop-filter: blur(10px) !important; } /* ========================================= Hero background (home) ========================================= */ .hero-bg{ /* Contrast overlay + background image */ background: linear-gradient(rgba(0,0,0,.50), rgba(0,0,0,.40)), url("/static/images/hero-bg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; /* i.p.v. negatieve margin-top: geef hero zelf ruimte voor navbar */ padding-top: calc(var(--nav-h) + 24px); } /* Parallax voelt premium, maar fixed is slecht op iOS: daarom alleen op grotere schermen */ @media (min-width: 1024px){ .hero-bg{ background-attachment: fixed; } } /* ========================================= Forms (contact, filters etc.) Kleine premium touch zonder Tailwind te breken ========================================= */ input[type="text"], input[type="email"], input[type="number"], input[type="tel"], select, textarea{ outline: none; } input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="tel"]:focus, select:focus, textarea:focus{ border-color: rgba(220,38,38,.55); /* primary-red */ box-shadow: 0 0 0 4px rgba(220,38,38,.18); } /* Checkbox/radio netter */ input[type="checkbox"], input[type="radio"]{ accent-color: #dc2626; } /* ========================================= noUiSlider (voorraad filters) ========================================= */ .noui-wrap{ margin-top: 10px; } /* Track */ .noUi-target{ border: 0; box-shadow: none; background: #e5e7eb; /* gray-200 */ border-radius: 9999px; height: 12px; } /* Selected range */ .noUi-connect{ background: #111827; /* near-black */ border-radius: 9999px; } /* Handle */ .noUi-horizontal .noUi-handle{ width: 34px; height: 34px; border-radius: 9999px; border: 3px solid #fff; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.18); right: -17px; top: -11px; cursor: grab; } .noUi-horizontal .noUi-handle:active{ cursor: grabbing; } .noUi-handle:before, .noUi-handle:after{ display: none; } /* Center dot */ .noUi-horizontal .noUi-handle::after{ content:""; position:absolute; width: 10px; height: 10px; border-radius:9999px; background:#111827; left:50%; top:50%; transform:translate(-50%,-50%); display:block; } /* Focus state (keyboard) */ .noUi-handle:focus{ outline: none; box-shadow: 0 0 0 4px rgba(220,38,38,.18), 0 10px 24px rgba(0,0,0,.18); } /* Labels onder slider */ .range-label{ margin-top: 10px; font-weight: 600; color: #4b5563; /* gray-600 */ } /* ========================================= Kleine utilities (optioneel, maar handig) ========================================= */ /* Subtiele “premium” image rendering */ img{ -webkit-user-drag: none; } /* Voorkom rare overflow bij animaties */ body{ overflow-x: hidden; }