/*============================================================================ #Typography ==============================================================================*/ @font-face { font-family: var(--hx-font-04); font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/tymobeauty.com/cdn/fonts/montserrat/montserrat_n4.81949fa0ac9fd2021e16436151e8eaa539321637.woff2") format("woff2"), url("/assets/tymobeauty.com/cdn/fonts/montserrat/montserrat_n4.a6c632ca7b62da89c3594789ba828388aac693fe.woff") format("woff"); } @font-face { font-family: var(--hx-font-04); font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/tymobeauty.com/cdn/fonts/montserrat/montserrat_n4.81949fa0ac9fd2021e16436151e8eaa539321637.woff2") format("woff2"), url("/assets/tymobeauty.com/cdn/fonts/montserrat/montserrat_n4.a6c632ca7b62da89c3594789ba828388aac693fe.woff") format("woff"); } @font-face { font-family: var(--hx-font-04); font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/tymobeauty.com/cdn/fonts/montserrat/montserrat_n4.81949fa0ac9fd2021e16436151e8eaa539321637.woff2") format("woff2"), url("/assets/tymobeauty.com/cdn/fonts/montserrat/montserrat_n4.a6c632ca7b62da89c3594789ba828388aac693fe.woff") format("woff"); } /*============================================================================ #General Variables ==============================================================================*/ :root { --font-weight-normal: 400; --font-weight-bold: 700; --font-weight-header-bold: 700; --header-font-stack: Montserrat, sans-serif; --header-font-weight: 400; --header-font-style: normal; --header-text-size: 28; --header-text-size-px: 28px; --header-font-case: normal; --header-font-size: 16; --header-font-size-px: 16px; --heading-spacing: 0px; --heading-font-case: normal; --heading-font-stack: FontDrop; --body-font-stack: Montserrat, sans-serif; --body-font-weight: 400; --body-font-style: normal; --navigation-font-stack: Montserrat, sans-serif; --navigation-font-weight: 400; --navigation-font-style: normal; --base-font-size-int: 14; --base-font-size: 14px; --body-font-size-12-to-em: 0.86em; --body-font-size-14-to-em: 1.0em; --body-font-size-16-to-em: 1.14em; --body-font-size-18-to-em: 1.29em; --body-font-size-20-to-em: 1.43em; --body-font-size-22-to-em: 1.57em; --body-font-size-24-to-em: 1.71em; --body-font-size-28-to-em: 2.0em; --body-font-size-36-to-em: 2.57em; --sale-badge-color: var(--hx-ink-10); --sold-out-badge-color: var(--hx-ink-01); --badge-font-color: var(--hx-paper-01); --primary-btn-text-color: var(--hx-paper-01); --primary-btn-bg-color: var(--hx-ink-01); --primary-btn-bg-color-lighten50: var(--hx-grey-33); --primary-btn-bg-color-opacity50: var(--hx-shade-03); --primary-btn-bg-hover-color: var(--hx-ink-01); --primary-btn-text-hover-color: var(--hx-paper-02); --button-text-case: none; --button-font-size: 12; --button-font-size-px: 12px; --secondary-btn-text-color: var(--hx-paper-01); --secondary-btn-bg-color: var(--hx-ink-01); --secondary-btn-bg-color-lighten: var(--hx-ink-02); --secondary-btn-bg-hover-color: var(--hx-ink-01); --secondary-btn-bg-text-hover-color: var(--hx-paper-01); --alt-btn-font-style: normal; --alt-btn-font-weight: 400; --text-color: var(--hx-ink-02); --text-color-lighten5: var(--hx-grey-34); --text-color-lighten70: var(--hx-grey-07); --text-color-transparent05: var(--hx-shade-33); --text-color-transparent15: var(--hx-shade-34); --text-color-transparent5: var(--hx-shade-15); --text-color-transparent6: var(--hx-shade-32); --text-color-transparent7: var(--hx-shade-35); --text-color-transparent8: var(--hx-shade-12); --product-page-font-size: 20; --product-page-font-size-px: 20px; --product-page-font-case: normal; --product-page-font-weight: 500; --link-color: var(--hx-ink-02); --on-sale-color: var(--hx-brand-01); --body-color: var(--hx-paper-01); --body-color-darken10: var(--hx-grey-07); --body-color-transparent00: var(--hx-scrim-05); --body-color-transparent90: var(--hx-scrim-01); --body-secondary-color: var(--hx-paper-03); --body-secondary-color-transparent00: var(--hx-scrim-08); --body-secondary-color-darken05: var(--hx-paper-09); --color-primary-background: var(--hx-paper-01); --color-primary-background-rgb: 255, 255, 255; --color-secondary-background: var(--hx-paper-03); --cart-background-color: var(--hx-grey-35); --border-color: var(--hx-shade-15); --border-color-darken10: var(--hx-ink-08); --header-color: var(--hx-paper-01); --header-color-darken5: var(--hx-paper-05); --header-color-lighten5: var(--hx-paper-01); --header-border-color: var(--hx-shade-04); --announcement-text-size: 12px; --announcement-text-spacing: 1px; --announcement-text-case: none; --announcement-font-style: normal; --announcement-font-weight: 400; --logo-font-size: 18px; --overlay-header-text-color: var(--hx-paper-01); --nav-text-color: var(--hx-ink-02); --nav-text-hover: var(--hx-grey-36); --color-scheme-light-background: var(--hx-paper-16); --color-scheme-light-background-lighten5: var(--hx-paper-01); --color-scheme-light-text: var(--hx-grey-03); --color-scheme-light-text-transparent60: var(--hx-shade-36); --color-scheme-feature-background: var(--hx-grey-37); --color-scheme-feature-background-lighten5: var(--hx-grey-38); --color-scheme-feature-text: var(--hx-paper-01); --color-scheme-feature-text-transparent60: var(--hx-scrim-06); --homepage-sections-accent-secondary-color-transparent60: var(--hx-scrim-06); --color-scheme-dark-background: var(--hx-ink-02); --color-scheme-dark-text: var(--hx-paper-01); --color-scheme-dark-text-transparent60: var(--hx-scrim-06); --filter-bg-color: var(--hx-shade-23); --color-footer-bg: var(--hx-paper-03); --color-footer-bg-darken5: var(--hx-paper-09); --color-footer-text: var(--hx-grey-39); --color-footer-text-darken10: var(--hx-grey-40); --color-footer-border: var(--hx-shade-37); --popup-text-color: var(--hx-ink-01); --popup-text-color-lighten10: var(--hx-ink-08); --popup-bg-color: var(--hx-paper-01); --menu-drawer-color: var(--hx-paper-01); --menu-drawer-color-darken5: var(--hx-paper-05); --menu-drawer-text-color: var(--hx-ink-02); --menu-drawer-border-color: var(--hx-shade-23); --menu-drawer-text-hover-color: var(--hx-grey-28); --cart-drawer-color: var(--hx-paper-01); --cart-drawer-text-color: var(--hx-ink-02); --cart-drawer-text-color-lighten10: var(--hx-grey-41); --cart-drawer-border-color: var(--hx-shade-15); --fancybox-overlay: url('/assets/tymobeauty.com/cdn/shop/t/208/assets/fancybox_overlay__qcb537c51.png'); /* Shop Pay Installments variables */ --color-body: var(--hx-paper-03); --color-bg: var(--hx-paper-03); /* why pop */ /* why pop */ --why-background: var(--hx-warm-04); --why-background-img: url('/assets/tymobeauty.com/cdn/shopifycloud/storefront/assets/no-image-2048-a2addb12.gif'); --why-background-mbimg: url('/assets/tymobeauty.com/cdn/shopifycloud/storefront/assets/no-image-2048-a2addb12.gif'); --why-data-title: var(--hx-paper-01); --why-data-text: var(--hx-paper-01); --why_text_align: center; --entry_title_color: var(--hx-ink-03); --entry_text_color: var(--hx-grey-08); --entry_bgcolor: var(--hx-paper-03); }