/* Theme Name: Travel Addo Theme URI: https://traveladdogroup.com Description: Travel Addo Group child theme for Hello Elementor. Carries the site design system (colour tokens, typography, components) so it can be changed in one place rather than inside every Elementor HTML widget. Author: Design Lunatics Author URI: https://designlunatics.co.za Template: hello-elementor Version: 1.0.0 Text Domain: travel-addo */ /* ========================================================================== Travel Addo — design system Everything below is shared across every page and every Elementor HTML widget. Change a token here and it updates sitewide. ========================================================================== */ /* --- keep Hello Elementor out of the way of our own layout --- */ .page-content > .entry-content, .site-main{max-width:none;padding:0;margin:0} .site-header,.site-footer{display:none} body{margin:0} .elementor-widget-html{line-height:inherit} :root{ --f:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --bg:#FFFFFF; --wash:#F8F5F1; --wash2:#F0EAE2; --dark:#16201B; --dark2:#1E2A24; --ink:#1A211D; --body:#5E6A63; --body-l:#8C948D; --brand:#84604C; --brand-l:#A6826B; --cta:#84604C; --cta-d:#6E4F3E; --amber:#D89A6A; --green:#3F6B4A; --gold:#C9A227; --line:#EAE4DB; --line-s:#F2EDE6; --mx:1240px; --r:14px; --r-s:9px; --sh:0 1px 2px rgba(22,32,27,.04),0 14px 34px rgba(22,32,27,.07); --sh-h:0 2px 6px rgba(22,32,27,.06),0 24px 54px rgba(22,32,27,.13); --sh-l:0 4px 14px rgba(22,32,27,.07),0 34px 80px rgba(22,32,27,.18); --e:cubic-bezier(.22,1,.36,1); } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--f);background:var(--bg);color:var(--body);font-size:16px;line-height:1.72;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} .w{max-width:var(--mx);margin:0 auto;padding:0 22px} h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:500;line-height:1.14;letter-spacing:-.03em} h1{font-size:clamp(36px,5.1vw,62px);font-weight:300;letter-spacing:-.039em;line-height:1.05} h2{font-size:clamp(27px,3.3vw,41px);letter-spacing:-.033em} h3{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.022em;font-weight:600} p{margin:0 0 1em} .sec{padding:clamp(58px,7vw,100px) 0;position:relative} .wash{background:var(--wash)} .dark{background:var(--dark);color:rgba(255,255,255,.64)} .dark h1,.dark h2,.dark h3,.dark h4{color:#fff} /* eyebrow — hairline + label, no icon */ .eb{display:flex;align-items:center;gap:11px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin:0 0 15px} .eb:before{content:"";width:22px;height:1px;background:var(--brand-l);flex:0 0 22px} .dark .eb{color:#D9A87E}.dark .eb:before{background:#D9A87E;opacity:.6} .lede{font-size:16px;color:var(--body);max-width:58ch} .dark .lede{color:rgba(255,255,255,.6)} .hd{margin-bottom:clamp(28px,3.4vw,44px)} .hd.row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between} .hd .lede{margin:12px 0 0} /* brand frieze */ .frieze{-webkit-mask-image:var(--fz);mask-image:var(--fz);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center} /* reveal */ .rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--e),transform .8s var(--e)} .rv.in{opacity:1;transform:none} .d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}.d4{transition-delay:.24s} @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f);font-size:14.5px;font-weight:500;padding:13px 24px;border:1px solid transparent;border-radius:var(--r-s);cursor:pointer;transition:.28s var(--e);white-space:nowrap} .b-cta{background:var(--cta);color:#fff;box-shadow:0 6px 16px -6px rgba(222,94,44,.6)} .b-cta:hover{background:var(--cta-d);transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(222,94,44,.7)} .b-dark{background:var(--ink);color:#fff} .b-dark:hover{background:#000;transform:translateY(-1px)} .b-out{border-color:var(--line);color:var(--ink);background:#fff} .b-out:hover{border-color:var(--ink)} .b-outw{border-color:rgba(255,255,255,.26);color:#fff} .b-outw:hover{background:rgba(255,255,255,.09);border-color:#fff} .b-light{background:#fff;color:var(--ink)} .b-light:hover{background:var(--wash);transform:translateY(-1px)} .b-wa{background:#25D366;color:#fff}.b-wa:hover{background:#1da851} .b-sm{padding:10px 18px;font-size:13.5px} .b-full{width:100%} .lk{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--cta)} .lk .ax{width:16px;height:1px;background:currentColor;position:relative;transition:width .35s var(--e)} .lk .ax:after{content:"";position:absolute;right:0;top:-2.5px;width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)} .lk:hover .ax{width:26px} /* header */ header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.93);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.35s} header.stuck{border-bottom-color:var(--line);box-shadow:0 1px 16px rgba(22,32,27,.05)} header .w{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:13px;padding-bottom:13px} .brand{display:flex;align-items:center;gap:11px} .brand img{height:40px} .brand b{font-size:17px;font-weight:600;color:var(--ink);display:block;line-height:1.1;letter-spacing:-.025em} .brand i{font-style:normal;font-size:9.5px;font-weight:500;color:var(--brand);display:block;letter-spacing:.14em;text-transform:uppercase} nav.m{display:none;gap:27px} nav.m a{font-size:14.5px;color:var(--body);transition:.25s;position:relative;padding:2px 0} nav.m a:after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--cta);transition:width .3s var(--e)} nav.m a:hover{color:var(--ink)}nav.m a:hover:after{width:100%} .hc{display:none;gap:9px} .brg{width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:var(--r-s);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer} .brg span{width:16px;height:1.5px;background:var(--ink);border-radius:2px} /* ===== HERO ===== */ .hero{position:relative;background:var(--dark);overflow:hidden;padding:clamp(52px,7vw,104px) 0 clamp(60px,7.4vw,112px)} .hero-bg{position:absolute;inset:0} .hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s var(--e)} .hero-bg img.on{opacity:1} .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(101deg,rgba(18,26,22,.95) 0%,rgba(18,26,22,.82) 40%,rgba(18,26,22,.44) 70%,rgba(18,26,22,.72) 100%)} .hz{position:absolute;right:-4%;bottom:-6%;width:min(680px,60%);height:44%;background:rgba(255,255,255,.055);z-index:2;pointer-events:none} .hero .w{position:relative;z-index:3} .hgrid{display:grid;grid-template-columns:1fr;gap:clamp(28px,3.6vw,48px);align-items:center} .hero h1{color:#fff;font-size:clamp(38px,5.6vw,70px)} .hero h1 em{font-style:normal;font-weight:500;color:#EFA06F} .hsub{color:rgba(255,255,255,.72);font-size:17px;max-width:40ch;margin:20px 0 30px} /* rating row — real brand slot */ .hrate{padding-top:28px;margin-top:6px;border-top:1px solid rgba(255,255,255,.14)} .ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-right:3px} .ico svg{display:block;width:15px;height:15px} /* logo slot — a designed reserved area, not a placeholder box */ .lgslot{display:inline-flex;align-items:center;gap:7px;height:27px;padding:0 11px 0 9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:6px;font-size:12.5px;font-weight:600;color:#fff;letter-spacing:-.012em} .lgslot svg{flex:0 0 auto;opacity:.95} /* review badges — brand mark + stars + score */ .rbadges{display:flex;gap:11px;flex-wrap:wrap} .rbadge{display:inline-flex;align-items:center;gap:12px;padding:9px 18px 9px 9px;border-radius:13px;background:rgba(10,16,13,.55);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px);transition:.3s var(--e)} .rbadge:hover{background:rgba(10,16,13,.72);border-color:rgba(255,255,255,.3);transform:translateY(-2px)} .rbadge .mk{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 36px;box-shadow:0 2px 8px rgba(0,0,0,.2)} .rbadge .mk.fb{background:#1877F2} .rbadge .mk.tr{background:#34E0A1} .rbadge .bt{display:flex;flex-direction:column;gap:3px;line-height:1} .rbadge .st{color:#F5B93D;font-size:12.5px;letter-spacing:1.6px;line-height:1} .rbadge .vl{font-size:13px;color:rgba(255,255,255,.62);line-height:1;white-space:nowrap} .rbadge .vl b{color:#fff;font-weight:600;font-size:14px} /* light variant for the reviews section */ .rbadge.lt{background:#fff;border-color:var(--line);box-shadow:var(--sh)} .rbadge.lt:hover{background:#fff;border-color:var(--line)} .rbadge.lt .vl{color:var(--body-l)} .rbadge.lt .vl b{color:var(--ink)} .rbadge.lt .mk{box-shadow:0 1px 4px rgba(0,0,0,.12);border:1px solid var(--line-s)} .lgslot.d{background:var(--wash);border-color:var(--line);color:var(--ink)} .soc{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:.28s var(--e);flex:0 0 42px} .soc:hover{transform:translateY(-3px);box-shadow:0 8px 20px -6px rgba(22,32,27,.42)} .soc.ig{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)} .soc.fb{background:#1877F2} .soc.tt{background:#111} .vdiv{width:1px;height:30px;background:rgba(255,255,255,.16)} @media(min-width:1000px){.hgrid{grid-template-columns:1fr 412px;gap:56px}} /* booking widget — visual picker */ .bw{background:#fff;border-radius:var(--r);box-shadow:var(--sh-l);overflow:hidden} .bw-t{display:grid;grid-template-columns:1fr 1fr;background:#FBF9F6;border-bottom:1px solid var(--line)} .bw-t button{background:none;border:0;border-bottom:2px solid transparent;font-family:var(--f);font-size:14px;font-weight:500;color:var(--body);padding:15px 8px;cursor:pointer;transition:.26s} .bw-t button.on{background:#fff;color:var(--ink);border-bottom-color:var(--cta);font-weight:600} .bw-b{padding:18px} .bw-h{font-size:12.5px;color:var(--body-l);margin:0 0 14px;display:flex;align-items:center;justify-content:space-between;gap:10px} .opt{display:flex;align-items:center;gap:12px;padding:9px;border:1px solid transparent;border-radius:var(--r-s);cursor:pointer;transition:.24s var(--e);margin-bottom:4px} .opt:hover{background:#FBF9F6} .opt.on{border-color:var(--cta);background:#FEF7F3} .opt img{width:52px;height:44px;object-fit:cover;border-radius:6px;flex:0 0 52px} .opt .ot{flex:1;min-width:0} .opt b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3;letter-spacing:-.01em} .opt span{display:block;font-size:11.5px;color:var(--body-l);margin-top:1px} .opt .rd{width:16px;height:16px;border:1.5px solid var(--line);border-radius:50%;flex:0 0 16px;position:relative;transition:.24s} .opt.on .rd{border-color:var(--cta)} .opt.on .rd:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--cta)} .bw-scroll{max-height:268px;overflow-y:auto;margin:0 -4px 16px;padding:0 4px} #actList{max-height:238px} .bw-scroll::-webkit-scrollbar{width:4px} .bw-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px} .bw-note{font-size:11.5px;color:var(--body-l);text-align:center;margin:12px 0 0;display:flex;align-items:center;justify-content:center;gap:7px} /* included bar — typographic, no icons */ .incl{background:var(--dark);position:relative;overflow:hidden} .incl .fzb{position:absolute;right:-5%;top:6%;width:min(660px,52%);height:88%;background:rgba(255,255,255,.045);pointer-events:none} .incl .w{position:relative;z-index:2;padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(44px,5vw,72px)} .inclhd{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(30px,3.6vw,48px)} .inclhd h2{color:#fff;max-width:16ch} .inclhd p{color:rgba(255,255,255,.56);font-size:15px;max-width:40ch;margin:0} .statgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid rgba(255,255,255,.14)} .incl .it{padding:26px 0 4px;position:relative} .incl .it:nth-child(even){padding-left:26px;border-left:1px solid rgba(255,255,255,.12)} .incl .it:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12);margin-top:22px} @media(min-width:900px){ .statgrid{grid-template-columns:repeat(4,1fr)} .incl .it{padding:30px 0 6px 32px;border-left:1px solid rgba(255,255,255,.12)} .incl .it:first-child{padding-left:0;border-left:0} .incl .it:nth-child(even){padding-left:32px} .incl .it:nth-child(n+3){border-top:0;margin-top:0} } .incl b{display:block;font-size:clamp(40px,4.6vw,58px);font-weight:200;color:#fff;letter-spacing:-.05em;line-height:.95;margin-bottom:12px} .incl b i{font-style:normal;font-size:.44em;font-weight:400;color:var(--amber);vertical-align:super;margin-left:3px;letter-spacing:0} .incl .lb{font-size:13.5px;color:#fff;display:block;font-weight:500;line-height:1.4} .incl .sub{font-size:12px;color:rgba(255,255,255,.48);display:block;margin-top:3px;line-height:1.45} /* cards */ .grid{display:grid;grid-template-columns:1fr;gap:20px} @media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:980px){.grid.g3{grid-template-columns:repeat(3,1fr)}.grid.g4{grid-template-columns:repeat(4,1fr)}} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.38s var(--e);position:relative} .card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--cta);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e);z-index:4} .card:hover{transform:translateY(-5px);box-shadow:var(--sh-h);border-color:transparent} .card:hover:before{transform:scaleX(1)} .card-m{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--wash2)} .card-m img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)} .card:hover .card-m img{transform:scale(1.05)} .card-m:after{content:"";position:absolute;inset:0;box-shadow:inset 0 -46px 50px -30px rgba(22,32,27,.45)} .tag{position:absolute;top:12px;left:12px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:5px;background:rgba(255,255,255,.94);color:var(--ink);backdrop-filter:blur(8px)} .tag.o{background:var(--cta);color:#fff} .card-idx{position:absolute;bottom:11px;right:13px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.85);letter-spacing:.06em} .card-b{padding:17px 18px 19px;display:flex;flex-direction:column;flex:1} .card-b h3{margin-bottom:6px} .card-b p{font-size:13.8px;color:var(--body);margin:0 0 14px;line-height:1.62} .meta{display:flex;flex-wrap:wrap;gap:0 14px;margin-bottom:16px;font-size:11.5px;color:var(--brand);font-weight:500} .meta span{position:relative;padding-left:11px} .meta span:before{content:"";position:absolute;left:0;top:50%;width:4px;height:1px;background:var(--brand-l)} .card-f{margin-top:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap} /* split */ .split{display:grid;grid-template-columns:1fr;gap:clamp(28px,3.6vw,54px);align-items:center} @media(min-width:940px){.split{grid-template-columns:1fr 1fr}.split.flip .sp-m{order:-1}} .mcomp{display:grid;grid-template-columns:1fr 1fr;gap:12px} .mcomp .big{grid-column:1/-1;aspect-ratio:16/10} .mcomp img{width:100%;border-radius:var(--r);object-fit:cover} .mcomp .sm{aspect-ratio:4/3} /* feature list — hairline rows, no icons */ .flist{list-style:none;padding:0;margin:0 0 26px;display:grid;grid-template-columns:1fr;gap:0} .flist li{font-size:14px;padding:11px 0;border-top:1px solid var(--line-s);color:var(--body);display:flex;align-items:center;gap:12px} .flist li:last-child{border-bottom:1px solid var(--line-s)} .flist li:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cta);flex:0 0 5px} .dark .flist li{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.1)} .dark .flist li:last-child{border-bottom-color:rgba(255,255,255,.1)} @media(min-width:600px){.flist{grid-template-columns:1fr 1fr;column-gap:34px}} /* why — numerals, no icons */ .whywrap{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,60px);align-items:center} @media(min-width:960px){.whywrap{grid-template-columns:.85fr 1.15fr}} .whyimg{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5} .whyimg img{width:100%;height:100%;object-fit:cover} .whyimg .cap{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(transparent,rgba(22,32,27,.88));color:#fff} .whyimg .cap b{display:block;font-size:16px;font-weight:600;margin-bottom:3px} .whyimg .cap span{font-size:12.5px;color:rgba(255,255,255,.7)} .why{display:grid;grid-template-columns:1fr;gap:0} .why>div{padding:22px 0 22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;transition:.35s var(--e)} .why>div:last-child{border-bottom:1px solid var(--line)} .why>div:hover{padding-left:12px} .why>div:hover .n{background:var(--cta);color:#fff;border-color:var(--cta)} .why .n{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;color:var(--cta);transition:.35s var(--e)} .why h4{font-size:17.5px;font-weight:600;margin-bottom:5px} .why p{font-size:14px;margin:0;color:var(--body);line-height:1.62;max-width:52ch} /* form */ .fbx{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.4vw,46px);box-shadow:var(--sh)} .fg{display:grid;gap:18px;grid-template-columns:1fr} .fl{display:block;font-size:11.5px;font-weight:600;color:var(--body-l);margin-bottom:6px} .fi{width:100%;font-family:var(--f);font-size:14.5px;color:var(--ink);background:#FBF9F6;border:1px solid var(--line);border-radius:var(--r-s);padding:12px 13px;transition:.24s} .fi:focus{outline:0;border-color:var(--cta);background:#fff;box-shadow:0 0 0 3px rgba(222,94,44,.1)} .full{grid-column:1/-1} @media(min-width:700px){.fg{grid-template-columns:1fr 1fr}} /* map */ .mfl{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px} .mfl button{background:#fff;border:1px solid var(--line);color:var(--body);font-family:var(--f);font-size:13px;font-weight:500;padding:9px 16px;cursor:pointer;transition:.26s;border-radius:999px} .mfl button.on{background:var(--ink);border-color:var(--ink);color:#fff} .mfl button:hover:not(.on){border-color:var(--ink);color:var(--ink)} .mb{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--sh)} .mc{position:relative;aspect-ratio:16/10;background:linear-gradient(160deg,#F7F3EB 0%,#EEE7DA 58%,#E5DBCB 100%)} .mc:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(22,32,27,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(22,32,27,.04) 1px,transparent 1px);background-size:56px 56px} .park{position:absolute;left:23%;top:11%;width:45%;height:63%;border:1.5px dashed rgba(63,107,74,.4);border-radius:48% 52% 38% 62%;background:rgba(63,107,74,.08)} .park b{position:absolute;top:41%;left:50%;transform:translateX(-50%);font-size:10px;font-weight:600;color:rgba(50,84,58,.78);white-space:nowrap;letter-spacing:.04em} .road{position:absolute;left:0;right:0;top:79%;height:2px;background:repeating-linear-gradient(90deg,rgba(22,32,27,.2) 0 12px,transparent 12px 24px)} .road b{position:absolute;right:16px;top:-20px;font-size:10.5px;font-weight:500;color:var(--body-l)} .pin{position:absolute;transform:translate(-50%,-50%);z-index:3;cursor:pointer;width:14px;height:14px} .pin i{position:absolute;inset:0;border-radius:50%;background:var(--cta);border:2.5px solid #fff;box-shadow:0 2px 7px rgba(22,32,27,.3);transition:.3s var(--e)} .pin.gate i{background:var(--green)} .pin.food i{background:var(--brand)} .pin.town i{background:var(--ink)} .pin em{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-style:normal;font-size:11.5px;font-weight:500;color:var(--ink);white-space:nowrap;transition:.3s} .pin:hover{z-index:9} .pin:hover i{transform:scale(1.3)} .pin:hover em{color:var(--cta)} .pin.dim{opacity:.2;pointer-events:none} .pcard{position:absolute;left:50%;bottom:26px;transform:translate(-50%,8px);width:206px;background:#fff;border-radius:var(--r-s);box-shadow:var(--sh-l);opacity:0;pointer-events:none;transition:.3s var(--e);z-index:20;overflow:hidden} .pin:hover .pcard{opacity:1;transform:translate(-50%,0)} .pcard img{width:100%;height:90px;object-fit:cover} .pcard div{padding:11px 13px} .pcard b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:2px} .pcard span{font-size:11.5px;color:var(--cta);font-weight:500} .mlg{display:flex;flex-wrap:wrap;gap:18px;padding:15px 20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--body-l)} .mlg span{display:flex;align-items:center;gap:7px} .mlg i{width:8px;height:8px;border-radius:50%} @media(max-width:860px){.pin em{display:none}.pcard{width:168px}} /* reviews */ .rev{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:860px){.rev{grid-template-columns:.85fr 1fr 1fr}} .rscore{background:var(--ink);color:#fff;border-radius:var(--r);padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;position:relative;overflow:hidden} .rscore .fzb{position:absolute;right:-14%;bottom:-16%;width:78%;height:56%;background:rgba(255,255,255,.05)} .rscore b{font-size:54px;font-weight:300;line-height:1;letter-spacing:-.045em;display:block;position:relative} .rscore .st{color:#F3C04A;font-size:14px;letter-spacing:3px;margin:10px 0 6px;position:relative} .rscore .sub{font-size:12.5px;color:rgba(255,255,255,.55);position:relative} .rbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column} .rbox .st{color:#F3C04A;font-size:12.5px;letter-spacing:2px;margin-bottom:12px} .rbox p{font-size:14.2px;color:var(--ink);margin:0 0 16px;line-height:1.66;flex:1} .rby{display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--body-l)} .rav{width:32px;height:32px;border-radius:50%;background:var(--wash2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--brand);flex:0 0 32px} .awrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} /* video */ .vid{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;display:block;box-shadow:var(--sh)} .vid>img{width:100%;height:100%;object-fit:cover} .vid .ov{position:absolute;inset:0;background:linear-gradient(rgba(22,32,27,.2),rgba(22,32,27,.5));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;color:#fff;transition:.35s} .vid:hover .ov{background:linear-gradient(rgba(22,32,27,.12),rgba(22,32,27,.4))} .vid .pl{width:62px;height:62px;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:.35s var(--e);box-shadow:0 10px 30px rgba(0,0,0,.28)} .vid:hover .pl{transform:scale(1.08)} .vid .ov b{font-size:13.5px;font-weight:600} @media(min-width:900px){.vid{aspect-ratio:21/9}} /* social */ .sg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .sg a{aspect-ratio:1;background-size:cover;background-position:center;border-radius:var(--r-s);transition:.4s var(--e);position:relative;overflow:hidden} .sg a:after{content:"";position:absolute;inset:0;background:rgba(22,32,27,.14);transition:.35s} .sg a:hover{transform:scale(1.03)}.sg a:hover:after{background:rgba(22,32,27,0)} @media(min-width:800px){.sg{grid-template-columns:repeat(6,1fr)}} .socs{display:flex;gap:8px;align-items:center} /* frieze divider */ .fzdiv{height:clamp(62px,8vw,108px);background:var(--brand);opacity:.16;--fz:var(--fzimg);-webkit-mask-size:auto 78%;mask-size:auto 78%} /* footer */ footer{background:var(--dark);color:rgba(255,255,255,.58);padding:clamp(46px,6vw,74px) 0 0;font-size:14.5px;position:relative;overflow:hidden} footer .fzb{position:absolute;right:-6%;top:-10%;width:min(760px,64%);height:50%;background:rgba(255,255,255,.04);pointer-events:none} footer .w{position:relative;z-index:2} footer h4{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:16px} .f4{display:grid;gap:32px;grid-template-columns:1fr} .f4 a{display:block;padding:4px 0;transition:.25s} .f4 a:hover{color:#fff} .flg img{height:72px;margin-bottom:16px} .fcta{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap} .fcta .btn{padding:13px 22px;font-size:13.5px} .b-ghost{border-color:rgba(255,255,255,.24);color:#fff} .b-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)} .wx{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-s);padding:18px} .wxt{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px} .wxt b{font-size:34px;font-weight:300;color:#fff;display:block;line-height:1;letter-spacing:-.035em} .wxt span{font-size:11.5px;color:rgba(255,255,255,.44)} .wxd{display:flex;justify-content:space-between;gap:4px} .wxd div{text-align:center;font-size:11px;color:rgba(255,255,255,.44)} .wxd b{display:block;font-size:13.5px;color:#fff;margin-top:5px;font-weight:500} .fbt{margin-top:42px;border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;flex-direction:column;gap:12px;font-size:12.5px;color:rgba(255,255,255,.38)} .fbt nav{display:flex;flex-wrap:wrap;gap:18px} @media(min-width:700px){.fbt{flex-direction:row;justify-content:space-between;align-items:center}} @media(min-width:1040px){.f4{grid-template-columns:1.5fr 1fr 1fr 1.1fr}} .stk{position:fixed;left:0;right:0;bottom:0;z-index:95;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 20px rgba(22,32,27,.08);padding:9px 12px calc(9px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:8px} .stk .btn{width:100%;padding:13px 6px} body{padding-bottom:74px} .note{border:1px solid rgba(222,94,44,.26);background:rgba(222,94,44,.045);border-radius:var(--r-s);padding:14px 18px;font-size:13px;color:#A04A20;margin-top:22px;line-height:1.62} .note b{font-weight:600} @media(min-width:1040px){nav.m{display:flex}.hc{display:flex}.brg{display:none}.stk{display:none}body{padding-bottom:0}} /* ===== breadcrumb ===== */ .crumb{display:flex;gap:9px;align-items:center;font-size:12.5px;color:rgba(255,255,255,.6);margin-bottom:18px;flex-wrap:wrap} .crumb a:hover{color:#fff} .crumb i{font-style:normal;opacity:.45} /* ===== product hero ===== */ .phero{position:relative;background:var(--dark);overflow:hidden;min-height:clamp(340px,42vw,470px);display:flex;align-items:flex-end} .phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .phero:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,20,17,.94) 0%,rgba(14,20,17,.6) 42%,rgba(14,20,17,.22) 100%)} .phero .w{position:relative;z-index:3;padding-top:clamp(50px,7vw,90px);padding-bottom:clamp(30px,3.6vw,44px)} .phero h1{color:#fff;font-size:clamp(32px,4.6vw,56px);max-width:17ch;font-weight:300;letter-spacing:-.037em;line-height:1.05} .phero .tagline{color:rgba(255,255,255,.74);font-size:16.5px;max-width:46ch;margin:16px 0 0} .ptags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .ptag{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:6px 12px;border-radius:5px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(8px)} .ptag.o{background:var(--cta);border-color:var(--cta)} /* ===== facts strip ===== */ .facts{border-bottom:1px solid var(--line);background:#fff} .facts .w{display:grid;grid-template-columns:1fr 1fr;gap:0} .facts div{padding:20px 0;border-top:1px solid var(--line-s)} .facts div:nth-child(-n+2){border-top:0} .facts div:nth-child(even){padding-left:22px;border-left:1px solid var(--line-s)} .facts dt{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--body-l);margin:0 0 6px} .facts dd{margin:0;font-size:15.5px;font-weight:500;color:var(--ink);line-height:1.35} @media(min-width:860px){ .facts .w{grid-template-columns:repeat(4,1fr)} .facts div{padding:26px 0 26px 30px;border-left:1px solid var(--line-s);border-top:0} .facts div:first-child{padding-left:0;border-left:0} .facts div:nth-child(even){padding-left:30px} } /* ===== product layout ===== */ .plyt{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,58px);align-items:start} @media(min-width:1000px){.plyt{grid-template-columns:minmax(0,1fr) 372px}} .pmain h2{font-size:clamp(23px,2.5vw,31px);margin-bottom:14px} .pmain h3{font-size:18.5px;margin-bottom:10px} .pmain p{font-size:16px;line-height:1.75;margin-bottom:1.05em} .pblock{padding-bottom:clamp(36px,4vw,54px);margin-bottom:clamp(36px,4vw,54px);border-bottom:1px solid var(--line)} .pblock:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0} /* ===== booking card ===== */ .bcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden} @media(min-width:1000px){.bcard{position:sticky;top:96px}} .bcard-h{padding:20px 22px 18px;border-bottom:1px solid var(--line-s);background:#FBF9F6} .bcard-h .lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cta);margin-bottom:7px} .bcard-h h3{font-size:19px;margin-bottom:6px;letter-spacing:-.024em} .bcard-h p{font-size:13px;color:var(--body-l);margin:0} .bcard-b{padding:20px 22px 22px} .brow{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-s);font-size:14px} .brow:last-of-type{border-bottom:0;margin-bottom:6px} .brow dt{color:var(--body-l)} .brow dd{margin:0;color:var(--ink);font-weight:500;text-align:right} .bnote{font-size:11.5px;color:var(--body-l);text-align:center;margin:12px 0 0;display:flex;align-items:center;justify-content:center;gap:7px} .bsplit{display:flex;gap:9px;margin-top:10px} .bsplit .btn{flex:1} /* ===== include / exclude ===== */ .ie{display:grid;grid-template-columns:1fr;gap:26px} @media(min-width:680px){.ie{grid-template-columns:1fr 1fr;gap:34px}} .ielist{list-style:none;padding:0;margin:0} .ielist li{font-size:14.5px;padding:10px 0 10px 27px;position:relative;border-bottom:1px solid var(--line-s);color:var(--body)} .ielist li:last-child{border-bottom:0} .ielist.yes li:before{content:"";position:absolute;left:2px;top:17px;width:11px;height:6px;border-left:1.8px solid var(--green);border-bottom:1.8px solid var(--green);transform:rotate(-45deg)} .ielist.no li:before{content:"";position:absolute;left:3px;top:18px;width:11px;height:1.8px;background:var(--body-l);opacity:.6} .ietitle{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:8px;display:block} /* ===== day timeline ===== */ .day{display:grid;grid-template-columns:1fr;gap:0} .dayi{display:grid;grid-template-columns:1fr;gap:14px;padding:22px 0;border-top:1px solid var(--line-s)} .dayi:last-child{border-bottom:1px solid var(--line-s)} .dayt{font-size:clamp(24px,2.7vw,34px);font-weight:300;color:var(--cta);letter-spacing:-.04em;line-height:1} .dayi h4{font-size:17px;font-weight:600;margin-bottom:5px} .dayi p{font-size:14.5px;color:var(--body);margin:0;line-height:1.62} .daym{aspect-ratio:16/11;overflow:hidden;border-radius:var(--r-s)} .daym img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)} .dayi:hover .daym img{transform:scale(1.05)} @media(min-width:760px){.dayi{grid-template-columns:96px 1fr 190px;gap:26px;align-items:center}} /* ===== gallery ===== */ .gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .gal a{position:relative;overflow:hidden;border-radius:var(--r-s);aspect-ratio:3/2;display:block;background:var(--wash2)} .gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e)} .gal a:hover img{transform:scale(1.06)} .gal a.tall{grid-row:span 2;aspect-ratio:3/4} @media(min-width:680px){.gal{grid-template-columns:repeat(4,1fr)}} /* ===== faq ===== */ .faq details{border-bottom:1px solid var(--line-s)} .faq summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;font-size:15.5px;font-weight:500;color:var(--ink);position:relative;transition:.25s} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--cta)} .faq summary:after{content:"";position:absolute;right:6px;top:25px;width:9px;height:9px;border-right:1.6px solid var(--body-l);border-bottom:1.6px solid var(--body-l);transform:rotate(45deg);transition:.3s var(--e)} .faq details[open] summary:after{transform:rotate(-135deg);border-color:var(--cta)} .faq .fa{padding:0 0 18px;font-size:14.5px;color:var(--body);line-height:1.7;max-width:64ch} /* ===== WooCommerce-style placeholder ===== */ .ph{background:repeating-linear-gradient(45deg,#F1ECE4 0 10px,#EDE7DD 10px 20px);border:1px dashed #CFC5B6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:#A69A88;text-align:center;padding:16px;border-radius:var(--r-s)} .ph svg{opacity:.75} .ph b{font-size:12px;font-weight:600;letter-spacing:.06em;color:#8E8272} .ph span{font-size:11px;color:#A69A88;max-width:26ch;line-height:1.45} .ph.hero{position:absolute;inset:0;border:0;border-radius:0;z-index:1} /* ===== related ===== */ .rel{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:680px){.rel{grid-template-columns:repeat(3,1fr)}} .stayrow{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:680px){.stayrow{grid-template-columns:repeat(4,1fr)}} .sm-card{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:.3s var(--e)} .sm-card:hover{transform:translateY(-3px);box-shadow:var(--sh)} .sm-card img{aspect-ratio:16/10;object-fit:cover;width:100%} .sm-card div{padding:13px 15px} .sm-card b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.015em} .sm-card span{font-size:12.5px;color:var(--body-l)} /* --- stage labels in the day timeline (words rather than clock times) --- */ .dayt.w{font-size:12px;line-height:1.45;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--cta);padding-top:5px;overflow-wrap:break-word} @media(max-width:760px){.dayt.w{padding-top:0}} /* --- accommodation pages --- */ .roomrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px} .rm{border:1px solid var(--line);border-radius:var(--r);padding:20px 21px;background:#fff} .rm b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.015em;margin-bottom:5px} .rm p{margin:0 0 11px;font-size:13.4px;line-height:1.62;color:var(--body)} .rm .tags{display:flex;flex-wrap:wrap;gap:6px} .rm .tags span{font-size:11.5px;color:var(--body-l);border:1px solid var(--line);border-radius:100px;padding:3px 9px} .amen{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 22px;margin-top:6px} .amen div{display:flex;gap:9px;align-items:flex-start;font-size:13.6px;color:var(--body);line-height:1.5} .amen i{flex:0 0 auto;width:15px;height:15px;margin-top:3px;border-radius:50%;background:var(--cta);opacity:.16;position:relative} .amen i:after{content:"";position:absolute;left:4.5px;top:3.5px;width:4px;height:7px;border:solid var(--cta);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);opacity:1} /* --- link hover: override Hello Elementor reset.css a:hover{color:#333366} --- */ a:hover,a:active,a:focus{color:inherit} .btn:hover,.btn:focus{color:inherit} .b-cta:hover,.b-cta:focus{color:#fff} .b-dark:hover,.b-dark:focus{color:#fff} .b-wa:hover,.b-wa:focus{color:#fff} .b-outw:hover,.b-outw:focus{color:#fff} .b-out:hover,.b-out:focus{color:var(--ink)} .lk:hover,.lk:focus{color:var(--cta)} .sm-card:hover,.sm-card:focus{color:inherit} .rbadge:hover,.rbadge:focus{color:inherit} .opt:hover{color:inherit} /* --- navigation: darker, with an active underline --- */ nav.m a{color:var(--ink);font-weight:500} nav.m a:hover{color:var(--cta)} nav.m a.on{color:var(--cta)} nav.m a.on:after{width:100%} nav.m a:after{height:2px;bottom:-4px} /* --- mobile menu panel (burger was inert) --- */ #hdr{position:relative} #hdr.nav-open nav.m{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 26px 44px -26px rgba(0,0,0,.3);padding:8px 20px 16px;z-index:120} #hdr.nav-open nav.m a{padding:14px 2px;font-size:16px;border-bottom:1px solid var(--line);color:var(--ink)} #hdr.nav-open nav.m a:last-of-type{border-bottom:0} #hdr.nav-open nav.m a:after{display:none} #hdr.nav-open nav.m a.on{color:var(--cta)} #hdr .mobcta{display:flex;gap:9px;padding-top:14px} #hdr .mobcta .btn{flex:1} #hdr nav.m .mobcta{display:none} #hdr.nav-open nav.m .mobcta{display:flex} .brg span{transition:transform .25s var(--e),opacity .2s} #hdr.nav-open .brg span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} #hdr.nav-open .brg span:nth-child(2){opacity:0} #hdr.nav-open .brg span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} @media(min-width:860px){#hdr .mobcta{display:none!important}} /* --- hero placeholder must stay legible under the hero overlay --- */ .phero .ph.hero{background:repeating-linear-gradient(45deg,#2A2320 0 12px,#332B27 12px 24px);color:rgba(255,255,255,.62)} .phero .ph.hero b{color:rgba(255,255,255,.9);font-size:14px} .phero .ph.hero span{color:rgba(255,255,255,.55)} .phero .ph.hero svg{opacity:.5} /* --- whole card media + title clickable --- */ .card-m .cmlink{position:absolute;inset:0;z-index:2;display:block} .card-m .tag,.card-m .card-idx{z-index:3} .card-b h3 a{color:inherit;text-decoration:none;transition:color .2s} .card-b h3 a:hover,.card-b h3 a:focus{color:var(--cta)} .card:hover .card-m img{transform:scale(1.04)} /* --- sub-page hero banners: taller, vertically centred, wider measure --- */ .phero{min-height:clamp(420px,50vw,600px);align-items:center} .phero .w{padding-top:clamp(70px,8vw,110px);padding-bottom:clamp(60px,7vw,96px)} .phero h1{max-width:22ch;font-size:clamp(36px,5.4vw,66px)} .phero .tagline{max-width:62ch;font-size:clamp(16.5px,1.5vw,19px);margin-top:18px} .phero .ptags{margin-bottom:18px} @media(max-width:760px){.phero{min-height:clamp(330px,62vw,420px)}.phero h1{max-width:18ch}.phero .tagline{max-width:100%;font-size:15.8px}} /* --- frieze divider: pull the sections together (was ~300px of dead space) --- */ .fzdiv{height:clamp(46px,5vw,72px);margin-top:calc(clamp(58px,7vw,100px) * -0.55);margin-bottom:calc(clamp(58px,7vw,100px) * -0.55);opacity:.2} @media(max-width:760px){.fzdiv{height:42px;margin-top:-26px;margin-bottom:-26px}} /* --- banner scrim: rebalanced now that the text is vertically centred --- */ .phero>img{object-position:center 40%} .phero:after{background:linear-gradient(to top,rgba(14,20,17,.82) 0%,rgba(14,20,17,.58) 50%,rgba(14,20,17,.40) 100%)} /* --- banner: directional scrim so the photo reads and the text stays legible --- */ .phero>img{object-position:center 30%;filter:brightness(1.22) saturate(1.05)} .phero:after{background:linear-gradient(100deg,rgba(14,20,17,.80) 0%,rgba(14,20,17,.46) 46%,rgba(14,20,17,.04) 76%),linear-gradient(to top,rgba(14,20,17,.55) 0%,rgba(14,20,17,.26) 55%,rgba(14,20,17,.16) 100%)} @media(max-width:760px){.phero:after{background:linear-gradient(to top,rgba(14,20,17,.86) 0%,rgba(14,20,17,.6) 55%,rgba(14,20,17,.34) 100%)}} /* --- frieze: second pass, 248px down to ~160px --- */ .fzdiv{height:clamp(40px,4.2vw,58px);margin-top:clamp(-72px,-7vw,-48px);margin-bottom:clamp(-72px,-7vw,-48px)} #stay{padding-top:clamp(40px,4.4vw,62px)} @media(max-width:760px){.fzdiv{height:36px;margin-top:-24px;margin-bottom:-24px}#stay{padding-top:34px}} /* --- booking widget: neutral tile for properties still awaiting photos --- */ .optph{flex:0 0 52px;width:52px;height:44px;border-radius:6px;background:repeating-linear-gradient(45deg,var(--wash2) 0 7px,#EDE6DE 7px 14px);border:1px solid var(--line)} /* --- date pickers: arrival / departure pair --- */ .fdates{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:560px){.fdates{grid-template-columns:1fr}} input.fi[type=date]{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:15px;line-height:1.2;color:var(--ink);min-height:48px} input.fi[type=date]::-webkit-date-and-time-value{text-align:left} input.fi[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;transition:opacity .2s} input.fi[type=date]:hover::-webkit-calendar-picker-indicator{opacity:.85} /* --- downloads: park map & wildlife checklist --- */ .dlrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:26px} .dlcard{display:flex;align-items:flex-start;gap:15px;padding:22px 23px;border:1px solid var(--line);border-radius:var(--r);background:#fff;text-decoration:none;transition:border-color .22s,box-shadow .22s,transform .22s} .dlcard:hover{border-color:var(--cta);box-shadow:0 18px 34px -24px rgba(0,0,0,.34);transform:translateY(-2px)} .dli{flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--wash2);color:var(--cta)} .dlt{flex:1 1 auto;display:block;min-width:0} .dlt b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.015em;margin-bottom:5px} .dlt span{display:block;font-size:13.4px;line-height:1.62;color:var(--body)} .dlg{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--cta);padding-top:3px} .dlcard:hover .dlg svg{transform:translateY(2px)} .dlg svg{transition:transform .22s} @media(max-width:560px){.dlcard{padding:18px;gap:12px}.dlg{display:none}} /* --- gallery lightbox --- */ .talb{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;background:rgba(8,11,10,.985);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:60px 18px;opacity:0;transition:opacity .22s ease} .talb.on{display:flex;opacity:1} .talb-f{margin:0;max-width:min(1180px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:13px} .talb-f img{max-width:100%;max-height:calc(100vh - 160px);width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);background:#1b1f1d} .talb-f figcaption{color:rgba(255,255,255,.78);font-size:13.6px;line-height:1.5;text-align:center;max-width:62ch} .talb button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;font-family:inherit;padding:0} .talb button:hover,.talb button:focus-visible{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.42)} .talb-x{top:18px;right:18px;width:44px;height:44px;font-size:27px;line-height:1} .talb-p,.talb-n{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:31px;line-height:1} .talb-p{left:18px} .talb-n{right:18px} .talb-c{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.08em;font-weight:600} .gal a{cursor:zoom-in} @media(max-width:760px){ .talb{padding:56px 10px} .talb-f img{max-height:calc(100vh - 150px)} .talb-p,.talb-n{width:42px;height:42px;font-size:26px;top:auto;bottom:14px;transform:none} .talb-p{left:calc(50% - 64px)} .talb-n{right:calc(50% - 64px)} .talb-c{bottom:26px} } /* keep the close button clear of the WP admin bar when logged in */ body.admin-bar .talb-x{top:50px} @media(max-width:782px){body.admin-bar .talb-x{top:64px}} /* --- gallery: justified rows, never leaves empty cells whatever the image count --- */ .gal{display:flex;flex-wrap:wrap;gap:10px;grid-template-columns:none} .gal a{flex:1 1 calc(25% - 8px);min-width:170px;aspect-ratio:3/2;grid-row:auto} .gal a.tall{flex:2 1 calc(50% - 6px);aspect-ratio:3/2} @media(max-width:900px){.gal a{flex-basis:calc(33.333% - 7px)}.gal a.tall{flex-basis:calc(66.666% - 4px)}} @media(max-width:600px){.gal a{flex-basis:calc(50% - 5px);min-width:0}.gal a.tall{flex:1 1 100%}} /* --- Elementor editor: show everything. .rv starts at opacity:0 and is revealed by JS on scroll, which never fires inside the editor iframe — so sections looked blank while editing. --- */ body.elementor-editor-active .rv, body.elementor-editor-active .rv.in{opacity:1!important;transform:none!important;transition:none!important} body.elementor-editor-active .stk{display:none!important} /* --- interactive map (Leaflet + OpenStreetMap) --- */ .tamap-wrap{position:relative;margin-top:26px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#EFE7D9} #tamap{height:clamp(380px,52vw,560px);width:100%;background:#EFE7D9} .tamap-wrap .leaflet-container{font-family:inherit;background:#EFE7D9} .tamap-wrap .leaflet-control-attribution{font-size:10.5px;background:rgba(255,253,248,.84);color:var(--body-l)} .tamap-wrap .leaflet-control-attribution a{color:var(--body-l)} .tamap-wrap .leaflet-bar{border:0;box-shadow:0 2px 10px rgba(32,24,14,.28)} .tamap-wrap .leaflet-bar a{color:var(--ink);background:#FFFDF8;border-bottom-color:var(--line)} .tamap-wrap .leaflet-bar a:hover{background:var(--wash)} /* pins: teardrop markers with a category icon, Google-style */ .tapin-wrap{background:none;border:0} .tapin{display:block;transition:transform .16s ease} .leaflet-marker-icon:hover .tapin{transform:translateY(-3px) scale(1.06)} .tamap-wrap .leaflet-popup-content-wrapper{border-radius:10px;box-shadow:0 14px 34px -16px rgba(32,24,14,.6);background:#FFFDF8} .tamap-wrap .leaflet-popup-tip{background:#FFFDF8} .tamap-wrap .leaflet-popup-content{margin:13px 16px;line-height:1.45} .tamap-wrap .leaflet-popup-content b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:3px} .tamap-wrap .leaflet-popup-content span{display:block;font-size:12.8px;color:var(--body)} .tamap-wrap .leaflet-popup-content a{color:var(--cta);font-size:12.8px;font-weight:600;text-decoration:none;display:inline-block;margin-top:7px} .tamap-wrap .leaflet-popup-content a:hover{text-decoration:underline} .tamap-lock{position:absolute;inset:0;z-index:600;border:0;background:transparent;color:transparent;font-family:inherit;cursor:pointer;transition:opacity .25s} .tamap-lock:after{content:'Tap to move the map';position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:rgba(14,20,17,.80);color:#FFFDF8;font-size:13px;font-weight:600;letter-spacing:.01em;padding:9px 17px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 18px -8px rgba(0,0,0,.7)} .tamap-lock:hover:after{background:rgba(14,20,17,.92)} .tamap-wrap.on .tamap-lock{opacity:0;pointer-events:none} .tamap-key{display:flex;flex-wrap:wrap;gap:11px 22px;margin-top:16px} .tamap-key span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--body)} .tamap-key i{width:15px;height:15px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid #FFFDF8;box-shadow:0 1px 4px rgba(32,24,14,.3);flex:0 0 auto} .tamap-key .k-gate{background:#B4582F} .tamap-key .k-stay{background:#2F6B4F} .tamap-key .k-wild{background:#7A5230} .tamap-key .k-food{background:#C8893F} .tamap-key .k-town{background:#5A6B74} @media(max-width:600px){#tamap{height:380px}.tamap-key{gap:9px 16px}} /* date fields — whole field is the target, not just the icon (see showPicker in site.js) */ input.fi[type=date]{cursor:pointer} /* footer buttons: .f4 a{display:block} was beating .btn{display:inline-flex}, which killed the icon alignment on the footer WhatsApp button */ .f4 a.btn,.fcta a.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px} .fcta a.btn svg{display:block;flex:0 0 auto;width:16px;height:16px} /* --- home page only: safari + stay rows as three-up carousels --- Applied from the theme, so the page content itself is untouched. */ .home .tacar-wrap{position:relative} .home .grid.g3.tacar{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible; scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:20px; padding:6px 2px 10px;margin:0 -2px;scrollbar-width:none;-ms-overflow-style:none} .home .grid.g3.tacar::-webkit-scrollbar{display:none} .home .grid.g3.tacar>*{flex:0 0 calc((100% - 40px)/3);min-width:0;scroll-snap-align:start} @media(max-width:900px){.home .grid.g3.tacar>*{flex-basis:calc((100% - 20px)/2)}} @media(max-width:620px){.home .grid.g3.tacar>*{flex-basis:84%}} /* controls sit below the row: dots centred, arrows on the right. Deliberately plain — no transform, no box-shadow, no transition. Any of those promotes the button to its own compositing layer, which on some GPUs paints as a solid magenta block. Do not add them back. */ .tacar-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:12px;margin-top:18px} .tacar-dots{grid-column:2;display:flex;justify-content:center;align-items:center;gap:8px} .tacar-nav{grid-column:3;display:flex;justify-content:flex-end;align-items:center;gap:10px} .tacar-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line); background:#FFFDF8;color:var(--ink);cursor:pointer;display:flex;align-items:center; justify-content:center;padding:0;line-height:0; transition:none;filter:none;will-change:auto} .tacar-btn:hover{background:var(--wash);border-color:var(--ink)} .tacar-btn:focus-visible{outline:2px solid var(--cta);outline-offset:3px} .tacar-btn svg{width:17px;height:17px;display:block} .tacar-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer; background:var(--line);transition:none} .tacar-dot[aria-current='true']{background:var(--cta);width:24px;border-radius:999px} .tacar-dot:focus-visible{outline:2px solid var(--cta);outline-offset:3px} @media(max-width:620px){.tacar-foot{grid-template-columns:1fr}.tacar-dots{grid-column:1} .tacar-nav{display:none}} /* --- Hello Elementor ships button:hover,button:focus{background:#c36;color:#fff} --- That is the pink. It hit every bare