/* ============================================================================ * HOME BASE · ACCESSIBILITY LAYER · styling * Companion file of hb-a11y.js (plugin homebase-a11y). * * Rule for this file: with a mouse or a finger the site must look exactly as * it did before. Everything below is either invisible (screen reader text, * a checkbox kept focusable but unseen, a button that renders like the * figure it wraps) or a focus ring that only draws under html.hba11y-kbd, * the class hb-a11y.js sets while the visitor is using the keyboard. * * The ring is the site's gold halo (--hb-focus) with a 2px navy line and a * 2px white gap inside it. The halo alone is about 1.5:1 against white and * cannot be the whole indicator (WCAG 1.4.11 asks 3:1); the navy line * carries the contrast, the white gap keeps it visible on navy buttons. * ========================================================================= */ :root { --hba11y-navy: var(--hb-navy-800, #232e47); /* white gap first, so the navy line also reads on navy and gold controls */ --hba11y-ring: 0 0 0 2px #fff, 0 0 0 4px var(--hba11y-navy), 0 0 0 7px rgba(214, 182, 122, .55); /* drawn inside the box, for photos and calendar cells that sit edge to edge */ --hba11y-ring-in: inset 0 0 0 2px var(--hba11y-navy), inset 0 0 0 4px #fff; } /* screen reader only text and live regions */ .hba11y-sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; } /* focus moved by script onto a whole dialog draws nothing, it is not a control */ .hk-modal [role="dialog"]:focus, .hbpd-lb:focus, .hbpd-modal-box:focus { outline: none !important; } /* ----------------------------------------------------- search bar */ /* The hero search clears every focus style on purpose (global CSS, the .hbhp-search / .hb-hero-search rules) and the other search bars never had one. The fields sit in a rounded bar with overflow:hidden, so a ring around a field would be clipped; it is drawn inside the field's own transparent .field-control box instead. The Search button already has a keyboard style of its own and is left alone. */ html.hba11y-kbd .hr-explorer .hfse-form-primary-fields .field-control:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--hba11y-navy), inset 0 0 0 5px rgba(214, 182, 122, .55) !important; border-radius: 10px !important; } html.hba11y-kbd .hr-explorer .hfse-form-secondary-fields button:focus-visible, html.hba11y-kbd .hr-explorer .hfse-additional-filters-field-container button:focus-visible { box-shadow: var(--hba11y-ring) !important; outline: none !important; } /* ------------------------------------------------------------ Where */ /* The destination checkboxes were display:none (the chips are the look), which also took them away from the keyboard and from screen readers. Same invisible result, but focusable and announced. */ [id^="hfse-form-where-modal-"] .hfse-form-where-item { position: relative; } /* positioned against its own chip: against the dialog, fifty boxes at their static places made the dialog itself scrollable (2363px of overflow) */ [id^="hfse-form-where-modal-"] .hfse-form-where-item .hk-checkbox { display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; pointer-events: none !important; -webkit-appearance: none !important; appearance: none !important; } /* The chip's :focus-within ring could never fire while the box was hidden; now that it takes focus it would show on every click, so it goes keyboard only like the rest. */ [id^="hfse-form-where-modal-"] .hfse-form-where-item:focus-within { box-shadow: none !important; } html.hba11y-kbd [id^="hfse-form-where-modal-"] .hfse-form-where-item:has(.hk-checkbox:focus-visible) { box-shadow: var(--hba11y-ring) !important; } /* ---------------------------------------- Guests and Filters steppers */ .hfse-number-with-control .reduce-btn:focus, .hfse-number-with-control .increase-btn:focus { outline: none; } /* the global CSS pins box-shadow:none !important on these with an id selector (#hfse-form-guests-modal-1 .reduce-btn); :not(#hba11y) only adds id weight so the keyboard ring can still win */ html.hba11y-kbd .hfse-number-with-control .reduce-btn:focus-visible:not(#hba11y), html.hba11y-kbd .hfse-number-with-control .increase-btn:focus-visible:not(#hba11y) { box-shadow: var(--hba11y-ring) !important; outline: none !important; } /* -------------------------------------------------------- calendars */ /* Keyboard focus on a day: Hello Elementor's own [tabindex]:focus-visible ring (black outline, 4px white halo) gives way to the ring below. A day clicked with the mouse never matches :focus-visible, so it draws nothing, as before. */ html.hba11y-kbd .homelocal-range-calendar .day-of-month:focus-visible { outline: none !important; box-shadow: none !important; } /* search calendar: the day is a round chip. The cell clips anything drawn outside it, so the ring sits inside the chip: navy at the edge, white inside it, which also reads on the navy check-in and check-out chips. */ html.hba11y-kbd .homelocal-range-calendar .day-of-month:focus-visible .date { box-shadow: var(--hba11y-ring-in) !important; } /* availability calendar: rounded cells edge to edge, ring inside the cell */ html.hba11y-kbd .homelocal-availability-calendar .day-of-month:focus-visible { box-shadow: var(--hba11y-ring-in) !important; outline: none !important; } html.hba11y-kbd .homelocal-range-calendar .prev-btn:focus-visible, html.hba11y-kbd .homelocal-range-calendar .next-btn:focus-visible, html.hba11y-kbd .homelocal-availability-calendar .prev-btn:focus-visible, html.hba11y-kbd .homelocal-availability-calendar .next-btn:focus-visible { box-shadow: var(--hba11y-ring) !important; outline: none !important; } /* ------------------------------------------------------ result cards */ html.hba11y-kbd a.hfse-property-card:focus-visible { outline: none !important; box-shadow: var(--hba11y-ring) !important; } /* ---------------------------------------- property template gallery */ /* Grid photos in the lightbox get a button laid over them by hb-a11y.js. It covers the figure, draws nothing and lets every pointer event through to the photo, so hover, click, right click and long press behave exactly as before; only the keyboard and screen readers use it. The theme and the Elementor kit style every bare