/* ============================================================ styles.css — gesplitst uit index.html Volgorde bewaard: hoofdblok (was in ) + uitzetlijst-blok (was in
). ============================================================ */ /* ===== HOOFDBLOK ===== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --cream:#faf4ec;--linen:#f2e8d8;--beige:#ede3d0;--sand:#d8ccc0;--sand2:#d0c4b4; --coral:#cc6044;--coral-soft:#f5ddd6;--peach:#e8c0b4; --sage:#88a078;--sage-light:#dce8d4;--aude:#8a9870; --rosy:#c88080;--rose-soft:#f2e0e0; --warm-mint:#7ab0ac;--mint-light:#d4ece8; --golden:#c4a840;--gold-soft:#f0e4c0;--marzipan:#b49840; --charcoal:#2c2016;--warm-dark:#3a2c1c;--warm-mid:#6a5840; --terra:#b85c3a;--terra-soft:#e8cfc4; --accent:#88a078; } html,body{background:var(--cream)!important}html{font-size:16px} @media(min-width:768px){html{font-size:18px}} body{font-family:"DM Sans",sans-serif;background:var(--cream)!important;color:var(--charcoal);overflow-x:hidden;-webkit-text-size-adjust:100%} /* ── CHOLESTEROL ARTICLE ── */ .chol-body{font-family:"DM Sans",sans-serif} .chol-band{padding:56px 24px} @media(min-width:768px){.chol-band{padding:64px}} .chol-inner{max-width:960px;margin:0 auto} .chol-2col{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:600px){.chol-2col{grid-template-columns:1fr}} .chol-card{background:rgba(250,244,236,0.04);border-radius:12px;padding:24px;border-left:3px solid #88a078} .chol-card-title{font-family:"Playfair Display",serif;font-size:1.1rem;font-weight:700;margin-bottom:14px} .chol-item{font-size:0.95rem;line-height:1.75;color:rgba(250,244,236,0.7);margin-bottom:8px;font-weight:300} .chol-item:last-child{margin-bottom:0} .chol-section-title{font-family:"Playfair Display",serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:#faf4ec;margin-bottom:24px;line-height:1.2} .chol-text{font-size:1rem;line-height:1.9;color:rgba(250,244,236,0.7);font-weight:300;margin-bottom:24px;max-width:720px} .chol-quote{font-family:"Playfair Display",serif;font-size:clamp(1.1rem,2.5vw,1.5rem);font-style:italic;color:#e8c0b4;text-align:center;padding:36px;border-top:1px solid rgba(250,244,236,0.1);border-bottom:1px solid rgba(250,244,236,0.1);margin:40px 0;line-height:1.55} .chol-insight{background:rgba(196,168,64,0.1);border:1px solid rgba(196,168,64,0.3);border-radius:12px;padding:24px;font-size:1rem;line-height:1.75;color:rgba(250,244,236,0.8);margin-top:32px} .chol-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px} .chol-pill{display:inline-block;border:1px solid rgba(250,244,236,0.2);border-radius:30px;padding:8px 16px;font-size:0.85rem;color:rgba(250,244,236,0.7);font-weight:300} .chol-table{border:1px solid rgba(250,244,236,0.1);border-radius:12px;overflow:hidden;margin-top:16px} .chol-table-row{display:grid;grid-template-columns:1fr 1.4fr 1.6fr;gap:16px;padding:14px 20px;border-bottom:1px solid rgba(250,244,236,0.07);font-size:0.9rem;color:rgba(250,244,236,0.7);line-height:1.5} @media(max-width:600px){.chol-table-row{grid-template-columns:1fr;gap:4px}} .chol-table-row:last-child{border-bottom:none} .chol-table-head{background:rgba(250,244,236,0.05);font-family:"Barlow Condensed",sans-serif;font-size:0.65rem;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:rgba(250,244,236,0.4)} .chol-stat-big{display:flex;align-items:baseline;gap:12px;margin-bottom:16px} .chol-num{font-family:"Playfair Display",serif;font-size:clamp(2.5rem,5vw,4rem);font-weight:900;line-height:1} .chol-unit{font-size:0.9rem;color:rgba(250,244,236,0.5);font-weight:300} .chol-lead{font-size:1rem;line-height:1.9;color:rgba(250,244,236,0.7);font-weight:300} .chol-table-row span:last-child{color:rgba(250,244,236,0.9);font-weight:500} .chol-table-row span:nth-child(2){color:rgba(250,244,236,0.4);font-size:0.85rem} .chol-source{font-size:0.7rem;color:rgba(250,244,236,0.25);margin-top:48px;padding-top:24px;border-top:1px solid rgba(250,244,236,0.08);text-align:center;letter-spacing:0.08em} /* ── MENU ── */ .menu-overlay{position:fixed;inset:0;z-index:400;pointer-events:none;visibility:hidden} .menu-overlay.open{pointer-events:all;visibility:visible} .menu-backdrop{position:absolute;inset:0;background:rgba(44,32,22,0.5);opacity:0;transition:opacity 0.3s ease} .menu-overlay.open .menu-backdrop{opacity:1} .menu-drawer{position:absolute;top:0;right:0;bottom:0;width:min(820px,78vw);display:flex;background:transparent;transform:translateX(100%);transition:transform 0.38s cubic-bezier(0.4,0,0.2,1)} .menu-overlay.open .menu-drawer{transform:translateX(0)} .menu-info{width:260px;background:var(--linen);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 28px;flex-shrink:0} @media(max-width:680px){.menu-info{display:none}} .menu-info-photo{width:120px;height:120px;border-radius:12px;overflow:hidden;margin-bottom:16px} .menu-info-photo img{width:100%;height:100%;object-fit:cover;object-position:center top} .menu-info-name{font-family:"Playfair Display",serif;font-size:1.3rem;font-weight:700;color:var(--coral);text-align:center;line-height:1.2;margin-bottom:8px} .menu-info-name em{font-style:italic;font-weight:400} .menu-info-bio{font-size:0.75rem;color:var(--warm-mid);text-align:center;line-height:1.6;font-weight:300;max-width:170px} .menu-strip{width:40px;background:#b85030;display:flex;flex-direction:column;flex-shrink:0} @media(max-width:680px){.menu-strip{display:none}} .menu-strip-role{flex:1;display:flex;align-items:center;justify-content:center} .menu-strip-role span{writing-mode:vertical-rl;font-family:"Barlow Condensed",sans-serif;font-size:0.48rem;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;color:rgba(250,244,236,0.5)} .menu-nav-panel{flex:1;background:var(--coral);display:flex;flex-direction:column;justify-content:center;padding:64px 48px;position:relative;overflow-y:auto} @media(max-width:680px){.menu-nav-panel{padding:64px 32px}} .menu-x{position:absolute;top:20px;right:20px;background:none;border:none;cursor:pointer;padding:10px;line-height:0;-webkit-tap-highlight-color:transparent} .menu-x svg{width:22px;height:22px;stroke:rgba(250,244,236,0.6);fill:none;stroke-width:1.8;stroke-linecap:round} .menu-links{display:flex;flex-direction:column;gap:2px;list-style:none} .menu-links li span{font-family:"Playfair Display",serif;font-size:clamp(2rem,4.5vw,3rem);font-weight:700;color:rgba(250,244,236,0.82);display:block;padding:4px 0;cursor:pointer;transition:color 0.18s,padding-left 0.15s;-webkit-tap-highlight-color:transparent;background:transparent;user-select:none} .menu-links li span:hover{color:var(--cream);padding-left:8px;font-style:italic} /* ── BOOK LIST ── */ .book-cats{display:flex;flex-direction:column;gap:32px} .book-cat{} .book-cat-label{font-family:"Playfair Display",serif;font-size:1.2rem;font-weight:700;color:var(--warm-mid);margin-bottom:16px;display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:2px solid var(--sand)} .book-cat-icon{font-size:1rem} .book-list{display:flex;flex-direction:column;gap:0} .book-row-img{width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--linen)} .book-row-img img{width:100%;height:100%;object-fit:cover;filter:saturate(0.9)} .book-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:10px 0;border-bottom:1px solid rgba(216,204,192,0.5);align-items:center} .book-row-left{display:flex;align-items:center;gap:10px} @media(max-width:600px){.book-row{grid-template-columns:1fr;gap:4px}} .book-row:last-child{border-bottom:none} .book-title{font-family:"Playfair Display",serif;font-size:1rem;font-weight:700;color:var(--charcoal);line-height:1.3;margin-bottom:2px} .book-author{font-size:0.8rem;color:var(--warm-mid);font-weight:300} .book-note{font-size:0.88rem;line-height:1.65;color:var(--warm-mid);font-weight:300;padding-top:2px} /* ── ROUTER ── */ .page{display:none!important} .page.active{display:block!important} /* ── NAV ── */ nav{background:var(--linen);border-bottom:1px solid var(--sand);padding:0 20px;display:flex;justify-content:space-between;align-items:center;height:60px;position:sticky;top:0;z-index:300;box-shadow:0 1px 12px rgba(44,32,22,0.06)} @media(min-width:768px){nav{padding:0 48px;height:64px}} .nav-logo{font-family:"Playfair Display",serif;font-size:0.95rem;font-weight:700;color:var(--charcoal);cursor:pointer} @media(min-width:768px){.nav-logo{font-size:1.05rem}} .nav-logo em{font-style:italic;color:var(--coral);font-weight:400} .hamburger{background:none;border:none;cursor:pointer;padding:10px;display:flex;flex-direction:column;gap:5px;-webkit-tap-highlight-color:transparent} .hamburger span{display:block;width:22px;height:1.5px;background:var(--charcoal);transition:all 0.3s;transform-origin:center} .hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)} .hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} /* ── COLOR STRIP ── */ .color-strip{display:grid;grid-template-columns:repeat(5,1fr);height:4px} .cs1{background:#cc6044}.cs2{background:#88a078}.cs3{background:#c88080}.cs4{background:#7ab0ac}.cs5{background:#c4a840} /* ── MENU OVERLAY ── */ @media(max-width:767px){} @media(max-width:767px){} .nav-menu-overlay.open @media(max-width:767px){} .nav-menu-overlay.open .menu-nav{display:flex;flex-direction:column;gap:0} @media(max-width:767px){} .nav-menu-overlay.open .menu-nav{display:flex;flex-direction:column;gap:2px} /* ── FOOTER ── */ footer{background:var(--warm-dark);padding:28px 20px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center} @media(min-width:768px){footer{padding:36px 64px;flex-direction:row;justify-content:space-between;text-align:left}} .foot-logo{font-family:"Playfair Display",serif;font-size:0.95rem;font-weight:700;color:var(--cream);cursor:pointer} .foot-logo em{font-style:italic;color:var(--peach);font-weight:400} .foot-copy{font-size:0.65rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:rgba(250,244,236,0.28)} /* ══════════════════════════════════════════ HOME HERO ══════════════════════════════════════════ */ .jk-hero{ display:grid; grid-template-columns:48% 52%; grid-template-rows:1fr auto; min-height:100svh; background:#1a1510; overflow:hidden; position:relative; } @media(max-width:767px){ .jk-hero{ grid-template-columns:1fr; grid-template-rows:55vw auto auto; min-height:auto; } } /* Name watermark */ .jk-name-bg{ position:absolute; bottom:100px;left:0;right:48%; padding:0 clamp(24px,5vw,72px); pointer-events:none;z-index:1;overflow:hidden; } @media(max-width:767px){.jk-name-bg{display:none}} .jk-name-bg span{ font-family:"Playfair Display",serif; font-weight:900;line-height:0.88; letter-spacing:-0.03em; color:rgba(250,244,236,0.04); display:block; font-size:clamp(4rem,10vw,13rem); white-space:nowrap; } /* Left content panel */ .jk-content{ grid-column:1;grid-row:1; position:relative;z-index:2; padding:clamp(48px,8vh,96px) clamp(24px,5vw,72px) 40px; display:flex;flex-direction:column;justify-content:center; } @media(max-width:767px){ .jk-content{grid-column:1;grid-row:2;padding:36px 24px 28px;} } /* Right photo */ .jk-photo-wrap{ grid-column:2;grid-row:1/3; position:relative;overflow:hidden; } @media(max-width:767px){ .jk-photo-wrap{grid-column:1;grid-row:1;} } .jk-photo{ width:100%;height:100%; object-fit:cover;object-position:center top; display:block; filter:saturate(0.92) brightness(0.96); } /* Smooth gradient from left */ .jk-photo-wrap::before{ content:''; position:absolute;inset:0;z-index:1; background:linear-gradient(90deg, #1a1510 0%, rgba(26,21,16,0.55) 6%, rgba(26,21,16,0.15) 16%, transparent 30% ); } /* Text */ .jk-eyebrow{ font-family:"Barlow Condensed",sans-serif; font-size:0.65rem;font-weight:800; letter-spacing:0.26em;text-transform:uppercase; color:var(--coral);margin-bottom:20px; display:flex;align-items:center;gap:12px; } .jk-eyebrow::before{content:'';width:28px;height:1.5px;background:var(--coral)} .jk-h1{ font-family:"Playfair Display",serif; font-size:clamp(2.8rem,4.5vw,5.2rem); font-weight:900;line-height:0.97; color:var(--cream); margin-bottom:24px;letter-spacing:-0.02em; } .jk-h1 em{font-style:italic;color:var(--terra-soft)} .jk-sub{ font-size:1rem;line-height:1.85; color:rgba(250,244,236,0.5);font-weight:300; max-width:380px;margin-bottom:36px; } .jk-cta{ display:inline-block;background:var(--coral); color:var(--cream);font-size:0.72rem;font-weight:700; letter-spacing:0.18em;text-transform:uppercase; padding:14px 32px;border-radius:60px; cursor:pointer;-webkit-tap-highlight-color:transparent; align-self:flex-start; } /* Stats */ .jk-stats{ grid-column:1;grid-row:2; position:relative;z-index:2; display:flex;gap:clamp(24px,4vw,56px); padding:24px clamp(24px,5vw,72px) 36px; background:#1a1510; border-top:1px solid rgba(250,244,236,0.08); } @media(max-width:767px){ .jk-stats{grid-column:1;grid-row:3;padding:20px 24px 32px;} } .jk-num{ font-family:"Playfair Display",serif; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700;color:var(--cream);line-height:1; } .jk-lbl{ font-size:0.6rem;font-weight:600; letter-spacing:0.14em;text-transform:uppercase; color:rgba(250,244,236,0.35);margin-top:4px; } /* ══════════════════════════════════════════ HOME BELOW-HERO ══════════════════════════════════════════ */ .intro-band{background:var(--linen);padding:56px 24px;text-align:center;border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)} @media(min-width:768px){.intro-band{padding:80px 64px}} .intro-band h2{font-family:"Playfair Display",serif;font-size:clamp(1.5rem,5vw,3.2rem);font-weight:400;font-style:italic;line-height:1.4;color:var(--charcoal);max-width:820px;margin:0 auto} .intro-band h2 strong{font-style:normal;font-weight:900;color:var(--coral)} .photo-strip{display:grid;grid-template-columns:1fr;gap:3px} @media(min-width:600px){.photo-strip{grid-template-columns:repeat(3,1fr)}} .photo-strip-item{overflow:hidden;position:relative;height:260px;cursor:pointer} @media(min-width:600px){.photo-strip-item{height:300px}} .photo-strip-item img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 0.5s;filter:brightness(0.88)} .photo-strip-item:hover img{transform:scale(1.04)} .ps-label{position:absolute;bottom:0;left:0;right:0;padding:14px 18px;background:linear-gradient(0deg,rgba(44,32,22,0.65),transparent);font-size:0.6rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:rgba(250,244,236,0.85)} .cat-section{padding:56px 0 0} @media(min-width:768px){.cat-section{padding:80px 0 0}} .section-head{padding:0 24px 36px;display:flex;justify-content:space-between;align-items:flex-end} @media(min-width:768px){.section-head{padding:0 64px 48px}} .section-head h2{font-family:"Barlow Condensed",sans-serif;font-size:0.68rem;font-weight:800;letter-spacing:0.26em;text-transform:uppercase;color:var(--warm-mid)} .section-head span{font-size:0.63rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--sand)} .cat-featured{display:flex;flex-direction:column;margin-bottom:3px} @media(min-width:768px){.cat-featured{display:grid;grid-template-columns:1fr 1fr}} .feat-left{background:var(--sage);padding:48px 24px;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;position:relative;overflow:hidden} @media(min-width:768px){.feat-left{padding:64px;min-height:460px;justify-content:space-between}} .feat-left::after{content:'🌿';position:absolute;font-size:9rem;bottom:-14px;right:-6px;opacity:0.1;line-height:1} .feat-num{font-family:"Barlow Condensed",sans-serif;font-size:0.62rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:rgba(250,244,236,0.4);margin-bottom:10px} .feat-left h3{font-family:"Playfair Display",serif;font-size:clamp(2rem,5vw,4.5rem);font-weight:900;color:var(--cream);line-height:0.97;margin-bottom:14px} .feat-left p{font-size:1rem;line-height:1.7;color:rgba(250,244,236,0.72);font-weight:300} .feat-right{background:var(--sage-light);padding:32px 24px} @media(min-width:768px){.feat-right{padding:56px;display:flex;flex-direction:column}} .feat-right h4{font-family:"Barlow Condensed",sans-serif;font-size:0.62rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:var(--sage);margin-bottom:22px} .article-list{display:flex;flex-direction:column;gap:2px;margin-bottom:24px} .art-item{display:flex;align-items:center;gap:14px;padding:16px 18px;background:white;text-decoration:none;color:var(--charcoal);border-left:3px solid var(--sage);cursor:pointer;-webkit-tap-highlight-color:transparent} .an{font-family:"Barlow Condensed",sans-serif;font-size:1.4rem;font-weight:800;color:var(--sage);opacity:0.3;min-width:26px;flex-shrink:0} .at{font-size:0.95rem;font-weight:600;margin-bottom:2px} .as{font-size:0.8rem;color:var(--warm-mid);font-weight:300} .ab{margin-left:auto;font-size:0.58rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;background:var(--sage);color:white;padding:4px 10px;border-radius:20px;flex-shrink:0} .feat-link{font-size:0.68rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--sage);text-decoration:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer} .feat-link::after{content:'→'} .cats-row{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:3px} @media(min-width:900px){.cats-row{grid-template-columns:repeat(4,1fr)}} .cat-s{min-height:240px;display:flex;flex-direction:column;position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent} @media(min-width:768px){.cat-s{min-height:300px}} .cat-s-photo{position:absolute;inset:0} .cat-s-photo img{width:100%;height:100%;object-fit:cover;object-position:center} .cat-s-overlay{position:absolute;inset:0} .cat-s.teal .cat-s-overlay{background:linear-gradient(180deg,rgba(122,176,172,0.5) 0%,rgba(74,136,120,0.88) 100%)} .cat-s.terra .cat-s-overlay{background:linear-gradient(180deg,rgba(204,96,68,0.5) 0%,rgba(184,76,48,0.88) 100%)} .cat-s.rose .cat-s-overlay{background:linear-gradient(180deg,rgba(200,128,128,0.5) 0%,rgba(168,96,96,0.88) 100%)} .cat-s.olive .cat-s-overlay{background:linear-gradient(180deg,rgba(138,152,112,0.5) 0%,rgba(122,128,96,0.9) 100%)} .cat-s-content{position:relative;z-index:2;padding:20px;display:flex;flex-direction:column;height:100%;justify-content:flex-end} @media(min-width:768px){.cat-s-content{padding:32px 28px}} .cn{font-family:"Barlow Condensed",sans-serif;font-size:0.58rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:rgba(250,244,236,0.45);margin-bottom:6px} .cat-s h3{font-family:"Playfair Display",serif;font-size:clamp(1.2rem,4vw,1.6rem);font-weight:900;color:var(--cream);line-height:1.1;margin-bottom:6px} .cat-s p{font-size:0.82rem;line-height:1.55;color:rgba(250,244,236,0.7);font-weight:300;display:none} @media(min-width:600px){.cat-s p{display:block}} .cpill{display:inline-block;margin-top:10px;font-size:0.55rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;background:rgba(255,255,255,0.18);color:rgba(250,244,236,0.75);padding:4px 12px;border-radius:20px;align-self:flex-start} .quote-block{position:relative;overflow:hidden;min-height:320px;display:flex;align-items:center;justify-content:center} @media(min-width:768px){.quote-block{min-height:440px}} .quote-bg{position:absolute;inset:0} .quote-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(0.3) saturate(0.8) sepia(0.2)} .quote-content{position:relative;z-index:2;text-align:center;padding:48px 24px} @media(min-width:768px){.quote-content{padding:80px 64px;max-width:900px}} .quote-content blockquote{font-family:"Playfair Display",serif;font-size:clamp(1.3rem,4vw,2.6rem);font-weight:400;font-style:italic;color:var(--cream);line-height:1.45;margin-bottom:20px} .quote-content cite{font-family:"Barlow Condensed",sans-serif;font-size:0.68rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--peach);font-style:normal} /* ══════════════════════════════════════════ CATEGORY HERO (full bleed) ══════════════════════════════════════════ */ .cat-hero{position:relative;min-height:90vh;display:flex;align-items:flex-end;overflow:hidden;background:#1a1510} @media(max-width:767px){.cat-hero{min-height:72vh}} .hero-bg-full{position:absolute;inset:0;z-index:0} .hero-bg-full img{width:100%;height:100%;object-fit:cover;filter:saturate(0.88) brightness(0.92)} .hero-gradient{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(26,21,16,0.0) 0%,rgba(26,21,16,0.25) 45%,rgba(26,21,16,0.82) 75%,rgba(26,21,16,0.92) 100%)} .cat-hero-text{position:relative;z-index:2;padding:48px 24px 56px;width:100%} @media(min-width:768px){.cat-hero-text{padding:72px 80px 80px;max-width:800px}} .cat-hero-text::after{content:attr(data-word);position:absolute;font-family:"Playfair Display",serif;font-size:clamp(10rem,20vw,19rem);font-weight:900;color:rgba(250,244,236,0.05);line-height:1;right:-2%;bottom:-4%;letter-spacing:-0.04em;user-select:none;pointer-events:none;z-index:0} .hero-content{position:relative;z-index:1} .hero-cat-label{font-family:"Barlow Condensed",sans-serif;font-size:0.63rem;font-weight:800;letter-spacing:0.26em;text-transform:uppercase;color:rgba(220,232,212,0.85);margin-bottom:18px;display:flex;align-items:center;gap:10px} .hero-cat-label::before{content:'';width:28px;height:1.5px;background:rgba(220,232,212,0.85)} .cat-hero h1{font-family:"Playfair Display",serif;font-size:clamp(3rem,9vw,7rem);font-weight:900;line-height:0.95;color:var(--cream);margin-bottom:22px;letter-spacing:-0.02em} .cat-hero h1 em{font-style:italic;color:var(--peach)} .hero-intro{font-size:1rem;line-height:1.85;color:rgba(250,244,236,0.65);font-weight:300;max-width:500px} /* ══════════════════════════════════════════ CATEGORY BELOW-HERO ══════════════════════════════════════════ */ .story-section{display:flex;flex-direction:column;border-bottom:1px solid var(--sand)} @media(min-width:768px){.story-section{display:grid;grid-template-columns:1fr 1fr}} .story-left{background:var(--accent);padding:48px 24px;position:relative;overflow:hidden} @media(min-width:768px){.story-left{padding:72px 64px}} .story-left::before{content:open-quote;font-family:"Playfair Display",serif;font-size:16rem;line-height:0.7;color:rgba(0,0,0,0.06);position:absolute;top:10px;left:10px;font-weight:900} .story-left-inner{position:relative;z-index:1} .sl-label{font-family:"Barlow Condensed",sans-serif;font-size:0.6rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:rgba(250,244,236,0.5);margin-bottom:14px} .sl-quote{font-family:"Playfair Display",serif;font-size:clamp(1.2rem,4vw,2.1rem);font-weight:400;font-style:italic;color:var(--cream);line-height:1.5} .story-right{background:var(--beige);padding:40px 24px} @media(min-width:768px){.story-right{padding:72px 64px;display:flex;flex-direction:column;justify-content:center}} .sr-label{font-family:"Barlow Condensed",sans-serif;font-size:0.6rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin-bottom:16px} .sr-text{font-size:1rem;line-height:1.95;color:var(--warm-mid);font-weight:300;margin-bottom:14px} .sr-text:last-child{margin-bottom:0} .sr-text strong{color:var(--charcoal);font-weight:600} .articles-section{padding:48px 24px} @media(min-width:768px){.articles-section{padding:80px 64px}} .articles-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:32px} @media(min-width:768px){.articles-header{margin-bottom:48px}} .articles-header h2{font-family:"Playfair Display",serif;font-size:clamp(1.6rem,5vw,2.4rem);font-weight:700;color:var(--charcoal)} .articles-header h2 em{font-style:italic;color:var(--accent)} .art-grid{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:600px){.art-grid{grid-template-columns:1fr 1fr}} @media(min-width:900px){.art-grid{grid-template-columns:repeat(3,1fr)}} .art-card{border-radius:16px;overflow:hidden;background:white;border:1px solid var(--sand);display:flex;flex-direction:column} .art-card.live{cursor:pointer;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent} .art-card.live:active{transform:scale(0.98)} .art-card-photo{height:180px;overflow:hidden;position:relative;flex-shrink:0} .art-card.live .art-card-photo img{width:100%;height:100%;object-fit:cover;filter:brightness(0.92) saturate(0.88)} .art-card-accent{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--accent)} .art-card.empty .art-card-photo{background:var(--linen);display:flex;align-items:center;justify-content:center} .empty-photo-inner{display:flex;flex-direction:column;align-items:center;gap:8px} .empty-photo-inner svg{width:26px;height:26px;stroke:var(--sand2);fill:none;stroke-width:1.4;stroke-linecap:round} .empty-photo-inner span{font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--sand2)} .art-card-body{padding:18px 20px;flex:1;display:flex;flex-direction:column} .art-card-num{font-family:"Barlow Condensed",sans-serif;font-size:1.5rem;font-weight:800;opacity:0.15;line-height:1;margin-bottom:3px;color:var(--accent)} .art-tag{font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px} .art-title{font-family:"Playfair Display",serif;font-size:1rem;font-weight:700;color:var(--charcoal);margin-bottom:6px;line-height:1.35} .art-desc{font-size:0.95rem;line-height:1.7;color:var(--warm-mid);font-weight:300;flex:1} .art-cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:0.63rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)} .art-cta svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} .art-card.empty .art-title{color:var(--sand2);font-family:"DM Sans",sans-serif;font-weight:400;font-style:italic} .sticky-wrap{padding:0 24px 56px} @media(min-width:768px){.sticky-wrap{padding:0 64px 80px}} .sticky-note{background:var(--gold-soft);border:1px solid #d8c090;border-radius:4px 18px 18px 18px;padding:28px 32px;max-width:600px;position:relative;box-shadow:3px 4px 16px rgba(44,32,22,0.07);transform:rotate(-0.5deg)} @media(min-width:768px){.sticky-note{padding:36px 44px}} .sticky-note::before{content:'';position:absolute;top:-10px;left:22px;width:16px;height:16px;background:var(--marzipan);border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,0.15)} .sticky-note p{font-family:"Playfair Display",serif;font-size:1rem;font-style:italic;line-height:1.8;color:var(--charcoal);font-weight:400} .sticky-note .sn-sign{font-family:"Barlow Condensed",sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--warm-mid);margin-top:12px;opacity:0.55} /* ══════════════════════════════════════════ ABOUT ══════════════════════════════════════════ */ .about-hero{display:flex;flex-direction:column;background:var(--warm-dark)} @media(min-width:768px){.about-hero{display:grid;grid-template-columns:1fr 1fr;min-height:68vh}} .ah-left{padding:48px 24px 40px;display:flex;flex-direction:column;justify-content:flex-end} @media(min-width:768px){.ah-left{padding:80px 64px}} .ah-eyebrow{font-size:0.6rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:rgba(250,244,236,0.4);margin-bottom:14px} .ah-left h1{font-family:"Playfair Display",serif;font-size:clamp(2.4rem,7vw,4.5rem);font-weight:700;line-height:1.05;color:var(--cream);margin-bottom:20px} .ah-left h1 em{font-style:italic;color:var(--peach);font-weight:400} .ah-intro{font-size:1rem;line-height:1.85;color:rgba(250,244,236,0.5);font-weight:300} .ah-right{position:relative;height:55vw;min-height:260px;overflow:hidden} @media(min-width:768px){.ah-right{height:auto}} .ah-right img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:brightness(0.75) saturate(0.9)} .ah-overlay{position:absolute;inset:0;background:linear-gradient(180deg,var(--warm-dark) 0%,transparent 25%)} @media(min-width:768px){.ah-overlay{background:linear-gradient(90deg,var(--warm-dark) 0%,transparent 25%),linear-gradient(0deg,var(--warm-dark) 0%,transparent 18%)}} .about-body{max-width:1000px;margin:0 auto;padding:56px 24px} @media(min-width:768px){.about-body{padding:96px 64px}} .intro-block{display:flex;flex-direction:column;gap:40px;margin-bottom:64px} @media(min-width:768px){.intro-block{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-bottom:96px;align-items:start}} .intro-label{font-family:"Barlow Condensed",sans-serif;font-size:0.6rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:var(--coral);margin-bottom:12px} .intro-block h2{font-family:"Playfair Display",serif;font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700;color:var(--charcoal);line-height:1.2;margin-bottom:24px} .body-text{font-size:1rem;line-height:2;color:var(--warm-mid);font-weight:300;margin-bottom:14px} .side-photo{border-radius:14px;overflow:hidden} .side-photo img{width:100%;display:block;filter:brightness(0.92)} .simple-divider{border:none;border-top:1px solid var(--sand)} .mother-section{padding:56px 24px;background:var(--linen);border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)} @media(min-width:768px){.mother-section{padding:96px 64px}} .mother-inner{max-width:760px;margin:0 auto} .mother-label{font-family:"Barlow Condensed",sans-serif;font-size:0.6rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:var(--rosy);margin-bottom:14px} .mother-inner h2{font-family:"Playfair Display",serif;font-size:clamp(1.6rem,5vw,2.8rem);font-weight:700;line-height:1.15;color:var(--charcoal);margin-bottom:32px} .mother-inner h2 em{font-style:italic;font-weight:400;color:var(--rosy)} .mother-text{font-size:1rem;line-height:1.95;color:var(--warm-mid);font-weight:300;margin-bottom:16px} .mother-close{font-family:"Playfair Display",serif;font-size:1.05rem;font-style:italic;color:var(--charcoal);font-weight:400;margin-top:36px;padding-top:28px;border-top:1px solid var(--sand);line-height:1.7} .claude-section{background:var(--warm-dark);padding:56px 24px} @media(min-width:768px){.claude-section{padding:80px 64px}} .claude-inner{max-width:800px;margin:0 auto} .claude-header{display:flex;align-items:center;gap:12px;margin-bottom:28px;flex-wrap:wrap} .claude-badge{background:var(--coral);color:var(--cream);font-family:"Barlow Condensed",sans-serif;font-size:0.6rem;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;padding:6px 14px;border-radius:20px} .claude-subtitle{font-size:0.7rem;color:rgba(250,244,236,0.35)} .claude-intro{font-size:0.92rem;color:rgba(250,244,236,0.4);font-weight:300;line-height:1.7;margin-bottom:28px;font-style:italic;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,0.08)} .claude-text{font-family:"Playfair Display",serif;font-size:1.05rem;font-weight:400;line-height:1.85;color:rgba(250,244,236,0.82);margin-bottom:18px} .claude-text em{font-style:italic;color:var(--peach)} .claude-text strong{font-style:normal;font-weight:700;color:var(--cream)} .claude-observations{display:flex;flex-direction:column;gap:20px;margin:32px 0;padding:24px;background:rgba(255,255,255,0.04);border-radius:14px;border:1px solid rgba(255,255,255,0.07)} @media(min-width:768px){.claude-observations{padding:40px;gap:26px}} .obs-item{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start} .obs-num{font-family:"Barlow Condensed",sans-serif;font-size:0.7rem;font-weight:800;color:var(--peach);opacity:0.6;padding-top:2px} .obs-text{font-size:1rem;line-height:1.8;color:rgba(250,244,236,0.65);font-weight:300} .obs-text strong{color:rgba(250,244,236,0.88);font-weight:500} .claude-sign{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.08)} .claude-sign-icon{width:28px;height:28px;background:var(--coral);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0} .claude-sign-icon svg{width:13px;height:13px;stroke:var(--cream);fill:none;stroke-width:1.8} .claude-sign-text{font-size:0.75rem;color:rgba(250,244,236,0.35);line-height:1.5} .claude-sign-text strong{display:block;color:rgba(250,244,236,0.55);margin-bottom:2px} .timeline-section{padding:56px 24px;background:var(--linen);border-top:1px solid var(--sand)} @media(min-width:768px){.timeline-section{padding:80px 64px}} .tl-inner{max-width:800px;margin:0 auto} .tl-label{font-family:"Barlow Condensed",sans-serif;font-size:0.6rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:var(--coral);margin-bottom:10px} .tl-title{font-family:"Playfair Display",serif;font-size:clamp(1.4rem,4vw,1.8rem);font-weight:700;color:var(--charcoal);margin-bottom:32px} .tl-item{display:grid;grid-template-columns:90px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--sand)} @media(min-width:768px){.tl-item{grid-template-columns:110px 1fr;gap:28px}} .tl-item:last-child{border-bottom:none} .tl-year{font-size:0.72rem;font-weight:600;color:var(--coral);padding-top:3px;line-height:1.4} .tl-content strong{display:block;font-size:0.95rem;font-weight:600;color:var(--charcoal);margin-bottom:3px} .tl-content span{font-size:0.88rem;color:var(--warm-mid);font-weight:300;line-height:1.7} /* ══════════════════════════════════════════ FAVOURITES ══════════════════════════════════════════ */ .page-hero{background:var(--warm-dark);padding:56px 24px 48px;display:flex;flex-direction:column;gap:20px} @media(min-width:768px){.page-hero{padding:80px 64px;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px}} .ph-eyebrow{font-size:0.6rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:rgba(250,244,236,0.4);margin-bottom:12px} .page-hero h1{font-family:"Playfair Display",serif;font-size:clamp(2.4rem,7vw,5rem);font-weight:900;line-height:0.95;color:var(--cream)} .page-hero h1 em{font-style:italic;color:var(--peach)} .ph-right p{font-size:1rem;line-height:1.85;color:rgba(250,244,236,0.5);font-weight:300} .cat-nav{background:var(--linen);border-bottom:1px solid var(--sand);padding:14px 20px;display:flex;gap:8px;flex-wrap:wrap;position:sticky;top:60px;z-index:100;overflow-x:auto;-webkit-overflow-scrolling:touch} @media(min-width:768px){.cat-nav{top:64px;padding:18px 64px}} .cat-pill{font-size:0.62rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;padding:8px 16px;border-radius:30px;text-decoration:none;border:1px solid var(--sand);color:var(--warm-mid);background:white;display:flex;align-items:center;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap} .cat-pill svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0} .cat-pill:active,.cat-pill.active-terra{background:var(--coral);border-color:var(--coral);color:white!important} .fav-section{padding:48px 24px;border-bottom:1px solid var(--sand)} @media(min-width:768px){.fav-section{padding:80px 64px}} .fav-section.linen-bg{background:var(--linen)} .sec-header{margin-bottom:32px} @media(min-width:768px){.sec-header{display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px;margin-bottom:48px}} .sec-accent{width:36px;height:3px;border-radius:2px;margin-bottom:10px} .sec-num{font-family:"Barlow Condensed",sans-serif;font-size:0.6rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;margin-bottom:6px} .sec-title{font-family:"Playfair Display",serif;font-size:clamp(1.8rem,5vw,2.8rem);font-weight:700;color:var(--charcoal);line-height:1} .sec-title em{font-style:italic} .sec-desc{font-size:1rem;color:var(--warm-mid);font-weight:300;margin-top:8px;line-height:1.65} .sec-header-photo{display:none} @media(min-width:768px){.sec-header-photo{display:block;width:220px;height:140px;border-radius:14px;overflow:hidden}.sec-header-photo img{width:100%;height:100%;object-fit:cover;filter:brightness(0.88) saturate(0.85)}} .prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(min-width:900px){.prod-grid{grid-template-columns:repeat(4,1fr)}} .prod-grid.three{grid-template-columns:1fr 1fr} @media(min-width:768px){.prod-grid.three{grid-template-columns:repeat(3,1fr)}} .prod-card{background:white;border:1px solid var(--sand);border-radius:14px;overflow:hidden} .prod-card:not(.empty):active{transform:scale(0.98)} .prod-img{height:150px;overflow:hidden} @media(min-width:768px){.prod-img{height:170px}} .prod-img img{width:100%;height:100%;object-fit:cover;filter:brightness(0.88) saturate(0.85)} .prod-body{padding:14px 16px} @media(min-width:768px){.prod-body{padding:18px}} .prod-tag{font-size:0.56rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--warm-mid);margin-bottom:4px;opacity:0.7} .prod-name{font-family:"Playfair Display",serif;font-size:0.95rem;font-weight:700;color:var(--charcoal);margin-bottom:3px;line-height:1.3} .prod-by{font-size:0.75rem;color:var(--warm-mid);font-weight:300;margin-bottom:8px} .prod-note{font-size:0.82rem;line-height:1.6;color:var(--warm-mid);font-weight:300;border-top:1px solid var(--sand);padding-top:8px;margin-top:8px} .prod-card.empty{border-style:dashed;background:transparent;cursor:default} .prod-card.empty .prod-img{background:var(--linen);display:flex;align-items:center;justify-content:center} .prod-card.empty .prod-img svg{width:24px;height:24px;stroke:var(--sand);fill:none;stroke-width:1.5;stroke-linecap:round} .prod-card.empty .prod-name{color:var(--sand);font-family:"DM Sans",sans-serif;font-size:0.8rem;font-weight:400} /* ══════════════════════════════════════════ RESPONSIVE CLEANUP ══════════════════════════════════════════ */ @media(max-width:580px){ .cats-row,.prod-grid,.prod-grid.three{grid-template-columns:1fr} .menu-panel{padding:60px 28px} } /* ===== UITZETLIJST-BLOK ===== */ /* ── UITZETLIJST TOOL ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --cream:#faf4ec;--linen:#f2e8d8;--beige:#ede3d0;--sand:#d8ccc0; --coral:#cc6044;--coral-soft:#f5ddd6;--peach:#e8c0b4; --sage:#88a078;--sage-light:#dce8d4; --golden:#c4a840;--gold-soft:#f0e4c0;--marzipan:#b49840; --warm-mint:#7ab0ac;--mint-light:#d4ece8; --charcoal:#2c2016;--warm-dark:#3a2c1c;--warm-mid:#6a5840; } html{font-size:16px} body{font-family:"DM Sans",sans-serif;background:var(--cream);color:var(--charcoal);min-height:100vh;overflow-x:hidden} /* ── HERO ── */ .uitzetlijst-tool .hero {background:var(--warm-dark);padding:56px 24px 48px;position:relative;overflow:hidden} @media(min-width:768px){.hero{padding:72px 64px 56px}} .uitzetlijst-tool .hero::after {content:"Uitzetlijst";position:absolute;font-family:"Playfair Display",serif;font-size:clamp(8rem,18vw,18rem);font-weight:900;color:rgba(250,244,236,0.04);right:-2%;bottom:-15%;letter-spacing:-0.04em;user-select:none;line-height:1} .uitzetlijst-tool .hero-inner {max-width:800px;position:relative;z-index:1} .uitzetlijst-tool .hero-eyebrow {font-family:"Barlow Condensed",sans-serif;font-size:0.65rem;font-weight:800;letter-spacing:0.26em;text-transform:uppercase;color:var(--sage);margin-bottom:16px;display:flex;align-items:center;gap:12px} .uitzetlijst-tool .hero-eyebrow::before {content:"";width:28px;height:1.5px;background:var(--sage);display:block} .uitzetlijst-tool .hero h1 {font-family:"Playfair Display",serif;font-size:clamp(2.4rem,6vw,5rem);font-weight:900;line-height:0.97;color:var(--cream);margin-bottom:20px;letter-spacing:-0.02em} .uitzetlijst-tool .hero h1 em {font-style:italic;color:var(--peach)} .uitzetlijst-tool .hero-sub {font-size:1rem;line-height:1.85;color:rgba(250,244,236,0.55);font-weight:300;max-width:520px;margin-bottom:36px} .uitzetlijst-tool .hero-note {display:inline-flex;align-items:center;gap:10px;background:rgba(136,160,120,0.15);border:1px solid rgba(136,160,120,0.3);border-radius:30px;padding:10px 20px;font-size:0.8rem;color:rgba(250,244,236,0.6);font-weight:300} .uitzetlijst-tool .hero-note strong {color:var(--sage);font-weight:600} /* ── PROGRESS BAR ── */ .uitzetlijst-tool .progress-wrap {background:var(--linen);padding:24px;border-bottom:1px solid var(--sand);position:sticky;top:0;z-index:100;box-shadow:0 2px 16px rgba(44,32,22,0.06)} @media(min-width:768px){.progress-wrap{padding:20px 64px}} .uitzetlijst-tool .progress-inner {max-width:960px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap} .uitzetlijst-tool .progress-label {font-family:"Barlow Condensed",sans-serif;font-size:0.65rem;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;color:var(--warm-mid);flex-shrink:0} .uitzetlijst-tool .progress-bar {flex:1;min-width:120px;height:6px;background:var(--sand);border-radius:3px;overflow:hidden} .uitzetlijst-tool .progress-fill {height:100%;background:linear-gradient(90deg,var(--sage),var(--warm-mint));border-radius:3px;transition:width 0.4s ease;width:0%} .uitzetlijst-tool .progress-pct {font-family:"Playfair Display",serif;font-size:1.1rem;font-weight:700;color:var(--charcoal);min-width:44px;text-align:right} .uitzetlijst-tool .budget-badge {background:var(--gold-soft);border:1px solid var(--marzipan);border-radius:20px;padding:6px 16px;font-size:0.78rem;font-weight:500;color:var(--charcoal);margin-left:auto;white-space:nowrap} .uitzetlijst-tool .budget-badge span {font-family:"Playfair Display",serif;font-weight:700;color:var(--coral)} /* ── TABS ── */ .uitzetlijst-tool .tabs {background:var(--linen);border-bottom:1px solid var(--sand);padding:0 24px;display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch} @media(min-width:768px){.tabs{padding:0 64px}} .uitzetlijst-tool .tab {font-family:"Barlow Condensed",sans-serif;font-size:0.68rem;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;padding:16px 20px;border:none;background:none;cursor:pointer;color:var(--warm-mid);border-bottom:2.5px solid transparent;white-space:nowrap;transition:color 0.2s,border-color 0.2s;-webkit-tap-highlight-color:transparent} .uitzetlijst-tool .tab.active {color:var(--coral);border-bottom-color:var(--coral)} /* ── FILTERS ── */ .uitzetlijst-tool .filters {padding:20px 24px 0;max-width:960px;margin:0 auto;display:flex;gap:8px;flex-wrap:wrap} @media(min-width:768px){.filters{padding:24px 0 0}} .uitzetlijst-tool .filter-btn {font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:7px 16px;border-radius:30px;border:1.5px solid var(--sand);background:white;color:var(--warm-mid);cursor:pointer;transition:all 0.18s;-webkit-tap-highlight-color:transparent} .uitzetlijst-tool .filter-btn.active-ess {background:var(--coral);border-color:var(--coral);color:white} .uitzetlijst-tool .filter-btn.active-opt {background:var(--sage);border-color:var(--sage);color:white} .uitzetlijst-tool .filter-btn.active-lat {background:var(--golden);border-color:var(--golden);color:white} .uitzetlijst-tool .filter-btn.active-all {background:var(--charcoal);border-color:var(--charcoal);color:white} /* ── MAIN CONTENT ── */ .uitzetlijst-tool .main {padding:24px;max-width:960px;margin:0 auto} @media(min-width:768px){.main{padding:32px 0}} /* ── CATEGORY ── */ .uitzetlijst-tool .cat-block {margin-bottom:48px} .uitzetlijst-tool .cat-header {display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--sand)} .uitzetlijst-tool .cat-title {font-family:"Playfair Display",serif;font-size:1.4rem;font-weight:700;color:var(--charcoal)} .uitzetlijst-tool .cat-count {font-family:"Barlow Condensed",sans-serif;font-size:0.62rem;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--sand);margin-left:auto} .uitzetlijst-tool .cat-progress-ring {position:relative;width:36px;height:36px;flex-shrink:0} .uitzetlijst-tool .cat-progress-ring svg {transform:rotate(-90deg)} .uitzetlijst-tool .cat-progress-ring circle {fill:none;stroke-width:3;transition:stroke-dashoffset 0.4s ease} .uitzetlijst-tool .cat-progress-ring .track {stroke:var(--sand)} .uitzetlijst-tool .cat-progress-ring .fill {stroke:var(--sage)} .uitzetlijst-tool .cat-pct {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Barlow Condensed",sans-serif;font-size:0.55rem;font-weight:800;color:var(--warm-mid)} /* ── ITEMS ── */ .uitzetlijst-tool .item-list {display:flex;flex-direction:column;gap:2px} .uitzetlijst-tool .item {display:flex;align-items:flex-start;gap:14px;padding:14px 16px;background:white;border:1px solid var(--sand);border-radius:10px;cursor:pointer;transition:all 0.18s;-webkit-tap-highlight-color:transparent;position:relative} .uitzetlijst-tool .item:hover {border-color:var(--sage);box-shadow:0 2px 12px rgba(44,32,22,0.06)} .uitzetlijst-tool .item.checked {background:var(--sage-light);border-color:rgba(136,160,120,0.4)} .uitzetlijst-tool .item.checked .item-name {text-decoration:line-through;color:var(--warm-mid);opacity:0.6} .uitzetlijst-tool .item.hidden {display:none} .uitzetlijst-tool .item-check {width:22px;height:22px;border-radius:6px;border:2px solid var(--sand);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:all 0.18s;background:white} .uitzetlijst-tool .item.checked .item-check {background:var(--sage);border-color:var(--sage)} .uitzetlijst-tool .item-check svg {width:12px;height:12px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 0.15s} .uitzetlijst-tool .item.checked .item-check svg {opacity:1} .uitzetlijst-tool .item-body {flex:1;min-width:0} .uitzetlijst-tool .item-name {font-size:0.95rem;font-weight:500;color:var(--charcoal);line-height:1.4;margin-bottom:4px} .uitzetlijst-tool .item-meta {display:flex;align-items:center;gap:8px;flex-wrap:wrap} .uitzetlijst-tool .prio-badge {font-family:"Barlow Condensed",sans-serif;font-size:0.55rem;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;padding:2px 8px;border-radius:12px;flex-shrink:0} .uitzetlijst-tool .prio-ess {background:var(--coral-soft);color:var(--coral)} .uitzetlijst-tool .prio-opt {background:var(--sage-light);color:var(--sage)} .uitzetlijst-tool .prio-lat {background:var(--gold-soft);color:var(--marzipan)} .uitzetlijst-tool .item-budget {font-size:0.78rem;color:var(--warm-mid);font-weight:300} .uitzetlijst-tool .item-note {font-size:0.78rem;color:var(--warm-mid);font-weight:300;font-style:italic;margin-top:3px} .uitzetlijst-tool .item-tip {display:flex;align-items:flex-start;gap:6px;margin-top:6px;background:var(--gold-soft);border-radius:8px;padding:8px 10px;font-size:0.75rem;color:var(--charcoal);line-height:1.5} .uitzetlijst-tool .item-tip::before {content:"💡";flex-shrink:0} /* ── REGELEN TAB ── */ .uitzetlijst-tool .taak-block {margin-bottom:32px} .uitzetlijst-tool .taak-header {font-family:"Barlow Condensed",sans-serif;font-size:0.65rem;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;color:var(--warm-mid);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--sand)} .uitzetlijst-tool .taak {display:flex;align-items:flex-start;gap:14px;padding:14px 16px;background:white;border:1px solid var(--sand);border-radius:10px;cursor:pointer;margin-bottom:2px;transition:all 0.18s;-webkit-tap-highlight-color:transparent} .uitzetlijst-tool .taak:hover {border-color:var(--warm-mint)} .uitzetlijst-tool .taak.checked {background:var(--mint-light);border-color:rgba(122,176,172,0.4)} .uitzetlijst-tool .taak.checked .taak-name {text-decoration:line-through;opacity:0.55} .uitzetlijst-tool .taak-check {width:22px;height:22px;border-radius:6px;border:2px solid var(--sand);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;transition:all 0.18s;background:white} .uitzetlijst-tool .taak.checked .taak-check {background:var(--warm-mint);border-color:var(--warm-mint)} .uitzetlijst-tool .taak-check svg {width:12px;height:12px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity 0.15s} .uitzetlijst-tool .taak.checked .taak-check svg {opacity:1} .uitzetlijst-tool .taak-body {flex:1} .uitzetlijst-tool .taak-name {font-size:0.95rem;font-weight:500;color:var(--charcoal);line-height:1.4;margin-bottom:3px} .uitzetlijst-tool .taak-when {font-size:0.78rem;color:var(--coral);font-weight:500} .uitzetlijst-tool .taak-info {font-size:0.78rem;color:var(--warm-mid);font-weight:300;margin-top:2px} .uitzetlijst-tool .taak-link {color:var(--warm-mint);text-decoration:none;font-weight:500} /* ── STICKY NOTE ── */ .uitzetlijst-tool .sticky-section {margin-bottom:36px} .uitzetlijst-tool .sticky {background:var(--gold-soft);border:1px solid #d8c090;border-radius:4px 16px 16px 16px;padding:20px 24px;position:relative;box-shadow:2px 3px 12px rgba(44,32,22,0.07);transform:rotate(-0.4deg)} .uitzetlijst-tool .sticky::before {content:"";position:absolute;top:-9px;left:20px;width:15px;height:15px;background:var(--marzipan);border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,0.15)} .uitzetlijst-tool .sticky p {font-family:"Playfair Display",serif;font-size:0.95rem;font-style:italic;line-height:1.75;color:var(--charcoal)} .uitzetlijst-tool .sticky .sign {font-family:"Barlow Condensed",sans-serif;font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--warm-mid);margin-top:10px;opacity:0.55} /* ── EMPTY STATE ── */ .uitzetlijst-tool .empty {text-align:center;padding:48px 24px;color:var(--warm-mid)} .uitzetlijst-tool .empty p {font-family:"Playfair Display",serif;font-style:italic;font-size:1.1rem} /* ── RESET BTN ── */ .uitzetlijst-tool .reset-wrap {padding:40px 0 16px;text-align:center} .uitzetlijst-tool .reset-btn {background:none;border:1px solid var(--sand);border-radius:20px;padding:8px 20px;font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--warm-mid);cursor:pointer;transition:all 0.2s} .uitzetlijst-tool .reset-btn:hover {border-color:var(--coral);color:var(--coral)} /* ── FOOTER ── */ .uitzetlijst-tool .foot {background:var(--warm-dark);padding:28px 24px;text-align:center} .uitzetlijst-tool .foot p {font-size:0.75rem;color:rgba(250,244,236,0.3);font-weight:300} .uitzetlijst-tool .foot a {color:rgba(250,244,236,0.5);text-decoration:none} .uitzetlijst-tool{font-family:"DM Sans",sans-serif;background:var(--cream);color:var(--charcoal)}