/* ========================================================= RESET Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ ========================================================= */ /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Prevent font size inflation */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Remove default margin in favour of better control in authored CSS */ :is(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin-block: 0; } figure { margin-inline: 0; } body { margin: 0; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role="list"], ol[role="list"] { list-style: none; } /* Set core body defaults */ body { min-height: 100vh; line-height: 1.5; } /* Set shorter line heights on headings and interactive elements */ :is(h1, h2, h3, h4, button, input, label) { line-height: 1.1; } /* Balance text wrapping on headings */ /* :is(h1, h2, h3, h4) { text-wrap: balance; } */ /* A elements that don't have a class get default styles */ a:not([class]) { /* color: currentColor; */ -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } /* Make images easier to work with */ :is(img, picture) { display: block; max-width: 100%; height: auto; } svg:not([class]) { width: auto; height: 1lh; } svg { flex-shrink: 0; } /* :is(video, iframe[src*='youtube'], iframe[src*='vimeo']) { display: block; aspect-ratio: 16/9; width: 100%; height: auto; } */ /* Inherit fonts for inputs and buttons */ :is(input, button, textarea, select) { font: inherit; } /* Make sure textareas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } /* ========================================================= FONTS ========================================================= */ /* MARK: Roboto Condensed ----------------------------------------------- */ /* roboto-condensed-100 - latin */ @font-face { font-style: normal; font-weight: 100; src: url('/assets/fonts/stickybusiness/roboto-condensed-v31-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Roboto Condensed'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* roboto-condensed-100italic - latin */ @font-face { font-style: italic; font-weight: 100; src: url('/assets/fonts/stickybusiness/roboto-condensed-v31-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Roboto Condensed'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* roboto-condensed-300 - latin */ @font-face { font-style: normal; font-weight: 300; src: url('/assets/fonts/stickybusiness/roboto-condensed-v31-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Roboto Condensed'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* roboto-condensed-300italic - latin */ @font-face { font-style: italic; font-weight: 300; src: url('/assets/fonts/stickybusiness/roboto-condensed-v31-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Roboto Condensed'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* roboto-condensed-regular - latin */ @font-face { font-style: normal; font-weight: 400; src: url('/assets/fonts/stickybusiness/roboto-condensed-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Roboto Condensed'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* roboto-condensed-italic - latin */ @font-face { font-style: italic; font-weight: 400; src: url('/assets/fonts/stickybusiness/roboto-condensed-v31-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Roboto Condensed'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* roboto-condensed-500 - latin */ @font-face { font-style: normal; font-weight: 500; src: url('/assets/fonts/stickybusiness/roboto-condensed-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Roboto Condensed'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* roboto-condensed-500italic - latin */ @font-face { font-style: italic; font-weight: 500; src: url('/assets/fonts/stickybusiness/roboto-condensed-v31-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Roboto Condensed'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* roboto-condensed-700 - latin */ @font-face { font-style: normal; font-weight: 700; src: url('/assets/fonts/stickybusiness/roboto-condensed-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Roboto Condensed'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* roboto-condensed-700italic - latin */ @font-face { font-style: italic; font-weight: 700; src: url('/assets/fonts/stickybusiness/roboto-condensed-v31-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Roboto Condensed'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* MARK: Lato ----------------------------------------------- */ /* lato-regular - latin */ @font-face { font-style: normal; font-weight: 400; src: url('/assets/fonts/stickybusiness/lato-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Lato'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* lato-italic - latin */ @font-face { font-style: italic; font-weight: 400; src: url('/assets/fonts/stickybusiness/lato-v25-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Lato'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* lato-700 - latin */ @font-face { font-style: normal; font-weight: 700; src: url('/assets/fonts/stickybusiness/lato-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Lato'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* lato-700italic - latin */ @font-face { font-style: italic; font-weight: 700; src: url('/assets/fonts/stickybusiness/lato-v25-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Lato'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* lato-900 - latin */ @font-face { font-style: normal; font-weight: 900; src: url('/assets/fonts/stickybusiness/lato-v25-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Lato'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* lato-900italic - latin */ @font-face { font-style: italic; font-weight: 900; src: url('/assets/fonts/stickybusiness/lato-v25-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: 'Lato'; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* ========================================================= VARIABLES (Custom properties) ========================================================= */ :root { /* MARK: Fonts ----------------------------------------------- */ --font-body: "Lato", "Helvetica Neue", "Helvetica", sans-serif; --font-display: "Roboto Condensed", "Helvetica Neue", "Helvetica", sans-serif; /* --font-monospace: monospace; */ /* MARK: Font sizes ----------------------------------------------- */ /* @link https://utopia.fyi/type/calculator?c=360,15,1.2,1280,16,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ --fs--2: clamp(0.64rem, 0.6554rem + -0.0192vw, 0.651rem); --fs--1: clamp(0.7813rem, 0.7739rem + 0.0326vw, 0.8rem); --fs-0: clamp(0.9375rem, 0.913rem + 0.1087vw, 1rem); --fs-1: clamp(1.125rem, 1.0761rem + 0.2174vw, 1.25rem); --fs-2: clamp(1.35rem, 1.2668rem + 0.3696vw, 1.5625rem); --fs-3: clamp(1.62rem, 1.4896rem + 0.5793vw, 1.9531rem); --fs-4: clamp(1.944rem, 1.7494rem + 0.8651vw, 2.4414rem); --fs-5: clamp(2.3328rem, 2.0515rem + 1.2504vw, 3.0518rem); --fs-6: clamp(2.7994rem, 2.4021rem + 1.7658vw, 3.8147rem); --fs-7: clamp(3.3592rem, 2.8078rem + 2.4507vw, 4.7684rem); /* MARK: Leading / line-height ----------------------------------------------- */ --leading-micro: 0.85; --leading-flat: 1; --leading-fine: 1.2; --leading-standard: 1.4; --leading-loose: 1.6; /* MARK: Spacing ----------------------------------------------- */ /* @link https://utopia.fyi/space/calculator?c=360,15,1.2,1280,16,1.25,7,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|7,s-l&g=s,l,xl,12 */ --space-3xs: clamp(0.25rem, 0.25rem + 0vw, 0.25rem); --space-2xs: clamp(0.5rem, 0.5rem + 0vw, 0.5rem); --space-xs: clamp(0.6875rem, 0.663rem + 0.1087vw, 0.75rem); --space-s: clamp(0.9375rem, 0.913rem + 0.1087vw, 1rem); --space-m: clamp(1.4375rem, 1.413rem + 0.1087vw, 1.5rem); --space-l: clamp(1.875rem, 1.8261rem + 0.2174vw, 2rem); --space-xl: clamp(2.8125rem, 2.7391rem + 0.3261vw, 3rem); --space-2xl: clamp(3.75rem, 3.6522rem + 0.4348vw, 4rem); --space-3xl: clamp(5.625rem, 5.4783rem + 0.6522vw, 6rem); --space-4xl: clamp(6.5625rem, 6.3913rem + 0.7609vw, 7rem); /* One-up pairs */ --space-3xs-2xs: clamp(0.25rem, 0.1522rem + 0.4348vw, 0.5rem); --space-2xs-xs: clamp(0.5rem, 0.4022rem + 0.4348vw, 0.75rem); --space-xs-s: clamp(0.6875rem, 0.5652rem + 0.5435vw, 1rem); --space-s-m: clamp(0.9375rem, 0.7174rem + 0.9783vw, 1.5rem); --space-m-l: clamp(1.4375rem, 1.2174rem + 0.9783vw, 2rem); --space-l-xl: clamp(1.875rem, 1.4348rem + 1.9565vw, 3rem); --space-xl-2xl: clamp(2.8125rem, 2.3478rem + 2.0652vw, 4rem); --space-2xl-3xl: clamp(3.75rem, 2.8696rem + 3.913vw, 6rem); --space-3xl-4xl: clamp(5.625rem, 5.087rem + 2.3913vw, 7rem); /* Custom pairs */ --space-s-l: clamp(0.9375rem, 0.5217rem + 1.8478vw, 2rem); /* MARK: Content & gutter spacing ----------------------------------------------- */ --content-width: 92.5rem; /* 1480px */ --content-outer-padding: clamp(1.5rem, 4vw, 3rem); --content-outer-padding-fixed: 3rem; --flow-space: var(--space-s); --gutter: var(--space-m); /* MARK: Colors ----------------------------------------------- */ /* Brand colors */ --blue: #4890CA; --blue-a11y: #3D7AB7; --navy: #0F456D; --dark-navy: #0A3655; --green: #61BA4D; --green-a11y: #31871E; --purple: #AAA0CB; --purple-text: #806CAD; --purple-a11y: #7762A7; --teal: #73CCD3; --teal-a11y: #5AA0A5; --orange: #EF7136; --orange-a11y: #ED7036; --orange-text: #C64A10; --gray: #B2B7BB; --light-gray: #F0F1F1; --black: #121213; --red: #d41e25; /* Neutrals */ --gray-50: #F7F8F8; --gray-100: var(--light-gray); --gray-200: #E0E2E4; --gray-300: #D2D4D6; --gray-400: #C1C5C9; --gray-500: var(--gray); --gray-600: #8E9296; --gray-700: #6C6E70; --gray-800: #525456; --gray-900: #353738; --gray-950: var(--black); --blue-50: #F3F7FC; --blue-500: var(--blue); --red-50: #FEF2F2; --red-600: var(--red); /* Utility colors */ /* Semantic colors */ --text-color: var(--gray-700); /* MARK: Strokes/borders ----------------------------------------------- */ --stroke-1: 1px solid; --stroke-1-dashed: 1px dashed; /* MARK: Border radius ----------------------------------------------- */ --radius-circle: 50%; --radius-s: 0.25rem; --radius-m: 0.75rem; --radius-l: 2.5rem; /* MARK: Transitions ----------------------------------------------- */ --transition-base: 500ms ease; --transition-movement: 200ms linear; --transition-fade: 450ms ease-in-out; --transition-bounce: 550ms cubic-bezier(0.5, 0.05, 0.2, 1.5); /* MARK: z-index ----------------------------------------------- */ --z-below: -1; --z-base: 0; --z-above: 1; --z-navigation: calc(var(--z-above) + 10); --z-modal: calc(var(--z-navigation) + 100); } /* ========================================================= GLOBAL STYLES Low-specificity, global styles that apply to the whole project. Based on https://cube.fyi/css.html ========================================================= */ /* MARK: Body & Main ----------------------------------------------- */ body { display: flex; flex-direction: column; background: var(--navy); color: var(--gray-700); font-weight: 300; font-size: var(--fs-0); line-height: var(--leading-standard); font-family: var(--font-body); font-size-adjust: from-font; } body > :is(header, footer) { flex: 0; } body > main { flex: 1; background-color: white; -webkit-padding-after: var(--space-m); padding-block-end: var(--space-m); color: var(--gray-700); } body > main:has(.home-prose-box) { -webkit-padding-after: 0; padding-block-end: 0; } /* MARK: Links ----------------------------------------------- */ a { transition: all var(--transition-base); outline: none; border-bottom: 1px solid currentColor; color: var(--blue-a11y); text-decoration: none; } a:is(:hover, :active, :focus) { border-color: var(--green-a11y); color: var(--green-a11y); } /* MARK: Typography ----------------------------------------------- */ :is(h1, h2, h3, h4, h5, h6) { font-weight: 400; line-height: var(--leading-fine); } :is(h1, .h1) { color: var(--navy); font-weight: 700; font-size: var(--fs-2); font-family: var(--font-display); } :is(h1, .h1) strong { color: var(--blue-a11y); font-weight: 700; } h2 { color: var(--navy); font-weight: 700; font-size: var(--fs-2); } h2 strong { font-weight: 400; } :is(h3, .h3, h4, .h4, h5, .h5) { font-weight: 400; font-size: var(--fs-1); } :is(h6, .h6) { font-size: var(--fs-1); text-transform: uppercase; } strong { font-weight: 700; } address { font-size: var(--fs--1); } /* MARK: Text decoration & focus states ----------------------------------------------- */ /* Firefox is the only browser that doesn't outline the whole element unless you make it display: inline-block. That in itself causes multiple flow issues. We can detect it using its own vendor prefix and reduce focus offset. */ @supports (-moz-appearance: none) { :root { --focus-offset: 0.08em; } } ::-moz-selection { background: white; color: var(--purple); } ::selection { background: white; color: var(--purple); } /* ========================================================= SITE HEADER / NAVIGATION ========================================================= */ /* MARK: Header ----------------------------------------------- */ .site-header { --utility-font-size: var(--fs--1); --utility-icon-height: 24px; --utility-icon-gap: 0.25rem; --logo-min-width: 160px; --nav-block-padding: var(--space-xs); --nav-grid-cols: repeat(2, 1fr); --top-level-link-font-size: var(--fs-1); --arrow-rotation: -90deg; position: fixed; top: 0; z-index: var(--z-navigation); inset-inline: 0; background-color: var(--navy); } .site-header + main { -webkit-padding-before: 125px; padding-block-start: 125px; } .site-header[data-variant="checkout"] + main { -webkit-padding-before: 145px; padding-block-start: 145px; @media (width >= 768px) { -webkit-padding-before: 155px; padding-block-start: 155px; } @media (width >= 1024px) { -webkit-padding-before: 186px; padding-block-start: 186px; } } @media (width >= 1024px) { .site-header + main { -webkit-padding-before: 160px; padding-block-start: 160px; } } @media (width >= 1180px) { .site-header + main { -webkit-padding-before: 180px; padding-block-start: 180px; } } .site-header a { border: 0; } .site-header a:hover { cursor: pointer; } /* MARK: Utility / top portion ----------------------------------------------- */ .site-header .utility { display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: var(--gutter); background-color: var(--navy); padding-block: var(--space-2xs); } .site-header .utility > div:first-child { color: white; font-size: var(--utility-font-size); font-family: var(--font-display); letter-spacing: 1px; text-align: left; text-transform: uppercase; } .site-header .utility > div:first-child strong { display: block; } .site-header .utility > div:first-child span { display: none; } @media (width >= 1024px) { .site-header .utility > div:first-child span { display: inline-block; color: var(--gray-300); } } @media (width >= 640px) { .site-header .utility > div:first-child :is(strong, a) { display: inline-block; } } .site-header .utility > div:first-child a { color: var(--teal); } @media (width >= 1024px) { .site-header .utility > div:first-child a { border-bottom: 1px solid var(--teal); max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; } } .site-header .utility > div:first-child a:hover { border-color: var(--green); color: var(--green); } .site-header .utility > div:last-child { display: flex; justify-content: flex-end; align-items: center; gap: var(--utility-icon-gap); } .site-header .utility > div:last-child a { display: block; border: 0; color: white; } .site-header .utility > div:last-child a:hover { color: var(--teal); } .site-header .utility > div:last-child a:first-child span { display: none; } @media (width >= 480px) { .site-header .utility > div:last-child a:first-child { display: flex; align-items: center; gap: var(--space-2xs); -webkit-margin-end: var(--space-s); margin-inline-end: var(--space-s); border-right: 1px solid var(--teal); -webkit-padding-end: var(--space-m); padding-inline-end: var(--space-m); } .site-header .utility > div:last-child a:first-child span { display: block; color: inherit; font-size: var(--utility-font-size); font-family: var(--font-display); text-transform: uppercase; } .site-header .utility > div:last-child a:first-child svg { display: none; } } .site-header .utility > div:last-child svg { transition: fill var(--transition-base); fill: white; height: var(--utility-icon-height); } .site-header .utility > div:last-child a:hover svg { fill: var(--teal); } /* Search button/icon */ .site-header .utility button.open-search { margin: 0; border: 0; background-color: transparent; padding: 0; } .site-header .utility button.open-search svg { fill: white; } .site-header .utility button.open-search:hover { cursor: pointer; } .site-header .utility button.open-search:hover svg { fill: var(--teal); } /* MARK: Nav @ any breakpoint ----------------------------------------------- */ .site-header nav { background-color: white; padding-block: var(--nav-block-padding); } .site-header nav .center { display: grid; position: relative; grid-template-columns: var(--nav-grid-cols); align-items: center; gap: var(--gutter); } .site-header nav a.upper { color: var(--blue-a11y); text-transform: uppercase; } .site-header nav .menu { font-weight: 400; font-family: var(--font-display); } /* Top level */ .site-header nav a.parent { display: flex; align-items: center; gap: 0.5rem; color: var(--blue-a11y); letter-spacing: 0.025em; } .site-header nav a.parent, .site-header nav li:is(.no-children, .emphasize) a { font-size: var(--top-level-link-font-size); } .site-header nav a.parent::before { display: inline-block; rotate: var(--arrow-rotation); transition: rotate var(--transition-movement); background-image: url("/assets/images/icon-downArrow.png"); background-position: center; background-repeat: no-repeat; width: 9px; height: 5px; content: ""; } .site-header nav a.parent[aria-expanded="true"]::before { --arrow-rotation: 0; } /* Other links */ .site-header nav li .button { --button-bg-hover: var(--navy); --button-padding: var(--space-2xs) var(--space-xl); /* background-color: var(--navy); */ } /* MARK: Mobile nav ----------------------------------------------- */ @media (width < 1024px) { .site-header nav .logo { display: block; border: 0; min-width: var(--logo-min-width); max-width: 180px; } .site-header nav .menu-button-container button { --bg-color: var(--blue); display: block; transition: background-color var(--transition-base); cursor: pointer; margin: 0 0 0 auto; border: 0; border-radius: var(--radius-circle); background-color: var(--bg-color); padding: 5px; width: 36px; height: 36px; } .site-header nav button:hover { --bg-color: var(--green); } .site-header nav button .icon { --bar-spacing: 4px; display: grid; position: relative; place-content: center; margin: 0; } .site-header nav button .icon span { display: block; border-radius: 3px; background-color: white; width: 18px; height: 2px; } /* .site-header nav button .icon span:nth-child(1) {} */ .site-header nav button .icon span:nth-child(2) { -webkit-margin-before: var(--bar-spacing); margin-block-start: var(--bar-spacing); } .site-header nav button .icon span:nth-child(3) { -webkit-margin-before: var(--bar-spacing); margin-block-start: var(--bar-spacing); } /* Menu */ .site-header nav .menu { display: none; position: absolute; top: 100%; z-index: var(--z-navigation); inset-inline: 0; background-color: white; } .site-header nav .menu > ul > li > a { font-size: var(--fs-1); } .site-header nav .menu > ul > li + li { -webkit-margin-before: var(--space-xs); margin-block-start: var(--space-xs); } .site-header nav ul { padding-inline: var(--gutter); padding-block: var(--space-s); } /* Submenu level 1 */ .site-header nav .submenu-level1 { display: none; background-color: var(--blue); padding: 0; } .site-header nav .submenu-level1 > li a { display: block; padding-inline: calc(9px + 0.5rem); /* parent icon width + gap */ padding-block: 0.25rem; color: white; } .site-header nav .submenu-level1 > li a.submenu-parent { display: flex; justify-content: space-between; align-items: center; } .site-header nav .submenu-level1 > li > a.submenu-parent::after { display: inline-block; rotate: -90deg; transition: rotate var(--transition-movement); background-image: url("/assets/images/icon-downArrow.png"); background-position: center; background-repeat: no-repeat; width: 9px; height: 5px; content: ""; } .site-header nav .submenu-level1 > li > a.submenu-parent[aria-expanded="true"]::after { rotate: 0deg; } /* Submenu level 2 */ .site-header nav .submenu-level2 { display: none; background: var(--dark-navy); padding: 0; } .site-header nav .submenu-level2 > li:not(:last-child) { border-bottom: 1px solid var(--navy); } /* Other links */ .site-header nav li.no-children { padding-inline: calc(9px + 0.5rem); /* parent icon width + gap */ } .site-header nav li.emphasize { -webkit-margin-before: var(--space-m) !important; margin-block-start: var(--space-m) !important; } .site-header nav li.emphasize a { display: block; } } /* MARK: Desktop nav ----------------------------------------------- */ @media (width >= 1024px) { .site-header { --utility-font-size: var(--fs-0); --utility-icon-height: 30px; --utility-icon-gap: 0.75rem; --logo-min-width: 100%; --nav-block-padding: var(--space-m); --nav-grid-cols: 180px auto; --top-level-link-font-size: var(--fs-0); --menu-ul-gap: var(--space-s); --menu-button-inline-padding: var(--space-xs); --submenu-width: 12.5rem; --submenu-links-padding: var(--space-2xs) 1.2rem; } .site-header nav .menu-button-container { display: none; } /* Arrows on parents */ .site-header nav a.parent::before { --arrow-rotation: 0deg; } .site-header nav a.parent[aria-expanded="true"]::before { --arrow-rotation: -90deg; } /* Menu - top level lists */ .site-header nav .menu > ul { display: flex; -moz-column-gap: var(--menu-ul-gap); column-gap: var(--menu-ul-gap); justify-content: flex-end; align-items: center; padding-inline: 0; } .site-header nav .menu ul:has(.submenu-level1) li { position: relative; } /* Position submenu-level1 */ .site-header nav .menu ul ul.submenu-level1 { display: none; position: absolute; top: 100%; left: 0; padding: 0.5rem 0 0 0; width: var(--submenu-width); } /* Show submenu-level1 on parent hover */ .site-header nav .menu ul > li:hover a + ul.submenu-level1 { display: block; } /* Style submenu-level1 links */ .site-header nav .menu ul ul.submenu-level1 li a { display: block; background-color: var(--blue); padding: var(--submenu-links-padding); color: white; } .site-header nav .menu ul ul.submenu-level1 li a:hover { background-color: var(--navy); } .site-header nav .menu ul ul.submenu-level1 li:has(.submenu-level2) > a { display: flex; justify-content: space-between; align-items: center; } .site-header nav .menu ul ul.submenu-level1 li:has(.submenu-level2) > a::after { display: inline-block; rotate: var(--arrow-rotation); transition: rotate var(--transition-movement); background-image: url("/assets/images/icon-downArrow.png"); background-position: center; background-repeat: no-repeat; width: 9px; height: 5px; content: ""; } .site-header nav .menu ul:has(.submenu-level2) li { position: relative; } /* Position submenu-level2 */ .site-header nav .menu ul.submenu-level2 { display: none; position: absolute; top: 0; left: 100%; padding: 0; width: var(--submenu-width); } /* Show submenu-level2 on parent hover */ .site-header nav .menu ul.submenu-level1 li:hover a + ul.submenu-level2 { display: block; } /* Style submenu-level2 links */ .site-header nav .menu ul ul.submenu-level2 li a { display: block; background-color: var(--navy); padding: var(--submenu-links-padding); color: white; line-height: var(--leading-fine); } .site-header nav .menu ul ul.submenu-level2 li a:hover { background-color: var(--dark-navy); } /* EZ Quote button */ .site-header nav li.emphasize a { padding-inline: var(--menu-button-inline-padding); padding-block: var(--space-2xs); } } @media (width >= 1080px) { .site-header { --menu-ul-gap: var(--space-l); } } @media (width >= 1180px) { .site-header { --nav-grid-cols: 250px auto; --menu-button-inline-padding: var(--space-2xs-xl); } } /* ========================================================= BUTTON COMPONENTS - SHARED ========================================================= */ /* MARK: Button group ---------------- */ .button-group { display: flex; -moz-column-gap: var(--space-s); column-gap: var(--space-s); row-gap: var(--space-xs); flex-wrap: wrap } .button-group[data-variant="center"] { justify-content: center; } .button-group[data-variant="spread"] { justify-content: space-between; } .button-group[data-variant="pagination"] { justify-content: space-between; -webkit-margin-before: var(--space-l); margin-block-start: var(--space-l); } /* MARK: Base/primary ---------------- */ .button { display: flex; justify-content: center; align-items: center; gap: var(--button-gap); transition: all var(--transition-base); cursor: pointer; /* for < button > */ border: 0; border-radius: var(--button-radius); background-color: var(--button-bg); padding: var(--button-padding); color: var(--button-color); font-weight: var(--button-font-weight); font-size: var(--button-font-size); font-family: var(--button-font); letter-spacing: var(--button-kerning); text-transform: var(--button-text-transform); } .button:hover { background-color: var(--button-bg-hover); color: var(--button-color-hover); } .button svg { fill: var(--button-color); } .button:hover svg { fill: var(--button-color-hover); } /* MARK: Search button ----------------------------------------------- */ .button[data-variant="open-search"] { margin: 0; border: 0; background-color: transparent; padding: 0; } /* ========================================================= BUTTON COMPONENTS - STICKY BUSINESS Green pill is primary/default ========================================================= */ :root { --button-bg: var(--green-a11y); --button-bg-hover: var(--teal); --button-radius: var(--radius-l); --button-color: white; --button-color-hover: white; --button-font: var(--font-display); --button-font-size: var(--fs-0); --button-font-weight: 500; --button-kerning: 0.0625em; --button-padding: var(--space-2xs) var(--space-m); --button-text-transform: uppercase; --button-gap: var(--space-2xs); } /* MARK: Pill variants ----------------------------------------------- */ .button[data-variant="pill-blue"] { --button-bg: var(--blue-a11y); } .button[data-variant="pill-navy"] { --button-bg: var(--navy); } .button[data-variant="pill-purple"] { --button-bg: var(--purple); } .button[data-variant="pill-white"] { --button-bg: white; --button-bg-hover: var(--navy); --button-color: var(--purple); --button-color-hover: var(--purple); } .button[data-variant="pill-gray"] { --button-bg: var(--gray); } /* MARK: Text button variants ----------------------------------------------- */ .button[data-variant^="text-"] { --button-bg: transparent; --button-bg-hover: transparent; --button-radius: 0; --button-font-weight: 400; --button-padding: 0; } .button[data-variant="text-green"] { --button-color: var(--green); } .button[data-variant="text-blue"] { --button-color: var(--blue-a11y); --button-color-hover: var(--purple); } .button[data-variant="text-navy"] { --button-color: var(--navy); --button-color-hover: var(--blue); } .button[data-variant="text-purple"] { --button-color: var(--purple); } .button[data-variant="text-gray"] { --button-color: var(--gray-700); --button-color-hover: var(--green); } /* MARK: Square button variants ----------------------------------------------- */ .button[data-variant^="square-"] { --button-radius: 0; } /* .button[data-variant="square-green"] { --button-color: var(--green); } .button[data-variant="square-blue"] { --button-color: var(--blue); } .button[data-variant="square-navy"] { --button-color: var(--navy); } */ .button[data-variant="square-purple"] { --button-bg: var(--purple); --button-bg-hover: var(--blue); --button-color: white; --button-color-hover: white; } /* MARK: Pagination variants ----------------------------------------------- */ .button-group[data-variant="pagination"] .button[data-variant] { --button-color: var(--green-a11y); --button-color-hover: var(--blue-a11y); } .button-group[data-variant="pagination"] a.prev svg { rotate: 180deg; } /* ========================================================= FORMS Form layout and extending global styles Basic markup example:
========================================================= */ /* MARK: Form heading Used on EZ Quote ----------------------------------------------- */ .form-heading { text-align: center; } .form-heading h2 { display: flex; justify-content: center; align-items: center; gap: var(--space-3xs); color: var(--green-a11y); font-size: var(--fs-3); } .form-heading h2 svg { width: 4rem; height: 4rem; } .form-heading span.emphasize { color: var(--navy); text-transform: uppercase; } .form-heading a[href^="tel"] { color: var(--red); } .form-heading a[href^="tel"]:hover { color: var(--green); } .form-heading p:last-child a { color: var(--navy); text-transform: uppercase; } /* There's a .flow composition, but this prevents forms from having to have that applied where markup is harder to control in certain systems. It still uses the --flow-space variables though to make managing space easier */ form { --form-flow-space: var(--space-s); --form-bg-color: var(--gray-50); --form-padding: var(--space-m); --field-border: 2px solid var(--purple-text); --field-bg: white; --field-padding: var(--space-2xs); --field-width: 100%; --field-color: var(--gray-800); background-color: var(--form-bg-color); padding: var(--form-padding); } form[data-variant="add-to-cart"] { --form-bg-color: transparent; --form-padding: 0; } /* MARK: Form container ----------------------------------------------- */ .form-container { display: grid; gap: var(--form-flow-space); container: formContainer / inline-size; } /* MARK: Field rows ----------------------------------------------- */ .field-row { display: grid; gap: var(--form-flow-space); } @container formContainer (width >= 512px) { #ezQuoteForm .field-row:not(:has(input[type="file"])) { --form-flow-space: var(--space-m); display: flex; } } @container formContainer (width >= 600px) { .field-row:not(:has(input[type="file"])) { --form-flow-space: var(--space-m); display: flex; } .field-row[data-variant="split-2-1"] { & .field-container:first-child { flex-basis: 67%; } & .field-container:last-child { flex-basis: 33%; } } } .field-row:has(h3) { -webkit-margin-before: var(--space-s); margin-block-start: var(--space-s); } .field-row:has(input[type="file"]) { --form-flow-space: 0; } /* MARK: Field containers ----------------------------------------------- */ .field-container { width: 100%; &:has(.label-with-tooltip) { position: relative; } } .field-row:has(.field-container[data-field-type="html"]) { -webkit-margin-before: var(--space-m); margin-block-start: var(--space-m); } .field-row:has(.field-container[data-field-type="html"]) + .field-row:has(.field-container[data-field-type="html"]) { -webkit-margin-before: 0; margin-block-start: 0; } .field-container[data-field-type="html"]:not(.artwork-header) :is(h2, h3) { border-top: 1px solid var(--purple); -webkit-padding-before: var(--space-xs); padding-block-start: var(--space-xs); color: var(--purple-text); font-weight: 400; font-size: var(--fs-1); font-family: var(--font-display); letter-spacing: 0.125em; text-transform: uppercase; } @media (width >= 1200px) { .field-container[data-field-type="html"]:not(.artwork-header) :is(h2, h3) { font-size: var(--fs-2); } } .field-container[data-field-type="html"] h3 { color: var(--purple-text); } .field-container[data-field-type="html"] h4 { font-size: var(--fs-2); } .field-row:has(.field-container[data-field-type="html"]) h3 + h4 { -webkit-margin-before: var(--space-s); margin-block-start: var(--space-s); } /* MARK: Label ----------------------------------------------- */ label { width: 100%; } .label { display: block; -webkit-margin-after: var(--space-3xs); margin-block-end: var(--space-3xs); } label, .label { color: var(--purple-a11y); font-weight: 400; line-height: var(--leading-fine); font-family: var(--font-display); text-transform: uppercase; } .label-with-tooltip { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; } .label-with-tooltip label { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .label-with-tooltip button { border: 0; background-color: transparent; padding: 0; width: 1rem; height: 1rem; color: var(--purple-a11y); } .label-with-tooltip button .tooltip-box { position: absolute; bottom: calc(100% + 4px); left: 0; visibility: hidden; opacity: 0; z-index: var(--z-navigation); filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3)); transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); background-color: white; padding: 0.5rem 1rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 100%; pointer-events: none; color: var(--blue-a11y); font-size: var(--fs-0); text-align: left; text-transform: none; } @media (hover: hover) { .label-with-tooltip button:hover .tooltip-box { visibility: visible; opacity: 1; } } .label-with-tooltip button:focus .tooltip-box { visibility: visible; opacity: 1; } /* Insert line break */ /* label::after { content: '\A'; white-space: pre; } */ /* MARK: Instructions ----------------------------------------------- */ div.field-instructions { font-style: italic; font-weight: 400; font-size: var(--fs-0); font-family: var(--font-display); } /* MARK: Inputs, select, textarea ----------------------------------------------- */ .input-group { display: flex; } /* Usually label wraps checkbox and radio buttons, so we give ourselves more layout and text-flow control with flex */ /* label:has(input) { display: flex; align-items: baseline; gap: var(--space-s); font-weight: 400; } */ /* label:has(input) + label:has(input) { --flow-spce: var(--space-s); } */ /* Slightly adjusts the vertical position of the check/radio */ /* label:has(input) input { transform: translateY(-0.1ex); } */ /* input:disabled { background: var(--color-mid); } */ /* input:disabled, label input:disabled + * { cursor: not-allowed; } */ :is(input:not([type="checkbox"], [type="radio"], [type="color"], [type="submit"]), select, textarea) { border: var(--field-border); background-color: var(--field-bg); padding: var(--field-padding); width: var(--field-width); color: var(--field-color); } :is(input:not([type="checkbox"], [type="radio"], [type="color"], [type="submit"]), select, textarea):focus { border-color: var(--black); } :is(input:not([type="checkbox"], [type="radio"], [type="color"], [type="submit"]), select, textarea)::-moz-placeholder { color: var(--navy); } :is(input:not([type="checkbox"], [type="radio"], [type="color"], [type="submit"]), select, textarea):-ms-input-placeholder { color: var(--navy); } :is(input:not([type="checkbox"], [type="radio"], [type="color"], [type="submit"]), select, textarea)::placeholder { color: var(--navy); } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } input[type="file"] + label { display: grid; cursor: pointer; border: 1px solid var(--purple-a11y); background-color: #e2e0e8; padding: 0; max-width: 420px; overflow: hidden; font-weight: 700; font-size: var(--fs-1); text-overflow: ellipsis; white-space: nowrap; } @container formContainer (width >= 422px) { input[type="file"] + label { grid-template-columns: repeat(2, 1fr); } } input[type="file"] + label span { padding: var(--space-2xs) var(--space-s); min-width: 200px; min-height: var(--space-xl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } input[type="file"] + label span.faux-button { display: flex; justify-content: center; align-items: center; gap: var(--space-2xs); background-color: var(--purple-text); height: 100%; color: white; } input[type="file"] + label svg { fill: currentColor; width: 1rem; height: 1rem; } select { --field-bg: var(--purple-text); --field-border: 2px solid var(--purple-a11y); --field-color: white; --field-padding: calc(var(--space-2xs) + var(--space-3xs)); font-weight: 400; font-size: var(--fs--1); font-family: var(--font-display); text-transform: uppercase; } /* Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* MARK: Radios & checkboxes ----------------------------------------------- */ .radio-group { display: flex; -moz-column-gap: var(--space-s); column-gap: var(--space-s); row-gap: var(--space-2xs); flex-wrap: wrap; -webkit-margin-before: var(--space-2xs); margin-block-start: var(--space-2xs); & > :is(div, label) { display: flex; -moz-column-gap: var(--space-2xs); column-gap: var(--space-2xs); align-items: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } & > :is(div, label) .label { text-transform: none; } & > :is(div, label) .price { color: var(--green-a11y); } :is(span, input) { margin: 0; } } /* MARK: Fieldset & legend ----------------------------------------------- */ fieldset { margin: 0; border: 0; padding: 0; } /* legend { padding-inline: var(--space-xs); font-weight: 500; } */ /* MARK: Buttons ----------------------------------------------- */ form .button-group { -webkit-margin-before: calc(var(--form-flow-space) * 2.5); margin-block-start: calc(var(--form-flow-space) * 2.5); } /* MARK: Freeform errors ----------------------------------------------- */ :is(input, select) + ul.freeform-errors { display: grid; gap: var(--space-2xs); margin: 0; background-color: var(--red); padding: var(--space-3xs) var(--space-2xs); color: white; font-size: var(--fs--1); list-style: none; } /* MARK: Add to cart form ----------------------------------------------- */ form[data-variant="add-to-cart"] div:has(.price) { display: flex; gap: var(--space-s); font-weight: 400; font-family: var(--font-display); text-transform: uppercase; & .price { color: var(--green-a11y); } & .quantity { color: var(--blue-a11y); } } form[data-variant="add-to-cart"] div:has(label) { display: flex; align-items: center; gap: var(--space-s); -webkit-margin-before: var(--space-xs); margin-block-start: var(--space-xs); & label { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; } & input { max-width: calc(7ch + var(--field-padding)); } & .button { --button-kerning: 0; margin-inline: auto 0; } } /* MARK: Parsley Validation (legacy) Used by: _freeFormEZQuote.twig, _customizableStock.twig Remove when all forms are migrated off Parsley ----------------------------------------------- */ .parsley-error-list, .errors { margin: 0; padding: 0; } .parsley-error-list li, .errors li { margin: 0.25em 0 0 0; padding: 0; color: #d41e25; font-size: 0.8em; list-style: none; text-transform: uppercase; } /* ========================================================= ALERTS / NOTICES ========================================================= */ .alert { --alert-bg: var(--gray-100); --alert-border-color: var(--gray); --alert-color: var(--gray-700); border: 1px solid var(--alert-border-color); background-color: var(--alert-bg); padding: var(--space-s); color: var(--alert-color); } .alert[data-variant="notice"] { --alert-bg: var(--blue-50); --alert-border-color: var(--blue); --alert-color: var(--blue-a11y); } .alert[data-variant="error"] { --alert-bg: var(--red-50); --alert-border-color: var(--red); --alert-color: var(--red); } /* ========================================================= BLOG SECTION ========================================================= */ /* MARK: Blog header ----------------------------------------------- */ .blog-header { font-family: var(--font-display); } .blog-header .kicker { font-weight: 400; letter-spacing: 0.125em; text-transform: uppercase; } .blog-header h1 { color: var(--green-a11y); font-size: var(--fs-4); } /* MARK: Blog articles grid ----------------------------------------------- */ .blog-articles-grid.grid-constrained { --grid-max-col-count: 2; --grid-min-col-size: 290px; --grid-gap: calc(var(--gutter) + 1rem); } .blog-articles-grid { -webkit-margin-before: var(--space-xl); margin-block-start: var(--space-xl); } /* MARK: Blog teaser ----------------------------------------------- */ .blog-teaser { --blog-teaser-heading-size: var(--fs-3); --blog-teaser-heading-color: var(--navy); --blog-teaser-heading-color-hover: var(--green); --blog-teaser-excerpt-size: var(--fs-0); display: grid; gap: var(--space-xs); } .blog-teaser h2 { font-size: var(--blog-teaser-heading-size); & a { color: var(--blog-teaser-heading-color); } & a:hover { color: var(--blog-teaser-heading-color-hover); } } .blog-teaser .meta { display: flex; flex-wrap: wrap; order: -1; gap: var(--space-2xs); border-bottom: 1px solid var(--gray); -webkit-padding-after: var(--space-xs); padding-block-end: var(--space-xs); font-weight: 400; font-family: var(--font-display); letter-spacing: 0.0625em; text-transform: uppercase; } .blog-teaser .meta ul { display: flex; gap: var(--space-2xs); margin: 0; padding: 0; color: var(--gray-700); } .blog-teaser time { color: var(--navy); } .blog-teaser h2 a { border: 0; } .blog-teaser p { font-size: var(--blog-teaser-excerpt-size); } /* MARK: Featured teaser ----------------------------------------------- */ .blog-teaser[data-variant="featured"] { background-color: var(--gray-50); padding: var(--space-m); & a { color: var(--navy); } } * + .blog-teaser[data-variant="featured"] { -webkit-margin-before: var(--space-s); margin-block-start: var(--space-s); } /* MARK: Blog article ----------------------------------------------- */ .blog-article > *:last-child { -webkit-padding-after: var(--space-xl); padding-block-end: var(--space-xl); } .blog-article header { display: grid; gap: var(--space-m); } .blog-article header a { border: 0; } .blog-article header > div { display: flex; /* row-gap: var(--space-m); */ -moz-column-gap: var(--space-xs); column-gap: var(--space-xs); flex-wrap: wrap; order: -1; border-bottom: 1px solid var(--gray); -webkit-padding-after: var(--space-m); padding-block-end: var(--space-m); font-weight: 400; font-family: var(--font-display); text-transform: uppercase; } .blog-article header time span { color: var(--navy); } .blog-article header address { font-style: normal; font-size: inherit; } .blog-article header h1 { font-size: var(--fs-3); font-family: var(--font-body); } @media (width >= 1200px) { .blog-article header h1 { font-size: var(--fs-4); } } .blog-intro { color: var(--purple-text); font-size: var(--fs-2); } .blog-article figure { margin-inline: 0; } /* MARK: Recent articles (in sidebar) ----------------------------------------------- */ .recent-articles > * { --flow-space: var(--space-s); border-bottom: 1px solid var(--gray-100); -webkit-padding-after: var(--space-s); padding-block-end: var(--space-s); } .recent-articles h2 { border: 0; padding: 0; color: var(--gray-700); font-weight: 400; font-size: var(--fs-2); } .recent-articles .blog-teaser { --blog-teaser-heading-size: var(--fs-2); --blog-teaser-heading-color: var(--blue); --blog-teaser-excerpt-size: var(--fs--1); } /* MARK: Blog entry pagination ----------------------------------------------- */ .blog-entry-pagination a { border: 0; } .blog-entry-pagination .inner { -webkit-margin-after: var(--space-m); margin-block-end: var(--space-m); font-weight: 400; font-family: var(--font-display); text-transform: uppercase; } .blog-entry-pagination ul { display: flex; justify-content: space-between; gap: var(--space-m); -webkit-margin-after: var(--space-l); margin-block-end: var(--space-l); border: 2px solid var(--gray); border-width: 2px 0; padding: var(--space-m) 0; } .blog-entry-pagination li span { display: block; } .blog-entry-pagination li span:not(.nav-label) { text-transform: none; } @media (width < 768px) { .blog-entry-pagination li span:not(.nav-label) { display: none; } } .blog-entry-pagination li span.nav-label { display: flex; align-items: center; gap: var(--space-3xs); } .blog-entry-pagination li.next span.nav-label { margin-inline: auto 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .blog-entry-pagination li svg { height: 1rem; } .blog-entry-pagination li.prev svg { rotate: 180deg; } .blog-entry-pagination a.view-latest { display: block; margin-inline: auto; text-align: center; } .blog-entry-pagination a.view-latest svg { display: block; rotate: -90deg; margin-inline: auto; height: 1rem; } /* ========================================================= BREADCRUMB ========================================================= */ nav[aria-label="breadcrumbs"] { margin: 0 0 var(--space-s) 0; background-color: var(--gray-700); padding-block: var(--space-xs); & ol { display: flex; gap: var(--space-2xs); margin: 0; padding: 0; color: var(--navy); font-weight: 400; font-family: var(--font-display); text-transform: uppercase; } & ol li { display: flex; gap: var(--space-2xs); color: white; } & ol li :is(a, span) { color: white; border: 0; } & ol li a:hover { text-decoration: underline; } } /* ========================================================= BROWSE INTRO BLOCK ========================================================= */ /* MARK: Container ----------------------------------------------- */ .browse-intro { --flow-space: var(--space-3xs); --gap: var(--space-m); --block-padding: var(--space-m); --heading-font-size: var(--fs-2); --subheading-font-size: var(--fs-1); display: grid; gap: var(--gap); padding-block: var(--block-padding); } @media (width >= 768px) { .browse-intro { grid-template-columns: auto 35%; align-items: center; } } @media (width >= 1200px) { .browse-intro { --gap: var(--space-xl-2xl); --block-padding: var(--space-l-xl); --heading-font-size: var(--fs-3); grid-template-columns: auto 25%; } } /* MARK: Text content ----------------------------------------------- */ .browse-intro h2 { font-size: var(--heading-font-size); } .browse-intro .subheading { color: var(--gray-700); font-size: var(--subheading-font-size); } /* MARK: Button & nav ----------------------------------------------- */ .browse-intro nav { position: relative; } .browse-intro .button { --button-bg-hover: var(--blue); width: 100%; } .browse-intro .button svg { rotate: 90deg; height: 1rem; } ul.browse-list { display: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0 var(--gutter); width: 100%; } .browse-intro ul.browse-list.is-open { display: block; } ul.browse-list li a { display: block; border-bottom: 1px solid var(--gray-50); background-color: var(--blue); padding: var(--space-2xs) var(--space-s); color: white; font-weight: 400; font-size: var(--fs--1); font-family: var(--font-display); } ul.browse-list li:last-child a { border: 0; } ul.browse-list li a:hover { background-color: var(--navy); color: white; } /* ========================================================= CARDS ========================================================= */ /* MARK: Product card ----------------------------------------------- */ .product-card { --heading-size: var(--fs-1); display: flex; flex-direction: column; gap: var(--space-s); border: 2px solid var(--gray); padding: var(--space-m); } .product-card a { border: 0; } .product-card h2 { font-size: var(--heading-size); } .product-card p { --flow-space: var(--space-xs); font-size: var(--fs--1); } .product-card .button-group { --flow-space: var(--space-m); -webkit-margin-before: auto; margin-block-start: auto; } .product-card .button-group .button { --button-bg-hover: var(--teal); justify-content: space-between; width: 100%; } .product-card .button-group .button[data-variant^="text"] { --button-bg-hover: transparent; } .product-card .button-group .button:hover { -webkit-margin-end: 0.5rem; margin-inline-end: 0.5rem; } /* MARK: Review card ----------------------------------------------- */ .review-card { margin: 0; background-color: var(--gray-50); padding: var(--space-s); } .review-card a { color: var(--navy); } .review-card .review-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); } .review-card .review-meta div[role="img"] { color: var(--red); font-size: var(--fs-1); } .review-card .review-meta time { font-style: italic; font-size: var(--fs--1); } .review-card p { --flow-space: var(--space-2xs); } .review-card footer { --flow-space: var(--space-xs); } /* ========================================================= CART & CHECKOUT COMPONENTS/BLOCKS ========================================================= */ .t-cart #main-content { -webkit-padding-after: var(--space-3xl); padding-block-end: var(--space-3xl); } /* MARK: Checkout header ----------------------------------------------- */ .site-header[data-variant="checkout"] { border-bottom: 1px solid var(--gray-100); text-align: center; & nav[aria-label="Main"] .center { display: block; } & a { display: inline-block; border: 0; } & img { height: 45px; @media (width >= 768px) { height: 82px; } } } /* MARK: Checkout layout ----------------------------------------------- */ .checkout-layout { --cart-border: 1px solid var(--gray-100); margin-block: var(--space-2xl); & .cart-actions { display: flex; justify-content: space-between; gap: var(--gutter); border-bottom: var(--cart-border); -webkit-padding-after: var(--space-m); padding-block-end: var(--space-m); } & form { background-color: transparent; padding: 0; } } .checkout-layout[data-checkout-step="confirmation"] { text-align: center; & div.flow { -webkit-margin-before: var(--space-xl); margin-block-start: var(--space-xl); } & .button-group { --flow-space: var(--space-l); } } .t-checkout .checkout-layout .center { --content-width: 37.5rem; /* 600px */ } /* MARK: Cart (pseudo table) ----------------------------------------------- */ .cart { --col-product-width: 100%; --col-quantity-width: 50%; --col-price-width: 50%; --cart-row-flex-wrap: wrap; --cart-row-border: 1px solid var(--gray-100); --cart-row-justify-content: space-between; --cart-row-align-items: center; @media (width >= 768px) { --col-product-width: 50%; --col-quantity-width: 30%; --col-price-width: 20%; } & a { border: 0; } & ul { padding: 0; } } /* MARK: Cart header ----------------------------------------------- */ .cart header { display: none; font-weight: 400; font-family: var(--font-display); text-transform: uppercase; @media (width >= 768px) { display: flex; } & .col-price { color: var(--gray-700); text-align: right; } } /* MARK: Cart body ----------------------------------------------- */ /* .cart-body {} */ /* MARK: Cart row ----------------------------------------------- */ .cart-row { display: flex; flex-wrap: var(--cart-row-flex-wrap); justify-content: var(--cart-row-justify-content); align-items: var(--cart-row-align-items); border-bottom: var(--cart-row-border); padding-block: var(--space-2xs); @media (width >= 768px) { flex-wrap: nowrap; } & > div[class^="col-"] { padding: var(--space-xs); } } /* MARK: Cart product col ----------------------------------------------- */ .col-product { width: var(--col-product-width); & .product-info[data-variant="has-image"] { display: grid; grid-template-columns: 8.125rem auto; gap: var(--space-s); } & h2 { color: var(--gray-700); font-size: var(--fs-1); } & h2 a { color: var(--navy); } & ul { color: var(--purple-a11y); font-weight: 400; font-family: var(--font-display); } & ul li:nth-child(2) { -webkit-margin-before: var(--space-2xs); margin-block-start: var(--space-2xs); } } /* MARK: Cart qty col ----------------------------------------------- */ .col-quantity { width: var(--col-quantity-width); @media (width >= 768px) { & span.label { display: none; } } & input[type="number"] { max-width: 6ch; } & input + .button { -webkit-margin-before: var(--space-2xs); margin-block-start: var(--space-2xs); } & .button svg { width: 1rem; } } /* MARK: Cart price col ----------------------------------------------- */ .col-price { align-self: flex-end; width: var(--col-price-width); color: var(--blue); font-weight: 400; font-family: var(--font-display); text-align: right; @media (width >= 768px) { align-self: center; } } /* MARK: Cart footer ----------------------------------------------- */ .cart footer { -webkit-margin-before: var(--space-m); margin-block-start: var(--space-m); @media (width >= 768px) { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); } .input-group { @media (width >= 768px) { margin-inline: auto 0; max-width: 18.75rem; } } & input[name="couponCode"]::-moz-placeholder { font-size: var(--fs--1); text-transform: uppercase; } & input[name="couponCode"]:-ms-input-placeholder { font-size: var(--fs--1); text-transform: uppercase; } & input[name="couponCode"]::placeholder { font-size: var(--fs--1); text-transform: uppercase; } & .cart-totals { -webkit-margin-before: var(--space-m); margin-block-start: var(--space-m); text-align: right; } & .cart-totals .button { width: 100%; @media (width >= 768px) { margin-inline: auto 0; max-width: 18.75rem; } } & > div:first-child { @media (width >= 768px) { order: 2; } } & > div:last-child { -webkit-margin-before: var(--space-l); margin-block-start: var(--space-l); @media (width >= 768px) { order: 1; -webkit-margin-before: 0; margin-block-start: 0; } } & div:last-child p:has(svg) { display: flex; gap: var(--space-3xs); font-size: var(--fs-1); } & div:last-child svg { width: 1.25rem; } & .payment-methods ul { display: flex; gap: var(--space-2xs); margin-block: 0; } } /* MARK: Checkout progress ----------------------------------------------- */ .checkout-progress { counter-reset: progress-counter; margin: 0; border-bottom: 1px solid var(--gray-100); padding: 0 0 var(--space-xl); color: var(--gray-500); font-weight: 400; font-family: var(--font-display); list-style: none; text-align: center; @media (width >= 600px) { display: flex; justify-content: center; } & li { display: flex; justify-content: center; align-items: center; } & li::before { display: inline-block; counter-increment: progress-counter; margin-right: var(--space-3xs); width: 0.625rem; content: counter(progress-counter) "."; text-align: center; } & li.is-current { color: var(--navy); } } @media (width >= 600px) { .checkout-progress li:not(:last-child)::after { display: inline-block; margin-inline: var(--space-s); background-image: url('data:image/svg+xml,'); background-position: center; background-size: contain; background-repeat: no-repeat; width: 14px; height: 14px; content: ""; color: var(--gray-500); } } /* MARK: Email step ----------------------------------------------- */ .checkout-layout[data-checkout-step="email"] { & h1 { color: var(--gray-700); font-weight: 400; font-size: var(--fs-2); } & h1 + .field-row { -webkit-margin-before: var(--space-l); margin-block-start: var(--space-l); } & .button svg { width: 1em; } } /* MARK: Order summary ----------------------------------------------- */ .order-summary header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3xs); -webkit-margin-before: var(--space-xl); margin-block-start: var(--space-xl); & h2 { color: var(--gray-700); font-weight: 400; font-size: var(--fs-0); font-family: var(--font-display); letter-spacing: 0.0625em; text-transform: uppercase; } } .order-summary-details { --details-border: 1px solid var(--blue); --summary-bg: var(--blue); -webkit-margin-before: var(--space-s); margin-block-start: var(--space-s); border: var(--details-border); & summary { display: flex; justify-content: space-between; background-color: var(--summary-bg); padding: var(--space-2xs) var(--space-xs); color: white; font-size: var(--fs--1); letter-spacing: 0.0625em; list-style: none; text-transform: uppercase; &::-webkit-details-marker { display: none; } } & summary:hover { cursor: pointer; } & summary span:last-child::after { content: " +"; } & > div { padding: var(--space-s); } } .order-summary-details[open] { --details-border: 1px solid var(--gray-700); --summary-bg: var(--gray-700); & summary span:last-child::after { content: " -"; } } .order-summary-details .cart { @media (width >= 768px) { --col-product-width: 60%; --col-quantity-width: 20%; --col-price-width: 20%; --cart-row-flex-wrap: nowrap; --cart-row-align-items: flex-start; } & .col-product .product-info[data-variant="has-image"] { grid-template-columns: 6.25rem auto; gap: var(--space-2xs); } & .product-info h3 a { color: var(--navy); font-weight: 700; } & .product-info p:last-child { font-style: italic; } & .col-quantity { font-weight: 400; font-family: var(--font-display); } & .col-price { @media (width >= 768px) { align-self: flex-start; } } & footer { display: block; text-align: right; & > div:last-child { -webkit-margin-before: var(--space-s); margin-block-start: var(--space-s); } } } /* MARK: Forms Adjustments only; full styling is in src/css/shared/blocks/forms.css ----------------------------------------------- */ .order-summary + form { margin-block: var(--space-xl) var(--space-2xl); & h2 { color: var(--gray-700); font-weight: 400; font-family: var(--font-display); } & h2 + * { -webkit-margin-before: var(--space-l); margin-block-start: var(--space-l); } } .order-summary + h2 { margin-block: var(--space-xl) var(--space-s); color: var(--gray-700); font-weight: 400; font-family: var(--font-display); } #paypal-form + * { -webkit-margin-before: var(--space-m); margin-block-start: var(--space-m); } .payment-divider { position: relative; text-align: center; &::before { position: absolute; top: 50%; transform: translateY(-50%); inset-inline: 0; background-color: var(--gray-500); width: 100%; height: 1px; content: ""; } & span { position: relative; z-index: var(--z-above); background-color: white; padding-inline: var(--space-2xs); font-weight: 400; font-size: var(--fs-1); font-family: var(--font-display); text-transform: uppercase; } & + * { -webkit-margin-before: var(--space-m); margin-block-start: var(--space-m); } } .stripe-container { background-color: var(--gray-100); padding: var(--space-m); & header { @media (width >= 460px) { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); } } & h3 { font-weight: 700; } & ul { display: flex; gap: var(--space-xs); margin: var(--space-s) 0 0; padding: 0; @media (width >= 460px) { align-items: center; -webkit-margin-before: 0; margin-block-start: 0; } } & header + fieldset:has(#card_element) { -webkit-margin-before: var(--space-m); margin-block-start: var(--space-m); } & #card_element { background-color: white; padding: var(--space-xs); } } form#checkout-billing--update { -webkit-margin-before: var(--space-m); margin-block-start: var(--space-m); & h4 { font-weight: 700; font-size: var(--fs--1); } & .form-container { -webkit-margin-before: var(--space-xs); margin-block-start: var(--space-xs); } & .form-container label small { /* display: block; */ /* margin-inline-start: 1.575rem; */ color: var(--gray-700); font-family: var(--font-body); text-transform: none; } } .checkout-layout[data-checkout-step="payment"] .button-group { row-gap: var(--space-l); -webkit-margin-before: var(--space-m); margin-block-start: var(--space-m); & .button { width: 100%; } & .button[disabled="disabled"] { opacity: 0.4; } } /* ========================================================= FAQs ========================================================= */ /* MARK: FAQs container ----------------------------------------------- */ * + .faqs-container { --flow-space: var(--space-xl); } .faqs-container > h2 { font-weight: 400; font-size: var(--fs-3); } .faqs-container .button-group { --flow-space: var(--space-m); } /* MARK: TOC ----------------------------------------------- */ .faqs-group-toc { display: flex; gap: var(--space-m); background-color: var(--gray-50); padding: var(--space-l); } .faqs-group-toc a { border: 0; } /* MARK: FAQ set ----------------------------------------------- */ .faq-set { --flow-space: var(--space-m); } .faq-set h3 { color: var(--purple-a11y); font-size: var(--fs-2); } .faq-set h3 + * { -webkit-margin-before: var(--space-2xs); margin-block-start: var(--space-2xs); } /* ========================================================= HEROES ========================================================= */ /* MARK: Home hero ----------------------------------------------- */ .home-hero { --text-size: var(--fs-0); --text-size: var(--fs-0); --callout-icon-size: 60px; --callout-font-size: var(--fs--1); background-color: var(--gray-50); padding-block: var(--space-m); } @media (width >= 768px) { .home-hero { --text-size: var(--fs-1); --callout-icon-size: 80px; --callout-font-size: var(--fs-0); } } .home-hero .grid-constrained { --grid-max-col-count: 2; --grid-min-col-size: 370px; --grid-gap: var(--space-m-l); } @media (width >= 1024px) { .home-hero .grid-constrained { --grid-gap: var(--space-xl-2xl); } } /* Hero content */ .home-hero .hero-content h1 { font-size: var(--fs-4); line-height: var(--leading-fine); } .home-hero .hero-content > p { --flow-space: var(--space-3xs); color: var(--gray-700); font-size: var(--text-size); } .home-hero .hero-content .button-group { --flow-space: var(--space-m); } /* Hero content - callout */ .home-hero .callout { -webkit-margin-before: var(--space-m); margin-block-start: var(--space-m); background-color: white; padding: var(--space-m); max-width: 620px; color: var(--gray-700); font-weight: 400; font-size: var(--callout-font-size); font-family: var(--font-display); text-transform: uppercase; } .home-hero .callout .icon { float: right; -webkit-margin-start: var(--space-m); margin-inline-start: var(--space-m); -webkit-margin-after: var(--space-m); margin-block-end: var(--space-m); width: var(--callout-icon-size); height: var(--callout-icon-size); } .home-hero .callout .icon svg { fill: var(--gray); width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .home-hero .callout p:not(:first-of-type) { --flow-space: var(--space-s); } .home-hero .callout a { color: var(--blue-a11y); } /* Hero slider */ .hero-slider .splide__slide { -webkit-padding-after: var(--space-xl); padding-block-end: var(--space-xl); } /* Hide inactive slides from accessibility tools — fade type stacks slides via z-index/opacity, which causes false contrast positives on hidden content. */ .hero-slider .splide__slide:not(.is-active) { visibility: hidden; } .hero-slider .splide__pagination__page { border: 2px solid var(--gray); background: transparent; width: 16px; height: 16px; } .hero-slider .splide__pagination__page.is-active { transform: none; border-color: var(--blue); background: var(--blue); } /* ========================================================= MODALS ========================================================= */ /* MARK: Visibility ----------------------------------------------- */ .modal { --modal-overlay-bg: rgba(0 0 0 / 0.6); --modal-container-bg: white; --modal-container-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.25); --modal-container-radius: 0; --modal-container-padding: var(--space-l); --modal-container-max-width: 500px; --modal-container-width: auto; --modal-container-max-height: 100vh; --modal-container-height: auto; --modal-content-block-margin: var(--space-l); --modal-close-position-top: var(--space-3xs); --modal-close-position-right: var(--space-3xs); --modal-close-border: 0; --modal-close-bg: var(--navy); --modal-close-bg-hover: var(--green); --modal-close-width: 38px; --modal-close-height: 38px; /* --modal-close-font-size: var(--fs--1); */ --modal-close-icon-color: white; --modal-close-icon-color-hover: white; display: none; } .modal.is-open { display: block; } /* MARK: Micromodal basic styles ----------------------------------------------- */ .modal__overlay { display: grid; position: fixed; align-items: center; justify-items: center; z-index: var(--z-modal); inset: 0; background: var(--modal-overlay-bg); } .modal__container { display: grid; position: relative; align-content: center; box-shadow: var(--modal-container-box-shadow); border-radius: var(--modal-container-radius); background-color: var(--modal-container-bg); padding: var(--modal-container-padding); width: var(--modal-container-width); max-width: var(--modal-container-max-width); height: var(--modal-container-height); max-height: var(--modal-container-max-height); overflow-y: auto; } .modal__header { display: flex; justify-content: space-between; align-items: center; } .modal__close { display: grid; position: absolute; top: var(--modal-close-position-top); right: var(--modal-close-position-right); place-content: center; transition: background-color var(--transition-base); border: var(--modal-close-border); border-radius: var(--radius-circle); background-color: var(--modal-close-bg); width: var(--modal-close-width); height: var(--modal-close-height); font-size: var(--modal-close-font-size); } .modal__close svg { transition: color var(--transition-base); fill: currentColor; color: var(--modal-close-icon-color); } .modal__close:hover { cursor: pointer; background-color: var(--modal-close-bg-hover); } .modal__close:hover svg { color: var(--modal-close-icon-color-hover); } .modal__content { margin-block: var(--modal-content-block-margin); } /* MARK: Animation Style ----------------------------------------------- */ @-webkit-keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes mmslideIn { from { transform: translateY(15%); } to { transform: translateY(0); } } @keyframes mmslideIn { from { transform: translateY(15%); } to { transform: translateY(0); } } @-webkit-keyframes mmslideOut { from { transform: translateY(0); } to { transform: translateY(-10%); } } @keyframes mmslideOut { from { transform: translateY(0); } to { transform: translateY(-10%); } } .micromodal-slide { display: none; } .micromodal-slide.is-open { display: block; } .micromodal-slide[aria-hidden="false"] .modal__overlay { -webkit-animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1); animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1); } .micromodal-slide[aria-hidden="false"] .modal__container { -webkit-animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1); animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1); } .micromodal-slide[aria-hidden="true"] .modal__overlay { -webkit-animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1); animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1); } .micromodal-slide[aria-hidden="true"] .modal__container { -webkit-animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1); animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1); } .micromodal-slide .modal__container, .micromodal-slide .modal__overlay { will-change: transform; } /* MARK: Search modal ----------------------------------------------- */ #modal-search.modal { --modal-overlay-bg: transparent; --modal-container-bg: var(--gray-100); --modal-container-max-width: 100vw; --modal-container-width: 100%; --modal-container-max-height: 100dvh; --modal-container-height: 100%; --modal-container-padding: 0; } #modal-search.modal .modal__container { position: relative; } #modal-search.modal .modal__container > * { margin-inline: auto; padding-inline: var(--gutter); width: 100%; max-width: 900px; } /* Header */ @media (width < 768px) { #modal-search.modal .modal__header img { display: none; } } #modal-search.modal .modal__header img { margin-inline: auto; } /* Content */ #modal-search.modal .modal__content { -webkit-margin-before: var(--space-xl); margin-block-start: var(--space-xl); } #modal-search.modal .modal__content h2 { display: flex; justify-content: center; gap: var(--space-3xs); } @media (width >= 1200px) { #modal-search.modal .modal__content h2 { font-size: var(--fs-3); } } #modal-search.modal .modal__content h2 svg { fill: var(--purple-a11y); } #modal-search.modal .modal__content form { -webkit-margin-before: var(--space-l); margin-block-start: var(--space-l); } #modal-search.modal .modal__content .button-group { -webkit-margin-before: var(--space-l); margin-block-start: var(--space-l); } /* Footer */ #modal-search.modal .modal__footer { -webkit-margin-before: var(--space-xl); margin-block-start: var(--space-xl); } #modal-search.modal .modal__footer h3 { color: var(--navy); font-size: var(--fs-1); text-transform: uppercase; } #modal-search.modal .modal__footer p { color: var(--navy); font-size: var(--fs--1); } #modal-search.modal .modal__footer p span { color: var(--purple-a11y); } #modal-search.modal .modal__footer p a { border: 0; color: var(--blue); } #modal-search.modal .modal__footer p a.tel { color: var(--red); } #modal-search.modal .modal__close { --modal-close-position-top: var(--space-s); --modal-close-position-right: var(--space-s); } /* MARK: Custom product modal ----------------------------------------------- */ .custom-product-modal.modal .modal__close { --modal-close-bg: transparent; --modal-close-bg-hover: transparent; --modal-close-width: 38px; --modal-close-height: 38px; --modal-close-icon-color: var(--navy); --modal-close-icon-color-hover: var(--green); } .custom-product-modal.modal :is(h2, h3, h4) { color: var(--navy); font-weight: 700; } /* ========================================================= PRODUCTS ========================================================= */ /* MARK: Product grid The heavy lifting is done by .grid-constrained ----------------------------------------------- */ .product-grid.grid-constrained { --grid-max-col-count: 3; --grid-min-col-size: 18rem; align-content: flex-start; } /* MARK: Product details & description ----------------------------------------------- */ .product-details { display: grid; gap: var(--space-xl); -webkit-margin-before: var(--space-l); margin-block-start: var(--space-l); } @media (width >= 1200px) { .product-details { grid-template-columns: repeat(2, 1fr); } } .product-heading-with-kicker { display: grid; gap: var(--space-2xs); & p { color: var(--purple-a11y); font-size: var(--fs-2); letter-spacing: 0.125em; text-transform: uppercase; } & h1 { font-size: var(--fs-4); font-family: var(--font-body); } } .product-gallery-container + .product-description { -webkit-margin-before: var(--space-xl); margin-block-start: var(--space-xl); } .product-description h2 { color: var(--purple-text); font-weight: 400; font-size: var(--fs-2); } .product-description figure + * { --flow-space: var(--space-l); } @media (width >= 768px) { .product-description .button-group { display: none; } } .product-additional-info { -webkit-margin-before: var(--space-l); margin-block-start: var(--space-l); } /* MARK: Product gallery Mostly handled by Splide ----------------------------------------------- */ .product-gallery-container h2 { --flow-space: var(--space-m); color: var(--gray-700); font-weight: 400; font-size: var(--fs-1); } /* Thumbnail slider */ .product-gallery-thumbs { -webkit-padding-after: var(--space-l); padding-block-end: var(--space-l); } /* MARK: Product tabs area ----------------------------------------------- */ .product-tabs-container { -webkit-margin-before: var(--space-l); margin-block-start: var(--space-l); } .product-tabs-container h2 { color: var(--gray-700); font-weight: 400; font-size: var(--fs-1); } .product-tabs-nav { -webkit-margin-before: var(--space-s); margin-block-start: var(--space-s); padding-inline: 2.5rem; } .product-tabs-nav .splide__slide button { border: 1px solid var(--purple-a11y); background-color: white; padding: var(--space-2xs); width: 100%; min-height: 5rem; color: var(--blue); font-weight: 400; font-family: var(--font-display); text-transform: uppercase; } .product-tabs-nav .splide__slide button:hover { cursor: pointer; color: var(--purple-a11y); } .product-tabs-nav .splide__slide.is-tab-active button { background-color: var(--purple-a11y); color: white; } .product-tabs-images { -webkit-margin-before: var(--space-l); margin-block-start: var(--space-l); } /* Prev/next */ .product-tabs-nav .splide__arrow { background-color: transparent; color: var(--purple-a11y); } .product-tabs-nav .splide__arrow--prev { left: 0; } .product-tabs-nav .splide__arrow--next { right: 0; } .product-tabs-nav .splide__arrow svg { display: none; } .product-tabs-nav .splide__arrow::after { -webkit-mask-image: url("/assets/images/icon-regular-ArrowRightsvg.svg"); mask-image: url("/assets/images/icon-regular-ArrowRightsvg.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor; width: 1.5rem; height: 1.5rem; content: ""; } .product-tabs-nav .splide__arrow--prev::after { transform: scaleX(-1); } /* MARK: Multi-product landing ----------------------------------------------- */ .multi-product-intro.grid-constrained { align-items: center; @media (width >= 640px) { &[data-variant="split-60-40"] { grid-template-columns: 60% auto; } } } .multi-product-intro .prose { font-size: var(--fs-1); & h1 { font-size: var(--fs-4); font-family: var(--font-body); } } .grid-constrained:has(.multi-product-cta) { --grid-max-col-count: 2; --grid-min-col-size: 275px; --grid-gap: var(--space-l); container: ctaContainer / inline-size; } .multi-product-cta { font-size: var(--fs-1); & h2 { color: var(--blue); font-weight: 400; text-transform: uppercase; } & p { color: var(--navy); font-weight: 700; } @container ctaContainer (width >= 600px) { & .button { width: 100%; } } } /* MARK: Custom product ----------------------------------------------- */ .custom-product-layout.grid-constrained { --grid-min-col-size: 340px; } .custom-product-layout > div > aside { -webkit-margin-before: var(--space-xl); margin-block-start: var(--space-xl); } /* MARK: Customizable stock ----------------------------------------------- */ .customizable-stock-layout > .grid-constrained { --grid-min-col-size: 340px; } /* MARK: Stock product ----------------------------------------------- */ .stock-product-layout > div:has(.stock-product-details) { container: detailsContainer / inline-size; } .stock-product-layout .stock-product-details { display: grid; gap: var(--space-l); -webkit-margin-before: var(--gutter); margin-block-start: var(--gutter); @container detailsContainer (width >= 650px) { grid-template-columns: 40% auto; } } .stock-product-layout .prose form { --flow-space: var(--space-l); } /* MARK: Related products block ----------------------------------------------- */ .related-products { -webkit-margin-before: var(--space-m); margin-block-start: var(--space-m); border-top: 2px solid var(--gray); padding-block: var(--space-m); & h3 { font-size: var(--fs-2); } & #siblings-carousel { -webkit-margin-before: var(--space-s); margin-block-start: var(--space-s); -webkit-padding-after: var(--space-m); padding-block-end: var(--space-m); max-width: 700px; } & .splide__slide { line-height: var(--leading-flat); text-align: center; } & .splide__slide a { border: 0; } & .splide__slide span { display: block; -webkit-margin-before: var(--space-2xs); margin-block-start: var(--space-2xs); color: var(--navy); font-weight: 400; font-size: var(--fs--1); font-family: var(--font-display); text-transform: uppercase; } } /* MARK: Canadian link ----------------------------------------------- */ .canadian-link { --flow-space: var(--space-l); display: flex; align-items: center; gap: var(--space-2xs); margin-block: var(--space-l); border: 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } /* MARK: Splide arrows ----------------------------------------------- */ :is(.product-gallery-thumbs, #siblings-carousel) .splide__arrow { top: 100%; background-color: transparent; color: var(--purple-a11y); &::after { -webkit-mask-image: url("/assets/images/icon-regular-ArrowRightsvg.svg"); mask-image: url("/assets/images/icon-regular-ArrowRightsvg.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: currentColor; width: 1.5rem; height: 1.5rem; content: ""; } } :is(.product-gallery-thumbs, #siblings-carousel) .splide__arrow--prev { left: 0; &::after { transform: scaleX(-1); } } :is(.product-gallery-thumbs, #siblings-carousel) .splide__arrow--next { right: 0; } :is(.product-gallery-thumbs, #siblings-carousel) .splide__arrow svg { display: none; } :is(.product-gallery-thumbs, #siblings-carousel) .splide__track--nav > .splide__list > .splide__slide.is-active { opacity: 0.5; border: 0 !important; } /* ========================================================= PROSE ========================================================= */ /* MARK: Home prose box ----------------------------------------------- */ .home-prose-box { background-color: var(--gray-50); padding-block: var(--space-l-xl); } .home-prose-box .center { --content-width: 60rem; } /* MARK: Prose ----------------------------------------------- */ .prose > *:not(form, .grid-constrained, figure) { max-width: 56.25rem; } @media (width >= 1200px) { .prose h1 { font-size: var(--fs-3); } } .prose h2.subheading { --flow-space: var(--space-2xs); color: var(--purple-text); font-weight: 400; font-size: var(--fs-2); } .prose h1 + h2.subheading { --flow-space: var(--space-2xs); } .prose h2.subheading + p { --flow-space: var(--space-l); } .prose h3 { --flow-space: var(--space-l); color: var(--navy); font-size: var(--fs-3); } .prose :is(ul, ol):not([class]) { display: grid; gap: var(--space-xs); } .prose form { --flow-space: var(--space-3xl); } /* ========================================================= SEARCH ========================================================= */ .keywords-info { --flow-space: var(--space-3xs); font-size: var(--fs-1); } .keywords-info span { color: var(--purple-a11y); } /* MARK: Search results listing ----------------------------------------------- */ ul.search-results { display: grid; gap: var(--space-m); padding: 0; } ul.search-results a { border: 0; color: inherit; } ul.search-results li > a { display: flex; gap: var(--space-xs); border-bottom: 1px solid var(--gray-100); -webkit-padding-after: var(--space-m); padding-block-end: var(--space-m); } ul.search-results li .media { flex-grow: 0; flex-shrink: 0; flex-basis: 100px; } ul.search-results li .result-in { color: var(--purple-a11y); font-size: var(--fs--1); letter-spacing: 0.125em; text-transform: uppercase; } ul.search-results li .result-title { --flow-space: 0; color: var(--blue); } ul.search-results li .result-description { --flow-space: var(--space-2xs); } ul.search-results li .result-learn-more { --flow-space: var(--space-2xs); color: var(--blue); } ul.search-results li :is(.result-title, .result-learn-more) { transition: color var(--transition-base); } ul.search-results li a:hover :is(.result-title, .result-learn-more) { color: var(--green); } /* ========================================================= SECTION NAV ========================================================= */ .section-nav { --flow-space: var(--space-xl); } .section-nav h2 { color: var(--blue-a11y); font-weight: 400; font-size: var(--fs-2); } .section-nav ul { padding: 0; } .section-nav ul a:hover { color: var(--green); } .section-nav > ul { display: grid; gap: var(--space-xs); font-weight: 400; font-family: var(--font-display); } .section-nav > ul > li { border: 2px solid var(--gray-100); padding: var(--space-m); color: var(--navy); letter-spacing: 0.0625em; text-transform: uppercase; } .section-nav > ul > li a { border: 0; color: inherit; } .section-nav > ul > li ul { display: grid; gap: var(--space-3xs); -webkit-margin-before: var(--space-2xs); margin-block-start: var(--space-2xs); border-left: 2px solid var(--purple); padding-left: var(--space-m); font-family: var(--font-body); letter-spacing: normal; } .section-nav ul li ul li { color: var(--blue); text-transform: none; } .section-nav ul li ul li ul li a { color: var(--purple-a11y); } /* ========================================================= SIDEBAR HIGHLIGHTS ========================================================= */ .sidebar-highlights { --border: 2px solid var(--gray); } .sidebar-highlights ul { margin: 0; padding: 0; font-weight: 400; font-size: var(--fs-1); font-family: var(--font-display); text-transform: uppercase; } .sidebar-highlights ul li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-m); border-top: var(--border); padding-block: var(--space-s); line-height: var(--leading-flat); } .sidebar-highlights ul li:first-child { color: var(--orange-text); } .sidebar-highlights ul li:nth-child(2) { color: var(--purple-text); } .sidebar-highlights ul li:nth-child(3) { color: var(--blue-a11y); } .sidebar-highlights ul li:nth-child(3) span { display: block; -webkit-margin-before: var(--space-2xs); margin-block-start: var(--space-2xs); width: 100%; color: var(--navy); font-size: var(--fs-0); } .sidebar-highlights ul li:nth-child(3) span a { border-color: var(--blue-a11y); color: var(--blue-a11y); } .sidebar-highlights ul li:nth-child(3) span a:hover { border-color: var(--green); color: var(--green); } .sidebar-highlights ul li:last-child { border-bottom: var(--border); color: var(--red); } .sidebar-highlights ul li svg { fill: var(--gray-600); width: 50px; height: 50px; } /* ========================================================= SIDEBAR NAV ========================================================= */ .sidebar-nav { background-color: var(--gray-50); padding: var(--space-m); & a { border: 0; } & h2 { color: var(--navy); font-weight: 400; font-size: var(--fs-2); } & ul { margin: var(--space-xs) 0 0; padding: 0; } & ul li { --flow-space: var(--space-3xs); } & ul li.top-level > a { font-size: var(--fs-1); font-family: var(--font-body); } & ul li > a { color: var(--navy); font-weight: 400; font-family: var(--font-display); text-transform: uppercase; } & ul li > a:hover { border-bottom: 1px solid var(--blue); } & ul li.top-level:has(ul) + li.top-level { -webkit-margin-before: var(--space-l); margin-block-start: var(--space-l); } } /* ========================================================= SITE FOOTER STYLES ========================================================= */ /* MARK: Pre-footer ----------------------------------------------- */ .pre-footer { background-color: var(--gray-300); padding-block: var(--space-m-l); } .pre-footer .grid-constrained { --grid-max-col-count: 2; --grid-min-col-size: 300px; --grid-gap: calc(var(--gutter) + 1.5rem); } @media (width >= 699px) { .pre-footer .grid-constrained > div:last-child { text-align: right; } } .pre-footer h2 { font-weight: 400; font-size: var(--fs-2); } @media (width >= 1280px) { .pre-footer h2 { font-size: var(--fs-3); } } .pre-footer h2 + p { --flow-space: var(--space-2xs); } .pre-footer p { color: var(--navy); font-weight: 100; } .pre-footer p strong { color: var(--navy); font-weight: 700; text-transform: uppercase; } .pre-footer a { border-color: currentColor; color: var(--navy); } .pre-footer a:hover { color: white; } /* MARK: Feeds ----------------------------------------------- */ .feeds { background-color: var(--gray-100); & .button svg { height: 1rem; } } @media (width >= 640px) { .feeds > .center { display: grid; grid-template-rows: auto 1fr; grid-template-columns: repeat(2, 1fr); } .feeds__blog, .feeds__ig { display: grid; grid-template-rows: subgrid; grid-row: span 2; } } .feeds > .center { padding-inline: 0; } .feeds header { background-color: var(--purple-a11y); color: white; } :is(.feeds__blog, .feeds__ig) > :is(header, div) { padding-block: var(--space-m); } .feeds h2 { color: inherit; font-weight: 400; font-size: var(--fs-1); } .feeds h3 { color: var(--navy); & a { color: inherit; } } .feeds :is(h2 a, h3 a, h4 a):hover { border-color: var(--purple); color: var(--purple-text); } /* MARK: Blog feed ----------------------------------------------- */ @media (width >= 1024px) { .feeds__blog > .center { -webkit-padding-end: var(--space-xl); padding-inline-end: var(--space-xl); } } .feeds__blog header.center.grid-constrained { --grid-max-col-count: 2; --grid-min-col-size: 150px; --grid-gap: var(--space-xs); align-items: center; container: feedsBlogHeader / inline-size; margin-inline: 0; } @container feedsBlogHeader (width >= 373px) { .feeds__blog header .button-group { justify-content: flex-end; } } .feeds__blog .button[data-variant="pill-white"] { --button-padding: var(--space-3xs) var(--space-m); --button-font-weight: 400; } .feeds__blog article { -webkit-margin-before: var(--space-m); margin-block-start: var(--space-m); } @media (width >= 1200px) { .feeds__blog article { max-width: 60%; } .feeds__blog article h4 { font-size: var(--fs-2); } } .feeds__blog article h4 a { border: 0; color: var(--navy); } .feeds__blog article p { --flow-space: var(--space-2xs); color: var(--gray-700); font-size: var(--fs--1); } /* MARK: IG feed ----------------------------------------------- */ @media (width >= 1024px) { .feeds__ig > .center { -webkit-padding-start: var(--space-xl); padding-inline-start: var(--space-xl); } } .feeds__ig header.center.grid-constrained { --grid-max-col-count: 2; --grid-min-col-size: 210px; --grid-gap: var(--space-xs); align-items: baseline; container: feedsIgHeader / inline-size; margin-inline: 0; background-color: var(--purple-a11y); } @container feedsIgHeader (width >= 480px) { .feeds__ig header .button-group { justify-content: flex-end; } } .feeds__ig header .button-group a { border-color: white; color: white; font-weight: 800; font-family: var(--font-display); &:hover { border-color: var(--navy); color: var(--navy); } } .feeds__ig header .button-group a span { font-weight: 400; text-transform: uppercase; } .feeds__ig > div { container: feedsIgContainer / inline-size; } .feeds__ig div.center { margin-inline: 0; } .feeds__ig div.grid-constrained { --grid-max-col-count: 3; --grid-min-col-size: 5rem; --grid-gap: var(--space-2xs); --grid-gap: var(--space-2xs); } @container feedsIgContainer (width >= 380px) { .feeds__ig div.grid-constrained { --grid-max-col-count: 4; } } /* MARK: Purple header fix on wide screens ----------------------------------------------- */ @media (width >= 1530px) { :is(.feeds__blog, .feeds__ig) header { position: relative; max-width: calc(var(--content-width) / 2); } .feeds__blog > .center { -webkit-padding-start: 0; padding-inline-start: 0; } .feeds__blog header::before { position: absolute; top: 0; right: 0; bottom: 0; background-color: var(--purple-a11y); width: 50vw; content: ""; } .feeds__ig > .center { -webkit-padding-end: 0; padding-inline-end: 0; } .feeds__ig header::before { position: absolute; top: 0; bottom: 0; left: 0; background-color: var(--purple-a11y); width: 50vw; content: ""; } :is(.feeds__blog, .feeds__ig) header > * { position: relative; z-index: var(--z-above); } } /* MARK: Social bar ----------------------------------------------- */ .social-bar { container: socialBarContainer / inline-size; background-color: var(--green); padding-block: var(--space-m); } .social-bar .grid-constrained { --grid-max-col-count: 2; --grid-min-col-size: 200px; --grid-gap: var(--space-m); align-items: center; } .social-bar .social-links { display: flex; gap: 0.75rem; margin: 0; padding: 0; } .social-bar .social-links a { display: block; display: grid; place-content: center; border: 0; border-radius: var(--radius-circle); background-color: white; width: 2.25rem; height: 2.25rem; } .social-bar .social-links svg { transition: fill var(--transition-base); fill: var(--green); } .social-bar .social-links a:hover svg { fill: var(--orange); } .social-bar .branding a { display: block; border: 0; } .social-bar .branding img { max-width: 12.5rem; } @container socialBarContainer (width >= 475px) { .social-bar .branding img { margin-inline: auto 0; } } /* MARK: Footer links ----------------------------------------------- */ .footer-links { background-color: var(--blue-a11y); padding-block: var(--space-m-l); } .footer-links .grid-constrained { --grid-max-col-count: 5; --grid-min-col-size: 200px; --grid-gap: var(--gutter); } @media (width >= 1280px) { .footer-links .grid-constrained { --grid-min-col-size: 275px; } } .footer-links a { border: 0; } .footer-links a:hover { color: var(--gray); } .footer-links h2 { color: white; font-weight: 400; font-size: var(--fs-1); text-transform: uppercase; } .footer-links ul { -webkit-margin-after: 0; margin-block-end: 0; padding: 0; color: white; font-weight: 400; font-family: var(--font-display); text-transform: uppercase; } .footer-links a { color: inherit; } .footer-links ul li + li { -webkit-margin-before: var(--space-3xs); margin-block-start: var(--space-3xs); } .footer-links .contact-info { color: white; } .footer-links .contact-info h2 { color: inherit; } .footer-links .contact-info h2 + p { --flow-space: var(--space-3xs); } .footer-links .contact-info p + h2 { --flow-space: var(--space-m); } .footer-links .payment-methods ul { display: flex; align-items: center; gap: var(--space-3xs); } .footer-links .payment-methods ul li + li { -webkit-margin-before: 0; margin-block-start: 0; } /* MARK: Legal ----------------------------------------------- */ .legal { padding-block: var(--space-m); color: var(--gray-300); font-weight: 400; font-size: var(--fs--1); font-family: var(--font-display); & a { color: var(--gray); } } .legal .grid-constrained { --grid-max-col-count: 2; --grid-min-col-size: 265px; --grid-gap: var(--space-3xs); } @media (width >= 630px) { .legal .grid-constrained { --grid-gap: var(--space-xs); } } .legal ul { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; line-height: var(--leading-flat); text-transform: uppercase; } .legal ul li:not(:last-child) { -webkit-border-end: 1px solid var(--gray); border-inline-end: 1px solid var(--gray); -webkit-padding-end: var(--space-xs); padding-inline-end: var(--space-xs); } .legal ul li a { border: 0; white-space: nowrap; } @media (width >= 630px) { .legal .copyright { display: flex; justify-content: flex-end; } } /* ========================================================= SITE MAP ========================================================= */ .site-map.grid-constrained { --flow-space: var(--space-xl); --grid-max-col-count: 2; --grid-min-col-size: 340px; --grid-gap: var(--gutter); } .site-map .site-map-heading { color: var(--purple-a11y); font-weight: 400; font-size: var(--fs-3); } /* ========================================================= TABLES ========================================================= */ table { border-collapse: collapse; width: 100%; } table thead { background-color: var(--gray-100); } table thead tr { border: 1px solid var(--gray); border-width: 1px 0; } table thead td { padding: var(--space-s); color: var(--navy); font-size: var(--fs--1); letter-spacing: 0.0625em; text-transform: uppercase; } table tbody td { border-bottom: 1px solid var(--gray-100); } table td { vertical-align: middle; padding: var(--space-xs); min-width: 6.25rem; font-size: var(--fs--1); } /* ========================================================= CENTER UTILITY Use to center a column (new way of doing a common wrapper/container) ========================================================= */ .center { box-sizing: content-box; margin-inline: auto; padding-inline: var(--gutter); max-inline-size: var(--content-width); } /* ========================================================= GRID ========================================================= */ /* MARK: Auto-Grid (via Andy Bell / Every Layout) Sets a minimum column size and lets the browser decide how many columns fit. Column count is fluid; use when you don't need to control the maximum. --grid-min-item-size (16rem): The minimum size of each column before the grid wraps to fewer columns. --grid-placement (auto-fill): Set to auto-fit to collapse empty tracks, or auto-fill to preserve them. --grid-gap (var(--gutter)): The space between each item. ----------------------------------------------- */ .grid { --grid-min-item-size: 16rem; --grid-placement: auto-fill; --grid-gap: var(--gutter); display: grid; grid-template-columns: repeat( var(--grid-placement), minmax(var(--grid-min-item-size), 1fr) ); gap: var(--grid-gap); } /* MARK: Constrained Auto-Grid via Kevin Powell - https://www.youtube.com/watch?v=CHULPvkXIRo&list=WL&index=4 Works backward from a max column count to calculate the ideal column size, then uses that as the minmax minimum. Caps the layout at N columns while still collapsing gracefully — no media queries needed. --grid-max-col-count (3): The maximum number of columns. The grid will never exceed this, but will collapse to fewer as needed. --grid-min-col-size (200px): The minimum size of each column. Once columns would go below this, the grid wraps to fewer columns. --grid-gap (1rem): The space between each item. --- Do not edit below --- --grid-col-size-calc: Calculates the ideal column size at exactly max-col-count columns, accounting for gaps. --grid-col-min-size-calc: Resolves the final minmax minimum by taking whichever is larger — the min size or the calculated size — and capping it at 100% to prevent overflow. ----------------------------------------------- */ .grid-constrained { --grid-max-col-count: 3; --grid-min-col-size: 200px; --grid-gap: var(--gutter); /* calculations, do not touch */ --grid-col-size-calc: calc( (100% - var(--grid-gap) * var(--grid-max-col-count)) / var(--grid-max-col-count) ); --grid-col-min-size-calc: min( 100%, max(var(--grid-min-col-size), var(--grid-col-size-calc)) ); display: grid; grid-template-columns: repeat( auto-fit, minmax(var(--grid-col-min-size-calc), 1fr) ); gap: var(--grid-gap); } /* ========================================================= SIDEBAR LAYOUT/COMPOSITION ========================================================= */ .with-sidebar { display: flex; flex-wrap: wrap; gap: var(--gutter); } .with-sidebar > :last-child { --flow-space: var(--space-xl); flex-grow: 1; flex-basis: 300px; } .with-sidebar > :first-child { flex-grow: 999; flex-basis: 0; min-inline-size: 70%; } /* ========================================================= FLOW COMPOSITION Like the Every Layout stack: https://every-layout.dev/layouts/stack/ Info about this implementation: https://piccalil.li/blog/my-favourite-3-lines-of-css/ ========================================================= */ .flow > * + * { -webkit-margin-before: var(--flow-space); margin-block-start: var(--flow-space); } .flow.prose > * + :is(h2, h3, h4) { --flow-space: var(--space-l); } /* ========================================================= BACKGROUND UTILITIES ========================================================= */ .dark-bg { background-color: var(--dark-navy); } .light-bg { background-color: var(--gray-200); } /* ========================================================= ADDITIONAL/MISC UTILITIES ========================================================= */ /* .chromeframe { margin: 0.2em 0; background: var(--gray-200); color: var(--black); padding: 0.2em 0; } */ .media { overflow: hidden; } /* MARK: Font family utility classes ----------------------------------------------- */ .font-body { font-family: var(--font-body); } .font-display { font-family: var(--font-display); } /* MARK: Font size utility classes ----------------------------------------------- */ .fs-1 { font-size: var(--fs--1); } .fs1 { font-size: var(--fs-1); } .fs2 { font-size: var(--fs-2); } .fs3 { font-size: var(--fs-3); } .fs4 { font-size: var(--fs-4); } .fs5 { font-size: var(--fs-5); } .fs6 { font-size: var(--fs-6); } .fs7 { font-size: var(--fs-7); } /* MARK: Text alignment utility classes ----------------------------------------------- */ .text-center { text-align: center; } /* MARK: Padding utility classes ----------------------------------------------- */ .section-bp { padding-block: var(--space-m); } /* ========================================================= VISUALLY HIDDEN UTILITY Info: https://piccalil.li/quick-tip/visually-hidden/ ========================================================= */ .sr-only { border: 0; clip: rect(0 0 0 0); position: absolute; margin: 0; padding: 0; width: 1px; height: 0; overflow: hidden; white-space: nowrap; } .splide__container{box-sizing:border-box;position:relative}.splide__list{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0} #cc-main{background:transparent;color:var(--cc-primary-color);font-family:var(--cc-font-family);font-size:16px;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.15;position:relative;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;position:fixed;z-index:var(--cc-z-index)}#cc-main :after,#cc-main :before,#cc-main a,#cc-main button,#cc-main div,#cc-main h2,#cc-main input,#cc-main p,#cc-main span{all:unset;box-sizing:border-box}#cc-main .pm__badge,#cc-main button{all:initial;box-sizing:border-box;color:unset;visibility:unset}#cc-main .pm__badge,#cc-main a,#cc-main button,#cc-main input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}#cc-main table,#cc-main tbody,#cc-main td,#cc-main th,#cc-main thead,#cc-main tr{all:revert;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit}:root{--cc-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--cc-modal-border-radius:.5rem;--cc-btn-border-radius:.4rem;--cc-modal-transition-duration:.25s;--cc-link-color:var(--cc-btn-primary-bg);--cc-modal-margin:1rem;--cc-z-index:2147483647;--cc-bg:#fff;--cc-primary-color:#2c2f31;--cc-secondary-color:#5e6266;--cc-btn-primary-bg:#30363c;--cc-btn-primary-color:#fff;--cc-btn-primary-border-color:var(--cc-btn-primary-bg);--cc-btn-primary-hover-bg:#000;--cc-btn-primary-hover-color:#fff;--cc-btn-primary-hover-border-color:var(--cc-btn-primary-hover-bg);--cc-btn-secondary-bg:#eaeff2;--cc-btn-secondary-color:var(--cc-primary-color);--cc-btn-secondary-border-color:var(--cc-btn-secondary-bg);--cc-btn-secondary-hover-bg:#d4dae0;--cc-btn-secondary-hover-color:#000;--cc-btn-secondary-hover-border-color:#d4dae0;--cc-separator-border-color:#f0f4f7;--cc-toggle-on-bg:var(--cc-btn-primary-bg);--cc-toggle-off-bg:#667481;--cc-toggle-on-knob-bg:#fff;--cc-toggle-off-knob-bg:var(--cc-toggle-on-knob-bg);--cc-toggle-enabled-icon-color:var(--cc-bg);--cc-toggle-disabled-icon-color:var(--cc-bg);--cc-toggle-readonly-bg:#d5dee2;--cc-toggle-readonly-knob-bg:#fff;--cc-toggle-readonly-knob-icon-color:var(--cc-toggle-readonly-bg);--cc-section-category-border:var(--cc-cookie-category-block-bg);--cc-cookie-category-block-bg:#f0f4f7;--cc-cookie-category-block-border:#f0f4f7;--cc-cookie-category-block-hover-bg:#e9eff4;--cc-cookie-category-block-hover-border:#e9eff4;--cc-cookie-category-expanded-block-bg:transparent;--cc-cookie-category-expanded-block-hover-bg:#dee4e9;--cc-overlay-bg:rgba(0,0,0,.65);--cc-webkit-scrollbar-bg:var(--cc-section-category-border);--cc-webkit-scrollbar-hover-bg:var(--cc-btn-primary-hover-bg);--cc-footer-bg:var(--cc-btn-secondary-bg);--cc-footer-color:var(--cc-secondary-color);--cc-footer-border-color:#e4eaed;--cc-pm-toggle-border-radius:4em}#cc-main.cc--rtl{direction:rtl}#cc-main .cm__title,#cc-main a,#cc-main b,#cc-main em,#cc-main strong{font-weight:600}#cc-main button>span{pointer-events:none}#cc-main .cc__link,#cc-main a{background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1px;font-weight:600;position:relative;transition:background-size .25s,color .25s ease}#cc-main .cc__link:hover,#cc-main a:hover{background-size:100% 1px;color:var(--cc-primary-color)}#cc-main .cc__link{color:var(--cc-link-color)}#cc-main .cm__desc,#cc-main .pm__body{-ms-scroll-chaining:auto contain;overscroll-behavior:auto contain;scrollbar-width:thin}@media screen and (min-width:640px){#cc-main ::-webkit-scrollbar,#cc-main ::-webkit-scrollbar-thumb,#cc-main ::-webkit-scrollbar-track{all:revert}#cc-main ::-webkit-scrollbar-thumb{-webkit-background-clip:padding-box;background-clip:padding-box;background:var(--cc-toggle-readonly-bg);border:.25rem solid var(--cc-bg);border-radius:1rem}#cc-main ::-webkit-scrollbar-thumb:hover{background:var(--cc-toggle-off-bg)}#cc-main ::-webkit-scrollbar{background:transparent;width:12px}}html.disable--interaction.show--consent,html.disable--interaction.show--consent body{height:auto!important;overflow:hidden!important}@media (prefers-reduced-motion){#cc-main{--cc-modal-transition-duration:0s}}.cc--darkmode{--cc-bg:#161a1c;--cc-primary-color:#ebf3f6;--cc-secondary-color:#aebbc5;--cc-btn-primary-bg:#c2d0e0;--cc-btn-primary-color:var(--cc-bg);--cc-btn-primary-border-color:var(--cc-btn-primary-bg);--cc-btn-primary-hover-bg:#98a7b6;--cc-btn-primary-hover-color:#000;--cc-btn-primary-hover-border-color:var(--cc-btn-primary-hover-bg);--cc-btn-secondary-bg:#242c31;--cc-btn-secondary-color:var(--cc-primary-color);--cc-btn-secondary-border-color:var(--cc-btn-secondary-bg);--cc-btn-secondary-hover-bg:#353d43;--cc-btn-secondary-hover-color:#fff;--cc-btn-secondary-hover-border-color:var(--cc-btn-secondary-hover-bg);--cc-separator-border-color:#222a30;--cc-toggle-on-bg:var(--cc-btn-primary-bg);--cc-toggle-off-bg:#525f6b;--cc-toggle-on-knob-bg:var(--cc-btn-primary-color);--cc-toggle-off-knob-bg:var(--cc-btn-primary-color);--cc-toggle-enabled-icon-color:var(--cc-btn-primary-color);--cc-toggle-disabled-icon-color:var(--cc-btn-primary-color);--cc-toggle-readonly-bg:#343e45;--cc-toggle-readonly-knob-bg:#5f6b72;--cc-toggle-readonly-knob-icon-color:var(--cc-toggle-readonly-bg);--cc-section-category-border:#1e2428;--cc-cookie-category-block-bg:#1e2428;--cc-cookie-category-block-border:var(--cc-section-category-border);--cc-cookie-category-block-hover-bg:#242c31;--cc-cookie-category-block-hover-border:#232a2f;--cc-cookie-category-expanded-block-bg:transparent;--cc-cookie-category-expanded-block-hover-bg:var(--cc-toggle-readonly-bg);--cc-overlay-bg:rgba(0,0,0,.65);--cc-webkit-scrollbar-bg:var(--cc-section-category-border);--cc-webkit-scrollbar-hover-bg:var(--cc-btn-primary-hover-bg);--cc-footer-bg:#0c0e0f;--cc-footer-color:var(--cc-secondary-color);--cc-footer-border-color:#060809}.cc--darkmode #cc-main{color-scheme:dark}#cc-main .cm{background:var(--cc-bg);border-radius:var(--cc-modal-border-radius);box-shadow:0 .625em 1.875em rgba(0,0,2,.3);display:flex;flex-direction:column;max-width:24rem;opacity:0;overflow:hidden;position:fixed;transform:translateY(1.6em);visibility:hidden;z-index:1}#cc-main .cm--top{top:var(--cc-modal-margin)}#cc-main .cm--middle{top:50%;transform:translateY(calc(-50% + 1.6em))}#cc-main .cm--bottom{bottom:var(--cc-modal-margin)}#cc-main .cm--center{left:var(--cc-modal-margin);margin:0 auto;right:var(--cc-modal-margin);width:unset}#cc-main .cm--left{left:var(--cc-modal-margin);margin-right:var(--cc-modal-margin)}#cc-main .cm--right{margin-left:var(--cc-modal-margin);right:var(--cc-modal-margin)}#cc-main .cm__body{display:flex;flex-direction:column;justify-content:space-between;position:relative}#cc-main .cm__btns,#cc-main .cm__links{padding:1rem 1.3rem;width:unset}#cc-main .cm__texts{display:flex;flex:1;flex-direction:column;justify-content:center;padding:1rem 0 0}#cc-main .cm__desc,#cc-main .cm__title{padding:0 1.3rem}#cc-main .cm__title{font-size:1.05em}#cc-main .cm__title+.cm__desc{margin-top:1.1em}#cc-main .cm__desc{color:var(--cc-secondary-color);font-size:.9em;line-height:1.5;max-height:40vh;overflow-x:visible;overflow-y:auto;padding-bottom:1em}#cc-main .cm__btns{border-top:1px solid var(--cc-separator-border-color);display:flex;flex-direction:column;justify-content:center}#cc-main .cm__btn-group{display:grid;grid-auto-columns:minmax(0,1fr)}#cc-main .cm__btn+.cm__btn,#cc-main .cm__btn-group+.cm__btn-group{margin-top:.375rem}#cc-main .cm--flip .cm__btn+.cm__btn,#cc-main .cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem;margin-top:0}#cc-main .cm--inline .cm__btn+.cm__btn{margin-left:.375rem;margin-top:0}#cc-main .cm--inline.cm--flip .cm__btn+.cm__btn{margin-bottom:0;margin-left:0;margin-right:.375rem}#cc-main .cm--inline.cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem;margin-right:0}#cc-main .cm--wide .cm__btn+.cm__btn,#cc-main .cm--wide .cm__btn-group+.cm__btn-group{margin-left:.375rem;margin-top:0}#cc-main .cm--wide.cm--flip .cm__btn+.cm__btn,#cc-main .cm--wide.cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:0;margin-right:.375rem}#cc-main .cm--bar:not(.cm--inline) .cm__btn-group--uneven,#cc-main .cm--wide .cm__btn-group--uneven{display:flex;flex:1;justify-content:space-between}#cc-main .cm--bar:not(.cm--inline).cm--flip .cm__btn-group--uneven,#cc-main .cm--wide.cm--flip .cm__btn-group--uneven{flex-direction:row-reverse}#cc-main .cm__btn{background:var(--cc-btn-primary-bg);border:1px solid var(--cc-btn-primary-border-color);border-radius:var(--cc-btn-border-radius);color:var(--cc-btn-primary-color);font-size:.82em;font-weight:600;min-height:42px;padding:.5em 1em;text-align:center}#cc-main .cm__btn:hover{background:var(--cc-btn-primary-hover-bg);border-color:var(--cc-btn-primary-hover-border-color);color:var(--cc-btn-primary-hover-color)}#cc-main .cm__btn--secondary{background:var(--cc-btn-secondary-bg);border-color:var(--cc-btn-secondary-border-color);color:var(--cc-btn-secondary-color)}#cc-main .cm__btn--secondary:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color);color:var(--cc-btn-secondary-hover-color)}#cc-main .cm__btn--close{border-radius:0;border-bottom-left-radius:var(--cc-btn-border-radius);border-right:none;border-top:none;display:none;font-size:1em;height:42px;min-width:auto!important;overflow:hidden;padding:0!important;position:absolute;right:0;top:0;width:42px}#cc-main .cm__btn--close svg{stroke:var(--cc-btn-primary-color);transform:scale(.5);transition:stroke .15s ease}#cc-main .cm__btn--close:hover svg{stroke:var(--cc-btn-primary-hover-color)}#cc-main .cm__btn--close.cm__btn--secondary svg{stroke:var(--cc-btn-secondary-color)}#cc-main .cm__btn--close.cm__btn--secondary:hover svg{stroke:var(--cc-btn-secondary-hover-color)}#cc-main .cm__btn--close+.cm__texts .cm__title{padding-right:3rem}#cc-main .cm--inline .cm__btn-group{grid-auto-flow:column}#cc-main .cm__footer{background:var(--cc-footer-bg);border-top:1px solid var(--cc-footer-border-color);color:var(--cc-footer-color);padding:.4em 0 .5em}#cc-main .cm__links{display:flex;flex-direction:row;padding-bottom:0;padding-top:0}#cc-main .cm__link-group{display:flex;flex-direction:row;font-size:.8em;width:100%}#cc-main .cm__link-group>*+*{margin-left:1.3rem}#cc-main .cm--flip .cm__btn:last-child{grid-row:1}#cc-main .cm--inline.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--box .cm__btn--close{display:block}#cc-main .cm--box.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cm--box.cm--wide{max-width:36em}#cc-main .cm--box.cm--wide .cm__btns{flex-direction:row;justify-content:space-between}#cc-main .cm--box.cm--wide .cm__btn-group{grid-auto-flow:column}#cc-main .cm--box.cm--wide .cm__btn{min-width:120px;padding-left:1.8em;padding-right:1.8em}#cc-main .cm--box.cm--wide.cm--flip .cm__btns{flex-direction:row-reverse}#cc-main .cm--box.cm--wide.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--cloud{max-width:54em;width:unset}#cc-main .cm--cloud .cm__body{flex-direction:row}#cc-main .cm--cloud .cm__texts{flex:1}#cc-main .cm--cloud .cm__desc{max-height:9.4em}#cc-main .cm--cloud .cm__btns{border-left:1px solid var(--cc-separator-border-color);border-top:none;max-width:23em}#cc-main .cm--cloud .cm__btn-group{flex-direction:column}#cc-main .cm--cloud .cm__btn{min-width:19em}#cc-main .cm--cloud.cm--flip .cm__btn-group,#cc-main .cm--cloud.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cm--cloud.cm--inline .cm__btn-group{flex-direction:row}#cc-main .cm--cloud.cm--inline .cm__btn{min-width:10em}#cc-main .cm--cloud.cm--inline.cm--flip .cm__btn-group{flex-direction:row-reverse}#cc-main .cm--bar{border-radius:0;left:0;margin:0;max-width:unset;opacity:1;right:0;transform:translateY(0);width:100vw;--cc-modal-transition-duration:.35s}#cc-main .cm--bar.cm--top{top:0;transform:translateY(-100%)}#cc-main .cm--bar.cm--bottom{bottom:0;transform:translateY(100%)}#cc-main .cm--bar .cm__body,#cc-main .cm--bar .cm__links{margin:0 auto;max-width:55em;width:100%}#cc-main .cm--bar .cm__body{padding:.5em 0 .9em}#cc-main .cm--bar .cm__btns{border-top:none;flex-direction:row;justify-content:space-between}#cc-main .cm--bar .cm__btn-group{grid-auto-flow:column}#cc-main .cm--bar:not(.cm--inline) .cm__btn+.cm__btn,#cc-main .cm--bar:not(.cm--inline) .cm__btn-group+.cm__btn-group{margin-left:.375rem;margin-top:0}#cc-main .cm--bar .cm__btn{min-width:120px;padding-left:2em;padding-right:2em}#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn+.cm__btn,#cc-main .cm--bar.cm--flip:not(.cm--inline) .cm__btn-group+.cm__btn-group{margin-bottom:0;margin-left:0;margin-right:.375rem}#cc-main .cm--bar.cm--flip .cm__btns{flex-direction:row-reverse}#cc-main .cm--bar.cm--flip .cm__btn:last-child{grid-column:1}#cc-main .cm--bar.cm--inline .cm__body,#cc-main .cm--bar.cm--inline .cm__links{max-width:74em}#cc-main .cm--bar.cm--inline .cm__body{flex-direction:row;padding:0}#cc-main .cm--bar.cm--inline .cm__btns{flex-direction:column;justify-content:center;max-width:23em}#cc-main .cm--bar.cm--inline.cm--flip .cm__btns{flex-direction:column-reverse}#cc-main .cc--anim .cm,#cc-main .cc--anim.cm-wrapper:before{transition:opacity var(--cc-modal-transition-duration) ease,visibility var(--cc-modal-transition-duration) ease,transform var(--cc-modal-transition-duration) ease}#cc-main .cc--anim .cm__btn,#cc-main .cc--anim .cm__close{transition:background-color .15s ease,border-color .15s ease,color .15s ease}.disable--interaction #cc-main .cm-wrapper:before{background:var(--cc-overlay-bg);bottom:0;content:"";left:0;opacity:0;position:fixed;right:0;top:0;visibility:hidden;z-index:0}.show--consent #cc-main .cc--anim .cm{opacity:1;transform:translateY(0);visibility:visible!important}.show--consent #cc-main .cc--anim .cm--middle{transform:translateY(-50%)}.show--consent #cc-main .cc--anim .cm--bar{transform:translateY(0)}.show--consent #cc-main .cc--anim.cm-wrapper:before{opacity:1;visibility:visible}#cc-main.cc--rtl .cm__btn--close{border-bottom-left-radius:unset;border-bottom-right-radius:var(--cc-btn-border-radius);left:0;right:unset}#cc-main.cc--rtl .cm__btn--close+.cm__texts .cm__title{padding-left:3rem!important;padding-right:1.3rem}#cc-main.cc--rtl .cm--inline .cm__btn+.cm__btn{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .cm--inline.cm--flip .cm__btn+.cm__btn{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar .cm__btn-group+.cm__btn-group,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide .cm__btn-group+.cm__btn-group{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .cm:not(.cm--inline).cm--bar.cm--flip .cm__btn+.cm__btn,#cc-main.cc--rtl .cm:not(.cm--inline).cm--wide.cm--flip .cm__btn+.cm__btn{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .cm__link-group>*+*{margin-left:0;margin-right:1.3rem}@media screen and (max-width:640px){#cc-main{--cc-modal-margin:.5em}#cc-main .cm{max-width:none!important;width:auto!important}#cc-main .cm__body{flex-direction:column!important;padding:0!important}#cc-main .cm__btns,#cc-main .cm__desc,#cc-main .cm__links,#cc-main .cm__title{padding-left:1.1rem!important;padding-right:1.1rem!important}#cc-main .cm__btns{border-left:none!important;border-top:1px solid var(--cc-separator-border-color)!important;flex-direction:column!important;max-width:none!important;min-width:auto!important}#cc-main .cm__btn+.cm__btn,#cc-main .cm__btn-group+.cm__btn-group{margin:.375rem 0 0!important}#cc-main .cm--flip .cm__btn+.cm__btn,#cc-main .cm--flip .cm__btn-group+.cm__btn-group{margin-bottom:.375rem!important;margin-top:0!important}#cc-main .cm__btn-group{display:flex!important;flex-direction:column!important;min-width:auto!important}#cc-main .cm__btn{flex:auto!important}#cc-main .cm__link-group{justify-content:center!important}#cc-main .cm--flip .cm__btn-group,#cc-main .cm--flip .cm__btns{flex-direction:column-reverse!important}}#cc-main .pm-wrapper{position:relative;z-index:2}#cc-main .pm{background:var(--cc-bg);border-radius:var(--cc-modal-border-radius);box-shadow:0 .625em 1.875em rgba(0,0,2,.3);display:flex;flex-direction:column;opacity:0;overflow:hidden;position:fixed;visibility:hidden;width:100%;width:unset;z-index:1}#cc-main svg{fill:none;width:100%}#cc-main .pm__body,#cc-main .pm__footer,#cc-main .pm__header{padding:1em 1.4em}#cc-main .pm__header{align-items:center;border-bottom:1px solid var(--cc-separator-border-color);display:flex;justify-content:space-between}#cc-main .pm__title{align-items:center;display:flex;flex:1;font-weight:600;margin-right:2em}#cc-main .pm__close-btn{background:var(--cc-btn-secondary-bg);border:1px solid var(--cc-btn-secondary-border-color);border-radius:var(--cc-btn-border-radius);height:40px;position:relative;transition:all .15s ease;width:40px}#cc-main .pm__close-btn span{display:flex;height:100%;width:100%}#cc-main .pm__close-btn svg{stroke:var(--cc-btn-secondary-color);transform:scale(.5);transition:stroke .15s ease}#cc-main .pm__close-btn:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color)}#cc-main .pm__close-btn:hover svg{stroke:var(--cc-btn-secondary-hover-color)}#cc-main .pm__body{flex:1;overflow-y:auto;overflow-y:overlay}#cc-main .pm__section,#cc-main .pm__section--toggle{border-radius:var(--cc-btn-border-radius);display:flex;flex-direction:column;margin-bottom:.5em}#cc-main .pm__section--toggle .pm__section-desc-wrapper{border:1px solid var(--cc-cookie-category-block-border);border-radius:var(--cc-btn-border-radius);border-top:none;border-top-left-radius:0;border-top-right-radius:0;display:none;margin-top:0!important;overflow:hidden}#cc-main .pm__section{border:1px solid var(--cc-separator-border-color);padding:1em;transition:background-color .25s ease,border-color .25s ease}#cc-main .pm__section:first-child{border:none;margin-bottom:2em;margin-top:0;padding:0;transition:none}#cc-main .pm__section:not(:first-child):hover{background:var(--cc-cookie-category-block-bg);border-color:var(--cc-cookie-category-block-border)}#cc-main .pm__section-toggles+.pm__section{margin-top:2em}#cc-main .pm__section--toggle{background:var(--cc-cookie-category-block-bg);border-top:none;margin-bottom:.375rem}#cc-main .pm__section--toggle .pm__section-title{align-items:center;background:var(--cc-cookie-category-block-bg);border:1px solid var(--cc-cookie-category-block-border);display:flex;justify-content:space-between;min-height:58px;padding:1.1em 5.4em 1.1em 1.2em;position:relative;transition:background-color .25s ease,border-color .25s ease;width:100%}#cc-main .pm__section--toggle .pm__section-title:hover{background:var(--cc-cookie-category-block-hover-bg);border-color:var(--cc-cookie-category-block-hover-border)}#cc-main .pm__section--toggle .pm__section-desc{margin-top:0;padding:1em}#cc-main .pm__section--toggle.is-expanded{--cc-cookie-category-block-bg:var(--cc-cookie-category-expanded-block-bg);--cc-cookie-category-block-border:var(--cc-cookie-category-expanded-block-hover-bg)}#cc-main .pm__section--toggle.is-expanded .pm__section-title{border-bottom-left-radius:0;border-bottom-right-radius:0}#cc-main .pm__section--toggle.is-expanded .pm__section-arrow svg{transform:scale(.5) rotate(180deg)}#cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper{display:flex}#cc-main .pm__section--expandable .pm__section-title{cursor:pointer;padding-left:3.4em}#cc-main .pm__section--expandable .pm__section-arrow{background:var(--cc-toggle-readonly-bg);border-radius:100%;display:flex;height:20px;justify-content:center;left:18px;pointer-events:none;position:absolute;width:20px}#cc-main .pm__section--expandable .pm__section-arrow svg{stroke:var(--cc-btn-secondary-color);transform:scale(.5)}#cc-main .pm__section-title-wrapper{align-items:center;display:flex;position:relative}#cc-main .pm__section-title-wrapper+.pm__section-desc-wrapper{margin-top:.85em}#cc-main .pm__section-title{border-radius:var(--cc-btn-border-radius);font-size:.95em;font-weight:600}#cc-main .pm__badge{align-items:center;background:var(--cc-btn-secondary-bg);border-radius:5em;color:var(--cc-secondary-color);display:flex;flex:none;font-size:.8em;font-weight:600;height:23px;justify-content:center;margin-left:1em;min-width:23px;overflow:hidden;padding:0 .6em 1px;position:relative;text-align:center;white-space:nowrap;width:auto}#cc-main .pm__service-counter{background:var(--cc-btn-primary-bg);color:var(--cc-btn-primary-color);padding:0;width:23px}#cc-main .pm__service-counter[data-counterlabel]{padding:0 .6em 1px;width:auto}#cc-main .section__toggle,#cc-main .section__toggle-wrapper,#cc-main .toggle__icon,#cc-main .toggle__label{border-radius:var(--cc-pm-toggle-border-radius);height:23px;transform:translateZ(0);width:50px}#cc-main .section__toggle-wrapper{cursor:pointer;position:absolute;right:18px;z-index:1}#cc-main .toggle-service{height:19px;position:relative;right:0;width:42px}#cc-main .toggle-service .section__toggle,#cc-main .toggle-service .toggle__icon,#cc-main .toggle-service .toggle__label{height:19px;width:42px}#cc-main .toggle-service .toggle__icon{position:relative}#cc-main .toggle-service .toggle__icon-circle{height:19px;width:19px}#cc-main .toggle-service .section__toggle:checked~.toggle__icon .toggle__icon-circle{transform:translateX(23px)}#cc-main .pm__section--toggle:nth-child(2) .section__toggle-wrapper:after{display:none!important}#cc-main .section__toggle{border:0;cursor:pointer;display:block;left:0;margin:0;position:absolute;top:0}#cc-main .section__toggle:disabled{cursor:not-allowed}#cc-main .toggle__icon{background:var(--cc-toggle-off-bg);box-shadow:0 0 0 1px var(--cc-toggle-off-bg);display:flex;flex-direction:row;pointer-events:none;position:absolute;transition:all .25s ease}#cc-main .toggle__icon-circle{background:var(--cc-toggle-off-knob-bg);border:none;border-radius:var(--cc-pm-toggle-border-radius);box-shadow:0 1px 2px rgba(24,32,3,.36);display:block;height:23px;left:0;position:absolute;top:0;transition:transform .25s ease,background-color .25s ease;width:23px}#cc-main .toggle__icon-off,#cc-main .toggle__icon-on{height:100%;position:absolute;transition:opacity .15s ease;width:100%}#cc-main .toggle__icon-on{opacity:0;transform:rotate(45deg)}#cc-main .toggle__icon-on svg{stroke:var(--cc-toggle-on-bg);transform:scale(.55) rotate(-45deg)}#cc-main .toggle__icon-off{opacity:1}#cc-main .toggle__icon-off svg{stroke:var(--cc-toggle-off-bg);transform:scale(.55)}#cc-main .section__toggle:checked~.toggle__icon{background:var(--cc-toggle-on-bg);box-shadow:0 0 0 1px var(--cc-toggle-on-bg)}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-circle{background-color:var(--cc-toggle-on-knob-bg);transform:translateX(27px)}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-on{opacity:1}#cc-main .section__toggle:checked~.toggle__icon .toggle__icon-off{opacity:0}#cc-main .section__toggle:checked:disabled~.toggle__icon{background:var(--cc-toggle-readonly-bg);box-shadow:0 0 0 1px var(--cc-toggle-readonly-bg)}#cc-main .section__toggle:checked:disabled~.toggle__icon .toggle__icon-circle{background:var(--cc-toggle-readonly-knob-bg);box-shadow:none}#cc-main .section__toggle:checked:disabled~.toggle__icon svg{stroke:var(--cc-toggle-readonly-knob-icon-color)}#cc-main .toggle__label{opacity:0;overflow:hidden;pointer-events:none;position:absolute;top:0;z-index:-1}#cc-main .pm__section-desc-wrapper{color:var(--cc-secondary-color);display:flex;flex-direction:column;font-size:.9em}#cc-main .pm__section-desc-wrapper>:not(:last-child){border-bottom:1px solid var(--cc-cookie-category-block-border)}#cc-main .pm__section-services{display:flex;flex-direction:column}#cc-main .pm__service{align-items:center;display:flex;justify-content:space-between;padding:.4em 1.2em;position:relative;transition:background-color .15s ease}#cc-main .pm__service:hover{background-color:var(--cc-cookie-category-block-hover-bg)}#cc-main .pm__service-header{align-items:center;display:flex;margin-right:1em;width:100%}#cc-main .pm__service-icon{border:2px solid;border-radius:100%;height:8px;margin-left:6px;margin-right:20px;margin-top:1px;min-width:8px}#cc-main .pm__service-title{font-size:.95em;width:100%;word-break:break-word}#cc-main .pm__section-desc{line-height:1.5em}#cc-main .pm__section-table{border-collapse:collapse;font-size:.9em;margin:0;overflow:hidden;padding:0;text-align:left;width:100%}#cc-main .pm__table-caption{text-align:left}#cc-main .pm__table-caption,#cc-main .pm__table-head>tr{border-bottom:1px dashed var(--cc-separator-border-color);color:var(--cc-primary-color);font-weight:600}#cc-main .pm__table-tr{transition:background-color .15s ease}#cc-main .pm__table-tr:hover{background:var(--cc-cookie-category-block-hover-bg)}#cc-main .pm__table-caption,#cc-main .pm__table-td,#cc-main .pm__table-th{padding:.625em .625em .625em 1.2em;vertical-align:top}#cc-main .pm__footer{border-top:1px solid var(--cc-separator-border-color);display:flex;justify-content:space-between}#cc-main .pm__btn-group{display:flex}#cc-main .pm__btn+.pm__btn,#cc-main .pm__btn-group+.pm__btn-group{margin-left:.375rem}#cc-main .pm--flip .pm__btn+.pm__btn,#cc-main .pm--flip .pm__btn-group+.pm__btn-group{margin-left:0;margin-right:.375rem}#cc-main .pm__btn{background:var(--cc-btn-primary-bg);border:1px solid var(--cc-btn-primary-border-color);border-radius:var(--cc-btn-border-radius);color:var(--cc-btn-primary-color);flex:auto;font-size:.82em;font-weight:600;min-height:42px;min-width:110px;padding:.5em 1.5em;text-align:center;transition:background-color .15s ease,border-color .15s ease,color .15s ease}#cc-main .pm__btn:hover{background:var(--cc-btn-primary-hover-bg);border-color:var(--cc-btn-primary-hover-border-color);color:var(--cc-btn-primary-hover-color)}#cc-main .pm__btn--secondary{background:var(--cc-btn-secondary-bg);border-color:var(--cc-btn-secondary-border-color);color:var(--cc-btn-secondary-color)}#cc-main .pm__btn--secondary:hover{background:var(--cc-btn-secondary-hover-bg);border-color:var(--cc-btn-secondary-hover-border-color);color:var(--cc-btn-secondary-hover-color)}#cc-main .pm--box{height:calc(100% - 2em);left:var(--cc-modal-margin);margin:0 auto;max-height:37.5em;max-width:43em;right:var(--cc-modal-margin);top:50%;transform:translateY(calc(-50% + 1.6em))}#cc-main .pm--box.pm--flip .pm__btn-group,#cc-main .pm--box.pm--flip .pm__footer{flex-direction:row-reverse}#cc-main .pm--bar{border-radius:0;bottom:0;height:100%;margin:0;max-height:none;max-width:29em;opacity:1;top:0;width:100%;--cc-modal-transition-duration:.35s}#cc-main .pm--bar .pm__section-table,#cc-main .pm--bar .pm__table-body,#cc-main .pm--bar .pm__table-td,#cc-main .pm--bar .pm__table-th,#cc-main .pm--bar .pm__table-tr{display:block}#cc-main .pm--bar .pm__table-head{display:none}#cc-main .pm--bar .pm__table-caption{display:block}#cc-main .pm--bar .pm__table-tr:not(:last-child){border-bottom:1px solid var(--cc-separator-border-color)}#cc-main .pm--bar .pm__table-td{display:flex;justify-content:space-between}#cc-main .pm--bar .pm__table-td:before{color:var(--cc-primary-color);content:attr(data-column);flex:1;font-weight:600;min-width:100px;overflow:hidden;padding-right:2em;text-overflow:ellipsis}#cc-main .pm--bar .pm__table-td>div{flex:3}#cc-main .pm--bar:not(.pm--wide) .pm__body,#cc-main .pm--bar:not(.pm--wide) .pm__footer,#cc-main .pm--bar:not(.pm--wide) .pm__header{padding:1em 1.3em}#cc-main .pm--bar:not(.pm--wide) .pm__btn-group,#cc-main .pm--bar:not(.pm--wide) .pm__footer{flex-direction:column}#cc-main .pm--bar:not(.pm--wide) .pm__btn+.pm__btn,#cc-main .pm--bar:not(.pm--wide) .pm__btn-group+.pm__btn-group{margin:.375rem 0 0}#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group,#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__footer{flex-direction:column-reverse}#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn+.pm__btn,#cc-main .pm--bar:not(.pm--wide).pm--flip .pm__btn-group+.pm__btn-group{margin-bottom:.375rem;margin-top:0}#cc-main .pm--bar:not(.pm--wide) .pm__badge{display:none}#cc-main .pm--bar.pm--left{left:0;transform:translateX(-100%)}#cc-main .pm--bar.pm--right{right:0;transform:translateX(100%)}#cc-main .pm--bar.pm--wide{max-width:35em}#cc-main .pm--bar.pm--wide .pm__body,#cc-main .pm--bar.pm--wide .pm__footer,#cc-main .pm--bar.pm--wide .pm__header{padding:1em 1.4em}#cc-main .pm--bar.pm--wide.pm--flip .pm__btn-group,#cc-main .pm--bar.pm--wide.pm--flip .pm__footer{flex-direction:row-reverse}#cc-main .pm-overlay{background:var(--cc-overlay-bg);bottom:0;content:"";left:0;opacity:0;position:fixed;right:0;top:0;visibility:hidden;z-index:1}#cc-main .cc--anim .pm,#cc-main .cc--anim .pm-overlay{transition:opacity var(--cc-modal-transition-duration) ease,visibility var(--cc-modal-transition-duration) ease,transform var(--cc-modal-transition-duration) ease}.show--preferences #cc-main .cc--anim .pm{opacity:1;visibility:visible!important}.show--preferences #cc-main .cc--anim .pm--box{transform:translateY(-50%)}.show--preferences #cc-main .cc--anim .pm--bar{transform:translateX(0)}.show--preferences #cc-main .cc--anim .pm-overlay{opacity:1;visibility:visible}#cc-main.cc--rtl .pm__service-header{margin-left:1em;margin-right:0}#cc-main.cc--rtl .pm__section-arrow{left:unset;right:18px}#cc-main.cc--rtl .section__toggle-wrapper{left:18px;right:unset;transform-origin:left}#cc-main.cc--rtl .toggle-service{left:0}#cc-main.cc--rtl .pm__service-icon{margin-left:20px;margin-right:5px}#cc-main.cc--rtl .pm__section--toggle .pm__section-title{padding-left:5.4em;padding-right:1.2em}#cc-main.cc--rtl .pm__section--expandable .pm__section-title{padding-right:3.4em}#cc-main.cc--rtl .pm__badge{margin-left:unset;margin-right:1em}#cc-main.cc--rtl .toggle__icon-circle{transform:translateX(27px)}#cc-main.cc--rtl .toggle-service .toggle__icon-circle{transform:translateX(23px)}#cc-main.cc--rtl .section__toggle:checked~.toggle__icon .toggle__icon-circle{transform:translateX(0)}#cc-main.cc--rtl .pm__table-td,#cc-main.cc--rtl .pm__table-th{padding-left:unset;padding-right:1.2em;text-align:right}#cc-main.cc--rtl .pm__table-td{padding-left:unset;padding-right:1.2em}#cc-main.cc--rtl .pm__table-td:before{padding-left:2em;padding-right:unset}#cc-main.cc--rtl .pm__btn+.pm__btn,#cc-main.cc--rtl .pm__btn-group+.pm__btn-group{margin-left:0;margin-right:.375rem}#cc-main.cc--rtl .pm--flip .pm__btn+.pm__btn,#cc-main.cc--rtl .pm--flip .pm__btn-group+.pm__btn-group{margin-left:.375rem;margin-right:0}#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn+.pm__btn,#cc-main.cc--rtl .pm--flip.pm--bar:not(.pm--wide) .pm__btn-group+.pm__btn-group{margin-left:0}@media screen and (max-width:640px){#cc-main .pm{border-radius:0;bottom:0;height:auto;left:0;max-height:100%;max-width:none!important;right:0;top:0;transform:translateY(1.6em)}#cc-main .pm__body,#cc-main .pm__footer,#cc-main .pm__header{padding:.9em!important}#cc-main .pm__badge{display:none}#cc-main .pm__section-table,#cc-main .pm__table-body,#cc-main .pm__table-caption,#cc-main .pm__table-td,#cc-main .pm__table-th,#cc-main .pm__table-tr{display:block}#cc-main .pm__table-head{display:none}#cc-main .pm__table-tr:not(:last-child){border-bottom:1px solid var(--cc-separator-border-color)}#cc-main .pm__table-td{display:flex;justify-content:space-between}#cc-main .pm__table-td:before{color:var(--cc-primary-color);content:attr(data-column);flex:1;font-weight:600;min-width:100px;overflow:hidden;padding-right:2em;text-overflow:ellipsis}#cc-main .pm__table-td>div{flex:3}#cc-main .pm__btn-group,#cc-main .pm__footer{flex-direction:column!important}#cc-main .pm__btn-group{display:flex!important}#cc-main .pm__btn+.pm__btn,#cc-main .pm__btn-group+.pm__btn-group{margin:.375rem 0 0!important}#cc-main .pm--flip .pm__btn+.pm__btn,#cc-main .pm--flip .pm__btn-group+.pm__btn-group{margin-bottom:.375rem!important;margin-top:0!important}#cc-main .pm--flip .pm__btn-group,#cc-main .pm--flip .pm__footer{flex-direction:column-reverse!important}.show--preferences #cc-main .cc--anim .pm{transform:translateY(0)!important}} /* ========================================================= COOKIE CONSENT OVERRIDES ========================================================= */ :root { --cc-primary-color: var(--text-color); --cc-btn-primary-bg: var(--blue-a11y); --cc-btn-primary-hover-bg: var(--navy); --cc-btn-border-radius: var(--button-radius); --cc-btn-secondary-bg: var(--gray-100); --cc-btn-secondary-color: var(--gray-800); --cc-btn-secondary-hover-bg: var(--gray-200); --cc-btn-secondary-hover-color: var(--cc-btn-secondary-colo); --cc-font-family: var(--font-body); --cc-cookie-category-block-bg: var(--gray-50); --cc-cookie-category-block-hover-bg: var(--gray-100); --cc-toggle-readonly-bg: var(--gray-300); --cc-toggle-off-bg: var(--gray-700); --cc-separator-border-color: var(--gray-100); } #cc-main { & a { color: var(--blue-a11y); } & :is(.cm__title, .pm__title) { color: var(--navy); font-weight: 700; font-size: var(--fs-1); } & .cm__desc { font-size: var(--fs-0); } & .cm__btn { font-family: var(--font-display); text-transform: uppercase; } & .cc--anim .cm__btn { transition: all var(--transition-base); } & svg { height: auto; } & .pm__close-btn:hover svg { stroke: var(--cc-btn-secondary-color); } & .pm__section { border-radius: 0; } & .pm__section:not(:first-child):hover { background-color: var(--gray-50); } & .pm__section-title { color: var(--navy); } } /* MARK: Globals ----------------------------------------------- */ /* @import "global/global-styles.css"; */ /* MARK: Components / blocks ----------------------------------------------- */ /* @import "blocks/forms.css"; */ /* @import "blocks/skip-link.css"; */ /* MARK: Compositions / layouts ----------------------------------------------- */ /* MARK: Utilities ----------------------------------------------- */ /* @import "utilities/aspect-ratio.css"; */ /* MARK: Vendor / third-party ----------------------------------------------- */ /*# sourceMappingURL=app.css.map*/