/* CUSTOM BRAND FONTS */ @font-face { font-family: 'Dotties-Vanilla'; src: url('/assets/DottiesVanilla-Regular.woff2') format('woff2'), url('/assets/DottiesVanilla-Regular.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Dotties-Vanilla-Bold'; src: url('/assets/DottiesVanilla-Bold.woff2') format('woff2'), url('/assets/DottiesVanilla-Bold.woff') format('woff'); font-weight: 700; font-style: normal; } /* END CUSTOM BRAND FONTS */ @font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/bricolagegrotesque_n7.de5675dd7a8e145fdc4cb2cfe67a16cb085528d0.woff2") format("woff2"), url("/assets/bricolagegrotesque_n7.d701b766b46c76aceb10c78473f491dff9b09e5e.woff") format("woff"); } @font-face { font-family: Karla; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/karla_n4.40497e07df527e6a50e58fb17ef1950c72f3e32c.woff2") format("woff2"), url("/assets/karla_n4.e9f6f9de321061073c6bfe03c28976ba8ce6ee18.woff") format("woff"); } @font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/bricolagegrotesque_n7.de5675dd7a8e145fdc4cb2cfe67a16cb085528d0.woff2") format("woff2"), url("/assets/bricolagegrotesque_n7.d701b766b46c76aceb10c78473f491dff9b09e5e.woff") format("woff"); } @font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/bricolagegrotesque_n7.de5675dd7a8e145fdc4cb2cfe67a16cb085528d0.woff2") format("woff2"), url("/assets/bricolagegrotesque_n7.d701b766b46c76aceb10c78473f491dff9b09e5e.woff") format("woff"); } @font-face { font-family: Karla; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/karla_n7.4358a847d4875593d69cfc3f8cc0b44c17b3ed03.woff2") format("woff2"), url("/assets/karla_n7.96e322f6d76ce794f25fa29e55d6997c3fb656b6.woff") format("woff"); } @font-face { font-family: Karla; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/karla_n5.0f2c50ba88af8c39d2756f2fc9dfccf18f808828.woff2") format("woff2"), url("/assets/karla_n5.88d3e57f788ee4a41fa11fc99b9881ce077acdc2.woff") format("woff"); } @font-face { font-family: Karla; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/karla_i4.2086039c16bcc3a78a72a2f7b471e3c4a7f873a6.woff2") format("woff2"), url("/assets/karla_i4.7b9f59841a5960c16fa2a897a0716c8ebb183221.woff") format("woff"); } @font-face { font-family: Karla; font-weight: 500; font-style: italic; font-display: swap; src: url("/assets/karla_i5.69e240d3e2697b7653a56061e6c0bdd837d9a0d7.woff2") format("woff2"), url("/assets/karla_i5.d56a3f6d57505f4753ea6466cf86322680d9dfdf.woff") format("woff"); } @font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-style: normal; font-display: swap; src: url("/assets/bricolagegrotesque_n8.6b4643248f6cafd49733d179ce363f756812293c.woff2") format("woff2"), url("/assets/bricolagegrotesque_n8.6870e61ca4ac6456cdb292e6bd2fa689ac537968.woff") format("woff"); } :root, .color-scheme-1 {--COLOR-BG-GRADIENT: #f9f2e8; --COLOR-BG: #f9f2e8; --COLOR-BG-RGB: 249, 242, 232; --COLOR-BG-ACCENT: #f9f2e8; --COLOR-BG-ACCENT-LIGHTEN: #ffffff; /* === Link Color ===*/ --COLOR-LINK: #003049; --COLOR-LINK-A50: rgba(0, 48, 73, 0.5); --COLOR-LINK-A70: rgba(0, 48, 73, 0.7); --COLOR-LINK-HOVER: rgba(0, 48, 73, 0.7); --COLOR-LINK-OPPOSITE: #ffffff; --COLOR-TEXT: #000000; --COLOR-TEXT-HOVER: rgba(0, 0, 0, 0.7); --COLOR-TEXT-LIGHT: #4b4946; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(0, 0, 0, 0.05); --COLOR-TEXT-A35: rgba(0, 0, 0, 0.35); --COLOR-TEXT-A50: rgba(0, 0, 0, 0.5); --COLOR-TEXT-A80: rgba(0, 0, 0, 0.8); --COLOR-BORDER: rgb(0, 48, 73); --COLOR-BORDER-LIGHT: #647e89; --COLOR-BORDER-DARK: #000000; --COLOR-BORDER-HAIRLINE: #f6ebdc; --overlay-bg: #00000021; /* === Bright color ===*/ --COLOR-ACCENT: #f26a24; --COLOR-ACCENT-HOVER: #c94501; --COLOR-ACCENT-FADE: rgba(242, 106, 36, 0.05); --COLOR-ACCENT-LIGHT: #ffcbb0; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #faa61a; --BTN-PRIMARY-TEXT: #003049; --BTN-PRIMARY-BORDER: #003049; --BTN-PRIMARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #f59b05; --BTN-SECONDARY-BG: #54b6e7; --BTN-SECONDARY-TEXT: #003049; --BTN-SECONDARY-BORDER: #003049; --BTN-SECONDARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #3eace4; --COLOR-BG-BRIGHTER: #f4e7d4; --COLOR-BG-ALPHA-25: rgba(249, 242, 232, 0.25); --COLOR-BG-TRANSPARENT: rgba(249, 242, 232, 0);--COLOR-FOOTER-BG-HAIRLINE: #f6ebdc; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-2 {--COLOR-BG-GRADIENT: #003049; --COLOR-BG: #003049; --COLOR-BG-RGB: 0, 48, 73; --COLOR-BG-ACCENT: #f2f3f3; --COLOR-BG-ACCENT-LIGHTEN: #ffffff; /* === Link Color ===*/ --COLOR-LINK: #bce5f2; --COLOR-LINK-A50: rgba(188, 229, 242, 0.5); --COLOR-LINK-A70: rgba(188, 229, 242, 0.7); --COLOR-LINK-HOVER: rgba(188, 229, 242, 0.7); --COLOR-LINK-OPPOSITE: #000000; --COLOR-TEXT: #f9f2e8; --COLOR-TEXT-HOVER: rgba(249, 242, 232, 0.7); --COLOR-TEXT-LIGHT: #aeb8b8; --COLOR-TEXT-DARK: #edd0a8; --COLOR-TEXT-A5: rgba(249, 242, 232, 0.05); --COLOR-TEXT-A35: rgba(249, 242, 232, 0.35); --COLOR-TEXT-A50: rgba(249, 242, 232, 0.5); --COLOR-TEXT-A80: rgba(249, 242, 232, 0.8); --COLOR-BORDER: rgb(250, 166, 26); --COLOR-BORDER-LIGHT: #96772d; --COLOR-BORDER-DARK: #aa6c04; --COLOR-BORDER-HAIRLINE: #00263a; --overlay-bg: #0030495e; /* === Bright color ===*/ --COLOR-ACCENT: #bce5f2; --COLOR-ACCENT-HOVER: #74d0ed; --COLOR-ACCENT-FADE: rgba(188, 229, 242, 0.05); --COLOR-ACCENT-LIGHT: #ffffff; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #54b6e7; --BTN-PRIMARY-TEXT: #000000; --BTN-PRIMARY-BORDER: #54b6e7; --BTN-PRIMARY-BORDER-A70: rgba(84, 182, 231, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #3eace4; --BTN-SECONDARY-BG: #f26a24; --BTN-SECONDARY-TEXT: #000000; --BTN-SECONDARY-BORDER: #f26a24; --BTN-SECONDARY-BORDER-A70: rgba(242, 106, 36, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #ee5a0e; --COLOR-BG-BRIGHTER: #004162; --COLOR-BG-ALPHA-25: rgba(0, 48, 73, 0.25); --COLOR-BG-TRANSPARENT: rgba(0, 48, 73, 0);--COLOR-FOOTER-BG-HAIRLINE: #003a58; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-3 {--COLOR-BG-GRADIENT: #63baaa; --COLOR-BG: #63baaa; --COLOR-BG-RGB: 99, 186, 170; --COLOR-BG-ACCENT: #f9f2e8; --COLOR-BG-ACCENT-LIGHTEN: #ffffff; /* === Link Color ===*/ --COLOR-LINK: #003049; --COLOR-LINK-A50: rgba(0, 48, 73, 0.5); --COLOR-LINK-A70: rgba(0, 48, 73, 0.7); --COLOR-LINK-HOVER: rgba(0, 48, 73, 0.7); --COLOR-LINK-OPPOSITE: #ffffff; --COLOR-TEXT: #003049; --COLOR-TEXT-HOVER: rgba(0, 48, 73, 0.7); --COLOR-TEXT-LIGHT: #1e5966; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(0, 48, 73, 0.05); --COLOR-TEXT-A35: rgba(0, 48, 73, 0.35); --COLOR-TEXT-A50: rgba(0, 48, 73, 0.5); --COLOR-TEXT-A80: rgba(0, 48, 73, 0.8); --COLOR-BORDER: rgb(0, 48, 73); --COLOR-BORDER-LIGHT: #286770; --COLOR-BORDER-DARK: #000000; --COLOR-BORDER-HAIRLINE: #58b5a4; --overlay-bg: #f2f3f3; /* === Bright color ===*/ --COLOR-ACCENT: #f9f2e8; --COLOR-ACCENT-HOVER: #edd0a8; --COLOR-ACCENT-FADE: rgba(249, 242, 232, 0.05); --COLOR-ACCENT-LIGHT: #ffffff; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #faa61a; --BTN-PRIMARY-TEXT: #003049; --BTN-PRIMARY-BORDER: #003049; --BTN-PRIMARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #f59b05; --BTN-SECONDARY-BG: #f26a24; --BTN-SECONDARY-TEXT: #003049; --BTN-SECONDARY-BORDER: #003049; --BTN-SECONDARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #ee5a0e; --COLOR-BG-BRIGHTER: #51b2a0; --COLOR-BG-ALPHA-25: rgba(99, 186, 170, 0.25); --COLOR-BG-TRANSPARENT: rgba(99, 186, 170, 0);--COLOR-FOOTER-BG-HAIRLINE: #58b5a4; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-4 {--COLOR-BG-GRADIENT: #f2f3f3; --COLOR-BG: #f2f3f3; --COLOR-BG-RGB: 242, 243, 243; --COLOR-BG-ACCENT: #003049; --COLOR-BG-ACCENT-LIGHTEN: #006296; /* === Link Color ===*/ --COLOR-LINK: #003049; --COLOR-LINK-A50: rgba(0, 48, 73, 0.5); --COLOR-LINK-A70: rgba(0, 48, 73, 0.7); --COLOR-LINK-HOVER: rgba(0, 48, 73, 0.7); --COLOR-LINK-OPPOSITE: #ffffff; --COLOR-TEXT: #000000; --COLOR-TEXT-HOVER: rgba(0, 0, 0, 0.7); --COLOR-TEXT-LIGHT: #494949; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(0, 0, 0, 0.05); --COLOR-TEXT-A35: rgba(0, 0, 0, 0.35); --COLOR-TEXT-A50: rgba(0, 0, 0, 0.5); --COLOR-TEXT-A80: rgba(0, 0, 0, 0.8); --COLOR-BORDER: rgb(0, 0, 0); --COLOR-BORDER-LIGHT: #616161; --COLOR-BORDER-DARK: #000000; --COLOR-BORDER-HAIRLINE: #eaecec; --overlay-bg: #fcfbf942; /* === Bright color ===*/ --COLOR-ACCENT: #faa61a; --COLOR-ACCENT-HOVER: #c87c00; --COLOR-ACCENT-FADE: rgba(250, 166, 26, 0.05); --COLOR-ACCENT-LIGHT: #ffe1ae; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #bce5f2; --BTN-PRIMARY-TEXT: #003049; --BTN-PRIMARY-BORDER: #003049; --BTN-PRIMARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #a7ddee; --BTN-SECONDARY-BG: #003049; --BTN-SECONDARY-TEXT: #f2f3f3; --BTN-SECONDARY-BORDER: #003049; --BTN-SECONDARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #004162; --COLOR-BG-BRIGHTER: #e5e7e7; --COLOR-BG-ALPHA-25: rgba(242, 243, 243, 0.25); --COLOR-BG-TRANSPARENT: rgba(242, 243, 243, 0);--COLOR-FOOTER-BG-HAIRLINE: #eaecec; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-5 {--COLOR-BG-GRADIENT: #faa61a; --COLOR-BG: #faa61a; --COLOR-BG-RGB: 250, 166, 26; --COLOR-BG-ACCENT: #f9f2e8; --COLOR-BG-ACCENT-LIGHTEN: #ffffff; /* === Link Color ===*/ --COLOR-LINK: #003049; --COLOR-LINK-A50: rgba(0, 48, 73, 0.5); --COLOR-LINK-A70: rgba(0, 48, 73, 0.7); --COLOR-LINK-HOVER: rgba(0, 48, 73, 0.7); --COLOR-LINK-OPPOSITE: #ffffff; --COLOR-TEXT: #000000; --COLOR-TEXT-HOVER: rgba(0, 0, 0, 0.7); --COLOR-TEXT-LIGHT: #4b3208; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(0, 0, 0, 0.05); --COLOR-TEXT-A35: rgba(0, 0, 0, 0.35); --COLOR-TEXT-A50: rgba(0, 0, 0, 0.5); --COLOR-TEXT-A80: rgba(0, 0, 0, 0.8); --COLOR-BORDER: rgb(0, 48, 73); --COLOR-BORDER-LIGHT: #645f36; --COLOR-BORDER-DARK: #000000; --COLOR-BORDER-HAIRLINE: #faa00b; --overlay-bg: #f9f2e8; /* === Bright color ===*/ --COLOR-ACCENT: #003049; --COLOR-ACCENT-HOVER: #000000; --COLOR-ACCENT-FADE: rgba(0, 48, 73, 0.05); --COLOR-ACCENT-LIGHT: #0095e2; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #003049; --BTN-PRIMARY-TEXT: #bce5f2; --BTN-PRIMARY-BORDER: #003049; --BTN-PRIMARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #004162; --BTN-SECONDARY-BG: #54b6e7; --BTN-SECONDARY-TEXT: #003049; --BTN-SECONDARY-BORDER: #54b6e7; --BTN-SECONDARY-BORDER-A70: rgba(84, 182, 231, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #3eace4; --COLOR-BG-BRIGHTER: #f59b05; --COLOR-BG-ALPHA-25: rgba(250, 166, 26, 0.25); --COLOR-BG-TRANSPARENT: rgba(250, 166, 26, 0);--COLOR-FOOTER-BG-HAIRLINE: #faa00b; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-6 {--COLOR-BG-GRADIENT: #54b6e7; --COLOR-BG: #54b6e7; --COLOR-BG-RGB: 84, 182, 231; --COLOR-BG-ACCENT: #f9f2e8; --COLOR-BG-ACCENT-LIGHTEN: #ffffff; /* === Link Color ===*/ --COLOR-LINK: #003049; --COLOR-LINK-A50: rgba(0, 48, 73, 0.5); --COLOR-LINK-A70: rgba(0, 48, 73, 0.7); --COLOR-LINK-HOVER: rgba(0, 48, 73, 0.7); --COLOR-LINK-OPPOSITE: #ffffff; --COLOR-TEXT: #000000; --COLOR-TEXT-HOVER: rgba(0, 0, 0, 0.7); --COLOR-TEXT-LIGHT: #193745; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(0, 0, 0, 0.05); --COLOR-TEXT-A35: rgba(0, 0, 0, 0.35); --COLOR-TEXT-A50: rgba(0, 0, 0, 0.5); --COLOR-TEXT-A80: rgba(0, 0, 0, 0.8); --COLOR-BORDER: rgb(0, 48, 73); --COLOR-BORDER-LIGHT: #226688; --COLOR-BORDER-DARK: #000000; --COLOR-BORDER-HAIRLINE: #47b0e5; --overlay-bg: #00000036; /* === Bright color ===*/ --COLOR-ACCENT: #003049; --COLOR-ACCENT-HOVER: #000000; --COLOR-ACCENT-FADE: rgba(0, 48, 73, 0.05); --COLOR-ACCENT-LIGHT: #0095e2; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #faa61a; --BTN-PRIMARY-TEXT: #003049; --BTN-PRIMARY-BORDER: #003049; --BTN-PRIMARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #f59b05; --BTN-SECONDARY-BG: #f26a24; --BTN-SECONDARY-TEXT: #003049; --BTN-SECONDARY-BORDER: #003049; --BTN-SECONDARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #ee5a0e; --COLOR-BG-BRIGHTER: #3eace4; --COLOR-BG-ALPHA-25: rgba(84, 182, 231, 0.25); --COLOR-BG-TRANSPARENT: rgba(84, 182, 231, 0);--COLOR-FOOTER-BG-HAIRLINE: #47b0e5; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-7 {--COLOR-BG-GRADIENT: #ffffff; --COLOR-BG: #ffffff; --COLOR-BG-RGB: 255, 255, 255; --COLOR-BG-ACCENT: #f9f2e8; --COLOR-BG-ACCENT-LIGHTEN: #ffffff; /* === Link Color ===*/ --COLOR-LINK: #003049; --COLOR-LINK-A50: rgba(0, 48, 73, 0.5); --COLOR-LINK-A70: rgba(0, 48, 73, 0.7); --COLOR-LINK-HOVER: rgba(0, 48, 73, 0.7); --COLOR-LINK-OPPOSITE: #ffffff; --COLOR-TEXT: #000000; --COLOR-TEXT-HOVER: rgba(0, 0, 0, 0.7); --COLOR-TEXT-LIGHT: #4d4d4d; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(0, 0, 0, 0.05); --COLOR-TEXT-A35: rgba(0, 0, 0, 0.35); --COLOR-TEXT-A50: rgba(0, 0, 0, 0.5); --COLOR-TEXT-A80: rgba(0, 0, 0, 0.8); --COLOR-BORDER: rgb(0, 48, 73); --COLOR-BORDER-LIGHT: #668392; --COLOR-BORDER-DARK: #000000; --COLOR-BORDER-HAIRLINE: #f7f7f7; --overlay-bg: #f2f3f31f; /* === Bright color ===*/ --COLOR-ACCENT: #faa61a; --COLOR-ACCENT-HOVER: #c87c00; --COLOR-ACCENT-FADE: rgba(250, 166, 26, 0.05); --COLOR-ACCENT-LIGHT: #ffe1ae; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #54b6e7; --BTN-PRIMARY-TEXT: #003049; --BTN-PRIMARY-BORDER: #003049; --BTN-PRIMARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #3eace4; --BTN-SECONDARY-BG: #f26a24; --BTN-SECONDARY-TEXT: #003049; --BTN-SECONDARY-BORDER: #003049; --BTN-SECONDARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #ee5a0e; --COLOR-BG-BRIGHTER: #f2f2f2; --COLOR-BG-ALPHA-25: rgba(255, 255, 255, 0.25); --COLOR-BG-TRANSPARENT: rgba(255, 255, 255, 0);--COLOR-FOOTER-BG-HAIRLINE: #f7f7f7; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-8 {--COLOR-BG-GRADIENT: #003049; --COLOR-BG: #003049; --COLOR-BG-RGB: 0, 48, 73; --COLOR-BG-ACCENT: #000000; --COLOR-BG-ACCENT-LIGHTEN: #262626; /* === Link Color ===*/ --COLOR-LINK: #faa61a; --COLOR-LINK-A50: rgba(250, 166, 26, 0.5); --COLOR-LINK-A70: rgba(250, 166, 26, 0.7); --COLOR-LINK-HOVER: rgba(250, 166, 26, 0.7); --COLOR-LINK-OPPOSITE: #ffffff; --COLOR-TEXT: #54b6e7; --COLOR-TEXT-HOVER: rgba(84, 182, 231, 0.7); --COLOR-TEXT-LIGHT: #3b8eb8; --COLOR-TEXT-DARK: #1199dd; --COLOR-TEXT-A5: rgba(84, 182, 231, 0.05); --COLOR-TEXT-A35: rgba(84, 182, 231, 0.35); --COLOR-TEXT-A50: rgba(84, 182, 231, 0.5); --COLOR-TEXT-A80: rgba(84, 182, 231, 0.8); --COLOR-BORDER: rgb(250, 166, 26); --COLOR-BORDER-LIGHT: #96772d; --COLOR-BORDER-DARK: #aa6c04; --COLOR-BORDER-HAIRLINE: #00263a; --overlay-bg: #00000029; /* === Bright color ===*/ --COLOR-ACCENT: #63baaa; --COLOR-ACCENT-HOVER: #369b88; --COLOR-ACCENT-FADE: rgba(99, 186, 170, 0.05); --COLOR-ACCENT-LIGHT: #c6f0e8; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #f9f2e8; --BTN-PRIMARY-TEXT: #000000; --BTN-PRIMARY-BORDER: #faa61a; --BTN-PRIMARY-BORDER-A70: rgba(250, 166, 26, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #f4e7d4; --BTN-SECONDARY-BG: #f26a24; --BTN-SECONDARY-TEXT: #003049; --BTN-SECONDARY-BORDER: #f26a24; --BTN-SECONDARY-BORDER-A70: rgba(242, 106, 36, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #ee5a0e; --COLOR-BG-BRIGHTER: #004162; --COLOR-BG-ALPHA-25: rgba(0, 48, 73, 0.25); --COLOR-BG-TRANSPARENT: rgba(0, 48, 73, 0);--COLOR-FOOTER-BG-HAIRLINE: #003a58; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-9 {--COLOR-BG-GRADIENT: #bce5f2; --COLOR-BG: #bce5f2; --COLOR-BG-RGB: 188, 229, 242; --COLOR-BG-ACCENT: #f2f3f3; --COLOR-BG-ACCENT-LIGHTEN: #ffffff; /* === Link Color ===*/ --COLOR-LINK: #003049; --COLOR-LINK-A50: rgba(0, 48, 73, 0.5); --COLOR-LINK-A70: rgba(0, 48, 73, 0.7); --COLOR-LINK-HOVER: rgba(0, 48, 73, 0.7); --COLOR-LINK-OPPOSITE: #ffffff; --COLOR-TEXT: #003049; --COLOR-TEXT-HOVER: rgba(0, 48, 73, 0.7); --COLOR-TEXT-LIGHT: #38667c; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(0, 48, 73, 0.05); --COLOR-TEXT-A35: rgba(0, 48, 73, 0.35); --COLOR-TEXT-A50: rgba(0, 48, 73, 0.5); --COLOR-TEXT-A80: rgba(0, 48, 73, 0.8); --COLOR-BORDER: rgb(0, 48, 73); --COLOR-BORDER-LIGHT: #4b788d; --COLOR-BORDER-DARK: #000000; --COLOR-BORDER-HAIRLINE: #afe0f0; --overlay-bg: #003049; /* === Bright color ===*/ --COLOR-ACCENT: #f26a24; --COLOR-ACCENT-HOVER: #c94501; --COLOR-ACCENT-FADE: rgba(242, 106, 36, 0.05); --COLOR-ACCENT-LIGHT: #ffcbb0; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #f9f2e8; --BTN-PRIMARY-TEXT: #003049; --BTN-PRIMARY-BORDER: #003049; --BTN-PRIMARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #f4e7d4; --BTN-SECONDARY-BG: #faa61a; --BTN-SECONDARY-TEXT: #003049; --BTN-SECONDARY-BORDER: #003049; --BTN-SECONDARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #f59b05; --COLOR-BG-BRIGHTER: #a7ddee; --COLOR-BG-ALPHA-25: rgba(188, 229, 242, 0.25); --COLOR-BG-TRANSPARENT: rgba(188, 229, 242, 0);--COLOR-FOOTER-BG-HAIRLINE: #afe0f0; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-10 {--COLOR-BG-GRADIENT: #f26a24; --COLOR-BG: #f26a24; --COLOR-BG-RGB: 242, 106, 36; --COLOR-BG-ACCENT: #f9f2e8; --COLOR-BG-ACCENT-LIGHTEN: #ffffff; /* === Link Color ===*/ --COLOR-LINK: #282c2e; --COLOR-LINK-A50: rgba(40, 44, 46, 0.5); --COLOR-LINK-A70: rgba(40, 44, 46, 0.7); --COLOR-LINK-HOVER: rgba(40, 44, 46, 0.7); --COLOR-LINK-OPPOSITE: #ffffff; --COLOR-TEXT: #003049; --COLOR-TEXT-HOVER: rgba(0, 48, 73, 0.7); --COLOR-TEXT-LIGHT: #49413e; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(0, 48, 73, 0.05); --COLOR-TEXT-A35: rgba(0, 48, 73, 0.35); --COLOR-TEXT-A50: rgba(0, 48, 73, 0.5); --COLOR-TEXT-A80: rgba(0, 48, 73, 0.8); --COLOR-BORDER: rgb(0, 48, 73); --COLOR-BORDER-LIGHT: #61473a; --COLOR-BORDER-DARK: #000000; --COLOR-BORDER-HAIRLINE: #f16016; --overlay-bg: #000000; /* === Bright color ===*/ --COLOR-ACCENT: #003049; --COLOR-ACCENT-HOVER: #000000; --COLOR-ACCENT-FADE: rgba(0, 48, 73, 0.05); --COLOR-ACCENT-LIGHT: #0095e2; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #003049; --BTN-PRIMARY-TEXT: #f9f2e8; --BTN-PRIMARY-BORDER: #f9f2e8; --BTN-PRIMARY-BORDER-A70: rgba(249, 242, 232, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #004162; --BTN-SECONDARY-BG: #59add5; --BTN-SECONDARY-TEXT: #003049; --BTN-SECONDARY-BORDER: #003049; --BTN-SECONDARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #45a3d0; --COLOR-BG-BRIGHTER: #ee5a0e; --COLOR-BG-ALPHA-25: rgba(242, 106, 36, 0.25); --COLOR-BG-TRANSPARENT: rgba(242, 106, 36, 0);--COLOR-FOOTER-BG-HAIRLINE: #f16016; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-11 {--COLOR-BG-GRADIENT: #0068ac; --COLOR-BG: #0068ac; --COLOR-BG-RGB: 0, 104, 172; --COLOR-BG-ACCENT: #f2f3f3; --COLOR-BG-ACCENT-LIGHTEN: #ffffff; /* === Link Color ===*/ --COLOR-LINK: #f9f2e8; --COLOR-LINK-A50: rgba(249, 242, 232, 0.5); --COLOR-LINK-A70: rgba(249, 242, 232, 0.7); --COLOR-LINK-HOVER: rgba(249, 242, 232, 0.7); --COLOR-LINK-OPPOSITE: #000000; --COLOR-TEXT: #f9f2e8; --COLOR-TEXT-HOVER: rgba(249, 242, 232, 0.7); --COLOR-TEXT-LIGHT: #aec9d6; --COLOR-TEXT-DARK: #edd0a8; --COLOR-TEXT-A5: rgba(249, 242, 232, 0.05); --COLOR-TEXT-A35: rgba(249, 242, 232, 0.35); --COLOR-TEXT-A50: rgba(249, 242, 232, 0.5); --COLOR-TEXT-A80: rgba(249, 242, 232, 0.8); --COLOR-BORDER: rgb(249, 242, 232); --COLOR-BORDER-LIGHT: #95bbd0; --COLOR-BORDER-DARK: #e4c497; --COLOR-BORDER-HAIRLINE: #005f9d; --overlay-bg: #59add52b; /* === Bright color ===*/ --COLOR-ACCENT: #bce5f2; --COLOR-ACCENT-HOVER: #74d0ed; --COLOR-ACCENT-FADE: rgba(188, 229, 242, 0.05); --COLOR-ACCENT-LIGHT: #ffffff; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #faa61a; --BTN-PRIMARY-TEXT: #003049; --BTN-PRIMARY-BORDER: #f9f2e8; --BTN-PRIMARY-BORDER-A70: rgba(249, 242, 232, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #f59b05; --BTN-SECONDARY-BG: #f26a24; --BTN-SECONDARY-TEXT: #003049; --BTN-SECONDARY-BORDER: #f9f2e8; --BTN-SECONDARY-BORDER-A70: rgba(249, 242, 232, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #ee5a0e; --COLOR-BG-BRIGHTER: #005993; --COLOR-BG-ALPHA-25: rgba(0, 104, 172, 0.25); --COLOR-BG-TRANSPARENT: rgba(0, 104, 172, 0);--COLOR-FOOTER-BG-HAIRLINE: #0071bb; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-b1c03340-69ff-45ce-8a22-db20f05fe16f {--COLOR-BG-GRADIENT: #f9f2e8; --COLOR-BG: #f9f2e8; --COLOR-BG-RGB: 249, 242, 232; --COLOR-BG-ACCENT: #f9f2e8; --COLOR-BG-ACCENT-LIGHTEN: #ffffff; /* === Link Color ===*/ --COLOR-LINK: #003049; --COLOR-LINK-A50: rgba(0, 48, 73, 0.5); --COLOR-LINK-A70: rgba(0, 48, 73, 0.7); --COLOR-LINK-HOVER: rgba(0, 48, 73, 0.7); --COLOR-LINK-OPPOSITE: #ffffff; --COLOR-TEXT: #000000; --COLOR-TEXT-HOVER: rgba(0, 0, 0, 0.7); --COLOR-TEXT-LIGHT: #4b4946; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(0, 0, 0, 0.05); --COLOR-TEXT-A35: rgba(0, 0, 0, 0.35); --COLOR-TEXT-A50: rgba(0, 0, 0, 0.5); --COLOR-TEXT-A80: rgba(0, 0, 0, 0.8); --COLOR-BORDER: rgb(0, 48, 73); --COLOR-BORDER-LIGHT: #647e89; --COLOR-BORDER-DARK: #000000; --COLOR-BORDER-HAIRLINE: #f6ebdc; --overlay-bg: #00000021; /* === Bright color ===*/ --COLOR-ACCENT: #54b6e7; --COLOR-ACCENT-HOVER: #1199dd; --COLOR-ACCENT-FADE: rgba(84, 182, 231, 0.05); --COLOR-ACCENT-LIGHT: #d6f1fe; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #faa61a; --BTN-PRIMARY-TEXT: #003049; --BTN-PRIMARY-BORDER: #003049; --BTN-PRIMARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #f59b05; --BTN-SECONDARY-BG: #f26a24; --BTN-SECONDARY-TEXT: #003049; --BTN-SECONDARY-BORDER: #003049; --BTN-SECONDARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #ee5a0e; --COLOR-BG-BRIGHTER: #f4e7d4; --COLOR-BG-ALPHA-25: rgba(249, 242, 232, 0.25); --COLOR-BG-TRANSPARENT: rgba(249, 242, 232, 0);--COLOR-FOOTER-BG-HAIRLINE: #f6ebdc; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-1e411e67-57b9-4616-8074-976518e20789 {--COLOR-BG-GRADIENT: #f9f2e8; --COLOR-BG: #f9f2e8; --COLOR-BG-RGB: 249, 242, 232; --COLOR-BG-ACCENT: #f9f2e8; --COLOR-BG-ACCENT-LIGHTEN: #ffffff; /* === Link Color ===*/ --COLOR-LINK: #003049; --COLOR-LINK-A50: rgba(0, 48, 73, 0.5); --COLOR-LINK-A70: rgba(0, 48, 73, 0.7); --COLOR-LINK-HOVER: rgba(0, 48, 73, 0.7); --COLOR-LINK-OPPOSITE: #ffffff; --COLOR-TEXT: #000000; --COLOR-TEXT-HOVER: rgba(0, 0, 0, 0.7); --COLOR-TEXT-LIGHT: #4b4946; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(0, 0, 0, 0.05); --COLOR-TEXT-A35: rgba(0, 0, 0, 0.35); --COLOR-TEXT-A50: rgba(0, 0, 0, 0.5); --COLOR-TEXT-A80: rgba(0, 0, 0, 0.8); --COLOR-BORDER: rgb(0, 48, 73); --COLOR-BORDER-LIGHT: #647e89; --COLOR-BORDER-DARK: #000000; --COLOR-BORDER-HAIRLINE: #f6ebdc; --overlay-bg: #00000021; /* === Bright color ===*/ --COLOR-ACCENT: #f26a24; --COLOR-ACCENT-HOVER: #c94501; --COLOR-ACCENT-FADE: rgba(242, 106, 36, 0.05); --COLOR-ACCENT-LIGHT: #ffcbb0; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #faa61a; --BTN-PRIMARY-TEXT: #003049; --BTN-PRIMARY-BORDER: #003049; --BTN-PRIMARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #f59b05; --BTN-SECONDARY-BG: #f26a24; --BTN-SECONDARY-TEXT: #003049; --BTN-SECONDARY-BORDER: #003049; --BTN-SECONDARY-BORDER-A70: rgba(0, 48, 73, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #ee5a0e; --COLOR-BG-BRIGHTER: #f4e7d4; --COLOR-BG-ALPHA-25: rgba(249, 242, 232, 0.25); --COLOR-BG-TRANSPARENT: rgba(249, 242, 232, 0);--COLOR-FOOTER-BG-HAIRLINE: #f6ebdc; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } .color-scheme-fbe67d4d-5cb4-4973-b8c5-2b00220babc1 {--COLOR-BG-GRADIENT: #003049; --COLOR-BG: #003049; --COLOR-BG-RGB: 0, 48, 73; --COLOR-BG-ACCENT: #bce5f2; --COLOR-BG-ACCENT-LIGHTEN: #fcfefe; /* === Link Color ===*/ --COLOR-LINK: #bce5f2; --COLOR-LINK-A50: rgba(188, 229, 242, 0.5); --COLOR-LINK-A70: rgba(188, 229, 242, 0.7); --COLOR-LINK-HOVER: rgba(188, 229, 242, 0.7); --COLOR-LINK-OPPOSITE: #000000; --COLOR-TEXT: #f9f2e8; --COLOR-TEXT-HOVER: rgba(249, 242, 232, 0.7); --COLOR-TEXT-LIGHT: #aeb8b8; --COLOR-TEXT-DARK: #edd0a8; --COLOR-TEXT-A5: rgba(249, 242, 232, 0.05); --COLOR-TEXT-A35: rgba(249, 242, 232, 0.35); --COLOR-TEXT-A50: rgba(249, 242, 232, 0.5); --COLOR-TEXT-A80: rgba(249, 242, 232, 0.8); --COLOR-BORDER: rgb(249, 242, 232); --COLOR-BORDER-LIGHT: #95a4a8; --COLOR-BORDER-DARK: #e4c497; --COLOR-BORDER-HAIRLINE: #00263a; --overlay-bg: #00304940; /* === Bright color ===*/ --COLOR-ACCENT: #faa61a; --COLOR-ACCENT-HOVER: #c87c00; --COLOR-ACCENT-FADE: rgba(250, 166, 26, 0.05); --COLOR-ACCENT-LIGHT: #ffe1ae; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #f26a24; --BTN-PRIMARY-TEXT: #003049; --BTN-PRIMARY-BORDER: #f26a24; --BTN-PRIMARY-BORDER-A70: rgba(242, 106, 36, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #ee5a0e; --BTN-SECONDARY-BG: #54b6e7; --BTN-SECONDARY-TEXT: #003049; --BTN-SECONDARY-BORDER: #54b6e7; --BTN-SECONDARY-BORDER-A70: rgba(84, 182, 231, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #3eace4; --COLOR-BG-BRIGHTER: #004162; --COLOR-BG-ALPHA-25: rgba(0, 48, 73, 0.25); --COLOR-BG-TRANSPARENT: rgba(0, 48, 73, 0);--COLOR-FOOTER-BG-HAIRLINE: #003a58; /* Dynamic color variables */ --accent: var(--COLOR-ACCENT); --accent-fade: var(--COLOR-ACCENT-FADE); --accent-hover: var(--COLOR-ACCENT-HOVER); --border: var(--COLOR-BORDER); --border-dark: var(--COLOR-BORDER-DARK); --border-light: var(--COLOR-BORDER-LIGHT); --border-hairline: var(--COLOR-BORDER-HAIRLINE); --bg: var(--COLOR-BG-GRADIENT, var(--COLOR-BG)); --bg-accent: var(--COLOR-BG-ACCENT); --bg-accent-lighten: var(--COLOR-BG-ACCENT-LIGHTEN); --icons: var(--COLOR-TEXT); --link: var(--COLOR-LINK); --link-a50: var(--COLOR-LINK-A50); --link-a70: var(--COLOR-LINK-A70); --link-hover: var(--COLOR-LINK-HOVER); --link-opposite: var(--COLOR-LINK-OPPOSITE); --text: var(--COLOR-TEXT); --text-dark: var(--COLOR-TEXT-DARK); --text-light: var(--COLOR-TEXT-LIGHT); --text-hover: var(--COLOR-TEXT-HOVER); --text-a5: var(--COLOR-TEXT-A5); --text-a35: var(--COLOR-TEXT-A35); --text-a50: var(--COLOR-TEXT-A50); --text-a80: var(--COLOR-TEXT-A80); } body, .color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4, .color-scheme-5, .color-scheme-6, .color-scheme-7, .color-scheme-8, .color-scheme-9, .color-scheme-10, .color-scheme-11, .color-scheme-b1c03340-69ff-45ce-8a22-db20f05fe16f, .color-scheme-1e411e67-57b9-4616-8074-976518e20789, .color-scheme-fbe67d4d-5cb4-4973-b8c5-2b00220babc1 { color: var(--text); background: var(--bg); } :root { --scrollbar-width: 0px; /* === Product grid badges ===*/ --COLOR-SALE-BG: #f26a24; --COLOR-SALE-TEXT: #003049; --COLOR-BADGE-BG: #63baaa; --COLOR-BADGE-TEXT: #003049; --COLOR-SOLD-BG: #f2f3f3; --COLOR-SOLD-TEXT: #000000; --COLOR-NEW-BADGE-BG: #faa61a; --COLOR-NEW-BADGE-TEXT: #003049; --COLOR-PREORDER-BG: #63baaa; --COLOR-PREORDER-TEXT: #000000; /* === Quick Add ===*/ --COLOR-QUICK-ADD-BG: #faa61a; --COLOR-QUICK-ADD-BG-BRIGHTER: #f59b05; --COLOR-QUICK-ADD-TEXT: #003049; /* === Product sale color ===*/ --COLOR-SALE: #f26a24; /* === Helper colors for form error states ===*/ --COLOR-ERROR: #721C24; --COLOR-ERROR-BG: #F8D7DA; --COLOR-ERROR-BORDER: #F5C6CB; --COLOR-SUCCESS: #56AD6A; --COLOR-SUCCESS-BG: rgba(86, 173, 106, 0.2); --RADIUS: 0px; --RADIUS-SELECT: 0px; --COLOR-HEADER-LINK: #000000; --COLOR-HEADER-LINK-HOVER: #000000; --COLOR-MENU-BG: #f9f2e8; --COLOR-SUBMENU-BG: #f9f2e8; --COLOR-SUBMENU-LINK: #000000; --COLOR-SUBMENU-LINK-HOVER: rgba(0, 0, 0, 0.7); --COLOR-SUBMENU-TEXT-LIGHT: #4b4946; --COLOR-MENU-TRANSPARENT: #f9f2e8; --COLOR-MENU-TRANSPARENT-HOVER: #f9f2e8; --TRANSPARENT: rgba(255, 255, 255, 0); /* === Default overlay opacity ===*/ --underlay-opacity: 1; --underlay-bg: rgba(0,0,0,0.4); --header-overlay-color: transparent; /* === Custom Cursor ===*/ --ICON-ZOOM-IN: url( "/assets/icon-zoom-in.svg" ); --ICON-ZOOM-OUT: url( "/assets/icon-zoom-out.svg" ); /* === Custom Icons ===*/ --ICON-ADD-BAG: url( "/assets/icon-add-bag-medium.svg" ); --ICON-ADD-CART: url( "/assets/icon-add-cart-medium.svg" ); --ICON-ARROW-LEFT: url( "/assets/icon-nav-arrow-left-medium.svg" ); --ICON-ARROW-RIGHT: url( "/assets/icon-nav-arrow-right-medium.svg" ); --ICON-SELECT: url("/assets/icon-select-medium.svg"); --PRODUCT-GRID-ASPECT-RATIO: 100%; /* === Typography ===*/ --FONT-HEADING-MINI: 12px; --FONT-HEADING-X-SMALL: 16px; --FONT-HEADING-SMALL: 24px; --FONT-HEADING-MEDIUM: 36px; --FONT-HEADING-LARGE: 48px; --FONT-HEADING-X-LARGE: 60px; --FONT-HEADING-MINI-MOBILE: 12px; --FONT-HEADING-X-SMALL-MOBILE: 16px; --FONT-HEADING-SMALL-MOBILE: 21px; --FONT-HEADING-MEDIUM-MOBILE: 24px; --FONT-HEADING-LARGE-MOBILE: 32px; --FONT-HEADING-X-LARGE-MOBILE: 45px; --FONT-STACK-BODY: Karla, sans-serif; --FONT-STYLE-BODY: normal; --FONT-WEIGHT-BODY: 400; --FONT-WEIGHT-BODY-BOLD: 500; --LETTER-SPACING-BODY: -0.025em; --FONT-STACK-HEADING: Dotties-Vanilla-Bold, "Bricolage Grotesque", sans-serif; --FONT-WEIGHT-HEADING: 700; --FONT-STYLE-HEADING: normal; --FONT-UPPERCASE-HEADING: none; --LETTER-SPACING-HEADING: 0.0em; --FONT-STACK-SUBHEADING: Karla, sans-serif; --FONT-WEIGHT-SUBHEADING: 700; --FONT-STYLE-SUBHEADING: normal; --FONT-SIZE-SUBHEADING-DESKTOP: 18px; --FONT-SIZE-SUBHEADING-MOBILE: 18px; --FONT-UPPERCASE-SUBHEADING: uppercase; --LETTER-SPACING-SUBHEADING: -0.025em; --FONT-STACK-NAV: Dotties-Vanilla-Bold, "Bricolage Grotesque", sans-serif; --FONT-WEIGHT-NAV: 700; --FONT-WEIGHT-NAV-BOLD: 800; --FONT-STYLE-NAV: normal; --FONT-SIZE-NAV: 16px; --LETTER-SPACING-NAV: 0.0em; --FONT-SIZE-BASE: 18px; /* === Parallax ===*/ --PARALLAX-STRENGTH-MIN: 110.0%; --PARALLAX-STRENGTH-MAX: 120.0%;--COLUMNS: 4; --COLUMNS-MEDIUM: 3; --COLUMNS-SMALL: 2; --COLUMNS-MOBILE: 1;--LAYOUT-OUTER: 50px; --LAYOUT-GUTTER: 32px; --LAYOUT-OUTER-MEDIUM: 30px; --LAYOUT-GUTTER-MEDIUM: 22px; --LAYOUT-OUTER-SMALL: 16px; --LAYOUT-GUTTER-SMALL: 16px;--base-animation-delay: 0ms; --line-height-normal: 1.4; /* Equals to line-height: normal; */--SIDEBAR-WIDTH: 288px; --SIDEBAR-WIDTH-MEDIUM: 258px;--DRAWER-WIDTH: 380px;--ICON-STROKE-WIDTH: 1.5px; /* === Button General ===*/ --BTN-FONT-STACK: Dotties-Vanilla, "Bricolage Grotesque", sans-serif; --BTN-FONT-WEIGHT: 700; --BTN-FONT-STYLE: normal; --BTN-FONT-SIZE: 16px; --BTN-SIZE-SMALL: 7px; --BTN-SIZE-MEDIUM: 9px; --BTN-SIZE-LARGE: 16px;--BTN-FONT-SIZE-BODY: 0.8888888888888888rem; --BTN-LETTER-SPACING: 0.0em; --BTN-UPPERCASE: uppercase; --BTN-TEXT-ARROW-OFFSET: -1px; /* === Button White ===*/ --COLOR-TEXT-BTN-BG-WHITE: #fff; --COLOR-TEXT-BTN-BORDER-WHITE: #fff; --COLOR-TEXT-BTN-WHITE: #000; --COLOR-TEXT-BTN-WHITE-A70: rgba(255, 255, 255, 0.7); --COLOR-TEXT-BTN-BG-WHITE-BRIGHTER: #f2f2f2; /* === Button Black ===*/ --COLOR-TEXT-BTN-BG-BLACK: #000; --COLOR-TEXT-BTN-BORDER-BLACK: #000; --COLOR-TEXT-BTN-BLACK: #fff; --COLOR-TEXT-BTN-BLACK-A70: rgba(0, 0, 0, 0.7); --COLOR-TEXT-BTN-BG-BLACK-BRIGHTER: #0d0d0d; /* === Swatch Size ===*/ --swatch-size-filters: 1.15rem; --swatch-size-product: 2.2rem; } /* === Backdrop ===*/ ::backdrop { --underlay-opacity: 1; --underlay-bg: rgba(0,0,0,0.4); } /* === Gray background on Product grid items ===*/ *, *::before, *::after { box-sizing: inherit; } * { -webkit-font-smoothing: antialiased; } html { box-sizing: border-box; font-size: var(--FONT-SIZE-BASE); } html, body { min-height: 100%; } body { position: relative; min-width: 320px; font-size: var(--FONT-SIZE-BASE); text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } .swatches { --spruce-goose: #343567;--rainbow: #FFFFFF;--ruby: #D12A40;--stripes-2-0: url(/assets/stripes20_small.png); } #shopify-buyer-consent { margin-top: 1em; display: inline-block; width: 100%; } #shopify-buyer-consent.hidden { display: none; } #shopify-subscription-policy-button { background: none; border: none; padding: 0; text-decoration: underline; font-size: inherit; cursor: pointer; } #shopify-subscription-policy-button::before { box-shadow: none; } @font-face { font-family: 'DottiesVanilla'; src: url(/assets/DottiesVanilla-Bold.woff2); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'DottiesVanilla'; src: url(/assets/DottiesVanilla-Regular.woff2); font-weight: 400; font-style: normal; font-display: swap; }