/*!*********************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./src/styles/global.scss ***! \*********************************************************************************************************************************************/ @charset "UTF-8"; @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } :root { --color-black-01: rgb(33 36 39 / 1); --color-black-01-opacity-40: rgb(33 36 39 / 0.4); --color-black-01-opacity-20: rgb(33 36 39 / 0.2); --color-black-01-opacity-5: rgb(33 36 39 / 0.05); --color-black-01-80: rgb(79 79 79 / 1); --color-black-01-80-opacity-50: rgb(79 79 79 / 0.5); --color-black-01-60: rgb(118 118 118 / 1); --color-black-01-40: rgb(185 183 183 / 1); --color-black-01-10: rgb(232 231 231 / 1); --color-white-01: rgb(254 254 254 / 1); --color-white-01-opacity-90: rgb(254 254 254 / 0.9); --color-white-01-opacity-80: rgb(254 254 254 / 0.8); --color-white-01-opacity-60: rgb(254 254 254 / 0.6); --color-gray-01: rgb(214 214 214 / 1); --color-gray-02: rgb(243 243 243 / 1); --color-gray-02-110: rgb(219 219 219 / 1); --color-gray-02-120: rgb(194 194 194 / 1); --color-gray-02-opacity-60: rgb(243 243 243 / 0.6); --color-gray-02-opacity-90: rgb(243 243 243 / 0.9); --color-background-primary-100: var(--color-black-01); --color-background-primary-selected-100: var(--color-black-01); --color-background-primary-pressed-100: var(--color-black-01-80); --color-background-primary-200: var(--color-black-01-60); --color-background-primary-pressed-200: var(--color-black-01-opacity-40); --color-background-primary-300: var(--color-black-01-40); --color-background-primary-400: var(--color-black-01-10); --color-background-primary-pressed-300: var(--color-black-01-opacity-5); --color-background-neutral-100: var(--color-white-01); --color-background-neutral-200: var(--color-white-01-opacity-80); --color-background-neutral-pressed-300: var(--color-gray-02-120); --color-background-neutral-pressed-100: var(--color-black-01-60); --color-background-neutral-disabled-100: var(--color-black-01-60); --color-background-neutral-300: var(--color-black-01-60); --color-background-neutral-hover-100: var(--color-gray-02-110); --color-background-neutral-pressed-200: var(--color-gray-02); --color-background-neutral-400: var(--color-gray-02); --color-background-neutral-disabled-200: var(--color-gray-02); --color-background-transparent: transparent; --color-overlay-primary-100: var(--color-black-01-80-opacity-50); --color-overlay-neutral-100: var(--color-white-01-opacity-90); --color-overlay-neutral-200: var(--color-gray-02-opacity-60); --color-overlay-neutral-400: var(--color-gray-02-opacity-90); --color-stroke-primary-100: var(--color-black-01); --color-stroke-primary-selected-100: var(--color-black-01); --color-stroke-primary-pressed-100: var(--color-black-01-80); --color-stroke-primary-200: var(--color-black-01-60); --color-stroke-neutral-100: var(--color-white-01); --color-stroke-neutral-200: var(--color-gray-01); --color-stroke-neutral-disabled-100: var(--color-gray-01); --color-fill-text-primary-100: var(--color-black-01); --color-fill-text-primary-200: var(--color-black-01-80); --color-fill-text-primary-pressed-100: var(--color-black-01-80); --color-fill-text-primary-300: var(--color-black-01-60); --color-fill-text-neutral-100: var(--color-white-01); --color-fill-text-neutral-disabled-100: var(--color-black-01-80); --color-fill-text-neutral-disabled-200: var(--color-black-01-40); --color-fill-icon-primary-100: var(--color-black-01); --color-fill-icon-primary-hover-100: var(--color-black-01); --color-fill-icon-primary-pressed-100: var(--color-black-01); --color-fill-icon-primary-200: var(--color-black-01-80); --color-fill-icon-primary-pressed-200: var(--color-black-01-80); --color-fill-icon-primary-300: var(--color-black-01-60); --color-fill-icon-neutral-100: var(--color-white-01); --color-fill-icon-neutral-pressed-100: var(--color-white-01); --color-fill-icon-neutral-hover-100: var(--color-white-01); --color-fill-icon-neutral-selected-100: var(--color-white-01); --color-fill-icon-neutral-200: var(--color-gray-02); --color-fill-icon-neutral-disabled-100: var(--color-black-01-80); --color-shadow-primary-100: var(--color-black-01); --color-shadow-neutral-100: var(--color-white-01); --fontSize-25: 10px; --fontSize-50: 12px; --fontSize-75: 14px; --fontSize-100: 16px; --fontSize-150: 18px; --fontSize-200: 20px; --fontSize-300: 24px; --fontSize-400: 32px; --fontSize-500: 40px; --fontSize-600: 48px; --fontWeight-50: 300; --fontWeight-100: 400; --fontWeight-150: 500; --fontWeight-200: 600; --fontWeight-300: 700; --lineHeight-50: 1; --lineHeight-100: auto; --lineHeight-200: 1.2; --lineHeight-250: 1.25; --lineHeight-300: 1.3; --lineHeight-400: 1.4; --lineHeight-500: 1.5; --letterSpacing-100: 0%; --letterSpacing-200: 10%; --typography-headline-lg-accent-fontSize: var(--fontSize-600); --typography-headline-lg-accent-fontWeight: var(--fontWeight-150); --typography-headline-lg-accent-lineHeight: var(--lineHeight-500); --typography-headline-lg-accent-letterSpacing: var(--letterSpacing-100); --typography-headline-md-accent-fontSize: var(--fontSize-400); --typography-headline-md-accent-fontWeight: var(--fontWeight-150); --typography-headline-md-accent-lineHeight: var(--lineHeight-500); --typography-headline-md-accent-letterSpacing: var(--letterSpacing-100); --typography-headline-md-accent-100-fontSize: var(--fontSize-400); --typography-headline-md-accent-100-fontWeight: var(--fontWeight-150); --typography-headline-md-accent-100-lineHeight: var(--lineHeight-200); --typography-headline-md-accent-100-letterSpacing: var(--letterSpacing-100); --typography-headline-sm-accent-fontSize: var(--fontSize-300); --typography-headline-sm-accent-fontWeight: var(--fontWeight-150); --typography-headline-sm-accent-lineHeight: var(--lineHeight-500); --typography-headline-sm-accent-letterSpacing: var(--letterSpacing-100); --typography-headline-sm-fontSize: var(--fontSize-300); --typography-headline-sm-fontWeight: var(--fontWeight-100); --typography-headline-sm-lineHeight: var(--lineHeight-500); --typography-headline-sm-letterSpacing: var(--letterSpacing-100); --typography-body-lg-accent-fontSize: var(--fontSize-150); --typography-body-lg-accent-fontWeight: var(--fontWeight-200); --typography-body-lg-accent-lineHeight: var(--lineHeight-500); --typography-body-lg-accent-letterSpacing: var(--letterSpacing-100); --typography-body-lg-fontSize: var(--fontSize-150); --typography-body-lg-fontWeight: var(--fontWeight-100); --typography-body-lg-lineHeight: var(--lineHeight-500); --typography-body-lg-letterSpacing: var(--letterSpacing-100); --typography-body-md-accent-fontSize: var(--fontSize-100); --typography-body-md-accent-fontWeight: var(--fontWeight-200); --typography-body-md-accent-lineHeight: var(--lineHeight-500); --typography-body-md-accent-letterSpacing: var(--letterSpacing-100); --typography-body-md-bold-fontSize: var(--fontSize-100); --typography-body-md-bold-fontWeight: var(--fontWeight-300); --typography-body-md-bold-lineHeight: var(--lineHeight-500); --typography-body-md-bold-letterSpacing: var(--letterSpacing-100); --typography-body-md-fontSize: var(--fontSize-100); --typography-body-md-fontWeight: var(--fontWeight-100); --typography-body-md-lineHeight: var(--lineHeight-500); --typography-body-md-letterSpacing: var(--letterSpacing-100); --typography-body-sm-accent-fontSize: var(--fontSize-75); --typography-body-sm-accent-fontWeight: var(--fontWeight-200); --typography-body-sm-accent-lineHeight: var(--lineHeight-500); --typography-body-sm-accent-letterSpacing: var(--letterSpacing-100); --typography-body-sm-bold-fontSize: var(--fontSize-75); --typography-body-sm-bold-fontWeight: var(--fontWeight-200); --typography-body-sm-bold-lineHeight: var(--lineHeight-50); --typography-body-sm-bold-letterSpacing: var(--letterSpacing-100); --typography-body-sm-fontSize: var(--fontSize-75); --typography-body-sm-fontWeight: var(--fontWeight-100); --typography-body-sm-lineHeight: var(--lineHeight-500); --typography-body-sm-letterSpacing: var(--letterSpacing-100); --typography-body-sm-100-fontSize: var(--fontSize-75); --typography-body-sm-100-fontWeight: var(--fontWeight-100); --typography-body-sm-100-lineHeight: var(--lineHeight-250); --typography-body-sm-100-letterSpacing: var(--letterSpacing-100); --typography-label-lg-accent-fontWeight: var(--fontWeight-200); --typography-label-lg-accent-fontSize: var(--fontSize-50); --typography-label-lg-accent-lineHeight: var(--lineHeight-500); --typography-label-lg-accent-letterSpacing: var(--letterSpacing-100); --typography-label-lg-fontWeight: var(--fontWeight-100); --typography-label-lg-fontSize: var(--fontSize-50); --typography-label-lg-lineHeight: var(--lineHeight-500); --typography-label-lg-letterSpacing: var(--letterSpacing-100); --typography-label-sm-accent-fontWeight: var(--fontWeight-200); --typography-label-sm-accent-fontSize: var(--fontSize-25); --typography-label-sm-accent-lineHeight: var(--lineHeight-500); --typography-label-sm-accent-letterSpacing: var(--letterSpacing-100); --header-height: 96px; --wrapper-padding: 16px; --border-radius: 8px; --transition-duration: 180ms; } html, body { overflow-x: hidden; } body { font-family: "Rubik", sans-serif; } [data-typography][data-typography=headline-lg-accent] { font-size: var(--typography-headline-lg-accent-fontSize); font-weight: var(--typography-headline-lg-accent-fontWeight); line-height: var(--typography-headline-lg-accent-lineHeight); letter-spacing: var(--typography-headline-lg-accent-letterSpacing); } [data-typography][data-typography=headline-md-accent] { font-size: var(--typography-headline-md-accent-fontSize); font-weight: var(--typography-headline-md-accent-fontWeight); line-height: var(--typography-headline-md-accent-lineHeight); letter-spacing: var(--typography-headline-md-accent-letterSpacing); } [data-typography][data-typography=headline-md-accent-100] { font-size: var(--typography-headline-md-accent-100-fontSize); font-weight: var(--typography-headline-md-accent-100-fontWeight); line-height: var(--typography-headline-md-accent-100-lineHeight); letter-spacing: var(--typography-headline-md-accent-100-letterSpacing); } [data-typography][data-typography=headline-sm-accent] { font-size: var(--typography-headline-sm-accent-fontSize); font-weight: var(--typography-headline-sm-accent-fontWeight); line-height: var(--typography-headline-sm-accent-lineHeight); letter-spacing: var(--typography-headline-sm-accent-letterSpacing); } [data-typography][data-typography=headline-sm] { font-size: var(--typography-headline-sm-fontSize); font-weight: var(--typography-headline-sm-fontWeight); line-height: var(--typography-headline-sm-lineHeight); letter-spacing: var(--typography-headline-sm-letterSpacing); } [data-typography][data-typography=body-lg-accent] { font-size: var(--typography-body-lg-accent-fontSize); font-weight: var(--typography-body-lg-accent-fontWeight); line-height: var(--typography-body-lg-accent-lineHeight); letter-spacing: var(--typography-body-lg-accent-letterSpacing); } [data-typography][data-typography=body-lg] { font-size: var(--typography-body-lg-fontSize); font-weight: var(--typography-body-lg-fontWeight); line-height: var(--typography-body-lg-lineHeight); letter-spacing: var(--typography-body-lg-letterSpacing); } [data-typography][data-typography=body-md-accent] { font-size: var(--typography-body-md-accent-fontSize); font-weight: var(--typography-body-md-accent-fontWeight); line-height: var(--typography-body-md-accent-lineHeight); letter-spacing: var(--typography-body-md-accent-letterSpacing); } [data-typography][data-typography=body-md-bold] { font-size: var(--typography-body-md-bold-fontSize); font-weight: var(--typography-body-md-bold-fontWeight); line-height: var(--typography-body-md-bold-lineHeight); letter-spacing: var(--typography-body-md-bold-letterSpacing); } [data-typography][data-typography=body-md] { font-size: var(--typography-body-md-fontSize); font-weight: var(--typography-body-md-fontWeight); line-height: var(--typography-body-md-lineHeight); letter-spacing: var(--typography-body-md-letterSpacing); } [data-typography][data-typography=body-sm-accent] { font-size: var(--typography-body-sm-accent-fontSize); font-weight: var(--typography-body-sm-accent-fontWeight); line-height: var(--typography-body-sm-accent-lineHeight); letter-spacing: var(--typography-body-sm-accent-letterSpacing); } [data-typography][data-typography=body-sm-bold] { font-size: var(--typography-body-sm-bold-fontSize); font-weight: var(--typography-body-sm-bold-fontWeight); line-height: var(--typography-body-sm-bold-lineHeight); letter-spacing: var(--typography-body-sm-bold-letterSpacing); } [data-typography][data-typography=body-sm] { font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); } [data-typography][data-typography=body-sm-100] { font-size: var(--typography-body-sm-100-fontSize); font-weight: var(--typography-body-sm-100-fontWeight); line-height: var(--typography-body-sm-100-lineHeight); letter-spacing: var(--typography-body-sm-100-letterSpacing); } [data-typography][data-typography=label-lg-accent] { font-size: var(--typography-label-lg-accent-fontSize); font-weight: var(--typography-label-lg-accent-fontWeight); line-height: var(--typography-label-lg-accent-lineHeight); letter-spacing: var(--typography-label-lg-accent-letterSpacing); } [data-typography][data-typography=label-lg] { font-size: var(--typography-label-lg-fontSize); font-weight: var(--typography-label-lg-fontWeight); line-height: var(--typography-label-lg-lineHeight); letter-spacing: var(--typography-label-lg-letterSpacing); } [data-typography][data-typography=label-sm-accent] { font-size: var(--typography-label-sm-accent-fontSize); font-weight: var(--typography-label-sm-accent-fontWeight); line-height: var(--typography-label-sm-accent-lineHeight); letter-spacing: var(--typography-label-sm-accent-letterSpacing); } [data-length] { height: 1em; transform: scaleY(0.85); } [data-length][data-length="10"] { width: 10%; } [data-length][data-length="20"] { width: 20%; } [data-length][data-length="30"] { width: 30%; } [data-length][data-length="40"] { width: 40%; } [data-length][data-length="50"] { width: 50%; } [data-length][data-length="60"] { width: 60%; } [data-length][data-length="70"] { width: 70%; } [data-length][data-length="80"] { width: 80%; } [data-length][data-length="90"] { width: 90%; } [data-length][data-length="100"] { width: 100%; } /*!*****************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/modules/banner-contextual/banner-contextual.module.scss ***! \*****************************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-banner-contextual { position: relative; display: grid; grid-template-columns: 1fr 128px; min-height: 168px; background-color: var(--color-background-neutral-100); padding: var(--wrapper-padding); border-radius: var(--border-radius); overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; transition: background-color var(--transition-duration) ease-in-out; } .m-banner-contextual .wrapper { display: flex; flex-direction: column; justify-content: space-between; padding-right: var(--wrapper-padding); } .m-banner-contextual .content { display: flex; flex-direction: column; gap: 4px; } .m-banner-contextual p { font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); } .m-banner-contextual .link { font-size: var(--typography-body-md-accent-fontSize); font-weight: var(--typography-body-md-accent-fontWeight); line-height: var(--typography-body-md-accent-lineHeight); letter-spacing: var(--typography-body-md-accent-letterSpacing); display: inline-flex; align-items: center; gap: 8px; } .m-banner-contextual .link span { text-decoration: underline; text-underline-offset: 2px; } .m-banner-contextual .link .icon svg { display: flex; align-items: center; transition: transform 0.2s ease-out; } .m-banner-contextual .image { position: absolute; right: -1px; bottom: 40px; width: 128px; height: 128px; } .m-banner-contextual .image img { width: 100%; height: 100%; object-fit: cover; } .m-banner-contextual[data-pressed=true] { background-color: var(--color-background-neutral-pressed-100); } .m-banner-contextual[data-pressed=true] .link[data-animated=true] .icon svg { transform: translateX(4px); } /*!****************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/basics/title/title.module.scss ***! \****************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .b-title { position: relative; } /*!**************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/basics/icon/icon.module.scss ***! \**************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .b-icon { display: flex; align-items: center; justify-content: center; line-height: 0; } /*!*****************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/modules/card-custom/card-custom.module.scss ***! \*****************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-card-custom { display: block; text-align: center; padding: 8px; background-color: var(--color-background-neutral-100); border-radius: var(--border-radius); text-decoration: none; color: var(--color-fill-text-primary-100); transition: all var(--transition-duration) ease-in-out; } .m-card-custom img { width: 100%; height: auto; } .m-card-custom h3 { font-size: var(--typography-body-md-bold-fontSize); font-weight: var(--typography-body-md-bold-fontWeight); line-height: var(--typography-body-md-bold-lineHeight); letter-spacing: var(--typography-body-md-bold-letterSpacing); padding-top: 8px; margin-bottom: 4px; } .m-card-custom p { font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); } .m-card-custom[data-pressed=true] { background-color: var(--color-background-neutral-pressed-100); } /*!***************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/modules/card-custom-grid/card-custom-grid.module.scss ***! \***************************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-card-custom-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } /*!*******************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/modules/card-product/card-product.module.scss ***! \*******************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-card-product { display: grid; grid-template-columns: 100px 1fr 36px; text-decoration: none; color: inherit; background: var(--color-background-neutral-400); border-radius: var(--border-radius); font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); transition: all var(--transition-duration) ease-in-out; } .m-card-product .image { width: 100%; } .m-card-product .image img { width: 100%; height: 100%; object-fit: cover; } .m-card-product .content { display: flex; flex-direction: column; gap: 4px; padding-top: var(--wrapper-padding); padding-left: var(--wrapper-padding); } .m-card-product .description { font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); } .m-card-product .icon { display: flex; align-items: start; justify-content: center; padding-top: 8px; } .m-card-product[data-pressed=true] { background-color: var(--color-background-neutral-pressed-300); } /*!******************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/basics/button/button.module.scss ***! \******************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .b-button { display: block; text-decoration: none; color: var(--color-fill-text-neutral-100); background-color: var(--color-background-primary-100); padding: 12px 16px; border-radius: 4px; transition: all 0.2s ease-in-out; text-align: center; font-size: var(--typography-body-md-accent-fontSize); font-weight: var(--typography-body-md-accent-fontWeight); line-height: var(--typography-body-md-accent-lineHeight); letter-spacing: var(--typography-body-md-accent-letterSpacing); } .b-button[data-pressed=true] { background-color: var(--color-background-primary-pressed-100); } /*!*******************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/modules/card-product-highlighted/card-product-highlighted.module.scss ***! \*******************************************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-card-product-highlighted { position: relative; min-height: 272px; height: fit-content; border-radius: var(--border-radius); background: var(--color-background-neutral-400); padding: var(--wrapper-padding); overflow: hidden; } .m-card-product-highlighted .content { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; height: 100%; padding-bottom: 80px; } .m-card-product-highlighted .text { display: flex; flex-direction: column; gap: 16px; } .m-card-product-highlighted .description { font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); max-width: 180px; } .m-card-product-highlighted .actions { position: absolute; left: var(--wrapper-padding); right: var(--wrapper-padding); bottom: var(--wrapper-padding); width: calc(100% - var(--wrapper-padding) * 2); z-index: 1; } .m-card-product-highlighted .image { position: absolute; right: 0; bottom: 36px; width: 128px; pointer-events: none; } .m-card-product-highlighted .image img { width: 100%; height: 100%; object-fit: cover; } /*!**************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/basics/link/link.module.scss ***! \**************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .b-link { font-size: var(--typography-body-md-accent-fontSize); font-weight: var(--typography-body-md-accent-fontWeight); line-height: var(--typography-body-md-accent-lineHeight); letter-spacing: var(--typography-body-md-accent-letterSpacing); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; } .b-link .icon svg { display: flex; align-items: center; } .b-link span { text-decoration: underline; text-underline-offset: 2px; } .b-link[data-animated=true] .icon svg { transition: transform 0.2s ease-out; } .b-link[data-animated=true][data-pressed=true] .icon svg { transform: translateX(4px); } @keyframes iconBounce { 0% { transform: translateX(0); } 25% { transform: translateX(4px); } 50% { transform: translateX(-2px); } 75% { transform: translateX(1px); } 100% { transform: translateX(0); } } /*!*****************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/modules/header-navigation/header-navigation.module.scss ***! \*****************************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-header-navigation { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-inline: 16px; } .m-header-navigation .icon { margin-left: -4px; } /*!***********************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/modules/header-section/header-section.module.scss ***! \***********************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-header-section { text-align: center; padding-top: 8px; text-align: left; } /*!****************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/components/icon-card/icon-card.module.scss ***! \****************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .c-icon-card { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100px; padding: 12px 8px; border-radius: var(--border-radius); background-color: var(--color-background-neutral-100); color: var(--color-fill-text-primary-100); text-decoration: none; font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); transition: all var(--transition-duration) ease-in-out; } .c-icon-card span { text-align: center; padding-top: 4px; } .c-icon-card[data-pressed=true] { background-color: var(--color-background-neutral-pressed-300); } /*!***********************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/modules/icon-card-grid/icon-card-grid.module.scss ***! \***********************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-icon-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /*!*******************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/skeletons/banner-contextual/banner-contextual.module.scss ***! \*******************************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-banner-contextual-skeleton { position: relative; display: grid; grid-template-columns: 1fr 128px; min-height: 168px; background-color: var(--color-background-neutral-100); padding: var(--wrapper-padding); border-radius: var(--border-radius); overflow: hidden; } .m-banner-contextual-skeleton .wrapper { display: flex; flex-direction: column; justify-content: space-between; padding-right: var(--wrapper-padding); } .m-banner-contextual-skeleton .content { display: flex; flex-direction: column; gap: 4px; } .m-banner-contextual-skeleton .b-title { font-size: var(--typography-body-lg-accent-fontSize); font-weight: var(--typography-body-lg-accent-fontWeight); line-height: var(--typography-body-lg-accent-lineHeight); letter-spacing: var(--typography-body-lg-accent-letterSpacing); position: relative; overflow: hidden; background-color: var(--color-background-neutral-400); height: 1em; } .m-banner-contextual-skeleton .b-title::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } .m-banner-contextual-skeleton p span { font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); position: relative; overflow: hidden; display: block; background-color: var(--color-background-neutral-100); } .m-banner-contextual-skeleton p span::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } .m-banner-contextual-skeleton .image { position: absolute; right: var(--wrapper-padding); bottom: var(--wrapper-padding); width: 128px; height: 128px; } .m-banner-contextual-skeleton .image .b-image { position: relative; overflow: hidden; position: absolute; bottom: 0; right: 0; width: 100%; height: 80%; border-radius: 50%; background-color: var(--color-background-neutral-100); } .m-banner-contextual-skeleton .image .b-image::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } .m-banner-contextual-skeleton .b-link { font-size: var(--typography-body-md-accent-fontSize); font-weight: var(--typography-body-md-accent-fontWeight); line-height: var(--typography-body-md-accent-lineHeight); letter-spacing: var(--typography-body-md-accent-letterSpacing); position: relative; overflow: hidden; background-color: var(--color-background-neutral-400); height: 1em; } .m-banner-contextual-skeleton .b-link::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } /*!*****************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/skeletons/card-custom-grid/card-custom-grid.module.scss ***! \*****************************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-card-custom-grid-skeleton { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .m-card-custom-grid-skeleton .card { height: 258px; width: 100%; padding: 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: var(--color-background-neutral-100); border-radius: var(--border-radius); } .m-card-custom-grid-skeleton .card .image { width: 70%; height: 148px; padding-top: 16px; padding-bottom: 40px; } .m-card-custom-grid-skeleton .card .image .b-image { position: relative; overflow: hidden; width: 100%; height: 100%; border-radius: 50%; background-color: var(--color-background-neutral-100); } .m-card-custom-grid-skeleton .card .image .b-image::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } .m-card-custom-grid-skeleton .card .b-title { font-size: var(--typography-body-lg-accent-fontSize); font-weight: var(--typography-body-lg-accent-fontWeight); line-height: var(--typography-body-lg-accent-lineHeight); letter-spacing: var(--typography-body-lg-accent-letterSpacing); position: relative; overflow: hidden; width: 60%; height: 1em; background-color: var(--color-background-neutral-400); } .m-card-custom-grid-skeleton .card .b-title::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } .m-card-custom-grid-skeleton .card p { width: 100%; margin-top: 16px; display: flex; justify-content: center; align-items: center; } .m-card-custom-grid-skeleton .card p span { position: relative; overflow: hidden; display: block; height: 1em; margin-top: 4px; background-color: var(--color-background-neutral-100); } .m-card-custom-grid-skeleton .card p span::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } /*!*********************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/skeletons/card-product/card-product.module.scss ***! \*********************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-card-product-skeleton { position: relative; padding: var(--wrapper-padding); display: grid; grid-template-columns: 100px 1fr 36px; text-decoration: none; color: inherit; background: var(--color-background-neutral-400); border-radius: var(--border-radius); font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); } .m-card-product-skeleton .image { position: relative; width: 80px; height: 80px; } .m-card-product-skeleton .image .b-image { position: relative; overflow: hidden; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 50%; background-color: var(--color-background-neutral-400); } .m-card-product-skeleton .image .b-image::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } .m-card-product-skeleton .content { display: flex; flex-direction: column; gap: 4px; padding-top: var(--wrapper-padding); padding-left: var(--wrapper-padding); } .m-card-product-skeleton .b-title { font-size: var(--typography-body-lg-accent-fontSize); font-weight: var(--typography-body-lg-accent-fontWeight); line-height: var(--typography-body-lg-accent-lineHeight); letter-spacing: var(--typography-body-lg-accent-letterSpacing); position: relative; overflow: hidden; background-color: var(--color-background-neutral-400); height: 1em; } .m-card-product-skeleton .b-title::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } .m-card-product-skeleton .description { font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); margin-top: 1em; } .m-card-product-skeleton .description span { font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); position: relative; overflow: hidden; display: block; background-color: var(--color-background-neutral-400); } .m-card-product-skeleton .description span::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } .m-card-product-skeleton .icon { display: block; position: absolute; top: 8px; right: 8px; z-index: 1; } .m-card-product-skeleton .icon .b-icon { position: relative; overflow: hidden; width: 36px; height: 36px; border-radius: 50%; background-color: var(--color-background-neutral-400); } .m-card-product-skeleton .icon .b-icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } /*!*********************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/skeletons/card-product-highlighted/card-product-highlighted.module.scss ***! \*********************************************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-card-product-highlighted-skeleton { position: relative; min-height: 272px; height: fit-content; border-radius: var(--border-radius); background: var(--color-background-neutral-400); padding: var(--wrapper-padding); overflow: hidden; } .m-card-product-highlighted-skeleton .content { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; height: 100%; padding-bottom: 80px; } .m-card-product-highlighted-skeleton .b-title { font-size: var(--typography-headline-sm-accent-fontSize); font-weight: var(--typography-headline-sm-accent-fontWeight); line-height: var(--typography-headline-sm-accent-lineHeight); letter-spacing: var(--typography-headline-sm-accent-letterSpacing); position: relative; overflow: hidden; background-color: var(--color-background-neutral-400); height: 1em; } .m-card-product-highlighted-skeleton .b-title::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } .m-card-product-highlighted-skeleton .text { display: flex; flex-direction: column; gap: 16px; } .m-card-product-highlighted-skeleton .description { font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); max-width: 180px; } .m-card-product-highlighted-skeleton .description span { font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); position: relative; overflow: hidden; display: block; background-color: var(--color-background-neutral-400); } .m-card-product-highlighted-skeleton .description span::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } .m-card-product-highlighted-skeleton .actions { position: absolute; left: var(--wrapper-padding); right: var(--wrapper-padding); bottom: var(--wrapper-padding); width: calc(100% - var(--wrapper-padding) * 2); height: 48px; z-index: 1; } .m-card-product-highlighted-skeleton .actions .b-button { position: relative; overflow: hidden; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background-color: var(--color-background-neutral-400); } .m-card-product-highlighted-skeleton .actions .b-button::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } .m-card-product-highlighted-skeleton .image { position: absolute; right: 0; bottom: 36px; transform: translateY(-25%); width: 128px; height: 128px; pointer-events: none; } .m-card-product-highlighted-skeleton .image .b-image { position: relative; overflow: hidden; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 50%; background-color: var(--color-background-neutral-400); } .m-card-product-highlighted-skeleton .image .b-image::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } /*!*******************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/skeletons/card-custom/card-custom.module.scss ***! \*******************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-card-custom { display: block; text-align: center; padding: 8px; background-color: var(--color-background-neutral-100); border-radius: var(--border-radius); text-decoration: none; color: var(--color-fill-text-primary-100); } .m-card-custom img { width: 100%; height: auto; } .m-card-custom h3 { font-size: var(--typography-body-md-bold-fontSize); font-weight: var(--typography-body-md-bold-fontWeight); line-height: var(--typography-body-md-bold-lineHeight); letter-spacing: var(--typography-body-md-bold-letterSpacing); padding-top: 8px; margin-bottom: 4px; } .m-card-custom p { font-size: var(--typography-body-sm-fontSize); font-weight: var(--typography-body-sm-fontWeight); line-height: var(--typography-body-sm-lineHeight); letter-spacing: var(--typography-body-sm-letterSpacing); } /*!*******************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/skeletons/header-navigation/header-navigation.module.scss ***! \*******************************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-header-navigation { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-inline: 16px; } .m-header-navigation .icon { margin-left: -4px; } /*!*************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/skeletons/header-section/header-section.module.scss ***! \*************************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-header-section-skeleton { text-align: center; padding-block: 8px; text-align: left; } .m-header-section-skeleton .b-title { font-size: var(--typography-headline-sm-accent-fontSize); font-weight: var(--typography-headline-sm-accent-fontWeight); line-height: var(--typography-headline-sm-accent-lineHeight); letter-spacing: var(--typography-headline-sm-accent-letterSpacing); background-color: var(--color-background-neutral-400); position: relative; overflow: hidden; height: 1em; } .m-header-section-skeleton .b-title::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } /*!*************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/skeletons/icon-card-grid/icon-card-grid.module.scss ***! \*************************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .m-icon-card-grid-skeleton { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .m-icon-card-grid-skeleton .card { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100px; padding: 12px 8px; border-radius: var(--border-radius); background-color: var(--color-background-neutral-100); color: var(--color-fill-text-primary-100); text-decoration: none; } .m-icon-card-grid-skeleton .card .b-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; line-height: 0; border-radius: 50%; position: relative; overflow: hidden; background-color: var(--color-background-neutral-100); } .m-icon-card-grid-skeleton .card .b-icon::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } .m-icon-card-grid-skeleton .card p { display: flex; justify-content: center; align-items: center; width: 100%; } .m-icon-card-grid-skeleton .card p span { display: block; position: relative; overflow: hidden; background-color: var(--color-background-neutral-100); height: 1em; margin-top: 4px; } .m-icon-card-grid-skeleton .card p span::before { content: ""; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; display: block; background: linear-gradient(270deg, rgba(217, 217, 217, 0) 0%, rgba(217, 217, 217, 0.5) 20%, rgba(217, 217, 217, 0) 40%, rgba(217, 217, 217, 0) 60%, rgba(217, 217, 217, 0.5) 80%, rgba(217, 217, 217, 0) 100%); background-size: 240px; background-repeat: no-repeat; animation: skeleton-shine 1s alternate infinite; } /*!************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/templates/content.module.scss ***! \************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } [data-level] { height: 100vh; height: 100dvh; } [data-level] .header { position: absolute; width: 100%; z-index: 1; padding-top: env(safe-area-inset-top, 40px); height: calc(var(--header-height) + env(safe-area-inset-top, 40px)); } [data-level] .main { position: relative; overflow-y: auto; scroll-behavior: smooth; height: 100%; padding: calc(var(--header-height) + env(safe-area-inset-top, 40px)) var(--wrapper-padding) 0; } [data-level] .main > * { margin-bottom: 24px; } [data-level] .main > *:last-child { margin-bottom: 32px; } [data-level=primary] .header { background-color: var(--color-overlay-neutral-400); } [data-level=primary] .main { background-color: var(--color-background-neutral-400); } [data-level=secondary] .header { background-color: var(--color-overlay-neutral-100); } [data-level=secondary] .main { background-color: var(--color-background-neutral-100); } [data-level=secondary] .main > * { margin-bottom: 16px; } /*!**************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/ui/modules/ObservedSection/observed-section.module.scss ***! \**************************************************************************************************************************************************************************************************************/ @keyframes skeleton-shine { from { background-position: 0% 0; } to { background-position: 100% 0; } } .c-observed-section { position: relative; opacity: 0.5; transform: scale(0.9); transition: all 0.5s ease-out; } .c-observed-section[data-active=true] { opacity: 1; transform: scale(1); } /*# sourceMappingURL=hanzo-lacaixa-single-spa.css.map*/