@qite/tide-components 1.0.1

package/styles/content-blocks-variables.scss

@@ -0,0 +1,543 @@
+:root {
+  // COLOR ASSIGNMENTS
+  --tide-booking-color-primary: #333399;
+  --tide-booking-color-primary-gradient: linear-gradient(204.08deg, #333399 1.64%, #282878 84.55%);
+  --tide-booking-color-primary-fade: #ebebf8;
+  --tide-booking-color-primary-extra-fade: #f8f8fd;
+  --tide-booking-color-primary-light: #cdcdee;
+  --tide-booking-color-primary-light-text: #3333997d;
+  --tide-booking-color-primary-dark: #282878;
+  --tide-booking-color-secondary: #1f9470;
+  --tide-booking-color-secondary-light: #11b684;
+
+  --tide-booking-color-star: #ecb911;
+  --tide-booking-color-star-light: #ecd790;
+  // --tide-booking-invalid: #e74c3c;
+  --tide-booking-invalid: #871d11;
+  --tide-booking-invalid-light: #fce8e6;
+  --tide-booking-invalid-dark: #871d11;
+  --tide-booking-price-increase: #e81212;
+  --tide-booking-price-decrease: #19a364;
+
+  --tide-booking-white: #ffffff;
+  --tide-booking-gray-light: #f5f5f5;
+  --tide-booking-gray-xlight: #fbfbfb;
+  --tide-booking-gray--medium-light: #efefef;
+  --tide-booking-gray-background-light: #e2e2e2;
+  --tide-booking-gray-border-light: #f3f3f3;
+  --tide-booking-gray-checkbox-bg: #bdbdbd;
+  --tide-booking-gray-medium: #cbcbcb;
+  --tide-booking-gray-dark: #666666;
+  --tide-booking-black: #0a0a0a;
+  --tide-booking-transparent: transparent;
+
+  --tide-booking-text-dark: #464646;
+  --tide-booking-text-medium: #828282;
+  --tide-booking-text-light: #c0c0c0;
+
+  // BACKGROUNDS
+  --tide-booking-bg: #fafafa;
+
+  // TYPOGRAPHY
+  --tide-booking-font-heading: 'Outfit', serif;
+  --tide-booking-font-body: 'Outfit', serif;
+  --tide-booking-font-handwritten: 'Outfit', serif;
+
+  --tide-booking-font-size-body: 14px;
+  --tide-booking-font-size-body-lg: 16px;
+  --tide-booking-line-height-body: 1;
+
+  // GRID
+  --tide-booking-container-wide: 1690px;
+  --tide-booking-container-medium: 1200px;
+  --tide-booking-container-small: 900px;
+  --tide-booking-container-article: 650px;
+  --tide-booking-gutter: 15px;
+
+  // MEDIA QUERIES
+  --tide-booking-screen-xxs: 490px;
+  --tide-booking-screen-xs: 576px;
+  --tide-booking-screen-sm: 768px;
+  --tide-booking-screen-md: 992px;
+  --tide-booking-screen-lg: 1200px;
+  --tide-booking-screen-xgl: 1440px;
+  --tide-booking-screen-xl: 1650px;
+  --tide-booking-screen-xxl: 1920px;
+
+  //HEADINGS
+  --tide-booking-heading-color: var(--tide-booking-black);
+
+  //h1
+  --tide-booking-h1: 32px;
+  --tide-booking-h1-sm: 40px;
+  --tide-booking-h1-xl: 40px;
+
+  //h2
+  --tide-booking-h2: 24px;
+  --tide-booking-h2-sm: 32px;
+  --tide-booking-h2-xl: 32px;
+
+  //h3
+  --tide-booking-h3: 18px;
+  --tide-booking-h3-sm: 24px;
+  --tide-booking-h3-xl: 24px;
+
+  //h4
+  --tide-booking-h4: 16px;
+  --tide-booking-h4-sm: 18px;
+  --tide-booking-h4-xl: 18px;
+
+  //h5
+  --tide-booking-h5: 16px;
+  --tide-booking-h5-xl: 18px;
+
+  //h6
+  --tide-booking-h6: 16px;
+  --tide-booking-h6-md: 18px;
+
+  //a
+  --tide-booking-a-color: var(--tide-booking-color-primary);
+  --tide-booking-a-text-decoration: underline;
+  --tide-booking-a-color-hover: var(--tide-booking-color-primary-dark);
+  --tide-booking-a-text-decoration-hover: underline;
+  --tide-booking-a-color-focus: var(--tide-booking-color-primary-dark);
+  --tide-booking-a-text-decoration-focus: underline;
+
+  //small fontsize
+  --tide-booking-small-font-size--mobile: 13px;
+  --tide-booking-small-font-size--desktop: 15px;
+
+  //INPUT
+  --tide-booking-input-background: var(--tide-booking-white);
+  --tide-booking-input-border: 1.5px solid var(--tide-booking-gray--medium-light);
+  --tide-booking-input-border-radius: 5px;
+  --tide-booking-input-color: var(--tide-booking-black);
+  --tide-booking-input-height: 45px;
+  --tide-booking-input-icon-color: var(--tide-booking-gray-dark);
+
+  //INPUT--lg
+  --tide-booking-input-height-lg: 45px;
+
+  //INPUT--hover
+  --tide-booking-input-border-hover: 1.5px solid var(--tide-booking-color-primary-light);
+
+  //INPUT--FOCUS/ACTIVE
+  --tide-booking-input-border-focus: 1.5px solid var(--tide-booking-color-primary);
+  --tide-booking-input-icon-color-focus: var(--tide-booking-color-primary);
+
+  //INPUT--PLACEHOLDER
+  --tide-booking-input-placeholder-color: var(--tide-booking-gray-dark);
+  --tide-booking-input-placeholder-font-style: normal;
+
+  //INPUT--LABEL
+  --tide-booking-input-label-color: var(--tide-booking-gray-dark);
+  --tide-booking-input-label-font-size: 14px;
+  --tide-booking-input-label-font-weight: 400;
+  --tide-booking-input-label-font-style: normal;
+
+  //RADIOBUTTON
+  --tide-booking-radiobutton-border: 1.5px solid var(--tide-booking-gray--medium-light);
+  --tide-booking-radiobutton-background: var(--tide-booking-white);
+  --tide-booking-radiobutton-color-text: var(--tide-booking-gray-dark);
+  --tide-booking-radiobutton-font-family: var(--tide-booking-font-body);
+  --tide-booking-radiobutton-font-size: 16px;
+  --tide-booking-radiobutton-font-weight: 400;
+
+  //RADIOBUTTON--INPUT--CHECKED
+  --tide-booking-radiobutton-input-checked-color-text: var(--tide-booking-color-primary);
+  --tide-booking-radiobutton-input-checked-background: var(--tide-booking-white);
+  --tide-booking-radiobutton-input-checked-border: 1.5px solid var(--tide-booking-color-primary);
+
+  //CHECKBOX--INPUT--CHECKED--AFTER
+  --tide-booking-radiobutton-input-checked-after-color: var(--tide-booking-color-primary);
+
+  //CHECKBOX
+  --tide-booking-checkbox-border: 1.5px solid var(--tide-booking-gray--medium-light);
+  --tide-booking-checkbox-border-radius: 0px;
+  --tide-booking-checkbox-background: var(--tide-booking-white);
+  --tide-booking-checkbox-color-text: var(--tide-booking-gray-dark);
+  --tide-booking-checkbox-font-family: var(--tide-booking-font-body);
+  --tide-booking-checkbox-font-size: 16px;
+  --tide-booking-checkbox-font-weight: 400;
+
+  //CHECKBOX--INPUT--CHECKED
+  --tide-booking-checkbox-input-checked-check-color: var(--tide-booking-white);
+  --tide-booking-checkbox-input-checked-color-text: var(--tide-booking-color-primary);
+  --tide-booking-checkbox-input-checked-background: var(--tide-booking-color-primary);
+  --tide-booking-checkbox-input-checked-border: 1.5px solid var(--tide-booking-color-primary);
+
+  //DROPDOWN
+  --tide-booking-dropdown-background: var(--tide-booking-white);
+  --tide-booking-dropdown-color: var(--tide-booking-gray-dark);
+  --tide-booking-dropdown-border: 1.5px solid var(--tide-booking-gray-light);
+  --tide-booking-dropdown-border-radius: 5px;
+  --tide-booking-dropdown-font-family: var(--tide-booking-font-body);
+
+  //DROPDOWN--HOVER
+  --tide-booking-dropdown-border-hover: 1.5px solid var(--tide-booking-color-primary-light);
+  --tide-booking-dropdown-color-hover: var(--tide-booking-color-primary);
+  --tide-booking-dropdown-background-hover: var(--tide-booking-white);
+
+  //DROPDOWN--focus
+  --tide-booking-dropdown-border-focus: 1.5px solid var(--tide-booking-color-primary);
+  --tide-booking-dropdown-color-focus: var(--tide-booking-color-primary);
+  --tide-booking-dropdown-background-focus: var(--tide-booking-white);
+
+  --tide-booking-dropdown-arrow-color: var(--tide-booking-black);
+  --tide-booking-dropdown-arrow-color-hover: var(--tide-booking-color-primary);
+
+  --tide-booking-dropdown-arrow-color-disabled: var(--tide-booking-gray-medium);
+
+  //DROPDOWN--menu
+  --tide-booking-dropdown-menu-background: var(--tide-booking-white);
+  --tide-booking-dropdown-menu-border: 1.5px solid var(--tide-booking-gray-border-light);
+  --tide-booking-dropdown-menu-border-radius: 5px;
+  --tide-booking-dropdown-menu-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+  --tide-booking-dropdown-menu-option-color: var(--tide-booking-gray-dark);
+  --tide-booking-dropdown-menu-option-background-hover: var(--tide-booking-gray-light);
+  --tide-booking-dropdown-menu-option-color-hover: var(--tide-booking-color-primary);
+  --tide-booking-dropdown-menu-option-background-selected: var(--tide-booking-color-primary);
+  --tide-booking-dropdown-menu-option-color-selected: var(--tide-booking-white);
+
+  //CTA
+  --tide-booking-cta-height: 45px;
+  --tide-booking-cta-height-xs: 45px;
+  --tide-booking-cta-width: 100%;
+  --tide-booking-cta-width-xs: auto;
+  --tide-booking-cta-padding: 10px 20px;
+  --tide-booking-cta-color: var(--tide-booking-white);
+  --tide-booking-cta-background: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
+  --tide-booking-cta-font-family: var(--tide-booking-font-body);
+  --tide-booking-cta-font-size: 16px;
+  --tide-booking-cta-font-size-xs: 18px;
+  --tide-booking-cta-font-weight: 400;
+  --tide-booking-cta-text-decoration: none;
+  --tide-booking-cta-border: none;
+  --tide-booking-cta-border-radius: 5px;
+
+  //CTA__ICON
+  --tide-booking-cta-icon-color: var(--tide-booking-white);
+  --tide-booking-cta-icon-size: 16px;
+
+  //CTA__HOVER
+  --tide-booking-cta-background-hover: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
+  --tide-booking-cta-color-hover: var(--tide-booking-white);
+  --tide-booking-cta-icon-color-hover: var(--tide-booking-white);
+  --tide-booking-cta-border-hover: none;
+  --tide-booking-cta-text-decoration-hover: none;
+
+  //CTA__FOCUS
+  --tide-booking-cta-background-focus: linear-gradient(204.08deg, #11b684 1.64%, #1f9470 84.55%);
+  --tide-booking-cta-color-focus: var(--tide-booking-white);
+  --tide-booking-cta-icon-color-focus: var(--tide-booking-white);
+  --tide-booking-cta-border-focus: none;
+  --tide-booking-cta-text-decoration-focus: none;
+
+  //CTA--SECONDARY
+  --tide-booking-cta-height-secondary: 25px;
+  --tide-booking-cta-height-xs-secondary: 30px;
+  --tide-booking-cta-width-secondary: auto;
+  --tide-booking-cta-padding-secondary: 0px;
+  --tide-booking-cta-margin-secondary: 0px 0 0 0;
+  --tide-booking-cta-background-secondary: var(--tide-booking-transparent);
+  --tide-booking-cta-color-secondary: var(--tide-booking-color-primary);
+  --tide-booking-cta-border-secondary: none;
+  --tide-booking-cta-border-radius-secondary: 5px;
+  --tide-booking-cta-text-decoration-secondary: underline;
+  --tide-booking-cta-font-family-secondary: var(--tide-booking-font-body);
+  --tide-booking-cta-font-size-secondary: 16px;
+  --tide-booking-cta-font-size-xs-secondary: 18px;
+  --tide-booking-cta-font-weight-secondary: 400;
+
+  //CTA--SECONDARY__ICON
+  --tide-booking-cta-icon-color-secondary: var(--tide-booking-color-primary);
+  --tide-booking-cta-icon-size-secondary: 16px;
+
+  //CTA--SECONDARY__HOVER
+  --tide-booking-cta-background-secondary-hover: var(--tide-booking-transparent);
+  --tide-booking-cta-color-secondary-hover: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-icon-color-secondary-hover: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-border-secondary-hover: none;
+  --tide-booking-cta-text-decoration-secondary-hover: underline;
+
+  //CTA--SECONDARY__FOCUS
+  --tide-booking-cta-background-secondary-focus: var(--tide-booking-transparent);
+  --tide-booking-cta-color-secondary-focus: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-icon-color-secondary-focus: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-border-secondary-focus: none;
+  --tide-booking-cta-text-decoration-secondary-focus: underline;
+
+  //CTA--SELECT
+  --tide-booking-cta-background-select: linear-gradient(8.14deg, #dce1ff 19.75%, #e5e8fb 65.25%);
+  --tide-booking-cta-color-select: var(--tide-booking-color-primary);
+  --tide-booking-cta-border-select: none;
+  --tide-booking-cta-border-radius-select: 5px;
+
+  //CTA--SELECT--HOVER/FOCUS/ACTIVE
+  --tide-booking-cta-background-select-hover: linear-gradient(8.14deg, #b4c0ff 19.75%, #c2caf6 65.25%);
+  --tide-booking-cta-color-select-hover: var(--tide-booking-color-primary-dark);
+  --tide-booking-cta-border-select-hover: none;
+
+  //CTA--remove
+  --tide-booking-cta-height-remove: auto;
+  --tide-booking-cta-width-remove: auto;
+  --tide-booking-cta-padding-remove: 0px;
+  --tide-booking-cta-background-remove: var(--tide-booking-transparent);
+  --tide-booking-cta-color-remove: var(--tide-booking-gray-medium);
+  --tide-booking-cta-border-remove: none;
+  --tide-booking-cta-border-radius-remove: 5px;
+  --tide-booking-cta-text-decoration-remove: underline;
+
+  //CTA--remove__ICON
+  --tide-booking-cta-icon-color-remove: var(--tide-booking-invalid);
+  --tide-booking-cta-icon-size-remove: 16px;
+
+  //CTA--remove__HOVER, __focus
+  --tide-booking-cta-background-remove-hover: var(--tide-booking-transparent);
+  --tide-booking-cta-color-remove-hover: var(--tide-booking-gray-dark);
+  --tide-booking-cta-icon-color-remove-hover: var(--tide-booking-gray-dark);
+  --tide-booking-cta-border-remove-hover: none;
+  --tide-booking-cta-text-decoration-remove-hover: underline;
+
+  //NAVIGATION
+  --tide-booking-nav-background: var(--tide-booking-white);
+  --tide-booking-nav-border: none;
+  --tide-booking-nav-border-radius: 0px;
+  --tide-booking-nav-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
+
+  --tide-booking-nav-container-background: var(--tide-booking-white);
+  --tide-booking-nav-container-border: none;
+  --tide-booking-nav-container-border-radius: 0px;
+  --tide-booking-nav-container-box-shadow: none;
+
+  //--LINK
+  --tide-booking-nav-link-background: var(--tide-booking-transparent);
+  --tide-booking-nav-link-color: var(--tide-booking-gray-dark);
+  --tide-booking-nav-link-border-bottom: 3px solid var(--tide-booking-white);
+  --tide-booking-nav-link-font-family: var(--tide-booking-font-body);
+  --tide-booking-nav-link-font-weight: 500;
+  --tide-booking-nav-link-text-decoration: none;
+
+  --tide-booking-nav-link-hover-background: var(--tide-booking-transparent);
+  --tide-booking-nav-link-hover-color: var(--tide-booking-color-primary-light-text);
+  --tide-booking-nav-link-hover-border-bottom: 3px solid var(--tide-booking-color-primary-light-text);
+  --tide-booking-nav-link-hover-text-decoration: none;
+
+  --tide-booking-nav-link-active-background: var(--tide-booking-transparent);
+  --tide-booking-nav-link-active-color: var(--tide-booking-color-primary);
+  --tide-booking-nav-link-active-border-bottom: 3px solid var(--tide-booking-color-primary);
+  --tide-booking-nav-link-active-text-decoration: none;
+
+  //SUBNAVIGATION
+  --tide-booking-subnav-background: var(--tide-booking-gray-light);
+  --tide-booking-subnav-border: none;
+  --tide-booking-subnav-border-radius: 0px;
+  --tide-booking-subnav-box-shadow: none;
+
+  //--LINK
+  --tide-booking-subnav-link-background: var(--tide-booking-transparent);
+  --tide-booking-subnav-link-color: var(--tide-booking-gray-dark);
+  --tide-booking-subnav-link-border-bottom: none;
+  --tide-booking-subnav-link-font-family: var(--tide-booking-font-body);
+  --tide-booking-subnav-link-font-weight: 500;
+  --tide-booking-subnav-link-text-decoration: none;
+
+  --tide-booking-subnav-link-hover-background: var(--tide-booking-transparent);
+  --tide-booking-subnav-link-hover-color: var(--tide-booking-color-primary-light-text);
+  --tide-booking-subnav-link-hover-border-bottom: none;
+  --tide-booking-subnav-link-hover-text-decoration: none;
+
+  //NAVIGATION MOBILE
+  --tide-booking-nav-mobile-menu-background: var(--tide-booking-white);
+  --tide-booking-nav-mobile-menu-border: none;
+  --tide-booking-nav-mobile-menu-border-radius: 0px;
+  --tide-booking-nav-mobile-menu-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
+
+  //HEADER
+  --tide-booking-header-background: var(--tide-booking-white);
+  --tide-booking-header-border: none;
+  --tide-booking-header-border-radius: 0px 0px 24px 24px;
+  --tide-booking-header-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
+
+  --tide-booking-header-overlay-background: rgba(0, 0, 0, 0.1);
+
+  --tide-booking-header-title-color: var(--tide-booking-white);
+  --tide-booking-header-title-font-family: var(--tide-booking-font-heading);
+  --tide-booking-header-title-font-weight: 700;
+  --tide-booking-header-title-line-height: 1.2;
+  --tide-booking-header-title-text-align: center;
+
+  --tide-booking-header-description-color: var(--tide-booking-white);
+  --tide-booking-header-description-font-family: var(--tide-booking-font-body);
+  --tide-booking-header-description-font-weight: 400;
+  --tide-booking-header-description-line-height: 1.5;
+  --tide-booking-header-description-text-align: center;
+
+  //FOOTER
+  --tide-booking-footer-background: var(--tide-booking-gray--medium-light);
+  --tide-booking-footer-border: none;
+  --tide-booking-footer-border-radius: 0px;
+  --tide-booking-footer-box-shadow: none;
+
+  --tide-booking-footer-link-color: var(--tide-booking-gray-dark);
+  --tide-booking-footer-link-font-family: var(--tide-booking-font-body);
+  --tide-booking-footer-link-font-weight: 400;
+  --tide-booking-footer-link-line-height: 1.5;
+  --tide-booking-footer-link-text-decoration: none;
+  --tide-booking-footer-link-color-hover: var(--tide-booking-color-primary);
+  --tide-booking-footer-link-text-decoration-hover: underline;
+
+  --tide-booking-footer-link-title-color: var(--tide-booking-black);
+  --tide-booking-footer-link-title-font-family: var(--tide-booking-font-heading);
+  --tide-booking-footer-link-title-font-weight: 700;
+  --tide-booking-footer-link-title-line-height: 1.2;
+
+  --tide-booking-footer-line-color: var(--tide-booking-gray-medium);
+
+  --tide-booking-footer-copyright-color: var(--tide-booking-gray-dark);
+  --tide-booking-footer-copyright-font-family: var(--tide-booking-font-body);
+  --tide-booking-footer-copyright-font-weight: 400;
+  --tide-booking-footer-copyright-line-height: 1.5;
+
+  // CONTENT
+  --tide-booking-content-background: var(--tide-booking-gray-xlight);
+  --tide-booking-content-title-color: var(--tide-booking-black);
+  --tide-booking-content-title-font-family: var(--tide-booking-font-title);
+  --tide-booking-content-title-font-weight: 700;
+  --tide-booking-content-title-line-height: 1.2;
+  --tide-booking-content-title-text-align: center;
+
+  //IMAGE WITH TEXT
+  --tide-booking-image-with-text-background: var(--tide-booking-gray-xlight);
+  --tide-booking-image-with-text-card-title-color: var(--tide-booking-black);
+  --tide-booking-image-with-text-card-title-font-family: var(--tide-booking-font-title);
+  --tide-booking-image-with-text-card-title-font-weight: 700;
+  --tide-booking-image-with-text-card-title-line-height: 1.2;
+
+  //IMAGE WITH TEXT CARD
+  --tide-booking-image-with-text-card-background: var(--tide-booking-white);
+  --tide-booking-image-with-text-card-border: none;
+  --tide-booking-image-with-text-card-border-radius: 24px;
+  --tide-booking-image-with-text-card-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
+
+  --tide-booking-image-with-text-card-image-border-radius: 16px;
+
+  --tide-booking-image-with-text-card-heading-color: var(--tide-booking-black);
+  --tide-booking-image-with-text-card-heading-font-family: var(--tide-booking-font-heading);
+  --tide-booking-image-with-text-card-heading-font-weight: 700;
+  --tide-booking-image-with-text-card-heading-line-height: 1.2;
+
+  --tide-booking-image-with-text-card-description-title-color: var(--tide-booking-black);
+  --tide-booking-image-with-text-card-description-title-font-family: var(--tide-booking-font-heading);
+  --tide-booking-image-with-text-card-description-title-font-weight: 700;
+  --tide-booking-image-with-text-card-description-title-line-height: 1.2;
+
+  --tide-booking-image-with-text-card-description-color: var(--tide-booking-gray-dark);
+  --tide-booking-image-with-text-card-description-font-family: var(--tide-booking-font-body);
+  --tide-booking-image-with-text-card-description-font-weight: 400;
+  --tide-booking-image-with-text-card-description-line-height: 1.5;
+
+  //TEXT IN IMAGE
+  --tide-booking-text-in-image-background-color: var(--tide-booking-white);
+  --tide-booking-text-in-image-border-radius: 16px;
+  --tide-booking-text-in-image-border: none;
+  --tide-booking-text-in-image-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
+
+  --tide-booking-text-in-image-overlay-background: rgba(0, 0, 0, 0.3);
+
+  --tide-booking-text-in-image-title-color: var(--tide-booking-white);
+  --tide-booking-text-in-image-title-font-family: var(--tide-booking-font-heading);
+  --tide-booking-text-in-image-title-font-weight: 700;
+  --tide-booking-text-in-image-title-line-height: 1.2;
+  --tide-booking-text-in-image-title-text-align: center;
+
+  --tide-booking-text-in-image-description-color: var(--tide-booking-white);
+  --tide-booking-text-in-image-description-font-family: var(--tide-booking-font-body);
+  --tide-booking-text-in-image-description-font-weight: 400;
+  --tide-booking-text-in-image-description-line-height: 1.5;
+  --tide-booking-text-in-image-description-text-align: center;
+
+  //IMAGE CARD
+  --tide-booking-image-card-background: var(--tide-booking-white);
+  --tide-booking-image-card-border: none;
+  --tide-booking-image-card-border-radius: 16px;
+  --tide-booking-image-card-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
+
+  --tide-booking-image-card-title-color: var(--tide-booking-black);
+  --tide-booking-image-card-title-font-family: var(--tide-booking-font-heading);
+  --tide-booking-image-card-title-font-weight: 700;
+  --tide-booking-image-card-title-line-height: 1.2;
+
+  //NEWSLETTER
+  --tide-booking-newsletter-background: var(--tide-booking-gray-xlight);
+  --tide-booking-newsletter-border: none;
+  --tide-booking-newsletter-border-radius: 24px;
+  --tide-booking-newsletter-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
+
+  --tide-booking-newsletter-title-color: var(--tide-booking-black);
+  --tide-booking-newsletter-title-font-family: var(--tide-booking-font-heading);
+  --tide-booking-newsletter-title-font-weight: 700;
+  --tide-booking-newsletter-title-line-height: 1.2;
+
+  --tide-booking-newsletter-description-color: var(--tide-booking-gray-dark);
+  --tide-booking-newsletter-description-font-family: var(--tide-booking-font-body);
+  --tide-booking-newsletter-description-font-weight: 400;
+  --tide-booking-newsletter-description-line-height: 1.5;
+
+  //SLIDER
+  --tide-booking-slider-background: var(--tide-booking-gray--medium-light);
+  --tide-booking-slider-border-radius: 24px;
+  --tide-booking-slider-border: none;
+  --tide-booking-slider-box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
+
+  --tide-booking-slider-overlay-background: rgba(0, 0, 0, 0.2);
+
+  --tide-booking-slider-btn-color: var(--tide-booking-gray-dark);
+  --tide-booking-slider-btn-background: rgba(255, 255, 255, 0.75);
+  --tide-booking-slider-btn-border-radius: 50%;
+  --tide-booking-slider-btn-border: 1.5px solid var(--tide-booking-white);
+
+  --tide-booking-slider-btn-hover-color: var(--tide-booking-gray-dark);
+  --tide-booking-slider-btn-hover-background: rgba(255, 255, 255, 1);
+  --tide-booking-slider-btn-hover-border: 1.5px solid var(--tide-booking-white);
+
+  --tide-booking-slider-dot-background: rgba(255, 255, 255, 0.75);
+  --tide-booking-slider-dot-active-background: var(--tide-booking-white);
+
+  //MAP VIEW
+  --tide-booking-map-view-panel-width: 600px;
+  --tide-booking-map-view-panel-bg: var(--tide-booking-white);
+  --tide-booking-map-view-panel-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
+  --tide-booking-map-view-dates-bg: var(--tide-booking-gray-light);
+  --tide-booking-map-view-connector-color: var(--tide-booking-gray--medium-light);
+  --tide-booking-map-view-destination-start-end-bg: var(--tide-booking-white);
+  --tide-booking-map-view-destination-stop-bg: var(--tide-booking-white);
+  --tide-booking-map-view-destination-border: 1px solid var(--tide-booking-gray--medium-light);
+  --tide-booking-map-view-dot-size: 30px;
+  --tide-booking-map-view-dot-stop-bg: var(--tide-booking-color-primary);
+  --tide-booking-map-view-dot-stop-color: var(--tide-booking-white);
+  --tide-booking-map-view-dot-flag-bg: var(--tide-booking-transparent);
+  --tide-booking-map-view-dot-flag-color: var(--tide-booking-gray-dark);
+  --tide-booking-map-view-toggle-on-bg: var(--tide-booking-color-secondary);
+  --tide-booking-map-view-toggle-off-bg: var(--tide-booking-gray-medium);
+  --tide-booking-map-view-continue-bg: var(--tide-booking-cta-background);
+  --tide-booking-map-view-continue-bg-hover: var(--tide-booking-cta-background-hover);
+  --tide-booking-map-view-continue-color: var(--tide-booking-cta-color);
+  --tide-booking-map-view-continue-font-size: var(--tide-booking-cta-font-size);
+  --tide-booking-map-view-continue-font-weight: var(--tide-booking-cta-font-weight);
+  --tide-booking-map-view-continue-border-radius: var(--tide-booking-cta-border-radius);
+  --tide-booking-map-view-marker-size: 50px;
+  --tide-booking-map-view-marker-border-color: var(--tide-booking-white);
+  --tide-booking-map-view-marker-plane-bg: var(--tide-booking-gray-medium);
+  --tide-booking-map-view-marker-plane-color: var(--tide-booking-white);
+  --tide-booking-map-view-marker-badge-bg: var(--tide-booking-color-secondary);
+  --tide-booking-map-view-marker-badge-color: var(--tide-booking-white);
+  --tide-booking-map-view-popup-bg: var(--tide-booking-white);
+  --tide-booking-map-view-popup-width: 220px;
+  --tide-booking-map-view-popup-border-radius: 8px;
+  --tide-booking-map-view-popup-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
+  --tide-booking-map-view-popup-image-height: 135px;
+  --tide-booking-map-view-popup-link-color: var(--tide-booking-a-color);
+  --tide-booking-map-view-popup-link-color-hover: var(--tide-booking-a-color-hover);
+}

package/styles/content-blocks.scss

@@ -0,0 +1,66 @@
+body {
+  margin: 0;
+}
+#tide-content {
+  @import './components/mixins';
+  @import './components/placeholders';
+  @import './components/base';
+  @import './components/form';
+  @import './components/button';
+  @import './components/cta';
+
+  @import './components/checkbox';
+  @import './components/radiobutton';
+  @import './components/tree';
+  @import './components/input';
+  @import './components/radiobutton';
+  @import './components/content';
+  @import './components/navbar';
+  @import './components/header';
+  @import './components/contact';
+  @import './components/img-slider';
+  @import './components/image-with-text';
+  @import './components/breadcrumb';
+  @import './components/gallery';
+  @import './components/faq';
+  @import './components/login';
+  @import './components/accordion';
+  @import './components/footer';
+  @import './components/error';
+  @import './components/map-view';
+
+  @import './qsm/qsm';
+
+  @extend %reset;
+  @include body;
+  @extend %scrollbar-thin;
+
+  %scrollbar-none {
+    &::-webkit-scrollbar {
+      width: 0px;
+      height: 0px;
+    }
+
+    &::-webkit-scrollbar-track {
+      padding: 0;
+      background: transparent;
+    }
+  }
+
+  %scrollbar-thin {
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      padding: 2px;
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background-color: #cbcbcb;
+    }
+  }
+}

package/styles/font.scss

@@ -0,0 +1,2 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
+@import url('https://use.typekit.net/kyz2klm.css');