/* El Palmito — concept, september 2026 */ :root{ --paper:#FBF8F3; --paper-2:#F4EEE4; --ink:#23211E; --muted:#6E665A; --line:#E3DACB; --accent:#1C6488; --accent-dark:#144D69; --deep:#123D52; --amber:#E9A02C; --white:#fff; --radius:4px; --maxw:1140px; --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:76px} /* 'clip' en niet 'hidden': beide houden horizontaal scrollen tegen, maar 'hidden' maakt van een scrollcontainer en dan werkt de sticky navigatiebalk hierboven niet meer. Niet terugzetten naar hidden. */ body{overflow-x:clip} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:var(--accent-dark)} h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.15;margin:0 0 .5em} h1{font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.02em} h2{font-size:clamp(1.8rem,3.6vw,2.7rem);letter-spacing:-.015em} h3{font-size:1.25rem} p{margin:0 0 1.1em} .lead{font-size:1.18rem;color:var(--muted)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .narrow{max-width:760px} section{padding:84px 0} section.tight{padding:56px 0} .alt{background:var(--paper-2)} .eyebrow{ font-size:.74rem;letter-spacing:.18em;text-transform:uppercase; color:var(--amber);font-weight:600;margin-bottom:14px; } .rule{width:52px;height:2px;background:var(--accent);margin:0 0 26px} /* ---------- draft banner ---------- */ .draftbar{ background:var(--deep);color:#EAF1EF;font-size:.86rem; padding:9px 24px;text-align:center;line-height:1.45; } .draftbar strong{color:#fff} /* ---------- nav ---------- */ .nav{ position:sticky;top:0;z-index:60;background:rgba(251,248,243,.94); backdrop-filter:blur(9px);border-bottom:1px solid var(--line); } .nav-in{display:flex;align-items:center;gap:28px;height:66px;max-width:var(--maxw);margin:0 auto;padding:0 24px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);white-space:nowrap} .brand img{height:38px;width:auto} .brand b{font-family:var(--serif);font-size:1.28rem;font-weight:500;letter-spacing:.01em} .brand em{display:block;font-style:normal;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-top:-2px} .nav-links{display:flex;gap:24px;margin-left:auto;align-items:center} .nav-links a{ text-decoration:none;color:var(--muted);font-size:.92rem; padding:4px 0;border-bottom:1px solid transparent;transition:.15s; } .nav-links a:hover{color:var(--ink);border-color:var(--accent)} .nav-links a.cta{ background:var(--accent);color:#fff;padding:9px 18px;border-radius:var(--radius);border:0; } .nav-links a.cta:hover{background:var(--accent-dark);color:#fff} .burger{ display:none;margin-left:auto;background:0;border:0;font-size:1.4rem;cursor:pointer;color:var(--ink); padding:10px;line-height:1; } /* ---------- buttons ---------- */ .btn{ display:inline-block;background:var(--accent);color:#fff;text-decoration:none; padding:14px 30px;border-radius:var(--radius);border:0;cursor:pointer; font-family:var(--sans);font-size:1rem;font-weight:500;transition:.15s; } .btn:hover{background:var(--accent-dark)} .btn.ghost{background:0;border:1px solid var(--line);color:var(--ink)} .btn.ghost:hover{border-color:var(--accent);background:0;color:var(--accent-dark)} .btn.light{background:#fff;color:var(--ink)} .btn.light:hover{background:#f2ece2} /* ---------- hero ---------- */ .hero{ position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end; background:var(--deep);overflow:hidden; } .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,30,28,.15) 0%,rgba(20,30,28,.28) 45%,rgba(20,30,28,.78) 100%); } .hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px 76px;color:#fff} .hero h1{color:#fff;margin-bottom:.25em;max-width:15ch} .hero .place{ font-size:.78rem;letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.8);margin-bottom:20px; } .hero .tagline{font-size:1.22rem;color:rgba(255,255,255,.92);max-width:46ch;margin-bottom:30px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* ---------- facts strip ---------- */ .facts{background:var(--deep);color:#fff;padding:0} .facts-in{ display:grid;grid-template-columns:repeat(6,1fr); max-width:var(--maxw);margin:0 auto; } .fact{padding:30px 18px;text-align:center;border-right:1px solid rgba(255,255,255,.13)} .fact:last-child{border-right:0} .fact .n{font-family:var(--serif);font-size:1.9rem;display:block;line-height:1.1} .fact .l{font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.68);margin-top:6px;display:block} /* ---------- split blocks ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:88px} .split:last-child{margin-bottom:0} .split.flip .txt{order:2} .split .ph{border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 44px rgba(35,33,30,.10)} /* ---------- gallery ---------- */ .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .tab{ background:0;border:1px solid var(--line);border-radius:100px;padding:8px 18px; font-family:var(--sans);font-size:.9rem;color:var(--muted);cursor:pointer;transition:.15s; } .tab:hover{border-color:var(--accent);color:var(--ink)} .tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff} .grid-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .grid-g .ph{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)} .grid-g .ph img{width:100%;height:100%;object-fit:cover} .split .ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3} .card img{aspect-ratio:3/2;object-fit:cover;width:100%} .grid-g .ph:first-child{grid-column:span 2;grid-row:span 2} /* ---------- includes ---------- */ .incl{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 44px} .incl .item{display:flex;gap:15px} .incl .ic{ flex:0 0 40px;height:40px;border-radius:50%;background:var(--paper-2); display:grid;place-items:center;font-size:1.1rem; } .alt .incl .ic{background:#fff} .incl h3{font-size:1.02rem;font-family:var(--sans);font-weight:600;margin-bottom:3px} .incl p{font-size:.93rem;color:var(--muted);margin:0} /* ---------- prices ---------- */ .promo{ background:var(--accent);color:#fff;border-radius:var(--radius); padding:26px 30px;margin-bottom:34px; } .promo h3{color:#fff;font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.02em;margin-bottom:14px} .promo ul{margin:0;padding-left:19px} .promo li{margin-bottom:7px} .promo li:last-child{margin-bottom:0} .promo .old{text-decoration:line-through;opacity:.65} /* De tabel mag binnen dit kader schuiven in plaats van de pagina uit te lopen. Op een breed scherm valt het niet op; op een telefoon is het het verschil tussen een zichtbare zomerprijs en een weggesneden kolom. `min-width:max-content` houdt de tabel op haar natuurlijke breedte zodat ze écht schuift in plaats van de kolommen tot onleesbaar smal te persen. */ .tabel-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)} .tabel-scroll table.rates{min-width:max-content} table.rates{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden} .alt table.rates{background:var(--paper)} table.rates th,table.rates td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:.97rem} table.rates th{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600} table.rates td.price{font-family:var(--serif);font-size:1.28rem;white-space:nowrap} table.rates tr:last-child td{border-bottom:0} /* De periodetabel: prijzen per seizoen naast elkaar, dus die kolommen rechts uitlijnen — bedragen onder elkaar lezen makkelijker dan bedragen die met de tekst meelopen. */ table.rates th + th,table.rates td.price{text-align:right} table.rates th:first-child,table.rates td:first-child{text-align:left} /* Het datumbereik onder een seizoensnaam, en "± 1 maand" onder een aantal nachten: ondergeschikte informatie, dus op een eigen regel en kleiner. */ /* Een periode die niet in het seizoen past: een streepje, niet leeg — leeg leest als een fout, een streepje als een antwoord. */ table.rates .leeg{color:var(--muted);font-family:var(--sans);font-size:1rem} .th-sub,.td-sub{display:block;font-weight:400;letter-spacing:0;text-transform:none; font-size:.78rem;color:var(--muted);margin-top:3px} /* Nog in gebruik voor losse omkaderde mededelingen; de verklaring over de aard van de verhuur die hier ooit in stond, is een eigen sectie geworden (zie .profielen). */ .aard{margin-top:34px;padding:26px 30px;border:1px solid var(--line);border-radius:var(--radius); background:#fff} .alt .aard{background:var(--paper)} .aard h3{font-family:var(--serif);font-size:1.3rem;margin:0 0 12px;color:var(--deep)} .aard p{margin:0 0 12px;font-size:.95rem;color:var(--muted)} .aard ul{margin:0 0 12px;padding-left:20px} .aard li{font-size:.95rem;color:var(--muted);margin-bottom:7px} .aard > :last-child{margin-bottom:0} .month-box{ border:2px solid var(--deep);border-radius:var(--radius);padding:28px 30px;margin-top:26px; display:flex;gap:26px;align-items:center;flex-wrap:wrap; } .month-box .big{font-family:var(--serif);font-size:2.2rem;color:var(--deep);line-height:1} .month-box p{margin:0;color:var(--muted);font-size:.95rem;flex:1;min-width:260px} .note{font-size:.9rem;color:var(--muted);margin-top:18px} /* ---------- voor wie ---------- De profielen dragen de pagina: dit is het eerste wat een bezoeker na de hero leest. Daarom een echt raster met lucht, en geen kader met opsommingstekens. */ .profielen{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 30px} .profiel h3{font-family:var(--serif);font-size:1.18rem;color:var(--deep);margin:0 0 8px;line-height:1.3} .profiel p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6} @media (max-width:900px){.profielen{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.profielen{grid-template-columns:1fr;gap:22px}} .note.narrow{max-width:640px;margin-top:34px} /* ---------- area ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .card{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)} .alt .card{background:var(--paper)} /* Een omgevingskaart zonder foto: dan draagt de tekst de kaart alleen, en heeft ze wat meer lucht nodig om niet als een halve kaart te ogen. */ .card.zonderfoto .body{padding-top:26px;padding-bottom:26px} .card .body{padding:20px 22px} .card h3{font-size:1.05rem;margin-bottom:5px} .card p{font-size:.92rem;color:var(--muted);margin:0} .card .dist{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:8px} /* ---------- reviews ---------- */ .reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px} .alt .review{background:var(--paper)} .stars{color:var(--amber);letter-spacing:3px;margin-bottom:12px;font-size:.95rem} .review blockquote{margin:0 0 16px;font-family:var(--serif);font-size:1.12rem;line-height:1.55} .review .who{font-size:.86rem;color:var(--muted)} .review .reply{ margin-top:18px;padding-top:16px;border-top:1px solid var(--line); font-size:.92rem;color:var(--muted); } .verified{ display:inline-flex;align-items:center;gap:7px;font-size:.84rem;color:var(--muted); border:1px solid var(--line);border-radius:100px;padding:6px 15px;margin-bottom:26px; } /* ---------- accordion ---------- */ .acc{border-top:1px solid var(--line)} .acc details{border-bottom:1px solid var(--line)} .acc summary{ padding:20px 44px 20px 0;cursor:pointer;position:relative;list-style:none; font-family:var(--serif);font-size:1.14rem; } .acc summary::-webkit-details-marker{display:none} .acc summary::after{ content:'+';position:absolute;right:8px;top:19px;font-size:1.4rem; color:var(--accent);font-family:var(--sans);transition:.2s; } .acc details[open] summary::after{content:'–'} .acc .content{padding:0 44px 24px 0;color:var(--muted)} .acc .content p:last-child{margin-bottom:0} /* ---------- booking form ---------- */ .book{background:var(--deep);color:#fff} .book h2,.book h3{color:#fff} .book .eyebrow{color:#F0BC63} .book .rule{background:#F0BC63} .book .lead{color:rgba(255,255,255,.78)} .form-card{ background:var(--paper);color:var(--ink);border-radius:var(--radius); padding:40px;box-shadow:0 22px 60px rgba(0,0,0,.25); } .fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px} .field{display:flex;flex-direction:column;min-width:0} .field.full{grid-column:1/-1} label{font-size:.82rem;font-weight:600;letter-spacing:.03em;margin-bottom:7px} label .req{color:var(--accent)} input,select,textarea{ font-family:var(--sans);font-size:.98rem;padding:12px 14px; border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink); } /* Een rastercel krimpt standaard niet onder de natuurlijke breedte van haar inhoud (min-width:auto). Een datumveld heeft op iOS een vrij brede eigen maat, en een bestandskiezer al helemaal — zonder deze regel duwen die het formulier breder dan het scherm, en omdat body op overflow-x:clip staat wordt dat stuk niet schuifbaar maar weggesneden. Vandaar: uitdrukkelijk krimpbaar, en nooit breder dan de kaart. Vinkjes en keuzerondjes staan er bewust buiten: die houden hun eigen maat. */ input:not([type=checkbox]):not([type=radio]),select,textarea{ width:100%;max-width:100%;min-width:0; } input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)} textarea{resize:vertical;min-height:96px} .hint{font-size:.82rem;color:var(--muted);margin-top:6px} .summary{ grid-column:1/-1;background:#fff;border:1px solid var(--line); border-radius:var(--radius);padding:22px 24px; } .summary .row{display:flex;justify-content:space-between;padding:7px 0;font-size:.95rem} .summary .row.total{ border-top:1px solid var(--line);margin-top:10px;padding-top:14px; font-family:var(--serif);font-size:1.3rem; } /* Enkel het bedrag rechts mag niet afbreken — vandaar 'span + span': het tweede. Met ':last-child' gold dit ook voor een regel met één enkele span, en dat zijn juist de toelichtingen van een paar zinnen: die liepen dan als één lange regel de kaart uit in plaats van netjes af te breken. */ .summary .row span + span{white-space:nowrap} .summary .muted{color:var(--muted);font-size:.88rem} .warn{ grid-column:1/-1;background:#FCF2DF;border-left:3px solid var(--amber); padding:16px 20px;border-radius:var(--radius);font-size:.94rem; } .warn strong{color:var(--accent-dark)} /* De opties bij een aanvraag: aanvinkbare kaartjes, twee of drie per rij naargelang de breedte. Het hele kaartje is klikbaar, niet enkel het vierkantje. */ .opties{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px} .optie{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;background:#fff; border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;font-size:.93rem} .optie:hover{border-color:var(--accent)} .optie input{width:auto;margin:2px 0 0;padding:0;flex:0 0 auto} .optie .op-prijs{display:block;color:var(--muted);font-size:.84rem;margin-top:2px} .optie.aan{border-color:var(--accent);background:#F4F8FA} .check{grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;font-size:.92rem} .check input{margin-top:3px;flex:0 0 auto} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:44px} .step .num{ font-family:var(--serif);font-size:1.5rem;color:#F0BC63; border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:10px;margin-bottom:12px; } .step p{font-size:.93rem;color:rgba(255,255,255,.8);margin:0} /* ---------- faq ---------- */ .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px} /* ---------- footer ---------- */ footer{background:var(--ink);color:rgba(255,255,255,.68);padding:64px 0 34px;font-size:.92rem} footer h4{color:#fff;font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px} .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;margin-bottom:44px} footer a{color:rgba(255,255,255,.68);text-decoration:none} footer a:hover{color:#fff} footer ul{list-style:none;margin:0;padding:0} footer li{margin-bottom:9px} .licence{ border-top:1px solid rgba(255,255,255,.14);padding-top:24px; font-size:.8rem;color:rgba(255,255,255,.45);line-height:1.7; } .licence code{font-family:ui-monospace,monospace;font-size:.94em;word-break:break-all;color:rgba(255,255,255,.6)} /* ---------- legal pages ---------- */ .legal{max-width:760px;margin:0 auto;padding:64px 24px 90px} .legal h1{font-size:2.4rem;margin-bottom:.4em} .legal h2{font-size:1.4rem;margin-top:2em} .legal .todo{background:#FCF2DF;border-left:3px solid var(--amber);padding:16px 20px;border-radius:var(--radius);font-size:.94rem;margin-bottom:32px} .back{display:inline-block;margin-bottom:28px;font-size:.9rem;text-decoration:none} /* ---------- responsive ---------- */ @media(max-width:900px){ .facts-in{grid-template-columns:repeat(3,1fr)} .fact{border-bottom:1px solid rgba(255,255,255,.13)} .fact:nth-child(3n){border-right:0} .split,.faq-grid{grid-template-columns:1fr;gap:32px} .split.flip .txt{order:0} .incl,.cards,.reviews,.steps{grid-template-columns:1fr 1fr} .grid-g{grid-template-columns:1fr 1fr} } @media(max-width:640px){ body{font-size:16px} section{padding:56px 0} .nav-links{ display:none;position:absolute;top:66px;left:0;right:0;background:var(--paper); flex-direction:column;align-items:stretch;gap:0;padding:10px 24px 20px; border-bottom:1px solid var(--line); } .nav-links.open{display:flex} .nav-links a{padding:11px 0;border-bottom:1px solid var(--line)} .nav-links a.cta{text-align:center;margin-top:12px;border:0} .burger{display:block} .facts-in{grid-template-columns:repeat(2,1fr)} .incl,.cards,.reviews,.steps,.fields,.grid-g{grid-template-columns:1fr} .grid-g .ph:first-child{grid-column:span 1;grid-row:span 1} .form-card{padding:26px 22px} .foot-grid{grid-template-columns:1fr;gap:32px} .hero-in{padding-bottom:52px} /* Onder 16px zoomt iOS Safari in zodra een veld focus krijgt — dat werkt storend op een telefoon, dus blijft elk invoerveld op precies 16px. */ input,select,textarea{font-size:16px} .cal-head{gap:8px} .cal-head select{font-size:16px;padding:6px 6px;flex:1 1 auto;min-width:0} .cal-nav{width:38px;height:38px;flex:0 0 auto} /* De merknaam met slogan is breder dan een smal scherm aankan. Een flex-item krimpt niet onder zijn min-content breedte, en met white-space:nowrap is dat de volledige regel — daardoor werd de burgerknop ernaast uit beeld geduwd en, door overflow-x:clip op body, weggesneden in plaats van bereikbaar te blijven. Het menu was dan niet te openen. De merknaam mag dus krimpen en de slogan mag afbreken; de knop houdt hoe dan ook zijn plaats. */ .nav-in{gap:12px} .brand{min-width:0;white-space:normal} .brand b{font-size:1.12rem} .brand em{font-size:.55rem;letter-spacing:.05em;line-height:1.3} .burger{flex:0 0 auto;margin-left:auto} /* Een tabel met een kolom per seizoen wordt nooit smal genoeg; ze schuift binnen haar eigen kader (.tabel-scroll). Hier enkel de cellen wat compacter, zodat er meer van in beeld past voor er geschoven moet worden. */ table.rates th,table.rates td{padding:12px 14px;font-size:.92rem} table.rates td.price{font-size:1.1rem} /* Stond op een vaste minimumbreedte en liep daardoor op de smalste toestellen buiten het kader. De tekst mag gewoon meekrimpen. */ .month-box{padding:22px 20px;gap:18px} .month-box p{min-width:0} /* Een lange omschrijving met een bedrag ernaast past niet altijd op één regel; dan hoort het bedrag eronder te komen in plaats van de kaart uit te lopen. */ .summary{padding:18px 16px} .summary .row{flex-wrap:wrap;gap:2px 12px} /* Een knop over de volle breedte is met een duim makkelijker te raken dan een smal blokje, en het is ook wat men op een telefoon verwacht. Bewust enkel hier en in de hero: elders op de pagina staan knoppen in een tekstregel, waar volle breedte juist vreemd zou ogen. */ .form-card .btn{width:100%} .hero-actions{gap:10px} .hero-actions .btn{width:100%;text-align:center} } /* ---------- beschikbaarheidskalender ---------- */ .cal-wrap{background:var(--paper);border-radius:var(--radius);padding:26px 28px;margin-bottom:26px; box-shadow:0 22px 60px rgba(0,0,0,.22)} .cal-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;margin-bottom:18px} .cal-head strong{font-family:var(--serif);font-size:1.15rem;font-weight:500;text-transform:capitalize;min-width:190px;text-align:center} .cal-nav{background:0;border:1px solid var(--line);border-radius:var(--radius);width:34px;height:34px; cursor:pointer;font-size:1.1rem;color:var(--ink);line-height:1} .cal-nav:hover{border-color:var(--accent);color:var(--accent)} .cal-months{display:grid;grid-template-columns:1fr 1fr;gap:32px} .cal-mt{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted); text-align:center;margin-bottom:10px} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .cal-dow{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted); text-align:center;padding-bottom:6px} .cal-d{aspect-ratio:1;border:0;border-radius:3px;background:0;font-family:var(--sans);font-size:.86rem; cursor:pointer;color:var(--ink);transition:.12s} .cal-d.free{background:#EAF3EE;color:#1F5A3D} .cal-d.free:hover{background:var(--accent);color:#fff} .cal-d.busy{background:#F2E6E3;color:#A8756A;cursor:not-allowed;text-decoration:line-through} /* In optie: er ligt een voorstel bij iemand, maar er is nog niet getekend. Niet te boeken, maar ook geen verhuring. Het verschil met "bezet" zit niet in de kleur alleen — pastelkleuren lopen voor wie kleurenblind is door elkaar — maar in de schuine arcering. Bezet is doorstreept, in optie is gearceerd. */ .cal-d.optie{ color:#6E5106;cursor:not-allowed; background-color:#FBE3A6; background-image:repeating-linear-gradient(-45deg, rgba(110,81,6,.18) 0 2px, transparent 2px 5px); } /* Niet boekbaar: er past geen verblijf van het minimum aantal nachten in. Bewust neutraal grijs, zonder doorstreping — doorstreept leest als "vergeven" en dat hoeft het niet te zijn — en zonder arcering, want die staat voor "in optie". Het dagnummer haalt 4,5:1 tegen zijn achtergrond en blijft dus leesbaar. */ .cal-d.kort{background:#EDEBE7;color:#6F6A62;cursor:not-allowed} .cal-d.past{background:0;color:#C9C2B6;cursor:not-allowed} .cal-d.sel{background:var(--accent);color:#fff} .cal-d.edge{background:var(--deep);color:#fff;font-weight:600} .cal-legend{display:flex;gap:22px;justify-content:center;margin-top:18px;font-size:.83rem;color:var(--muted)} .cal-legend span{display:flex;align-items:center;gap:7px} .sw{width:13px;height:13px;border-radius:3px;display:inline-block} .sw.free{background:#EAF3EE;border:1px solid #C6DDD0} .sw.busy{background:#F2E6E3;border:1px solid #DEC5BE} .sw.optie{background-color:#FBE3A6;border:1px solid #E3C77E; background-image:repeating-linear-gradient(-45deg, rgba(110,81,6,.26) 0 2px, transparent 2px 5px)} .sw.kort{background:#EDEBE7;border:1px solid #D8D4CE} .sw.pick{background:var(--accent)} @media(max-width:760px){ .cal-months{grid-template-columns:1fr} .cal-wrap{padding:20px 16px} } .cal-head select{ font-family:var(--sans);font-size:.95rem;padding:6px 10px;border:1px solid var(--line); border-radius:var(--radius);background:#fff;color:var(--ink);cursor:pointer; } .cal-nav[disabled]{opacity:.3;cursor:default} .cal-busy{border-top:1px solid var(--line);margin-top:20px;padding-top:18px} .cal-busy h4{ font-family:var(--sans);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase; color:var(--muted);margin:0 0 10px; } .cal-busy ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .cal-busy button{ font-family:var(--sans);font-size:.87rem;background:#F2E6E3;color:#8A5B4E;border:0; border-radius:100px;padding:6px 15px;cursor:pointer;transition:.15s; } .cal-busy button:hover{background:#E4CFC9;color:#6E4437} /* Niet-boekbare periodes: neutraal, zoals in de kalender zelf. */ .cal-busy button.kort{background:#EDEBE7;color:#6F6A62} .cal-busy button.kort:hover{background:#E2DFD9;color:#57534C} /* Periodes in optie krijgen hun eigen kleur in de lijst eronder, met het woord erbij. */ .cal-busy button:has(.cal-optie){background:#FBE3A6;color:#6E5106} .cal-busy button:has(.cal-optie):hover{background:#F2D68C;color:#543E05} .cal-optie{font-style:normal;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase; margin-left:7px;opacity:.85} .cal-none{color:var(--muted);font-size:.9rem;margin:0}