/* ========================================================================= Kleine Camping Brabant — thema (Bootstrap 5.3.8) Dag / Middag / Nacht via CSS-variabelen op ========================================================================= */ /* ===== MIDDAG = standaard ===== */ :root{ --sky1:#a9dbef; --sky2:#ffe3b0; --sky3:#ffd194; --heroGlow:rgba(255,206,128,.9); --orb:radial-gradient(circle at 50% 50%,#fff7e6,#ffd98a 65%,#ffc46b); --orbShadow:0 0 90px 24px rgba(255,206,128,.55); --orbTop:24%; --orbRight:16%; --orbSize:120px; --heroInk:#1d2b3a; --heroSub:#3a4250; --heroStars:.12; --surface:#fbf4e6; --surface2:#fffdf7; --surfaceInk:#2a2418; --surfaceHead:#1c2b1f; --surfaceSoft:#6a5f4d; --line:#efe6d2; --deep:#111d33; --deep2:#0a1322; --deepInk:#cdd6e4; --deepHead:#f7efe0; --deepLine:rgba(251,233,200,.14); --deepStars:.4; --tree:#16321f; --treeDark:#0f2417; --accent:#ff8a3d; --accent2:#ffb454; --ember:#ff6b35; --bs-primary:#2f7fb0; --bs-primary-rgb:47,127,176; --bs-body-color:var(--surfaceInk); --bs-body-bg:var(--surface); --bs-body-font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --bs-body-font-size:1.05rem; --bs-body-line-height:1.75; --bs-border-color:var(--line); --bs-link-color:var(--accent); --bs-link-hover-color:var(--ember); --r:18px; --shadow:0 22px 50px -28px rgba(20,20,35,.5); --shadow-sm:0 12px 30px -20px rgba(20,20,35,.5); } /* ===== DAG ===== */ [data-time="dag"]{ --sky1:#74c0e8; --sky2:#b6e0f1; --sky3:#e2f4f8; --heroGlow:rgba(255,243,205,.7); --orb:radial-gradient(circle,#fffef6,#fff0bf 72%); --orbShadow:0 0 80px 22px rgba(255,244,200,.85); --orbTop:11%; --orbRight:20%; --orbSize:100px; --heroInk:#143447; --heroSub:#2f4a59; --heroStars:0; --surface:#f1fbff; --surface2:#ffffff; --surfaceInk:#22303a; --surfaceHead:#1b5b48; --surfaceSoft:#5b6b75; --line:#dcebef; --deep:#e9f6fb; --deep2:#dceff6; --deepInk:#2b3a44; --deepHead:#16506a; --deepLine:rgba(20,60,80,.15); --deepStars:0; --tree:#3f7a4a; --treeDark:#2f5d3a; --accent:#f2992b; --accent2:#ffc154; } /* ===== NACHT ===== */ [data-time="nacht"]{ --sky1:#0a1120; --sky2:#0e1a30; --sky3:#16294a; --heroGlow:rgba(255,107,53,.4); --orb:radial-gradient(circle at 35% 35%,#fff,#ece5d2 70%,#d7cdb4); --orbShadow:0 0 60px 14px rgba(251,233,200,.3); --orbTop:10%; --orbRight:13%; --orbSize:92px; --heroInk:#ffffff; --heroSub:#e7eef8; --heroStars:.85; --surface:#111d33; --surface2:#15233c; --surfaceInk:#cdd6e4; --surfaceHead:#f7efe0; --surfaceSoft:#9fb0c6; --line:rgba(251,233,200,.14); --deep:#0c1424; --deep2:#070d18; --deepInk:#cdd6e4; --deepHead:#f7efe0; --deepLine:rgba(251,233,200,.14); --deepStars:.9; --tree:#0f2417; --treeDark:#0a1a11; --accent:#ff8a3d; --accent2:#ffb454; } *{scroll-behavior:smooth} body{font-family:var(--bs-body-font-family);color:var(--surfaceInk);background:var(--surface);transition:background .5s,color .5s;} h1,h2,h3,h4,.display-5,.display-6{font-family:"Bitter",Georgia,serif;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--surfaceHead);} .lead{font-size:1.18rem;} .eyebrow{font-family:"Caveat",cursive;font-size:1.5rem;color:var(--accent);line-height:1;} a{text-underline-offset:.15em} a:focus-visible,button:focus-visible,.btn:focus-visible,.form-control:focus-visible{outline:3px solid var(--accent);outline-offset:2px;box-shadow:none;} /* knoppen */ .btn{border-radius:999px;font-weight:600;padding:.7rem 1.5rem;font-family:"Bitter";transition:transform .12s,filter .2s,background .2s;} .btn:active{transform:translateY(1px)} .btn-glow{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#3a1c05;box-shadow:0 8px 26px -6px rgba(255,138,61,.5);border:0;} .btn-glow:hover{filter:brightness(1.07);color:#3a1c05;} .btn-out-d{border:1.5px solid var(--surfaceSoft);color:var(--surfaceInk);background:transparent;} .btn-out-d:hover{border-color:var(--accent);color:var(--surfaceInk);} .btn-lg{padding:.85rem 1.8rem;font-size:1.05rem;} /* header + tijd-switch */ .site-header{position:absolute;top:0;left:0;right:0;z-index:20;} .navbar-brand{font-family:"Bitter";font-weight:800;font-size:1.2rem;color:var(--heroInk)!important;display:flex;gap:.5rem;align-items:center;} .brand-mark{width:34px;height:34px;flex:0 0 auto;} .site-header .nav-link{font-family:"Bitter";font-weight:600;color:var(--heroInk);opacity:.85;font-size:.95rem;padding:.4rem .7rem!important;} .site-header .nav-link:hover,.site-header .current-menu-item>.nav-link{opacity:1;color:var(--accent);} .navbar-toggler{border:0;color:var(--heroInk);} .navbar-toggler:focus{box-shadow:none} /* Subpagina's: header staat boven de donkere page-hero -> gebruik deep-kleur (klopt in dag/middag/nacht) */ body:not(.home) .navbar-brand{color:var(--deepHead)!important;} body:not(.home) .site-header .nav-link{color:var(--deepHead);} body:not(.home) .navbar-toggler{color:var(--deepHead);} @media(max-width:991.98px){.site-header .navbar-collapse{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:.8rem;margin-top:.6rem;box-shadow:var(--shadow-sm);} .site-header .nav-link{color:var(--surfaceInk);}} .timeswitch{position:fixed;right:18px;bottom:18px;z-index:1080;display:flex;gap:4px;padding:6px;border-radius:999px;background:rgba(20,28,46,.6);backdrop-filter:blur(10px);box-shadow:0 10px 30px -8px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);} .timeswitch button{border:0;background:transparent;color:#fff;border-radius:999px;padding:.5rem .8rem;font-family:"Bitter";font-weight:700;font-size:.82rem;display:flex;align-items:center;gap:.35rem;cursor:pointer;opacity:.72;transition:.2s;} .timeswitch button .ic{font-size:1.05rem;line-height:1;display:inline-flex} .timeswitch button .ic svg{width:17px;height:17px;display:block} .timeswitch button.on{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#3a1c05;opacity:1;box-shadow:0 4px 14px -2px rgba(255,138,61,.6);} .timeswitch .lbl{font-family:"Caveat";position:absolute;top:-22px;right:10px;color:var(--accent2);font-size:1.05rem;white-space:nowrap;} @media(max-width:560px){.timeswitch button span:not(.ic){display:none} .timeswitch .lbl{display:none}} /* hero (homepage) */ .hero{position:relative;overflow:hidden;background:radial-gradient(90% 70% at 78% 38%,var(--heroGlow),transparent 55%),linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 56%,var(--sky3) 100%);transition:background .5s;} .hero .orb{position:absolute;top:var(--orbTop);right:var(--orbRight);width:var(--orbSize);height:var(--orbSize);border-radius:50%;background:var(--orb);box-shadow:var(--orbShadow);transition:all .5s;} .hero .stars{opacity:var(--heroStars)} .hero__inner{position:relative;z-index:3;padding:8rem 0 0;} .hero h1{font-size:clamp(2.3rem,5.3vw,4rem);color:var(--heroInk);} .hero h1 em{font-style:normal;color:var(--ember);} .hero p.lead{color:var(--heroSub);max-width:34rem;} .treeline{position:relative;z-index:2;margin-top:-10px;display:block;width:100%;} .spark-row{display:flex;flex-wrap:wrap;gap:.6rem} .spark{background:rgba(255,255,255,.5);border:1px solid rgba(42,36,24,.12);border-radius:999px;padding:.4rem .9rem;font-size:.85rem;color:#2a2418;font-weight:600;} [data-time="nacht"] .spark{background:rgba(255,255,255,.08);border-color:rgba(251,233,200,.2);color:#f7efe0;} .stars{position:absolute;inset:0;background-image: radial-gradient(1.6px 1.6px at 30px 40px,#fff,transparent),radial-gradient(1.4px 1.4px at 160px 120px,#fbe9c8,transparent), radial-gradient(1px 1px at 90px 200px,#fff,transparent),radial-gradient(1.5px 1.5px at 240px 70px,#fff,transparent), radial-gradient(1px 1px at 320px 160px,#fbe9c8,transparent),radial-gradient(1.2px 1.2px at 430px 50px,#fff,transparent), radial-gradient(1px 1px at 500px 220px,#fff,transparent),radial-gradient(1.4px 1.4px at 600px 110px,#fbe9c8,transparent), radial-gradient(1.3px 1.3px at 680px 180px,#fff,transparent);background-size:720px 300px;pointer-events:none;transition:opacity .5s;} /* secties */ .section{padding:clamp(3.2rem,7vw,5rem) 0;} .sec-surface,.section--sand{background:var(--surface);color:var(--surfaceInk);} .sec-surface2,.section--cream{background:var(--surface2);color:var(--surfaceInk);} .sec-deep,.section--green{background:var(--deep);color:var(--deepInk);transition:background .5s,color .5s;} .sec-deep h1,.sec-deep h2,.sec-deep h3,.section--green h1,.section--green h2,.section--green h3{color:var(--deepHead);} .sec-deep .eyebrow{color:var(--accent2);} /* postcards */ .garland{height:40px;width:100%} .postcard{background:var(--surface2);color:var(--surfaceInk);border-radius:10px;padding:1.4rem;box-shadow:var(--shadow);position:relative;border:1px solid var(--line);height:100%;transition:background .5s,color .5s;} .postcard h3{color:var(--surfaceHead);font-size:1.15rem;margin-bottom:.4rem;} .postcard p{color:var(--surfaceSoft);font-size:.95rem;margin:0;} .postcard .pin{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--ember);box-shadow:0 2px 6px rgba(0,0,0,.35);} .postcard.r1{transform:rotate(-2.5deg)} .postcard.r2{transform:rotate(1.5deg)} .postcard.r3{transform:rotate(-1deg)} .stamp{position:absolute;top:10px;right:10px;width:42px;height:42px;border:2px dashed var(--accent);border-radius:6px;display:grid;place-items:center;color:var(--accent);font-family:"Caveat";font-size:1.4rem;transform:rotate(8deg);opacity:.8;} /* kampvuur */ .fire-emoji{width:84px;height:84px;margin:0 auto 1rem;filter:drop-shadow(0 0 30px rgba(255,138,61,.6));} /* constellation */ .sky-map{position:relative;height:340px;border:1px solid var(--deepLine);border-radius:20px;background:rgba(127,127,127,.04);} .node{position:absolute;text-align:center} .node .dot{width:14px;height:14px;border-radius:50%;background:var(--accent2);box-shadow:0 0 16px 4px rgba(255,180,84,.6);margin:0 auto;} .node span{display:block;font-family:"Bitter";color:var(--deepHead);font-size:.85rem;margin-top:.3rem;} /* tickets / blog post-cards */ .ticket,.post-card{background:var(--surface2);border:1px solid var(--line);border-radius:14px;overflow:hidden;height:100%;box-shadow:var(--shadow-sm);transition:background .5s;display:flex;flex-direction:column;} .ticket .top{height:120px;position:relative;} .ticket .top::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:16px;background:radial-gradient(circle at 10px 8px,transparent 8px,var(--surface2) 9px) repeat-x;background-size:20px 16px;} .ticket .bd,.post-card__body{padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.4rem;flex:1;} .ticket h3,.post-card h3{font-size:1.05rem;color:var(--surfaceHead);} .ticket small,.post-card .post-meta{color:var(--accent);font-family:"Caveat";font-size:1.05rem;} .post-card img{aspect-ratio:16/10;object-fit:cover;width:100%;} /* cta */ .cta-band{background:radial-gradient(120% 120% at 50% 0%,rgba(255,180,84,.4),transparent 60%),linear-gradient(160deg,var(--surface2),var(--surface));border:1px solid rgba(255,138,61,.3);border-radius:24px;padding:clamp(2rem,5vw,3.4rem);text-align:center;} .cta-band h2{color:var(--surfaceHead);} /* subpagina-hero + content */ .page-hero{background:linear-gradient(180deg,var(--deep),var(--deep2));color:var(--deepInk);padding:clamp(7rem,11vw,9rem) 0 clamp(2.4rem,5vw,3.2rem);position:relative;overflow:hidden;} .page-hero h1{color:var(--deepHead);} .page-hero .lead{color:var(--deepInk);} .breadcrumb{--bs-breadcrumb-divider-color:var(--accent2);margin:0;} .breadcrumb a{color:var(--accent2);text-decoration:none;} .breadcrumb-item.active{color:var(--deepInk);} .entry-content{font-size:1.08rem;color:var(--surfaceInk);} .entry-content>*+*{margin-top:1.1rem} .entry-content h2{margin-top:2.2rem;font-size:1.7rem;color:var(--surfaceHead);} .entry-content h3{margin-top:1.6rem;font-size:1.3rem;color:var(--surfaceHead);} .entry-content ul,.entry-content ol{padding-left:1.3rem} .entry-content li{margin-bottom:.4rem} .entry-content a{color:var(--accent);font-weight:600;} .entry-content a[target="_blank"]::after{content:"\2197";font-size:.8em;margin-left:.12em;color:var(--accent);} .entry-content blockquote{border-left:4px solid var(--accent);padding:.4rem 0 .4rem 1.2rem;font-style:italic;color:var(--surfaceSoft);} .entry-content img{border-radius:var(--r);height:auto;max-width:100%;} /* lijst met vinkjes */ .list-check{list-style:none;padding-left:0} .list-check li{position:relative;padding-left:1.9rem;margin-bottom:.6rem} .list-check li::before{content:"";position:absolute;left:0;top:.35em;width:1.15rem;height:1.15rem;background:var(--accent);-webkit-mask:var(--chk) center/contain no-repeat;mask:var(--chk) center/contain no-repeat;} :root{--chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.5 6.5 11.5 2.5 7.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} /* paginatie */ .page-numbers{display:inline-block;padding:.5rem .9rem;border:1px solid var(--line);border-radius:10px;margin:.15rem;color:var(--surfaceInk);text-decoration:none;} .page-numbers.current{background:var(--accent);color:#3a1c05;border-color:var(--accent);font-weight:700;} /* footer */ .site-footer{background:var(--deep2);color:var(--deepInk);position:relative;transition:background .5s;padding-bottom:96px;} @media(max-width:560px){.site-footer{padding-bottom:84px;}} .site-footer a{color:var(--deepHead);text-decoration:none} .site-footer a:hover{color:var(--accent2)} .site-footer h4{color:var(--deepHead);font-size:1.02rem;} .site-footer .footer-brand{font-family:"Bitter";font-weight:800;font-size:1.15rem;color:var(--deepHead);} .site-footer .brand-mark{width:32px;height:32px} .footer-bottom{border-top:1px solid var(--deepLine)} /* skip-link + diversen */ .skip-link{position:absolute;left:-999px;top:0;background:var(--surface2);color:var(--accent);padding:.7rem 1.2rem;z-index:2000;border-radius:0 0 10px 0;font-weight:800;} .skip-link:focus{left:0} .cert-strip{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center} .cert-pill{background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-weight:700;color:var(--surfaceHead);}