Rainbow Watersports · 10

Design Constraints

Third-party platform limitations that shape what mockups can actually specify — checked before the design work leans on something that isn't real.

FAREHARBOR

Booking Button Customization

FareHarbor ships a predefined styling system for its booking button. There is no arbitrary CSS override path — customization is limited to selecting and combining the options below.

Style variants (pick one)

fh-buttonOriginal — beveled, stands out

fh-button-2dBold, "pops up" on hover

fh-button-flatFlat design, no bevel

fh-button-true-flatStripped of all extra styling — most plain

fh-button-outlineClear/transparent with colored outline only

Modifiers (stack freely)

Color

Defined via query string on the stylesheet link (?red=ff0000), applied with a -colorname suffix. Default is FareHarbor blue. Not a free hex picker — a small named palette, referenced by name.

Size

fh-size--small / fh-size--large

Shape

fh-shape--round / fh-shape--square

Icons

fh-icon--cal, --check, --map, --gift, --arrow, --ticket, --check-bubble, --dollar, --clock — prepended to the label.

Visibility

fh-hide--mobile / fh-hide--desktop — using either makes the button position fixed on scroll, a behavior side-effect worth knowing.

HARD BOUNDARY

What's Not Possible

The availability calendar embed's stylesheet is not customizable — it renders in FareHarbor's default look regardless of site design.

The Lightframe modal itself — the actual booking flow after a button is clicked — is entirely FareHarbor's own UI. No styling control from the site side, ever.

Any mockup direction assuming a fully custom button or a themed calendar is designing against something FareHarbor doesn't support — flag before that direction is finalized.