/* Verafied design tokens — fonts + color schemes (extracted from source) */ @font-face { font-family: "EB Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ebgaramond_n4.woff2") format("woff2"); } @font-face { font-family: Jost; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/jost_n4.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ebgaramond_n4.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/ebgaramond_i4.woff2") format("woff2"); } @font-face { font-family: Jost; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/jost_n4.woff2") format("woff2"); } @font-face { font-family: Jost; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/jost_n5.woff2") format("woff2"); } @font-face { font-family: Jost; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/jost_i4.woff2") format("woff2"); } @font-face { font-family: Jost; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/jost_i5.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ebgaramond_n5.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ebgaramond_n4.woff2") format("woff2"); } @font-face { font-family: Jost; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/jost_n4.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ebgaramond_n4.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/ebgaramond_i4.woff2") format("woff2"); } @font-face { font-family: Jost; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/jost_n4.woff2") format("woff2"); } @font-face { font-family: Jost; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/jost_n5.woff2") format("woff2"); } @font-face { font-family: Jost; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/jost_i4.woff2") format("woff2"); } @font-face { font-family: Jost; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/jost_i5.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ebgaramond_n5.woff2") format("woff2"); } :root, .color-scheme-1 {--COLOR-BG-GRADIENT: #f5f3f1; --COLOR-BG: #f5f3f1; --COLOR-BG-RGB: 245, 243, 241; --COLOR-BG-ACCENT: #f5f3f1; --COLOR-BG-ACCENT-LIGHTEN: #ffffff; /* === Link Color ===*/ --COLOR-LINK: #000000; --COLOR-LINK-A50: rgba(0, 0, 0, 0.5); --COLOR-LINK-A70: rgba(0, 0, 0, 0.7); --COLOR-LINK-HOVER: rgba(0, 0, 0, 0.7); --COLOR-LINK-OPPOSITE: #ffffff; --COLOR-TEXT: #000000; --COLOR-TEXT-HOVER: rgba(0, 0, 0, 0.7); --COLOR-TEXT-LIGHT: #4a4948; --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: #626160; --COLOR-BORDER-DARK: #000000; --COLOR-BORDER-HAIRLINE: #efebe8; --overlay-bg: #000000; /* === Bright color ===*/ --COLOR-ACCENT: #000000; --COLOR-ACCENT-HOVER: #000000; --COLOR-ACCENT-FADE: rgba(0, 0, 0, 0.05); --COLOR-ACCENT-LIGHT: #4d4d4d; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #000000; --BTN-PRIMARY-TEXT: #f5f3f1; --BTN-PRIMARY-BORDER: #000000; --BTN-PRIMARY-BORDER-A70: rgba(0, 0, 0, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #0d0d0d; --BTN-SECONDARY-BG: #f5f3f1; --BTN-SECONDARY-TEXT: #000000; --BTN-SECONDARY-BORDER: #000000; --BTN-SECONDARY-BORDER-A70: rgba(0, 0, 0, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #eae6e2; --COLOR-BG-BRIGHTER: #eae6e2; --COLOR-BG-ALPHA-25: rgba(245, 243, 241, 0.25); --COLOR-BG-TRANSPARENT: rgba(245, 243, 241, 0);--COLOR-FOOTER-BG-HAIRLINE: #efebe8; /* 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: #000000; --COLOR-BG: #000000; --COLOR-BG-RGB: 0, 0, 0; --COLOR-BG-ACCENT: #000000; --COLOR-BG-ACCENT-LIGHTEN: #262626; /* === Link Color ===*/ --COLOR-LINK: #f5f3f1; --COLOR-LINK-A50: rgba(245, 243, 241, 0.5); --COLOR-LINK-A70: rgba(245, 243, 241, 0.7); --COLOR-LINK-HOVER: rgba(245, 243, 241, 0.7); --COLOR-LINK-OPPOSITE: #000000; --COLOR-TEXT: #f5f3f1; --COLOR-TEXT-HOVER: rgba(245, 243, 241, 0.7); --COLOR-TEXT-LIGHT: #acaaa9; --COLOR-TEXT-DARK: #d9cdc0; --COLOR-TEXT-A5: rgba(245, 243, 241, 0.05); --COLOR-TEXT-A35: rgba(245, 243, 241, 0.35); --COLOR-TEXT-A50: rgba(245, 243, 241, 0.5); --COLOR-TEXT-A80: rgba(245, 243, 241, 0.8); --COLOR-BORDER: rgb(245, 243, 241); --COLOR-BORDER-LIGHT: #939291; --COLOR-BORDER-DARK: #cbc0b5; --COLOR-BORDER-HAIRLINE: #000000; --overlay-bg: #000000; /* === Bright color ===*/ --COLOR-ACCENT: #f5f3f1; --COLOR-ACCENT-HOVER: #d9cdc0; --COLOR-ACCENT-FADE: rgba(245, 243, 241, 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: #f5f3f1; --BTN-PRIMARY-TEXT: #000000; --BTN-PRIMARY-BORDER: #f5f3f1; --BTN-PRIMARY-BORDER-A70: rgba(245, 243, 241, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #eae6e2; --BTN-SECONDARY-BG: #000000; --BTN-SECONDARY-TEXT: #000000; --BTN-SECONDARY-BORDER: #f5f3f1; --BTN-SECONDARY-BORDER-A70: rgba(245, 243, 241, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #0d0d0d; --COLOR-BG-BRIGHTER: #1a1a1a; --COLOR-BG-ALPHA-25: rgba(0, 0, 0, 0.25); --COLOR-BG-TRANSPARENT: rgba(0, 0, 0, 0);--COLOR-FOOTER-BG-HAIRLINE: #080808; /* 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: #000000; --COLOR-BG: #000000; --COLOR-BG-RGB: 0, 0, 0; --COLOR-BG-ACCENT: #000000; --COLOR-BG-ACCENT-LIGHTEN: #262626; /* === Link Color ===*/ --COLOR-LINK: #f5f3f1; --COLOR-LINK-A50: rgba(245, 243, 241, 0.5); --COLOR-LINK-A70: rgba(245, 243, 241, 0.7); --COLOR-LINK-HOVER: rgba(245, 243, 241, 0.7); --COLOR-LINK-OPPOSITE: #000000; --COLOR-TEXT: #f5f3f1; --COLOR-TEXT-HOVER: rgba(245, 243, 241, 0.7); --COLOR-TEXT-LIGHT: #acaaa9; --COLOR-TEXT-DARK: #d9cdc0; --COLOR-TEXT-A5: rgba(245, 243, 241, 0.05); --COLOR-TEXT-A35: rgba(245, 243, 241, 0.35); --COLOR-TEXT-A50: rgba(245, 243, 241, 0.5); --COLOR-TEXT-A80: rgba(245, 243, 241, 0.8); --COLOR-BORDER: rgb(245, 243, 241); --COLOR-BORDER-LIGHT: #939291; --COLOR-BORDER-DARK: #cbc0b5; --COLOR-BORDER-HAIRLINE: #000000; --overlay-bg: #000000; /* === Bright color ===*/ --COLOR-ACCENT: #f5f3f1; --COLOR-ACCENT-HOVER: #d9cdc0; --COLOR-ACCENT-FADE: rgba(245, 243, 241, 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: #000000; --BTN-PRIMARY-TEXT: #f5f3f1; --BTN-PRIMARY-BORDER: #f5f3f1; --BTN-PRIMARY-BORDER-A70: rgba(245, 243, 241, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #0d0d0d; --BTN-SECONDARY-BG: #f5f3f1; --BTN-SECONDARY-TEXT: #000000; --BTN-SECONDARY-BORDER: #f5f3f1; --BTN-SECONDARY-BORDER-A70: rgba(245, 243, 241, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #eae6e2; --COLOR-BG-BRIGHTER: #1a1a1a; --COLOR-BG-ALPHA-25: rgba(0, 0, 0, 0.25); --COLOR-BG-TRANSPARENT: rgba(0, 0, 0, 0);--COLOR-FOOTER-BG-HAIRLINE: #080808; /* 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: #b0a38b; --COLOR-BG: #b0a38b; --COLOR-BG-RGB: 176, 163, 139; --COLOR-BG-ACCENT: #f5f2ec; --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: #212121; --COLOR-TEXT-HOVER: rgba(33, 33, 33, 0.7); --COLOR-TEXT-LIGHT: #4c4841; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(33, 33, 33, 0.05); --COLOR-TEXT-A35: rgba(33, 33, 33, 0.35); --COLOR-TEXT-A50: rgba(33, 33, 33, 0.5); --COLOR-TEXT-A80: rgba(33, 33, 33, 0.8); --COLOR-BORDER: rgb(243, 243, 243); --COLOR-BORDER-LIGHT: #d8d3c9; --COLOR-BORDER-DARK: #c0c0c0; --COLOR-BORDER-HAIRLINE: #aa9c82; --overlay-bg: #000000; /* === Bright color ===*/ --COLOR-ACCENT: #ab8c52; --COLOR-ACCENT-HOVER: #806430; --COLOR-ACCENT-FADE: rgba(171, 140, 82, 0.05); --COLOR-ACCENT-LIGHT: #e8d4ae; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #212121; --BTN-PRIMARY-TEXT: #ffffff; --BTN-PRIMARY-BORDER: #ffffff; --BTN-PRIMARY-BORDER-A70: rgba(255, 255, 255, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #2e2e2e; --BTN-SECONDARY-BG: #ab8c52; --BTN-SECONDARY-TEXT: #ffffff; --BTN-SECONDARY-BORDER: #ab8c52; --BTN-SECONDARY-BORDER-A70: rgba(171, 140, 82, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #9a7e4a; --COLOR-BG-BRIGHTER: #a6977c; --COLOR-BG-ALPHA-25: rgba(176, 163, 139, 0.25); --COLOR-BG-TRANSPARENT: rgba(176, 163, 139, 0);--COLOR-FOOTER-BG-HAIRLINE: #aa9c82; /* 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: #ffffff73; --COLOR-BG: #ffffff73; --COLOR-BG-RGB: 255, 255, 255; --COLOR-BG-ACCENT: #f5f2ec; --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: #2121218a; --COLOR-TEXT-HOVER: rgba(33, 33, 33, 0.7); --COLOR-TEXT-LIGHT: rgba(100, 100, 100, 0.52); --COLOR-TEXT-DARK: rgba(0, 0, 0, 0.54); --COLOR-TEXT-A5: rgba(33, 33, 33, 0.05); --COLOR-TEXT-A35: rgba(33, 33, 33, 0.35); --COLOR-TEXT-A50: rgba(33, 33, 33, 0.5); --COLOR-TEXT-A80: rgba(33, 33, 33, 0.8); --COLOR-BORDER: rgb(243, 243, 243); --COLOR-BORDER-LIGHT: rgba(248, 248, 248, 0.78); --COLOR-BORDER-DARK: #c0c0c0; --COLOR-BORDER-HAIRLINE: rgba(247, 247, 247, 0.45); --overlay-bg: #644d3e59; /* === Bright color ===*/ --COLOR-ACCENT: #ab8c52; --COLOR-ACCENT-HOVER: #806430; --COLOR-ACCENT-FADE: rgba(171, 140, 82, 0.05); --COLOR-ACCENT-LIGHT: #e8d4ae; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #212121; --BTN-PRIMARY-TEXT: #ffffff; --BTN-PRIMARY-BORDER: #212121; --BTN-PRIMARY-BORDER-A70: rgba(33, 33, 33, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #2e2e2e; --BTN-SECONDARY-BG: #ab8c52; --BTN-SECONDARY-TEXT: #ffffff; --BTN-SECONDARY-BORDER: #ab8c52; --BTN-SECONDARY-BORDER-A70: rgba(171, 140, 82, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #9a7e4a; --COLOR-BG-BRIGHTER: rgba(242, 242, 242, 0.45); --COLOR-BG-ALPHA-25: rgba(255, 255, 255, 0.25); --COLOR-BG-TRANSPARENT: rgba(255, 255, 255, 0);--COLOR-FOOTER-BG-HAIRLINE: rgba(247, 247, 247, 0.45); /* 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: #fcfbf9; --COLOR-BG: #fcfbf9; --COLOR-BG-RGB: 252, 251, 249; --COLOR-BG-ACCENT: #f5f2ec; --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: #212121; --COLOR-TEXT-HOVER: rgba(33, 33, 33, 0.7); --COLOR-TEXT-LIGHT: #636262; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(33, 33, 33, 0.05); --COLOR-TEXT-A35: rgba(33, 33, 33, 0.35); --COLOR-TEXT-A50: rgba(33, 33, 33, 0.5); --COLOR-TEXT-A80: rgba(33, 33, 33, 0.8); --COLOR-BORDER: rgb(209, 208, 206); --COLOR-BORDER-LIGHT: #e2e1df; --COLOR-BORDER-DARK: #a09e99; --COLOR-BORDER-HAIRLINE: #f7f4ef; --overlay-bg: #000000; /* === Bright color ===*/ --COLOR-ACCENT: #ab8c52; --COLOR-ACCENT-HOVER: #806430; --COLOR-ACCENT-FADE: rgba(171, 140, 82, 0.05); --COLOR-ACCENT-LIGHT: #e8d4ae; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #ffffff; --BTN-PRIMARY-TEXT: #212121; --BTN-PRIMARY-BORDER: #ffffff; --BTN-PRIMARY-BORDER-A70: rgba(255, 255, 255, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #f2f2f2; --BTN-SECONDARY-BG: #ab8c52; --BTN-SECONDARY-TEXT: #ffffff; --BTN-SECONDARY-BORDER: #ab8c52; --BTN-SECONDARY-BORDER-A70: rgba(171, 140, 82, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #9a7e4a; --COLOR-BG-BRIGHTER: #f4f0e8; --COLOR-BG-ALPHA-25: rgba(252, 251, 249, 0.25); --COLOR-BG-TRANSPARENT: rgba(252, 251, 249, 0);--COLOR-FOOTER-BG-HAIRLINE: #f7f4ef; /* 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: #f5f2ec; --COLOR-BG: #f5f2ec; --COLOR-BG-RGB: 245, 242, 236; --COLOR-BG-ACCENT: #f5f2ec; --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: #685a3f; --COLOR-TEXT-HOVER: rgba(104, 90, 63, 0.7); --COLOR-TEXT-LIGHT: #928873; --COLOR-TEXT-DARK: #3d321e; --COLOR-TEXT-A5: rgba(104, 90, 63, 0.05); --COLOR-TEXT-A35: rgba(104, 90, 63, 0.35); --COLOR-TEXT-A50: rgba(104, 90, 63, 0.5); --COLOR-TEXT-A80: rgba(104, 90, 63, 0.8); --COLOR-BORDER: rgb(209, 205, 196); --COLOR-BORDER-LIGHT: #dfdcd4; --COLOR-BORDER-DARK: #a49c8b; --COLOR-BORDER-HAIRLINE: #f0ebe2; --overlay-bg: #000000; /* === Bright color ===*/ --COLOR-ACCENT: #ab8c52; --COLOR-ACCENT-HOVER: #806430; --COLOR-ACCENT-FADE: rgba(171, 140, 82, 0.05); --COLOR-ACCENT-LIGHT: #e8d4ae; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #212121; --BTN-PRIMARY-TEXT: #ffffff; --BTN-PRIMARY-BORDER: #212121; --BTN-PRIMARY-BORDER-A70: rgba(33, 33, 33, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #2e2e2e; --BTN-SECONDARY-BG: #ab8c52; --BTN-SECONDARY-TEXT: #ffffff; --BTN-SECONDARY-BORDER: #ab8c52; --BTN-SECONDARY-BORDER-A70: rgba(171, 140, 82, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #9a7e4a; --COLOR-BG-BRIGHTER: #ece7db; --COLOR-BG-ALPHA-25: rgba(245, 242, 236, 0.25); --COLOR-BG-TRANSPARENT: rgba(245, 242, 236, 0);--COLOR-FOOTER-BG-HAIRLINE: #f0ebe2; /* 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: #eae6dd; --COLOR-BG: #eae6dd; --COLOR-BG-RGB: 234, 230, 221; --COLOR-BG-ACCENT: #f5f2ec; --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: #212121; --COLOR-TEXT-HOVER: rgba(33, 33, 33, 0.7); --COLOR-TEXT-LIGHT: #5d5c59; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(33, 33, 33, 0.05); --COLOR-TEXT-A35: rgba(33, 33, 33, 0.35); --COLOR-TEXT-A50: rgba(33, 33, 33, 0.5); --COLOR-TEXT-A80: rgba(33, 33, 33, 0.8); --COLOR-BORDER: rgb(209, 205, 196); --COLOR-BORDER-LIGHT: #dbd7ce; --COLOR-BORDER-DARK: #a49c8b; --COLOR-BORDER-HAIRLINE: #e4dfd4; --overlay-bg: #000000; /* === Bright color ===*/ --COLOR-ACCENT: #ab8c52; --COLOR-ACCENT-HOVER: #806430; --COLOR-ACCENT-FADE: rgba(171, 140, 82, 0.05); --COLOR-ACCENT-LIGHT: #e8d4ae; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #212121; --BTN-PRIMARY-TEXT: #ffffff; --BTN-PRIMARY-BORDER: #212121; --BTN-PRIMARY-BORDER-A70: rgba(33, 33, 33, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #2e2e2e; --BTN-SECONDARY-BG: #ab8c52; --BTN-SECONDARY-TEXT: #ffffff; --BTN-SECONDARY-BORDER: #ab8c52; --BTN-SECONDARY-BORDER-A70: rgba(171, 140, 82, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #9a7e4a; --COLOR-BG-BRIGHTER: #e0dacd; --COLOR-BG-ALPHA-25: rgba(234, 230, 221, 0.25); --COLOR-BG-TRANSPARENT: rgba(234, 230, 221, 0);--COLOR-FOOTER-BG-HAIRLINE: #e4dfd4; /* 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: #aecfb8; --COLOR-BG: #aecfb8; --COLOR-BG-RGB: 174, 207, 184; --COLOR-BG-ACCENT: #f5f2ec; --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: #212121; --COLOR-TEXT-HOVER: rgba(33, 33, 33, 0.7); --COLOR-TEXT-LIGHT: #4b554e; --COLOR-TEXT-DARK: #000000; --COLOR-TEXT-A5: rgba(33, 33, 33, 0.05); --COLOR-TEXT-A35: rgba(33, 33, 33, 0.35); --COLOR-TEXT-A50: rgba(33, 33, 33, 0.5); --COLOR-TEXT-A80: rgba(33, 33, 33, 0.8); --COLOR-BORDER: rgb(234, 234, 234); --COLOR-BORDER-LIGHT: #d2dfd6; --COLOR-BORDER-DARK: #b7b7b7; --COLOR-BORDER-HAIRLINE: #a4c9b0; --overlay-bg: #000000; /* === Bright color ===*/ --COLOR-ACCENT: #ab8c52; --COLOR-ACCENT-HOVER: #806430; --COLOR-ACCENT-FADE: rgba(171, 140, 82, 0.05); --COLOR-ACCENT-LIGHT: #e8d4ae; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #212121; --BTN-PRIMARY-TEXT: #ffffff; --BTN-PRIMARY-BORDER: #212121; --BTN-PRIMARY-BORDER-A70: rgba(33, 33, 33, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #2e2e2e; --BTN-SECONDARY-BG: #f5f2ec; --BTN-SECONDARY-TEXT: #212121; --BTN-SECONDARY-BORDER: #f5f2ec; --BTN-SECONDARY-BORDER-A70: rgba(245, 242, 236, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #ece7db; --COLOR-BG-BRIGHTER: #9ec6aa; --COLOR-BG-ALPHA-25: rgba(174, 207, 184, 0.25); --COLOR-BG-TRANSPARENT: rgba(174, 207, 184, 0);--COLOR-FOOTER-BG-HAIRLINE: #a4c9b0; /* 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: rgba(0,0,0,0); --COLOR-BG: rgba(0,0,0,0); --COLOR-BG-RGB: 0, 0, 0; --COLOR-BG-ACCENT: #f5f2ec; --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: #ffffff; --COLOR-TEXT-HOVER: rgba(255, 255, 255, 0.7); --COLOR-TEXT-LIGHT: rgba(179, 179, 179, 0.7); --COLOR-TEXT-DARK: #d9d9d9; --COLOR-TEXT-A5: rgba(255, 255, 255, 0.05); --COLOR-TEXT-A35: rgba(255, 255, 255, 0.35); --COLOR-TEXT-A50: rgba(255, 255, 255, 0.5); --COLOR-TEXT-A80: rgba(255, 255, 255, 0.8); --COLOR-BORDER: rgb(209, 205, 196); --COLOR-BORDER-LIGHT: rgba(125, 123, 118, 0.6); --COLOR-BORDER-DARK: #a49c8b; --COLOR-BORDER-HAIRLINE: rgba(0, 0, 0, 0.0); --overlay-bg: #000000; /* === Bright color ===*/ --COLOR-ACCENT: #ab8c52; --COLOR-ACCENT-HOVER: #806430; --COLOR-ACCENT-FADE: rgba(171, 140, 82, 0.05); --COLOR-ACCENT-LIGHT: #e8d4ae; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #212121; --BTN-PRIMARY-TEXT: #ffffff; --BTN-PRIMARY-BORDER: #ffffff; --BTN-PRIMARY-BORDER-A70: rgba(255, 255, 255, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #2e2e2e; --BTN-SECONDARY-BG: #ab8c52; --BTN-SECONDARY-TEXT: #ffffff; --BTN-SECONDARY-BORDER: #ab8c52; --BTN-SECONDARY-BORDER-A70: rgba(171, 140, 82, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #9a7e4a; --COLOR-BG-BRIGHTER: rgba(26, 26, 26, 0.0); --COLOR-BG-ALPHA-25: rgba(0, 0, 0, 0.25); --COLOR-BG-TRANSPARENT: rgba(0, 0, 0, 0);--COLOR-FOOTER-BG-HAIRLINE: rgba(8, 8, 8, 0.0); /* 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: rgba(0,0,0,0); --COLOR-BG: rgba(0,0,0,0); --COLOR-BG-RGB: 0, 0, 0; --COLOR-BG-ACCENT: #f5f2ec; --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: #ffffff; --COLOR-TEXT-HOVER: rgba(255, 255, 255, 0.7); --COLOR-TEXT-LIGHT: rgba(179, 179, 179, 0.7); --COLOR-TEXT-DARK: #d9d9d9; --COLOR-TEXT-A5: rgba(255, 255, 255, 0.05); --COLOR-TEXT-A35: rgba(255, 255, 255, 0.35); --COLOR-TEXT-A50: rgba(255, 255, 255, 0.5); --COLOR-TEXT-A80: rgba(255, 255, 255, 0.8); --COLOR-BORDER: rgb(209, 205, 196); --COLOR-BORDER-LIGHT: rgba(125, 123, 118, 0.6); --COLOR-BORDER-DARK: #a49c8b; --COLOR-BORDER-HAIRLINE: rgba(0, 0, 0, 0.0); --overlay-bg: #000000; /* === Bright color ===*/ --COLOR-ACCENT: #ab8c52; --COLOR-ACCENT-HOVER: #806430; --COLOR-ACCENT-FADE: rgba(171, 140, 82, 0.05); --COLOR-ACCENT-LIGHT: #e8d4ae; /* === Default Cart Gradient ===*/ --FREE-SHIPPING-GRADIENT: linear-gradient(to right, var(--COLOR-ACCENT-LIGHT) 0%, var(--accent) 100%); /* === Buttons ===*/ --BTN-PRIMARY-BG: #212121; --BTN-PRIMARY-TEXT: #ffffff; --BTN-PRIMARY-BORDER: #ffffff; --BTN-PRIMARY-BORDER-A70: rgba(255, 255, 255, 0.7); --BTN-PRIMARY-BG-BRIGHTER: #2e2e2e; --BTN-SECONDARY-BG: #ab8c52; --BTN-SECONDARY-TEXT: #ffffff; --BTN-SECONDARY-BORDER: #ab8c52; --BTN-SECONDARY-BORDER-A70: rgba(171, 140, 82, 0.7); --BTN-SECONDARY-BG-BRIGHTER: #9a7e4a; --COLOR-BG-BRIGHTER: rgba(26, 26, 26, 0.0); --COLOR-BG-ALPHA-25: rgba(0, 0, 0, 0.25); --COLOR-BG-TRANSPARENT: rgba(0, 0, 0, 0);--COLOR-FOOTER-BG-HAIRLINE: rgba(8, 8, 8, 0.0); /* 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: var(--text); background: var(--bg); } :root { --scrollbar-width: 0px; /* === Product grid badges ===*/ --COLOR-SALE-BG: #f7e9de; --COLOR-SALE-TEXT: #212121; --COLOR-BADGE-BG: rgba(0,0,0,0); --COLOR-BADGE-TEXT: #000000; --COLOR-SOLD-BG: rgba(0,0,0,0); --COLOR-SOLD-TEXT: #939393; --COLOR-NEW-BADGE-BG: rgba(0,0,0,0); --COLOR-NEW-BADGE-TEXT: #000000; --COLOR-PREORDER-BG: rgba(0,0,0,0); --COLOR-PREORDER-TEXT: #000000; /* === Quick Add ===*/ --COLOR-QUICK-ADD-BG: #f5f3f1; --COLOR-QUICK-ADD-BG-BRIGHTER: #eae6e2; --COLOR-QUICK-ADD-TEXT: #000000; /* === Product sale color ===*/ --COLOR-SALE: #212121; /* === 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: #212121; --COLOR-HEADER-LINK-HOVER: #212121; --COLOR-MENU-BG: #fcfbf9; --COLOR-SUBMENU-BG: #fcfbf9; --COLOR-SUBMENU-LINK: #212121; --COLOR-SUBMENU-LINK-HOVER: rgba(33, 33, 33, 0.7); --COLOR-SUBMENU-TEXT-LIGHT: #636262; --COLOR-MENU-TRANSPARENT: #fcfbf9; --COLOR-MENU-TRANSPARENT-HOVER: #fcfbf9; --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( "//verafiedny.com/cdn/shop/t/41/assets/icon-zoom-in.svg?v=182473373117644429561767893262" ); --ICON-ZOOM-OUT: url( "//verafiedny.com/cdn/shop/t/41/assets/icon-zoom-out.svg?v=101497157853986683871767893262" ); /* === Custom Icons ===*/ --ICON-ADD-BAG: url( "//verafiedny.com/cdn/shop/t/41/assets/icon-add-bag.svg?v=23763382405227654651767893262" ); --ICON-ADD-CART: url( "//verafiedny.com/cdn/shop/t/41/assets/icon-add-cart.svg?v=3962293684743587821767893262" ); --ICON-ARROW-LEFT: url( "//verafiedny.com/cdn/shop/t/41/assets/icon-nav-arrow-left.svg?v=106782211883556531691767893262" ); --ICON-ARROW-RIGHT: url( "//verafiedny.com/cdn/shop/t/41/assets/icon-nav-arrow-right.svg?v=159363876971816882971767893262" ); --ICON-SELECT: url("//verafiedny.com/cdn/shop/t/41/assets/icon-select.svg?v=150573211567947701091767893262"); --PRODUCT-GRID-ASPECT-RATIO: 120.0%; /* === Typography ===*/ --FONT-HEADING-MINI: 12px; --FONT-HEADING-X-SMALL: 16px; --FONT-HEADING-SMALL: 21px; --FONT-HEADING-MEDIUM: 36px; --FONT-HEADING-LARGE: 48px; --FONT-HEADING-X-LARGE: 60px; --FONT-HEADING-MINI-MOBILE: 12px; --FONT-HEADING-X-SMALL-MOBILE: 15px; --FONT-HEADING-SMALL-MOBILE: 20px; --FONT-HEADING-MEDIUM-MOBILE: 24px; --FONT-HEADING-LARGE-MOBILE: 32px; --FONT-HEADING-X-LARGE-MOBILE: 45px; --FONT-STACK-BODY: Jost, sans-serif; --FONT-STYLE-BODY: normal; --FONT-WEIGHT-BODY: 400; --FONT-WEIGHT-BODY-BOLD: 500; --LETTER-SPACING-BODY: 0.0em; --FONT-STACK-HEADING: "EB Garamond", serif; --FONT-WEIGHT-HEADING: 400; --FONT-STYLE-HEADING: normal; --FONT-UPPERCASE-HEADING: none; --LETTER-SPACING-HEADING: 0.0em; --FONT-STACK-SUBHEADING: Jost, sans-serif; --FONT-WEIGHT-SUBHEADING: 400; --FONT-STYLE-SUBHEADING: normal; --FONT-SIZE-SUBHEADING-DESKTOP: 14px; --FONT-SIZE-SUBHEADING-MOBILE: 14px; --FONT-UPPERCASE-SUBHEADING: uppercase; --LETTER-SPACING-SUBHEADING: 0.0em; --FONT-STACK-NAV: "EB Garamond", serif; --FONT-WEIGHT-NAV: 400; --FONT-WEIGHT-NAV-BOLD: 500; --FONT-STYLE-NAV: normal; --FONT-SIZE-NAV: 16px; --LETTER-SPACING-NAV: 0.0em; --FONT-SIZE-BASE: 15px; /* === Parallax ===*/ --PARALLAX-STRENGTH-MIN: 120.0%; --PARALLAX-STRENGTH-MAX: 130.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.375; /* Equals to line-height: normal; */--SIDEBAR-WIDTH: 288px; --SIDEBAR-WIDTH-MEDIUM: 258px;--DRAWER-WIDTH: 380px;--ICON-STROKE-WIDTH: 1px; /* === Button General ===*/ --BTN-FONT-STACK: "EB Garamond", serif; --BTN-FONT-WEIGHT: 400; --BTN-FONT-STYLE: italic; --BTN-FONT-SIZE: 14px; --BTN-SIZE-SMALL: 7px; --BTN-SIZE-MEDIUM: 12px; --BTN-SIZE-LARGE: 16px;--BTN-FONT-SIZE-BODY: 0.9333333333333333rem; --BTN-LETTER-SPACING: 0.0em; --BTN-UPPERCASE: none; --BTN-TEXT-ARROW-OFFSET: 0px; /* === 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.5rem; --swatch-size-product: 3.0rem; } /* === Backdrop ===*/ ::backdrop { --underlay-opacity: 1; --underlay-bg: rgba(0,0,0,0.4); } /* === Gray background on Product grid items ===*/ .cart__item__image a::before, .product__photo::before, .product__thumb__link::before, .product-item__image::before, .product-upsell__image__thumb::before, .pswp__img::before, .pswp__thumb::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .025); pointer-events: none; } *, *::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%; }