/* ============================================================ DESTINATIONS GUILD — SHARED SITE HEADER Link this LAST in so it overrides a page's own styles: Pair it with dg-lang.js for the EN / ES / FR buttons. Changing the header here changes it on every page. ============================================================ */ .topbar{ background:#2F93E2 !important; width:100%; border-bottom:4px solid #C9A84C !important; } .topbar-inner{ max-width:1080px; margin:0 auto; padding:12px 1.5rem; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:9px; } .tb-line1{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.22); } .tb-brand{ display:flex; flex-direction:column; align-items:center; line-height:1.12; font-family:'DM Sans',-apple-system,"Segoe UI",sans-serif; } .tb-brand a{ text-decoration:none; color:inherit; } /* "An Affiliate of Trip.com" — white pill, black lettering */ .tb-affil{ display:inline-block !important; margin:0 0 6px 0 !important; font-size:12.5px !important; font-weight:700 !important; color:#000000 !important; background:#ffffff !important; border:1px solid #bcd6f2 !important; border-radius:12px !important; padding:3px 12px !important; letter-spacing:.02em; text-decoration:none !important; box-shadow:0 1px 3px rgba(0,0,0,.22); font-family:'DM Sans',-apple-system,"Segoe UI",sans-serif; } .tb-affil:hover{ background:#eef5fd !important; color:#000 !important; } .tc-name{ color:#000000 !important; font-weight:800; } .tb-brand-name{ font-size:25px !important; font-weight:800 !important; color:#fff !important; display:flex; align-items:center; gap:6px; letter-spacing:.02em; margin-top:6px; font-family:'DM Sans',-apple-system,"Segoe UI",sans-serif; } /* language pills — simple white */ .lang-group{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; } .lang-tgl{ cursor:pointer; background:#fff; color:#12467f; border:1px solid #cfe0f2; border-radius:11px; padding:2px 9px; font-family:'DM Sans',-apple-system,"Segoe UI",sans-serif; font-weight:700; font-size:12px; letter-spacing:.03em; display:inline-flex; align-items:center; gap:4px; line-height:1; box-shadow:0 1px 2px rgba(0,0,0,.18); text-decoration:none; } .lang-tgl:hover{ background:#eef5fd; border-color:#9cc2ea; } .lang-tgl.active{ border-color:#12467f; box-shadow:inset 0 0 0 1px #12467f,0 1px 2px rgba(0,0,0,.18); } .lang-tgl svg{ border-radius:2px; flex-shrink:0; box-shadow:0 0 0 .5px rgba(0,0,0,.25); } /* site nav row */ .tb-links{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px; width:100%; font-family:'DM Sans',-apple-system,"Segoe UI",sans-serif; } .tb-links a{ font-size:15px; color:#fff; font-weight:600; cursor:pointer; text-decoration:none; padding:4px 11px; border-radius:6px; transition:background .12s; white-space:nowrap; } .tb-links a:hover{ background:rgba(255,255,255,.16); color:#fff; } @media(max-width:680px){ .tb-brand-name{ font-size:19px !important; } .tb-links a{ font-size:14px; padding:4px 9px; } .lang-tgl{ font-size:11px; } .topbar-inner{ padding:10px 1rem; } } /* ===== Destinations Guild — mobile & inclusive pass (Jul 2026): >=44px tap targets, legible captions, clear focus ===== */ @media (max-width: 820px){ .dg-nav-links a, .tb-links a, .tb-nav a, .pagenav a, .crumb a, .foot a, .tb-affil, .lang-tgl, .hbtn, .btn, .srch-btn, .map-book-btn, .book-btn, .cview-btn, .ci-btn, .jump a, .chip, .dcity-lnk, .a250-btn, .cattab { min-height:44px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding-top:10px !important; padding-bottom:10px !important; } .cities li{ padding:9px 0 !important; min-height:44px !important; } .cities a{ display:inline-flex !important; align-items:center !important; min-height:44px !important; } .faq summary{ padding:15px 2px !important; min-height:44px !important; } .inp, .sel, input, select, textarea{ min-height:48px !important; font-size:16px !important; } .dg-nav-links{ gap:6px 10px !important; } .tb-links{ gap:4px 8px !important; } .tb-nav{ gap:6px 14px !important; } /* legible captions (>=14px floor) */ .hero-cap, .fx-note, .catnote, .powered, .aff-note, .shelf-note, .ch-note, .foot, .gtl-note, .disc, .hcard-brand, .cport, .lauthor, .ldate{ font-size:14px !important; line-height:1.5 !important; } .lede, .box p, .wcard p, .tcard p{ font-size:15.5px !important; } /* modest contrast lift on light-background captions */ .hero-cap{ color:#6b5d38 !important; } /* clear focus for keyboard / switch-device users */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible{ outline:3px solid #2F76D8 !important; outline-offset:2px !important; } /* leave room for the sticky action bar */ body.dg-has-bar{ padding-bottom:68px !important; } }