/* ========================================================================== Vero Sahara Morocco — design system Primary : #0791BE (brand blue) Accent : #FF9900 (logo orange) ========================================================================== */ @import url("../fonts/fonts.css"); :root{ --blue:#0791BE; --blue-600:#05769B; --blue-700:#065C79; --blue-100:#CDEBF5; --blue-50:#E9F6FB; --orange:#FF9900; --orange-600:#E58700; --orange-50:#FFF4E3; --ink:#0C2434; --ink-2:#23415A; --muted:#65788A; --line:#E3EAEF; --line-2:#EEF3F6; --soft:#F5F9FB; --sand:#FCF7F0; --green:#12A150; --red:#E5484D; --star:#FFB020; --r-sm:10px; --r:14px; --r-lg:20px; --shadow-sm:0 2px 10px rgba(12,36,52,.06); --shadow:0 8px 28px rgba(12,36,52,.09); --shadow-lg:0 18px 48px rgba(12,36,52,.14); --wrap:1200px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:15px;line-height:1.6;color:var(--ink-2);background:#fff; -webkit-font-smoothing:antialiased; /* clip, not hidden: `hidden` turns into a scroll container and makes position:sticky (header, tab bar, booking card) fragile */ overflow-x:clip; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0;padding:0} h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-weight:800;line-height:1.18;letter-spacing:-.02em} p{margin:0 0 1em} p:last-child{margin-bottom:0} ul{margin:0;padding:0;list-style:none} /* the only inline , never nested in .header */ .drawer-backdrop{position:fixed;inset:0;background:rgba(12,36,52,.5);opacity:0;visibility:hidden;transition:.25s;z-index:80} .drawer{ position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:#fff;z-index:90; transform:translateX(100%);transition:transform .3s var(--ease),visibility .3s var(--ease); /* parked off-screen it still counted towards the page's scroll width, which only body{overflow-x:clip} was hiding; hidden also keeps it out of the tab order and away from screen readers */ visibility:hidden; display:flex;flex-direction:column;padding:20px 22px;overflow-y:auto; } body.drawer-open,body.search-open{overflow:hidden} body.drawer-open .drawer{transform:none;visibility:visible} body.drawer-open .drawer-backdrop{opacity:1;visibility:visible} .drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px} .drawer nav{display:flex;flex-direction:column;gap:2px;margin-bottom:22px} .drawer nav a{padding:13px 12px;border-radius:10px;font-weight:700;font-size:15px;color:var(--ink)} .drawer nav a:hover,.drawer nav a.is-active{background:var(--blue-50);color:var(--blue)} /* ========================================================================== HOME — hero ========================================================================== */ .hero{position:relative;background:linear-gradient(160deg,#FFF9F2 0%,#F4FAFD 58%,#EAF6FB 100%);overflow:hidden} .hero::after{ content:"";position:absolute;top:-70px;right:-90px;width:420px;height:420px;border-radius:50%; background:radial-gradient(circle at 30% 30%,rgba(255,153,0,.14),transparent 62%);pointer-events:none; } .hero-in{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.38fr);gap:48px;align-items:center; padding:60px 0 20px;position:relative;z-index:1; } .hero h1{font-size:46px;line-height:1.08;margin-bottom:18px} .hero h1 em{font-style:normal;color:var(--blue)} .hero-lead{font-size:16.5px;color:var(--muted);max-width:400px;margin-bottom:20px} .hero-script{font-size:30px;transform:rotate(-4deg);display:inline-block;margin-bottom:26px} .hero-usps{display:flex;gap:26px;flex-wrap:wrap} .usp{max-width:155px} .usp>i{color:var(--orange);margin-bottom:9px} .usp b{display:block;font-size:13.5px;color:var(--ink);font-weight:800} .usp span{font-size:12.5px;color:var(--muted);line-height:1.4;display:block} .hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .hero-card{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:.25s var(--ease);position:relative;display:flex;flex-direction:column} .hero-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .hero-card .ph{display:block;position:relative;aspect-ratio:4/3;overflow:hidden} .hero-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .hero-card:hover .ph img{transform:scale(1.06)} /* featured tours: brand-gradient ring, warm glow, star medallion, sheen on hover */ .hero-feat{min-width:0} .feat-head{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:12.5px;font-weight:800; letter-spacing:.09em;text-transform:uppercase;color:var(--ink)} .feat-head .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff; background:linear-gradient(135deg,var(--orange),#FFC061);box-shadow:0 4px 12px rgba(255,153,0,.35)} .feat-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#F4D7A8,transparent)} .hero-card{border:2px solid transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(145deg,var(--orange) 0%,#FFD699 38%,#9ED6EA 70%,var(--blue) 100%) border-box; box-shadow:0 12px 32px rgba(255,153,0,.16),0 4px 14px rgba(12,36,52,.06)} .hero-card:hover{box-shadow:0 22px 52px rgba(255,153,0,.26),0 8px 20px rgba(12,36,52,.08)} .hero-card .ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(12,36,52,.28),transparent 42%)} .hero-card .ph::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:1;pointer-events:none; background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);opacity:0} .hero-card:hover .ph::after{animation:feat-sheen .9s var(--ease)} @keyframes feat-sheen{0%{left:-60%;opacity:1}100%{left:120%;opacity:1}} .feat-star{position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border-radius:50%; display:grid;place-items:center;color:var(--orange);background:rgba(255,255,255,.92); box-shadow:0 4px 14px rgba(12,36,52,.18)} .hero-card .circle-btn{background:var(--orange);box-shadow:0 4px 14px rgba(255,153,0,.38)} @media (prefers-reduced-motion:reduce){.hero-card:hover .ph::after{animation:none}} .hero-card .bd{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1} .hero-card .price-row{margin-top:auto} .hero-card h3{font-size:16.5px;margin-bottom:7px} .meta-line{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-bottom:9px} .meta-line i{color:var(--orange)} .price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 14px;margin-top:14px;flex-wrap:wrap} .price small{display:block;font-size:11.5px;color:var(--muted);font-weight:600} .price b{font-size:19px;color:var(--ink);font-weight:800;letter-spacing:-.02em} .price b span{font-size:13px;font-weight:700;color:var(--muted)} /* ---- live search overlay ---- */ .search-panel{position:fixed;inset:0;z-index:100;background:rgba(12,36,52,.55); display:flex;align-items:flex-start;justify-content:center;padding:14vh 20px 20px; opacity:0;transition:opacity .18s var(--ease)} .search-panel[hidden]{display:none} .search-panel.on{opacity:1} .search-box{width:100%;max-width:660px;background:#fff;border-radius:var(--r-lg); box-shadow:var(--shadow-lg);overflow:hidden;transform:translateY(-8px); transition:transform .18s var(--ease)} .search-panel.on .search-box{transform:none} .search-in{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line-2)} .search-in>i{color:var(--blue)} .search-in input{flex:1;border:0;background:none;font-size:16.5px;font-weight:600;color:var(--ink);min-width:0} .search-in input:focus{outline:none} .search-in input::placeholder{color:var(--muted);font-weight:500} .search-in input::-webkit-search-cancel-button{display:none} .search-results{max-height:min(56vh,460px);overflow-y:auto;padding:8px} .search-results .hint{padding:22px 14px;text-align:center;font-size:13.5px;color:var(--muted)} .sr-item{display:flex;align-items:center;gap:13px;padding:10px 12px;border-radius:11px;transition:background .14s} .sr-item:hover,.sr-item.on{background:var(--blue-50)} .sr-item img{width:58px;height:44px;object-fit:cover;border-radius:8px;flex:none} .sr-item .tx{min-width:0;flex:1} .sr-item b{display:block;font-size:14px;color:var(--ink);font-weight:700;line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sr-item span{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-top:3px} .sr-item mark{background:var(--orange-50);color:var(--orange-600);padding:0 1px;border-radius:3px} .search-foot{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:10px 18px;border-top:1px solid var(--line-2);font-size:12px;color:var(--muted)} .search-foot kbd{background:var(--soft);border:1px solid var(--line);border-radius:5px; padding:1px 6px;font:inherit;font-size:11px} @media (max-width:680px){ .search-panel{padding:0} .search-box{max-width:none;height:100%;border-radius:0} .search-results{max-height:calc(100% - 120px)} } /* category strip */ .catstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:34px 0 8px} .cat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:10px 12px;position:relative;transition:.2s} .cat+.cat::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--line-2)} .cat .ic{width:58px;height:58px;border-radius:50%;background:var(--orange-50);color:var(--orange);display:grid;place-items:center;transition:.22s var(--ease)} .cat:hover .ic{background:var(--blue);color:#fff;transform:translateY(-4px)} .cat b{font-size:14px;color:var(--ink);font-weight:800} .cat span{font-size:12px;color:var(--muted)} /* ========================================================================== tour cards (shared) ========================================================================== */ .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .grid-1{display:grid;grid-template-columns:1fr;gap:18px} /* horizontal tour card: photo left, details right */ .card{ display:grid;grid-template-columns:210px minmax(0,1fr); background:#fff;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden; transition:.25s var(--ease); } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} /* the photo is taken out of flow so the text column drives the card height */ .card .ph{position:relative;min-height:196px;overflow:hidden;background:var(--soft)} .card .ph>a{position:absolute;inset:0;display:block} .card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .card:hover .ph img{transform:scale(1.06)} .card .bd{padding:16px 18px 18px;display:flex;flex-direction:column;min-width:0} .card h3{font-size:16.5px;margin-bottom:9px;line-height:1.3;transition:color .18s} .card:hover h3{color:var(--blue)} .card .desc{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.55} .card .price-row{margin-top:auto;padding-top:14px} .btn-sm{padding:10px 18px;font-size:13.5px} /* full-width listing rows: wider photo, shallower card */ .grid-1 .card{grid-template-columns:250px minmax(0,1fr)} .grid-1 .card .ph{min-height:178px} .facts{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--muted)} .facts span{display:flex;align-items:center;gap:5px} .facts i{color:var(--blue)} .wish{ position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center; box-shadow:var(--shadow-sm);transition:.2s; } .wish:hover,.wish.on{background:var(--orange);color:#fff} .dur-chip{position:absolute;left:10px;top:10px} /* ========================================================================== HOME — split / stats ========================================================================== */ .split{display:grid;grid-template-columns:.9fr 1.1fr;background:var(--sand);border-radius:var(--r-lg);overflow:hidden} .split .ph{position:relative;min-height:330px} .split .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .split .bd{padding:46px 44px;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center} .split h2{font-size:29px;margin-bottom:12px} .stats{display:flex;flex-direction:column;gap:20px} .stat{display:flex;align-items:center;gap:14px} .stat .ic{width:44px;height:44px;border-radius:12px;background:#fff;color:var(--blue);display:grid;place-items:center;flex:none;box-shadow:var(--shadow-sm)} .stat b{display:block;font-size:22px;color:var(--ink);line-height:1.1;font-weight:800} .stat span{font-size:12.5px;color:var(--muted)} /* why us */ .why{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center} .why-i{padding:8px 24px;position:relative} .why-i+.why-i::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line-2)} .why-i .ic{width:62px;height:62px;border-radius:50%;background:var(--blue-50);color:var(--blue);display:grid;place-items:center;margin:0 auto 14px;transition:.22s var(--ease)} .why-i:hover .ic{background:var(--blue);color:#fff;transform:translateY(-4px)} .why-i h3{font-size:16px;margin-bottom:7px} .why-i p{font-size:13px;color:var(--muted)} /* testimonials */ .rev{background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:22px;display:flex;flex-direction:column} .rev q{display:block;font-size:14px;color:var(--ink-2);line-height:1.6;margin-bottom:16px;flex:1} .rev-who{display:flex;align-items:center;gap:12px} .av{ width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center; font-weight:800;font-size:14px;color:#fff;background:var(--blue);letter-spacing:.02em; } .av.o{background:var(--orange)} .av.d{background:var(--ink)} .rev-who>div b{display:block;font-size:14px;color:var(--ink)} .rev-who>div span{font-size:12px;color:var(--muted)} .rev .stars{margin-top:12px} .score{text-align:right} .score .n{display:flex;align-items:center;justify-content:flex-end;gap:10px} .score b{font-size:30px;color:var(--ink);letter-spacing:-.02em;line-height:1} .score span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px} /* ========================================================================== footer ========================================================================== */ .footer{background:var(--soft);border-top:1px solid var(--line-2);padding:52px 0 0} .footer img.flogo{width:150px;margin-bottom:14px} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:36px} .footer p{font-size:13.5px;color:var(--muted)} .footer h4{font-size:14.5px;margin-bottom:16px;color:var(--ink)} .footer li{margin-bottom:10px} .footer li a{font-size:13.5px;color:var(--muted)} .footer li a:hover{color:var(--blue)} .fcontact li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted)} .fcontact>li>i{color:var(--blue);margin-top:3px} .socials{display:flex;gap:10px;margin-top:18px} .socials a{width:36px;height:36px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:.2s} .socials a:hover{background:var(--blue);color:#fff;transform:translateY(-2px)} .footer .atta{width:100%;max-width:250px;height:auto;margin-top:18px} .footer-bot{ margin-top:44px;border-top:1px solid var(--line);padding:20px 0; display:flex;align-items:center;justify-content:space-between;gap:16px; font-size:12.5px;color:var(--muted); } .foot-ta{display:inline-flex;align-items:center;gap:7px;color:var(--muted)} .foot-ta:hover{color:#00AA6C} /* ========================================================================== CATEGORY PAGE ========================================================================== */ .crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:16px 0;flex-wrap:wrap} .crumbs a:hover{color:var(--blue)} .crumbs .sep{opacity:.5} .crumbs .cur{color:var(--orange);font-weight:700} .phero{position:relative;background:linear-gradient(120deg,#FFF9F2 0%,#F3FAFD 60%,#E8F5FA 100%);overflow:hidden} .phero-in{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;padding:6px 0 34px} .phero h1{font-size:40px;margin-bottom:14px} .phero .lead{max-width:470px;margin-bottom:26px} .phero-media{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/8.4;box-shadow:var(--shadow)} .phero-media img{width:100%;height:100%;object-fit:cover} .phero-script{ position:absolute;right:22px;top:20px;text-align:right;font-size:27px;line-height:1.02; color:#fff;text-shadow:0 2px 14px rgba(12,36,52,.55); } .phero-script::after{content:"";display:block;width:74px;height:3px;background:var(--orange);border-radius:3px;margin:8px 0 0 auto} .feat-row{display:flex;gap:34px;flex-wrap:wrap} .feat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;width:104px} .feat>i{color:var(--blue)} .feat b{font-size:13px;color:var(--ink);font-weight:700;line-height:1.3} .cat-layout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:28px;align-items:start} .filters{border:1px solid var(--line-2);border-radius:var(--r);padding:20px;background:#fff;position:sticky;top:94px} .filters h3{font-size:16px;margin-bottom:6px} .fgroup{border-top:1px solid var(--line-2);padding:16px 0} .fgroup:first-of-type{border-top:0;padding-top:10px} .fgroup>summary{ display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none; font-size:14px;font-weight:800;color:var(--ink);margin-bottom:12px; } .fgroup>summary::-webkit-details-marker{display:none} .fgroup>summary i{transition:transform .2s;color:var(--muted)} .fgroup[open]>summary i{transform:rotate(180deg)} .check{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:13.5px;color:var(--ink-2)} .check input{ appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid var(--line); border-radius:5px;flex:none;display:grid;place-items:center;transition:.15s;margin:0; } .check input:checked{background:var(--blue);border-color:var(--blue)} .check input:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)} .check .n{margin-left:auto;font-size:12px;color:var(--muted)} .range{margin:14px 0 4px} .range input[type=range]{width:100%;accent-color:var(--blue)} .range-lab{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:600} .toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap} .toolbar h2{font-size:19px} .sel{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)} .sel select{border:1px solid var(--line);border-radius:9px;padding:9px 14px;background:#fff;font-size:13px;font-weight:600;color:var(--ink)} .pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:32px} .pager a{ min-width:38px;height:38px;padding:0 10px;border-radius:9px;border:1px solid var(--line); display:grid;place-items:center;font-size:13.5px;font-weight:700;color:var(--ink);background:#fff;transition:.18s; } .pager a:hover{border-color:var(--blue);color:var(--blue)} .pager a.on{background:var(--blue);border-color:var(--blue);color:#fff} .reassure{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--soft);border-radius:var(--r-lg);padding:30px 10px;text-align:center} .reassure .it{padding:6px 22px;position:relative} .reassure .it+.it::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)} .reassure i{color:var(--orange);margin-bottom:10px} .reassure b{display:block;font-size:14.5px;color:var(--ink);font-weight:800} .reassure span{font-size:12.5px;color:var(--muted)} .cta-band{position:relative;overflow:hidden;border-radius:var(--r-lg)} .cta-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cta-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,33,48,.88) 8%,rgba(9,33,48,.5) 72%)} .cta-in{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:46px} .cta-in h2{color:#fff;font-size:27px;margin-bottom:8px} .cta-in p{color:rgba(255,255,255,.82);font-size:14.5px;margin:0} .cta-full{border-radius:0} /* ========================================================================== SINGLE TOUR PAGE ========================================================================== */ .tour-head{position:relative;background:linear-gradient(130deg,#FFFAF3 0%,#F6FBFD 62%,#EDF7FB 100%);padding-bottom:26px} .tour-head-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:start} .tour-head h1{font-size:37px;margin:12px 0 8px} .tour-head .sub{font-size:16px;color:var(--muted);margin-bottom:16px} .tour-script{font-size:27px;text-align:right;line-height:1.04;padding-top:12px} .tour-script::after{content:"";display:block;width:74px;height:3px;background:var(--orange);border-radius:3px;margin:8px 0 0 auto} .tour-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)} .tour-meta span{display:flex;align-items:center;gap:7px} .tour-meta i{color:var(--orange)} .tour-meta i.div{width:1px;height:16px;background:var(--line);display:block} .tour-top{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start;padding-top:8px} .gal{display:grid;grid-template-columns:2.1fr 1fr;gap:12px} .gal .main{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3} .gal .main img{width:100%;height:100%;object-fit:cover} .gal .side{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;min-height:0} /* images are taken out of flow so the thumbnails never drive the row height — the stack always matches the height of the main photo */ .gal .side a{border-radius:var(--r);overflow:hidden;position:relative;min-height:0} .gal .side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)} .gal .side a:hover img{transform:scale(1.07)} .gal-nav{ position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow);transition:.2s; } .gal-nav:hover{background:var(--blue);color:#fff} .gal-nav.prev{left:14px} .gal-nav.next{right:14px} .gal-open{ position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px; padding:9px 15px;border-radius:999px;background:rgba(12,36,52,.72);color:#fff;font-size:12.5px;font-weight:700; } .gal .gal-extra{display:none} .gal .has-more::after{content:attr(data-more);position:absolute;inset:0;display:grid;place-items:center;background:rgba(12,36,52,.48);color:#fff;font-size:12.5px;font-weight:800;transition:background .2s} .gal .has-more:hover::after{background:rgba(7,145,190,.55)} .book{border:1px solid var(--line-2);border-radius:var(--r);background:#fff;padding:20px;box-shadow:var(--shadow);position:sticky;top:94px} .book-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px} .book-price small{display:block;font-size:12px;color:var(--muted);font-weight:600} .book-price b{font-size:28px;color:var(--ink);letter-spacing:-.025em;line-height:1.1;display:block} .book-price span{font-size:12.5px;color:var(--muted)} .field{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-bottom:10px;transition:.18s} .field:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(7,145,190,.12)} .field>i{color:var(--blue)} .field select,.field input{border:0;background:none;width:100%;font-size:13.5px;font-weight:600;color:var(--ink)} .field select:focus,.field input:focus{outline:none} .book .btn{margin:6px 0 14px} /* step 2 drops the price header, guarantees and payment marks so the card never grows taller than the gallery column beside it */ .book.compact .book-top,.book.compact .guarantee,.book.compact .pay{display:none} /* ---- two-step booking form ---- */ .steps{display:flex;gap:8px;margin:0 0 16px;counter-reset:s} .steps li{ display:flex;align-items:center;gap:7px;flex:1;font-size:12px;font-weight:800;color:var(--muted); padding-bottom:9px;border-bottom:2px solid var(--line);transition:.2s; } .steps li span{ width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none; background:var(--line);color:var(--muted);font-size:11px; } .steps li.on{color:var(--ink);border-bottom-color:var(--blue)} .steps li.on span{background:var(--blue);color:#fff} .steps li.done span{background:var(--green);color:#fff} .book-form .step{border:0;padding:0;margin:0;min-width:0} .book-form .step[hidden]{display:none} .field-note{align-items:flex-start} .field-note i{margin-top:3px} .field textarea{ border:0;background:none;width:100%;font-size:13.5px;font-weight:500;color:var(--ink); resize:vertical;min-height:58px;line-height:1.5; } .field textarea:focus{outline:none} .field textarea::placeholder,.field input::placeholder{color:var(--muted);font-weight:500} .recap{ display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--blue-50); border-radius:11px;padding:10px 13px;margin-bottom:14px;font-size:12.5px;color:var(--ink-2); } .recap span{display:flex;align-items:center;gap:7px} .recap i{color:var(--blue)} .recap b{color:var(--ink);font-weight:800} .recap button{margin-left:auto;font-size:12px;font-weight:800;color:var(--blue);text-decoration:underline} .recap button:hover{color:var(--orange)} .total{ display:flex;align-items:baseline;justify-content:space-between;gap:10px; margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line-2);font-size:13px;color:var(--muted); } .total b{font-size:21px;color:var(--ink);letter-spacing:-.02em} .err{ margin:0 0 10px;font-size:12.5px;font-weight:700;color:var(--red); background:#FEF3F3;border-radius:9px;padding:9px 12px; } .err[hidden]{display:none} .field.invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,72,77,.1)} .linkback{display:block;width:100%;text-align:center;font-size:13px;font-weight:700;color:var(--muted);padding:2px 0 4px} .linkback:hover{color:var(--blue)} .book-done{text-align:center;padding:18px 6px 10px} .book-done[hidden]{display:none} .book-done>i{font-size:40px;color:var(--green);margin-bottom:12px;display:block} .book-done b{display:block;font-size:17px;color:var(--ink);font-weight:800;margin-bottom:6px} .book-done p{font-size:13.5px;color:var(--muted);margin:0} .guarantee li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);padding:5px 0} .guarantee i{color:var(--green)} .pay{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2);flex-wrap:wrap} .pay .pl{height:26px;padding:0 9px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;font-size:10.5px;font-weight:800;color:var(--ink-2);background:#fff} .tour-top-main{min-width:0;display:flex;flex-direction:column} .highlights{ display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line-2); border-radius:var(--r);padding:20px 10px;margin-top:22px;text-align:center;background:#fff; } .highlights .it{padding:4px 9px;position:relative} .highlights .it+.it::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--line-2)} .highlights i{color:var(--orange);margin-bottom:8px;font-size:22px} .highlights b{display:block;font-size:12.5px;color:var(--ink);font-weight:800;line-height:1.25} .highlights span{font-size:11px;color:var(--muted);line-height:1.35;display:block;margin-top:3px} /* the tab bar sticks just under the sticky header (74px + its 1px border) */ .tabs-bar{ position:sticky;top:74px;z-index:40;background:#fff; border-bottom:1px solid var(--line-2);margin:34px 0 30px; } .tabs{display:flex;gap:8px;overflow-x:auto;padding:9px 0;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} /* anchors must clear the header + the tab bar when jumped to */ main [id]{scroll-margin-top:146px} .tabs a{padding:11px 22px;border-radius:999px;font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap;transition:.18s} .tabs a:hover{color:var(--blue)} .tabs a.on{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(7,145,190,.26)} .tour-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:34px;align-items:start} .tour-body h2{font-size:24px;margin-bottom:14px} .tour-body h3{font-size:19px;margin:34px 0 16px} .tour-body p{color:var(--muted);font-size:14.5px} .mapcard{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--sand)} .mapcard .m{ position:relative;height:214px; background:radial-gradient(circle at 22% 26%,rgba(7,145,190,.12),transparent 42%), radial-gradient(circle at 74% 76%,rgba(255,153,0,.14),transparent 46%),var(--sand); } .mapcard .m>svg{position:absolute;inset:0;width:100%;height:100%} .pin{position:absolute;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--ink)} .pin::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,153,0,.24);flex:none} .pin.b::before{background:var(--blue);box-shadow:0 0 0 4px rgba(7,145,190,.2)} .map-note{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center; font-size:11.5px;color:var(--muted);font-weight:700;background:rgba(255,255,255,.88); padding:5px 11px;border-radius:999px;white-space:nowrap; } /* real Google route map from the old site */ .mapcard .m-live{height:230px;padding:0;background:var(--soft)} .mapcard .m-live iframe{width:100%;height:100%;display:block;border:0} .mapcard .stops{padding:14px 16px 4px;background:#fff;border-top:1px solid var(--line-2)} .mapcard .stops li{ position:relative;padding:0 0 11px 20px;font-size:12.5px;color:var(--ink-2);font-weight:600;line-height:1.3; } .mapcard .stops li::before{ content:"";position:absolute;left:3px;top:4px;width:8px;height:8px;border-radius:50%; background:var(--orange);box-shadow:0 0 0 3px var(--orange-50); } .mapcard .stops li.start::before{background:var(--blue);box-shadow:0 0 0 3px var(--blue-50)} .mapcard .stops li:not(:last-child)::after{ content:"";position:absolute;left:6.5px;top:14px;bottom:1px;width:2px;background:var(--line); } /* day-by-day: accommodation and meal plan */ .tl-extra{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px!important} .tl-extra span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);font-weight:600} .tl-extra i{color:var(--blue)} /* collapsible include / exclude lists */ .incl-box ul.collapsed li.extra{display:none} .more-btn{ display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:7px 0; font-size:13px;font-weight:800;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px; } .incl-box.yes .more-btn{color:#0E7C3F} .incl-box.no .more-btn{color:#C0292E} .more-btn:hover{opacity:.75} .more-btn i{transition:transform .2s var(--ease)} .more-btn.open i{transform:rotate(180deg)} .mapcard .bd{padding:14px 16px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);border-top:1px solid var(--line-2);background:#fff} .mapcard .bd i{color:var(--blue)} /* ---- generic content page (About, Terms, Privacy) ---- */ .page-head{padding-bottom:34px} .page-head h1{font-size:38px;margin:6px 0 12px} .page-head .lead{max-width:640px} .page-body{max-width:780px} .page-body p{font-size:15px;color:var(--muted);line-height:1.72;margin-bottom:1.1em} .page-body .blk-h{font-size:19px;margin:34px 0 12px} .page-body .blk-h:first-child{margin-top:0} .page-body .blk-ul li{font-size:15px;line-height:1.7;padding-bottom:10px} .page-video{ position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden; margin:0 0 30px;background:var(--ink);box-shadow:var(--shadow); } .page-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} @media (max-width:680px){ .page-head h1{font-size:29px} } /* ---- Tripadvisor reviews block ---- */ .ta-score{display:block;text-align:right;flex:none} .ta-score .n{display:flex;align-items:center;justify-content:flex-end;gap:10px} .ta-score b{font-size:30px;color:var(--ink);letter-spacing:-.02em;line-height:1} .ta-score .src{display:flex;align-items:center;justify-content:flex-end;gap:7px; font-size:12.5px;color:var(--muted);margin-top:5px} .ta-score:hover .src{color:var(--blue)} .rev .stars{margin:0 0 10px} .rev-title{display:block;font-size:15px;color:var(--ink);font-weight:800;margin-bottom:8px;line-height:1.3} .rev q{quotes:none} .rev q.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden} .rev q.open{display:block;overflow:visible} .rev-more{margin:0 0 14px;font-size:12.5px;color:var(--blue)} .ta-foot{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap; margin-top:28px;font-size:13px;color:var(--muted)} .ta-foot a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px} .ta-foot i{color:#00AA6C} /* Tripadvisor owl — the glyph is missing from this Font Awesome build */ .fa-tripadvisor:before{content:""} .fa-tripadvisor{ display:inline-block;width:1em;height:1em;background:currentColor;vertical-align:-.125em; -webkit-mask:var(--ta-mask) center/contain no-repeat;mask:var(--ta-mask) center/contain no-repeat; } :root{ --ta-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 5.2c-2.4 0-4.6.6-6.4 1.7H1l1.9 2.1A5.4 5.4 0 0 0 6.6 18a5.4 5.4 0 0 0 4-1.8l1.4 1.6 1.4-1.6a5.4 5.4 0 0 0 4 1.8 5.4 5.4 0 0 0 3.7-9L23 6.9h-4.6A12.4 12.4 0 0 0 12 5.2zm-5.4 4a3.6 3.6 0 1 1 0 7.2 3.6 3.6 0 0 1 0-7.2zm10.8 0a3.6 3.6 0 1 1 0 7.2 3.6 3.6 0 0 1 0-7.2zM6.6 11a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6zm10.8 0a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z'/%3E%3C/svg%3E"); } /* ---- highlighted note at the top of a tour, above the description ---- */ .tour-note{ display:flex;gap:14px;align-items:flex-start; background:var(--orange-50);border:1px solid #FBE3BE;border-left:4px solid var(--orange); border-radius:var(--r);padding:16px 18px;margin:0 0 26px; } .tour-note .ic{ width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff; display:grid;place-items:center;flex:none;margin-top:1px; } .tour-note b{display:block;font-size:15px;color:var(--orange-600);font-weight:800;margin-bottom:5px;letter-spacing:-.01em} .tour-note p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0} @media (max-width:680px){ .tour-note{padding:14px;gap:11px} .tour-note .ic{width:30px;height:30px} } /* ---- "book a video meeting" card, under the map ---- */ .vmeet{ display:block;margin-top:20px;background:#fff;border:1px solid var(--line-2); border-radius:var(--r);overflow:hidden;transition:.25s var(--ease); } .vmeet:hover{box-shadow:var(--shadow);border-color:transparent;transform:translateY(-3px)} /* the artwork sits inset, with its own rounded corners */ .vmeet>img{ display:block;width:calc(100% - 20px);height:auto;margin:10px auto 0; border-radius:12px; } .vmeet .bd{display:block;padding:14px 18px 18px} .vmeet b{display:block;font-size:16px;color:var(--ink);font-weight:800;margin-bottom:7px;letter-spacing:-.01em} .vmeet .tx{display:block;font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:14px} .vmeet .btn{margin:0} .vmeet:hover .btn{background:var(--orange-600)} /* ---- structured text blocks coming from the source pages ---- */ .blk-h{ font-size:15.5px;font-weight:800;color:var(--ink);margin:22px 0 10px;letter-spacing:-.01em; } .tour-body p + .blk-h,.tour-body .blk-ul + .blk-h{margin-top:24px} .blk-ul{margin:0 0 14px;padding:0;list-style:none} .blk-ul li{position:relative;padding:0 0 8px 24px;font-size:14.5px;color:var(--muted);line-height:1.6} .blk-ul li::before{ content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--orange); } .blk-ol{margin:0 0 14px;padding-left:22px;list-style:decimal} .blk-ol li{font-size:14.5px;color:var(--muted);line-height:1.6;padding-bottom:6px} .blk-ol li::marker{color:var(--orange);font-weight:800} /* the client's inline bold must stay inline whatever component wraps it — a stray ".x b{display:block}" used to break sentences into stacked blocks */ .blk-ul li b,.blk-ol li b,.tour-body p b,.tl .c p b,.incl-box li b,.page-body p b{ display:inline;color:var(--ink);font-weight:700;font-size:inherit;margin:0;line-height:inherit; } .tour-body .blk-h + .blk-ul{margin-top:-2px} .tl .c .blk-ul{margin-top:8px} .tl .c .blk-ul li{font-size:13.5px;padding-bottom:6px} .tl .c .blk-h{font-size:14px;margin:12px 0 6px} .tour-notes{ margin-top:26px;padding:18px 20px;border-left:3px solid var(--line);background:var(--soft); border-radius:0 var(--r) var(--r) 0; } .tour-notes p{font-size:14px;color:var(--muted);margin-bottom:.8em} .timeline{position:relative} .tl{display:block;padding-bottom:26px;position:relative} .tl-head{display:grid;grid-template-columns:58px 44px minmax(0,1fr);gap:14px;align-items:start;list-style:none;cursor:pointer} .tl-head::-webkit-details-marker{display:none} .tl-title{display:block;font-size:15px;color:var(--ink);font-weight:800;padding-top:10px;line-height:1.3} .tl-chev{display:none} .tl .c{margin-left:116px} .tl:last-child{padding-bottom:0} .tl::before{content:"";position:absolute;left:93px;top:46px;bottom:-4px;width:2px;background:var(--line);border-radius:2px} .tl:last-child::before{display:none} .tl .t{font-size:13px;font-weight:800;color:var(--blue);padding-top:12px} .tl .ic{width:44px;height:44px;border-radius:50%;background:var(--orange-50);color:var(--orange);display:grid;place-items:center;position:relative;z-index:1} /* direct child only: inline inside the step text must stay inline */ .tl .c>b{display:block;font-size:15px;color:var(--ink);font-weight:800;margin:10px 0 4px} .tl .c p{font-size:13.5px;color:var(--muted);margin:0} .incl{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px;align-items:stretch} .incl-box{border-radius:var(--r);padding:20px;border:1px solid transparent} .incl-box.yes{background:#F1FAF4;border-color:#D6EFE0} .incl-box.no{background:#FEF3F3;border-color:#FADCDC} .incl-box h4{display:flex;align-items:center;gap:9px;font-size:15.5px;margin-bottom:14px} .incl-box.yes h4{color:#0E7C3F} .incl-box.no h4{color:#C0292E} .incl-box li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;padding:5px 0;color:var(--ink-2)} .incl-box.yes li>i{color:var(--green);margin-top:3px} .incl-box.no li>i{color:var(--red);margin-top:3px} /* ---------- responsive ---------- */ @media (max-width:1100px){ .hero-in{grid-template-columns:1fr;gap:34px;padding-top:40px} /* three cards squeezed to 244px on a tablet; a swipeable row starts as soon as the hero stops being two columns */ .hero-cards{ display:flex;gap:16px;max-width:none; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding-bottom:6px; } .hero-cards::-webkit-scrollbar{display:none} .hero-cards>.hero-card{flex:0 0 46%;scroll-snap-align:start} .hero h1{font-size:38px} .hero-lead{max-width:none} .split{grid-template-columns:1fr} .split .ph{min-height:240px} .split .bd{padding:32px 26px;grid-template-columns:1fr;gap:26px} .cat-layout{grid-template-columns:1fr} .filters{position:static} .tour-top{grid-template-columns:1fr} .book{position:static} .tour-body{grid-template-columns:1fr} .phero-in{grid-template-columns:1fr} } /* Between 1200 and 1400 the menu is tightened rather than allowed to overflow: the translated labels are longer than the English ones (Spanish widest). */ @media (max-width:1400px){ .header-in{gap:16px} .nav{gap:16px} .nav a{font-size:14px} .header-tools{gap:10px} .header-tools .btn{padding:10px 16px;font-size:13.5px} } /* Seven entries plus the button no longer fit in any language below 1200px: the drawer takes over there instead of pushing the page sideways. */ @media (max-width:1200px){ .nav{display:none} .burger{display:grid} } /* the call-to-action stays as long as there is room for it beside the burger */ @media (max-width:1080px){ .header-tools .btn{display:none} } @media (max-width:960px){ .grid-4{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr} .catstrip{grid-template-columns:repeat(3,1fr);row-gap:18px} .cat:nth-child(4)::before{display:none} .why{grid-template-columns:repeat(2,1fr);row-gap:28px} .why-i:nth-child(3)::before{display:none} .highlights{grid-template-columns:repeat(3,1fr);row-gap:20px} .highlights .it:nth-child(4)::before{display:none} .reassure{grid-template-columns:repeat(2,1fr);row-gap:24px} .reassure .it:nth-child(3)::before{display:none} .incl{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr 1fr;row-gap:32px} .cta-in{flex-direction:column;align-items:flex-start;padding:34px 28px} .tour-head-in{grid-template-columns:1fr} .tour-script{display:none} .phero-script{font-size:21px} } @media (max-width:680px){ .sec{padding:46px 0} .wrap{padding:0 18px} .hero h1{font-size:31px} .sec-title{font-size:24px} .grid-4,.grid-3{grid-template-columns:1fr} .card,.grid-1 .card{grid-template-columns:1fr} .card .ph,.grid-1 .card .ph{min-height:0;aspect-ratio:16/10} .catstrip{grid-template-columns:repeat(2,1fr)} .cat::before{display:none!important} .why{grid-template-columns:1fr} .why-i::before{display:none!important} .highlights{grid-template-columns:repeat(2,1fr)} .highlights .it::before{display:none!important} .reassure .it::before{display:none!important} .footer-grid{grid-template-columns:1fr 1fr} .footer-bot{flex-direction:column;text-align:center} .gal{grid-template-columns:1fr} .gal .side{grid-template-rows:none;grid-template-columns:repeat(3,1fr)} .gal .side a{aspect-ratio:1} .tl-head{grid-template-columns:52px 38px minmax(0,1fr);gap:10px} .tl .c{margin-left:100px} .tl::before{left:78px;top:40px} .tl .ic{width:38px;height:38px} .phero h1{font-size:30px} .tour-head h1{font-size:28px} .score{text-align:left} .score .n{justify-content:flex-start} .sec-head{flex-direction:column;align-items:flex-start;gap:14px} .cta-in h2{font-size:22px} } /* ============================================================ FAQ ======== */ /* Accordion on the home page and every category page. The markup is
so it still opens with JS off, and every answer stays in the DOM for crawlers and assistants to read whether or not it is expanded. */ .faq-sec .sec-head{margin-bottom:22px} /* two independent stacks, not one two-column grid: an open answer grows its own column and never leaves a hole beside it */ .faq-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start} .faq-col{display:grid;gap:10px;align-content:start} .faq-item{ border:1px solid var(--line);border-radius:var(--r);background:#fff; box-shadow:var(--shadow-sm);overflow:hidden; } .faq-item+.faq-item{margin:0} .faq-item>summary{ display:flex;align-items:center;gap:16px;justify-content:space-between; padding:16px 20px;cursor:pointer;list-style:none; font-weight:700;color:var(--ink);line-height:1.4; } .faq-item>summary::-webkit-details-marker{display:none} .faq-item>summary:hover{background:var(--blue-50)} .faq-item>summary .q{flex:1} .faq-item>summary i{ flex:none;color:var(--blue);transition:transform .18s ease; } .faq-item[open]>summary{background:var(--blue-50);border-bottom:1px solid var(--line-2)} .faq-item[open]>summary i{transform:rotate(180deg)} .faq-item .a{padding:16px 20px 18px} .faq-item .a p{margin:0;color:var(--ink-2)} /* ------------------------------------------- category filters (live) ---- */ .filters .fclear{margin-top:14px;justify-content:center} /* .btn sets an explicit display, which beats the UA rule behind the `hidden` attribute — without this the Clear button shows before anything is filtered */ .filters .fclear[hidden]{display:none} .btn-ghost{ background:#fff;border:1px solid var(--line);color:var(--ink-2);font-weight:600; } .btn-ghost:hover{background:var(--soft);border-color:var(--blue-100);color:var(--ink)} .no-hits{ margin:26px 0 0;padding:28px 20px;text-align:center;color:var(--muted); border:1px dashed var(--line);border-radius:var(--r);background:var(--soft); } .linkish{ background:none;border:0;padding:0;font:inherit;color:var(--blue); font-weight:700;cursor:pointer;text-decoration:underline; } .linkish:hover{color:var(--blue-700)} /* a hidden card must not keep its grid row */ .grid-1 [data-tour][hidden]{display:none} @media (max-width:980px){ .faq-cols{grid-template-columns:1fr} } @media (max-width:820px){ .faq-item>summary{padding:14px 16px;gap:12px} .faq-item .a{padding:14px 16px 16px} } /* ------------------------------------------ filters: mobile panel ------- */ /* Above 1100px the sidebar is a sidebar and the bar does not exist. Below it, the panel collapses behind one tap target — 22 filter rows pushed the first tour card off the screen entirely. */ .fbar,.fdone{display:none} .check-link{width:100%} .check-link:hover{color:var(--blue)} @media (max-width:1100px){ .filters{padding:0;overflow:hidden} .fbar{ display:flex;align-items:center;gap:12px;width:100%; padding:0 18px;min-height:56px; font-size:15px;font-weight:800;color:var(--ink);text-align:left; } .fbar>i:first-child{color:var(--blue)} .fbar-t{flex:1} .fbar-n{ display:grid;place-items:center;min-width:22px;height:22px;padding:0 7px; border-radius:999px;background:var(--blue);color:#fff;font-size:12px;font-weight:800; } .fbar-n[hidden]{display:none} .fbar-c{transition:transform .2s var(--ease);color:var(--muted)} .filters.is-open .fbar-c{transform:rotate(180deg)} .filters.is-open .fbar{border-bottom:1px solid var(--line-2)} .fbody{display:none;padding:6px 18px 18px} .filters.is-open .fbody{display:block} .fbody>h3{display:none} /* the bar already carries the title */ /* 44px tap targets, not 30 */ .check{padding:11px 0;font-size:14.5px;min-height:44px} .check input{width:20px;height:20px} .fgroup{padding:14px 0} .fgroup>summary{margin-bottom:4px;min-height:32px;font-size:14.5px} /* the duration list runs to a dozen rows — two columns halves the scroll */ .fg-items.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .fdone{display:flex;margin-top:14px} .filters .fclear{margin-top:12px} } @media (max-width:360px){ .fg-items.cols{grid-template-columns:1fr} } /* ------------------------------------------ tour header on a phone ------ */ /* The head repeated itself three times over: the tour name in the breadcrumb, the category as a badge, then the same name again as the
. On a 400px screen that pushed the gallery below the fold. */ .crumb-cur{display:contents} @media (max-width:680px){ .tour-head .crumbs{padding:12px 0} .tour-head .crumb-cur{display:none} /* the
below says it already */ .tour-head .badge-soft{display:none} /* so does the breadcrumb, one line up */ .tour-head h1{font-size:25px;margin:6px 0 8px} .tour-head .sub{font-size:15px;margin-bottom:12px} .tour-meta{gap:12px;font-size:13px} .tour-meta i.div{height:13px} } /* --------------------------------------- itinerary on a phone ----------- */ /* One column of 250px turned each day into a wall of text. Below 820px every day becomes a card you tap open; the text stays in the DOM either way. */ @media (max-width:820px){ .timeline{display:grid;gap:10px} .tl{ padding:0;border:1px solid var(--line);border-radius:var(--r); background:#fff;box-shadow:var(--shadow-sm);overflow:hidden; } .tl::before,.tl .ic{display:none} /* no connecting line between cards */ .tl-head{ display:block;position:relative;padding:13px 46px 14px 16px;min-height:56px; } .tl .t{ display:inline-block;padding:3px 10px;margin-bottom:7px;border-radius:999px; background:var(--blue-50);color:var(--blue);font-size:11.5px; } .tl-title{padding-top:0;font-size:14.5px} .tl-chev{ display:block;position:absolute;right:16px;top:22px;color:var(--muted); transition:transform .2s var(--ease); } .tl[open] .tl-chev{transform:rotate(180deg)} .tl[open] .tl-head{background:var(--blue-50);border-bottom:1px solid var(--line-2)} .tl .c{margin-left:0;padding:14px 16px 16px} .tl .c .blk-ul li,.tl .c p{font-size:14px} } /* ---------------------------------- narrow-screen overflow fixes -------- */ /* Grid items default to min-width:auto, so an unbreakable string sets the track width. "info@verosaharamorocco.com" was forcing the footer columns past the viewport; only body{overflow-x:clip} kept it from scrolling, which meant the last column was silently cut off instead. */ .footer-grid>*{min-width:0} .fcontact li{overflow-wrap:anywhere} /* the tab strip scrolls, but nothing said so — fade the right edge while there is more to reach */ .tabs{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)} @media (min-width:821px){ .tabs{-webkit-mask-image:none;mask-image:none} } @media (max-width:560px){ .footer-grid{grid-template-columns:1fr;row-gap:28px} } /* ---------------------------------------- home hero on a phone ---------- */ /* Three USPs at max-width:155px fit two per row on a 393px screen, so the third sat alone and centred. Three equal columns remove the orphan and are far shorter than stacking them: 232px of hero back. */ @media (max-width:680px){ .hero-in{padding-top:28px;gap:24px} .hero .eyebrow{letter-spacing:.1em;margin-bottom:10px} .hero-lead{font-size:15.5px;margin-bottom:14px} .hero-script{font-size:26px;margin-bottom:18px} .hero-usps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .usp{max-width:none} .usp>i{margin-bottom:6px;font-size:19px} /* balance keeps "Our team is here for / you" from orphaning its last word */ .usp b{font-size:12.5px;line-height:1.25;text-wrap:balance} .usp span{font-size:11.5px;line-height:1.3;text-wrap:balance} /* one card at a time on a phone, with the next one peeking */ .hero-cards{gap:14px} .hero-cards>.hero-card{flex:0 0 80%} } /* ------------------------------- home: one swipeable row per category --- */ /* Four stacked cards made each section three screens tall. Below 1100px the row scrolls sideways instead, with the next card peeking so it reads as swipeable. The grid is kept on desktop, where all four fit at once. */ @media (max-width:1100px){ .hrow{ display:flex;gap:16px; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding-bottom:6px; } .hrow::-webkit-scrollbar{display:none} .hrow>.card{flex:0 0 72%;scroll-snap-align:start} } @media (max-width:680px){ .hrow>.card{flex:0 0 84%} } /* ------------------------------------------- language switcher ---------- */ .lang-wrap{position:relative} .lang-menu{ position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:186px; background:#fff;border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);padding:6px; } .lang-menu[hidden]{display:none} .lang-menu a{ display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px; font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap; } .lang-menu a:hover{background:var(--blue-50);color:var(--blue)} .lang-menu a.on{background:var(--blue-50);color:var(--blue);font-weight:800} .lang-menu .c{ font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--muted); border:1px solid var(--line);border-radius:5px;padding:2px 5px;min-width:28px;text-align:center; } .lang-menu a.on .c{border-color:var(--blue);color:var(--blue)} /* in the drawer the five fit on one row, so no dropdown is needed */ .drawer-lang{display:flex;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)} .drawer-lang a{ flex:1;text-align:center;padding:9px 0;border-radius:9px;border:1px solid var(--line); font-size:12.5px;font-weight:800;color:var(--ink-2); } .drawer-lang a.on{background:var(--blue);border-color:var(--blue);color:#fff} /* a translated review says so, so nobody is quoted in a language they did not write */ .rev-tr{ display:flex;align-items:center;gap:6px;margin:10px 0 0; font-size:11.5px;color:var(--muted);font-style:italic; } .rev-tr i{color:var(--blue);font-style:normal} /* ========================================================================== BLOG — list (/blog) and post (/blog/) ========================================================================== */ .post-date{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin:0} .post-date i{color:var(--blue)} .page-head .post-date{margin-top:2px} /* list: vertical cards, three across */ .post-card{ display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2); border-radius:var(--r);overflow:hidden;transition:.25s var(--ease);min-width:0; } .post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} .post-card .ph{display:block;aspect-ratio:1200/630;overflow:hidden;background:var(--soft)} .post-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .post-card:hover .ph img{transform:scale(1.05)} .post-card .bd{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;flex:1} .post-card h2{font-size:17px;line-height:1.3;transition:color .18s} .post-card:hover h2{color:var(--blue)} /* the WordPress excerpt is kept whole in the markup; only its display is clamped */ .post-card .desc{ font-size:13px;color:var(--muted);line-height:1.55;margin:0; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden; } .post-card .more{ margin-top:auto;padding-top:4px;display:inline-flex;align-items:center;gap:7px; font-size:13.5px;font-weight:700;color:var(--blue); } .post-card .more:hover{color:var(--blue-600)} /* post */ .post-sec{padding-top:40px} .post-img{margin:0 0 30px;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:1200/630;background:var(--soft)} .post-img img{width:100%;height:100%;object-fit:cover} .post-body h2.blk-h{font-size:21px;margin:36px 0 12px} .post-body .blk-ol li{font-size:15px;line-height:1.7} .post-body li i,.post-body p i{font-style:italic} .post-body p a,.post-body li a,.post-body td a{color:var(--blue);text-decoration:underline;text-underline-offset:2px} .post-body p a:hover,.post-body li a:hover,.post-body td a:hover{color:var(--blue-600)} .post-back{margin-top:34px} .page-head h1 + .post-date{margin-top:-2px} /* article header: a compact title, the photo comes up sooner */ .post-head{padding-bottom:20px} .post-head .crumbs{padding:14px 0 6px} .post-head h1{font-size:30px;line-height:1.2;margin:2px 0 0} .post-head + .post-sec{padding-top:26px} .post-head + .post-sec .post-img{margin-bottom:22px} @media (max-width:680px){ .post-head{padding-bottom:16px} .post-head .crumbs{padding:10px 0 4px} .post-head .crumbs .cur,.post-head .crumbs .sep-last{display:none} /* repeats the title just below */ .post-head h1{font-size:23px} .post-head + .post-sec{padding-top:18px} .post-head + .post-sec .post-img{margin-bottom:18px} } /* tables carried over from the WordPress posts */ .blk-table-wrap{margin:6px 0 22px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-sm)} .blk-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;min-width:520px} .blk-table th,.blk-table td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2)} .blk-table th{background:var(--soft);color:var(--ink);font-weight:800} .blk-table td{color:var(--muted)} .blk-table td b{color:var(--ink);font-weight:700} .blk-table tbody tr:last-child td{border-bottom:0} @media (max-width:680px){ .post-body h2.blk-h{font-size:19px} .post-sec{padding-top:28px} } @media (max-width:960px) and (min-width:681px){ .post-grid{grid-template-columns:repeat(2,1fr)} } /* post written in the admin's rich-text editor: the elements the block renderer never produced (h3/h4, quote, image, rule, alignment) */ .post-body h3{font-size:18px;margin:30px 0 10px} .post-body h4{font-size:16px;margin:24px 0 8px} .post-body strong{color:var(--ink);font-weight:700} .post-body em{font-style:italic} .post-body li strong,.post-body td strong{color:var(--ink)} .post-body li>ul,.post-body li>ol{margin:8px 0 0} .post-body blockquote{ margin:6px 0 22px;padding:14px 20px;border-left:3px solid var(--orange);background:var(--sand); border-radius:0 var(--r-sm) var(--r-sm) 0; } .post-body blockquote p{color:var(--ink-2);margin-bottom:.6em} .post-body blockquote p:last-child{margin-bottom:0} .post-body hr{border:0;border-top:1px solid var(--line);margin:30px 0} .post-body p>img,.post-body figure>img,.post-body li>img{ display:inline-block;max-width:100%;height:auto;border-radius:var(--r-sm);vertical-align:middle; } .post-body figure{margin:6px 0 22px} .post-body figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center} .post-body [style*="text-align: center"] img{margin-inline:auto} .post-body sup,.post-body sub{font-size:.75em;line-height:0} /* post + related tours: a right column on desktop, after the text on a phone */ .post-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start} .post-layout>.post-body{max-width:none;min-width:0} .post-side{position:sticky;top:94px;min-width:0} .post-side.is-long{position:static} .post-side .feat-head{margin-bottom:14px} .side-tours{display:grid;gap:14px} .side-tour{ display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:start; background:#fff;border:1px solid var(--line-2);border-radius:var(--r);padding:10px; transition:.25s var(--ease); } .side-tour:hover{box-shadow:var(--shadow);border-color:transparent;transform:translateY(-3px)} .side-tour .ph{display:block;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;background:var(--soft)} .side-tour .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .side-tour:hover .ph img{transform:scale(1.06)} .side-tour .bd{min-width:0;padding-top:2px} .side-tour h3{font-size:14.5px;line-height:1.3;margin-bottom:7px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .side-tour h3 a:hover{color:var(--blue)} .side-tour .meta-line{font-size:12px;margin-bottom:4px} .side-tour .more{display:inline-flex;align-items:center;gap:6px;margin-top:4px; font-size:12.5px;font-weight:700;color:var(--blue)} .side-tour .more:hover{color:var(--blue-600)} @media (max-width:1000px){ .post-layout{grid-template-columns:minmax(0,1fr);gap:34px} .post-side{position:static} .side-tours{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} } /* ========================================================================== Contact page — the form (includes/contact_form.php) next to the ways to reach us. Reuses .field / .err / .book-done from the booking card, so the two forms of the site look and behave the same. ========================================================================== */ .contact-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:36px;align-items:start} .contact-form,.contact-side{ background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg); box-shadow:var(--shadow-sm);min-width:0; } .contact-form{padding:30px 30px 34px} .contact-form .eyebrow{margin-bottom:8px} .contact-form .sec-title{font-size:25px} .contact-form .sec-sub{font-size:14.5px;margin-bottom:22px;max-width:none} /* the block the script hides once the message is away: [hidden] alone is enough only while nothing else sets a display on it */ .contact-form [data-cf-body][hidden]{display:none} .cf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px} .contact-form .field-note{margin-bottom:14px} .contact-form .field-note textarea{min-height:132px} .contact-form .field select{cursor:pointer} .contact-form>[data-cf-body]>.btn{margin-top:4px} .contact-side{padding:26px 26px 28px} .contact-side h2{font-size:19px;margin-bottom:18px} .cs-list{display:grid;gap:17px;margin-bottom:22px} .cs-list li{display:flex;gap:13px;align-items:flex-start} .cs-list li>i{color:var(--blue);flex:none;width:22px;text-align:center;margin-top:3px} .cs-list span{display:block;min-width:0;font-size:14.5px;line-height:1.55;color:var(--ink-2);overflow-wrap:break-word} .cs-list b{ display:block;font-size:11.5px;font-weight:800;letter-spacing:.07em; text-transform:uppercase;color:var(--muted);margin-bottom:2px; } .cs-list a{font-weight:700;color:var(--ink)} .cs-list a:hover{color:var(--blue)} @media (max-width:980px){ .contact-grid{grid-template-columns:minmax(0,1fr);gap:22px} } @media (max-width:620px){ .cf-row{grid-template-columns:minmax(0,1fr)} .contact-form{padding:22px 18px 26px} .contact-side{padding:22px 18px 24px} .contact-form .sec-title{font-size:22px} } /* ---------------------------------------- floating WhatsApp button -------- */ /* Sits under the drawer (90) and the search overlay (100) so it never floats on top of them, and above the page. */ .wa-fab{ position:fixed;right:20px;bottom:20px;z-index:50; display:flex;align-items:center;gap:0; width:56px;height:56px;padding:0;border-radius:999px; background:#25D366;color:#fff;overflow:hidden; box-shadow:0 8px 22px rgba(37,211,102,.42),0 2px 8px rgba(12,36,52,.16); transition:width .25s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease); } .wa-fab i{width:56px;flex:none;text-align:center;line-height:56px} .wa-fab-tip{ white-space:nowrap;font-size:14px;font-weight:700;opacity:0; padding-right:20px;transition:opacity .2s var(--ease); } .wa-fab:hover,.wa-fab:focus-visible{ color:#fff;transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,211,102,.5),0 3px 10px rgba(12,36,52,.2); } /* the label unrolls on a pointer; on a touch screen the circle stays a circle */ @media (hover:hover) and (min-width:681px){ .wa-fab:hover,.wa-fab:focus-visible{width:auto} .wa-fab:hover .wa-fab-tip,.wa-fab:focus-visible .wa-fab-tip{opacity:1} } @media (max-width:680px){ .wa-fab{right:16px;bottom:16px;width:52px;height:52px} .wa-fab i{width:52px;line-height:52px} .wa-fab-tip{display:none} } /* out of the way while the menu or the search is open */ body.drawer-open .wa-fab,body.search-open .wa-fab{opacity:0;visibility:hidden;transition:none} @media (prefers-reduced-motion:reduce){ .wa-fab{transition:none} .wa-fab:hover,.wa-fab:focus-visible{transform:none} }