@qite/tide-components 1.0.13-preview.0 → 1.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/build/build-cjs/index.js +1664 -2414
  2. package/build/build-cjs/src/booking-wizard/features/booking/selectors.d.ts +1 -1
  3. package/build/build-cjs/src/booking-wizard/features/travelers-form/validate-form.d.ts +2 -2
  4. package/build/build-cjs/src/booking-wizard/types.d.ts +3 -23
  5. package/build/build-cjs/src/search-results/components/flight/flight-selection/independent-flight-option.d.ts +0 -2
  6. package/build/build-cjs/src/search-results/components/itinerary/index.d.ts +0 -1
  7. package/build/build-cjs/src/search-results/components/itinerary/itinerary-utils.d.ts +0 -1
  8. package/build/build-cjs/src/search-results/types.d.ts +0 -8
  9. package/build/build-cjs/src/search-results/utils/traject-utils.d.ts +0 -7
  10. package/build/build-cjs/src/shared/booking/travelers-form.d.ts +8 -13
  11. package/build/build-esm/index.js +1666 -2416
  12. package/build/build-esm/src/booking-wizard/features/booking/selectors.d.ts +1 -1
  13. package/build/build-esm/src/booking-wizard/features/travelers-form/validate-form.d.ts +2 -2
  14. package/build/build-esm/src/booking-wizard/types.d.ts +3 -23
  15. package/build/build-esm/src/search-results/components/flight/flight-selection/independent-flight-option.d.ts +0 -2
  16. package/build/build-esm/src/search-results/components/itinerary/index.d.ts +0 -1
  17. package/build/build-esm/src/search-results/components/itinerary/itinerary-utils.d.ts +0 -1
  18. package/build/build-esm/src/search-results/types.d.ts +0 -8
  19. package/build/build-esm/src/search-results/utils/traject-utils.d.ts +0 -7
  20. package/build/build-esm/src/shared/booking/travelers-form.d.ts +8 -13
  21. package/package.json +2 -2
  22. package/styles/abstracts/_mixins.scss +74 -74
  23. package/styles/abstracts/_variables.scss +57 -57
  24. package/styles/base/_fonts.scss +2 -2
  25. package/styles/base/_normalize.scss +227 -227
  26. package/styles/base/_typography.scss +35 -35
  27. package/styles/booking-joker-variables.scss +596 -596
  28. package/styles/booking-product-variables.scss +330 -330
  29. package/styles/booking-product.scss +438 -438
  30. package/styles/booking-qsm-variables.scss +501 -501
  31. package/styles/booking-qsm.scss +52 -52
  32. package/styles/booking-search-results-variables.scss +734 -734
  33. package/styles/booking-search-results.scss +53 -53
  34. package/styles/booking-wizard-variables.scss +603 -603
  35. package/styles/booking-wizard.scss +61 -61
  36. package/styles/components/_accordion.scss +67 -67
  37. package/styles/components/_animations.scss +39 -39
  38. package/styles/components/_base.scss +107 -107
  39. package/styles/components/_booking.scss +906 -906
  40. package/styles/components/_breadcrumb.scss +92 -92
  41. package/styles/components/_button.scss +238 -238
  42. package/styles/components/_checkbox.scss +230 -230
  43. package/styles/components/_contact.scss +255 -255
  44. package/styles/components/_content.scss +336 -336
  45. package/styles/components/_cta.scss +238 -238
  46. package/styles/components/_date-list.scss +41 -41
  47. package/styles/components/_date-range-picker.scss +223 -223
  48. package/styles/components/_decrement-increment.scss +35 -35
  49. package/styles/components/_dropdown.scss +77 -77
  50. package/styles/components/_error.scss +50 -50
  51. package/styles/components/_faq.scss +30 -30
  52. package/styles/components/_flight-option.scss +1444 -1432
  53. package/styles/components/_flyin.scss +830 -830
  54. package/styles/components/_footer.scss +135 -135
  55. package/styles/components/_form.scss +1704 -1704
  56. package/styles/components/_gallery.scss +317 -317
  57. package/styles/components/_header.scss +113 -113
  58. package/styles/components/_image-with-text.scss +206 -206
  59. package/styles/components/_img-slider.scss +175 -175
  60. package/styles/components/_info-message.scss +75 -75
  61. package/styles/components/_input.scss +35 -35
  62. package/styles/components/_list.scss +185 -185
  63. package/styles/components/_loader.scss +152 -152
  64. package/styles/components/_login.scss +140 -140
  65. package/styles/components/_map-view.scss +1100 -1100
  66. package/styles/components/_mixins.scss +579 -579
  67. package/styles/components/_navbar.scss +765 -765
  68. package/styles/components/_passenger-picker.scss +306 -306
  69. package/styles/components/_phone-input.scss +8 -8
  70. package/styles/components/_placeholders.scss +165 -165
  71. package/styles/components/_pricing-summary.scss +163 -163
  72. package/styles/components/_qsm.scss +17 -17
  73. package/styles/components/_radiobutton.scss +170 -170
  74. package/styles/components/_search.scss +2197 -2197
  75. package/styles/components/_select-wrapper.scss +81 -81
  76. package/styles/components/_slider.scss +120 -120
  77. package/styles/components/_spinner.scss +29 -29
  78. package/styles/components/_step-indicators.scss +187 -187
  79. package/styles/components/_table.scss +81 -81
  80. package/styles/components/_tide-form.scss +578 -578
  81. package/styles/components/_tree.scss +648 -648
  82. package/styles/components/_typeahead.scss +275 -275
  83. package/styles/components/_variables.scss +89 -89
  84. package/styles/content-blocks-variables.scss +543 -543
  85. package/styles/content-blocks.scss +66 -66
  86. package/styles/font.scss +2 -2
  87. package/styles/qsm/_calendar.scss +274 -274
  88. package/styles/qsm/_qsm.scss +1097 -1097
  89. package/styles/search.scss +1200 -1200
  90. package/styles/tide-form-variables.scss +275 -275
  91. package/styles/tide-form.scss +56 -56
  92. package/build/build-cjs/src/search-results/utils/booked-entry-utils.d.ts +0 -20
  93. package/build/build-esm/src/search-results/utils/booked-entry-utils.d.ts +0 -20
@@ -1,543 +1,543 @@
1
- :root {
2
- // COLOR ASSIGNMENTS
3
- --tide-booking-color-primary: #333399;
4
- --tide-booking-color-primary-gradient: linear-gradient(204.08deg, #333399 1.64%, #282878 84.55%);
5
- --tide-booking-color-primary-fade: #ebebf8;
6
- --tide-booking-color-primary-extra-fade: #f8f8fd;
7
- --tide-booking-color-primary-light: #cdcdee;
8
- --tide-booking-color-primary-light-text: #3333997d;
9
- --tide-booking-color-primary-dark: #282878;
10
- --tide-booking-color-secondary: #1f9470;
11
- --tide-booking-color-secondary-light: #11b684;
12
-
13
- --tide-booking-color-star: #ecb911;
14
- --tide-booking-color-star-light: #ecd790;
15
- // --tide-booking-invalid: #e74c3c;
16
- --tide-booking-invalid: #871d11;
17
- --tide-booking-invalid-light: #fce8e6;
18
- --tide-booking-invalid-dark: #871d11;
19
- --tide-booking-price-increase: #e81212;
20
- --tide-booking-price-decrease: #19a364;
21
-
22
- --tide-booking-white: #ffffff;
23
- --tide-booking-gray-light: #f5f5f5;
24
- --tide-booking-gray-xlight: #fbfbfb;
25
- --tide-booking-gray--medium-light: #efefef;
26
- --tide-booking-gray-background-light: #e2e2e2;
27
- --tide-booking-gray-border-light: #f3f3f3;
28
- --tide-booking-gray-checkbox-bg: #bdbdbd;
29
- --tide-booking-gray-medium: #cbcbcb;
30
- --tide-booking-gray-dark: #666666;
31
- --tide-booking-black: #0a0a0a;
32
- --tide-booking-transparent: transparent;
33
-
34
- --tide-booking-text-dark: #464646;
35
- --tide-booking-text-medium: #828282;
36
- --tide-booking-text-light: #c0c0c0;
37
-
38
- // BACKGROUNDS
39
- --tide-booking-bg: #fafafa;
40
-
41
- // TYPOGRAPHY
42
- --tide-booking-font-heading: 'Outfit', serif;
43
- --tide-booking-font-body: 'Outfit', serif;
44
- --tide-booking-font-handwritten: 'Outfit', serif;
45
-
46
- --tide-booking-font-size-body: 14px;
47
- --tide-booking-font-size-body-lg: 16px;
48
- --tide-booking-line-height-body: 1;
49
-
50
- // GRID
51
- --tide-booking-container-wide: 1690px;
52
- --tide-booking-container-medium: 1200px;
53
- --tide-booking-container-small: 900px;
54
- --tide-booking-container-article: 650px;
55
- --tide-booking-gutter: 15px;
56
-
57
- // MEDIA QUERIES
58
- --tide-booking-screen-xxs: 490px;
59
- --tide-booking-screen-xs: 576px;
60
- --tide-booking-screen-sm: 768px;
61
- --tide-booking-screen-md: 992px;
62
- --tide-booking-screen-lg: 1200px;
63
- --tide-booking-screen-xgl: 1440px;
64
- --tide-booking-screen-xl: 1650px;
65
- --tide-booking-screen-xxl: 1920px;
66
-
67
- //HEADINGS
68
- --tide-booking-heading-color: var(--tide-booking-black);
69
-
70
- //h1
71
- --tide-booking-h1: 32px;
72
- --tide-booking-h1-sm: 40px;
73
- --tide-booking-h1-xl: 40px;
74
-
75
- //h2
76
- --tide-booking-h2: 24px;
77
- --tide-booking-h2-sm: 32px;
78
- --tide-booking-h2-xl: 32px;
79
-
80
- //h3
81
- --tide-booking-h3: 18px;
82
- --tide-booking-h3-sm: 24px;
83
- --tide-booking-h3-xl: 24px;
84
-
85
- //h4
86
- --tide-booking-h4: 16px;
87
- --tide-booking-h4-sm: 18px;
88
- --tide-booking-h4-xl: 18px;
89
-
90
- //h5
91
- --tide-booking-h5: 16px;
92
- --tide-booking-h5-xl: 18px;
93
-
94
- //h6
95
- --tide-booking-h6: 16px;
96
- --tide-booking-h6-md: 18px;
97
-
98
- //a
99
- --tide-booking-a-color: var(--tide-booking-color-primary);
100
- --tide-booking-a-text-decoration: underline;
101
- --tide-booking-a-color-hover: var(--tide-booking-color-primary-dark);
102
- --tide-booking-a-text-decoration-hover: underline;
103
- --tide-booking-a-color-focus: var(--tide-booking-color-primary-dark);
104
- --tide-booking-a-text-decoration-focus: underline;
105
-
106
- //small fontsize
107
- --tide-booking-small-font-size--mobile: 13px;
108
- --tide-booking-small-font-size--desktop: 15px;
109
-
110
- //INPUT
111
- --tide-booking-input-background: var(--tide-booking-white);
112
- --tide-booking-input-border: 1.5px solid var(--tide-booking-gray--medium-light);
113
- --tide-booking-input-border-radius: 5px;
114
- --tide-booking-input-color: var(--tide-booking-black);
115
- --tide-booking-input-height: 45px;
116
- --tide-booking-input-icon-color: var(--tide-booking-gray-dark);
117
-
118
- //INPUT--lg
119
- --tide-booking-input-height-lg: 45px;
120
-
121
- //INPUT--hover
122
- --tide-booking-input-border-hover: 1.5px solid var(--tide-booking-color-primary-light);
123
-
124
- //INPUT--FOCUS/ACTIVE
125
- --tide-booking-input-border-focus: 1.5px solid var(--tide-booking-color-primary);
126
- --tide-booking-input-icon-color-focus: var(--tide-booking-color-primary);
127
-
128
- //INPUT--PLACEHOLDER
129
- --tide-booking-input-placeholder-color: var(--tide-booking-gray-dark);
130
- --tide-booking-input-placeholder-font-style: normal;
131
-
132
- //INPUT--LABEL
133
- --tide-booking-input-label-color: var(--tide-booking-gray-dark);
134
- --tide-booking-input-label-font-size: 14px;
135
- --tide-booking-input-label-font-weight: 400;
136
- --tide-booking-input-label-font-style: normal;
137
-
138
- //RADIOBUTTON
139
- --tide-booking-radiobutton-border: 1.5px solid var(--tide-booking-gray--medium-light);
140
- --tide-booking-radiobutton-background: var(--tide-booking-white);
141
- --tide-booking-radiobutton-color-text: var(--tide-booking-gray-dark);
142
- --tide-booking-radiobutton-font-family: var(--tide-booking-font-body);
143
- --tide-booking-radiobutton-font-size: 16px;
144
- --tide-booking-radiobutton-font-weight: 400;
145
-
146
- //RADIOBUTTON--INPUT--CHECKED
147
- --tide-booking-radiobutton-input-checked-color-text: var(--tide-booking-color-primary);
148
- --tide-booking-radiobutton-input-checked-background: var(--tide-booking-white);
149
- --tide-booking-radiobutton-input-checked-border: 1.5px solid var(--tide-booking-color-primary);
150
-
151
- //CHECKBOX--INPUT--CHECKED--AFTER
152
- --tide-booking-radiobutton-input-checked-after-color: var(--tide-booking-color-primary);
153
-
154
- //CHECKBOX
155
- --tide-booking-checkbox-border: 1.5px solid var(--tide-booking-gray--medium-light);
156
- --tide-booking-checkbox-border-radius: 0px;
157
- --tide-booking-checkbox-background: var(--tide-booking-white);
158
- --tide-booking-checkbox-color-text: var(--tide-booking-gray-dark);
159
- --tide-booking-checkbox-font-family: var(--tide-booking-font-body);
160
- --tide-booking-checkbox-font-size: 16px;
161
- --tide-booking-checkbox-font-weight: 400;
162
-
163
- //CHECKBOX--INPUT--CHECKED
164
- --tide-booking-checkbox-input-checked-check-color: var(--tide-booking-white);
165
- --tide-booking-checkbox-input-checked-color-text: var(--tide-booking-color-primary);
166
- --tide-booking-checkbox-input-checked-background: var(--tide-booking-color-primary);
167
- --tide-booking-checkbox-input-checked-border: 1.5px solid var(--tide-booking-color-primary);
168
-
169
- //DROPDOWN
170
- --tide-booking-dropdown-background: var(--tide-booking-white);
171
- --tide-booking-dropdown-color: var(--tide-booking-gray-dark);
172
- --tide-booking-dropdown-border: 1.5px solid var(--tide-booking-gray-light);
173
- --tide-booking-dropdown-border-radius: 5px;
174
- --tide-booking-dropdown-font-family: var(--tide-booking-font-body);
175
-
176
- //DROPDOWN--HOVER
177
- --tide-booking-dropdown-border-hover: 1.5px solid var(--tide-booking-color-primary-light);
178
- --tide-booking-dropdown-color-hover: var(--tide-booking-color-primary);
179
- --tide-booking-dropdown-background-hover: var(--tide-booking-white);
180
-
181
- //DROPDOWN--focus
182
- --tide-booking-dropdown-border-focus: 1.5px solid var(--tide-booking-color-primary);
183
- --tide-booking-dropdown-color-focus: var(--tide-booking-color-primary);
184
- --tide-booking-dropdown-background-focus: var(--tide-booking-white);
185
-
186
- --tide-booking-dropdown-arrow-color: var(--tide-booking-black);
187
- --tide-booking-dropdown-arrow-color-hover: var(--tide-booking-color-primary);
188
-
189
- --tide-booking-dropdown-arrow-color-disabled: var(--tide-booking-gray-medium);
190
-
191
- //DROPDOWN--menu
192
- --tide-booking-dropdown-menu-background: var(--tide-booking-white);
193
- --tide-booking-dropdown-menu-border: 1.5px solid var(--tide-booking-gray-border-light);
194
- --tide-booking-dropdown-menu-border-radius: 5px;
195
- --tide-booking-dropdown-menu-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
196
-
197
- --tide-booking-dropdown-menu-option-color: var(--tide-booking-gray-dark);
198
- --tide-booking-dropdown-menu-option-background-hover: var(--tide-booking-gray-light);
199
- --tide-booking-dropdown-menu-option-color-hover: var(--tide-booking-color-primary);
200
- --tide-booking-dropdown-menu-option-background-selected: var(--tide-booking-color-primary);
201
- --tide-booking-dropdown-menu-option-color-selected: var(--tide-booking-white);
202
-
203
- //CTA
204
- --tide-booking-cta-height: 45px;
205
- --tide-booking-cta-height-xs: 45px;
206
- --tide-booking-cta-width: 100%;
207
- --tide-booking-cta-width-xs: auto;
208
- --tide-booking-cta-padding: 10px 20px;
209
- --tide-booking-cta-color: var(--tide-booking-white);
210
- --tide-booking-cta-background: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
211
- --tide-booking-cta-font-family: var(--tide-booking-font-body);
212
- --tide-booking-cta-font-size: 16px;
213
- --tide-booking-cta-font-size-xs: 18px;
214
- --tide-booking-cta-font-weight: 400;
215
- --tide-booking-cta-text-decoration: none;
216
- --tide-booking-cta-border: none;
217
- --tide-booking-cta-border-radius: 5px;
218
-
219
- //CTA__ICON
220
- --tide-booking-cta-icon-color: var(--tide-booking-white);
221
- --tide-booking-cta-icon-size: 16px;
222
-
223
- //CTA__HOVER
224
- --tide-booking-cta-background-hover: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
225
- --tide-booking-cta-color-hover: var(--tide-booking-white);
226
- --tide-booking-cta-icon-color-hover: var(--tide-booking-white);
227
- --tide-booking-cta-border-hover: none;
228
- --tide-booking-cta-text-decoration-hover: none;
229
-
230
- //CTA__FOCUS
231
- --tide-booking-cta-background-focus: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
232
- --tide-booking-cta-color-focus: var(--tide-booking-white);
233
- --tide-booking-cta-icon-color-focus: var(--tide-booking-white);
234
- --tide-booking-cta-border-focus: none;
235
- --tide-booking-cta-text-decoration-focus: none;
236
-
237
- //CTA--SECONDARY
238
- --tide-booking-cta-height-secondary: 25px;
239
- --tide-booking-cta-height-xs-secondary: 30px;
240
- --tide-booking-cta-width-secondary: auto;
241
- --tide-booking-cta-padding-secondary: 0px;
242
- --tide-booking-cta-margin-secondary: 0px 0 0 0;
243
- --tide-booking-cta-background-secondary: var(--tide-booking-transparent);
244
- --tide-booking-cta-color-secondary: var(--tide-booking-color-primary);
245
- --tide-booking-cta-border-secondary: none;
246
- --tide-booking-cta-border-radius-secondary: 5px;
247
- --tide-booking-cta-text-decoration-secondary: underline;
248
- --tide-booking-cta-font-family-secondary: var(--tide-booking-font-body);
249
- --tide-booking-cta-font-size-secondary: 16px;
250
- --tide-booking-cta-font-size-xs-secondary: 18px;
251
- --tide-booking-cta-font-weight-secondary: 400;
252
-
253
- //CTA--SECONDARY__ICON
254
- --tide-booking-cta-icon-color-secondary: var(--tide-booking-color-primary);
255
- --tide-booking-cta-icon-size-secondary: 16px;
256
-
257
- //CTA--SECONDARY__HOVER
258
- --tide-booking-cta-background-secondary-hover: var(--tide-booking-transparent);
259
- --tide-booking-cta-color-secondary-hover: var(--tide-booking-color-primary-dark);
260
- --tide-booking-cta-icon-color-secondary-hover: var(--tide-booking-color-primary-dark);
261
- --tide-booking-cta-border-secondary-hover: none;
262
- --tide-booking-cta-text-decoration-secondary-hover: underline;
263
-
264
- //CTA--SECONDARY__FOCUS
265
- --tide-booking-cta-background-secondary-focus: var(--tide-booking-transparent);
266
- --tide-booking-cta-color-secondary-focus: var(--tide-booking-color-primary-dark);
267
- --tide-booking-cta-icon-color-secondary-focus: var(--tide-booking-color-primary-dark);
268
- --tide-booking-cta-border-secondary-focus: none;
269
- --tide-booking-cta-text-decoration-secondary-focus: underline;
270
-
271
- //CTA--SELECT
272
- --tide-booking-cta-background-select: linear-gradient(8.14deg, #dce1ff 19.75%, #e5e8fb 65.25%);
273
- --tide-booking-cta-color-select: var(--tide-booking-color-primary);
274
- --tide-booking-cta-border-select: none;
275
- --tide-booking-cta-border-radius-select: 5px;
276
-
277
- //CTA--SELECT--HOVER/FOCUS/ACTIVE
278
- --tide-booking-cta-background-select-hover: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
279
- --tide-booking-cta-color-select-hover: var(--tide-booking-color-primary-dark);
280
- --tide-booking-cta-border-select-hover: none;
281
-
282
- //CTA--remove
283
- --tide-booking-cta-height-remove: auto;
284
- --tide-booking-cta-width-remove: auto;
285
- --tide-booking-cta-padding-remove: 0px;
286
- --tide-booking-cta-background-remove: var(--tide-booking-transparent);
287
- --tide-booking-cta-color-remove: var(--tide-booking-gray-medium);
288
- --tide-booking-cta-border-remove: none;
289
- --tide-booking-cta-border-radius-remove: 5px;
290
- --tide-booking-cta-text-decoration-remove: underline;
291
-
292
- //CTA--remove__ICON
293
- --tide-booking-cta-icon-color-remove: var(--tide-booking-invalid);
294
- --tide-booking-cta-icon-size-remove: 16px;
295
-
296
- //CTA--remove__HOVER, __focus
297
- --tide-booking-cta-background-remove-hover: var(--tide-booking-transparent);
298
- --tide-booking-cta-color-remove-hover: var(--tide-booking-gray-dark);
299
- --tide-booking-cta-icon-color-remove-hover: var(--tide-booking-gray-dark);
300
- --tide-booking-cta-border-remove-hover: none;
301
- --tide-booking-cta-text-decoration-remove-hover: underline;
302
-
303
- //NAVIGATION
304
- --tide-booking-nav-background: var(--tide-booking-white);
305
- --tide-booking-nav-border: none;
306
- --tide-booking-nav-border-radius: 0px;
307
- --tide-booking-nav-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
308
-
309
- --tide-booking-nav-container-background: var(--tide-booking-white);
310
- --tide-booking-nav-container-border: none;
311
- --tide-booking-nav-container-border-radius: 0px;
312
- --tide-booking-nav-container-box-shadow: none;
313
-
314
- //--LINK
315
- --tide-booking-nav-link-background: var(--tide-booking-transparent);
316
- --tide-booking-nav-link-color: var(--tide-booking-gray-dark);
317
- --tide-booking-nav-link-border-bottom: 3px solid var(--tide-booking-white);
318
- --tide-booking-nav-link-font-family: var(--tide-booking-font-body);
319
- --tide-booking-nav-link-font-weight: 500;
320
- --tide-booking-nav-link-text-decoration: none;
321
-
322
- --tide-booking-nav-link-hover-background: var(--tide-booking-transparent);
323
- --tide-booking-nav-link-hover-color: var(--tide-booking-color-primary-light-text);
324
- --tide-booking-nav-link-hover-border-bottom: 3px solid var(--tide-booking-color-primary-light-text);
325
- --tide-booking-nav-link-hover-text-decoration: none;
326
-
327
- --tide-booking-nav-link-active-background: var(--tide-booking-transparent);
328
- --tide-booking-nav-link-active-color: var(--tide-booking-color-primary);
329
- --tide-booking-nav-link-active-border-bottom: 3px solid var(--tide-booking-color-primary);
330
- --tide-booking-nav-link-active-text-decoration: none;
331
-
332
- //SUBNAVIGATION
333
- --tide-booking-subnav-background: var(--tide-booking-gray-light);
334
- --tide-booking-subnav-border: none;
335
- --tide-booking-subnav-border-radius: 0px;
336
- --tide-booking-subnav-box-shadow: none;
337
-
338
- //--LINK
339
- --tide-booking-subnav-link-background: var(--tide-booking-transparent);
340
- --tide-booking-subnav-link-color: var(--tide-booking-gray-dark);
341
- --tide-booking-subnav-link-border-bottom: none;
342
- --tide-booking-subnav-link-font-family: var(--tide-booking-font-body);
343
- --tide-booking-subnav-link-font-weight: 500;
344
- --tide-booking-subnav-link-text-decoration: none;
345
-
346
- --tide-booking-subnav-link-hover-background: var(--tide-booking-transparent);
347
- --tide-booking-subnav-link-hover-color: var(--tide-booking-color-primary-light-text);
348
- --tide-booking-subnav-link-hover-border-bottom: none;
349
- --tide-booking-subnav-link-hover-text-decoration: none;
350
-
351
- //NAVIGATION MOBILE
352
- --tide-booking-nav-mobile-menu-background: var(--tide-booking-white);
353
- --tide-booking-nav-mobile-menu-border: none;
354
- --tide-booking-nav-mobile-menu-border-radius: 0px;
355
- --tide-booking-nav-mobile-menu-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
356
-
357
- //HEADER
358
- --tide-booking-header-background: var(--tide-booking-white);
359
- --tide-booking-header-border: none;
360
- --tide-booking-header-border-radius: 0px 0px 24px 24px;
361
- --tide-booking-header-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
362
-
363
- --tide-booking-header-overlay-background: rgba(0, 0, 0, 0.1);
364
-
365
- --tide-booking-header-title-color: var(--tide-booking-white);
366
- --tide-booking-header-title-font-family: var(--tide-booking-font-heading);
367
- --tide-booking-header-title-font-weight: 700;
368
- --tide-booking-header-title-line-height: 1.2;
369
- --tide-booking-header-title-text-align: center;
370
-
371
- --tide-booking-header-description-color: var(--tide-booking-white);
372
- --tide-booking-header-description-font-family: var(--tide-booking-font-body);
373
- --tide-booking-header-description-font-weight: 400;
374
- --tide-booking-header-description-line-height: 1.5;
375
- --tide-booking-header-description-text-align: center;
376
-
377
- //FOOTER
378
- --tide-booking-footer-background: var(--tide-booking-gray--medium-light);
379
- --tide-booking-footer-border: none;
380
- --tide-booking-footer-border-radius: 0px;
381
- --tide-booking-footer-box-shadow: none;
382
-
383
- --tide-booking-footer-link-color: var(--tide-booking-gray-dark);
384
- --tide-booking-footer-link-font-family: var(--tide-booking-font-body);
385
- --tide-booking-footer-link-font-weight: 400;
386
- --tide-booking-footer-link-line-height: 1.5;
387
- --tide-booking-footer-link-text-decoration: none;
388
- --tide-booking-footer-link-color-hover: var(--tide-booking-color-primary);
389
- --tide-booking-footer-link-text-decoration-hover: underline;
390
-
391
- --tide-booking-footer-link-title-color: var(--tide-booking-black);
392
- --tide-booking-footer-link-title-font-family: var(--tide-booking-font-heading);
393
- --tide-booking-footer-link-title-font-weight: 700;
394
- --tide-booking-footer-link-title-line-height: 1.2;
395
-
396
- --tide-booking-footer-line-color: var(--tide-booking-gray-medium);
397
-
398
- --tide-booking-footer-copyright-color: var(--tide-booking-gray-dark);
399
- --tide-booking-footer-copyright-font-family: var(--tide-booking-font-body);
400
- --tide-booking-footer-copyright-font-weight: 400;
401
- --tide-booking-footer-copyright-line-height: 1.5;
402
-
403
- // CONTENT
404
- --tide-booking-content-background: var(--tide-booking-gray-xlight);
405
- --tide-booking-content-title-color: var(--tide-booking-black);
406
- --tide-booking-content-title-font-family: var(--tide-booking-font-title);
407
- --tide-booking-content-title-font-weight: 700;
408
- --tide-booking-content-title-line-height: 1.2;
409
- --tide-booking-content-title-text-align: center;
410
-
411
- //IMAGE WITH TEXT
412
- --tide-booking-image-with-text-background: var(--tide-booking-gray-xlight);
413
- --tide-booking-image-with-text-card-title-color: var(--tide-booking-black);
414
- --tide-booking-image-with-text-card-title-font-family: var(--tide-booking-font-title);
415
- --tide-booking-image-with-text-card-title-font-weight: 700;
416
- --tide-booking-image-with-text-card-title-line-height: 1.2;
417
-
418
- //IMAGE WITH TEXT CARD
419
- --tide-booking-image-with-text-card-background: var(--tide-booking-white);
420
- --tide-booking-image-with-text-card-border: none;
421
- --tide-booking-image-with-text-card-border-radius: 24px;
422
- --tide-booking-image-with-text-card-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
423
-
424
- --tide-booking-image-with-text-card-image-border-radius: 16px;
425
-
426
- --tide-booking-image-with-text-card-heading-color: var(--tide-booking-black);
427
- --tide-booking-image-with-text-card-heading-font-family: var(--tide-booking-font-heading);
428
- --tide-booking-image-with-text-card-heading-font-weight: 700;
429
- --tide-booking-image-with-text-card-heading-line-height: 1.2;
430
-
431
- --tide-booking-image-with-text-card-description-title-color: var(--tide-booking-black);
432
- --tide-booking-image-with-text-card-description-title-font-family: var(--tide-booking-font-heading);
433
- --tide-booking-image-with-text-card-description-title-font-weight: 700;
434
- --tide-booking-image-with-text-card-description-title-line-height: 1.2;
435
-
436
- --tide-booking-image-with-text-card-description-color: var(--tide-booking-gray-dark);
437
- --tide-booking-image-with-text-card-description-font-family: var(--tide-booking-font-body);
438
- --tide-booking-image-with-text-card-description-font-weight: 400;
439
- --tide-booking-image-with-text-card-description-line-height: 1.5;
440
-
441
- //TEXT IN IMAGE
442
- --tide-booking-text-in-image-background-color: var(--tide-booking-white);
443
- --tide-booking-text-in-image-border-radius: 16px;
444
- --tide-booking-text-in-image-border: none;
445
- --tide-booking-text-in-image-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
446
-
447
- --tide-booking-text-in-image-overlay-background: rgba(0, 0, 0, 0.3);
448
-
449
- --tide-booking-text-in-image-title-color: var(--tide-booking-white);
450
- --tide-booking-text-in-image-title-font-family: var(--tide-booking-font-heading);
451
- --tide-booking-text-in-image-title-font-weight: 700;
452
- --tide-booking-text-in-image-title-line-height: 1.2;
453
- --tide-booking-text-in-image-title-text-align: center;
454
-
455
- --tide-booking-text-in-image-description-color: var(--tide-booking-white);
456
- --tide-booking-text-in-image-description-font-family: var(--tide-booking-font-body);
457
- --tide-booking-text-in-image-description-font-weight: 400;
458
- --tide-booking-text-in-image-description-line-height: 1.5;
459
- --tide-booking-text-in-image-description-text-align: center;
460
-
461
- //IMAGE CARD
462
- --tide-booking-image-card-background: var(--tide-booking-white);
463
- --tide-booking-image-card-border: none;
464
- --tide-booking-image-card-border-radius: 16px;
465
- --tide-booking-image-card-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
466
-
467
- --tide-booking-image-card-title-color: var(--tide-booking-black);
468
- --tide-booking-image-card-title-font-family: var(--tide-booking-font-heading);
469
- --tide-booking-image-card-title-font-weight: 700;
470
- --tide-booking-image-card-title-line-height: 1.2;
471
-
472
- //NEWSLETTER
473
- --tide-booking-newsletter-background: var(--tide-booking-gray-xlight);
474
- --tide-booking-newsletter-border: none;
475
- --tide-booking-newsletter-border-radius: 24px;
476
- --tide-booking-newsletter-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
477
-
478
- --tide-booking-newsletter-title-color: var(--tide-booking-black);
479
- --tide-booking-newsletter-title-font-family: var(--tide-booking-font-heading);
480
- --tide-booking-newsletter-title-font-weight: 700;
481
- --tide-booking-newsletter-title-line-height: 1.2;
482
-
483
- --tide-booking-newsletter-description-color: var(--tide-booking-gray-dark);
484
- --tide-booking-newsletter-description-font-family: var(--tide-booking-font-body);
485
- --tide-booking-newsletter-description-font-weight: 400;
486
- --tide-booking-newsletter-description-line-height: 1.5;
487
-
488
- //SLIDER
489
- --tide-booking-slider-background: var(--tide-booking-gray--medium-light);
490
- --tide-booking-slider-border-radius: 24px;
491
- --tide-booking-slider-border: none;
492
- --tide-booking-slider-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
493
-
494
- --tide-booking-slider-overlay-background: rgba(0, 0, 0, 0.2);
495
-
496
- --tide-booking-slider-btn-color: var(--tide-booking-gray-dark);
497
- --tide-booking-slider-btn-background: rgba(255, 255, 255, 0.75);
498
- --tide-booking-slider-btn-border-radius: 50%;
499
- --tide-booking-slider-btn-border: 1.5px solid var(--tide-booking-white);
500
-
501
- --tide-booking-slider-btn-hover-color: var(--tide-booking-gray-dark);
502
- --tide-booking-slider-btn-hover-background: rgba(255, 255, 255, 1);
503
- --tide-booking-slider-btn-hover-border: 1.5px solid var(--tide-booking-white);
504
-
505
- --tide-booking-slider-dot-background: rgba(255, 255, 255, 0.75);
506
- --tide-booking-slider-dot-active-background: var(--tide-booking-white);
507
-
508
- //MAP VIEW
509
- --tide-booking-map-view-panel-width: 600px;
510
- --tide-booking-map-view-panel-bg: var(--tide-booking-white);
511
- --tide-booking-map-view-panel-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
512
- --tide-booking-map-view-dates-bg: var(--tide-booking-gray-light);
513
- --tide-booking-map-view-connector-color: var(--tide-booking-gray--medium-light);
514
- --tide-booking-map-view-destination-start-end-bg: var(--tide-booking-white);
515
- --tide-booking-map-view-destination-stop-bg: var(--tide-booking-white);
516
- --tide-booking-map-view-destination-border: 1px solid var(--tide-booking-gray--medium-light);
517
- --tide-booking-map-view-dot-size: 30px;
518
- --tide-booking-map-view-dot-stop-bg: var(--tide-booking-color-primary);
519
- --tide-booking-map-view-dot-stop-color: var(--tide-booking-white);
520
- --tide-booking-map-view-dot-flag-bg: var(--tide-booking-transparent);
521
- --tide-booking-map-view-dot-flag-color: var(--tide-booking-gray-dark);
522
- --tide-booking-map-view-toggle-on-bg: var(--tide-booking-color-secondary);
523
- --tide-booking-map-view-toggle-off-bg: var(--tide-booking-gray-medium);
524
- --tide-booking-map-view-continue-bg: var(--tide-booking-cta-background);
525
- --tide-booking-map-view-continue-bg-hover: var(--tide-booking-cta-background-hover);
526
- --tide-booking-map-view-continue-color: var(--tide-booking-cta-color);
527
- --tide-booking-map-view-continue-font-size: var(--tide-booking-cta-font-size);
528
- --tide-booking-map-view-continue-font-weight: var(--tide-booking-cta-font-weight);
529
- --tide-booking-map-view-continue-border-radius: var(--tide-booking-cta-border-radius);
530
- --tide-booking-map-view-marker-size: 50px;
531
- --tide-booking-map-view-marker-border-color: var(--tide-booking-white);
532
- --tide-booking-map-view-marker-plane-bg: var(--tide-booking-gray-medium);
533
- --tide-booking-map-view-marker-plane-color: var(--tide-booking-white);
534
- --tide-booking-map-view-marker-badge-bg: var(--tide-booking-color-secondary);
535
- --tide-booking-map-view-marker-badge-color: var(--tide-booking-white);
536
- --tide-booking-map-view-popup-bg: var(--tide-booking-white);
537
- --tide-booking-map-view-popup-width: 220px;
538
- --tide-booking-map-view-popup-border-radius: 8px;
539
- --tide-booking-map-view-popup-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
540
- --tide-booking-map-view-popup-image-height: 135px;
541
- --tide-booking-map-view-popup-link-color: var(--tide-booking-a-color);
542
- --tide-booking-map-view-popup-link-color-hover: var(--tide-booking-a-color-hover);
543
- }
1
+ :root {
2
+ // COLOR ASSIGNMENTS
3
+ --tide-booking-color-primary: #333399;
4
+ --tide-booking-color-primary-gradient: linear-gradient(204.08deg, #333399 1.64%, #282878 84.55%);
5
+ --tide-booking-color-primary-fade: #ebebf8;
6
+ --tide-booking-color-primary-extra-fade: #f8f8fd;
7
+ --tide-booking-color-primary-light: #cdcdee;
8
+ --tide-booking-color-primary-light-text: #3333997d;
9
+ --tide-booking-color-primary-dark: #282878;
10
+ --tide-booking-color-secondary: #1f9470;
11
+ --tide-booking-color-secondary-light: #11b684;
12
+
13
+ --tide-booking-color-star: #ecb911;
14
+ --tide-booking-color-star-light: #ecd790;
15
+ // --tide-booking-invalid: #e74c3c;
16
+ --tide-booking-invalid: #871d11;
17
+ --tide-booking-invalid-light: #fce8e6;
18
+ --tide-booking-invalid-dark: #871d11;
19
+ --tide-booking-price-increase: #e81212;
20
+ --tide-booking-price-decrease: #19a364;
21
+
22
+ --tide-booking-white: #ffffff;
23
+ --tide-booking-gray-light: #f5f5f5;
24
+ --tide-booking-gray-xlight: #fbfbfb;
25
+ --tide-booking-gray--medium-light: #efefef;
26
+ --tide-booking-gray-background-light: #e2e2e2;
27
+ --tide-booking-gray-border-light: #f3f3f3;
28
+ --tide-booking-gray-checkbox-bg: #bdbdbd;
29
+ --tide-booking-gray-medium: #cbcbcb;
30
+ --tide-booking-gray-dark: #666666;
31
+ --tide-booking-black: #0a0a0a;
32
+ --tide-booking-transparent: transparent;
33
+
34
+ --tide-booking-text-dark: #464646;
35
+ --tide-booking-text-medium: #828282;
36
+ --tide-booking-text-light: #c0c0c0;
37
+
38
+ // BACKGROUNDS
39
+ --tide-booking-bg: #fafafa;
40
+
41
+ // TYPOGRAPHY
42
+ --tide-booking-font-heading: 'Outfit', serif;
43
+ --tide-booking-font-body: 'Outfit', serif;
44
+ --tide-booking-font-handwritten: 'Outfit', serif;
45
+
46
+ --tide-booking-font-size-body: 14px;
47
+ --tide-booking-font-size-body-lg: 16px;
48
+ --tide-booking-line-height-body: 1;
49
+
50
+ // GRID
51
+ --tide-booking-container-wide: 1690px;
52
+ --tide-booking-container-medium: 1200px;
53
+ --tide-booking-container-small: 900px;
54
+ --tide-booking-container-article: 650px;
55
+ --tide-booking-gutter: 15px;
56
+
57
+ // MEDIA QUERIES
58
+ --tide-booking-screen-xxs: 490px;
59
+ --tide-booking-screen-xs: 576px;
60
+ --tide-booking-screen-sm: 768px;
61
+ --tide-booking-screen-md: 992px;
62
+ --tide-booking-screen-lg: 1200px;
63
+ --tide-booking-screen-xgl: 1440px;
64
+ --tide-booking-screen-xl: 1650px;
65
+ --tide-booking-screen-xxl: 1920px;
66
+
67
+ //HEADINGS
68
+ --tide-booking-heading-color: var(--tide-booking-black);
69
+
70
+ //h1
71
+ --tide-booking-h1: 32px;
72
+ --tide-booking-h1-sm: 40px;
73
+ --tide-booking-h1-xl: 40px;
74
+
75
+ //h2
76
+ --tide-booking-h2: 24px;
77
+ --tide-booking-h2-sm: 32px;
78
+ --tide-booking-h2-xl: 32px;
79
+
80
+ //h3
81
+ --tide-booking-h3: 18px;
82
+ --tide-booking-h3-sm: 24px;
83
+ --tide-booking-h3-xl: 24px;
84
+
85
+ //h4
86
+ --tide-booking-h4: 16px;
87
+ --tide-booking-h4-sm: 18px;
88
+ --tide-booking-h4-xl: 18px;
89
+
90
+ //h5
91
+ --tide-booking-h5: 16px;
92
+ --tide-booking-h5-xl: 18px;
93
+
94
+ //h6
95
+ --tide-booking-h6: 16px;
96
+ --tide-booking-h6-md: 18px;
97
+
98
+ //a
99
+ --tide-booking-a-color: var(--tide-booking-color-primary);
100
+ --tide-booking-a-text-decoration: underline;
101
+ --tide-booking-a-color-hover: var(--tide-booking-color-primary-dark);
102
+ --tide-booking-a-text-decoration-hover: underline;
103
+ --tide-booking-a-color-focus: var(--tide-booking-color-primary-dark);
104
+ --tide-booking-a-text-decoration-focus: underline;
105
+
106
+ //small fontsize
107
+ --tide-booking-small-font-size--mobile: 13px;
108
+ --tide-booking-small-font-size--desktop: 15px;
109
+
110
+ //INPUT
111
+ --tide-booking-input-background: var(--tide-booking-white);
112
+ --tide-booking-input-border: 1.5px solid var(--tide-booking-gray--medium-light);
113
+ --tide-booking-input-border-radius: 5px;
114
+ --tide-booking-input-color: var(--tide-booking-black);
115
+ --tide-booking-input-height: 45px;
116
+ --tide-booking-input-icon-color: var(--tide-booking-gray-dark);
117
+
118
+ //INPUT--lg
119
+ --tide-booking-input-height-lg: 45px;
120
+
121
+ //INPUT--hover
122
+ --tide-booking-input-border-hover: 1.5px solid var(--tide-booking-color-primary-light);
123
+
124
+ //INPUT--FOCUS/ACTIVE
125
+ --tide-booking-input-border-focus: 1.5px solid var(--tide-booking-color-primary);
126
+ --tide-booking-input-icon-color-focus: var(--tide-booking-color-primary);
127
+
128
+ //INPUT--PLACEHOLDER
129
+ --tide-booking-input-placeholder-color: var(--tide-booking-gray-dark);
130
+ --tide-booking-input-placeholder-font-style: normal;
131
+
132
+ //INPUT--LABEL
133
+ --tide-booking-input-label-color: var(--tide-booking-gray-dark);
134
+ --tide-booking-input-label-font-size: 14px;
135
+ --tide-booking-input-label-font-weight: 400;
136
+ --tide-booking-input-label-font-style: normal;
137
+
138
+ //RADIOBUTTON
139
+ --tide-booking-radiobutton-border: 1.5px solid var(--tide-booking-gray--medium-light);
140
+ --tide-booking-radiobutton-background: var(--tide-booking-white);
141
+ --tide-booking-radiobutton-color-text: var(--tide-booking-gray-dark);
142
+ --tide-booking-radiobutton-font-family: var(--tide-booking-font-body);
143
+ --tide-booking-radiobutton-font-size: 16px;
144
+ --tide-booking-radiobutton-font-weight: 400;
145
+
146
+ //RADIOBUTTON--INPUT--CHECKED
147
+ --tide-booking-radiobutton-input-checked-color-text: var(--tide-booking-color-primary);
148
+ --tide-booking-radiobutton-input-checked-background: var(--tide-booking-white);
149
+ --tide-booking-radiobutton-input-checked-border: 1.5px solid var(--tide-booking-color-primary);
150
+
151
+ //CHECKBOX--INPUT--CHECKED--AFTER
152
+ --tide-booking-radiobutton-input-checked-after-color: var(--tide-booking-color-primary);
153
+
154
+ //CHECKBOX
155
+ --tide-booking-checkbox-border: 1.5px solid var(--tide-booking-gray--medium-light);
156
+ --tide-booking-checkbox-border-radius: 0px;
157
+ --tide-booking-checkbox-background: var(--tide-booking-white);
158
+ --tide-booking-checkbox-color-text: var(--tide-booking-gray-dark);
159
+ --tide-booking-checkbox-font-family: var(--tide-booking-font-body);
160
+ --tide-booking-checkbox-font-size: 16px;
161
+ --tide-booking-checkbox-font-weight: 400;
162
+
163
+ //CHECKBOX--INPUT--CHECKED
164
+ --tide-booking-checkbox-input-checked-check-color: var(--tide-booking-white);
165
+ --tide-booking-checkbox-input-checked-color-text: var(--tide-booking-color-primary);
166
+ --tide-booking-checkbox-input-checked-background: var(--tide-booking-color-primary);
167
+ --tide-booking-checkbox-input-checked-border: 1.5px solid var(--tide-booking-color-primary);
168
+
169
+ //DROPDOWN
170
+ --tide-booking-dropdown-background: var(--tide-booking-white);
171
+ --tide-booking-dropdown-color: var(--tide-booking-gray-dark);
172
+ --tide-booking-dropdown-border: 1.5px solid var(--tide-booking-gray-light);
173
+ --tide-booking-dropdown-border-radius: 5px;
174
+ --tide-booking-dropdown-font-family: var(--tide-booking-font-body);
175
+
176
+ //DROPDOWN--HOVER
177
+ --tide-booking-dropdown-border-hover: 1.5px solid var(--tide-booking-color-primary-light);
178
+ --tide-booking-dropdown-color-hover: var(--tide-booking-color-primary);
179
+ --tide-booking-dropdown-background-hover: var(--tide-booking-white);
180
+
181
+ //DROPDOWN--focus
182
+ --tide-booking-dropdown-border-focus: 1.5px solid var(--tide-booking-color-primary);
183
+ --tide-booking-dropdown-color-focus: var(--tide-booking-color-primary);
184
+ --tide-booking-dropdown-background-focus: var(--tide-booking-white);
185
+
186
+ --tide-booking-dropdown-arrow-color: var(--tide-booking-black);
187
+ --tide-booking-dropdown-arrow-color-hover: var(--tide-booking-color-primary);
188
+
189
+ --tide-booking-dropdown-arrow-color-disabled: var(--tide-booking-gray-medium);
190
+
191
+ //DROPDOWN--menu
192
+ --tide-booking-dropdown-menu-background: var(--tide-booking-white);
193
+ --tide-booking-dropdown-menu-border: 1.5px solid var(--tide-booking-gray-border-light);
194
+ --tide-booking-dropdown-menu-border-radius: 5px;
195
+ --tide-booking-dropdown-menu-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
196
+
197
+ --tide-booking-dropdown-menu-option-color: var(--tide-booking-gray-dark);
198
+ --tide-booking-dropdown-menu-option-background-hover: var(--tide-booking-gray-light);
199
+ --tide-booking-dropdown-menu-option-color-hover: var(--tide-booking-color-primary);
200
+ --tide-booking-dropdown-menu-option-background-selected: var(--tide-booking-color-primary);
201
+ --tide-booking-dropdown-menu-option-color-selected: var(--tide-booking-white);
202
+
203
+ //CTA
204
+ --tide-booking-cta-height: 45px;
205
+ --tide-booking-cta-height-xs: 45px;
206
+ --tide-booking-cta-width: 100%;
207
+ --tide-booking-cta-width-xs: auto;
208
+ --tide-booking-cta-padding: 10px 20px;
209
+ --tide-booking-cta-color: var(--tide-booking-white);
210
+ --tide-booking-cta-background: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
211
+ --tide-booking-cta-font-family: var(--tide-booking-font-body);
212
+ --tide-booking-cta-font-size: 16px;
213
+ --tide-booking-cta-font-size-xs: 18px;
214
+ --tide-booking-cta-font-weight: 400;
215
+ --tide-booking-cta-text-decoration: none;
216
+ --tide-booking-cta-border: none;
217
+ --tide-booking-cta-border-radius: 5px;
218
+
219
+ //CTA__ICON
220
+ --tide-booking-cta-icon-color: var(--tide-booking-white);
221
+ --tide-booking-cta-icon-size: 16px;
222
+
223
+ //CTA__HOVER
224
+ --tide-booking-cta-background-hover: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
225
+ --tide-booking-cta-color-hover: var(--tide-booking-white);
226
+ --tide-booking-cta-icon-color-hover: var(--tide-booking-white);
227
+ --tide-booking-cta-border-hover: none;
228
+ --tide-booking-cta-text-decoration-hover: none;
229
+
230
+ //CTA__FOCUS
231
+ --tide-booking-cta-background-focus: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
232
+ --tide-booking-cta-color-focus: var(--tide-booking-white);
233
+ --tide-booking-cta-icon-color-focus: var(--tide-booking-white);
234
+ --tide-booking-cta-border-focus: none;
235
+ --tide-booking-cta-text-decoration-focus: none;
236
+
237
+ //CTA--SECONDARY
238
+ --tide-booking-cta-height-secondary: 25px;
239
+ --tide-booking-cta-height-xs-secondary: 30px;
240
+ --tide-booking-cta-width-secondary: auto;
241
+ --tide-booking-cta-padding-secondary: 0px;
242
+ --tide-booking-cta-margin-secondary: 0px 0 0 0;
243
+ --tide-booking-cta-background-secondary: var(--tide-booking-transparent);
244
+ --tide-booking-cta-color-secondary: var(--tide-booking-color-primary);
245
+ --tide-booking-cta-border-secondary: none;
246
+ --tide-booking-cta-border-radius-secondary: 5px;
247
+ --tide-booking-cta-text-decoration-secondary: underline;
248
+ --tide-booking-cta-font-family-secondary: var(--tide-booking-font-body);
249
+ --tide-booking-cta-font-size-secondary: 16px;
250
+ --tide-booking-cta-font-size-xs-secondary: 18px;
251
+ --tide-booking-cta-font-weight-secondary: 400;
252
+
253
+ //CTA--SECONDARY__ICON
254
+ --tide-booking-cta-icon-color-secondary: var(--tide-booking-color-primary);
255
+ --tide-booking-cta-icon-size-secondary: 16px;
256
+
257
+ //CTA--SECONDARY__HOVER
258
+ --tide-booking-cta-background-secondary-hover: var(--tide-booking-transparent);
259
+ --tide-booking-cta-color-secondary-hover: var(--tide-booking-color-primary-dark);
260
+ --tide-booking-cta-icon-color-secondary-hover: var(--tide-booking-color-primary-dark);
261
+ --tide-booking-cta-border-secondary-hover: none;
262
+ --tide-booking-cta-text-decoration-secondary-hover: underline;
263
+
264
+ //CTA--SECONDARY__FOCUS
265
+ --tide-booking-cta-background-secondary-focus: var(--tide-booking-transparent);
266
+ --tide-booking-cta-color-secondary-focus: var(--tide-booking-color-primary-dark);
267
+ --tide-booking-cta-icon-color-secondary-focus: var(--tide-booking-color-primary-dark);
268
+ --tide-booking-cta-border-secondary-focus: none;
269
+ --tide-booking-cta-text-decoration-secondary-focus: underline;
270
+
271
+ //CTA--SELECT
272
+ --tide-booking-cta-background-select: linear-gradient(8.14deg, #dce1ff 19.75%, #e5e8fb 65.25%);
273
+ --tide-booking-cta-color-select: var(--tide-booking-color-primary);
274
+ --tide-booking-cta-border-select: none;
275
+ --tide-booking-cta-border-radius-select: 5px;
276
+
277
+ //CTA--SELECT--HOVER/FOCUS/ACTIVE
278
+ --tide-booking-cta-background-select-hover: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
279
+ --tide-booking-cta-color-select-hover: var(--tide-booking-color-primary-dark);
280
+ --tide-booking-cta-border-select-hover: none;
281
+
282
+ //CTA--remove
283
+ --tide-booking-cta-height-remove: auto;
284
+ --tide-booking-cta-width-remove: auto;
285
+ --tide-booking-cta-padding-remove: 0px;
286
+ --tide-booking-cta-background-remove: var(--tide-booking-transparent);
287
+ --tide-booking-cta-color-remove: var(--tide-booking-gray-medium);
288
+ --tide-booking-cta-border-remove: none;
289
+ --tide-booking-cta-border-radius-remove: 5px;
290
+ --tide-booking-cta-text-decoration-remove: underline;
291
+
292
+ //CTA--remove__ICON
293
+ --tide-booking-cta-icon-color-remove: var(--tide-booking-invalid);
294
+ --tide-booking-cta-icon-size-remove: 16px;
295
+
296
+ //CTA--remove__HOVER, __focus
297
+ --tide-booking-cta-background-remove-hover: var(--tide-booking-transparent);
298
+ --tide-booking-cta-color-remove-hover: var(--tide-booking-gray-dark);
299
+ --tide-booking-cta-icon-color-remove-hover: var(--tide-booking-gray-dark);
300
+ --tide-booking-cta-border-remove-hover: none;
301
+ --tide-booking-cta-text-decoration-remove-hover: underline;
302
+
303
+ //NAVIGATION
304
+ --tide-booking-nav-background: var(--tide-booking-white);
305
+ --tide-booking-nav-border: none;
306
+ --tide-booking-nav-border-radius: 0px;
307
+ --tide-booking-nav-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
308
+
309
+ --tide-booking-nav-container-background: var(--tide-booking-white);
310
+ --tide-booking-nav-container-border: none;
311
+ --tide-booking-nav-container-border-radius: 0px;
312
+ --tide-booking-nav-container-box-shadow: none;
313
+
314
+ //--LINK
315
+ --tide-booking-nav-link-background: var(--tide-booking-transparent);
316
+ --tide-booking-nav-link-color: var(--tide-booking-gray-dark);
317
+ --tide-booking-nav-link-border-bottom: 3px solid var(--tide-booking-white);
318
+ --tide-booking-nav-link-font-family: var(--tide-booking-font-body);
319
+ --tide-booking-nav-link-font-weight: 500;
320
+ --tide-booking-nav-link-text-decoration: none;
321
+
322
+ --tide-booking-nav-link-hover-background: var(--tide-booking-transparent);
323
+ --tide-booking-nav-link-hover-color: var(--tide-booking-color-primary-light-text);
324
+ --tide-booking-nav-link-hover-border-bottom: 3px solid var(--tide-booking-color-primary-light-text);
325
+ --tide-booking-nav-link-hover-text-decoration: none;
326
+
327
+ --tide-booking-nav-link-active-background: var(--tide-booking-transparent);
328
+ --tide-booking-nav-link-active-color: var(--tide-booking-color-primary);
329
+ --tide-booking-nav-link-active-border-bottom: 3px solid var(--tide-booking-color-primary);
330
+ --tide-booking-nav-link-active-text-decoration: none;
331
+
332
+ //SUBNAVIGATION
333
+ --tide-booking-subnav-background: var(--tide-booking-gray-light);
334
+ --tide-booking-subnav-border: none;
335
+ --tide-booking-subnav-border-radius: 0px;
336
+ --tide-booking-subnav-box-shadow: none;
337
+
338
+ //--LINK
339
+ --tide-booking-subnav-link-background: var(--tide-booking-transparent);
340
+ --tide-booking-subnav-link-color: var(--tide-booking-gray-dark);
341
+ --tide-booking-subnav-link-border-bottom: none;
342
+ --tide-booking-subnav-link-font-family: var(--tide-booking-font-body);
343
+ --tide-booking-subnav-link-font-weight: 500;
344
+ --tide-booking-subnav-link-text-decoration: none;
345
+
346
+ --tide-booking-subnav-link-hover-background: var(--tide-booking-transparent);
347
+ --tide-booking-subnav-link-hover-color: var(--tide-booking-color-primary-light-text);
348
+ --tide-booking-subnav-link-hover-border-bottom: none;
349
+ --tide-booking-subnav-link-hover-text-decoration: none;
350
+
351
+ //NAVIGATION MOBILE
352
+ --tide-booking-nav-mobile-menu-background: var(--tide-booking-white);
353
+ --tide-booking-nav-mobile-menu-border: none;
354
+ --tide-booking-nav-mobile-menu-border-radius: 0px;
355
+ --tide-booking-nav-mobile-menu-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
356
+
357
+ //HEADER
358
+ --tide-booking-header-background: var(--tide-booking-white);
359
+ --tide-booking-header-border: none;
360
+ --tide-booking-header-border-radius: 0px 0px 24px 24px;
361
+ --tide-booking-header-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
362
+
363
+ --tide-booking-header-overlay-background: rgba(0, 0, 0, 0.1);
364
+
365
+ --tide-booking-header-title-color: var(--tide-booking-white);
366
+ --tide-booking-header-title-font-family: var(--tide-booking-font-heading);
367
+ --tide-booking-header-title-font-weight: 700;
368
+ --tide-booking-header-title-line-height: 1.2;
369
+ --tide-booking-header-title-text-align: center;
370
+
371
+ --tide-booking-header-description-color: var(--tide-booking-white);
372
+ --tide-booking-header-description-font-family: var(--tide-booking-font-body);
373
+ --tide-booking-header-description-font-weight: 400;
374
+ --tide-booking-header-description-line-height: 1.5;
375
+ --tide-booking-header-description-text-align: center;
376
+
377
+ //FOOTER
378
+ --tide-booking-footer-background: var(--tide-booking-gray--medium-light);
379
+ --tide-booking-footer-border: none;
380
+ --tide-booking-footer-border-radius: 0px;
381
+ --tide-booking-footer-box-shadow: none;
382
+
383
+ --tide-booking-footer-link-color: var(--tide-booking-gray-dark);
384
+ --tide-booking-footer-link-font-family: var(--tide-booking-font-body);
385
+ --tide-booking-footer-link-font-weight: 400;
386
+ --tide-booking-footer-link-line-height: 1.5;
387
+ --tide-booking-footer-link-text-decoration: none;
388
+ --tide-booking-footer-link-color-hover: var(--tide-booking-color-primary);
389
+ --tide-booking-footer-link-text-decoration-hover: underline;
390
+
391
+ --tide-booking-footer-link-title-color: var(--tide-booking-black);
392
+ --tide-booking-footer-link-title-font-family: var(--tide-booking-font-heading);
393
+ --tide-booking-footer-link-title-font-weight: 700;
394
+ --tide-booking-footer-link-title-line-height: 1.2;
395
+
396
+ --tide-booking-footer-line-color: var(--tide-booking-gray-medium);
397
+
398
+ --tide-booking-footer-copyright-color: var(--tide-booking-gray-dark);
399
+ --tide-booking-footer-copyright-font-family: var(--tide-booking-font-body);
400
+ --tide-booking-footer-copyright-font-weight: 400;
401
+ --tide-booking-footer-copyright-line-height: 1.5;
402
+
403
+ // CONTENT
404
+ --tide-booking-content-background: var(--tide-booking-gray-xlight);
405
+ --tide-booking-content-title-color: var(--tide-booking-black);
406
+ --tide-booking-content-title-font-family: var(--tide-booking-font-title);
407
+ --tide-booking-content-title-font-weight: 700;
408
+ --tide-booking-content-title-line-height: 1.2;
409
+ --tide-booking-content-title-text-align: center;
410
+
411
+ //IMAGE WITH TEXT
412
+ --tide-booking-image-with-text-background: var(--tide-booking-gray-xlight);
413
+ --tide-booking-image-with-text-card-title-color: var(--tide-booking-black);
414
+ --tide-booking-image-with-text-card-title-font-family: var(--tide-booking-font-title);
415
+ --tide-booking-image-with-text-card-title-font-weight: 700;
416
+ --tide-booking-image-with-text-card-title-line-height: 1.2;
417
+
418
+ //IMAGE WITH TEXT CARD
419
+ --tide-booking-image-with-text-card-background: var(--tide-booking-white);
420
+ --tide-booking-image-with-text-card-border: none;
421
+ --tide-booking-image-with-text-card-border-radius: 24px;
422
+ --tide-booking-image-with-text-card-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
423
+
424
+ --tide-booking-image-with-text-card-image-border-radius: 16px;
425
+
426
+ --tide-booking-image-with-text-card-heading-color: var(--tide-booking-black);
427
+ --tide-booking-image-with-text-card-heading-font-family: var(--tide-booking-font-heading);
428
+ --tide-booking-image-with-text-card-heading-font-weight: 700;
429
+ --tide-booking-image-with-text-card-heading-line-height: 1.2;
430
+
431
+ --tide-booking-image-with-text-card-description-title-color: var(--tide-booking-black);
432
+ --tide-booking-image-with-text-card-description-title-font-family: var(--tide-booking-font-heading);
433
+ --tide-booking-image-with-text-card-description-title-font-weight: 700;
434
+ --tide-booking-image-with-text-card-description-title-line-height: 1.2;
435
+
436
+ --tide-booking-image-with-text-card-description-color: var(--tide-booking-gray-dark);
437
+ --tide-booking-image-with-text-card-description-font-family: var(--tide-booking-font-body);
438
+ --tide-booking-image-with-text-card-description-font-weight: 400;
439
+ --tide-booking-image-with-text-card-description-line-height: 1.5;
440
+
441
+ //TEXT IN IMAGE
442
+ --tide-booking-text-in-image-background-color: var(--tide-booking-white);
443
+ --tide-booking-text-in-image-border-radius: 16px;
444
+ --tide-booking-text-in-image-border: none;
445
+ --tide-booking-text-in-image-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
446
+
447
+ --tide-booking-text-in-image-overlay-background: rgba(0, 0, 0, 0.3);
448
+
449
+ --tide-booking-text-in-image-title-color: var(--tide-booking-white);
450
+ --tide-booking-text-in-image-title-font-family: var(--tide-booking-font-heading);
451
+ --tide-booking-text-in-image-title-font-weight: 700;
452
+ --tide-booking-text-in-image-title-line-height: 1.2;
453
+ --tide-booking-text-in-image-title-text-align: center;
454
+
455
+ --tide-booking-text-in-image-description-color: var(--tide-booking-white);
456
+ --tide-booking-text-in-image-description-font-family: var(--tide-booking-font-body);
457
+ --tide-booking-text-in-image-description-font-weight: 400;
458
+ --tide-booking-text-in-image-description-line-height: 1.5;
459
+ --tide-booking-text-in-image-description-text-align: center;
460
+
461
+ //IMAGE CARD
462
+ --tide-booking-image-card-background: var(--tide-booking-white);
463
+ --tide-booking-image-card-border: none;
464
+ --tide-booking-image-card-border-radius: 16px;
465
+ --tide-booking-image-card-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
466
+
467
+ --tide-booking-image-card-title-color: var(--tide-booking-black);
468
+ --tide-booking-image-card-title-font-family: var(--tide-booking-font-heading);
469
+ --tide-booking-image-card-title-font-weight: 700;
470
+ --tide-booking-image-card-title-line-height: 1.2;
471
+
472
+ //NEWSLETTER
473
+ --tide-booking-newsletter-background: var(--tide-booking-gray-xlight);
474
+ --tide-booking-newsletter-border: none;
475
+ --tide-booking-newsletter-border-radius: 24px;
476
+ --tide-booking-newsletter-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
477
+
478
+ --tide-booking-newsletter-title-color: var(--tide-booking-black);
479
+ --tide-booking-newsletter-title-font-family: var(--tide-booking-font-heading);
480
+ --tide-booking-newsletter-title-font-weight: 700;
481
+ --tide-booking-newsletter-title-line-height: 1.2;
482
+
483
+ --tide-booking-newsletter-description-color: var(--tide-booking-gray-dark);
484
+ --tide-booking-newsletter-description-font-family: var(--tide-booking-font-body);
485
+ --tide-booking-newsletter-description-font-weight: 400;
486
+ --tide-booking-newsletter-description-line-height: 1.5;
487
+
488
+ //SLIDER
489
+ --tide-booking-slider-background: var(--tide-booking-gray--medium-light);
490
+ --tide-booking-slider-border-radius: 24px;
491
+ --tide-booking-slider-border: none;
492
+ --tide-booking-slider-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
493
+
494
+ --tide-booking-slider-overlay-background: rgba(0, 0, 0, 0.2);
495
+
496
+ --tide-booking-slider-btn-color: var(--tide-booking-gray-dark);
497
+ --tide-booking-slider-btn-background: rgba(255, 255, 255, 0.75);
498
+ --tide-booking-slider-btn-border-radius: 50%;
499
+ --tide-booking-slider-btn-border: 1.5px solid var(--tide-booking-white);
500
+
501
+ --tide-booking-slider-btn-hover-color: var(--tide-booking-gray-dark);
502
+ --tide-booking-slider-btn-hover-background: rgba(255, 255, 255, 1);
503
+ --tide-booking-slider-btn-hover-border: 1.5px solid var(--tide-booking-white);
504
+
505
+ --tide-booking-slider-dot-background: rgba(255, 255, 255, 0.75);
506
+ --tide-booking-slider-dot-active-background: var(--tide-booking-white);
507
+
508
+ //MAP VIEW
509
+ --tide-booking-map-view-panel-width: 600px;
510
+ --tide-booking-map-view-panel-bg: var(--tide-booking-white);
511
+ --tide-booking-map-view-panel-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
512
+ --tide-booking-map-view-dates-bg: var(--tide-booking-gray-light);
513
+ --tide-booking-map-view-connector-color: var(--tide-booking-gray--medium-light);
514
+ --tide-booking-map-view-destination-start-end-bg: var(--tide-booking-white);
515
+ --tide-booking-map-view-destination-stop-bg: var(--tide-booking-white);
516
+ --tide-booking-map-view-destination-border: 1px solid var(--tide-booking-gray--medium-light);
517
+ --tide-booking-map-view-dot-size: 30px;
518
+ --tide-booking-map-view-dot-stop-bg: var(--tide-booking-color-primary);
519
+ --tide-booking-map-view-dot-stop-color: var(--tide-booking-white);
520
+ --tide-booking-map-view-dot-flag-bg: var(--tide-booking-transparent);
521
+ --tide-booking-map-view-dot-flag-color: var(--tide-booking-gray-dark);
522
+ --tide-booking-map-view-toggle-on-bg: var(--tide-booking-color-secondary);
523
+ --tide-booking-map-view-toggle-off-bg: var(--tide-booking-gray-medium);
524
+ --tide-booking-map-view-continue-bg: var(--tide-booking-cta-background);
525
+ --tide-booking-map-view-continue-bg-hover: var(--tide-booking-cta-background-hover);
526
+ --tide-booking-map-view-continue-color: var(--tide-booking-cta-color);
527
+ --tide-booking-map-view-continue-font-size: var(--tide-booking-cta-font-size);
528
+ --tide-booking-map-view-continue-font-weight: var(--tide-booking-cta-font-weight);
529
+ --tide-booking-map-view-continue-border-radius: var(--tide-booking-cta-border-radius);
530
+ --tide-booking-map-view-marker-size: 50px;
531
+ --tide-booking-map-view-marker-border-color: var(--tide-booking-white);
532
+ --tide-booking-map-view-marker-plane-bg: var(--tide-booking-gray-medium);
533
+ --tide-booking-map-view-marker-plane-color: var(--tide-booking-white);
534
+ --tide-booking-map-view-marker-badge-bg: var(--tide-booking-color-secondary);
535
+ --tide-booking-map-view-marker-badge-color: var(--tide-booking-white);
536
+ --tide-booking-map-view-popup-bg: var(--tide-booking-white);
537
+ --tide-booking-map-view-popup-width: 220px;
538
+ --tide-booking-map-view-popup-border-radius: 8px;
539
+ --tide-booking-map-view-popup-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
540
+ --tide-booking-map-view-popup-image-height: 135px;
541
+ --tide-booking-map-view-popup-link-color: var(--tide-booking-a-color);
542
+ --tide-booking-map-view-popup-link-color-hover: var(--tide-booking-a-color-hover);
543
+ }