HomeRunner styling reference (machine-readable). This file combines the four HomeRunner styling docs into one plain-text document so an AI assistant can ingest the entire restylable widget surface from a single URL. Regenerated whenever the source articles change. Generated: 2026-07-20 Sources: - https://homerunner.io/docs/css-class-reference/ - https://homerunner.io/docs/conversion-kit-styling-reference/ - https://homerunner.io/docs/toolkit-styling-reference/ - https://homerunner.io/docs/ai-concierge-appearance/ ==== # css-class-reference (https://homerunner.io/docs/css-class-reference/) Every HomeRunner widget renders with stable, prefixed CSS classes, so you can restyle any part of it with plain CSS. No template overrides, no PHP. This page lists every class worth targeting, grouped by widget. Use it two ways: look up the element you want to change, or paste this whole page into an AI assistant (Claude, ChatGPT) together with a description of the look you want, and let it write the CSS for you. The class descriptions below give the assistant everything it needs, so you can skip hunting through your browser inspector. Put your rules in **Appearance > Customize > Additional CSS**, or in a code snippets plugin such as WPCode. Your changes live in the theme, not the plugin, so they survive HomeRunner updates. ## Before you start - Scope rules under the widget's top-level container (start Explorer selectors with `.hfse`, booking widget selectors with `.homelocal-booking-widget`, and so on) so they don't leak into the rest of your site. - Classes prefixed `hk-` or `uk-` belong to the UIkit framework the widgets are built on. Prefer the HomeRunner classes on this page; the few cases where a `hk-` class is the only available hook are called out below. - A lot of the markup (property cards, calendars, map pins) is rendered by JavaScript after the page loads. That changes nothing about how you style it. - State classes such as `.selected` or `.map-visible` are added and removed while a visitor interacts with the widget. Combine them with a structural class to style behavior, for example `.day.selected` for the picked dates. - If a rule doesn't take effect, specificity is the usual culprit. Add the container class in front of your selector before reaching for `!important`. A quick example, changing the property card title and price color on the Explorer: ``` .hfse .hfse-property-title { font-size: 1.15rem; font-weight: 600; } .hfse .hfse-property-price { color: #0a7d4f; } ``` --- ## Property Explorer The search widget: filter bar, results grid, and optional map. Everything lives under the `hfse-` prefix. **Top-level containers** - `.hfse` - root wrapper of the entire Explorer (search form, results grid, map) - `.hfse-body` - inner content column holding the filters and results grid - `.hfse-sidebar` - the map column, hidden when the map is off ### Filter bar - `.hfse-filters` - the outer form for the standard filter search - `.hfse-form` - wrapper around the secondary filter row and all filter modals - `.hfse-form-primary-fields` - row of primary fields (where, dates, guests) - `.hfse-form-submit-field-container` - wrapper around the search button - `.hfse-form-secondary-fields` - row of secondary controls (filters button, start over, sort, map toggle), with `.hfse-form-secondary-fields-left`, `.hfse-form-secondary-fields-center`, and `.hfse-form-secondary-fields-right` sub-groups - `.hfse-form-meta` - the nights count, properties count, and sort order cluster - `.hfse-form-nights-count-container`, `.hfse-form-nights-count-icon`, `.hfse-form-nights-count-text` - the "N nights" indicator - `.hfse-form-properties-count-container`, `.hfse-form-properties-count-icon`, `.hfse-form-properties-count-text` - the "N properties" indicator - `.hfse-form-order-field-container`, `.hfse-form-order-select` - sort-by dropdown - `.hfse-form-additional-filters-btn`, `.hfse-form-additional-filters-btn-icon`, `.hfse-form-additional-filters-btn-text` - the Filters button that opens the more-filters modal - `.hfse-form-additional-filters-state` - small badge inside the Filters button showing an active-filter count - `.hfse-form-reset-btn` - the Start Over button - `.hfse-form-map-toggle-btn`, `.hfse-form-map-toggle-btn-icon`, `.hfse-form-map-toggle-btn-text` - the Show/Hide Map button - `.hfse-form-favorites-toggle-btn` - favorites-only filter toggle (heart) - `.hfse-form-featured-toggle-btn` - featured-only filter toggle (star) ### Location field and modal - `.hfse-form-zone-field-container`, `.hfse-form-zone-field-label`, `.hfse-form-zone-field-control`, `.hfse-form-zone-icon` - the "Where" input row - `.hfse-form-zone-options`, `.hfse-form-where-options` - the location picker modal (zone mode and taxonomy mode) - `.hfse-form-zone-input`, `.hfse-form-zone-input-fields` - search box inside the location modal - `.hfse-form-zone-selections`, `.hfse-form-zone-selection` - chips for each selected location - `.hfse-form-zone-keyword` - free-text keyword input inside the location modal - `.hfse-form-zone-subfield`, `.hfse-form-zone-subfield-locations` - grouped location suggestion list - `.hfse-form-zone-label` - heading above a location group - `.hfse-form-zone-btn` - one selectable location suggestion row - `.hfse-form-zone-city` - city sub-label under a suggestion - `.hfse-form-zone-location` - layout row for a suggestion - `.hfse-form-where-item` - one checkbox row in the plain location picker - `.hfse-form-location-subfield` - wrapper for the location checkbox list ### Other filter modals - `.hfse-form-modal` - shared base class on every filter modal - `.hfse-form-date-options` - date range picker modal - `.hfse-form-guests-options` - guests modal (adults, children, pets) - `.hfse-form-additional-filters-options` - more-filters modal (bedrooms, bathrooms, amenities, type, price), with `.hfse-form-additional-filters` as its inner wrapper - `.hfse-all-amenities-btn` - the show-all-amenities expand link - `.hfse-field-grid` - grid layout for amenity and type checkbox lists - `.hfse-number-with-control` - stepper control wrapper; inside it, `.number-input` is the count field and `.reduce-btn` / `.increase-btn` are the minus and plus buttons - `.field-control`, `.field-label` - generic input and label wrapper pair reused across filter fields - `.type-label`, `.amenity-label`, `.bedrooms-label`, `.bathrooms-label` - labels on the property type, amenity, and count filter rows - `.filter-feature`, `.filter-group`, `.filter-type` - wrappers around each amenity and type checkbox ### AI and relevance search bars - `.hfse-ai-form`, `.hfse-relevance-form` - the AI-powered and relevance free-text search bars (alternates to the standard filter form) - `.hfse-ai-form-fields`, `.hfse-ai-form-input-container`, `.hfse-ai-form-button-container` - layout, input, and button wrappers for the AI bar - `.ai_search_input`, `.ai_search_submit` - the AI search input and submit button - `.hfse-relevance-form-fields`, `.hfse-relevance-form-input-container`, `.hfse-relevance-form-button-container` - the same wrappers for the relevance bar - `.relevance_search_input`, `.relevance_search_submit` - relevance search input and submit button - `.ai_recent_search`, `.ai_recent_search_items`, `.ai_recent_search_item` - dropdown of recent AI searches - `.relevance_recent_search`, `.relevance_recent_search_items`, `.relevance_recent_search_item` - dropdown of recent relevance searches - `.hfse-ai-search-loader-modal` - full-screen thinking modal while an AI search runs - `.hd-lottie` - animation container inside that modal ### Results grid and property cards - `.hfse-properties-container` - outer wrapper around the results grid - `.hfse-properties` - the row containing all property cards - `.hfse-property-container` - one grid cell wrapping a single card - `.hfse-property-card` - the clickable card itself - `.hfse-property-media` - image area at the top of the card - `.hfse-property-slideshow`, `.hfse-property-slideshow-item`, `.hfse-property-slideshow-image`, `.hfse-property-slideshow-prev-btn`, `.hfse-property-slideshow-next-btn`, `.hfse-property-slideshow-dotnav` - the in-card photo slideshow and its controls - `.hfse-property-favorite-toggle-btn` - heart button overlaid on the card image - `.hfse-property-body` - text content area below the image - `.hfse-property-title` - property name - `.hfse-property-subtitle` - secondary line under the title - `.hfse-property-meta`, `.hfse-property-meta-primary`, `.hfse-property-meta-secondary` - grouped rows of specs and taxonomy terms - `.hfse-property-bedrooms`, `.hfse-property-bathrooms`, `.hfse-property-guests` - individual spec values - `.hfse-property-locations`, `.hfse-property-types` - location and property type chips - `.terms` - the tag row inside the primary meta group - `.hfse-property-labels`, `.hfse-property-groups`, `.hfse-property-group` - badge row for property collections - `.hfse-property-rating`, `.hfse-property-rating-icon`, `.hfse-property-rating-number` - star rating display - `.hfse-property-price-container`, `.hfse-property-price`, `.hfse-property-price-sep`, `.hfse-property-price-total` - the price line - `.hfse-property-tax-note` - the small taxes-and-fees disclaimer under the price - `.hfse-properties-more-container`, `.hfse-properties-more-btn` - the Load More button and its wrapper - `.hfse-properties-no-items` - empty state when a search returns nothing - `.hfse-properties-slider-prev-btn`, `.hfse-properties-slider-next-btn` - carousel arrows in the slider layout - `.template-default`, `.template-slider` - layout template modifiers on the widget (standard grid vs. horizontal slider) - `.grid-with-map-{breakpoint}-{n}` and `.grid-without-map-{breakpoint}-{n}` - responsive cards-per-row modifiers on `.hfse`, where breakpoint is `portrait`, `landscape`, `tablet`, `desktop`, or `large` and n is 1 to 6 ### Map - `.hfse-map-container` - map canvas wrapper - `.hfse-map` - the positioned map surface - `.hfse-map-badge`, `.hfse-map-badge-price`, `.hfse-map-badge-icon`, `.hfse-map-badge-image` - the price and pin markers on the map - `.hfse-map-tooltip`, `.hfse-map-tooltip-content`, `.hfse-map-tooltip-close-btn` - the property preview popup on marker click - `.hfse-property-infowindow-container`, `.hfse-property-infowindow-header`, `.hfse-property-infowindow-header-overlay`, `.hfse-property-infowindow-image`, `.hfse-property-infowindow-price`, `.hfse-property-infowindow-body` - the mini property card inside a map popup - `.map-control`, `.map-control-checkbox`, `.map-control-input-container` - custom map controls such as search-as-I-move - Vendor map classes you may occasionally touch for cosmetic popup tweaks: `.gm-style-iw`, `.gm-style-iw-d`, `.gm-ui-hover-effect` (Google Maps), `.leaflet-popup-content`, `.leaflet-popup-content-wrapper`, `.leaflet-bar` (Leaflet) ### Date picker inside the filter modal - `.datepicker`, `.datepicker__inner`, `.datepicker__topbar`, `.datepicker__month`, `.datepicker__buttons` - the date range picker structure - `.datepicker__month-day--valid`, `.datepicker__month-day--invalid`, `.datepicker__month-day--today` - per-day cell states - `.datepicker__month-day--selected`, `.datepicker__month-day--first-day-selected`, `.datepicker__month-day--last-day-selected` - selected check-in and check-out day states - `.datepicker__month-button--prev`, `.datepicker__month-button--next` - month navigation arrows - `.datepicker__clear-button`, `.datepicker__close-button`, `.datepicker__submit-button` - the modal action buttons - `.datepicker__info--selected-label`, `.datepicker__info-text--selected-days`, `.datepicker__info--feedback` - the selected-range summary text ### Price slider - `.hfse-form-price-slider-container`, `.hfse-form-price-slider`, `.hfse-form-price-slider-text` - wrapper, slider track, and the price range readout - `.noUi-connect` - the filled portion of the track between the two handles - `.noUi-handle` - the draggable thumbs (min and max) ### Loader - `.hfse-loader` - full-panel loading overlay, shown while `.hfse` carries `.loading` - `.lds-ripple` - the ripple spinner inside it ### Explorer state classes - `.with-grid` / `.without-grid` - on `.hfse`: whether the results grid renders - `.with-map` / `.without-map` - on `.hfse`: whether a map is configured - `.map-visible` / `.map-hidden` - on `.hfse`: current shown or hidden state of the map panel - `.map-left` / `.map-right` - on `.hfse`: which side the map sits on - `.sticky-filter` - on `.hfse`: pins the filter bar to the top on scroll - `.loading` - on `.hfse`: a search request is in flight - `.active` - on the favorites and featured toggles and on recent-search items: the toggle is on, or the suggestion is highlighted - `.hfse-selected` - on `.hfse-form-zone-btn`: the currently chosen location suggestion - `.modified` - on the Filters button: one or more extra filters are applied - `.favorite` - on the favorite toggle: this property is favorited - `.property-loading` - on `.hfse-property-container`: the card is in a loading state - `.hfse-map-badge-focus` / `.hfse-map-badge-parent-focus` - on a map badge: the marker or its matching card is hovered --- ## Booking Widget The date, guest, and price quote widget shown on a property page. **Top-level containers** - `.homelocal-booking-widget-container` - outer wrapper rendered by the shortcode or page builder element - `.homelocal-booking-widget` - the widget itself - `.homelocal-sticky-booking-widget-container`, `.homelocal-sticky-booking-widget` - the sticky bar variant pinned to the bottom of the screen on mobile ### Structure - `.homelocal-booking-widget-body` - main content block (dates, guests, coupon, quote) - `.rent-unit` - the per-night or total rate display - `.rent-deleted` - a struck-through original rate shown next to a discounted one - `.widget-loader` - loading spinner before the widget's data resolves - `.booking-coupon-btn` - the Apply button next to the coupon input - `.checkout-button` - the Book Now button - `.addon`, `.addon-name`, `.addon-price` - one add-on line item, its label, and its price - `.addon-control`, `.addon-input` - the add-on quantity stepper and its numeric field - `.addon-reduce-btn`, `.addon-increase-btn` - the add-on minus and plus buttons - `.modal-button` - the button in the sticky mobile bar that opens the full widget ### Currency and payment provider modal - `.homelocal-booking-widget-checkout-modal` - the modal itself - `.checkout-header` - modal title - `.homelocal-booking-widget-checkout-item` - one selectable provider card - `.checkout-icon`, `.checkout-label`, `.checkout-input` - provider logo, name, and radio input ### Booking widget state classes - `.hfse-loading` - on `.homelocal-booking-widget`: dates are recalculating - `.hk-selected` - on a provider card in the currency modal: the chosen option (this is the one place where a `hk-` class is the only hook) --- ## Checkout The checkout page rendered by the checkout shortcode or block. **Top-level containers** - `#homelocal-checkout-form` - the checkout form (an id, and the scoping hook the plugin's own styles use) - `.homelocal-checkout-sidebar` - the column with the property summary and booking recap - `.homelocal-checkout-sections` - the stacked checkout sections (overview, guest info, payment, agreement, policies) ### Structure - `.homelocal-checkout-overview` - the sticky property and price summary card - `.homelocal-checkout-button` - the Complete Booking button, with `.button-text` as the label span inside it - `.cancellation-policy`, `.cancellation-policy-title` - one cancellation policy block and its heading - `.hr-checkout-acceptance-label` - label next to the terms acceptance checkbox - `.hr-checkout-rental-agreement-label`, `.hr-checkout-rental-agreement-checkbox` - the rental agreement label and checkbox ### Checkout state classes - `.homelocal-loading` - on the checkout form: submission in progress, animates the submit button - `.hk-sticky` - on the overview card: it has stuck to the top of the viewport on scroll --- ## Availability Calendar The inline availability calendar (single property, multi calendar, and property calendar shortcodes). **Top-level containers** - `.homelocal-availability-calendar-container` - outer wrapper - `.homelocal-availability-calendar` - the calendar root - `.homelocal-availability-calendar-modal` - the popup variant ### Structure - `.calendar-heading` - month and year heading row - `.calendar-picker` - the interactive date surface - `.calendar-table` - the grid of weeks - `.calendars` - wrapper when two months show side by side, with `.calendar` as one month's column - `.week`, `.week-days` - one row of days, and the weekday name header row - `.day`, `.day-of-month`, `.date` - a day cell, the real-day variant, and the number label inside it - `.day-name` - a weekday abbreviation in the header - `.next-btn`, `.prev-btn` - month navigation arrows - `.price` - nightly rate inside a day cell - `.local-time` - the property timezone label above the calendar - `.discount-text-container`, `.discount-icon`, `.discount-text` - the length-of-stay discount callout - `.homelocal-availability-calendar-loader` - the loading skeleton ### Day state classes (on `.day` cells) - `.selectable` / `.selectable-last` - the day can be picked, or is the last selectable night before a gap - `.selected` - part of the currently selected range - `.hover` - under the pointer during range selection - `.unavailable` - cannot be booked - `.disabled` - not interactive (past date or outside the allowed range) - `.booked` - already reserved - `.pass-through` / `.pass-through-temp` - allowed to pass through per minimum-stay rules - `.checkin`, `.checkin-available`, `.checkin-blocked`, `.checkin-selected`, `.checkin-booked` - check-in specific states - `.checkout`, `.checkout-available`, `.checkout-blocked`, `.checkout-booked` - check-out specific states - `.no-uikit` - on the calendar root: renders without the UIkit reset, for embedding in non-UIkit themes --- ## Range Calendar The check-in and check-out popup picker used by the Booking Widget and Explorer date fields. It shares the day-state vocabulary above. **Top-level container** - `.homelocal-range-calendar` - the popup root ### Structure - `.calendar-heading`, `.calendar-picker`, `.calendar-table`, `.calendars`, `.calendar` - same structure as the Availability Calendar - `.week`, `.week-days`, `.day`, `.day-of-month`, `.date`, `.day-name` - same cell and row structure - `.next-btn`, `.prev-btn` - month navigation arrows - `.homelocal-tip`, `.tip-content`, `.tip-arrow` - the tooltip bubble showing the nightly rate or minimum-stay note on hover ### Range calendar state classes - `.checkin` / `.checkout` - the selected endpoints - `.selected` / `.hover` - inside the selected or previewed range - `.disabled` / `.unavailable` / `.booked` - non-selectable days - `.no-uikit` - render without the UIkit reset --- ## User Dashboard The logged-in guest area (reservations, favorites, account settings). - `.homelocal-user-nav` - the dashboard side navigation list - The dashboard pages themselves are laid out with UIkit utility classes, so page-level restyling usually means targeting `.homelocal-user-nav` plus standard UIkit selectors scoped to your dashboard page. --- ## Property pages - `.hr-page-body` - wraps both the single property template and the property archive template. The one shared hook for page-wide overrides on property pages. --- ## Not covered here This page covers the HomeRunner plugin's own widgets. Conversion Kit, Toolkit, and AI Concierge modules ship their own class families; each has its own styling reference below. If a class you found in your inspector isn't listed here, it is most likely a UIkit utility (`hk-`/`uk-`) or a vendor library internal. You can still style it, but the classes above are the stable, intended hooks. ## More styling references - [Conversion Kit Styling Reference](https://homerunner.io/docs/conversion-kit-styling-reference/) - [Toolkit Styling Reference](https://homerunner.io/docs/toolkit-styling-reference/) - [AI Concierge: Appearance and Theming](https://homerunner.io/docs/ai-concierge-appearance/) **Machine-readable version:** all four styling references are also published as a single plain-text file at [homerunner.io/llms-styling.txt](https://homerunner.io/llms-styling.txt). Point an AI assistant at that URL to give it the entire styling surface in one fetch, instead of pasting in each article separately. ==== # conversion-kit-styling-reference (https://homerunner.io/docs/conversion-kit-styling-reference/) Every guest-facing Conversion Kit widget can be restyled to match your site. This page is the reference for doing it: the color settings each module exposes, the CSS variables you can set, and the class names to target. Like the [HomeRunner CSS Class Reference](https://homerunner.io/docs/css-class-reference/), it's written so you can paste the whole page into an AI assistant (Claude, ChatGPT) with a description of the look you want and let it write the CSS. Put your rules in **Appearance > Customize > Additional CSS** or a snippets plugin such as WPCode. ## Protected styling, and what it means for your CSS Some Conversion Kit modules ship with protected styling: their rules are deliberately weighted so a host theme's CSS can't accidentally break them. The same protection means your own plain selectors won't override them either. For these modules, restyle through their settings and CSS variables first, and when you do write a direct rule against their classes, add `!important`: ``` .hrck-cart-reminder__cta { background: #0a7d4f !important; } ``` **Protected modules:** Guest Menu, Cart Abandonment reminder, the CTA stack, Side Panel wishlist drawer, Split Cost Calculator, Price Drop Alerts, Contact Form, Booking Reminder. **Standard modules** (normal CSS, plain overrides work): Rate Comparison, Promo Bar, Property Finder, Trip Builder, Trip Page, Wishlist heart and page, Guest Portal, Marketing Cards, Review Insights, Vibe Profile, Booking Preloader. A few standard modules use `!important` internally on specific properties (Rate Comparison and the Wishlist page most of all). If an override doesn't take there, matching `!important` is the fix. ## Color settings in the admin Three modules have a color picker in their settings, and that is the first place to change their accent color: - **Cart Abandonment > Button Color** sets the reminder card's CTA and icon tint. - **Price Drop Alerts > Button Color** sets the trigger and modal accent. - **Side Panel > Heart Color** sets the wishlist heart fill. When one of these fields is filled in, its value wins over CSS you write for the matching variable. Change the setting rather than fighting it; if you must override from CSS anyway, use `!important`. ## Theming variables Many modules read their colors and dimensions from CSS custom properties with sensible defaults. Set them from your own CSS in a `:root` rule and the module picks them up. Variables can be added or renamed as modules evolve, so re-check this page after major updates. ``` :root { --hrck-tb-accent: #0a7d4f; --hrck-portal-accent: #0a7d4f; } ``` - Cart Abandonment: `--hrck-cart-accent` - Price Drop Alerts: `--hrck-price-alerts-color` - Side Panel wishlist heart: `--hrck-side-panel-heart-color` - Split Cost Calculator: `--hrck-sc-accent`, `--hrck-sc-accent-hover`, `--hrck-sc-accent-light`, `--hrck-sc-amount`, `--hrck-sc-label`, `--hrck-sc-divider`, `--hrck-sc-family-bg`, `--hrck-sc-warning` - Contact Form: `--hrck-cf-accent`, `--hrck-cf-accent-hover`, `--hrck-cf-text`, `--hrck-cf-label`, `--hrck-cf-border`, `--hrck-cf-error`, `--hrck-cf-success`, `--hrck-cf-bg`, `--hrck-cf-field-bg` - Booking Reminder: `--hrck-br-accent`, `--hrck-br-accent-hover`, `--hrck-br-text`, `--hrck-br-label`, `--hrck-br-border`, `--hrck-br-error`, `--hrck-br-success`, `--hrck-br-bg`, `--hrck-br-field-bg`, `--hrck-br-outline` - Rate Comparison: `--hrck-header-bg`, `--hrck-savings-color`, `--hrck-highlight-color`, `--hrck-diff-color`, `--hrck-font-direct`, `--hrck-font-saving` - Guest Portal: `--hrck-portal-canvas`, `--hrck-portal-surface`, `--hrck-portal-text`, `--hrck-portal-text-secondary`, `--hrck-portal-text-tertiary`, `--hrck-portal-accent`, `--hrck-portal-accent-hover`, `--hrck-portal-border`, `--hrck-portal-border-light`, `--hrck-portal-success`, `--hrck-portal-success-bg`, `--hrck-portal-error`, `--hrck-portal-error-bg`, `--hrck-portal-shadow`, `--hrck-portal-shadow-hover`, `--hrck-portal-radius`, `--hrck-portal-font-display`, `--hrck-portal-font-body` - Trip Builder and Trip Page: `--hrck-tb-accent`, `--hrck-tb-accent-strong`, `--hrck-tb-accent-soft`, `--hrck-tb-ring`, `--hrck-tb-ink`, `--hrck-tb-muted`, `--hrck-tb-faint`, `--hrck-tb-line`, `--hrck-tb-line-soft`, `--hrck-tb-radius-card`, `--hrck-tb-radius-control`, `--hrck-tb-shadow-card`, `--hrck-tb-shadow-pop`, `--hrck-tb-ease` - Property Finder: `--hrck-pf-bg`, `--hrck-pf-focus-bg`, `--hrck-pf-border`, `--hrck-pf-text`, `--hrck-pf-placeholder`, `--hrck-pf-icon`, `--hrck-pf-hover-bg`, `--hrck-pf-hover-text`, `--hrck-pf-radius`, `--hrck-pf-max-width`, `--hrck-pf-max-height` - Booking Preloader (skeleton shown while the booking widget loads): `--hrck-widget-padding`, `--hrck-skel` --- ## Protected modules ### Guest Menu Pill icon button, dropdown, sign-in modal, and toast, rendered inside your theme's header nav. - Containers: `.hrck-guest-menu`, `.hrck-guest-modal`, `.hrck-guest-toast` - Children: `.hrck-guest-menu-button`, `.hrck-guest-menu-dropdown`, `.hrck-guest-menu-item`, `.hrck-guest-menu-account`, `.hrck-guest-modal-dialog` ### Cart Abandonment reminder Fixed bottom-overlay card reminding a guest about their in-progress booking. - Container: `.hrck-cart-reminder` (states: `.hrck-cart-reminder--visible`, `--linked`, `--modal-hidden`) - Children: `.hrck-cart-reminder__inner`, `.hrck-cart-reminder__content`, `.hrck-cart-reminder__cta`, `.hrck-cart-reminder__dismiss`, `.hrck-cart-reminder__media`, `.hrck-cart-reminder__message` ### CTA stack Layout coordinator that stacks the other tools' floating triggers; it owns positioning only. - Container: `.hrck-cta-stack` (`--desktop` / `--mobile` variants) - Item wrapper: `.hrck-cta-item` (visible state: `.hrck-cta-visible`) ### Side Panel wishlist drawer Saved and recently-viewed properties in a slide-out drawer. - Containers: `.hrck-side-panel-tab`, `.hrck-side-panel`, `.hrck-side-panel-backdrop` - Children: `.hrck-panel-card`, `.hrck-panel-card-title`, `.hrck-panel-card-price`, `.hrck-panel-empty`, `.hrck-panel-wishlist-btn` ### Split Cost Calculator Trigger plus modal for splitting a trip's cost across a group. - Containers: `.hrck-split-cost-trigger`, `.hrck-sc-modal` (open state: `.hrck-sc-modal--open`) - Children: `.hrck-sc-family-card`, `.hrck-sc-family-header`, `.hrck-sc-family-stepper`, `.hrck-sc-bedroom-warning` ### Price Drop Alerts Trigger plus modal where guests subscribe to price-drop emails. - Containers: `.hrck-pa-cta-container`, the modal `#hrck-price-alerts-modal` - Children: `.hrck-pa-cta-btn`, `.hrck-pa-modal`, `.hrck-pa-progress`, `.hrck-pa-consent-label` ### Contact Form Trigger plus modal contact form. - Containers: `.hrck-contact-trigger`, `.hrck-cf-modal` (open state: `.hrck-cf-modal--open`) - Children: `.hrck-cf-field`, `.hrck-cf-modal-header`, `.hrck-cf-progress-bar`, `.hrck-cf-confirmation` - The module's settings also include a Button CSS field for custom trigger styling; rules you enter there need `!important` to take effect. ### Booking Reminder Trigger plus modal for "remind me later" booking capture. - Containers: `.hrck-br-trigger`, `.hrck-br-modal` (open state: `.hrck-br-modal--open`) - Children: `.hrck-br-field`, `.hrck-br-modal-header`, `.hrck-br-disclaimer`, `.hrck-br-confirmation` --- ## Standard modules ### Rate Comparison OTA price comparison badge and modal near the booking widget, with desktop, mobile, and sticky variants. - Containers: `.hrck-rate-comparison-wrapper`, `.hrck-rate-comparison`; badge variants `.hrck-desktop-badge`, `.hrck-mobile-badge` - Children: `.hrck-best-price`, `.hrck-direct-container`, `.hrck-collapsed-compare`, `.hrck-header` - Uses `!important` internally on several properties; match it when an override doesn't take. ### Promo Bar Top or bottom announcement bar with countdown. - Container: `.hrck-promo-bar` (`--top` / `--bottom` / `--idle`) - Children: `.hrck-promo-bar__headline`, `.hrck-promo-bar__cta`, `.hrck-promo-bar__countdown-digits`, `.hrck-promo-bar__dismiss` ### Property Finder Property search box with autocomplete dropdown. - Container: `.hrck-pf-wrapper` - Children: `.hrck-pf-input`, `.hrck-pf-dropdown`, `.hrck-pf-option` ### Trip Builder (guest widget) Bundle-builder widget with compare bar and modal. - Containers: `.hrck-tb-guest`, `.hrck-tb-modal`, `.hrck-tb-compare-bar` - Children: `.hrck-tb-bundle`, `.hrck-tb-bundle__header`, `.hrck-tb-btn--primary`, `.hrck-tb-modal__panel` ### Trip Page Post-booking trip management cards. - Container: `.hrck-trip-card` - Children: `.hrck-trip-card__body`, `.hrck-trip-card__price`, `.hrck-trip-card__book-btn`, `.hrck-trip-card__booked-check` ### Wishlist heart The save/heart toggle on property cards. - Containers: `.hrck-wishlist-heart`, `.hrck-wishlist-save` - States: `.hrck-heart-active`, `.hrck-heart-animating` ### Wishlist page Full saved-properties grid with notes and voting. - Container: `.hrck-wishlist-page` - Children: `.hrck-wishlist-grid`, `.hrck-wishlist-card`, `.hrck-wishlist-toolbar`, `.hrck-inline-note`, `.hrck-wishlist-voting` - Uses `!important` internally on several properties. ### Guest Portal The signed-in guest account and alerts dashboard. - Container: `.hrck-portal` (`--sign-in` variant) - Children: `.hrck-portal-card`, `.hrck-portal-btn`, `.hrck-pa-row`, `.hrck-pa-property` ### Marketing Cards Promotional banner and CTA blocks placed via shortcode or block. - Container: `.hrck-marketing-card` - Children: `.hrck-mc-media`, `.hrck-mc-title`, `.hrck-mc-cta`, `.hrck-mc-eyebrow` ### Review Insights Trust badge, FAQ accordion, review summary, and "best for" tags. - Independent widgets rather than one container: `.hrck-ri-trust-badge`, `.hrck-ri-faq`, `.hrck-ri-best-for`, `.hrck-ri-callout-pills`, `.hrck-ri-email-review` ### Vibe Profile Full-screen swipe quiz for guest preference matching. - Container: `.hrck-vibe-card` - Children: `.hrck-vibe-btn-like`, `.hrck-vibe-btn-skip`, `.hrck-vibe-card-overlay`, `.hrck-vibe-complete` ### Booking Preloader Skeleton shimmer shown while the HomeRunner booking widget loads. It styles the booking widget's own markup, so its theming surface is the two variables listed above (`--hrck-widget-padding`, `--hrck-skel`). --- ## More styling references - [HomeRunner plugin: CSS Class Reference](https://homerunner.io/docs/css-class-reference/) - [Toolkit Styling Reference](https://homerunner.io/docs/toolkit-styling-reference/) - [AI Concierge: Appearance and Theming](https://homerunner.io/docs/ai-concierge-appearance/) **Machine-readable version:** all four styling references are also published as a single plain-text file at [homerunner.io/llms-styling.txt](https://homerunner.io/llms-styling.txt). Point an AI assistant at that URL to give it the entire styling surface in one fetch, instead of pasting in each article separately. ==== # toolkit-styling-reference (https://homerunner.io/docs/toolkit-styling-reference/) The Toolkit's guest-facing modules are built to blend into your site, and each one can be restyled further. This page covers the three layers, in the order you should reach for them: the Skin Designer settings screen, the CSS theming variables, and the class names. Like the [HomeRunner CSS Class Reference](https://homerunner.io/docs/css-class-reference/), it's written so you can paste the whole page into an AI assistant (Claude, ChatGPT) with a description of the look you want and let it write the CSS. ## Start with the Skin Designer The look of property cards, listings, and the search bar area is controlled by the **HomeRunner Skin** module's Skin Designer screen in the Toolkit admin: colors, fonts, corner radii, card spacing, price arrangement, image aspect ratio, and ready-made presets. If your goal is "make the listings match my brand," do it there before writing any CSS. The Skin Designer's choices are delivered to the page as `--hrtk-skin-*` CSS variables (full list in the appendix), so anything you set there can also be fine-tuned from CSS afterward. Map marker and cluster badge colors work the same way: set them in the Map Stacking module's settings, fine-tune via the variables below if needed. ## Protected styling, and what it means for your CSS Toolkit modules ship with protected styling: their rules are deliberately weighted so a host theme's CSS can't accidentally break them, which also means your own plain selectors won't override them directly. Two modules expose a documented set of theming variables as the supported way through: **Searchbar Pro** and **Destination Filter**. Set the variables with an ordinary rule and they win, no `!important` needed: ``` .hrtk-sbp-search-bar { --hrtk-sbp-btn-bg: #0a7d4f; --hrtk-sbp-btn-bg-hover: #08663f; --hrtk-sbp-radius: 8px; } .hrtk-dfilter-popup { --hrtk-dfilter-accent: #0a7d4f; --hrtk-dfilter-header-bg: #1f2d3a; } ``` For protected modules without a variable API (Flexible Search, Group Suggestion, Checkout Guest Step, Checkout Survey, Guest Picker), a direct rule against their classes needs `!important` to take effect. Two modules run on ordinary CSS with no protection: the mobile map dock and the guest review pages. ## Searchbar Pro variables Set on `.hrtk-sbp-search-bar`. Defaults are the shipped look; override only what you need. - Bar and layout: `--hrtk-sbp-bg`, `--hrtk-sbp-bar-bg`, `--hrtk-sbp-bar-w`, `--hrtk-sbp-border`, `--hrtk-sbp-shadow`, `--hrtk-sbp-shadow-focus`, `--hrtk-sbp-radius`, `--hrtk-sbp-gap`, `--hrtk-sbp-ext` - Labels and inputs: `--hrtk-sbp-label-color`, `--hrtk-sbp-label-size`, `--hrtk-sbp-input-color`, `--hrtk-sbp-placeholder`, `--hrtk-sbp-input-size` - Search button: `--hrtk-sbp-btn-bg`, `--hrtk-sbp-btn-bg-hover`, `--hrtk-sbp-btn-color`, `--hrtk-sbp-btn-radius` - Suggestion listbox: `--hrtk-sbp-listbox-bg`, `--hrtk-sbp-listbox-shadow`, `--hrtk-sbp-listbox-radius`, `--hrtk-sbp-listbox-max-h`, `--hrtk-sbp-hover-bg`, `--hrtk-sbp-hover-color` - Field states: `--hrtk-sbp-field-bg`, `--hrtk-sbp-field-hover-bg`, `--hrtk-sbp-field-inactive-bg`, `--hrtk-sbp-field-active-bg`, `--hrtk-sbp-field-active-shadow`, `--hrtk-sbp-focus-ring` - Popovers: `--hrtk-sbp-popover-shadow`, `--hrtk-sbp-popover-radius`, `--hrtk-sbp-popover-width` - Text states: `--hrtk-sbp-text-idle`, `--hrtk-sbp-text-hover`, `--hrtk-sbp-text-active` - Accent (also settable via the module's color picker in admin): `--hrtk-sbp-accent`, `--hrtk-sbp-accent-hover`, `--hrtk-sbp-accent-ring` - Motion and dividers: `--hrtk-sbp-spring`, `--hrtk-sbp-divider-color`, `--hrtk-sbp-divider-h`, `--hrtk-sbp-scrim-color`, `--hrtk-sbp-scrim-extent` ## Destination Filter variables Set on `.hrtk-dfilter-popup`. Defaults in parentheses. - `--hrtk-dfilter-accent` (#c9a959), `--hrtk-dfilter-accent-hover` (#b8963f), `--hrtk-dfilter-accent-soft` (#faf5e8), `--hrtk-dfilter-accent-softer` (#fdfbf5) - `--hrtk-dfilter-header-bg` (#2c3e50), `--hrtk-dfilter-header-fg` (#ffffff) - `--hrtk-dfilter-surface` (#ffffff), `--hrtk-dfilter-surface-alt` (#f7f9fb) - `--hrtk-dfilter-text` (#2c3e50), `--hrtk-dfilter-text-muted` (#8899aa) - `--hrtk-dfilter-border` (#e8ecf0), `--hrtk-dfilter-radius` (14px) --- ## Module class reference ### Searchbar Pro The full-width property search bar with date picker and guest picker, plus its mobile modal. - Containers: `.hrtk-sbp-search-bar` (desktop), `.hrtk-sbp-search-bar__mobile` and `.hrtk-sbp-search-bar__mobile-trigger` (mobile) - Children: `.hrtk-sbp-search-bar__field`, `.hrtk-sbp-search-bar__field--where`, `.hrtk-sbp-search-bar__submit`, `.hrtk-sbp-datepicker` (with `__calendar`, `__day--in-range`, `__day--checkin`, `__day--checkout`), `.hrtk-sbp-guest-picker` (with `__btn`, `__stepper`) - Sticky/compressed state: `.hrtk-sbp-search-bar-host--refine` - Note: the bar's open/close animation is driven by inline styles the module writes itself; those aren't overridable from CSS. ### Destination Filter The destination picker modal. - Containers: `.hrtk-dfilter-backdrop` (overlay), `.hrtk-dfilter-popup` (modal) - Children: `.hrtk-dfilter-accordion`, `.hrtk-dfilter-checkbox-box`, `.hrtk-dfilter-checked`, `.hrtk-dfilter-count`, `.hrtk-dfilter-apply`, `.hrtk-dfilter-clear`, `.hrtk-dfilter-footer` ### Flexible Search Flexible-dates chips and panel inside the date picker modal. - Containers: `.hrtk-fs-toggle`, `.hrtk-fs-panel`, `.hrtk-fs-form-strip`, `.hrtk-fs-empty` - Children: `.hrtk-fs-chip`, `.hrtk-fs-chip-group`, `.hrtk-fs-chip-primary`, `.hrtk-fs-chip-secondary`, `.hrtk-fs-alt-chips`, `.hrtk-fs-date-modal`, `.hrtk-fs-apply`, `.hrtk-fs-clear` ### Group Suggestion Banner suggesting sibling properties for groups that exceed a property's capacity. - Container: `.hrtk-group-banner` - Children: `.hrtk-group-banner-header`, `.hrtk-group-banner-capacity`, `.hrtk-group-banner-siblings`, `.hrtk-group-sibling-card`, `.hrtk-group-sibling-availability` ### Checkout Guest Step Guest summary step injected into the checkout card. - Classes: `.hrtk-cgs-summary` (with `-name`, `-contact`, `-lines`), `.hrtk-cgs-continue-btn`, `.hrtk-cgs-edit-btn`, `.hrtk-cgs-invalid`, `.hrtk-cgs-privacy-note` ### Checkout Survey "How did you hear about us" field at checkout; it leans on the checkout's own field styling. - Classes: `.hrtk-checkout-survey-field`, `.hrtk-survey-other-wrap` ### Guest Picker The standalone guests modal (separate from Searchbar Pro's built-in guest picker). - Container: `.hrtk-gp-modal` - Children: `.hrtk-gp-stepper` (with `-btn`, `-value`), `.hrtk-gp-row-item`, `.hrtk-gp-row-label`, `.hrtk-gp-pets-notice`, `.hrtk-gp-trigger` ### HomeRunner Skin The property-card and listing visual layer. It has no elements of its own; it re-skins the HomeRunner plugin's markup, driven by the Skin Designer. Its classes are preset modifiers (for example `.hrtk-skin--card-image-aspect-16-9`, `.hrtk-skin--searchbar-position-floating`) that the Skin Designer toggles for you. Restyle through the Skin Designer and the `--hrtk-skin-*` variables, not these classes. ### Map Stacking Stacked-marker badges, spider legs, and cluster popups on the results map. - Classes: `.hrtk-stack-count`, `.hrtk-stack-count-only`, `.hrtk-spider-marker`, `.hrtk-spider-leg`, `.hrtk-spider-popup` (with `-inner`, `-close`), `.hrtk-leaflet-cluster` - Badge colors come from the Map Stacking settings, delivered as variables: `--hrtk-badge-bg`, `--hrtk-badge-text`, `--hrtk-count-bg`, `--hrtk-center-dot`, `--hrtk-connector`, `--hrtk-focus` ### Explorer Mobile Sheet The mobile bottom bar, search pill, and floating action button on Explorer pages. - Classes: `.hrtk-msheet-bar`, `.hrtk-msheet-fab` (with `-hidden`, `-ico`), `.hrtk-msheet-pill`, `.hrtk-msheet-head`, `.hrtk-msheet-count`, `.hrtk-msheet-filters-open` ### Explorer Map Mobile Dock Docks the map tooltip on mobile. It mostly restyles the map library's own elements, so overriding it means matching the `!important` rules it uses; its one own class is `.hrtk-explorer-map-tooltip--docked`. ### Guest review form The standalone "leave a review" page guests reach from review request emails. Ordinary CSS applies here. - Containers: `.hrtk-rs-page`, `.hrtk-rs-card` - Children: `.hrtk-rs-header`, `.hrtk-rs-brand`, `.hrtk-rs-logo`, `.hrtk-rs-property-hero` (with `-image`, `-text`, `-title`, `-location`), `.hrtk-rs-form`, `.hrtk-rs-field`, `.hrtk-rs-field-label`, `.hrtk-rs-field-hint`, `.hrtk-rs-counter`, `.hrtk-rs-cta-google` --- ## Appendix: Skin Designer variables All prefixed `--hrtk-skin-`, set from the Skin Designer and overridable at `:root`: - Colors: `-color-primary`, `-color-primary-hover`, `-color-on-primary`, `-color-text`, `-color-muted`, `-color-surface`, `-color-border`, `-color-divider` - Typography: `-font-family`, `-font-family-title`, `-font-size-input`, `-font-size-label`, `-font-size-card-title`, `-font-size-secondary-meta`, `-text-transform-title` - Search bar: `-color-searchbar-submit-bg`, `-color-searchbar-submit-hover`, `-color-searchbar-submit-text`, `-color-searchbar-filters-bg`, `-color-searchbar-filters-hover`, `-color-searchbar-filters-text`, `-shadow-searchbar`, `-searchbar-floating-max-width`, `-submit-size` - Inputs: `-color-bg-input`, `-radius-input`, `-space-field-x`, `-space-field-y` - Cards: `-radius-card`, `-shadow-card`, `-radius-slideshow`, `-card-dotnav-size`, `-space-card-body-y`, `-space-card-body-x`, `-space-card-meta-gap`, `-space-card-image-mb`, `-card-secondary-meta-width`, `-card-icon-size` - Misc: `-radius-button`, `-radius-pill`, `-radius-modal`, `-shadow-modal` --- ## More styling references - [HomeRunner plugin: CSS Class Reference](https://homerunner.io/docs/css-class-reference/) - [Conversion Kit Styling Reference](https://homerunner.io/docs/conversion-kit-styling-reference/) - [AI Concierge: Appearance and Theming](https://homerunner.io/docs/ai-concierge-appearance/) **Machine-readable version:** all four styling references are also published as a single plain-text file at [homerunner.io/llms-styling.txt](https://homerunner.io/llms-styling.txt). Point an AI assistant at that URL to give it the entire styling surface in one fetch, instead of pasting in each article separately. ==== # ai-concierge-appearance (https://homerunner.io/docs/ai-concierge-appearance/) The AI Concierge's launcher and chat panel are themed from its settings screen, and that is where nearly all appearance changes belong. This page covers the settings, the one CSS variable intended for site-level theming, and an advanced appendix of structural classes for agencies that need deeper hooks. ## The Chatbot settings All under the plugin's Chatbot settings section: - **Chatbot Position** places the launcher and drawer on the right or left edge. - **Vertical Offset** raises the launcher from its resting position, useful when it collides with a cookie bar or another floating element. - **Tab Gradient Start / End** set the launcher's two gradient colors. These two colors also drive the animated orb's palette automatically; there is no separate orb color to manage. - **Accent Light Color** tints the intro light sweep and the launcher hairline. Leave it blank and a soft tint is derived from your gradient. - **Tab Tooltip** sets the hover bubble text, with companion settings for showing it automatically after a delay and on hover. - **Reveal Delay** controls how long after page load the launcher slides in. - **Concierge Name** sets the title in the drawer header. Changes here restyle the concierge everywhere it appears, survive plugin updates, and never fight your theme. On phones and small tablets the launcher keeps the same edge-tab shape, just sized down, rather than switching to a separate round button, so your Chatbot Position and gradient colors carry over automatically. Opening it there fills the screen with the chat panel instead of sliding out a side panel. ## Theming from CSS One variable is intended as the site-level CSS hook. Setting it re-brands the accent used by notices, highlights, the loading spinner, and focus rings inside the chat: ``` :root { --hr-chat-accent: #0a7d4f; --hr-chat-accent-hover: #08663f; --hr-chat-accent-soft: rgba(10, 125, 79, 0.06); --hr-chat-accent-ring: rgba(10, 125, 79, 0.18); } ``` The three companions are optional; sensible values are derived if you set only the first. A few supporting tokens also live at `:root` if you need them: `--hr-chat-bg`, `--hr-chat-bg-subtle`, `--hr-chat-text`, `--hr-chat-text-muted`, `--hr-chat-border`, `--hr-chat-sans`, `--hr-chat-radius`, `--hr-chat-shadow`. ## Advanced: structural classes Everything below is rendered by JavaScript after page load and is not a supported theming surface. In particular, the launcher gradient, orb palette, and drawer dimensions are recomputed from your settings on every save, so CSS pinned against them is fragile. Use these hooks sparingly, and prefer the settings above wherever they cover your case. - `.hr-chat-tab` - the launcher button; inside it `.hr-chat-tab-inner`, `.hr-chat-tab-orb` (the animated orb), `.hr-chat-tab-icon`, `.hr-chat-tab-tooltip` - `.hr-chat-overlay` - the dim backdrop behind the open drawer - `.hr-chat-drawer` - the chat panel; inside it `.hr-chat-header` (with `.hr-chat-header-name`), `.hr-chat-messages`, `.hr-chat-input-area` (with `.hr-chat-input`, `.hr-chat-send-btn`, `.hr-chat-mic-btn`) - Message bubbles, added as the conversation runs: `.hr-chat-bubble-user`, `.hr-chat-bubble-assistant`, `.hr-chat-bubble-operator`, `.hr-chat-cards` with `.hr-chat-card` (property suggestion cards and their `-thumb`, `-title`, `-meta`, `-price` parts), `.hr-chat-chips` with `.hr-chat-chip` (quick-reply chips) - Launcher state classes toggled at runtime: `.hr-chat-tab-open`, `.hr-chat-has-unread`, `.hr-chat-tab-pulse` A small number of the concierge's own rules use `!important` to protect its geometry and icon colors from theme resets; if a rule of yours doesn't take on those properties, that protection is why. --- ## More styling references - [HomeRunner plugin: CSS Class Reference](https://homerunner.io/docs/css-class-reference/) - [Conversion Kit Styling Reference](https://homerunner.io/docs/conversion-kit-styling-reference/) - [Toolkit Styling Reference](https://homerunner.io/docs/toolkit-styling-reference/) **Machine-readable version:** all four styling references are also published as a single plain-text file at [homerunner.io/llms-styling.txt](https://homerunner.io/llms-styling.txt). Point an AI assistant at that URL to give it the entire styling surface in one fetch, instead of pasting in each article separately.