423 lines
18 KiB
CSS
Executable File
423 lines
18 KiB
CSS
Executable File
|
|
/* 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;
|
|
}
|