/* Typography (heading) */ @font-face { font-family: Catamaran; font-weight: 400; font-style: normal; font-display: fallback; /*src: url("http://fonts.shopifycdn.com/catamaran/catamaran_n4.e84045be8cd3d4914a3d5046417b639b53601e03.woff2?h1=b3JpY28tdGVjaC5hY2NvdW50Lm15c2hvcGlmeS5jb20&h2=b3JpY290ZWNocy5jb20&hmac=b9921c11996e4f9eede5918a182241110a56dcbf078ce2daaf83a48552bff956") format("woff2"), url("https://fonts.shopifycdn.com/catamaran/catamaran_n4.5365680d338b8fc183023a5abb3d544296988f08.woff?h1=b3JpY28tdGVjaC5hY2NvdW50Lm15c2hvcGlmeS5jb20&h2=b3JpY290ZWNocy5jb20&hmac=e2e16a4f64b836a36ff148461f177af513ce9732e20c9e906599c9a60e007baf") format("woff");*/ } /* Typography (body) */ @font-face { font-family: Catamaran; font-weight: 400; font-style: normal; font-display: fallback; /*src: url("http://fonts.shopifycdn.com/catamaran/catamaran_n4.e84045be8cd3d4914a3d5046417b639b53601e03.woff2?h1=b3JpY28tdGVjaC5hY2NvdW50Lm15c2hvcGlmeS5jb20&h2=b3JpY290ZWNocy5jb20&hmac=b9921c11996e4f9eede5918a182241110a56dcbf078ce2daaf83a48552bff956") format("woff2"), url("https://fonts.shopifycdn.com/catamaran/catamaran_n4.5365680d338b8fc183023a5abb3d544296988f08.woff?h1=b3JpY28tdGVjaC5hY2NvdW50Lm15c2hvcGlmeS5jb20&h2=b3JpY290ZWNocy5jb20&hmac=e2e16a4f64b836a36ff148461f177af513ce9732e20c9e906599c9a60e007baf") format("woff");*/ */ } @font-face { font-family: Catamaran; font-weight: 700; font-style: normal; font-display: fallback; /*src: url("http://fonts.shopifycdn.com/catamaran/catamaran_n7.833cefb687fff43803eb5258b2a69a908a79f6b3.woff2?h1=b3JpY28tdGVjaC5hY2NvdW50Lm15c2hvcGlmeS5jb20&h2=b3JpY290ZWNocy5jb20&hmac=28665271197fa9f0e9430f2987369c2cd8166ab4c4f556b3679d99e4e172a163") format("woff2"), url("https://fonts.shopifycdn.com/catamaran/catamaran_n7.61e26a080765a04cf6b3c3cb52334da048528798.woff?h1=b3JpY28tdGVjaC5hY2NvdW50Lm15c2hvcGlmeS5jb20&h2=b3JpY290ZWNocy5jb20&hmac=222a61d7f99d8c6be2e82f132194c1b149642efc06c494b752e7d38269ab80f5") format("woff"); */ } :root { /** * --------------------------------------------------------------------- * SPACING VARIABLES * * We are using a spacing inspired from frameworks like Tailwind CSS. * --------------------------------------------------------------------- */ --spacing-0-5: 0.125rem; /* 2px */ /*! --spacing-1: 0.25rem; */ /* 4px */ --spacing-1-5: 0.375rem; /* 6px */ --spacing-2: 0.5rem; /* 8px */ --spacing-2-5: 0.625rem; /* 10px */ --spacing-3: 0.75rem; /* 12px */ --spacing-3-5: 0.875rem; /* 14px */ --spacing-4: 1rem; /* 16px */ --spacing-4-5: 1.125rem; /* 18px */ --spacing-5: 1.25rem; /* 20px */ --spacing-5-5: 1.375rem; /* 22px */ --spacing-6: 1.5rem; /* 24px */ --spacing-6-5: 1.625rem; /* 26px */ --spacing-7: 1.75rem; /* 28px */ --spacing-7-5: 1.875rem; /* 30px */ --spacing-8: 2rem; /* 32px */ --spacing-8-5: 2.125rem; /* 34px */ --spacing-9: 2.25rem; /* 36px */ --spacing-9-5: 2.375rem; /* 38px */ --spacing-10: 2.5rem; /* 40px */ --spacing-11: 2.75rem; /* 44px */ --spacing-12: 3rem; /* 48px */ --spacing-14: 3.5rem; /* 56px */ --spacing-16: 4rem; /* 64px */ --spacing-18: 4.5rem; /* 72px */ --spacing-20: 5rem; /* 80px */ --spacing-24: 6rem; /* 96px */ --spacing-28: 7rem; /* 112px */ --spacing-32: 8rem; /* 128px */ --spacing-36: 9rem; /* 144px */ --spacing-40: 10rem; /* 160px */ --spacing-44: 11rem; /* 176px */ --spacing-48: 12rem; /* 192px */ --spacing-52: 13rem; /* 208px */ --spacing-56: 14rem; /* 224px */ --spacing-60: 15rem; /* 240px */ --spacing-64: 16rem; /* 256px */ --spacing-72: 18rem; /* 288px */ --spacing-80: 20rem; /* 320px */ --spacing-96: 24rem; /* 384px */ /* Container */ --container-max-width: 1300px; --container-narrow-max-width: 1050px; --container-gutter: var(--spacing-5); --section-outer-spacing-block: var(--spacing-14); --section-inner-max-spacing-block: var(--spacing-12); --section-inner-spacing-inline: var(--container-gutter); --section-stack-spacing-block: var(--spacing-10); /* Grid gutter */ --grid-gutter: var(--spacing-5); /* Product list settings */ --product-list-row-gap: var(--spacing-8); --product-list-column-gap: var(--grid-gutter); /* Form settings */ --input-gap: var(--spacing-2); --input-height: 2.625rem; --input-padding-inline: var(--spacing-4); /* Other sizes */ --sticky-area-height: calc(var(--sticky-announcement-bar-enabled, 0) * var(--announcement-bar-height, 0px) + var(--sticky-header-enabled, 0) * var(--header-height, 0px)); /* RTL support */ --transform-logical-flip: 1; --transform-origin-start: left; --transform-origin-end: right; /** * --------------------------------------------------------------------- * TYPOGRAPHY * --------------------------------------------------------------------- */ /* Font properties */ --heading-font-family: Catamaran, serif; --heading-font-weight: 400; --heading-font-style: normal; --heading-text-transform: normal; --heading-letter-spacing: -0.02em; --text-font-family: Catamaran, serif; --text-font-weight: 400; --text-font-style: normal; --text-letter-spacing: 0.0em; /* Font sizes */ --text-h0: 2.75rem; --text-h1: 2rem; --text-h2: 1.75rem; --text-h3: 1.375rem; --text-h4: 1.125rem; --text-h5: 1.125rem; --text-h6: 1rem; --text-xs: 0.6875rem; --text-sm: 0.75rem; --text-base: 0.875rem; --text-lg: 1.125rem; /** * --------------------------------------------------------------------- * COLORS * --------------------------------------------------------------------- */ /* Color settings */ --accent: 230 230 233; --text-primary: 26 26 26; --background-primary: 242 242 242; --dialog-background: 255 255 255; --border-color: var(--text-color, var(--text-primary)) / 0.12; /* Button colors */ --button-background-primary: 230 230 233; --button-text-primary: 0 75 250; --button-background-secondary: 0 75 250; --button-text-secondary: 255 255 255; /* Status colors */ --success-background: 224 233 254; --success-text: 0 75 250; --warning-background: 254 237 231; --warning-text: 248 103 52; --error-background: 254 231 231; --error-text: 248 58 58; /* Product colors */ --on-sale-text: 248 103 52; --on-sale-badge-background: 248 103 52; --on-sale-badge-text: 255 255 255; --sold-out-badge-background: 0 0 0; --sold-out-badge-text: 255 255 255; --primary-badge-background: 128 60 238; --primary-badge-text: 255 255 255; --star-color: 255 183 74; --product-card-background: 255 255 255; --product-card-text: 26 26 26; /* Header colors */ --header-background: 252 252 255; --header-text: 26 26 26; /* Footer colors */ --footer-background: 0 0 0; --footer-text: 255 255 255; /* Rounded variables (used for border radius) */ --rounded-xs: 0.25rem; --rounded-sm: 0.375rem; --rounded: 0.75rem; --rounded-lg: 1.5rem; --rounded-full: 9999px; --rounded-button: 3.75rem; --rounded-input: 0.5rem; /* Box shadow */ --shadow-sm: 0 2px 8px rgb(var(--text-primary) / 0.1); --shadow: 0 5px 15px rgb(var(--text-primary) / 0.1); --shadow-md: 0 5px 30px rgb(var(--text-primary) / 0.1); --shadow-block: 2px 18px 50px rgb(var(--text-primary) / 0.1); /** * --------------------------------------------------------------------- * OTHER * --------------------------------------------------------------------- */ /* --cursor-close-svg-url: url(//cdn.shopifycdn.net/s/files/1/0745/7911/6332/t/15/assets/cursor-close.svg?v=147174565022153725511684750000); --cursor-zoom-in-svg-url: url(//cdn.shopifycdn.net/s/files/1/0745/7911/6332/t/15/assets/cursor-zoom-in.svg?v=154953035094101115921684750000); --cursor-zoom-out-svg-url: url(//cdn.shopifycdn.net/s/files/1/0745/7911/6332/t/15/assets/cursor-zoom-out.svg?v=16155520337305705181684750000); --checkmark-svg-url: url(//cdn.shopifycdn.net/s/files/1/0745/7911/6332/t/15/assets/checkmark.svg?v=142580986663813899141685501699);*/ } [dir="rtl"]:root { /* RTL support */ --transform-logical-flip: -1; --transform-origin-start: right; --transform-origin-end: left; } @media screen and (min-width: 700px) { :root { /* Typography (font size) */ --text-h0: 3.5rem; --text-h1: 2.5rem; --text-h2: 2rem; --text-h3: 1.625rem; --text-h4: 1.375rem; --text-h5: 1.125rem; --text-h6: 1rem; --text-xs: 0.6875rem; --text-sm: 0.75rem; --text-base: 0.875rem; --text-lg: 1.125rem; /* Spacing */ --container-gutter: 2rem; --section-outer-spacing-block: var(--spacing-20); --section-inner-max-spacing-block: var(--spacing-14); --section-inner-spacing-inline: var(--spacing-14); --section-stack-spacing-block: var(--spacing-12); /* Grid gutter */ --grid-gutter: var(--spacing-6); /* Product list settings */ --product-list-row-gap: var(--spacing-12); /* Form settings */ --input-gap: 1rem; --input-height: 3.125rem; --input-padding-inline: var(--spacing-5); } } @media screen and (min-width: 1000px) { :root { /* Spacing settings */ --container-gutter: var(--spacing-12); --section-outer-spacing-block: var(--spacing-20); --section-inner-max-spacing-block: var(--spacing-18); --section-inner-spacing-inline: var(--spacing-18); --section-stack-spacing-block: var(--spacing-12); } } @media screen and (min-width: 1150px) { :root { /* Spacing settings */ --container-gutter: var(--spacing-12); --section-outer-spacing-block: var(--spacing-24); --section-inner-max-spacing-block: var(--spacing-18); --section-inner-spacing-inline: var(--spacing-18); --section-stack-spacing-block: var(--spacing-12); } } @media screen and (min-width: 1400px) { :root { /* Typography (font size) */ --text-h0: 4.5rem; --text-h1: 3.5rem; --text-h2: 2.75rem; --text-h3: 2rem; --text-h4: 1.75rem; --text-h5: 1.375rem; --text-h6: 1.25rem; --section-outer-spacing-block: var(--spacing-28); --section-inner-max-spacing-block: var(--spacing-20); --section-inner-spacing-inline: var(--spacing-20); } } @media screen and (min-width: 1600px) { :root { --section-outer-spacing-block: var(--spacing-32); --section-inner-max-spacing-block: var(--spacing-24); --section-inner-spacing-inline: var(--spacing-24); } } @media screen and (min-width: 1150px) { .justify-center { justify-content: safe center; } .rich-text { display: flex; } .rich-text__wrapper { max-width: var(--rich-text-max-width); } .rich-text .prose, .split-rich-text .prose { align-items: start; display: grid; } .justify-items-center { justify-items: safe center; } .text-center { text-align: center; } .prose > :first-child, .prose > :first-child :first-child { margin-block-start: 0 !important; } .hyphenate { -webkit-hyphens: auto; hyphens: auto; } .h1, .prose h1:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) { font-size: var(--text-h1); line-height: 1.1; } @media screen and (min-width: 1150px) { .prose :is(.h0, .h1, .h2, h1, h2) + * { margin-block-start: var(--spacing-8); } } *, ::before, ::after { box-sizing: border-box; border-style: solid; border-width: 0; border-color: rgb(var(--text-color) / .12); } .section { --context-section-spacing-block-start: var(--section-outer-spacing-block); --context-section-spacing-block-end: var(--section-outer-spacing-block); --context-section-spacing-inline: var(--container-gutter); --calculated-section-spacing-block-start: var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start))); --calculated-section-spacing-block-end: var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end))); --calculated-section-spacing-inline: var(--section-spacing-inline, var(--context-section-spacing-inline)); --container-inner-width: min((100vw - var(--scrollbar-width, 0px)) - var(--calculated-section-spacing-inline, 0px) * 2, var(--container-max-width)); --container-outer-width: calc(((100vw - var(--scrollbar-width, 0px)) - var(--container-inner-width, 0px)) / 2); --section-stack-spacing-inline: var(--section-inner-spacing-inline, 0px); padding-inline-start: max(var(--calculated-section-spacing-inline),50% - var(--container-max-width) / 2); padding-inline-end: max(var(--calculated-section-spacing-inline),50% - var(--container-max-width) / 2); } .prose > :last-child, .prose > :last-child :last-child { margin-block-end: 0 !important; } .prose > :last-child, .prose > :last-child :last-child { margin-block-end: 0 !important; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } .heading, .h0, .h1, .h2, .h3, .h4, .h5, .h6, .prose :is(h1, h2, h3, h4, h5, h6) { font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-style: var(--heading-font-style); letter-spacing: var(--heading-letter-spacing); text-transform: var(--heading-text-transform); overflow-wrap: anywhere; } .section-stack { gap: var(--section-stack-spacing-block, 0px) var(--section-stack-spacing-inline, 0px); grid-auto-columns: minmax(0,1fr); display: grid; } .shadow { filter: drop-shadow(var(--shadow)); } @media screen and (min-width: 700px) { .before-after { --before-after-label-spacing: var(--spacing-8); } .before-after__cursor svg { width: var(--spacing-10); height: var(--spacing-10); } .prose :is(.h0, .h1, .h2, .h3, h1, h2, h3) + * { margin-block-start: var(--spacing-6); } } .before-after__label--bottom { bottom: var(--before-after-label-spacing); } .before-after__label { position: absolute; } .before-after__cursor { top: 50%; } .before-after__cursor:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) { left: var(--before-after-initial-drag-position, 0px); } .before-after__cursor:active { cursor: grabbing; } .before-after__cursor { cursor: grab; } .before-after__cursor { height: 100%; width: max-content; touch-action: none; transform: translate(calc(var(--transform-logical-flip) * -50% + var(--clip-path-offset, 0px)),-50%); cursor: grab; filter: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f); will-change: transform; place-items: center; display: grid; position: relative; } .text-custom { color: rgb(var(--text-color)); } img, video, iframe, object { vertical-align: middle; display: block; }