/* ===================================================================== * dbp-shared.css — gedeelde tokens, nav, footer en header-guard voor de * dikkebirdpics subpagina's (Alfabetisch + Categorieën). Visueel identiek * aan de Bird Trips redesign-pagina (bird-trips.css). * * Vrij aanpasbaar via de CSS-variabelen in :root hieronder. * ===================================================================== */ :root { --dbp-bg: #0a0a0a; --dbp-fg: #f0ebe0; --dbp-fg-2: rgba(240,235,224,0.48); --dbp-fg-3: rgba(240,235,224,0.28); --dbp-fg-4: rgba(240,235,224,0.20); --dbp-border: rgba(255,255,255,0.06); --dbp-card-bg: #181818; --dbp-sect-bg: #0e0e0e; --dbp-pad-x: 56px; --dbp-serif: "Cormorant Garamond", Georgia, serif; --dbp-sans: "DM Sans", system-ui, sans-serif; --dbp-accent: #7AAFC8; } /* --------------------------------------------------------------------- * Header-guard: verberg de Kadence-themaheader (deze pagina's leveren een * eigen + nav, net als de cinematic homepage / bird-trips). * ------------------------------------------------------------------- */ body.dbp-cinematic-page #masthead, body.dbp-cinematic-page .site-header, body.dbp-cinematic-page header#site-header, body.dbp-cinematic-page .kadence-header { display:none !important; } html.dbp-cinematic-page, body.dbp-cinematic-page { margin-top:0 !important; padding-top:0 !important; } body.dbp-cinematic-page.admin-bar { margin-top:0 !important; } * , *::before, *::after { box-sizing:border-box; } body.dbp-cinematic-page { margin:0; background:var(--dbp-bg); color:var(--dbp-fg); font-family:var(--dbp-sans); -webkit-font-smoothing:antialiased; } body.dbp-cinematic-page img { display:block; } /* --------------------------------------------------------------------- * NAV — fixed, blur, identiek aan bird-trips * ------------------------------------------------------------------- */ .dbp-sub-nav { position:fixed; top:0; left:0; right:0; z-index:200; height:64px; display:flex; align-items:center; padding:0 var(--dbp-pad-x); background:rgba(10,10,10,0.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid var(--dbp-border); } .dbp-sub-nav .nav-logo { height:26px; width:auto; object-fit:contain; opacity:.85; margin-right:52px; flex-shrink:0; } .dbp-sub-nav .nav-links { display:flex; align-items:center; gap:32px; flex:1; list-style:none; margin:0; padding:0; } .dbp-sub-nav .nav-links a { font-size:14px; font-weight:400; color:var(--dbp-fg); opacity:.38; text-decoration:none; cursor:pointer; padding-bottom:3px; border-bottom:1px solid transparent; transition:opacity .2s, color .2s; } .dbp-sub-nav .nav-links a:hover { opacity:.8; } .dbp-sub-nav .nav-links a.is-current { opacity:1; font-weight:500; border-bottom-color:rgba(240,235,224,0.5); } .dbp-sub-nav .nav-extras { display:flex; align-items:center; gap:20px; flex-shrink:0; } .dbp-sub-nav .nav-extras a { font-size:13px; color:var(--dbp-fg); opacity:.4; cursor:pointer; font-weight:300; text-decoration:none; } .dbp-sub-nav .nav-extras a:hover { opacity:.75; } /* hamburger (alleen mobiel) */ .dbp-sub-nav .nav-toggle { display:none; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; } .dbp-sub-nav .nav-toggle span { display:block; width:22px; height:2px; background:var(--dbp-fg); margin:4px 0; transition:.25s; } /* --------------------------------------------------------------------- * FOOTER * ------------------------------------------------------------------- */ .dbp-sub-footer { border-top:1px solid var(--dbp-border); padding:44px var(--dbp-pad-x); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px; } .dbp-sub-footer-logo { height:22px; width:auto; object-fit:contain; opacity:.5; } .dbp-sub-footer-links { display:flex; align-items:center; gap:24px; flex-wrap:wrap; list-style:none; margin:0; padding:0; } .dbp-sub-footer-links a { font-size:13px; color:rgba(240,235,224,0.38); cursor:pointer; font-weight:300; text-decoration:none; } .dbp-sub-footer-links a:hover { color:var(--dbp-fg-2); } .dbp-sub-footer-copy { font-size:12px; color:rgba(240,235,224,0.18); font-weight:300; } /* --------------------------------------------------------------------- * Gedeelde hero-bouwstenen (label / titel / intro / ghost-getal) * ------------------------------------------------------------------- */ .dbp-sub-hero { padding:88px var(--dbp-pad-x) 64px; max-width:1400px; } .dbp-sub-hero-label { font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--dbp-fg-3); font-weight:500; margin:0 0 22px; } .dbp-sub-hero-title { font-family:var(--dbp-serif); font-size:clamp(60px,8.5vw,104px); font-weight:700; line-height:0.9; letter-spacing:-0.02em; color:var(--dbp-fg); margin:0 0 40px; } .dbp-sub-hero-title em { font-weight:400; font-style:italic; opacity:.8; } .dbp-sub-hero-row { display:flex; align-items:flex-end; gap:64px; } .dbp-sub-hero-intro { font-size:17px; line-height:1.7; color:var(--dbp-fg-2); max-width:520px; font-weight:300; margin:0; } .dbp-sub-hero-num-wrap { flex-shrink:0; text-align:right; } .dbp-sub-hero-num { font-family:var(--dbp-serif); font-size:72px; font-weight:700; line-height:1; color:rgba(240,235,224,0.1); letter-spacing:-0.03em; margin:0; } .dbp-sub-hero-num-label { font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--dbp-fg-4); margin-top:4px; } .dbp-sub-main { padding-top:64px; animation:dbpFadeIn 0.35s ease both; } @keyframes dbpFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } /* --------------------------------------------------------------------- * RESPONSIVE — gedeelde nav/footer/hero * ------------------------------------------------------------------- */ @media (max-width:900px) { :root { --dbp-pad-x:24px; } .dbp-sub-nav .nav-toggle { display:block; } .dbp-sub-nav .nav-links, .dbp-sub-nav .nav-extras { position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:rgba(10,10,10,0.98); backdrop-filter:blur(24px); border-bottom:1px solid var(--dbp-border); padding:0; max-height:0; overflow:hidden; transition:max-height .3s ease; } .dbp-sub-nav.nav-open .nav-links { max-height:60vh; } .dbp-sub-nav.nav-open .nav-extras { max-height:30vh; } .dbp-sub-nav .nav-links a, .dbp-sub-nav .nav-extras a { width:100%; padding:14px var(--dbp-pad-x); opacity:.7; border-bottom:1px solid var(--dbp-border); } .dbp-sub-nav .nav-links { order:3; } .dbp-sub-nav .nav-extras { order:4; top:auto; } .dbp-sub-hero-row { flex-direction:column; align-items:flex-start; gap:28px; } .dbp-sub-hero-num-wrap { text-align:left; } .dbp-sub-footer { flex-direction:column; align-items:flex-start; } } /* Kadence wrapper-overrides: laat de zwarte body doorschijnen */ body.dbp-cinematic-page { background:var(--dbp-bg) !important; } body.dbp-cinematic-page #wrapper, body.dbp-cinematic-page .site, body.dbp-cinematic-page .site-container, body.dbp-cinematic-page .content-area, body.dbp-cinematic-page .content-bg, body.dbp-cinematic-page #primary, body.dbp-cinematic-page .entry-content, body.dbp-cinematic-page .entry-content-wrap, body.dbp-cinematic-page main#main, body.dbp-cinematic-page article { background:transparent !important; box-shadow:none !important; }