/* ==== tbh-mobile-cta-hierarchy ==== */ /* ============================================================ MOBILE HEADER — CTA HIERARCHY 1. Book Now — primary, stretches to fill the free width 2. Call — secondary 46px square icon button 3. Menu — secondary 46px square icon button Selectors use `a.nav-cta[href]` deliberately. An earlier block (#tbh-ds) sets `header.nav .nav-right>a.nav-cta .book-short {display:none!important}` at specificity (0,4,2); a rule written as `.nav-right > .nav-cta …` is only (0,4,1) and silently loses however late it appears. The attribute selector buys the margin. `display` is deliberately NOT set on .nav-cta here, so the existing "hide header CTAs while the menu is open" rules keep working. Those are re-asserted below at matching specificity. ============================================================ */ @media (max-width:979px){ /* the container must be allowed to grow, or a flex child inside it cannot stretch. An earlier block pins this to flex:0 0 auto. */ header.nav .nav-right{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; flex:1 1 auto !important; min-width:0 !important; margin-left:auto !important; } /* ---------- 1. PRIMARY: Book Now ---------- */ header.nav .nav-right > a.nav-cta[href]{ flex:1 1 auto !important; width:auto !important; min-width:118px !important; /* never shrinks below a legible label */ max-width:none !important; overflow:hidden !important; /* clip rather than let nowrap text escape */ height:46px !important; min-height:46px !important; padding:0 16px !important; border-radius:12px!important; background:#0B63CE !important; border:1px solid #0B63CE !important; box-shadow:0 4px 12px -2px rgba(11,99,206,.34) !important; align-items:center !important; justify-content:center !important; gap:9px !important; } header.nav .nav-right > a.nav-cta[href] .book-short{ display:inline !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; font-weight:800 !important; font-size:16px !important; line-height:1 !important; white-space:nowrap !important; } header.nav .nav-right > a.nav-cta[href] .book-long{ display:none !important; } header.nav .nav-right > a.nav-cta[href] svg{ display:none !important; } header.nav .nav-right > a.nav-cta[href]::before{ width:19px !important; height:19px !important; flex:0 0 19px !important; margin:0 !important; } header.nav .nav-right > a.nav-cta[href]::after{ content:none !important; display:none !important; } header.nav .nav-right > a.nav-cta[href]:active{ transform:scale(.985) !important; box-shadow:0 2px 6px -2px rgba(11,99,206,.42) !important; } /* ---------- the logo must yield before anything can collide ---------- .brand carries an inline padding:7px 13px, and .brand-logo is flex-shrink:0 in the base sheet. Together that made the row unshrinkable, so at narrow widths the buttons had nowhere to go. */ header.nav .brand{ flex:0 1 auto !important; min-width:0 !important; overflow:hidden !important; } header.nav .brand-logo{ flex-shrink:1 !important; min-width:0 !important; max-width:100% !important; object-fit:contain !important; object-position:left center !important; } /* ---------- 2 & 3. SECONDARY: square icon buttons ---------- */ header.nav .nav-right > a.nav-cta-call[href], header.nav .nav-right > #navToggle, header.nav .nav-right > .nav-toggle{ flex:0 0 46px !important; width:46px !important; min-width:46px !important; height:46px !important; min-height:46px !important; padding:0 !important; margin:0 !important; border-radius:12px!important; align-items:center !important; justify-content:center !important; background:#FFFFFF !important; border:1.5px solid #C9D9E8 !important; box-shadow:none !important; } header.nav .nav-right > a.nav-cta-call[href] svg{ width:20px !important; height:20px !important; margin:0 !important; stroke:#00214E !important; fill:none !important; } header.nav .nav-right > a.nav-cta-call[href] span{ display:none !important; } header.nav .nav-right > #navToggle span, header.nav .nav-right > .nav-toggle span{ background:#00214E !important; } header.nav .nav-right > a.nav-cta-call[href]:active, header.nav .nav-right > #navToggle:active{ background:#EDF2F8 !important; transform:scale(.96) !important; } /* ---------- preserve: header CTAs hide while the menu is open ---------- */ body.nav-menu-open header.nav .nav-right > a.nav-cta[href], body.nav-menu-open header.nav .nav-right > a.nav-cta-call[href], body:has(#navMenu.open) header.nav .nav-right > a.nav-cta[href], body:has(#navMenu.open) header.nav .nav-right > a.nav-cta-call[href], body:has(#navToggle[aria-expanded="true"]) header.nav .nav-right > a.nav-cta[href], body:has(#navToggle[aria-expanded="true"]) header.nav .nav-right > a.nav-cta-call[href]{ display:none !important; } } @media (max-width:360px){ header.nav .nav-right{ gap:6px !important; flex:1 1 auto !important; min-width:0 !important; } header.nav .nav-right > a.nav-cta[href]{ height:42px !important; min-height:42px !important; padding:0 12px !important; gap:7px !important; min-width:104px !important; } header.nav .nav-right > a.nav-cta[href] .book-short{ display:inline !important; font-size:14.5px !important; } header.nav .nav-right > a.nav-cta[href]::before{ width:17px !important; height:17px !important; flex:0 0 17px !important; } header.nav .nav-right > a.nav-cta-call[href], header.nav .nav-right > #navToggle, header.nav .nav-right > .nav-toggle{ flex:0 0 42px !important; width:42px !important; min-width:42px !important; height:42px !important; min-height:42px !important; } } /* ==== tbh-footer-cta ==== */ /* ============================================================ FOOTER CTA — VISIBILITY & HIERARCHY (v2) v1 set flex:1 1 220px on the buttons. In the mobile column layout flex-basis governs HEIGHT, so they ballooned to 220px+ and then grew. Sizing is now explicit per axis. Fixes the original bug: footer.fx a{color:#B9CCE4} outranked .fx-btn--primary{color:#00447f}, rendering Book Now at 1.6:1. ============================================================ */ .fx-cta-actions{ display:flex !important; gap:14px !important; flex-wrap:wrap !important; align-items:center !important; margin-top:20px !important; } footer.fx .fx-cta-actions a.fx-btn{ min-height:52px !important; height:52px !important; padding:0 26px !important; border-radius:980px!important; font-family:'Manrope',system-ui,sans-serif !important; font-size:16px !important; font-weight:800 !important; line-height:1 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; text-decoration:none !important; flex:0 1 auto !important; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1), background .18s ease, border-color .18s ease !important; } /* ---------- 1. PRIMARY — Book Now ---------- */ footer.fx .fx-cta-actions a.fx-btn.fx-btn--primary{ background:#FFFFFF !important; color:#00214E !important; /* 15.8:1 on white */ border:2px solid #FFFFFF !important; box-shadow:0 6px 18px -6px rgba(0,10,40,.5) !important; } footer.fx .fx-cta-actions a.fx-btn.fx-btn--primary:hover{ background:#FFFFFF !important; color:#00214E !important; transform:translateY(-2px) !important; box-shadow:0 14px 30px -8px rgba(0,10,40,.58) !important; } footer.fx .fx-cta-actions a.fx-btn.fx-btn--primary:active{ transform:translateY(0) scale(.99) !important; } /* ---------- 2. SECONDARY — Call reception ---------- */ footer.fx .fx-cta-actions a.fx-btn.fx-btn--ghost[href^="tel:"]{ background:transparent !important; color:#FFFFFF !important; border:2px solid #FFFFFF !important; box-shadow:none !important; } footer.fx .fx-cta-actions a.fx-btn.fx-btn--ghost[href^="tel:"]:hover{ background:rgba(255,255,255,.14) !important; color:#FFFFFF !important; border-color:#FFFFFF !important; transform:translateY(-2px) !important; } footer.fx .fx-cta-actions a.fx-btn.fx-btn--ghost[href^="tel:"]:active{ transform:translateY(0) scale(.99) !important; } /* ---------- 3. WHATSAPP ---------- */ footer.fx .fx-cta-actions a.fx-btn.fx-btn--ghost[href*="wa.me"]{ background:#075E54 !important; /* official WhatsApp teal — 7.7:1 with white */ color:#FFFFFF !important; border:2px solid #075E54 !important; box-shadow:0 6px 18px -8px rgba(0,40,30,.5) !important; } footer.fx .fx-cta-actions a.fx-btn.fx-btn--ghost[href*="wa.me"]::before{ content:"" !important; width:18px; height:18px; flex:0 0 18px; background:#FFFFFF; -webkit-mask:var(--wa) center/contain no-repeat; mask:var(--wa) center/contain no-repeat; --wa:url("data:image/svg+xml;utf8,"); } footer.fx .fx-cta-actions a.fx-btn.fx-btn--ghost[href*="wa.me"]:hover{ background:#0A7568 !important; border-color:#0A7568 !important; color:#FFFFFF !important; transform:translateY(-2px) !important; } footer.fx .fx-cta-actions a.fx-btn.fx-btn--ghost[href*="wa.me"]:active{ transform:translateY(0) scale(.99) !important; } /* ---------- mobile: equal full-width rows, fixed height ---------- */ @media (max-width:640px){ .fx-cta-actions{ flex-direction:column !important; gap:12px !important; align-items:stretch !important; } footer.fx .fx-cta-actions a.fx-btn, footer.fx .fx-cta-actions a.fx-btn.fx-btn--primary, footer.fx .fx-cta-actions a.fx-btn.fx-btn--ghost[href^="tel:"], footer.fx .fx-cta-actions a.fx-btn.fx-btn--ghost[href*="wa.me"]{ flex:0 0 50px !important; width:100% !important; height:50px !important; min-height:50px !important; max-height:50px !important; font-size:15.5px !important; padding:0 20px !important; } } /* legal links inherited footer a{font-size:.95rem} over .fx-legal's 12.5px */ footer.fx .fx-legal a{ font-size:inherit !important; color:#C7D6EA !important; text-decoration:underline !important; text-underline-offset:2px !important; } footer.fx .fx-legal a:hover{ color:#FFFFFF !important; } @media (prefers-reduced-motion:reduce){ footer.fx .fx-cta-actions a.fx-btn{ transition:none !important; } footer.fx .fx-cta-actions a.fx-btn:hover{ transform:none !important; } } /* ==== tbh-contrast-fixes ==== */ /* ============================================================ CONTRAST REMEDIATION — measured, not guessed Five WCAG AA failures found by scanning every rule that sets both colour and background across all 175 pages. .whatsapp-fab 1.98:1 -> 7.67:1 .call-fab 2.99:1 -> 6.89:1 #navMenu li a::after 3.04:1 -> 5.84:1 ...:hover::after 2.03:1 -> 4.88:1 .search-suggest:active 1.50:1 -> 11.85:1 (was invisible on press) Colour only. No geometry, layout or markup is touched. ============================================================ */ .whatsapp-fab{ background:#075E54 !important; /* official WhatsApp teal */ color:#FFFFFF !important; } .whatsapp-fab:hover{ background:#0A7568 !important; } .call-fab{ background:#00646E !important; /* darker step of the house teal */ color:#FFFFFF !important; } .call-fab:hover{ background:#00545D !important; } #navMenu li a::after{ color:#005EB5 !important; /* brand/primary */ } #navMenu li a:hover::after, #navMenu li a:active::after{ background:#007D8A !important; color:#FFFFFF !important; } .search-suggest:active{ background:#003087 !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; }