/* ============================================================ header.css — Stefan Desaeyere Fotografie Het zwevende kapsel. Vervangt de oude balk .site-header en het volledig-scherm menu .nav-overlay. Alle klassen beginnen met sd- zodat ze nooit botsen met de stijlen die al in de pagina's staan. De oude regels blijven dus gerust staan, ze vinden simpelweg niets meer. Inladen in , na de lettertypes: En vlak voor : ============================================================ */ .sd-kop, .sd-kop *, .sd-kop *::before, .sd-kop *::after { box-sizing: border-box; } .sd-kop { --sd-ink: #221f1b; --sd-papier: #efe9de; --sd-goud: #C4A87A; --sd-olijf: #5a7055; --sd-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif; --sd-titel: "Italiana", "Cormorant Garamond", serif; --sd-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: 18px clamp(12px, 3vw, 26px); padding-top: max(18px, env(safe-area-inset-top, 18px)); pointer-events: none; /* alleen het kapsel zelf vangt kliks */ transition: padding .4s cubic-bezier(.4,0,.2,1); } /* ---------- het kapsel ---------- */ /* De breedte volgt de inhoud in plaats van vast te staan. Het Frans is het langst (Prestations, Déroulement, Réserver une séance) en het Nederlands het kortst; zo krijgt elke taal precies de ruimte die ze nodig heeft en breekt er nergens een woord af. */ .sd-kapsel { pointer-events: auto; width: auto; max-width: min(1280px, 100%); display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(12px, 2vw, 28px); padding: 10px 12px 10px 22px; border-radius: 999px; background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 16px 40px -18px rgba(34, 31, 27, .5); color: var(--sd-ink); font-family: var(--sd-sans); transition: background .4s ease, color .4s ease, border-color .4s ease, padding .4s ease, box-shadow .4s ease; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .sd-kapsel { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); } } /* Op pagina's met een fotohero is het kapsel doorschijnend, zodat het beeld tot de bovenrand doorloopt. Die kleur blijft tijdens het scrollen staan — hij springt dus nooit naar wit. Alleen de hoogte verandert. */ body[data-kop="foto"] .sd-kapsel { background: rgba(31, 29, 26, .38); border-color: rgba(255, 255, 255, .26); color: #fff; box-shadow: 0 16px 44px -22px rgba(0, 0, 0, .8); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { body[data-kop="foto"] .sd-kapsel { background: rgba(31, 29, 26, .3); } } /* Iets meer dekking zodra je van de foto af scrolt, anders wordt witte tekst op een lichte pagina moeilijk leesbaar. Dezelfde kleur, alleen wat steviger. */ body[data-kop="foto"] .sd-kop.sd-klein .sd-kapsel { background: rgba(31, 29, 26, .52); box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .7); } /* Kleiner zodra je scrolt. Alleen de hoogte en het logo krimpen — de breedte niet, anders zou de langste taal alsnog gaan afbreken. */ .sd-kop.sd-klein { padding-top: max(11px, env(safe-area-inset-top, 11px)); padding-bottom: 11px; } .sd-kop.sd-klein .sd-kapsel { padding: 7px 9px 7px 18px; } .sd-kop.sd-klein .sd-merk-badge { width: 30px; height: 30px; flex-basis: 30px; font-size: 12px; } .sd-kop.sd-klein .sd-merk-naam { font-size: 18px; } /* ---------- merknaam ---------- */ .sd-merk { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; white-space: nowrap; flex: 0 0 auto; min-width: 0; } .sd-merk-badge { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: var(--sd-titel); font-size: 13px; letter-spacing: .06em; border: 1px solid currentColor; opacity: .9; transition: width .4s ease, height .4s ease, flex-basis .4s ease, font-size .4s ease; } .sd-merk-badge img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Het zegel is zwart getekend. Op het donkere kapsel keren we het om, anders valt het weg tegen de achtergrond. */ body[data-kop="foto"] .sd-merk-badge img { filter: brightness(0) invert(1); } .sd-merk-naam { font-family: var(--sd-serif); font-style: italic; font-weight: 400; font-size: 21px; line-height: 1; transition: font-size .4s ease; } /* ---------- navigatie in het kapsel ---------- */ .sd-nav { display: flex; align-items: center; flex: 0 1 auto; flex-wrap: nowrap; gap: clamp(13px, 1.7vw, 26px); margin-left: auto; font-size: 10.5px; letter-spacing: .19em; text-transform: uppercase; font-weight: 400; white-space: nowrap; } .sd-nav a { position: relative; padding: 5px 0; color: inherit; text-decoration: none; opacity: .84; transition: opacity .25s ease; white-space: nowrap; flex: 0 0 auto; } .sd-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--sd-goud); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.65,.05,.35,1); } .sd-nav a:hover, .sd-nav a:focus-visible { opacity: 1; } .sd-nav a:hover::after, .sd-nav a:focus-visible::after { transform: scaleX(1); } .sd-nav a[aria-current="page"] { opacity: 1; } .sd-nav a[aria-current="page"]::after { transform: scaleX(1); } /* ---------- rechterkant ---------- */ .sd-rechts { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; white-space: nowrap; } .sd-taal { display: flex; gap: 8px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .62; white-space: nowrap; } .sd-taal a { color: inherit; text-decoration: none; transition: opacity .2s ease, color .2s ease; } .sd-taal a:hover { opacity: 1; color: var(--sd-goud); } .sd-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; padding: 11px 19px; border-radius: 999px; text-decoration: none; background: var(--sd-ink); color: var(--sd-papier); border: 1px solid var(--sd-ink); transition: background .3s ease, border-color .3s ease, color .3s ease, transform .2s ease; white-space: nowrap; } .sd-cta:hover { background: var(--sd-olijf); border-color: var(--sd-olijf); color: #fff; transform: translateY(-1px); } body[data-kop="foto"] .sd-cta { background: #fff; color: var(--sd-ink); border-color: #fff; } body[data-kop="foto"] .sd-cta:hover { background: var(--sd-goud); border-color: var(--sd-goud); } /* ---------- knop voor het volledige menu ---------- */ .sd-meer { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 50%; padding: 0; transition: background .25s ease; } .sd-meer:hover { background: rgba(34, 31, 27, .07); } body[data-kop="foto"] .sd-meer:hover { background: rgba(255, 255, 255, .16); } .sd-meer .sd-streep { position: relative; display: block; width: 19px; height: 1px; background: currentColor; transition: transform .35s cubic-bezier(.65,.05,.35,1), background .2s; } .sd-meer .sd-streep::before, .sd-meer .sd-streep::after { content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform .35s cubic-bezier(.65,.05,.35,1), top .3s ease; } .sd-meer .sd-streep::before { top: -6px; } .sd-meer .sd-streep::after { top: 6px; } .sd-kop.sd-open .sd-meer .sd-streep { background: transparent; } .sd-kop.sd-open .sd-meer .sd-streep::before { top: 0; transform: rotate(45deg); } .sd-kop.sd-open .sd-meer .sd-streep::after { top: 0; transform: rotate(-45deg); } /* ---------- uitklappaneel met alle pagina's ---------- */ .sd-paneel { pointer-events: auto; position: absolute; top: calc(100% - 6px); left: clamp(12px, 3vw, 26px); right: clamp(12px, 3vw, 26px); margin: 0 auto; max-width: 760px; background: rgba(255, 253, 249, .97); border: 1px solid rgba(34, 31, 27, .1); border-radius: 26px; box-shadow: 0 26px 60px -26px rgba(34, 31, 27, .55); padding: 22px 26px 24px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1), visibility .3s; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .sd-paneel { background: rgba(255, 253, 249, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } } .sd-kop.sd-open .sd-paneel { opacity: 1; visibility: visible; transform: translateY(0); } .sd-paneel-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 30px; } .sd-paneel-lijst a { display: flex; align-items: baseline; gap: 12px; padding: 11px 6px; color: var(--sd-ink); text-decoration: none; font-family: var(--sd-serif); font-size: 21px; line-height: 1.2; border-bottom: 1px solid rgba(34, 31, 27, .08); transition: color .25s ease, padding-left .3s cubic-bezier(.4,0,.2,1); } .sd-paneel-lijst a:hover { color: var(--sd-olijf); padding-left: 12px; } .sd-paneel-lijst a span { font-family: var(--sd-sans); font-size: 8.5px; letter-spacing: .18em; color: var(--sd-goud); flex: 0 0 auto; } .sd-paneel-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(34, 31, 27, .1); font-size: 10.5px; letter-spacing: .1em; color: #5a544c; } .sd-paneel-voet a { color: inherit; text-decoration: none; } .sd-paneel-voet a:hover { color: var(--sd-goud); } .sd-paneel-iconen { display: flex; gap: 14px; align-items: center; } .sd-paneel-iconen a { display: inline-flex; width: 18px; height: 18px; opacity: .7; transition: opacity .2s, color .2s; } .sd-paneel-iconen a:hover { opacity: 1; color: var(--sd-goud); } .sd-paneel-iconen svg { width: 100%; height: 100%; } /* ---------- smaller scherm ---------- De grenzen zijn afgestemd op het Frans, de langste van de drie talen. Zo verspringt de balk in elke taal op hetzelfde punt en blijft alles op één regel staan. */ @media (max-width: 1120px) { .sd-nav a.sd-extra { display: none; } /* Blog valt als eerste weg */ } @media (max-width: 980px) { .sd-nav { gap: 15px; letter-spacing: .14em; } .sd-kapsel { gap: 16px; } } @media (max-width: 900px) { .sd-nav { display: none; } /* alles verhuist naar het paneel */ .sd-rechts { margin-left: auto; } } @media (max-width: 620px) { .sd-kop { padding: 12px 12px; padding-top: max(12px, env(safe-area-inset-top, 12px)); } .sd-kapsel { padding: 8px 8px 8px 16px; gap: 10px; } .sd-merk-naam { font-size: 17px; } .sd-merk-badge { width: 30px; height: 30px; flex-basis: 30px; font-size: 12px; } .sd-taal { display: none; } .sd-cta { padding: 9px 14px; font-size: 9px; letter-spacing: .14em; } .sd-paneel { padding: 18px 18px 20px; border-radius: 22px; } .sd-paneel-lijst { grid-template-columns: 1fr; } .sd-paneel-lijst a { font-size: 19px; padding: 10px 4px; } } @media (max-width: 380px) { .sd-cta span.sd-cta-lang { display: none; } } /* ---------- toegankelijkheid ---------- */ .sd-kop a:focus-visible, .sd-kop button:focus-visible { outline: 2px solid var(--sd-goud); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .sd-kop, .sd-kapsel, .sd-paneel, .sd-nav a::after, .sd-meer .sd-streep, .sd-meer .sd-streep::before, .sd-meer .sd-streep::after { transition: none !important; } } /* Het oude menu mag nooit meer verschijnen, ook niet als er ergens nog een script body.menu-open zet. */ body.menu-open .nav-overlay, body .nav-overlay { display: none !important; } body.menu-open { overflow: auto !important; }