Skip to main content
View Categories

Toolkit Styling Reference

Table of Contents

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, 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 #

Machine-readable version: all four styling references are also published as a single plain-text file at 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.