/* CreteLocals — homepage rebuild (theme-ready)
One token system owns color & type. Every text/surface pair passes WCAG AA. */
/* ---------- Tokens ---------- */
:root{
/* color */
--teal: #00809D; /* brand field — white text on it: 4.6:1 */
--teal-deep: #006A83; /* hover on teal fills */
--teal-ink: #00677F; /* teal as text/link on light: 6.5:1 */
--teal-tint: #E8F3F5;
--coral: #FF6064; /* decorative only: never carries text, never a text color */
--coral-ink: #D63438; /* accessible coral: text on light 4.8:1, white on it 4.8:1 */
--coral-press: #B92E32;
--ink: #17272B;
--ink-2: #44585D;
--ink-3: #5C6E73;
--paper: #FFFFFF;
--sand: #F7F4EE; /* alternate section ground */
--mist: #F2F7F8; /* cool ground for chips/search */
--line: #DCE6E8;
--footer-bg: #0F3540; /* shared dark chrome: header AND footer */
--footer-ink: #CDE1E6;
--footer-dim: #9FBEC6;
--star: #B26A00; /* rating text on light: 5.6:1 */
/* type */
--f-display: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--f-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* layout */
--container: 1200px;
--gutter: clamp(16px, 4vw, 32px);
--radius: 14px;
--radius-s: 10px;
--bottomnav-h: 64px;
--adhesion-h: 66px; /* reserved ad adhesion zone (mobile) */
--shadow-1: 0 1px 2px rgba(15,53,64,.06), 0 4px 14px rgba(15,53,64,.08);
--shadow-2: 0 2px 6px rgba(15,53,64,.10), 0 12px 28px rgba(15,53,64,.14);
}
/* ---------- Self-hosted display face ---------- */
@font-face{
font-family:"Google Sans Flex";
src:url("../fonts/gsf-latin.woff2") format("woff2");
font-weight:400 700; font-style:normal; font-display:swap;
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face{
font-family:"Google Sans Flex";
src:url("../fonts/gsf-latin-ext.woff2") format("woff2");
font-weight:400 700; font-style:normal; font-display:swap;
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF;
}
/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{
margin:0; background:var(--paper); color:var(--ink);
font-family:var(--f-body); font-size:16.5px; line-height:1.6;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:var(--teal); color:#fff }
:root{ accent-color:var(--teal) }
input, textarea{ caret-color:var(--teal) }
html{ scrollbar-color:#8FB6BF var(--mist) }
::-webkit-scrollbar{ width:12px }
::-webkit-scrollbar-track{ background:var(--mist) }
::-webkit-scrollbar-thumb{ background:#8FB6BF; border-radius:8px; border:3px solid var(--mist) }
::-webkit-scrollbar-thumb:hover{ background:var(--teal-ink) }
img{ max-width:100%; height:auto; display:block }
a{ color:var(--teal-ink); text-decoration-thickness:1px; text-underline-offset:3px }
a:hover{ color:var(--teal) }
:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; border-radius:4px }
.on-teal :focus-visible, .on-dark :focus-visible{ outline-color:#fff }
h1,h2,h3{ font-family:var(--f-display); line-height:1.15; text-wrap:balance; margin:0; letter-spacing:-.01em }
h1{ font-size:clamp(2.1rem, 4.6vw, 2.9rem); font-weight:650 }
h2{ font-size:clamp(1.55rem, 3vw, 1.95rem); font-weight:630 }
h3{ font-size:1.08rem; font-weight:620; line-height:1.38 }
p{ margin:0 }
.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding-block:clamp(44px, 7vw, 76px) 0 }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:clamp(20px,3vw,28px) }
.section-head .more{ display:inline-flex; align-items:center; min-height:44px; font-size:.95rem; font-weight:600; white-space:nowrap }
.section-intro{ max-width:68ch; margin:-6px 0 26px }
.section-intro p{
color:var(--ink-2); font-size:.98rem;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.section-intro.expanded p{ display:block; -webkit-line-clamp:unset; overflow:visible }
.intro-toggle{
display:inline-flex; align-items:center; min-height:44px; padding:0;
background:none; border:0; cursor:pointer;
color:var(--teal-ink); font-family:var(--f-display); font-weight:620; font-size:.92rem;
}
.intro-toggle:hover{ color:var(--teal); text-decoration:underline; text-underline-offset:3px }
.partners .section-intro{ margin:12px auto 0; text-align:center }
.section-sub{ color:var(--ink-2); margin:12px 0 0; max-width:65ch; line-height:1.6 }
.num{ font-variant-numeric:tabular-nums }
.skip-link{
position:absolute; left:16px; top:-64px; z-index:200;
background:var(--ink); color:#fff; font-weight:600;
padding:12px 18px; border-radius:0 0 10px 10px; text-decoration:none;
transition:top .15s ease-out;
}
.skip-link:focus-visible{ top:0; outline-color:#fff }
.visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
/* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
min-height:48px; padding:12px 26px; border-radius:.5rem;
font-family:var(--f-display); font-weight:640; font-size:1rem; letter-spacing:.01em;
text-decoration:none; border:0; cursor:pointer;
transition:background-color .15s ease-out, transform .15s ease-out, box-shadow .15s ease-out;
}
.btn:active{ transform:translateY(1px) }
.btn-coral{ background:var(--coral-ink); color:#fff; box-shadow:var(--shadow-1) }
.btn-coral:hover{ background:var(--coral-press); color:#fff; box-shadow:var(--shadow-2) }
.btn-ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.65) }
.btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff }
.btn-light{ background:#fff; color:var(--teal-ink) }
.btn-light:hover{ background:var(--teal-tint); color:var(--teal-ink) }
.btn-block{ width:100%; min-height:54px; font-size:1.05rem }
/* ---------- Header (dark chrome, same palette as the footer) ---------- */
.site-header{
position:sticky; top:0; z-index:80;
background:var(--footer-bg);
}
.utility-bar{ display:none; background:var(--footer-bg); border-bottom:1px solid rgba(255,255,255,.12) }
.utility-bar .container{ display:flex; justify-content:flex-end; gap:6px }
.utility-bar a{
display:inline-flex; align-items:center; gap:7px;
min-height:40px; padding:0 12px; border-radius:8px;
color:var(--footer-dim); font-size:.87rem; text-decoration:none; white-space:nowrap;
}
.utility-bar a:hover{ color:#fff }
.utility-bar svg{ flex:none }
.header-bar{
display:flex; align-items:center; gap:14px;
min-height:68px; padding-block:8px;
}
@media (min-width:981px){
.primary-nav{ margin-inline:auto }
.header-actions{ margin-left:0 }
}
.brand{
display:inline-flex; align-items:center; margin-right:4px;
height:64px; max-width:230px; overflow:hidden;
transition:max-width .25s ease;
}
.brand img{ display:block; width:auto; max-width:none; height:96px; margin-block:-16px }
/* scrolled: crop to the icon alone to preserve space (desktop menu only) */
@media (min-width:1200px){
body.cl26-scrolled .brand{ max-width:64px }
}
.primary-nav{ display:none }
.primary-nav ul{ display:flex; gap:2px; margin:0; padding:0; list-style:none }
.primary-nav a{
display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
font-family:var(--f-display); font-weight:560; font-size:.99rem;
color:var(--footer-ink); text-decoration:none; border-radius:10px;
}
.primary-nav a:hover{ background:rgba(255,255,255,.10); color:#fff }
.header-actions{ display:flex; align-items:center; gap:8px; margin-left:auto }
.icon-btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
min-width:44px; min-height:44px; padding:0 12px; border-radius:12px;
background:transparent; border:0; cursor:pointer;
color:var(--footer-ink); font-family:var(--f-display); font-weight:580; font-size:.95rem;
text-decoration:none; white-space:nowrap;
}
.icon-btn:hover{ background:rgba(255,255,255,.10); color:#fff }
.icon-btn svg{ flex:none }
.icon-btn span{
display:inline-block; max-width:90px; overflow:hidden;
transition:max-width .25s ease, opacity .2s ease;
}
/* scrolled compact header: icon-only search (the gap collapses with it) */
@media (min-width:1200px){
body.cl26-scrolled .header-actions .icon-btn span{ max-width:0; opacity:0; margin-left:-8px }
}
@media (min-width:1200px){
.primary-nav{ display:block }
.utility-bar{ display:block }
.header-actions .m-only{ display:none }
}
.menu-btn{ display:none }
/* tablet range: primary nav is hidden and the bottom nav has not kicked
in yet - a header hamburger opens the same menu drawer */
@media (min-width:768px) and (max-width:1199.98px){
.menu-btn{ display:inline-flex; position:absolute; left:var(--gutter) }
}
@media (max-width:1199.98px){
.header-bar{ justify-content:center }
.header-actions{ margin-left:0; position:absolute; right:var(--gutter) }
.header-actions .icon-btn span{ display:none }
.header-actions .icon-btn{ padding:0 }
}
/* ---------- Hero ---------- */
.hero{ background:var(--teal); color:#fff; padding:clamp(48px,8vw,88px) 0 clamp(96px,12vw,128px); text-align:center }
.hero .container{ max-width:820px }
.hero-mark{ /* decorative coral tier: brand accent, never text */
display:block; width:52px; height:5px; border-radius:99px;
background:var(--coral); margin:0 auto 22px;
}
.hero p{ margin-top:14px; font-size:clamp(1.02rem, 2vw, 1.2rem); color:#fff }
.hero .btn{ margin-top:28px }
@media (prefers-reduced-motion: no-preference){
.hero h1, .hero p, .hero .btn{ animation:rise .6s cubic-bezier(.16,1,.3,1) backwards }
.hero p{ animation-delay:.08s } .hero .btn{ animation-delay:.16s }
.cat-card{ animation:rise .6s cubic-bezier(.16,1,.3,1) backwards }
.cat-card:nth-child(2){ animation-delay:.05s } .cat-card:nth-child(3){ animation-delay:.1s }
.cat-card:nth-child(4){ animation-delay:.15s } .cat-card:nth-child(5){ animation-delay:.2s }
.cat-card:nth-child(6){ animation-delay:.25s }
}
@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
/* ---------- Category cards (pulled up over the hero edge) ---------- */
.categories{ margin-top:calc(clamp(96px,12vw,128px) * -0.62) }
.cat-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) }
.cat-card{
position:relative; display:block; border-radius:var(--radius); overflow:hidden;
aspect-ratio:4/3; text-decoration:none; box-shadow:var(--shadow-1);
transform:translateZ(0);
}
.cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.16,1,.3,1) }
.cat-card::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(10,30,36,0) 34%, rgba(10,30,36,.42) 62%, rgba(10,30,36,.86) 100%);
transition:opacity .3s ease-out;
}
.cat-card:hover img{ transform:scale(1.045) }
.cat-card:hover::after{ /* scrim deepens and warms toward the brand coral (decorative tier) */
opacity:.96;
background:linear-gradient(180deg, rgba(10,30,36,0) 30%, rgba(84,38,40,.40) 62%, rgba(64,22,24,.90) 100%);
}
.cat-card:focus-visible{ outline-offset:4px }
.cat-body{ position:absolute; inset-inline:0; bottom:0; z-index:1; padding:20px 22px; color:#fff }
.cat-body h2, .cat-body .cat-title{ display:block; font-family:var(--f-display); font-weight:700; line-height:1.15; letter-spacing:-.01em; text-wrap:balance; margin:0; font-size:1.45rem; color:#fff }
.cat-body p{ margin-top:6px; font-size:.94rem; line-height:1.45; color:rgba(255,255,255,.94) }
@media (prefers-reduced-motion: reduce){ .cat-card img, .cat-card::after{ transition:none } }
/* ---------- Listing cards (activities / stays / blogs) ---------- */
.card-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill, minmax(275px, 1fr)) }
.card-grid.grid-4{ grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)) }
@media (min-width:1100px){ .card-grid.grid-4{ grid-template-columns:repeat(4, 1fr) } }
.listing{
position:relative; display:flex; flex-direction:column;
background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
overflow:hidden; transition:box-shadow .2s ease-out;
}
.listing:hover{ box-shadow:0 1px 3px rgba(15,53,64,.07), 0 5px 14px rgba(15,53,64,.09) }
.listing .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--mist) }
.listing .thumb img{ width:100%; height:100%; object-fit:cover }
.listing-body{ display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; flex:1 }
.listing h3 a, .listing .card-title a, .listing .card-h a{ color:var(--ink); text-decoration:none }
.listing h3 a::after, .listing .card-title a::after, .listing .card-h a::after, .news-card .card-h a::after{ content:""; position:absolute; inset:0 } /* whole card = one big target */
.listing:has(h3 a:focus-visible), .listing:has(.card-title a:focus-visible){ outline:3px solid var(--ink); outline-offset:2px }
.listing h3 a:focus-visible, .listing .card-title a:focus-visible, .listing .card-h a:focus-visible, .news-card .card-h a:focus-visible{ outline:none }
.card-title{
margin:0; font-family:var(--f-display); font-weight:700;
font-size:1.08rem; line-height:1.35; color:var(--ink);
}
.card-desc{ margin:0; color:var(--ink-3); font-size:.9rem; line-height:1.5 }
.meta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:auto; padding-top:4px }
.rating{ display:inline-flex; align-items:center; gap:5px; color:var(--star); font-weight:640; font-size:.92rem }
.rating svg{ flex:none }
.rating .count{ color:var(--ink-3); font-weight:480 }
.price{ font-size:.95rem; color:var(--ink-2) }
.price strong{ font-family:var(--f-display); color:var(--ink); font-size:1.06rem; font-weight:650 }
.loc{ color:var(--ink-3); font-size:.9rem }
/* ---------- Partners ---------- */
.partners{ background:var(--sand) }
.partners .inner{ padding-block:clamp(36px,5vw,52px) }
.partners h2{ text-align:center }
.partner-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(20px,4vw,44px); margin-top:24px }
.partner-row img{
width:auto; height:56px; max-width:120px; object-fit:contain;
filter:grayscale(1); opacity:.72; transition:filter .2s ease-out, opacity .2s ease-out;
}
.partner-row img:hover{ filter:none; opacity:1 }
@media (prefers-reduced-motion: reduce){ .partner-row img{ transition:none } }
/* ---------- Ad slots (layout-stable, honestly labeled) ---------- */
.ad-slot{
display:grid; place-items:center;
min-height:300px; margin-block:clamp(36px,5vw,56px);
background:var(--mist); border:1px dashed var(--line); border-radius:var(--radius-s);
color:var(--ink-3); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
}
.ad-slot:has(ins.adsbygoogle){
display:block; background:transparent; border:0; color:transparent;
overflow:hidden;
}
.ad-slot ins.adsbygoogle{ display:block; width:100%; min-height:280px }
/* AdSense sizes its iframe to the viewport, not to our padded column */
.ad-slot ins.adsbygoogle, .ad-slot iframe{ max-width:100% }
.ad-slot.ad-side ins.adsbygoogle{ min-height:580px }
.ad-adhesion:has(ins.adsbygoogle){ color:transparent; letter-spacing:normal; text-transform:none }
.ad-adhesion ins.adsbygoogle{ display:block; width:100%; height:50px }
.ad-adhesion{
position:fixed; inset-inline:0; bottom:0; z-index:60;
height:var(--adhesion-h);
display:none; align-items:center; justify-content:center;
background:var(--mist); border-top:1px solid var(--line);
color:var(--ink-3); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
}
.ad-adhesion .ad-close{
position:absolute; right:6px; top:-44px;
display:inline-flex; align-items:center; justify-content:center;
min-width:44px; min-height:44px; border-radius:10px 10px 0 0;
background:var(--mist); border:1px solid var(--line); border-bottom:0;
color:var(--ink-2); cursor:pointer; line-height:1;
}
@media (max-width:767.98px){
.ad-adhesion{ display:flex; bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)) }
body{ padding-bottom:calc(var(--bottomnav-h) + var(--adhesion-h) + env(safe-area-inset-bottom, 0px)) }
}
/* ---------- Car rentals ---------- */
.rental-grid{ display:grid; gap:24px; grid-template-columns:1.4fr 1fr; align-items:stretch }
@media (max-width:860px){ .rental-grid{ grid-template-columns:1fr } }
.rental-map-wrap{ display:flex; flex-direction:column; gap:12px }
#rental-map{
height:400px; border-radius:var(--radius); overflow:hidden;
border:1px solid var(--line); background:var(--mist); z-index:0;
}
.loc-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.loc-chips a{
display:inline-flex; align-items:center; min-height:40px; padding:0 15px;
background:var(--teal-tint); color:var(--teal-ink); border-radius:999px;
font-size:.87rem; font-weight:580; text-decoration:none;
transition:background-color .15s ease-out, color .15s ease-out;
}
.loc-chips a:hover{ background:var(--teal); color:#fff }
@media (prefers-reduced-motion: reduce){ .loc-chips a{ transition:none } }
.rental-aside{ display:flex; flex-direction:column; gap:16px }
.rental-aside .btn-block{ align-self:stretch }
/* Gouves-style RCC results embed on /rent-car-crete/ (before the map). */
#rcc-widget{ margin:8px 0 28px }
body .rcc-shell{
padding:1rem;
background:var(--paper);
max-width:1100px;
margin:0 auto;
min-height:682px;
border-radius:1rem;
overflow:hidden;
box-shadow:var(--shadow-1);
}
@media (min-width:1400px){
#rcc-widget{
width:calc(100% + 200px);
margin-left:-100px;
}
body .rcc-shell{
max-width:none;
width:100%;
margin:0;
}
}
#rcc-widget .btn{ margin-top:12px }
.widget-slot{
flex:1; display:grid; place-content:center; gap:8px; text-align:center;
min-height:300px; padding:24px;
background:var(--mist); border:1px dashed var(--line); border-radius:var(--radius);
color:var(--ink-3);
}
.widget-slot-label{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:620 }
.widget-slot p{ font-size:.9rem }
.leaflet-container{ font-family:var(--f-body); font-size:.85rem }
.leaflet-popup-content-wrapper{ border-radius:10px }
/* ---------- News ---------- */
.news-featured{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); margin-bottom:30px }
.news-lead .thumb{ border-radius:var(--radius) }
.news-lead h3, .news-lead .card-h{ font-size:clamp(1.12rem, 1.8vw, 1.3rem) }
.news-lead .excerpt{ color:var(--ink-2); font-size:.95rem }
.rail-controls{ display:flex; gap:8px; justify-content:flex-end; margin-bottom:12px }
.rail-btn{
display:grid; place-items:center; width:44px; height:44px; border-radius:999px;
border:1px solid var(--line); background:var(--paper); color:var(--teal-ink); cursor:pointer;
transition:background-color .15s ease-out;
}
.rail-btn:hover:not(:disabled){ background:var(--teal-tint) }
.rail-btn:disabled{ opacity:.35; cursor:default }
.news-rail{
display:flex; gap:16px; overflow-x:auto;
scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
padding-bottom:10px; scrollbar-width:thin;
}
.news-rail::-webkit-scrollbar{ height:8px }
.news-rail::-webkit-scrollbar-thumb{ border-width:2px }
.rail-item{ flex:0 0 262px; scroll-snap-align:start }
@media (prefers-reduced-motion: reduce){ .rail-btn{ transition:none } }
.news-card{ position:relative; display:flex; flex-direction:column; gap:10px }
.news-card .thumb{ aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius-s); background:var(--mist) }
.news-card .thumb img{ width:100%; height:100%; object-fit:cover }
.news-card time{ font-size:.82rem; color:var(--ink-3) }
.news-card h3, .news-card .card-h{ font-size:1rem }
.news-card h3 a, .news-card .card-h a{ color:var(--ink); text-decoration:none }
.news-card h3 a::after{ content:""; position:absolute; inset:0 }
.news-card h3 a:hover, .news-card .card-h a:hover{ color:var(--teal-ink) }
.news-card:has(a:focus-visible){ outline:3px solid var(--ink); outline-offset:4px; border-radius:6px }
.news-card a:focus-visible{ outline:none }
/* ---------- Blogs ---------- */
.blog-card .thumb{ aspect-ratio:16/9 }
.blog-card time{ font-size:.84rem; color:var(--ink-3) }
/* ---------- List your business ---------- */
.biz-band{ background:var(--teal); color:#fff; margin-top:clamp(48px,7vw,80px) }
.biz-inner{ padding-block:clamp(44px,6vw,64px); text-align:center }
.biz-inner h2{ color:#fff }
.biz-inner p{ margin:12px auto 26px; max-width:52ch; color:#fff; font-size:1.05rem }
/* ---------- FAQ ---------- */
.section-faq h2{ text-align:center }
.faq-tabs{
display:flex; flex-wrap:wrap; justify-content:center; gap:4px;
width:fit-content; max-width:100%; margin:22px auto 0; padding:5px;
background:var(--mist); border-radius:26px;
}
.faq-tabs [role="tab"]{
display:inline-flex; align-items:center; min-height:44px; padding:0 20px;
appearance:none; -webkit-appearance:none;
background:transparent; border:0; border-radius:999px;
cursor:pointer; color:var(--ink-2);
font-family:var(--f-display); font-weight:600; font-size:.95rem; white-space:nowrap;
transition:background-color .15s ease-out, color .15s ease-out;
}
.faq-tabs [role="tab"]:hover{ color:var(--teal-ink) }
.faq-tabs [role="tab"][aria-selected="true"]{ background:var(--teal); color:#fff }
.faq{ max-width:820px; margin:6px auto 0 }
.faq-more{ max-width:820px; margin:26px auto 0; color:var(--ink-2); text-align:center }
@media (prefers-reduced-motion: reduce){ .faq-tabs [role="tab"]{ transition:none } }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
display:flex; align-items:center; justify-content:space-between; gap:16px;
min-height:56px; padding-block:14px; cursor:pointer; list-style:none;
font-family:var(--f-display); font-weight:610; font-size:1.05rem;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
content:""; flex:none; width:12px; height:12px;
border-right:2px solid var(--teal-ink); border-bottom:2px solid var(--teal-ink);
transform:rotate(45deg); transition:transform .2s ease-out; margin-right:4px;
}
.faq details[open] summary::after{ transform:rotate(225deg) }
.faq summary:hover{ color:var(--teal-ink) }
.faq details p{ padding:0 0 20px; color:var(--ink-2); max-width:68ch }
@media (prefers-reduced-motion: reduce){ .faq summary::after{ transition:none } }
/* ---------- Directories ---------- */
.directory{ background:var(--sand); margin-top:clamp(48px,7vw,80px) }
.directory .inner{ padding-block:clamp(44px,6vw,64px) }
.dir-cols{ display:grid; gap:36px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); margin-top:8px }
.dir-cols h3{ margin-bottom:12px }
.dir-cols ul{ margin:0; padding:0; list-style:none; columns:2; column-gap:22px }
.dir-cols li{ break-inside:avoid }
.dir-cols a{
display:inline-block; padding-block:5px; font-size:.93rem; color:var(--teal-ink);
text-decoration:none;
}
.dir-cols a:hover{ text-decoration:underline; color:var(--teal) }
@media (max-width:520px){ .dir-cols ul{ columns:1 } }
/* ---------- Footer ---------- */
.site-footer{ background:var(--footer-bg); color:var(--footer-ink); margin-top:0 }
.footer-inner{ padding-block:clamp(44px,6vw,64px) 28px }
.footer-grid{ display:grid; gap:32px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) }
.footer-grid .footer-h{
color:#fff; font-size:.95rem; margin:0 0 12px;
font-family:var(--f-display); font-weight:700;
line-height:1.15; letter-spacing:-.01em;
}
.footer-grid ul{ margin:0; padding:0; list-style:none }
.footer-grid a{
display:inline-block; padding-block:5px; color:var(--footer-ink);
font-size:.92rem; text-decoration:none;
}
.footer-grid a:hover{ color:#fff; text-decoration:underline }
.footer-brand img{ width:170px; height:auto; margin-bottom:14px }
.footer-brand p{ font-size:.9rem; color:var(--footer-dim); max-width:34ch }
.footer-bottom{
display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center;
margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14);
font-size:.85rem; color:var(--footer-dim);
}
.footer-bottom a{ display:inline-flex; align-items:center; min-height:44px; color:var(--footer-ink) }
.footer-bottom a:hover{ color:#fff }
/* ---------- Mobile bottom nav (always above the ad zone) ---------- */
.bottom-nav{
position:fixed; inset-inline:0; bottom:0; z-index:90;
display:none; align-items:stretch;
height:calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
padding-bottom:env(safe-area-inset-bottom, 0px);
background:var(--paper); border-top:1px solid var(--line);
box-shadow:0 -2px 12px rgba(15,53,64,.07);
}
.bottom-nav a, .bottom-nav button{
flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
min-height:44px; background:none; border:0; cursor:pointer;
color:var(--ink-2); font-family:var(--f-display); font-size:.72rem; font-weight:580;
text-decoration:none;
}
.bottom-nav a:hover, .bottom-nav button:hover,
.bottom-nav a[aria-current="page"]{ color:var(--teal-ink) }
@media (max-width:767.98px){ .bottom-nav{ display:flex } }
/* ---------- Menu drawer & search ---------- */
.drawer{
position:fixed; inset:0; z-index:120; display:none;
background:var(--teal); color:#fff; overflow-y:auto;
}
.drawer.open{ display:block }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:14px var(--gutter) }
.drawer-head img{ width:150px; height:auto }
.drawer-close{
display:inline-flex; align-items:center; justify-content:center;
min-width:48px; min-height:48px; border-radius:12px; border:1.5px solid rgba(255,255,255,.5);
background:none; color:#fff; cursor:pointer;
}
.drawer-close:hover{ background:rgba(255,255,255,.12) }
.drawer nav{ padding:16px var(--gutter) 40px; max-width:560px; margin-inline:auto }
.drawer nav ul{ margin:0; padding:0; list-style:none }
.drawer nav a{
display:flex; align-items:center; min-height:52px;
color:#fff; font-family:var(--f-display); font-size:1.35rem; font-weight:620; text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.16);
}
.drawer nav a:hover{ padding-left:6px; color:#fff }
.drawer .drawer-secondary a{ font-size:1rem; font-weight:480; min-height:44px; border-bottom:0; color:rgba(255,255,255,.92) }
.drawer .drawer-secondary{ margin-top:24px }
.drawer .btn{ margin-top:28px }
.search-overlay{
position:fixed; inset:0; z-index:130; display:none;
background:rgba(15,53,64,.55); backdrop-filter:blur(3px);
padding:min(14vh,120px) var(--gutter) 24px;
}
.search-overlay.open{ display:block }
.search-panel{
max-width:640px; margin-inline:auto; background:var(--paper);
border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-2);
}
.search-panel form{ display:flex; gap:10px }
.search-panel input[type="search"]{
flex:1; min-height:52px; padding:0 18px;
border:1.5px solid var(--line); border-radius:12px;
font-size:1.05rem; color:var(--ink); background:var(--mist);
}
.search-panel input[type="search"]:focus{ border-color:var(--teal); outline:2px solid var(--teal); outline-offset:1px }
.search-panel .hints{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
.search-panel .hints a{
display:inline-flex; align-items:center; min-height:36px; padding:0 14px;
background:var(--teal-tint); border-radius:999px; font-size:.88rem; text-decoration:none;
}
.search-panel .hints a:hover{ background:var(--teal); color:#fff }
body.locked{ overflow:hidden }
/* Desktop: no bottom chrome padding */
@media (min-width:768px){ body{ padding-bottom:0 } }
/* ---------- Template screens: archives & singles ---------- */
.breadcrumb{ padding-top:18px; font-size:.86rem }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:4px; margin:0; padding:0; list-style:none }
.breadcrumb li{ display:inline-flex; align-items:center; color:var(--ink-3) }
.breadcrumb li+li::before{ content:"\203A"; margin:0 8px; color:var(--ink-3) } /* › as escape: LiteSpeed-combined CSS is served without a charset */
.breadcrumb a{ color:var(--teal-ink); text-decoration:none }
.breadcrumb a:hover{ text-decoration:underline }
.page-head{ margin-top:14px; margin-bottom:24px }
.page-head .section-sub{ margin-top:12px }
.filter-bar{
display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;
padding:12px; background:var(--mist); border-radius:var(--radius);
}
.filter-bar input[type="search"], .filter-bar select{
flex:1 1 200px; height:48px; padding:0 16px;
border:1.5px solid var(--line); border-radius:11px;
background:var(--paper); color:var(--ink); font-size:.98rem;
line-height:45px; /* centres single-line text in the 48px box */
}
/* selects: consistent 48px box + designed chevron everywhere */
.filter-bar select{
appearance:none; -webkit-appearance:none; cursor:pointer;
line-height:1; align-content:center; /* up to two compact lines fit the 48px box */
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300677F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px;
padding-right:44px;
}
/* browsers with customizable selects get the native-rich version */
@supports (appearance: base-select){
.filter-bar select{ appearance:base-select; background-image:none; padding-right:16px }
.filter-bar select::picker-icon{
color:var(--teal-ink);
content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2300677F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.filter-bar select::picker(select){
border:1px solid var(--line); border-radius:12px; background:var(--paper);
box-shadow:var(--shadow-2); padding:6px; margin-top:4px;
}
.filter-bar select option{ padding:10px 12px; border-radius:8px; font-size:.95rem; line-height:1.45 }
.filter-bar select option:hover,
.filter-bar select option:focus{ background:var(--teal-tint) }
.filter-bar select option:checked{ background:var(--teal); color:#fff }
}
.filter-bar input[type="search"]:focus, .filter-bar select:focus{ border-color:var(--teal); outline:2px solid var(--teal); outline-offset:1px }
.filter-bar .btn{ flex:0 0 auto }
/* desktop: everything on one row - fields shrink instead of wrapping
(the keyword input keeps a larger share) */
@media (min-width:901px){
.filter-bar{ flex-wrap:nowrap }
.filter-bar input[type="search"]{ flex:1.5 1 160px; min-width:0 }
.filter-bar select{ flex:1 1 120px; min-width:0 }
.filter-actions{ flex:0 0 auto }
/* beaches: 8 controls - two tidy rows beat one crushed one */
body.post-type-archive-beaches .filter-bar{ flex-wrap:wrap }
body.post-type-archive-beaches .filter-bar input[type="search"],
body.post-type-archive-beaches .filter-bar select{ flex:1 1 200px }
}
@media (max-width:640px){
.filter-bar{ padding:14px }
.filter-bar input[type="search"], .filter-bar select{ flex:1 1 100%; width:100% }
.filter-actions{ width:100%; margin-left:0 }
.filter-actions .btn{ flex:1 }
.filter-actions .facet-clear{ flex:0 0 auto }
}
.count-line{ margin-top:18px; margin-bottom:16px; font-size:.9rem; color:var(--ink-3) }
.card-grid + .pagination, .news-grid + .pagination{ margin-top:34px }
.pagination{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.page-btn{
display:inline-flex; align-items:center; justify-content:center;
min-width:44px; min-height:44px; padding:0 16px; border-radius:11px;
border:1px solid var(--line); background:var(--paper);
color:var(--ink-2); font-family:var(--f-display); font-weight:600; font-size:.95rem; text-decoration:none;
}
.page-btn:hover{ background:var(--mist); color:var(--teal-ink) }
.page-btn.is-current{ background:var(--teal); border-color:var(--teal); color:#fff }
.page-btn.is-disabled{ opacity:.4 }
.pagination-note{ margin-top:10px; font-size:.8rem; color:var(--ink-3) }
.single-grid{ display:grid; gap:32px; grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); margin-top:18px }
/* minmax(0,…) and min-width:0 keep a wide child (an ad iframe sized to the
full viewport) from setting the column floor: plain 1fr means
minmax(auto,1fr), whose auto minimum is min-content, which blew the mobile
column 40px past the container and pushed the fixed CTA off-screen. */
@media (max-width:900px){ .single-grid{ grid-template-columns:minmax(0,1fr) } }
.single-grid > *{ min-width:0 }
.single-main > h1{ margin-top:22px }
.single-main > h2{ margin-top:38px; margin-bottom:14px }
.single-hero{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-1) }
.single-hero img{ width:100%; height:auto; display:block }
.single-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin:18px 0 20px }
.single-meta .loc{ font-size:.95rem }
.single-aside{ display:flex; flex-direction:column; gap:16px }
.info-card{
position:sticky; top:88px;
background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
padding:22px; box-shadow:var(--shadow-1);
display:flex; flex-direction:column; gap:14px;
}
@media (max-width:900px){ .info-card{ position:static } }
.info-title{ font-family:var(--f-display); line-height:1.15; margin:0; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:640 }
.info-card dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:.94rem }
.info-card dt{ color:var(--ink-3) }
.info-card dd{ margin:0; color:var(--ink) }
.detail-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none }
.detail-pills li{
display:inline-flex; align-items:center; min-height:34px; padding:0 14px;
background:var(--mist); border-radius:999px; color:var(--ink-2); font-size:.88rem;
}
.prose{ max-width:68ch }
.prose p{ margin:0 0 16px; color:var(--ink-2) }
.prose h2{ margin:36px 0 14px }
.prose ul, .prose ol,
.prose .wp-block-list{
margin:0 0 16px; padding-left:0;
color:var(--ink-2); font-size:16px; line-height:inherit;
}
.prose li{ margin-bottom:7px }
.prose li::marker{ color:var(--teal-ink) }
.prose li > ul, .prose li > ol{ margin-top:7px; margin-bottom:0 }
.prose-note{ color:var(--ink-3); font-size:.92rem; max-width:68ch }
.single-map{
height:340px; border-radius:var(--radius); overflow:hidden;
border:1px solid var(--line); background:var(--mist); z-index:0;
}
.article-page{ max-width:800px; margin-inline:auto }
.article-head{ margin-top:18px; text-align:left }
.article-head h1{ max-width:24ch }
.article-meta{ margin-top:12px; color:var(--ink-3); font-size:.92rem }
.article-page .single-hero{ margin-top:22px }
.article-page .prose{ margin-top:26px; max-width:none }
.article-news .prose p:first-child{ font-size:1.08rem; color:var(--ink) }
.toc{ margin-top:24px; padding:18px 22px; background:var(--mist); border-radius:var(--radius-s); max-width:480px }
.toc ol, .toc ul{ margin:10px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px }
.toc ul{ list-style:none; padding-left:0 }
.toc a{ text-decoration:none; font-size:.94rem }
.toc a:hover{ text-decoration:underline }
.event-count{ color:var(--coral-ink); font-size:.82rem; font-weight:640; letter-spacing:.02em }
.single-main .event-count{ margin-top:20px }
.single-main .event-count + h1{ margin-top:6px }
.section-block{ margin-top:clamp(40px,6vw,60px); max-width:820px }
.section-block h2{ margin-bottom:12px }
.pickup-list{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none }
.pickup-list li{
display:inline-flex; align-items:center; min-height:38px; padding:0 15px;
background:var(--teal-tint); color:var(--teal-ink); border-radius:999px; font-size:.9rem; font-weight:560;
scroll-margin-top:96px;
}
.pickup-list li:target{ background:var(--teal); color:#fff }
.related-band{ background:var(--sand); margin-top:clamp(44px,7vw,70px) }
.related-band .container{ padding-block:clamp(36px,5vw,56px) }
/* ---------- Voxel-style archive facets, split map, reviews ---------- */
.facet{
display:inline-flex; align-items:center; min-height:48px; padding:0 18px;
border:1.5px solid var(--line); border-radius:999px; background:var(--paper);
color:var(--ink-2); font-family:var(--f-display); font-weight:580; font-size:.94rem; cursor:pointer;
}
.facet:hover{ border-color:var(--teal); color:var(--teal-ink) }
.facet-clear{ border-color:transparent; background:transparent; color:var(--teal-ink) }
.facet-clear:hover{ text-decoration:underline }
.filter-actions{ display:flex; align-items:center; gap:8px; margin-left:auto }
.filter-note{ margin-top:8px; font-size:.8rem; color:var(--ink-3) }
.archive-split{ display:grid; gap:24px; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); align-items:start }
@media (max-width:900px){ .archive-split{ grid-template-columns:1fr } }
.card-grid.grid-2{ grid-template-columns:repeat(2, 1fr) }
@media (max-width:640px){ .card-grid.grid-2{ grid-template-columns:1fr } }
.archive-map-wrap{ position:sticky; top:88px }
@media (max-width:900px){ .archive-map-wrap{ position:static } }
#archive-map{
height:560px; border-radius:var(--radius); overflow:hidden;
border:1px solid var(--line); background:var(--mist); z-index:0;
}
.map-sync{
position:relative; z-index:1; margin:-48px auto 0; display:flex; align-items:center; gap:8px;
min-height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line);
background:var(--paper); color:var(--ink-2); font-family:var(--f-display); font-weight:580; font-size:.86rem;
box-shadow:var(--shadow-1); cursor:default; opacity:.85;
}
.review-summary{
display:flex; flex-wrap:wrap; align-items:center; gap:18px;
padding:20px 22px; background:var(--mist); border-radius:var(--radius);
width:100%;
}
.review-avg{ font-family:var(--f-display); font-size:2.4rem; font-weight:650; line-height:1 }
.review-meta{ display:flex; flex-direction:column; gap:2px }
.review-meta p{ color:var(--ink-3); font-size:.88rem }
.review-summary .btn{ margin-left:auto }
@media (max-width:560px){ .review-summary .btn{ margin-left:0 } }
/* ---------- Voxel parity round 2: full-bleed archives, galleries, blog sidebar ---------- */
/* Map archives — guide-first split: results are an honest page column on the
left (~58%, normal page scroll, pagination in flow); the map holds the
right ~42% and stays pinned full-height while the list scrolls. */
.archive-full{ width:100vw; margin-inline:calc(50% - 50vw); margin-top:8px; border-top:1px solid var(--line) }
.archive-full-grid{ display:grid; grid-template-columns:58fr 42fr }
.archive-results{
padding-block:24px 44px;
padding-left:max(var(--gutter), calc((100vw - var(--container)) / 2));
padding-right:clamp(18px, 2vw, 32px);
}
.archive-results .count-line{ margin:0 0 14px }
.archive-results .card-grid.grid-2{ grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)) }
.archive-results .pagination{ margin-top:22px }
.archive-map-full{ position:sticky; top:74px; height:calc(100vh - 74px) }
.archive-map-full #archive-map{ width:100%; height:100%; border-radius:0; border:0; border-left:1px solid var(--line) }
.archive-map-full .map-sync{ position:absolute; left:50%; transform:translateX(-50%); bottom:20px; margin:0; z-index:6 }
@media (max-width:900px){
.archive-full-grid{ grid-template-columns:1fr }
.archive-results{ padding-inline:var(--gutter) }
.archive-map-full{ position:relative; top:0; height:340px }
.archive-map-full #archive-map{ border-left:0; border-top:1px solid var(--line) }
}
.count-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.count-row .facet{ gap:8px }
.map-overlay{
position:fixed; inset:0; z-index:125; display:none; flex-direction:column;
background:var(--footer-bg);
}
.map-overlay.open{ display:flex }
.map-overlay-head{
display:flex; align-items:center; justify-content:space-between;
padding:14px var(--gutter); color:#fff;
}
.map-overlay-head h2{ color:#fff; font-size:1.2rem }
#overlay-map{ flex:1; background:var(--mist) }
/* singles */
.title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-top:24px }
.title-row h1{ max-width:22ch }
.title-row .event-count{ margin-bottom:6px }
.listing-actions{ display:flex; gap:8px; flex:none; padding-top:6px }
.action-chip{
display:inline-flex; align-items:center; justify-content:center;
width:44px; height:44px; border-radius:999px;
border:1px solid var(--line); background:var(--paper); color:var(--teal-ink); cursor:pointer;
transition:background-color .15s ease-out;
}
.action-chip:hover{ background:var(--teal-tint) }
.single-main .breadcrumb{ padding-top:8px }
.gallery-grid{
display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:10px;
height:clamp(300px, 36vw, 440px); margin-top:16px;
border-radius:var(--radius); overflow:hidden;
}
.g-cell{ position:relative; overflow:hidden; min-height:0 }
.g-cell picture, .g-cell img{ width:100%; height:100%; object-fit:cover; display:block }
.g-main{ grid-row:1 / 3 }
.g-more-link{
position:absolute; inset:0; display:grid; place-items:center;
background:rgba(10,30,36,.45); color:#fff; text-decoration:none;
font-family:var(--f-display); font-weight:630; font-size:1.02rem;
}
.g-more-link:hover{ background:rgba(10,30,36,.6); color:#fff }
@media (max-width:640px){
.gallery-grid{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; height:auto }
.g-main{ grid-column:1 / 3; grid-row:1; aspect-ratio:16/10 }
.g-cell:not(.g-main){ aspect-ratio:16/10 }
}
.dir-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.92rem; color:var(--ink-3); min-height:44px }
/* the button always carries its 4px border (transparent at rest) so the
pinned/hover states only change colour, never size */
/* no border-color in the transition: Safari sticks a border-color
transition at its start value when the target is a var() */
.promote-card .btn{ border:4px solid transparent; transition:background-color .2s ease-in-out, color .2s ease-in-out }
.promote-card{
background:linear-gradient(150deg, var(--teal-tint), var(--sand));
border:1px solid var(--line); border-radius:var(--radius); padding:20px;
display:flex; flex-direction:column; gap:8px;
}
.promote-icon{
display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
background:#fff; color:var(--teal-ink); box-shadow:0 3px 10px rgba(15,53,64,.10);
margin-bottom:2px;
}
.promote-title{ margin:0; color:var(--ink); font-weight:700; font-family:var(--f-display); font-size:1.04rem }
.promote-sub{ margin:0 0 8px; color:var(--ink-3); font-size:.9rem; line-height:1.45 }
.promote-card .cl26-jslink{ cursor:pointer }
/* blog sidebar */
.article-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:44px; align-items:start }
@media (max-width:900px){ .article-grid{ grid-template-columns:1fr } }
.article-main{ margin-inline:0; max-width:760px }
.article-aside{ position:sticky; top:88px; display:flex; flex-direction:column; gap:20px }
@media (max-width:900px){ .article-aside{ position:static } }
.article-aside .toc{ margin-top:0; max-width:none }
.ad-side{ margin-block:0; min-height:600px }
.mini-list ul{ margin:10px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px }
.mini-list a{ display:block; padding-block:7px; font-size:.93rem; text-decoration:none }
.mini-list a:hover{ text-decoration:underline }
/* WP build: placeholder for listings without a featured image. */
.thumb-empty{ display:block; width:100%; height:100%; background:linear-gradient(135deg, var(--mist), var(--teal-tint)) }
/* Gallery lightbox */
.cl26-lightbox{
position:fixed; inset:0; z-index:140; display:none; align-items:center; justify-content:center;
background:rgba(10,25,30,.94); padding:24px;
}
.cl26-lightbox.open{ display:flex }
.cl26-lightbox figure{ margin:0; max-width:min(1200px, 92vw); text-align:center }
.cl26-lightbox img{ max-width:100%; max-height:82vh; border-radius:10px; box-shadow:0 18px 60px rgba(0,0,0,.5) }
.cl26-lightbox .lb-count{ color:#CDE1E6; margin-top:12px; font-size:.9rem }
.cl26-lightbox button{
position:absolute; display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
border:1px solid rgba(255,255,255,.25); background:rgba(15,53,64,.7); color:#fff; font-size:1.5rem;
cursor:pointer; transition:background .15s ease;
}
.cl26-lightbox button:hover{ background:var(--teal) }
.cl26-lightbox .lb-close{ top:20px; right:20px; font-size:1.1rem }
.cl26-lightbox .lb-prev{ left:16px; top:50%; transform:translateY(-50%) }
.cl26-lightbox .lb-next{ right:16px; top:50%; transform:translateY(-50%) }
@media (max-width:640px){
.cl26-lightbox .lb-prev{ left:6px } .cl26-lightbox .lb-next{ right:6px }
}
/* Mapbox chrome fits the design system */
.mapboxgl-popup-content{ font-family:inherit; border-radius:10px; padding:10px 14px; box-shadow:0 8px 28px rgba(23,39,43,.18) }
.mapboxgl-popup-content a{ color:var(--teal-ink) }
.mapboxgl-ctrl-group{ border-radius:10px; overflow:hidden }
/* Nearby carousels on singles: their own visual band, distinct from the page */
.nearby-band{ background:var(--mist); border-top:1px solid var(--line); padding-block:34px 38px; margin-top:34px }
.nearby-band + .nearby-band{ margin-top:0; border-top:0; padding-top:4px }
.nearby-band .section-head{ margin-bottom:4px }
.nearby-band .rail-controls{ margin-bottom:10px }
.cl26-rail{
display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
padding-block:4px 14px; scrollbar-color:#8FB6BF transparent;
}
.cl26-rail::-webkit-scrollbar{ height:8px }
.cl26-rail::-webkit-scrollbar-thumb{ border-width:2px }
.cl26-rail .rail-item{ flex:0 0 262px; scroll-snap-align:start }
.cl26-rail .listing{ height:100%; background:#fff }
/* At-a-glance identity block */
.info-name{ font-weight:700; font-size:1.06rem; margin:10px 0 2px; color:var(--ink) }
.info-stars{ display:flex; align-items:center; gap:7px; margin:4px 0 6px }
.info-stars .num{ font-weight:700 }
.info-stars .count{ color:var(--ink-3, #5C6E73); font-size:.88rem }
.stars{ position:relative; display:inline-block; line-height:0; white-space:nowrap }
.stars svg{ display:inline-block }
.stars-bg{ color:var(--line) }
.stars-fg{ position:absolute; top:0; left:0; overflow:hidden; color:var(--star, #B26A00); white-space:nowrap }
/* Listing plans (/offers/) */
.page-head-center{ text-align:center; max-width:720px; margin-inline:auto }
.plan-grid{
display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:22px; align-items:start; margin-top:28px;
}
.plan-card{
position:relative; background:#fff; border:1px solid var(--line);
border-radius:var(--radius); padding:26px 24px 24px;
box-shadow:0 6px 24px rgba(23,39,43,.07);
}
.plan-card.is-recommended{ border-color:var(--teal); border-width:2px; box-shadow:0 14px 40px rgba(0,128,157,.16) }
.plan-badge{
position:absolute; top:-13px; left:22px; background:var(--teal); color:#fff;
font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
padding:5px 12px; border-radius:999px;
}
.plan-card h3{ font-size:1.2rem; margin:2px 0 8px }
.plan-price{ display:flex; align-items:baseline; gap:7px; margin:0 0 4px }
.plan-price .num{ font-size:2.1rem; font-weight:800; color:var(--ink) }
.plan-per{ color:var(--ink-3, #5C6E73) }
.plan-lead{ color:var(--ink-3, #5C6E73); font-size:.94rem; margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--line) }
.plan-features{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:12px }
.plan-features li{ display:flex; gap:10px; font-size:.95rem; line-height:1.45 }
.plan-features svg{ flex:none; margin-top:2px; color:var(--teal) }
.plan-note{ text-align:center; color:var(--ink-3, #5C6E73); font-size:.92rem; margin-top:26px }
.band-intro{ max-width:760px; margin-bottom:6px }
.band-intro p{ font-size:.96rem; color:var(--ink-3, #5C6E73) }
/* At-a-glance tooltips: hover or keyboard focus explains each row in a
sentence that names the POI. */
.info-card [data-tip]{ position:relative; cursor:help }
.info-card dd[data-tip]{ text-decoration:underline dotted rgba(92,110,115,.55); text-underline-offset:3px }
.info-card [data-tip]:hover::after,
.info-card [data-tip]:focus-visible::after{
content:attr(data-tip);
position:absolute; left:0; bottom:calc(100% + 8px); z-index:30;
width:max-content; max-width:250px;
background:#0F3540; color:#CDE1E6;
font-size:.82rem; font-weight:400; line-height:1.45; text-decoration:none;
padding:9px 12px; border-radius:9px;
box-shadow:0 10px 30px rgba(10,25,30,.35);
white-space:normal; pointer-events:none;
}
.info-card [data-tip]:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:4px }
/* Detail pills: hidden overflow + toggle + linked pills */
.detail-pills li[hidden]{ display:none }
.detail-pills .cl26-jslink{ cursor:pointer }
.detail-pills li:has(.cl26-jslink):hover{ border-color:var(--teal); color:var(--teal-ink) }
.detail-pills .cl26-jslink:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; border-radius:6px }
.pill-more button{
border:0; background:transparent; color:var(--teal-ink); font:inherit; font-weight:600;
cursor:pointer; padding:0 4px; min-height:34px;
}
.pill-more button:hover{ text-decoration:underline }
/* Location section: address + directions */
.loc-address{ margin:2px 0 12px; color:var(--ink-3, #5C6E73) }
.dir-row .cl26-jslink{ color:var(--teal-ink); cursor:pointer; text-decoration:underline; text-underline-offset:2px }
.dir-row .cl26-jslink:hover{ color:var(--teal) }
/* Content links */
.prose a{
text-decoration:underline;
text-underline-offset:4px;
text-decoration-thickness:2px;
text-decoration-color:var(--teal-ink);
}
.prose a:hover{ color:var(--teal-ink) }
/* Single meta: location chip with a pin icon */
.single-meta .loc{
display:inline-flex; align-items:center; gap:7px;
background:var(--mist); color:var(--ink-2, #44585D);
padding:6px 13px 6px 11px; border-radius:999px; font-size:.92rem;
}
.single-meta .loc::before{
content:""; flex:none; width:15px; height:15px;
background-color:var(--teal-ink);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.9 2 4.5 5.4 4.5 9.5c0 5.1 6.2 11.6 6.9 12.3.3.3.9.3 1.2 0 .7-.7 6.9-7.2 6.9-12.3C19.5 5.4 16.1 2 12 2zm0 10.2a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.9 2 4.5 5.4 4.5 9.5c0 5.1 6.2 11.6 6.9 12.3.3.3.9.3 1.2 0 .7-.7 6.9-7.2 6.9-12.3C19.5 5.4 16.1 2 12 2zm0 10.2a2.7 2.7 0 1 1 0-5.4 2.7 2.7 0 0 1 0 5.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Async pagination */
button.btn.cl26-loadmore,
.btn.cl26-loadmore,
.cl26-loadmore button{
display:block;
width:100%;
margin:26px auto 0;
background:var(--teal-tint);
color:var(--teal-ink);
box-shadow:none;
}
button.btn.cl26-loadmore:hover,
.btn.cl26-loadmore:hover,
.cl26-loadmore button:hover{
background:var(--teal-deep);
color:#fff;
}
button.btn.cl26-loadmore:disabled,
.btn.cl26-loadmore:disabled{
background:var(--teal-tint);
color:var(--teal-ink);
opacity:.7;
}
/* Mobile conversion CTA: the aside's primary action pinned above the bottom
nav on small screens. */
.cta-sticky{ display:none }
@media (max-width:900px){
.cta-sticky{
display:block; position:fixed; inset-inline:0; z-index:85;
bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
padding:10px var(--gutter);
background:linear-gradient(to top, rgba(247,244,238,.97) 65%, rgba(247,244,238,0));
}
.cta-sticky .btn{ box-shadow:0 6px 20px rgba(214,52,56,.35) }
body.locked .cta-sticky{ display:none }
}
/* Primary-nav dropdown ("What to do?") */
.primary-nav li{ position:relative }
.primary-nav .has-sub > a::after{
content:""; display:inline-block; margin-left:7px; width:7px; height:7px;
border-right:2px solid currentColor; border-bottom:2px solid currentColor;
transform:rotate(45deg) translateY(-2px); transition:transform .15s ease;
}
.primary-nav .has-sub.open > a::after{ transform:rotate(225deg) translateY(-1px) }
.primary-nav .sub-menu{
position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
min-width:212px; margin:0; padding:8px; list-style:none;
background:#0F3540; border:1px solid rgba(255,255,255,.14); border-radius:12px;
box-shadow:0 18px 44px rgba(10,25,30,.42);
display:none; flex-direction:column; z-index:95;
}
.primary-nav .sub-menu::before{
content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
}
.primary-nav .has-sub:hover .sub-menu,
.primary-nav .has-sub:focus-within .sub-menu,
.primary-nav .has-sub.open .sub-menu{ display:flex }
.primary-nav .sub-menu a{
display:block; padding:9px 14px; border-radius:8px;
color:#CDE1E6; text-decoration:none; font-size:.95rem; white-space:nowrap;
}
.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu a:focus-visible{ background:rgba(255,255,255,.09); color:#fff }
.primary-nav .sub-menu a[aria-current="page"]{ color:#fff; font-weight:700 }
/* Drawer group label */
.drawer-label{
margin:0 0 6px; font-size:.78rem; font-weight:700; letter-spacing:.08em;
text-transform:uppercase; color:rgba(255,255,255,.55);
}
.aside-partner{ display:flex; justify-content:center; border-radius:var(--radius-s); overflow:hidden }
/* Insider tips callout */
.tips-box{
background:var(--teal-tint); border-radius:var(--radius);
padding:22px 24px 10px; margin:0 0 24px;
}
.tips-box h2, .tips-box h3{
margin:0 0 12px !important; color:var(--teal-ink);
display:flex; align-items:center; gap:10px;
}
.tips-box h2::before, .tips-box h3::before{
content:""; flex:none; width:18px; height:18px; background-color:var(--teal-ink);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2V18h6v-1.3c0-.8.4-1.5 1-2A7 7 0 0 0 12 2zm-2 18h4v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.2 1 2V18h6v-1.3c0-.8.4-1.5 1-2A7 7 0 0 0 12 2zm-2 18h4v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tips-box ul, .tips-box ol{ list-style:none; padding-left:0; counter-reset:tips }
.tips-box li{
counter-increment:tips; position:relative;
padding-left:40px; margin-bottom:12px; min-height:26px;
}
.tips-box li::before{
content:counter(tips); position:absolute; left:0; top:50%;
transform:translateY(-50%);
width:26px; height:26px; border-radius:50%;
background:var(--teal); color:#fff;
font-weight:700; font-size:.84rem; line-height:1;
display:grid; place-items:center;
}
.tips-box li::marker{ content:"" }
/* Write-a-review form */
.review-modal{
position:fixed; inset:0; z-index:135; display:flex; align-items:center; justify-content:center;
background:rgba(10,25,30,.55); padding:20px;
}
.review-modal[hidden]{ display:none }
.review-panel{
position:relative; width:min(560px, 100%); max-height:88vh; overflow-y:auto;
background:#fff; border-radius:var(--radius); box-shadow:0 24px 70px rgba(10,25,30,.35);
padding:26px 26px 24px;
}
.review-close{
position:absolute; top:14px; right:14px; display:grid; place-items:center;
width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
background:#fff; color:var(--ink-2); cursor:pointer;
}
.review-close:hover{ background:var(--mist) }
.review-form{
display:flex; flex-direction:column; gap:14px;
}
.review-form h3{ margin:0; font-size:1.05rem }
.rate-input{ border:0; margin:0; padding:0; display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:2px }
.rate-input legend{ font-size:.9rem; color:var(--ink-3); margin-bottom:6px }
.rate-input input{ position:absolute; opacity:0; width:1px; height:1px }
.rate-input label{ cursor:pointer; color:var(--line); transition:color .1s ease }
.rate-input input:checked ~ label,
.rate-input label:hover, .rate-input label:hover ~ label{ color:var(--star, #B26A00) }
.rate-input input:focus-visible + label{ outline:2px solid var(--teal); outline-offset:2px; border-radius:4px }
.review-who{ display:flex; gap:12px; flex-wrap:wrap }
.review-who label, .review-text{ display:flex; flex-direction:column; gap:5px; font-size:.9rem; color:var(--ink-3); flex:1; min-width:180px }
.review-form input[type=text], .review-form input[type=email], .review-form textarea{
border:1px solid var(--line); border-radius:9px; padding:10px 12px; font:inherit; color:var(--ink); background:#fff;
}
.review-form textarea{ resize:vertical }
.review-form input:focus-visible, .review-form textarea:focus-visible{ outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal) }
.review-form .btn{ align-self:flex-start }
.review-msg{ margin:0; font-size:.92rem; color:var(--coral-ink, #D63438) }
.review-msg.is-ok{ color:var(--teal-ink) }
/* Review list (Voxel timeline reviews) */
.review-list{ list-style:none; margin:18px 0 6px; padding:0; display:flex; flex-direction:column; gap:16px; max-width:680px }
.review-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-s); padding:16px 18px }
.review-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
.review-head img.avatar{ border-radius:50%; flex:none }
.review-who-line{ display:flex; flex-direction:column; gap:1px; margin-right:auto }
.review-who-line strong{ font-size:.98rem }
.review-who-line time{ font-size:.82rem; color:var(--ink-3) }
.review-item > p{ margin:0; color:var(--ink-2); font-size:.96rem; line-height:1.55 }
.rate-input + .rate-input{ margin-top:4px }
/* Sticky info-card condenses once it pins: only the CTA stays */
@media (min-width:901px){
/* Animated condense/expand — grid-rows collapse (smooth in all engines) */
.glance-rows{
display:grid; grid-template-rows:1fr;
transition:grid-template-rows .3s ease .12s, opacity .2s ease .12s;
opacity:1;
}
.glance-rows > div{ overflow:hidden; min-height:0 }
/* expanded steady state releases the clip so row tooltips can escape */
.info-card:not(.is-condensed) .glance-rows:not(.vx-animating) > div{ overflow:visible }
.info-card.is-condensed .glance-rows{ grid-template-rows:0fr; opacity:0 }
.info-card{ transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease }
/* condensed: only the CTA button remains — the name/rating live in the
fixed title bar while scrolled */
.info-card.is-condensed{
padding:0; border-color:transparent; background:transparent;
box-shadow:none; margin-top:1rem;
}
.info-card.is-condensed .info-name,
.info-card.is-condensed .info-stars{ display:none }
/* any .btn in the card is a CTA: anchor, modal button, or JS link */
.info-card.is-condensed .btn{ margin:0 }
/* no CTA -> nothing left to show */
.info-card.is-condensed:not(:has(.btn)){ display:none }
@keyframes cl26-fade-in{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){
.glance-rows, .info-card .info-name, .info-card .info-stars{ transition:none; animation:none }
}
/* Pinned state: the whole aside sticks so the ads ride along under the
condensed card; the promote card and placeholder slot step aside to
keep the pinned column within the viewport. */
.single-aside{ align-self:start }
.single-aside.is-pinned{ position:sticky; top:88px }
/* Experiences: with a GYG card in the aside, the aside itself must not
pin - the widget card scrolls UNDER the sticky Book-this-tour CTA.
The info-card's own sticky carries the CTA; stretching the aside
gives that sticky slack for the whole article. */
.single-aside:has(.gyg-card){ align-self:stretch }
.single-aside:has(.gyg-card).is-pinned{ position:static }
.single-aside .info-card{ z-index:2 }
.gyg-card{ position:relative; z-index:0 }
/* pinned: the promote card collapses to just its button (animated) */
.promote-card{
background:var(--teal-tint);
transition:border-color .25s ease, background-color .25s ease;
}
.promote-body{
display:grid; grid-template-rows:1fr;
transition:grid-template-rows .3s ease .12s, opacity .2s ease .12s;
opacity:1;
}
.promote-body > div{ overflow:hidden; min-height:0 }
.single-aside.is-pinned .promote-card{
background-color:transparent; border-color:transparent; padding:0;
}
.single-aside.is-pinned .promote-card .btn{
background:#fff; border:4px solid var(--teal-tint);
box-shadow:none;
}
.single-aside.is-pinned .promote-card .btn:hover{ background:var(--teal-tint) }
.single-aside.is-pinned .promote-body{ grid-template-rows:0fr; opacity:0 }
@media (prefers-reduced-motion: reduce){ .promote-card, .promote-body{ transition:none } }
}
/* Tips lists hug the box's left edge (beats the .prose .wp-block-list indent) */
.prose .tips-box ul, .prose .tips-box ol,
.tips-box .wp-block-list{ padding-left:0; list-style:none }
/* aside slots keep their flex-gap rhythm */
.single-aside .ad-slot, .article-aside .ad-slot{ margin-block:0 }
.review-actions{ display:flex; gap:10px; flex-wrap:wrap }
.review-delete{ color:var(--coral-ink, #D63438) }
.review-pending{ margin:10px 0 0; font-size:.9rem; color:var(--ink-3) }
/* Rich guide cards (things-to-do bands) */
.cl26-rail .rail-item-lg{ flex:0 0 308px }
.rich-card .listing-body{ display:flex; flex-direction:column; gap:8px }
.rich-title{ margin:0; font-family:var(--f-display); font-weight:700; font-size:1.05rem; line-height:1.35 }
.rich-title a{ text-decoration:none; color:var(--ink) }
.rich-title a:hover{ color:var(--teal-ink) }
.rich-loc{ font-size:.88rem }
.rich-desc{ margin:0; color:var(--ink-3); font-size:.92rem; line-height:1.5 }
.rich-cta{ margin-top:auto; align-self:flex-start; width:100%; min-height:44px; padding-inline:18px; box-shadow:none !important }
.rich-card .thumb{ display:block }
.thumb.img-missing, .g-cell.img-missing{
position:relative;
background:linear-gradient(135deg, var(--mist), var(--teal-tint));
}
.thumb.img-missing::after, .g-cell.img-missing::after{
content:""; position:absolute; inset:0; margin:auto;
width:44px; height:44px; opacity:.4;
background-color:var(--teal-ink);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m3.5 17.5 4.8-4.6a1.2 1.2 0 0 1 1.7 0l3.2 3.1 2.6-2.5a1.2 1.2 0 0 1 1.7 0l3 2.9'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m3.5 17.5 4.8-4.6a1.2 1.2 0 0 1 1.7 0l3.2 3.1 2.6-2.5a1.2 1.2 0 0 1 1.7 0l3 2.9'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* ---- Sticky chip bar: full-width one-row section/filter nav (round 27) ---- */
.chip-bar{
position:sticky; top:79px; z-index:60;
background:var(--teal-tint);
}
.chip-bar-inner{ display:flex; align-items:center; gap:10px; padding-block:9px }
.chip-mid{ display:flex; align-items:center; gap:10px; flex:1; min-width:0 }
.chip-track{
position:relative;
display:flex; gap:8px; flex:1; min-width:0;
overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.chip-bar.no-overflow .chip-track{ justify-content:center }
.chip-track::-webkit-scrollbar{ display:none }
.band-chip{
display:inline-flex; align-items:center; gap:6px; flex:none;
padding:7px 14px; border:1px solid var(--line);
border-radius:999px; background:var(--paper);
font-size:.86rem; font-weight:600; color:var(--teal-ink);
text-decoration:none; white-space:nowrap;
transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.band-chip:hover,
.band-chip:focus-visible{
border-color:var(--teal); color:var(--teal-ink);
text-decoration:none;
}
.band-chip.is-active{
background:var(--teal); border-color:var(--teal); color:#fff;
}
.chip-btn{ flex:none; width:36px; height:36px }
.chip-home{ padding:7px 12px; cursor:pointer }
.chip-home svg{ display:block }
.chip-bar.no-overflow .chip-btn{ display:none }
@media (max-width:640px){
.chip-bar .chip-btn{ display:none }
}
.band-anchor{ scroll-margin-top:160px }
/* in-article sections (amenities / location / FAQs / reviews) breathe:
consistent gaps between them and under their headings */
.single-main .band-anchor{ margin-top:40px }
.single-main .band-anchor > h2:first-child{ margin-bottom:16px }
.single-main .band-anchor .review-summary{ margin-top:0 }
@media (min-width:901px){ .band-anchor{ scroll-margin-top:162px } }
/* ---- One-row bar: title + centered jump links + rating/actions ---- */
.bar-title, .bar-actions{ display:none }
@media (min-width:901px){
/* at rest the jump links own the full bar; the title/actions columns
grow in (animated grid tracks) once the page scrolls */
.chip-bar-inner.has-title{
display:grid;
grid-template-columns:minmax(0px,0fr) minmax(0,2fr) minmax(0px,0fr);
column-gap:0px; align-items:center; min-height:62px;
/* no transition here: animating grid tracks re-lays-out the whole bar
(and re-wraps the clamped title) every frame — the states snap and
the compositor-cheap fades below carry the motion instead */
}
body.cl26-title-stuck .chip-bar-inner.has-title{
grid-template-columns:minmax(200px,1fr) minmax(0,2fr) minmax(200px,1fr);
column-gap:16px;
}
/* chips still overflow with all zones open: give them the actions zone */
body.cl26-title-stuck .chip-bar.bar-tight .chip-bar-inner.has-title{
grid-template-columns:minmax(200px,1fr) minmax(0,2fr) 0fr;
}
.chip-bar.bar-tight .bar-actions{ opacity:0; visibility:hidden }
.chip-bar-inner.has-title .chip-mid{ justify-self:center; max-width:100%; min-width:0 }
.bar-title{
display:flex; align-items:center; gap:12px; min-width:0;
overflow:hidden;
opacity:0; transform:translateY(8px);
visibility:hidden; pointer-events:none;
will-change:opacity, transform;
transition:opacity .22s ease-out, transform .22s ease-out, visibility 0s .22s;
}
.bar-title-name{
min-width:0; overflow:hidden;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
font-weight:700; font-size:1.05rem; line-height:1.25;
}
.bar-stars{
display:inline-flex; align-items:center; gap:6px; flex:none;
font-weight:700; font-size:.95rem;
}
.bar-stars::before{
content:""; width:15px; height:15px; flex:none;
background-color:var(--star, #B26A00);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 15 9l7 .8-5.2 4.8 1.4 6.9L12 18l-6.2 3.5L7.2 14.6 2 9.8 9 9z'/%3E%3C/svg%3E") center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 15 9l7 .8-5.2 4.8 1.4 6.9L12 18l-6.2 3.5L7.2 14.6 2 9.8 9 9z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.bar-stars .count{ font-weight:600; color:var(--ink-3) }
.bar-actions{
display:flex; justify-self:end; margin:0;
overflow:hidden;
opacity:0; transform:translateY(8px);
visibility:hidden; pointer-events:none;
will-change:opacity, transform;
transition:opacity .22s ease-out, transform .22s ease-out, visibility 0s .22s;
}
body.cl26-title-stuck .bar-title,
body.cl26-title-stuck .bar-actions{
opacity:1; transform:none; visibility:visible; pointer-events:auto;
transition:opacity .25s ease-out .06s, transform .25s ease-out .06s;
}
@media (prefers-reduced-motion: reduce){
.bar-title, .bar-actions, .brand{ transition:none }
}
}
/* Sidebar stickies clear the chip bar on pages that have one. */
.chip-bar ~ .container .info-card{ top:160px }
@media (min-width:901px){
.chip-bar ~ .container .single-aside.is-pinned{ top:160px }
}
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
/* Map archives: the sticky map clears the sticky chip bar. */
.chip-bar ~ .archive-full .archive-map-full{
top:calc(79px + 56px); height:calc(100vh - 79px - 56px);
}
/* ---- Auth page (round 35) ---- */
.auth-grid{ display:grid; gap:28px; margin-block:28px 48px }
@media (min-width:901px){ .auth-grid{ grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:48px; align-items:start } }
.auth-card{
background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
padding:30px 28px; box-shadow:var(--shadow-1);
}
.auth-card h1{ font-size:1.6rem; margin-bottom:6px }
.auth-sub{ color:var(--ink-2); margin:0 0 20px }
.auth-card form p{ margin:0 0 16px }
.auth-card label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:6px }
.auth-card input[type=text], .auth-card input[type=password]{
width:100%; min-height:48px; padding:10px 14px;
border:1px solid var(--line); border-radius:.5rem; font:inherit; background:#fff;
}
.auth-card input[type=text]:focus, .auth-card input[type=password]:focus{ outline:2px solid var(--teal); outline-offset:1px }
.auth-card .login-remember label{ display:flex; align-items:center; gap:8px; margin:0; font-weight:500 }
.auth-card .login-submit input{
width:100%; min-height:48px; border:0; border-radius:.5rem; cursor:pointer;
background:var(--coral-ink); color:#fff; font-family:var(--f-display); font-weight:640; font-size:1rem;
}
.auth-links{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:16px 0 0; padding:0; list-style:none; font-size:.94rem }
.auth-benefits{ padding-top:6px }
.auth-signedin p{ margin:0 0 18px; color:var(--ink-2) }
/* Promote button hover (user-specified) */
.promote-card .btn:hover {
background: var(--teal-ink)!important;
color: var(--teal-tint)!important;
border: 4px solid var(--teal-ink)!important;
transition: all .2s ease-in-out!important;
}
/* ---- Blog comments: form + thread (round 35) ---- */
.comments-area{ margin-top:36px }
.comments-title{ font-size:1.3rem; margin:0 0 18px }
.comment-list{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:16px }
.comment-list .children{
list-style:none; margin:16px 0 0; padding-left:24px;
border-left:3px solid var(--teal-tint);
display:flex; flex-direction:column; gap:16px;
}
.comment-body{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-s); padding:16px 18px }
.comment-author{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:.98rem }
.comment-author .avatar{ border-radius:50%; flex:none }
.comment-author .says{ display:none }
.comment-metadata{ font-size:.82rem; margin:4px 0 10px }
.comment-metadata a{ color:var(--ink-3); text-decoration:none }
.comment-metadata a:hover{ color:var(--teal-ink); text-decoration:underline }
.comment-content p{ margin:0 0 8px; color:var(--ink-2); font-size:.96rem; line-height:1.55 }
.comment-content p:last-child{ margin-bottom:0 }
.comment .reply{ margin-top:10px }
.comment .reply a{ font-size:.88rem; font-weight:600; color:var(--teal-ink); text-decoration:none }
.comment .reply a:hover{ text-decoration:underline }
.comment-awaiting-moderation{ color:var(--ink-3); font-size:.88rem; font-style:italic }
.comment-respond{
margin-top:34px; padding:26px 24px;
background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
}
.comment-reply-title{ font-size:1.25rem; margin:0 0 14px }
.comment-reply-title small{ font-size:.85rem; font-weight:500; margin-left:10px }
.comment-form .logged-in-as, .comment-form .comment-notes{ color:var(--ink-3); font-size:.9rem; margin:0 0 16px }
.comment-form p{ margin:0 0 16px }
.comment-form label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:6px }
.comment-form .required{ color:var(--coral-ink) }
.comment-form textarea,
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url]{
width:100%; padding:12px 14px;
border:1px solid var(--line); border-radius:.5rem;
font:inherit; background:#fff; color:var(--ink);
}
.comment-form textarea{ min-height:140px; resize:vertical }
.comment-form textarea:focus,
.comment-form input[type=text]:focus,
.comment-form input[type=email]:focus,
.comment-form input[type=url]:focus{ outline:2px solid var(--teal); outline-offset:1px }
.comment-form .comment-form-cookies-consent{ display:flex; align-items:flex-start; gap:8px }
.comment-form .comment-form-cookies-consent label{ display:inline; font-weight:500; margin:0 }
.comment-form .form-submit{ margin:4px 0 0 }
.comment-form .submit{
display:inline-flex; align-items:center; justify-content:center;
min-height:48px; padding:12px 28px; border:0; border-radius:.5rem; cursor:pointer;
background:var(--coral-ink); color:#fff;
font-family:var(--f-display); font-weight:640; font-size:1rem;
transition:background-color .15s ease-out;
}
.comment-form .submit:hover{ background:var(--coral, #FF6064) }
/* ---- 404 page + term archives (round 37) ---- */
.notfound{ max-width:720px; margin:48px auto 72px; text-align:center }
.notfound-code{
margin:0; font-family:var(--f-display); font-weight:700;
font-size:clamp(4.5rem, 12vw, 7rem); line-height:1; color:var(--teal-tint);
-webkit-text-stroke:2px var(--teal);
}
.notfound h1{ margin:6px 0 10px }
.notfound .section-sub{ margin-inline:auto }
.notfound-redirect{ margin:14px auto 0; max-width:52ch; font-weight:600; color:var(--teal-ink) }
.notfound-search{ margin:26px 0 22px }
.notfound-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px }
.notfound-home{ margin-top:26px }
.term-about{ max-width:860px; margin:4px 0 30px }
.term-about .prose > div{ margin:0 } /* legacy page-builder wrappers flow as plain blocks */
/* Author archive: roomier rhythm between headings, text and the grid */
body.author .page-head{ margin-block:30px 10px }
body.author .page-head h1{ margin-bottom:14px }
body.author .page-head .section-sub{ margin-top:0; max-width:640px }
body.author .card-grid{ margin-top:26px }
/* ---- /news/ as a newspaper front page (round 41) ---- */
.news-masthead{ text-align:center; margin-top:10px }
.news-masthead .masthead-date{
margin:0 0 4px; font-size:.82rem; letter-spacing:.12em;
text-transform:uppercase; color:var(--ink-3);
}
.news-masthead h1{ font-size:clamp(2.3rem, 5vw, 3.4rem); letter-spacing:-.02em }
.news-masthead .section-sub{ margin-inline:auto }
.paper-rule{
height:6px; border-block:1px solid var(--ink-2);
margin:22px 0 26px;
}
.paper-rule-thin{ height:0; border-bottom:0; border-top:1px solid var(--line); margin:30px 0 24px }
.paper-kicker{
margin:0 0 12px; font-family:var(--f-display); font-weight:700;
font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--teal-ink);
}
.paper-front{ display:grid; gap:28px }
@media (min-width:901px){
.paper-front{ grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:0 }
.paper-front .paper-lead{ padding-right:36px; border-right:1px solid var(--line) }
.paper-front .paper-latest{ padding-left:36px }
}
.paper-lead .thumb{ border-radius:var(--radius-s); overflow:hidden; background:var(--mist) }
.paper-lead .thumb img{ width:100%; height:auto; display:block }
.paper-lead-title{ margin:16px 0 10px; font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.12 }
.paper-lead-title a{ color:var(--ink); text-decoration:none }
.paper-lead-title a:hover{ color:var(--teal-ink); text-decoration:underline; text-underline-offset:4px }
.paper-lead .excerpt{ margin:0 0 12px; color:var(--ink-2); font-size:1.05rem; line-height:1.6; max-width:62ch }
.paper-lead time, .paper-latest time, .paper-item time{
font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.paper-latest ol{ list-style:none; margin:0; padding:0 }
.paper-latest li{ padding-block:13px; border-top:1px solid var(--line) }
.paper-latest li:first-child{ border-top:0; padding-top:2px }
.paper-latest h3{ margin:0 0 4px; font-size:1.02rem; line-height:1.3 }
.paper-latest h3 a{ color:var(--ink); text-decoration:none }
.paper-latest h3 a:hover{ color:var(--teal-ink); text-decoration:underline; text-underline-offset:3px }
.paper-more{ margin-top:2px }
.paper-columns{
columns:3 300px; column-gap:40px;
column-rule:1px solid var(--line);
}
.paper-item{
break-inside:avoid; padding:14px 0;
border-top:1px solid var(--line);
}
.paper-item:first-child{ border-top:0; padding-top:0 }
.paper-item .thumb{
aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius-s);
background:var(--mist); margin-bottom:10px;
}
.paper-item .thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.paper-item h3{ margin:5px 0 6px; font-size:1.04rem; line-height:1.3 }
.paper-item h3 a{ color:var(--ink); text-decoration:none }
.paper-item h3 a:hover{ color:var(--teal-ink); text-decoration:underline; text-underline-offset:3px }
.paper-item p{ margin:0; font-size:.92rem; line-height:1.5; color:var(--ink-2) }
/* news sidebar times */
.mini-list .mini-time{
display:block; margin-top:2px;
font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);
}
/* news author box: byline hash-link target + div name styled as an h3 */
.cl-news-author{ scroll-margin-top:120px }
.cl-news-author-name{ font-weight:700 }
/* homepage cards: heading-look divs (no heading tags inside cards) */
.card-h{
font-family:var(--f-display); font-weight:700; line-height:1.15;
letter-spacing:-.01em; text-wrap:balance; margin:0; font-size:1.17rem;
}
/* Car rental iframe widget (homepage) - user-specified styling */
.carrentalframewidget {
width: 100%;
border: none !important;
max-width: 400px !important;
min-height: 370px;
display: block;
background-color: #fff;
border-radius: 1rem;
padding: 10px 10px 0;
background-image: url(../img/load_btn.gif);
background-size: auto;
background-position: 50% 50%;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
box-shadow: var(--shadow-1);
}
iframe.carrentalframewidget {
height: 320px !important;
}
/* ---- GetYourGuide booking (experiences) ---- */
.gyg-card{
background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
padding:16px; box-shadow:var(--shadow-1);
}
.gyg-card .info-title{ margin-bottom:10px }
.gyg-card [data-gyg-widget], .gyg-card iframe{ width:100% }
@media (max-width:900px){ .gyg-card{ display:none } } /* mobile books via the sheet */
.gyg-sticky{ z-index:70 }
.gyg-sticky .btn{ box-shadow:none }
.gyg-modal{
position:fixed; inset:0; z-index:120;
background:rgba(15,53,64,.55);
display:flex; align-items:flex-end; justify-content:center;
}
.gyg-modal[hidden]{ display:none }
.gyg-modal-panel{
width:100%; max-width:640px; height:90vh; height:90dvh;
background:var(--paper); border-radius:18px 18px 0 0;
display:flex; flex-direction:column;
box-shadow:0 -12px 40px rgba(15,53,64,.25);
}
.gyg-modal-head{
display:flex; align-items:center; justify-content:space-between;
padding:14px 16px; border-bottom:1px solid var(--line); flex:none;
}
.gyg-modal-close{
display:grid; place-items:center; width:40px; height:40px;
border:1px solid var(--line); border-radius:50%; background:var(--paper);
color:var(--ink-2); cursor:pointer;
}
.gyg-modal-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 16px 20px }
.gyg-modal-body [data-gyg-widget], .gyg-modal-body iframe{ width:100% }
body.gyg-modal-open{ overflow:hidden }
/* Mobile rails: full-bleed carousels (user-specified) */
@media (max-width:640px){
.cl26-rail{
margin-left: -16px;
width: calc(100% + 32px);
scroll-margin-left: 16px;
scroll-padding-left: 16px;
}
.cl26-rail>div:first-child {
padding-left: 16px;
}
}
/* Hotel-review layout (editorial property reviews in the stay CPTs) */
.review-byline{ margin:4px 0 10px; color:var(--ink-2); font-size:.95rem }
.review-byline a{ color:var(--teal-ink) }
.review-disclosure{
display:block; margin:-24px 0 32px; padding:0; border:0; background:none;
color:var(--ink-3); font-size:.82rem; line-height:1.5;
}
.verdict-card{
margin:0; padding:20px 22px; background:var(--mist);
border:1px solid var(--line); border-radius:12px;
}
.verdict-score{ display:flex; align-items:baseline; gap:8px; margin:6px 0 10px }
.verdict-score .num{ font-family:var(--f-display); font-size:2.2rem; line-height:1; color:var(--teal-ink) }
.verdict-score span{ color:var(--ink-3); font-size:.9rem }
.verdict-body p:last-child{ margin-bottom:0 }
/* Hotel-review v2: info table, pros/cons, tooltip stars, address line */
.hotel-info-table{ width:100%; border-collapse:collapse; margin:12px 0 8px; font-size:.95rem }
.hotel-info-table th{ text-align:left; font-weight:600; color:var(--ink-2); padding:10px 14px 10px 0; width:38%; vertical-align:top }
.hotel-info-table td{ padding:10px 0; font-variant-numeric:tabular-nums }
.hotel-info-table tr{ border-bottom:1px solid var(--line) }
.hotel-info-table .score-row td{ font-weight:600 }
.hotel-info-table .score-count{ color:var(--ink-3); font-weight:400 }
.scores-checked{ margin:6px 0 0; color:var(--ink-3); font-size:.85rem }
.review-address{ margin:0 0 12px }
.tip-stars{ display:inline-flex; vertical-align:-2px; cursor:default }
.visitor-stars{ font-size:1.02rem; margin:0 0 6px }
.proscons{ display:grid; gap:18px 28px; margin:12px 0 20px }
@media (min-width:781px){ .proscons{ grid-template-columns:1fr 1fr } }
.proscons h3{ margin:0 0 10px }
.pros-list,.cons-list{ list-style:none; padding:0; margin:0; display:grid; gap:9px; font-size:.92rem }
.pros-list li,.cons-list li{ position:relative; padding-left:28px; line-height:1.45 }
.pros-list li::before,.cons-list li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:18px; height:18px; border-radius:50% }
.pros-list li::before{ background:#229e60 url('data:image/svg+xml;utf8,') center/11px no-repeat }
.cons-list li::before{ background:var(--coral-ink) url('data:image/svg+xml;utf8,') center/10px no-repeat }
.review-body h2.band-anchor{ margin-top:40px }
.review-intro{ margin:24px 0 36px }
.review-intro > p:last-child{ margin-bottom:0 }
.row-star{ vertical-align:-2px; margin-right:5px }
.row-star.star-booking{ color:#003580 }
.row-star.star-ta{ color:#00AF87 }
.row-star.star-cl{ color:var(--teal) }
/* Review pages: roomier gallery */
.review-grid .gallery-grid{ height:clamp(340px, 44vw, 560px) }