Styles

This section describes how to customize the visual appearance of the web booking interface through the Styles tab.

Color Palette

Property	Value	Description
--primary-color	#f27c21	Main brand color
--primary-dark	#e26f16	Darker primary variant
--primary-darkest	#e06010	Darkest primary variant
--secondary-color	#676767	Secondary color (neutral)
--secondary-dark	#333	Dark variant of secondary color
--third-color	#fff	Third color (White)
--fourth-color	#fbc69b	Fourth accent color
--fifth-color	#4ab747	Fifth accent color (green)
--sixth-color	#c7eafb	Light blue color
--seventh-color	#d2232b	Red accent color
--eight-color	#d9dada	Light gray color
--ninth-color	#6f6f6e	Dark gray color
--borders-color	#a7a9ac	Default border color
--borders-color-light	#bdbfbf	Light border color
--disabled-color	#C7C7C7	Disabled state color
--disabled-dark	#7f7979	Disabled dark variant

---

Typography

Property	Value	Description
--base-font-size	14px	Base font size
--font-size-1	0.857rem	Extra small font
--font-size-2	1rem	Standard size font
--font-size-3	1.143rem	Slightly larger font
--font-size-4	1.286rem	Medium heading font
--font-size-5	1.714rem	Heading font
--font-size-6	2.143rem	Larger heading font
--font-size-7	1.429rem	Subheading font
--font-size-8	0.929rem	Small paragraph font

---

Backgrounds

Property	Value	Description
--first-bg	/images/sand.jpg	First background image
--second-bg	#fbc69b	Secondary background color
--third-bg	#fff	Tertiary background color
--fourth-bg	#676767	Fourth background color
--fifth-bg	#d9dada	Fifth background color

---

Preloader and Icons

Property	Value	Description
--preloader-url	/images/preloader.gif	Preloader animation
--fly-piticon	/images/fly.png	Fly pit icon
--supportPerson-img	/images/PrimoKatrine.png	Support person image
--piticons	/images/piticons.png	Piticons (general icons)
--weather-icons	/images/wheather-icons.png	Weather-related icons

---

Notes:

• Properties marked with the checkbox "IS URL" in the source are file paths for images.

• Hex codes represent standard color values for UI consistency.

• rem units in font sizes allow for responsive text sizing relative to the root element.

• Image paths are relative to the project directory.