Skip to main content
HomeRunner
View Categories

Toolkit: Styling Reference

0:00 44:07
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.

Before any of that, set the site brand palette on the Toolkit Settings tab: one accent color, one ink color, and a corner radius that every module reads as its default wherever its own color is left at stock. Details in Brand Palette.

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.

Twelve modules expose a documented set of theming variables as the supported way through: Searchbar Pro, Destination Filter, Destination Search, Property Page Section Nav, Photo Gallery, Travel Protection, Add-On Showcase, Review Showcase, Keyword Search, Local Guide, Tier Rating, and Card Rating. Set the variables with an ordinary rule and they win, no !important needed (Local Guide is the one exception, see its section below; Tier Rating tints are the other, see its section below):

`.hrtk-sbp-search-bar {

–hrtk-sbp-btn-bg: #0a7d4f;

–hrtk-sbp-btn-bg-hover: #08663f;

–hrtk-sbp-shape-max: 8px;

}

.hrtk-dfilter-popup {

–hrtk-dfilter-accent: #0a7d4f;

–hrtk-dfilter-header-bg: #1f2d3a;

}

.hrtk-dsearch {

–hrtk-dsearch-accent: #0a7d4f;

–hrtk-dsearch-heading-bg: #1f2d3a;

}

.hrtk-psn {

–hrtk-psn-bg: #1f2d3a;

–hrtk-psn-fg: #ffffff;

}

#pg-wrap {

–hrtk-pg-accent: #0a7d4f;

}

.hrtk-tp {

–hrtk-tp-accent: #0a7d4f;

–hrtk-tp-selected: #eef6f2;

}

.hrtk-rv {

–hrtk-rv-star: #0a7d4f;

–hrtk-rv-radius: 6px;

}

:root {

–hrtk-tier-radius: 6px;

–hrtk-tier-star: #0a7d4f;

}`

For protected modules without a variable API (Flexible Search, Explorer Dynamic Min Stay, Group Suggestion, Two-Step Checkout, Checkout Survey, Streamlined Checkout Consent, Inline Price Breakdown, Original Total, Rate Plan Control, Guest Picker, Map Stacking, Map All Pins, Map Controls, Mobile Explorer, HomeRunner Skin, Bedroom Showcase), a direct rule against their classes needs !important to take effect. Five modules run on ordinary CSS with no protection, so a plain selector already wins with no !important: the mobile map dock, the guest review pages, the Reviews Page landing page, the AI-Ready guest entry point, and Property Actions.

Recent change: Map All Pins is now protected #

Map All Pins used to ship its styling unprotected, so a plain rule against classes like .hrtk-allpins-dot or .hrtk-map-finder was enough to restyle it. As of Toolkit 3.156 its styling is protected like the rest of the map modules, which closed a real problem (host themes were able to outrank the finder control and the pin card) but also means those plain rules no longer win.

If you wrote custom CSS against the Map All Pins classes before this change and it has stopped applying, add !important to the declarations in that rule. The class names themselves did not change, and the --hrtk-badge-* variables listed under Map Stacking below still work as ordinary variable rules with no !important needed, because Map All Pins reuses them.

Recent change: Inline Price Breakdown is now protected #

Inline Price Breakdown used to ship as ordinary, unprotected CSS, so a plain rule against classes like .hrtk-ipb-toggle or .hrtk-ipb-exp-toggle was enough to restyle it. Its styling is now protected, the same way most other Toolkit modules already are, so those plain rules no longer win on their own.

If you wrote custom CSS against the Inline Price Breakdown classes before this change and it has stopped applying, add !important to the declarations in that rule. The class names themselves did not change. This module has no dedicated theming variables, so !important is the only way through.

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-gap, --hrtk-sbp-ext
  • Corner shape: --hrtk-sbp-shape-max is the one master token, capping every corner radius in the bar (999px = pill, the default; set it to a pixel value like 12px for rounded, or 0px for square). --hrtk-sbp-radius mirrors it on the bar itself, and --hrtk-sbp-radius-inner is the derived, slightly tighter radius used on elements nested inside a shaped surface (the submit button, and cards inside popovers), so nested corners stay concentric instead of mismatched.
  • 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
  • Sticky bar top offset (set via the module’s Sticky bar top offset admin field, in px, default 0): --hrtk-sbp-nav-offset pushes the pinned bar down so a sticky site navbar doesn’t cover it. It’s managed by the plugin rather than meant for direct CSS overrides, but it’s a real custom property, so a more specific rule still wins if you need to fine-tune the pinned position further.
  • Sticky bar maximum width (set via the module’s Sticky bar maximum width admin field, in px, default 0): --hrtk-sbp-sticky-max-width caps the width of the expanded homepage-style bar once it pins, replacing the 890px default. It is written inline on the bar’s wrapper only when the setting is above 0, so set it in the settings panel rather than from CSS. On the results-page bar the plugin applies the cap in script instead of through this property.
  • Quick filter chips: --hrtk-qc-fade-l and --hrtk-qc-fade-r set the edge-fade width on the scrollable quick-chips row (0 by default, widened automatically once the row overflows); --hrtk-qc-icon is set per chip when that quick filter has an icon. --hrtk-qc-text and --hrtk-qc-text-strong set the chip label, icon, and clear-button color (default: dark-on-light, #5b6069 idle and #1f2329 selected or hovered). They switch to a light palette automatically when the chips row sits inside a UIkit light-text section (uk-light, uk-section-primary, uk-section-secondary, uk-tile-primary, uk-tile-secondary, uk-card-primary, uk-card-secondary, uk-overlay-primary, uk-offcanvas-bar) or the theme-agnostic .hrtk-light class, and reset to the default dark-on-light pair inside .hrtk-dark or uk-dark.

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)

If your popup uses the grouped search bar (see Destination Search below), its --hrtk-dsearch-* tokens are remapped onto this same popup palette automatically, so a --hrtk-dfilter-accent override reflects in the search results too. No separate wiring needed inside the popup.

Destination Search variables #

Set on .hrtk-dsearch, the search component’s own root. This is the grouped Homes / Islands / Cities / Resorts search box, available inside the Destination Filter popup and as the standalone [homerunner_destination_search] shortcode. Like Searchbar Pro and Destination Filter, Destination Search ships protected styling, so a plain rule against its classes needs !important; the variables below are the supported way through, with no !important needed. The browse-by-resort list and the phone sheet added in 3.340 read these same variables, so one palette covers the field, the results, the list and the sheet. Defaults in parentheses.

With sheet="phone", the search is lifted out of its place on the page while the sheet is open and placed inside a full-screen wrapper, .hrtk-dsearch-sheet, at the end of the page, then put back when the sheet closes. The wrapper is protected like the component and paints its background from --hrtk-dsearch-surface. Variables declared on .hrtk-dsearch itself or on :root follow the search into the sheet; variables declared on a parent of its original placement (a hero section, for example) do not, so put sheet-facing overrides on :root or on .hrtk-dsearch.

  • --hrtk-dsearch-accent (#c9a959), --hrtk-dsearch-accent-hover (#b8963f), --hrtk-dsearch-accent-soft (#faf5e8)
  • --hrtk-dsearch-heading-bg (#2c3e50), --hrtk-dsearch-heading-fg (#c9a959)
  • --hrtk-dsearch-surface (#ffffff), --hrtk-dsearch-surface-alt (#f7f9fb)
  • --hrtk-dsearch-text (#2c3e50), --hrtk-dsearch-text-muted (#8899aa)
  • --hrtk-dsearch-field-bg (#ffffff), --hrtk-dsearch-field-fg (#2c3e50), --hrtk-dsearch-field-border (#e8ecf0), --hrtk-dsearch-field-placeholder (#8899aa)
  • --hrtk-dsearch-border (#e8ecf0), --hrtk-dsearch-radius (12px), --hrtk-dsearch-ring (#faf5e8)
  • --hrtk-dsearch-heading-h (31px), the sticky offset for the resort headers in the browse list; the script measures the heading band and sets it, so treat it as read-only

Property Page Section Nav variables #

Set on .hrtk-psn, the nav’s own root. Defaults in parentheses.

  • --hrtk-psn-bg (#fff), --hrtk-psn-fg (#222), --hrtk-psn-muted (#6d6d6d), --hrtk-psn-border (rgba(0,0,0,0.1)), --hrtk-psn-shadow (0 2px 12px rgba(0,0,0,0.1))
  • --hrtk-psn-radius (999px), --hrtk-psn-max-width (1200px), --hrtk-psn-font-size (15px), --hrtk-psn-z-index (900)
  • --hrtk-psn-offset is written inline by the module from its own Distance from the top setting; set it in the settings panel, not from CSS.

Photo Gallery variables #

Set on #pg-wrap. Defaults in parentheses. Fonts deliberately inherit your site’s own typography rather than forcing a specific one.

  • --hrtk-pg-accent (#B89535), --hrtk-pg-text (#1A1A1A), --hrtk-pg-text-secondary (#6B6B6B)
  • --hrtk-pg-border (#E2DFDA), --hrtk-pg-border-light (#E8E5E0)
  • --hrtk-pg-main-share (0.375), --hrtk-pg-gap (3px), --hrtk-pg-radius (0px) carry the Large photo width, Space between photos, and Corner radius settings. The module writes them inline on #pg-wrap whenever a setting differs from its default, so set them in the settings panel, not from CSS. --hrtk-pg-main-share is the large photo’s unitless share of the hero width.
  • --hrtk-pg-btn-bg, --hrtk-pg-btn-text, --hrtk-pg-btn-border, --hrtk-pg-btn-hover, --hrtk-pg-btn-radius (8px) style the Show all photos and 3D Tour buttons. The module writes them inline on #pg-wrap only for values you set under Button style in the settings panel: with a background color it also writes a darker hover shade, plus a text and outline color when you left those empty. Without them the buttons stay white with dark text. Set them in the settings panel, not from CSS.
  • --hrtk-pg-max-width (1200px) is written inline by the module from the Maximum width setting (or the shortcode’s max_width attribute) when the gallery is boxed; set it in the settings panel, not from CSS.

Travel Protection variables #

Set on .hrtk-tp, the section’s own root. Defaults in parentheses.

  • --hrtk-tp-accent (#184b49) – selected-card border, price, and link color
  • --hrtk-tp-border (#d9dfe3) – unselected-card border color
  • --hrtk-tp-selected (#f4f8f7) – background of the selected plan card

Add-On Showcase variables #

Set on .hrtk-aos, the section’s own root. Defaults in parentheses.

  • --hrtk-aos-accent (#184b49) – selected-card border, price, Add button and focus ring color
  • --hrtk-aos-border (#d9dfe3) – unselected-card border color
  • --hrtk-aos-selected (#f4f8f7) – background of a selected card, the button hover state and the sidebar summary
  • --hrtk-aos-muted (#58656c) – introduction, category headings, descriptions, badges and the property-page teaser
  • --hrtk-aos-warn (#8a3b12) – error and warning notices

Reviews Page variables #

Set on .hrtk-reviews-page. Defaults in parentheses. Fonts and spacing inherit your theme; color runs through these variables instead.

  • --hrtk-rp-accent (#16242f) is written inline from the module’s Accent color setting when you set one; the default applies while that setting is blank.
  • --hrtk-rp-sidebar-offset (0px) is written inline from the module’s Sidebar top offset setting when it is above zero. With the setting left at 0, a small script measures your pinned theme header and writes the same variable for you on desktop; a number you enter always wins over the measurement. The desktop sticky rail adds it to its top position and subtracts it from its maximum height.
  • --hrtk-rp-accent-contrast (#ffffff), --hrtk-rp-star (#e9a13b)
  • --hrtk-rp-line (rgba(128, 128, 128, 0.22)) and --hrtk-rp-soft (rgba(128, 128, 128, 0.07)) are a neutral gray by default, but in modern browsers they instead tint from --hrtk-rp-accent (at 18% and 5% opacity), so a custom accent color carries through to borders and backgrounds too.

Review Showcase variables #

Set these on .hrtk-rv, the wrapper around every [homerunner-reviews] block. Defaults in parentheses. Fonts and text color inherit your theme. Ordinary CSS applies, no !important needed.

  • --hrtk-rv-star (#e9a13b) is the star color. The shortcode’s star_color option writes this variable inline on that block, so set the color there when you want one block to differ.
  • --hrtk-rv-gap (1.25rem) is the space between cards, and --hrtk-rv-pad (1.35rem) is the padding inside a card.
  • --hrtk-rv-radius (14px) is the card corner radius. It also rounds the property image.
  • --hrtk-rv-line (rgba(128, 128, 128, 0.26)) colors borders, empty stars, and quiet rules. --hrtk-rv-soft (rgba(128, 128, 128, 0.08)) fills the image placeholder and the host reply.
  • --hrtk-rv-card-bg is the card background. It is transparent unless the card style is Shadow, where it is white.
  • The shortcode writes --hrtk-rv-cols, --hrtk-rv-cols-md, --hrtk-rv-cols-sm, --hrtk-rv-lines, and --hrtk-rv-ratio inline from its columns, columns_tablet, columns_mobile, lines, and image_ratio options, and --hrtk-rv-n is worked out from them. Change those options on the shortcode rather than overriding the variables.

Keyword Search variables #

Keyword Search adds the Find a feature control to your search area. Its colors come from the surrounding text and your Skin Designer accent, so it follows light and dark sections on its own. Ordinary CSS applies, no !important needed.

  • --hrtk-kw-accent sets the accent. It is set on the search area when your site resolves one; otherwise the control uses your skin’s primary color, then the text color.
  • --hrtk-kw-surface (the browser’s Canvas color) and --hrtk-kw-ink (CanvasText) color the suggestions panel and the card badge. These two sit on top of other content, so they need an opaque background that a mix of the text color cannot give.
  • --hrtk-kw-entry-w (132px) and --hrtk-kw-term-w (300px) are the widths of the control while it sits in the quick filter chip row, and the script adjusts both as the control opens. Leave them alone.
  • --hrtk-kw-nearby (#6b7280) sets the badge color on a nearby match, a feature that is near the home rather than at it. The badge keeps its place and swaps the accent for this neutral tone.
  • --hrtk-kw-a and --hrtk-kw-fade are internal. Leave them alone.

Local Guide variables #

Local Guide is the places guide page and the Nearby stack on property pages. Its rules are protected, so class rules need !important. The theming variables are the supported way to restyle it. Defaults in parentheses.

  • --hrtk-local-guide-accent is the accent for chips, links, buttons, and pins. By default it follows your Searchbar Pro accent when one is set, and falls back to a deep teal (#1f4e5f). --hrtk-local-guide-accent-soft is a light tint of the accent, worked out for you.
  • To change the accent, set --hrtk-local-guide-accent-site on :root or any wrapper. It works as an ordinary rule with no !important, and it leaves Searchbar Pro alone.
  • --hrtk-local-guide-text (#1f2937) and --hrtk-local-guide-muted (#6b7280) are the text colors.
  • --hrtk-local-guide-surface (#ffffff) and --hrtk-local-guide-surface-alt (#f5f5f4) are the card and panel backgrounds. --hrtk-local-guide-border (#e5e7eb) colors borders.
  • --hrtk-local-guide-radius (12px) is the card corner radius, and --hrtk-local-guide-gap (20px) is the space between cards.
  • --hrtk-local-guide-font (inherit) sets the font family. The guide uses your theme’s font until you set it.
  • --hrtk-local-guide-eyebrow-size (11px) and --hrtk-local-guide-eyebrow-track (0.08em) set the size and letter spacing of the small category labels.
  • --hrtk-local-guide-map-height (320px) is the height of the map on small screens. From a wide screen the map sits beside the list and stays in view as you scroll.
  • --hrtk-local-guide-sticky-top (24px) is how far from the top of the screen the map stops while you scroll. Raise it if a sticky site header covers the map.
  • --hrtk-local-guide-pin-home, --hrtk-local-guide-pin-partner (both follow the accent), and --hrtk-local-guide-pin-place (#9ca3af) color the map pins for your homes, perk places, and other places.

The guide sets its own variables on each guide it prints, so an override on .hrtk-local-guide needs !important to win. The one that does not is --hrtk-local-guide-accent-site.

Card Rating variables #

Card Rating is the rating line on results cards (under the home name or on the location line) and in the map popup. Its rules are protected, so class rules need !important. The theming variables are the supported way to restyle it. Set them on :root. Defaults in parentheses.

  • --hrtk-card-rating-star (#f0b429) colors the star, and --hrtk-card-rating-size (13px) is the text size. Both follow the Hub settings when you change the star color or text size there.
  • --hrtk-card-rating-fg (inherited) is the color of the average, and --hrtk-card-rating-muted (a 60% black) is the color of the count in parentheses.

Tier Rating variables #

Tier Rating is the tier badge on results cards (under the home name or over the photo) and the property page, and its info popover. Its rules are protected, so class rules need !important. The theming variables are the supported way to restyle it. Set them on :root, because the popover is attached to the page body rather than to the badge. Defaults in parentheses.

  • --hrtk-tier-radius (999px) is the badge corner radius, and --hrtk-tier-font-size (13px) is the badge text size. --hrtk-tier-font-size-mobile (12px) takes over on screens up to 480px wide.
  • --hrtk-tier-star (#c9a227) colors the stars, and --hrtk-tier-image-size (18px) sets the width and height of a tier image.
  • --hrtk-tier-image-badge-size (64px) is the height of a tier image shown alone, with no pill (the tier image alone badge option). Over the photo (Top-left over the photo position) the default is 72px, and --hrtk-tier-image-badge-size-mobile (56px) takes over on screens up to 480px wide.
  • --hrtk-tier-focus (#1f1f1f) colors the keyboard focus outline on the badge.
  • --hrtk-tier-popover-bg (#fff) and --hrtk-tier-popover-fg (#1f1f1f) are the popover background and text colors.
  • --hrtk-tier-bg (#f6f4ef), --hrtk-tier-fg (#1f1f1f) and --hrtk-tier-border (a light grey) color an untinted badge.

A tier with a Tint set in the Toolkit Hub gets its own --hrtk-tier-bg, --hrtk-tier-fg and --hrtk-tier-border on its badge, and the text color is chosen for contrast. An override of those three on :root does not reach a tinted tier, so change the tint in the Hub instead.

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
  • Quick filter chips: .hrtk-sbp-quick-chips (row) with __track (scrollable strip), .hrtk-sbp-quick-chip (one chip) with __icon, __label, __x (the deselect cue on the active chip)
  • Note: the bar’s open/close animation is driven by inline styles the module writes itself; those aren’t overridable from CSS. The same is true of the expanded submit button’s width when Live Result Count is turned on: it’s measured and set as an inline style, not a themeable variable. The static width CSS controls is only used when that setting is off.

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

Destination Search #

The grouped Homes / Islands / Cities / Resorts search box: mounted in the Destination Filter popup header above the tabs, and also available on its own via the [homerunner_destination_search] shortcode. Protected styling (see above), so a plain rule against these classes needs !important; see the variables above for the fastest path.

  • Container: .hrtk-dsearch (also .hrtk-dsearch-standalone on shortcode placements, .hrtk-dsearch-mount inside the popup)
  • Field: .hrtk-dsearch-field, .hrtk-dsearch-input, .hrtk-dsearch-icon, .hrtk-dsearch-clear
  • Results: .hrtk-dsearch-panel, .hrtk-dsearch-heading (with -label, -line), .hrtk-dsearch-option (with -icon, -label, -count), .hrtk-dsearch-more, .hrtk-dsearch-empty
  • State: .hrtk-dsearch-active (the currently highlighted option), .hrtk-dsearch-live (the screen-reader announcement region)

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, .hrtk-fs-adjusted-notice
  • 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

Explorer Dynamic Min Stay #

The zero-results block that appears in the inventory Explorer when a search’s check-in date is confirmed to require more nights than the guest searched for. Visual language mirrors Flexible Search’s empty state above, so the two read as one system on sites running both.

  • Container: .hrtk-edms-empty
  • Children: .hrtk-edms-empty-title, .hrtk-edms-empty-subtitle, .hrtk-edms-empty-chips, .hrtk-edms-empty-chip

Group Suggestion #

Banner suggesting sibling properties for groups that exceed a property’s capacity. The same markup and classes also power the Group Booking shortcode’s inline card; a .hrtk-group-banner--fixed or .hrtk-group-banner--inline modifier on the container tells the two apart if you need to style them differently.

  • 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

Calendar Hover Tips #

One-tap “Select dates” button the module grafts onto core’s own calendar tip bubble (#homelocal-calendar-tip), on both the property availability calendar and the Explorer range calendar.

  • Modifier: .hrtk-actionable on the tip bubble when a button is present
  • Children: .hrtk-tip-msg, .hrtk-tip-apply

Two-Step Checkout #

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

Travel Protection #

The insurance section Travel Protection inserts after Guest Details on checkout, and its summary line. Protected styling with a variable API (see above), so set the --hrtk-tp-* variables for color changes and reach for !important only for layout tweaks.

  • Container: .hrtk-tp (with .hrtk-tp-native on the original component markup it replaces, hidden when the module is active)
  • Cards: .hrtk-tp-fieldset, .hrtk-tp-heading, .hrtk-tp-introduction, .hrtk-tp-cards (grid), .hrtk-tp-card (one plan, with .is-selected)
  • Card content: .hrtk-tp-input, .hrtk-tp-title, .hrtk-tp-provider, .hrtk-tp-description, .hrtk-tp-policy (the policy link), .hrtk-tp-price
  • Status: .hrtk-tp-notice (shown while the quote refreshes), .hrtk-tp-summary (compact selected-plan line shown outside the card layout)

Add-On Showcase #

The optional-extras cards Add-On Showcase places in the checkout’s main content. Protected styling with a variable API (see above), so set the --hrtk-aos-* variables for color changes and reach for !important only for layout tweaks.

  • Container: .hrtk-aos (with .hrtk-aos-native on the original add-on markup it replaces, hidden when the module is active)
  • Heading: .hrtk-aos-fieldset, .hrtk-aos-heading, .hrtk-aos-introduction, .hrtk-aos-group, .hrtk-aos-group-title
  • Cards: .hrtk-aos-cards (grid), .hrtk-aos-card (one add-on, with .has-image, .is-toggle and .is-selected), .hrtk-aos-thumb, .hrtk-aos-body, .hrtk-aos-title, .hrtk-aos-badge, .hrtk-aos-desc
  • Price and controls: .hrtk-aos-side, .hrtk-aos-price, .hrtk-aos-btn (the Add button), .hrtk-aos-stepper, .hrtk-aos-step, .hrtk-aos-qty, .hrtk-aos-more
  • Status: .hrtk-aos-notice, .hrtk-aos-recovery, .hrtk-aos-sidebar, .hrtk-aos-summary (the selected add-ons shown in the checkout sidebar), .hrtk-aos-teaser (the line on the property page)

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

Streamlined Checkout Consent #

The single “by booking you agree” notice above the Book button, and the popup it opens for the Rental Agreement or Cancellation Policy. Protected styling, so rules against these classes need !important. It has no documented variable API.

  • Notice: .hrtk-implicit-consent-notice (the sentence itself), .hrtk-ic-link (a linked policy name inside it)
  • Popup: .hrtk-ic-overlay (the backdrop), .hrtk-ic-dialog (the box), .hrtk-ic-dialog-title, .hrtk-ic-dialog-body, .hrtk-ic-close (the close button)
  • State: .hrtk-ic-hidden (hides the checkbox UI this module replaces)

Inline Price Breakdown #

The itemized price breakdown printed in the booking component. Protected styling (see the recent-change note above), so rules against these classes need !important.

  • Containers: .hrtk-ipb (component wrapper), .hrtk-ipb-heading (optional heading above the lines)
  • Rows: .hrtk-ipb-row (one line item), .hrtk-ipb-label (the fee name), .hrtk-ipb-amount (the dollar amount)
  • Expandable display: .hrtk-ipb-toggle (the “Price details” toggle button), .hrtk-ipb-chevron (its arrow icon, flips when the component is in its open state), .hrtk-ipb--accordion (the display-mode modifier that adds top padding to the body)
  • Fee explanations: .hrtk-ipb-exp-toggle (the small info button next to a fee row), .hrtk-ipb-exp-icon (the circular “i” icon inside it), .hrtk-ipb-explanation (the revealed note text)

Original Total #

The struck-through total shown beside the discounted total when a promotion, coupon, or stay discount applies. It appears on the booking component’s total line and on explorer cards that show full pricing for the searched dates. The figure borrows the typography of the total it sits next to, so its styling is protected; rules against this class need !important. This module has no dedicated theming variables.

Class: .hrtk-ot-was (the struck-through pre-discount total; by default slightly faded and kept on one line)

Rate Plan Control #

The optional info icon and tooltip next to a rate plan name, shown when you’ve attached an explainer to it (Toolkit Hub → Rate Plan Control → Rate plan overrides). It rides on the booking component’s own rate plan markup rather than owning a container of its own, so its styling is protected; rules against these classes need !important. The tooltip’s arrow position is managed automatically and isn’t meant to be set by hand.

  • Icon: .hrtk-rpc-info (the small “i” button next to the rate plan name)
  • Tooltip: .hrtk-rpc-tip (the popover holding your explainer text)

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.

Card tags (Label Designer) #

The tag row lives in the explorer card’s type slot, .hfse-property-types inside .hfse-property-meta-primary; with the own-row setting on, the location (.hfse-property-locations) takes the full width and the tag row sits under it. Each pill is .hrtk-card-tag, on cards and inside map popups (.hfse-property-infowindow-body .hrtk-card-tags). Pill colors, radius and size come from the Card tags section, written into the generated label stylesheet; a theme rule on .hrtk-card-tag with higher specificity overrides them.

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 (with --t1 through --t5 tier modifiers on the bundled marker style)
  • Badge colors come from the Map Stacking settings, delivered as variables: --hrtk-badge-bg, --hrtk-badge-text, --hrtk-count-bg, --hrtk-count-text, --hrtk-center-dot, --hrtk-connector, --hrtk-focus
  • If your site uses the bundled cluster marker style, its five tier colors are also variables: --hrtk-cluster-1 (#058ef9), --hrtk-cluster-2 (#0b7fd4), --hrtk-cluster-3 (#7a5cd6), --hrtk-cluster-4 (#d1568a), --hrtk-cluster-5 (#e2603f), each also settable as a single hex from the Map Stacking settings screen. --hrtk-cluster-mask is generated by the plugin for the marker’s shape and is not meant to be set by hand.

Map All Pins #

The lightweight “every matching home” pins on the results map, the card their popup shows, and the on-map home finder. Protected since Toolkit 3.156, so rules against these classes need !important (see the note near the top of this page if your existing CSS stopped applying). Badge colors come from the --hrtk-badge-* variables shared with Map Stacking.

  • Pins: .hrtk-allpins-marker (the marker wrapper), .hrtk-allpins-dot (the dot itself), .hrtk-allpins-found (the highlight ring on a pin the finder or a shared home link just landed on)
  • Finder: .hrtk-map-finder (with -input, -results, -result, -empty), plus the .hrtk-map-finder--wrap modifier applied when the finder wraps below the map’s other controls on narrow maps

Map Controls #

The Airbnb-style zoom stack, search-as-you-move pill, and hide/show map toggle. Protected, so rules against these classes need !important.

  • Container: .hrtk-mapctl (with -on when the controls are active, -inview on the visible state, -collapse on the hide/show toggle, -keep-fs when the fullscreen button is kept)
  • Controls: .hrtk-mapctl-zoom (the floating zoom stack), .hrtk-mapctl-search (the search-as-you-move pill, with -searcharea and -searcharea-show on its “search this area” state), .hrtk-mapctl-showtab (the floating “Show map” pill while hidden), .hrtk-mapctl-btn, .hrtk-mapctl-tip

Mobile Explorer #

The mobile bottom bar, search pill, and floating action button on Explorer pages. This module was called Explorer Mobile Sheet until Toolkit 3.157; the class names are unchanged.

  • 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.

Property Page Section Nav #

The sticky in-page jump menu on single property pages. Protected structural styling with a variable API for theming (see above), same pattern as Searchbar Pro and the destination components: set the --hrtk-psn-* variables and they win with no !important needed.

  • Container: .hrtk-psn (with --bar and --pill presentation modifiers, .is-visible once the guest has scrolled into the listing, --desktop when mobile is turned off in settings)
  • Children: .hrtk-psn__inner (the scrollable strip), .hrtk-psn__link (one section link, with .is-active on the currently-read section)

Photo Gallery #

The five-photo hero grid, full-screen lightbox, and mobile swipe carousel on property pages, placed with the [hrtk_photo_gallery] shortcode. It ships with a documented variable API (see above), and its own selectors are otherwise scoped under one container so they rarely collide with theme styles.

  • Container: #pg-wrap
  • Hero grid: .pg-gallery, .pg-gallery-main (the large lead photo), .pg-gallery-cell (a secondary photo tile), .pg-gallery-btn (the “show all photos” pill)
  • Mobile: .pg-mobile-counter (photo count pill), .pg-mobile-showall (the mobile “see all” button)
  • Lightbox: .pg-lightbox (with .active and .single-view states), .pg-lightbox-header, .pg-lightbox-title, .pg-lightbox-close, .pg-lightbox-grid (with .pg-lb-row, .pg-lb-row-single, .pg-lb-row-double), .pg-lightbox-single (with -img), .pg-lightbox-nav (with .pg-lightbox-prev, .pg-lightbox-next), .pg-lightbox-counter
  • Zoom: .pg-lightbox-zoom (the magnifier button in the header, shown only in the single-photo view) and the .pg-zoomed state on .pg-lightbox while a photo is zoomed in. The zoom button’s own rules use !important, so restyle it with !important too.

Bedroom Showcase #

The per-bedroom cards (photo, bed types, blurb) placed with the [hrtk_bedrooms] shortcode, and their photo lightbox. Protected, so rules against these classes need !important; it has no documented variable API, since the CSS custom properties it writes (--hrtk-bedrooms-ar, --hrtk-bedrooms-columns, --hrtk-bedrooms-lightbox-height, --hrtk-bedrooms-pull, --hrtk-bedrooms-ratio) are internal state the script manages itself, not meant to be set by hand.

  • Container: .hrtk-bedrooms
  • Grid and cards: .hrtk-bedrooms__grid, .hrtk-bedrooms__item, .hrtk-bedrooms__card, .hrtk-bedrooms__media, .hrtk-bedrooms__img
  • Card content: .hrtk-bedrooms__body, .hrtk-bedrooms__title, .hrtk-bedrooms__beds (with .hrtk-bedrooms__bed and .hrtk-bedrooms__bed-icon), .hrtk-bedrooms__details
  • Lightbox: .hrtk-bedrooms__lightbox (with [open] state), .hrtk-bedrooms__figure, .hrtk-bedrooms__lightbox-img, .hrtk-bedrooms__caption

Review Showcase #

The [homerunner-reviews] block that places guest reviews on any page. Deliberately theme-neutral: your theme’s fonts and text color carry through, and the variables above cover the rest. Ordinary CSS applies.

  • Wrapper: .hrtk-rv, with modifiers for the layout (.hrtk-rv--grid, .hrtk-rv--slider, .hrtk-rv--list), the card style (.hrtk-rv--card-bordered, .hrtk-rv--card-shadow, .hrtk-rv--card-plain), the alignment (.hrtk-rv--align-left, .hrtk-rv--align-center), the image position (.hrtk-rv--img-top, .hrtk-rv--img-left, .hrtk-rv--img-right), and .hrtk-rv--clamp when long reviews are shortened. Anything you add in the shortcode’s class option lands on this wrapper too.
  • Section: .hrtk-rv__heading, .hrtk-rv__see-all
  • Slider: .hrtk-rv__viewport, .hrtk-rv__track, .hrtk-rv__controls, .hrtk-rv__arrow, .hrtk-rv__dots, .hrtk-rv__dot
  • Card: .hrtk-rv-card (with --linked when the whole card is a link), .hrtk-rv-card__inner, .hrtk-rv-card__content, .hrtk-rv-card__meta, .hrtk-rv-card__stars (with .hrtk-rv-star and the filled state .hrtk-rv-star--full), .hrtk-rv-card__author, .hrtk-rv-card__date, .hrtk-rv-card__channel, .hrtk-rv-card__title, .hrtk-rv-card__body, .hrtk-rv-card__more (the Read more toggle), .hrtk-rv-card__reply (with .hrtk-rv-card__reply-label), .hrtk-rv-card__property
  • Property image: .hrtk-rv-card__media, .hrtk-rv-card__cover, .hrtk-rv-card__image

Keyword Search #

The Find a feature control, its suggestions, and the messages that go with it. Ordinary CSS applies. The Searchbar Pro rules it shares a row with are protected, so keep your overrides for that row on the Searchbar Pro hooks.

  • Control: .hrtk-kw-find (with .hrtk-kw-find--chips when it sits in the quick filter chip row), .hrtk-kw-field, .hrtk-kw-input, .hrtk-kw-pill, .hrtk-kw-pill-label, .hrtk-kw-clear, .hrtk-kw-spinner
  • Suggestions: .hrtk-kw-suggest, .hrtk-kw-suggest-label, .hrtk-kw-row, .hrtk-kw-term, .hrtk-kw-term-n (the match count on a suggestion), .hrtk-kw-key (the Enter hint)
  • Results: .hrtk-kw-count-of (the suffix added to the result count)
  • Cards: .hrtk-kw-badge (with .hrtk-kw-badge-text and .hrtk-kw-badge-tick), .hrtk-kw-quote
  • Messages: .hrtk-kw-notice (with -title, -text, -copy, -failed, -inline), .hrtk-kw-retry, .hrtk-kw-zero (the no-results block, with -title, -lede, -terms, -term, -clear)

Local Guide #

The guide page from [hrtk_local_guide] and the Nearby stack from [hrtk_local_guide_nearby]. Protected: class rules need !important. Prefer the variables above.

  • Root: .hrtk-local-guide, with .hrtk-local-guide--guide or .hrtk-local-guide--nearby, and .hrtk-local-guide--no-homes when homes are hidden from the map
  • Controls: .hrtk-local-guide__controls, .hrtk-local-guide__chips, .hrtk-local-guide__toggles, .hrtk-local-guide__count, .hrtk-local-guide__status
  • Layout: .hrtk-local-guide__layout, .hrtk-local-guide__list, .hrtk-local-guide__map-wrap, .hrtk-local-guide__map
  • Groups: .hrtk-local-guide__group, .hrtk-lg-group__heading, .hrtk-lg-group__count, .hrtk-local-guide__items
  • Cards: .hrtk-local-guide__item (with --partner for a perk place), .hrtk-local-guide__item-wrap, .hrtk-lg-card__media, .hrtk-lg-card__img, .hrtk-lg-card__placeholder, .hrtk-lg-card__body, .hrtk-lg-card__eyebrow, .hrtk-lg-card__title, .hrtk-lg-card__desc, .hrtk-lg-card__address, .hrtk-lg-card__hours, .hrtk-lg-card__perk, .hrtk-local-guide__open
  • Nearby stack: .hrtk-local-guide__nearby-heading, .hrtk-local-guide__nearby-subheading, .hrtk-local-guide__rows, .hrtk-local-guide__row (with --partner), .hrtk-lg-row__media, .hrtk-lg-row__img, .hrtk-lg-row__body, .hrtk-lg-row__title, .hrtk-lg-row__meta, .hrtk-lg-row__eyebrow, .hrtk-lg-row__perk
  • Card window: .hrtk-local-guide__window-overlay, .hrtk-local-guide__window, .hrtk-local-guide__window-close, .hrtk-lg-window__hero, .hrtk-lg-window__img, .hrtk-lg-window__body, .hrtk-lg-window__eyebrow, .hrtk-lg-window__title, .hrtk-lg-window__meta, .hrtk-lg-window__desc, .hrtk-lg-window__perk (with -eyebrow, -title, -text), .hrtk-lg-window__photos, .hrtk-lg-window__photo, .hrtk-lg-window__footer, .hrtk-lg-window__website
  • Actions: .hrtk-lg-actions, .hrtk-lg-actions__primary, .hrtk-lg-actions__link, .hrtk-lg-form__submit

Tier Rating #

The tier badge on results cards (under the home name or top-left over the photo) and from [hrtk_tier_rating] on the property page, and its info popover. Protected: class rules need !important. Prefer the variables above.

  • Containers: .hrtk-tier (the badge wrapper, with .hrtk-tier--card or .hrtk-tier--page, a .hrtk-tier--<tier-slug> class for each tier, .hrtk-tier--media when the badge sits over the photo, and .hrtk-tier--show-<style> for the badge style, such as .hrtk-tier--show-image), .hrtk-tier-rating--page (the property page wrapper)
  • Badge: .hrtk-tier__badge, .hrtk-tier__label (with .hrtk-tier__label--sr when the label is hidden from view and kept for screen readers), .hrtk-tier__stars, .hrtk-tier__star, .hrtk-tier__image, .hrtk-tier__info (the small “i”)
  • Popover: .hrtk-tier-popover (with __eyebrow, __title, __desc, __intro, __link)

Card Rating #

The rating line on results cards (under the home name or on the location line) and in the map popup. Protected: class rules need !important. Prefer the variables above.

  • Line: .hrtk-card-rating (with .hrtk-card-rating--title or .hrtk-card-rating--location on cards, matching the position setting, and .hrtk-card-rating--popup in the map popup)
  • Parts: .hrtk-card-rating__star, .hrtk-card-rating__avg, .hrtk-card-rating__count
  • Page marker: .hrtk-card-rating-on on the page root hides the explorer’s own small title-row star once Card Rating has the ratings, so the two never show together. Leave that rule in place.

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

Reviews Page #

The “[Your Brand] Reviews” landing page at your reviews archive address. Deliberately theme-neutral: your theme’s own fonts and spacing carry through, and color runs through the Reviews Page variables above rather than your theme’s colors. Ordinary CSS applies here, no !important needed.

  • Page container: .hrtk-reviews-page-main (with an .hrtk-reviews-page--embed variant), .hrtk-reviews-page__header, .hrtk-reviews-page__title, .hrtk-reviews-page__intro, .hrtk-reviews-page__empty
  • Rating summary: .hrtk-reviews-page__summary, .hrtk-reviews-page__average, .hrtk-reviews-page__stars (with .hrtk-star and the filled state .hrtk-star--full), .hrtk-reviews-page__count
  • Rating histogram: .hrtk-reviews-page__histogram, .hrtk-reviews-page__histogram-row, .hrtk-reviews-page__histogram-label, .hrtk-reviews-page__histogram-bar (with .hrtk-reviews-page__histogram-fill), .hrtk-reviews-page__histogram-count
  • Channel tags: .hrtk-reviews-page__channels, .hrtk-reviews-page__channel
  • Review list and cards: .hrtk-reviews-page__list, .hrtk-review-card, .hrtk-review-card__meta, .hrtk-review-card__author, .hrtk-review-card__date, .hrtk-review-card__channel, .hrtk-review-card__title, .hrtk-review-card__body, .hrtk-review-card__property, .hrtk-review-card__reply (with .hrtk-review-card__reply-label)
  • Pagination: .hrtk-reviews-page__pagination

AI-Ready guest entry point #

The Plan with AI trigger and dialog, the optional section on property and search pages, and the footer link, all from the AI Booking Channel module. Deliberately theme-neutral: it inherits your site’s fonts and colors and draws only its own structure. Ordinary CSS applies, no !important needed. The accent color comes from the module’s Accent color setting, so change it there rather than from CSS.

  • Section: .hrtk-aic-guest-wrap, .hrtk-aic-guest (with __eyebrow, __heading, __copy, __prompt, __prompt-wrap, __btn, __btn-sub, __links, __note, __trust, __status, __context)
  • Trigger: .hrtk-aic-trigger (with __inner, __icon, __label)
  • Dialog: .hrtk-aic-dialog (with __panel, __close, __handle)
  • Footer link: .hrtk-aic-guest-footer, .hrtk-aic-guest-footer__link
  • Variables, set on .hrtk-aic-guest (defaults in parentheses): --hrtk-aic-accent (#1d4ed8), --hrtk-aic-on-accent (#fff), --hrtk-aic-border (rgba(0, 0, 0, 0.12)), --hrtk-aic-surface (rgba(0, 0, 0, 0.03)), --hrtk-aic-radius (12px). When you fill in Accent color, the module writes --hrtk-aic-accent and --hrtk-aic-on-accent inline on the section, so those two follow the setting, not your CSS. --hrtk-aic-bottom-bar is measured and written by the module’s script; leave it alone.

Property Actions #

The Share, Save, and Plan with AI action row on property pages, and the share dialog (a centered card on desktop, a bottom sheet on phones). Ordinary CSS applies, no !important needed. It has no theming variables.

  • Row: .hrtk-pa (with the --icon variant), .hrtk-pa__item (with --button, --link, --icon), .hrtk-pa__icon, .hrtk-pa__label, .hrtk-pa__slot (the slot that lines up the Save and Plan with AI controls from other modules)
  • Share dialog: .hrtk-share-dialog (with __panel, __title, __close, __handle, __cover, __preview, __subject, __url, __copy, __copy-btn, __channels, __channel, __icon, __status)

Powered by HomeRunner #

The small Powered by HomeRunner line the Powered by HomeRunner module prints at the end of the footer. It takes the footer’s text color at reduced opacity; ordinary CSS applies, no !important needed. It has no theming variables.

  • .hrtk-credit (the centered wrapper), .hrtk-credit__a (the link), .hrtk-credit__icon (the inline HomeRunner symbol, sized to the text), .hrtk-credit__text (the words)

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, -color-card-price
  • Typography: -font-family, -font-family-title, -font-size-input, -font-size-label, -font-size-card-title, -font-size-card-subtitle, -font-size-card-price, -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
  • Load More button: -color-card-load-more-bg, -color-card-load-more-hover, -color-card-load-more-text, -radius-card-load-more. Unset, these fall back to the global primary color and button radius.
  • 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.