/** * TLR location search. * * Everything is driven by the custom properties in the first block, so the look can be retuned * from Elementor's custom CSS (or a child theme) without touching this file. Colours default to * the TLR palette but inherit the page's typography rather than imposing a font. * * Made Nice. */ /* Colours and type come from Elementor's own global tokens, so changing the brand in Site Settings > Global Colors / Global Fonts moves this widget with it. The literals after each comma are the current TLR values, used only if a token is ever missing. The theme does not put its body font on - Elementor applies it per widget - so a custom widget that just inherits ends up in the system font stack. Hence the explicit font-family here rather than `font: inherit` all the way up. */ .tlr-search { --tlr-search-ink: var(--e-global-color-primary, #003b4e); --tlr-search-body: var(--e-global-color-text, #00506d); --tlr-search-muted: color-mix(in srgb, var(--tlr-search-body) 72%, transparent); --tlr-search-field-bg: var(--e-global-color-6d80075, #f5fcfb); --tlr-search-field-radius: 6px; --tlr-search-accent: var(--e-global-color-secondary, #94d6dc); --tlr-search-line: color-mix(in srgb, var(--tlr-search-ink) 18%, transparent); --tlr-search-warn: #8a5a12; --tlr-search-warn-bg: #fdf4e3; --tlr-search-gap: 16px; font-family: var(--e-global-typography-text-font-family, "Manrope"), sans-serif; color: var(--tlr-search-body); display: flex; flex-direction: column; gap: var(--tlr-search-gap); } /* color-mix is well supported, but a browser without it would drop the whole declaration and fall back to an inherited colour. These keep it legible in that case. */ @supports not (color: color-mix(in srgb, red 50%, transparent)) { .tlr-search { --tlr-search-muted: #4a7d94; --tlr-search-line: #ccdde4; } } /* --- the field ------------------------------------------------------------------------ */ /* The visible placeholder carries the label, so the real one is for screen readers only. Clipping rather than display:none keeps it announced. */ .tlr-search__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .tlr-search__field { display: flex; align-items: center; gap: 8px; background: var(--tlr-search-field-bg); border: 1px solid var(--tlr-search-line); border-radius: var(--tlr-search-field-radius); padding: 4px 4px 4px 18px; } .tlr-search__field:focus-within { border-color: var(--tlr-search-ink); box-shadow: 0 0 0 3px rgba(142, 215, 215, 0.45); } .tlr-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 12px 0; font: inherit; color: inherit; appearance: none; } .tlr-search__input::placeholder { color: var(--tlr-search-muted); opacity: 1; } .tlr-search__input:focus { outline: none; } .tlr-search__submit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--tlr-search-ink); padding: 10px 14px; border-radius: calc(var(--tlr-search-field-radius) - 2px); cursor: pointer; font: inherit; } .tlr-search__submit:hover, .tlr-search__submit:focus-visible { background: var(--tlr-search-accent); } /* The design shows an icon-only control. The word stays in the DOM for screen readers. */ .tlr-search__submit-text { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .tlr-search__icon { width: 20px; height: 20px; display: block; } /* --- use my location ------------------------------------------------------------------ */ .tlr-search__geo { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 4px 0; color: var(--tlr-search-ink); cursor: pointer; font: inherit; text-decoration: none; } .tlr-search__geo:hover span, .tlr-search__geo:focus-visible span { text-decoration: underline; } .tlr-search__geo[disabled] { opacity: 0.55; cursor: default; } .tlr-search__geo-icon { width: 21px; height: 21px; flex: 0 0 auto; } /* --- status --------------------------------------------------------------------------- */ /* Empty by default and collapsed, so it takes no space until it has something to say. */ .tlr-search__status:empty { display: none; } .tlr-search__status { margin: 0; padding: 10px 14px; border-radius: 4px; background: rgba(142, 215, 215, 0.2); font-size: 0.95em; } .tlr-search__status.is-warn { background: var(--tlr-search-warn-bg); color: var(--tlr-search-warn); } .tlr-search__status.is-hint { background: transparent; padding-left: 0; color: var(--tlr-search-muted); } .tlr-search.is-busy { cursor: progress; } .tlr-search.is-busy .tlr-search__results { opacity: 0.6; } /* --- results -------------------------------------------------------------------------- */ .tlr-search__list-heading { margin: 0; font-size: 1em; color: var(--tlr-search-muted); font-weight: 600; } /* Once a search has run, the heading would be lying - the list is no longer "all locations", it is the nearest few. The status line describes it instead. */ .tlr-search.has-results .tlr-search__list-heading { display: none; } .tlr-search__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .tlr-search__result { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--tlr-search-line); } .tlr-search__result[hidden] { display: none; } .tlr-search__result-name { grid-column: 1; font-weight: 700; color: var(--tlr-search-ink); text-decoration: none; } .tlr-search__result-name:hover, .tlr-search__result-name:focus-visible { text-decoration: underline; } .tlr-search__result-town, .tlr-search__result-address, .tlr-search__result-hours { grid-column: 1; color: var(--tlr-search-muted); font-size: 0.92em; } .tlr-search__result-town { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; } .tlr-search__result-distance { grid-column: 2; grid-row: 1 / span 2; align-self: start; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; } .tlr-search__result-distance[hidden] { display: none; } .tlr-search__result.is-nearest .tlr-search__result-distance { color: var(--tlr-search-ink); } .tlr-search__more { align-self: flex-start; border: 1px solid var(--tlr-search-ink); background: transparent; color: var(--tlr-search-ink); padding: 10px 20px; border-radius: 4px; cursor: pointer; font: inherit; } .tlr-search__more:hover, .tlr-search__more:focus-visible { background: var(--tlr-search-accent); border-color: var(--tlr-search-accent); } .tlr-search__more[hidden] { display: none; } /* --- small screens -------------------------------------------------------------------- */ @media (max-width: 480px) { .tlr-search__field { padding-left: 14px; } /* Stack the distance under the address rather than squeezing the name into a sliver. */ .tlr-search__result { grid-template-columns: 1fr; } .tlr-search__result-distance { grid-column: 1; grid-row: auto; } } @media (prefers-reduced-motion: reduce) { .tlr-search * { transition: none !important; } }