/** * Globals: common rules */ /* --------------------------------- MARK: GENERAL 1rem = 16px * 125% = 20px ---------------------------------- */ html { caret-color: var(--color-fg); font-size: 125%; hanging-punctuation: first last; scroll-behavior: smooth; text-size-adjust: none; -webkit-text-size-adjust: none; transition: font-size 500ms var(--ease-in-out-cubic); } body { background-color: var(--color-bg); color: var(--color-fg); font: 400 var(--f-md) / var(--lh-2xl) var(--f-arial); font-feature-settings: "kern" 1, "liga" 1; font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant: common-ligatures; overflow-anchor: none; -ms-overflow-style: none; text-rendering: optimizelegibility; transition: background-color 500ms var(--ease-in-out-cubic), color 500ms var(--ease-in-out-cubic); } html, body { height: 100%; } body > footer.footer { position: sticky; top: calc(var(--vh) * 100); } body.admin-bar > #wpadminbar ~ header { margin-top: 32px; } body.no-scroll { overflow: hidden; touch-action: none; } .logged-in .menu-item:is([disabled], :disabled, .disabled), .logged-in .menu-item:is([disabled], :disabled, .disabled) a { opacity: 1; pointer-events: all; } /* --------------------------------- MARK: BASE ELEMENTS ---------------------------------- */ .grecaptcha-badge { visibility: hidden; } .no-scroll { overflow: hidden; } [hidden], .hidden { display: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } input, textarea { hanging-punctuation: none; } svg { height: auto; max-height: 100%; max-width: 100%; overflow: visible; position: relative; vertical-align: top; width: auto; } /* * Image defaults, as shared by Harry Roberts * Harry's Tweet: https://twitter.com/csswizardry/status/1717841334462005661 */ img { background-repeat: no-repeat; background-size: cover; font-style: italic; height: auto; max-width: 100%; shape-margin: 0.75rem; vertical-align: middle; width: 100%; } video { height: 100%; max-height: 100%; max-width: 100%; object-fit: cover; width: 100%; } /* --------------------------------- MARK: TYPOGRAPHY ---------------------------------- */ p > br:only-child, p:empty { display: none; } :is(strong, b, em, i, u) { font-style: normal; font-weight: 400; text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--underline-color); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); /* border-bottom: solid var(--underline-thickness) var(--underline-color); */ transition: var(--t-fonts); } sup { font-variant-position: sub; } /* :where([class*="content--"])[class*="--text"] { text-wrap: balance; } */ :where([class*="content--"])[class*="--text"] > * + * { --paragraph-space: 1rem; -webkit-margin-before: var(--paragraph-space); margin-block-start: var(--paragraph-space); } :where([class*="content--"])[class*="--text"] > * + *:empty { -webkit-margin-before: 0; margin-block-start: 0; } :where([class*="content--"])[class*="--col--"][class*="--g-sm"] { column-gap: var(--size-sm); } :where([class*="content--"])[class*="--col--"][class*="--g-md"] { column-gap: var(--size-md); } :where([class*="content--"])[class*="--col--"][class*="--g-lg"] { column-gap: var(--size-lg); } /* :where([class*="content--"])[class*="--col--"][class*="--g-xl"] { column-gap: var(--size-xl); } */ :where([class*="content--"])[class*="--col--"][class*="--2"] { columns: 2; } :where([class*="content--"])[class*="--col--"][class*="--3"] { columns: 3; } :where([class*="content--"])[class*="--col--"][class*="--4"] { columns: 4; } @media (width > 1680px) { :where([class*="content--"][class*="--text"]) :is(p, ul) { max-width: 90ch; } } :where([class*="content--"][class*="--text"]) strong { font-weight: 400; text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--underline-color); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); /* border-bottom: solid var(--underline-thickness) var(--underline-color); */ transition: var(--t-fonts); } :where([class*="content--"][class*="--text"]) em { font-style: normal; font-weight: 400; text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--underline-color); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); /* border-bottom: solid var(--underline-thickness) var(--underline-color); */ transition: var(--t-fonts); } /* LINKS */ :where([class*="content--"][class*="--text"]):not([class*="--no-a"]) a:not([class*="btn--"]), :where([class*="content--"][class*="--text"]) [style*="text-decoration:"][style*="underline"] { --underline-color: transparent; text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--underline-color); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); transition: var(--t-fonts); color: var(--color-focus); /* border-bottom: solid var(--underline-thickness) transparent; */ } /* :where([class*="content--"][class*="--text"]):not([class*="--no-a"]) a:not([class*="btn--"]) > :is(strong, b), :where([class*="content--"][class*="--text"]) [style*="text-decoration:"][style*="underline"] { text-decoration-line: unset; } */ :where(.hasHover [class*="content--"][class*="--text"]):not([class*="--no-a"]) a:not([class*="btn--"]):hover, :where(.hasHover [class*="content--"][class*="--text"]) [style*="text-decoration:"][style*="underline"]:hover { --underline-color: var(--color-accent); /* border-bottom-color: var(--ui-accent); */ } :where([class*="content--"][class*="--text"]):not([class*="--no-a"]) a:not([class*="btn--"])[target="_blank"], :where([class*="content--"][class*="--text"]) [style*="text-decoration:"][style*="underline"][target="_blank"] { padding-right: calc(var(--size-2xs) + 0.68571429em); } :where([class*="content--"][class*="--text"]):not([class*="--no-a"]) a:not([class*="btn--"])[target="_blank"]::after, :where([class*="content--"][class*="--text"]) [style*="text-decoration:"][style*="underline"][target="_blank"]::after { background-color: currentcolor; content: ""; display: inline-block; height: 0.68571429em; margin-left: var(--size-2xs); margin-right: calc(-1 * (var(--size-2xs) + 0.68571429em)); vertical-align: baseline; width: 0.68571429em; -webkit-mask-image: var(--icon-top-right); mask-image: var(--icon-top-right); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* LISTS */ :where([class*="content--"][class*="--text"]) :is(ul, ol) { padding-left: calc(var(--px-16) + var(--size-xs)); } :where([class*="content--"][class*="--text"]) :is(ul, ol) li { display: flex; position: relative; } :where([class*="content--"][class*="--text"]) ol li { list-style: decimal outside; } :where([class*="content--"][class*="--text"]) ol li::marker { color: var(--color-focus); } :where([class*="content--"][class*="--text"]) :is(ul, ol) li + li { --paragraph-space: 0.5rem; margin-block-start: var(--paragraph-space); } :where([class*="content--"][class*="--text"]) ul li::before { background-color: currentcolor; color: var(--color-focus); content: ""; display: inline-block; flex: 0 0 auto; height: var(--px-16); margin-left: calc(-1 * (var(--px-16) + var(--size-xs))); margin-right: var(--size-xs); margin-top: var(--px-4); -webkit-mask-image: var(--icon-diamond); mask-image: var(--icon-diamond); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; vertical-align: baseline; width: var(--px-16); } :where( [class*="t--"][class*="--serif"][class*="--lg"][class*="content--"][class*="--text"] ) ul li::before { margin-top: 0.29220779em; } /* STYLES */ :where([class*="t--"])[class*="--mini"] { --paragraph-space: 0; font-family: var(--f-inter); font-style: normal; } :where([class*="t--"])[class*="--sans"] { font-family: var(--f-arial); font-style: normal; } :where([class*="t--"])[class*="--serif"] { --paragraph-space: 0; font-family: var(--f-davinci); font-style: normal; font-feature-settings: "liga" 1, "kern" 1; font-kerning: normal; font-variant-ligatures: common-ligatures; letter-spacing: var(--ls-n3); line-height: var(--lh-lg); } :where([class*="t--"])[class*="--display"] { --paragraph-space: 0; font-family: var(--f-davinci); font-feature-settings: "onum" 1, "pnum" 1, "liga" 1, "dlig" 1, "kern" 1; font-style: italic; font-variant-ligatures: common-ligatures discretionary-ligatures; font-variant-numeric: oldstyle-nums proportional-nums; letter-spacing: var(--ls-n4); line-height: var(--lh-md); text-transform: lowercase; } /* Mini 3XS: Inter 11px */ :where([class*="t--"][class*="--mini"])[class*="--3xs"] { font-size: var(--f-3xs); letter-spacing: var(--ls-0); line-height: var(--lh-lg); } /* Mini 3XS SB: Inter SemiBold 11px */ :where([class*="t--"][class*="--mini"])[class*="--3xs"][class*="--600"] { line-height: var(--lh-xl); } /* Mini XS: Inter 14px */ :where([class*="t--"][class*="--mini"])[class*="--xs"] { font-size: var(--f-xs); letter-spacing: var(--ls-0); line-height: var(--lh-lg); } /* Mini XS SB: Inter SemiBold 14px */ :where([class*="t--"][class*="--mini"])[class*="--xs"][class*="--600"] { line-height: var(--lh-xl); } /* Sans 2XS: Arial Narrow 12px */ :where([class*="t--"][class*="--sans"])[class*="--2xs"] { font-size: var(--f-2xs); letter-spacing: var(--ls-0); line-height: var(--lh-2xl); } /* Sans SM: Arial Narrow 15px */ :where([class*="t--"][class*="--sans"])[class*="--sm"] { font-size: var(--f-sm); letter-spacing: var(--ls-1); line-height: var(--lh-sm); } /* Sans SM UC: Arial Narrow 15px */ :where([class*="t--"][class*="--sans"])[class*="--sm"][class*="--uc"] { letter-spacing: var(--ls-n1); text-transform: uppercase; } /* Sans MD: Arial Narrow 20px */ :where([class*="t--"][class*="--sans"])[class*="--md"] { font-size: var(--f-md); letter-spacing: var(--ls-0); line-height: var(--lh-2xl); } /* Sans MD UC: Arial Narrow 20px */ :where([class*="t--"][class*="--sans"])[class*="--md"][class*="--uc"] { letter-spacing: var(--ls-n3); line-height: var(--lh-xs); text-transform: uppercase; } /* Serif MD: DaVinci 20px */ :where([class*="t--"][class*="--serif"])[class*="--md"] { font-size: var(--f-md); } /* Serif LG: DaVinci 35px */ :where([class*="t--"][class*="--serif"])[class*="--lg"] { font-size: var(--f-lg); } /* Serif XL: DaVinci 50px */ :where([class*="t--"][class*="--serif"])[class*="--xl"] { font-size: var(--f-xl); } /* Serif 2XL: DaVinci 70px */ :where([class*="t--"][class*="--serif"])[class*="--2xl"] { font-size: var(--f-2xl); } /* Display LG: DaVinci Italic 35px */ :where([class*="t--"][class*="--display"])[class*="--lg"] { font-size: var(--f-lg); } /* Display XL: DaVinci Italic 50px */ :where([class*="t--"][class*="--display"])[class*="--xl"] { font-size: var(--f-xl); } /* Display 2XL: DaVinci Italic 70px */ :where([class*="t--"][class*="--display"])[class*="--2xl"] { font-size: var(--f-2xl); } /* Display 3XL: DaVinci Italic 150px */ :where([class*="t--"][class*="--display"])[class*="--3xl"] { font-size: var(--f-3xl); } :where([class*="t--"])[class*="--m-0"] { margin: 0; } :where([class*="t--"])[class*="--400"] { font-weight: 400; } :where([class*="t--"])[class*="--600"] { font-weight: 600; } :where([class*="t--"])[class*="--lh-xs"] { line-height: var(--lh-xs); } :where([class*="t--"])[class*="--lh-sm"] { line-height: var(--lh-sm); } :where([class*="t--"])[class*="--lh-md"] { line-height: var(--lh-md); } :where([class*="t--"])[class*="--lh-lg"] { line-height: var(--lh-lg); } :where([class*="t--"])[class*="--lh-xl"] { line-height: var(--lh-xl); } :where([class*="t--"])[class*="--lh-2xl"] { line-height: var(--lh-2xl); } :where([class*="t--"])[class*="--ls-n4"] { letter-spacing: var(--ls-n4); } :where([class*="t--"])[class*="--ls-n3"] { letter-spacing: var(--ls-n3); } :where([class*="t--"])[class*="--ls-n1"] { letter-spacing: var(--ls-n1); } :where([class*="t--"])[class*="--ls-0"] { letter-spacing: var(--ls-0); } :where([class*="t--"])[class*="--ls-1"] { letter-spacing: var(--ls-1); } :where([class*="t--"])[class*="--it"] { font-style: italic; } :where([class*="t--"])[class*="--al"] { text-align: left; } :where([class*="t--"])[class*="--ar"] { text-align: right; } :where([class*="t--"])[class*="--ac"] { text-align: center; } :where([class*="t--"])[class*="--lc"] { text-transform: lowercase; } :where([class*="t--"])[class*="--uc"] { text-transform: uppercase; } :where([class*="t--"])[class*="--nc"] { text-transform: none; } :where([class*="t--"])[class*="--ul"] { color: currentcolor; text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--underline-color); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); } :where([class*="t--"])[class*="--color-bg"] { color: var(--color-bg); } :where([class*="t--"])[class*="--color-fg"] { color: var(--color-fg); } :where([class*="t--"])[class*="--color-accent"] { color: var(--color-accent); } :where([class*="t--"])[class*="--color-focus"] { color: var(--ui-focus); } :where([class*="t--"])[class*="--color-ui-25"] { color: var(--ui-25); } :where([class*="t--"])[class*="--color-ui-50"] { color: var(--ui-50); } :where([class*="t--"])[class*="--color-ui-75"] { color: var(--ui-75); } /* --------------------------------- MARK: BUTTONS ---------------------------------- */ .btn-group { display: inline-flex; gap: var(--size-xs); } [class*="btn--"] { cursor: pointer; transition: var(--t-btns); } /* HEADER */ :where([class*="btn--"])[class*="--header"] { color: var(--color-bg); cursor: default; } :where([class*="btn--"])[class*="--header"] a { transition: var(--t-btns); cursor: pointer; } :where(.hasHover [class*="btn--"])[class*="--header"] a:hover { color: var(--ui-accent-contrast); } :where([class*="btn--"][class*="--header"])[class*="--item"] { font: 400 var(--f-2xl) / var(--lh-md) var(--f-davinci); letter-spacing: var(--ls-n4); text-transform: lowercase; text-align: center; font-feature-settings: "onum" 1, "pnum" 1, "liga" 1, "dlig" 1, "kern" 1; font-style: italic; font-variant-ligatures: common-ligatures discretionary-ligatures; font-variant-numeric: oldstyle-nums proportional-nums; position: relative; } :where([class*="btn--"][class*="--header"])[class*="--item"]:not( .menu-item-has-children ) > a { transition: var(--t-menu); padding-inline-end: 0; will-change: padding, color; } :where(.hasHover [class*="btn--"][class*="--header"])[class*="--item"]:not( .menu-item-has-children ) > a:hover { padding-inline-end: calc(var(--size-sm) + var(--px-48)); } :where([class*="btn--"][class*="--header"])[class*="--item"]:not( .menu-item-has-children ) > a::after { background-color: currentcolor; content: ""; display: inline-block; height: var(--px-22); -webkit-mask-image: var(--icon-right); mask-image: var(--icon-right); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; vertical-align: middle; width: var(--px-48); margin-left: var(--size-sm); position: absolute; bottom: var(--px-16); opacity: 0; transition: var(--t-menu); will-change: translate, opacity; translate: calc(-1 * var(--size-sm)) 0; } :where(.hasHover [class*="btn--"][class*="--header"])[class*="--item"]:not( .menu-item-has-children ) > a:hover::after { opacity: 1; translate: 0 0; } :where( [class*="btn--"][class*="--header"] )[class*="--item"].menu-item-has-children > a { position: relative; padding-right: calc(var(--px-48) + var(--size-xs)); } :where( [class*="btn--"][class*="--header"] )[class*="--item"].menu-item-has-children > a::after { background-color: currentcolor; content: ""; display: inline-block; height: var(--px-48); -webkit-mask-image: var(--icon-plus); mask-image: var(--icon-plus); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; vertical-align: middle; width: var(--px-48); margin-left: var(--size-xs); position: absolute; bottom: var(--px-4); } :where( [class*="btn--"][class*="--header"] )[class*="--item"].menu-item-has-children.active > a::after { -webkit-mask-image: var(--icon-minus); mask-image: var(--icon-minus); } :where([class*="btn--"][class*="--header"])[class*="--subitem"] { font: 400 var(--f-md) / var(--lh-xs) var(--f-arial); letter-spacing: var(--ls-n3); text-transform: uppercase; text-align: center; grid-column: 1 / -1; } :where([class*="btn--"][class*="--header"])[class*="--subitem"] [class*="--subitem"] { text-align: left; grid-column-start: 2; } :where([class*="btn--"])[class*="--header"]:focus-within > :focus-visible { box-shadow: var(--focus-footer); z-index: 1; } :where([class*="btn--"])[class*="--header"]:is( [disabled], :disabled, .disabled ) { opacity: 0.5; pointer-events: none; } /* FOOTER */ :where([class*="btn--"])[class*="--footer"] { color: var(--color-bg); } :where([class*="btn--"])[class*="--footer"] a { transition: var(--t-btns); } :where(.hasHover [class*="btn--"])[class*="--footer"] a:hover { color: var(--ui-accent-contrast); } :where([class*="btn--"][class*="--footer"])[class*="--item"] { font: 400 var(--f-md) / var(--lh-xs) var(--f-arial); letter-spacing: var(--ls-n3); text-transform: uppercase; } :where([class*="btn--"][class*="--footer"])[class*="--subitem"] { font: 400 var(--f-sm) / var(--lh-sm) var(--f-arial); letter-spacing: var(--ls-1); text-transform: none; } :where([class*="btn--"])[class*="--footer"]:focus-within > :focus-visible { box-shadow: var(--focus-footer); z-index: 1; } :where([class*="btn--"])[class*="--footer"]:is( [disabled], :disabled, .disabled ) { opacity: 0.5; pointer-events: none; } /* MINI (header + categories + tags + breadcrumbs) */ :where([class*="btn--"])[class*="--mini"] { --underline-color: transparent; color: var(--color-fg); font: 400 var(--f-md) / var(--lh-sm) var(--f-arial); letter-spacing: var(--ls-n3); text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--underline-color); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); text-transform: uppercase; transition: var(--t-btns); } [class*="--bg-fore"] :where([class*="btn--"])[class*="--mini"] { color: var(--color-bg); } :where(.hasHover [class*="btn--"])[class*="--mini"]:hover { --underline-color: var(--color-accent); } :where([class*="btn--"])[class*="--mini"]:focus-visible { box-shadow: var(--focus-primary); } :where([class*="btn--"])[class*="--mini"]:is([disabled], :disabled, .disabled) { opacity: 0.5; pointer-events: none; } /* CTAs */ :where([class*="btn--"]):is( [class*="--primary"], [class*="--secondary"], [class*="--tertiary"] ) { align-items: center; justify-content: center; display: inline-flex; font: 400 var(--f-sm) / var(--lh-sm) var(--f-arial); height: var(--size-md); letter-spacing: var(--ls-1); padding-inline: var(--size-sm); text-align: center; } :where([class*="btn--"]):is( [class*="--primary"], [class*="--secondary"], [class*="--tertiary"] ):is([disabled], :disabled, .disabled) { opacity: 0.5; pointer-events: none; } :where([class*="btn--"])[class*="--primary"], [class*="--bg-fore"] :where([class*="btn--"])[class*="--tertiary"] { background-color: var(--color-fg); color: var(--color-bg); } :where(.hasHover [class*="btn--"])[class*="--primary"]:hover, .hasHover [class*="--bg-fore"] :where([class*="btn--"])[class*="--tertiary"]:hover { background-color: var(--ui-accent-contrast); color: var(--color-fg); } :where([class*="btn--"])[class*="--secondary"] { background-color: var(--color-accent); color: var(--color-fg); } :where(.hasHover [class*="btn--"])[class*="--secondary"]:hover { background-color: var(--ui-accent-contrast); } :where([class*="btn--"]):is( [class*="--primary"], [class*="--secondary"] ):focus-visible, .hasHover [class*="--bg-fore"] :where([class*="btn--"])[class*="--tertiary"]:focus-visible { box-shadow: var(--focus-primary); } :where([class*="btn--"])[class*="--tertiary"], [class*="--bg-fore"] :where([class*="btn--"])[class*="--primary"] { background-color: var(--ui-25); color: var(--color-fg); } [class*="--bg-ui-25"] :where([class*="btn--"])[class*="--tertiary"] { background-color: var(--color-bg); color: var(--color-fg); } :where(.hasHover [class*="btn--"])[class*="--tertiary"]:hover, .hasHover [class*="--bg-fore"] :where([class*="btn--"])[class*="--primary"]:hover { background-color: var(--ui-accent-contrast); } :where([class*="btn--"])[class*="--tertiary"]:focus-visible, [class*="--bg-fore"] :where([class*="btn--"])[class*="--primary"]:focus-visible { box-shadow: var(--focus-tertiary); } /* TEXT CTAs */ :where([class*="btn--"])[class*="--text"] { --underline-color: transparent; color: var(--color-fg); font: 400 var(--f-lg) / var(--lh-lg) var(--f-davinci); letter-spacing: var(--ls-n3); text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--underline-color); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); /* border-bottom: solid var(--underline-thickness) transparent; */ } :where(.hasHover [class*="btn--"])[class*="--text"]:hover { /* --underline-color: var(--ui-accent); */ /* border-bottom-color: var(--ui-accent); */ color: var(--color-focus); } :where([class*="btn--"])[class*="--text"]:focus-visible { box-shadow: var(--focus-tertiary); } :where([class*="btn--"])[class*="--text"]:is([disabled], :disabled, .disabled) { opacity: 0.5; pointer-events: none; } [class*="--bg-fore"] :where([class*="btn--"])[class*="--text"] { color: var(--color-bg); } .hasHover [class*="--bg-fore"] :where([class*="btn--"])[class*="--text"]:hover { color: var(--ui-accent-contrast); } [class*="--bg-fore"] :where([class*="btn--"])[class*="--text"]:focus-visible { box-shadow: var(--focus-primary); } :where([class*="btn--"][class*="--text"])[class*="--color"] { color: var(--color-focus); } :where(.hasHover [class*="btn--"][class*="--text"])[class*="--color"]:hover { --underline-color: var(--ui-accent); } :where([class*="btn--"][class*="--text"])[class*="--color"]:focus-visible { box-shadow: var(--focus-tertiary); } [class*="--bg-fore"] :where([class*="btn--"][class*="--text"])[class*="--color"] { color: var(--ui-accent-contrast); } .hasHover [class*="--bg-fore"] :where([class*="btn--"][class*="--text"])[class*="--color"]:hover { --underline-color: var(--ui-accent); } [class*="--bg-fore"] :where([class*="btn--"][class*="--text"])[class*="--color"]:focus-visible { box-shadow: var(--focus-primary); } :where([class*="btn--"][class*="--text"])[class*="--count"] { align-items: center; display: inline-flex; gap: var(--size-2xs); } :where([class*="btn--"][class*="--text"])[class*="--count"] > .counter { font: 400 var(--f-md) / var(--lh-xs) var(--f-arial); letter-spacing: var(--ls-n3); text-transform: uppercase; } :where([class*="btn--"][class*="--text"][class*="--count"]) > .counter::before { /* no-width char added before "(" to prevent safari collapse a single character in pseudo-elements, safari I hate you */ content: "\200B("; display: inline-block; } :where([class*="btn--"][class*="--text"][class*="--count"]) > .counter::after { content: ")"; display: inline-block; } :where([class*="btn--"][class*="--text"]):is( [class*="--more"], [class*="--count"] ) { line-height: var(--lh-sm); text-decoration: unset; border-bottom: solid var(--underline-thickness) transparent; } :where(.hasHover [class*="btn--"][class*="--text"]):is( [class*="--more"], [class*="--count"] ):hover { border-bottom-color: var(--ui-accent); } :where([class*="btn--"][class*="--text"]):is(.active, .selected) { --underline-color: var(--color-accent); color: var(--color-fg); pointer-events: none; border-bottom-color: var(--color-accent); text-decoration: unset; } [class*="--bg-fore"] :where([class*="btn--"][class*="--text"]):is(.active, .selected) { color: var(--color-bg); } /* ICON BUTTONs */ :where([class*="btn--"])[class*="--icon"] { align-items: center; background-color: var(--color-accent); color: var(--color-fg); display: inline-flex; justify-content: center; transition: var(--t-btns); } :where([class*="btn--"])[class*="--icon"]::after { background-color: currentcolor; content: ""; display: inline-block; -webkit-mask-image: var(--icon-times); mask-image: var(--icon-times); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; vertical-align: baseline; } :where([class*="btn--"][class*="--icon"])[class*="--lg"] { height: var(--px-64); width: var(--px-64); } :where([class*="btn--"][class*="--icon"])[class*="--lg"]::after { height: var(--px-24); width: var(--px-24); } :where([class*="btn--"][class*="--icon"])[class*="--md"] { height: var(--size-md); width: var(--size-md); } :where([class*="btn--"][class*="--icon"])[class*="--md"]::after { height: var(--size-sm); width: var(--size-sm); } :where([class*="btn--"][class*="--icon"])[class*="--sm"] { height: var(--px-32); width: var(--px-32); } :where([class*="btn--"][class*="--icon"])[class*="--sm"]::after { height: var(--px-12); width: var(--px-12); } :where(.hasHover [class*="btn--"])[class*="--icon"]:hover { background-color: var(--ui-accent-contrast); } :where([class*="btn--"])[class*="--icon"]:focus-visible { box-shadow: var(--focus-primary); background-color: var(--color-accent); } :where([class*="btn--"][class*="--icon"])[class*="--negative"] { background-color: var(--color-bg); } :where(.hasHover [class*="btn--"][class*="--icon"])[class*="--negative"]:hover { background-color: var(--color-fg); color: var(--color-bg); } /* NAV */ .nav-group { display: inline-flex; gap: var(--px-1); } :where([class*="btn--"])[class*="--nav"] { align-items: center; background-color: var(--color-fg); color: var(--color-bg); display: inline-flex; height: var(--size-md); padding-block: var(--size-xs); padding-inline: var(--size-sm); } :where([class*="btn--"])[class*="--nav"]::after { background-color: currentcolor; content: ""; display: inline-block; height: var(--px-16); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; vertical-align: baseline; width: var(--px-35); } :where([class*="btn--"][class*="--nav"])[class*="--prev"]::after { -webkit-mask-image: var(--icon-left); mask-image: var(--icon-left); } :where([class*="btn--"][class*="--nav"])[class*="--next"]::after { -webkit-mask-image: var(--icon-right); mask-image: var(--icon-right); } :where(.hasHover [class*="btn--"])[class*="--nav"]:hover { background-color: var(--ui-accent-contrast); color: var(--color-fg); } :where([class*="btn--"])[class*="--nav"]:focus-visible { box-shadow: inset 0 0 0 var(--px-2) var(--color-focus), inset 0 0 0 var(--px-4) var(--color-bg); z-index: 1; } :where([class*="btn--"])[class*="--nav"]:is([disabled], :disabled, .disabled) { opacity: 0.5; pointer-events: none; } /* CROSSLINKS */ .xlink-group { display: inline-flex; flex-wrap: wrap; gap: var(--size-xs); } :where([class*="btn--"][class*="--xlink"]):not([class*="--naked"]) { --xlink-flex-basis: calc((100% - var(--size-xs)) / 2); background-color: var(--color-fg); color: var(--color-bg); flex: 1 1 var(--xlink-flex-basis); display: inline-flex; } :where([class*="btn--"][class*="--xlink"]):not([class*="--naked"]) .wrapper { padding-block: var(--size-lg) var(--size-sm); padding-inline: var(--size-sm) var(--size-md); align-items: end; display: inline-flex; flex: 1; } :where([class*="btn--"][class*="--xlink"]) .content { align-items: flex-start; display: inline-flex; flex-direction: column; gap: var(--size-sm); } :where([class*="btn--"][class*="--xlink"])[class*="--naked"] { color: var(--color-fg); display: inline-flex; width: fit-content; } :where([class*="btn--"][class*="--xlink"])[class*="--naked"] .title::after { color: var(--color-accent); } [class*="--bg-fore"] :where([class*="btn--"][class*="--xlink"])[class*="--naked"] { color: var(--color-bg); } [class*="--bg-fore"] :where([class*="btn--"][class*="--xlink"])[class*="--naked"] .title::after { color: var(--ui-accent-contrast); } .hasHover [class*="--bg-fore"] :where([class*="btn--"][class*="--xlink"])[class*="--naked"]:hover .title::after { color: var(--color-bg); } :where(.xlink-group:has(:nth-child(3)) > [class*="btn--"])[class*="--xlink"] { --xlink-flex-basis: calc((100% - (var(--size-xs) * 2)) / 3); } :where(.xlink-group:has(:nth-child(4)) > [class*="btn--"])[class*="--xlink"] { --xlink-flex-basis: calc((100% - var(--size-xs)) / 2); } :where(.xlink-group:has(:nth-child(5)) > [class*="btn--"])[class*="--xlink"] { --xlink-flex-basis: calc((100% - (var(--size-xs) * 2)) / 3); } :where(.xlink-group:has(:nth-child(6)) > [class*="btn--"])[class*="--xlink"] { --xlink-flex-basis: calc((100% - var(--size-xs)) / 2); } :where([class*="btn--"][class*="--xlink"])[class*="--alt"] { background-color: var(--color-accent); color: var(--color-fg); } :where([class*="btn--"])[class*="--xlink"] .label { font: 400 var(--f-md) / var(--lh-xs) var(--f-arial); letter-spacing: var(--ls-n3); text-transform: uppercase; } :where([class*="btn--"][class*="--xlink"]) .title { display: inline-block; font: 400 var(--f-2xl) / var(--lh-lg) var(--f-davinci); letter-spacing: var(--ls-n3); } :where([class*="btn--"][class*="--xlink"]) .title::after { background-color: currentcolor; color: var(--ui-accent-contrast); content: ""; display: inline-block; flex: 0 0 auto; height: var(--px-25); -webkit-mask-image: var(--icon-right); mask-image: var(--icon-right); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; transition: var(--t-btns); width: var(--px-57); will-change: translate; vertical-align: middle; margin-inline-start: var(--size-sm); } :where([class*="btn--"][class*="--xlink"])[class*="--alt"] .title::after { color: inherit; } :where(.hasHover [class*="btn--"])[class*="--xlink"]:not( [class*="--naked"] ):hover { background-color: var(--ui-accent-contrast); color: var(--color-fg); } :where(.hasHover [class*="btn--"])[class*="--xlink"]:hover .title::after { color: var(--color-fg); translate: var(--px-30) 0; } :where([class*="btn--"])[class*="--xlink"]:focus-within :focus-visible { --focus-primary: 0 0 0 var(--px-4) var(--color-bg), 0 0 0 var(--px-8) var(--color-focus); box-shadow: var(--focus-primary); z-index: 1; } :where([class*="btn--"])[class*="--xlink"]:is( [disabled], :disabled, .disabled ) { opacity: 0.5; pointer-events: none; } /* --------------------------------- MARK: FORM ---------------------------------- */ .form-group { display: flex; flex-wrap: wrap; row-gap: var(--size-sm); column-gap: var(--size-xs); } .field-group { color: var(--color-fg); display: flex; flex-direction: column; font: 400 var(--f-sm) / var(--lh-sm) var(--f-arial); gap: var(--size-2xs); letter-spacing: var(--ls-1); flex: 1 1 calc((100% - var(--gutter)) / 2); } .field-group.double { flex-basis: 100%; } .field-group .wpcf7-form-control-wrap { display: flex; flex-direction: column; gap: var(--size-2xs); } .field-group:not(.acceptance) :is(label, .label, .helper, .message) { color: var(--ui-75); font: 400 var(--f-2xs) / var(--lh-2xl) var(--f-arial); letter-spacing: var(--ls-0); } .field-group :is(.message, .wpcf7-not-valid-tip) { color: var(--color-fg); font: 400 var(--f-2xs) / var(--lh-2xl) var(--f-arial); letter-spacing: var(--ls-0); display: inline-flex; gap: var(--size-2xs); align-items: center; } .field-group .wpcf7-not-valid-tip::before { background-color: currentcolor; color: var(--danger); content: ""; display: inline-block; height: var(--px-16); mask-image: var(--icon-error); -webkit-mask-image: var(--icon-error); mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; width: var(--px-16); } .field-group :is( input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea, [class*="field--"] ) { -webkit-appearance: none; appearance: none; box-shadow: var(--border-input); font: inherit; min-height: var(--size-md); padding: var(--size-xs); width: 100%; } .field-group :is( input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea, [class*="field--"] ).wpcf7-not-valid { color: var(--color-fg); } .field-group :is(select, [class*="field--"][class*="--select"]) { background-image: var(--icon-chevron-down); background-position: right 10px center; background-repeat: no-repeat; background-size: var(--px-16) var(--px-16); color: var(--color-fg); display: inline-block; padding-right: var(--px-32); } .field-group :is( input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea, [class*="field--"] ):focus { box-shadow: var(--border-input), var(--focus-primary); } .field-group :is( input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea, [class*="field--"] ):invalid:focus { box-shadow: var(--border-error), var(--focus-primary); } .field-group :is( input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea, [class*="field--"] )[disabled] { background-color: var(--ui-50); box-shadow: var(--border-input-focus); color: var(--ui-75); pointer-events: none; } .field-group :is( input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea, [class*="field--"] ):is(:-webkit-autofill, :autofill) { background-color: var(--info-contrast); box-shadow: var(--border-info); } .field-group :is( input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea, [class*="field--"] ):invalid { background-color: var(--danger-contrast); box-shadow: var(--border-error); } .field-group.acceptance .wpcf7-list-item { margin: unset; display: unset; } .field-group.acceptance label { display: flex; gap: var(--size-2xs); align-items: center; cursor: pointer; color: var(--color-fg); } .field-group input[type="checkbox"] { width: var(--px-16); height: var(--px-16); margin: var(--px-3); cursor: pointer; position: relative; -webkit-appearance: none; appearance: none; box-shadow: var(--border-input); } .field-group input[type="checkbox"][disabled] { background-color: var(--ui-50); } .field-group input[type="checkbox"]:invalid { background-color: var(--danger-contrast); box-shadow: var(--border-error); } .field-group input[type="checkbox"]:checked { background-color: var(--color-accent); box-shadow: unset; } .hasHover .field-group input[type="checkbox"]:checked:hover { background-color: var(--ui-accent-contrast); box-shadow: unset; } .field-group input[type="checkbox"]:checked:focus { background-color: var(--color-accent); box-shadow: var(--focus-primary); } .field-group input[type="checkbox"]:checked::after { background-color: currentcolor; content: ""; display: inline-block; margin: auto; height: var(--px-12); -webkit-mask-image: var(--icon-check); mask-image: var(--icon-check); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; width: var(--px-12); inset: 0; position: absolute; } .hasHover .field-group input[type="checkbox"]:hover { box-shadow: var(--border-checkbox-hover); } .field-group input[type="checkbox"]:focus { box-shadow: var(--border-input), var(--focus-primary); } .field-group input[type="submit"] { align-self: start; width: auto; } .field-group.submit { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--size-sm); } .field-group.submit .wpcf7-spinner { margin: unset; } .field-group.disclaimer { display: inline-block; } .field-group:is(.disclaimer, .acceptance) a { --underline-color: var(--color-fg); text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: var(--underline-color); text-decoration-thickness: var(--underline-thickness); text-underline-offset: var(--underline-offset); transition: var(--t-btns); } .hasHover .field-group:is(.disclaimer, .acceptance) a:hover { --underline-color: transparent; color: var(--color-accent); } .field-group:is(.disclaimer, .acceptance) a:focus-visible { box-shadow: var(--focus-footer); } .form-group .wpcf7-response-output { margin: unset !important; padding: var(--size-xs) var(--size-sm) !important; border: unset !important; /* width: 100%; */ font: 400 var(--f-sm) / var(--lh-sm) var(--f-arial); letter-spacing: var(--ls-1); } .form-group.sent .wpcf7-response-output { background-color: var(--success-contrast); color: var(--success); } .form-group.spam .wpcf7-response-output { background-color: var(--warning-contrast); color: var(--warning); } .form-group.invalid .wpcf7-response-output { background-color: var(--danger-contrast); color: var(--danger); } .form-group .wpcf7-spinner { width: var(--size-md); aspect-ratio: 1; display: flex; transform-origin: 50% 125%; animation: loader-cf7-1 1.5s infinite linear; background-color: unset; opacity: unset; height: unset; border: none; border-radius: unset; padding: unset; margin: unset; position: unset; } .form-group .wpcf7-spinner::before, .form-group .wpcf7-spinner::after { content: ""; flex: 1; background: var(--color-accent); animation: inherit; transform-origin: bottom left; animation-name: loader-cf7-2; } .form-group .wpcf7-spinner::before { --s: -1; transform-origin: bottom right; position: unset; width: unset; height: unset; border-radius: unset; } @keyframes loader-cf7-1 { 0%, 10% { transform: translateY(0) scaleY(1); } 49.99% { transform: translateY(-75%) scaleY(1); } 50% { transform: translateY(-75%) scaleY(-1); } 90%, 100% { transform: translateY(-150%) scaleY(-1); } } @keyframes loader-cf7-2 { 10%, 90% { transform: rotate(0deg); } 50% { transform: rotate(calc(var(--s, 1) * 90deg)); } } /* --------------------------------- MARK: TOOLTIP ---------------------------------- */ [data-tooltip] { position: relative; display: inline-block; cursor: pointer; } [data-tooltip]::after { position: absolute; opacity: 0; pointer-events: none; content: attr(data-tooltip); /* left: calc((var(--size-sm) + var(--px-14) - var(--px-8)) * -1); */ left: var( --tooltip-left, calc((var(--size-sm) + var(--px-14) - var(--px-8)) * -1) ); bottom: calc(100% + var(--size-xs)); background-color: var(--ui-75); z-index: 10; padding: var(--size-xs) var(--gutter) calc(var(--size-sm) + var(--px-7)); width: var(--tooltip-width, 300px); translate: 0 var(--size-sm); transition: var(--t-fonts); color: var(--color-bg); font-family: var(--f-arial); font-style: normal; font-size: var(--f-sm); letter-spacing: var(--ls-1); line-height: var(--lh-sm); text-align: center; mask-image: linear-gradient(var(--ui-75), var(--ui-75)), url("data:image/svg+xml,%3Csvg viewBox='0 0 28 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 7 0 0h28z' fill='currentcolor'/%3E%3C/svg%3E"); -webkit-mask-image: linear-gradient(var(--ui-75), var(--ui-75)), url("data:image/svg+xml,%3Csvg viewBox='0 0 28 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 7 0 0h28z' fill='currentcolor'/%3E%3C/svg%3E"); /* mask-position: 0 0, var(--size-sm) 100%; -webkit-mask-position: 0 0, var(--size-sm) 100%; */ mask-position: 0 0, var(--arrow-position, var(--size-sm)) 100%; -webkit-mask-position: 0 0, var(--arrow-position, var(--size-sm)) 100%; mask-size: 100% calc(100% - var(--px-7)), var(--px-28) var(--px-7); -webkit-mask-size: 100% calc(100% - var(--px-7)), var(--px-28) var(--px-7); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; } [data-tooltip].downward { opacity: 0; pointer-events: none; transition: opacity 200ms; } [data-tooltip].downward.is-ready { opacity: 1; pointer-events: auto; } [data-tooltip].downward::after { top: calc(100% + var(--size-xs)); bottom: unset; padding: calc(var(--size-sm) + var(--px-7)) var(--size-xs) var(--size-xs); translate: 0 calc(-1 * var(--size-sm)); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 0 0 7h28z' fill='currentcolor'/%3E%3C/svg%3E"), linear-gradient(var(--ui-75), var(--ui-75)); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 0 0 7h28z' fill='currentcolor'/%3E%3C/svg%3E"), linear-gradient(var(--ui-75), var(--ui-75)); mask-size: var(--px-28) var(--px-7), 100% calc(100% - var(--px-7)); -webkit-mask-size: var(--px-28) var(--px-7), 100% calc(100% - var(--px-7)); /* mask-position: var(--size-sm) 0, 0 var(--px-7); -webkit-mask-position: var(--size-sm) 0, 0 var(--px-7); */ mask-position: var(--arrow-position, var(--size-sm)) 0, 0 var(--px-7); -webkit-mask-position: var(--arrow-position, var(--size-sm)) 0, 0 var(--px-7); } [data-tooltip]:is(:hover, :focus)::after { opacity: 1; translate: 0; transition-duration: 1000ms; } /* --------------------------------- MARK: DIVIDER ---------------------------------- */ hr { border: none; border-top: var(--s-hair) solid var(--color-accent); width: 100%; } /* --------------------------------- MARK: BACK & SKIP ---------------------------------- */ .top { left: 0; position: absolute; top: 0; } .back_to_top-wrapper { position: relative; } .back_to_top { position: absolute; right: var(--gutter-outer); top: 100%; translate: 0 -100%; } /* .js-reframe::before { align-items: center; background-color: var(--color-bg); border-radius: var(--size-sm); color: var(--color-fg); content: "To enable embedded videos, please accept the consent of privacy and cookies policy"; display: flex; font-size: var(--f-sm); height: 100%; justify-content: center; left: 0; letter-spacing: var(--ls-1); line-height: var(--lh-xl); mix-blend-mode: difference; padding: var(--gutter); position: absolute; text-align: center; text-wrap: balance; top: 0; width: 100%; } */ /* .scroll-anchor { scroll-margin-top: var(--header-height); } */ .back-to-top { bottom: 0; margin-left: auto; margin-right: auto; opacity: 0; pointer-events: none; position: sticky; transform: translateY(100px); transition: all 500ms var(--ease-out-quint), visibility 0ms 500ms; visibility: hidden; z-index: 100; } .back-to-top.show { opacity: 1; transform: translateY(0); transition: all 1000ms var(--ease-in-quart), visibility 0ms; visibility: visible; } .back-to-top__button { border-radius: var(--size-2xs); pointer-events: all; } /* --------------------------------- MARK: LINKS ---------------------------------- */ .link-wrapper, .link-ul a { position: relative; } /* a.link, .link a { cursor: crosshair; } */ a.link::before, .link a::before { content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } a.link-ul::after, .link-ul a::after { background: var(--color-gradient); bottom: calc(var(--s-thin) * -1); content: ""; height: var(--s-thin); left: 0; position: absolute; transform: scaleX(0); transform-origin: left; /* variant. change to 'center' to start the animation from the center */ transform-origin: right; transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1); width: 100%; z-index: -1; } /* variant. comment to let the animation start from the center */ .hasHover a.link-ul:hover::after, .hasHover .link-ul a:hover::after { transform: scaleX(1); transform-origin: left; transition-timing-function: cubic-bezier(0.2, 1, 0.82, 0.94); } /* --------------------------------- MARK: SHARE BTN ---------------------------------- */ /* .share__btn::after { background-color: currentcolor; content: ""; display: block; height: var(--size-md); transition: all cubic-bezier(0.47, 0, 0.745, 0.715) 200ms; width: var(--size-md); } .hasHover .share__btn:hover::after { color: var(--cyan); } .share__btn.mail::after { mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 4.5H3A1.5 1.5 0 0 0 1.5 6v12A1.5 1.5 0 0 0 3 19.5h18a1.5 1.5 0 0 0 1.5-1.5V6A1.5 1.5 0 0 0 21 4.5zM19.35 6L12 11.085 4.65 6h14.7zM3 18V6.683l8.572 5.932a.75.75 0 0 0 .856 0L21 6.682V18H3z' fill='currentcolor'/%3E%3C/svg%3E") center / contain no-repeat; } .share__btn.facebook::after { mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M16 8a8 8 0 1 0-9.25 7.903v-5.59H4.719V8H6.75V6.237c0-2.005 1.194-3.112 3.022-3.112.875 0 1.79.156 1.79.156V5.25h-1.008c-.994 0-1.304.617-1.304 1.25V8h2.219l-.355 2.313H9.25v5.59A8.002 8.002 0 0 0 16 8z' fill='currentcolor' /%3E %3C/svg%3E") center / contain no-repeat; } .share__btn.twitter::after { mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M5.033 14.5c6.037 0 9.34-5.002 9.34-9.339 0-.14-.004-.284-.01-.425A6.667 6.667 0 0 0 16 3.036a6.472 6.472 0 0 1-1.884.516 3.3 3.3 0 0 0 1.443-1.815 6.599 6.599 0 0 1-2.083.797A3.287 3.287 0 0 0 7.88 5.527 9.323 9.323 0 0 1 1.115 2.1a3.286 3.286 0 0 0 1.016 4.38 3.287 3.287 0 0 1-1.487-.41v.041A3.281 3.281 0 0 0 3.278 9.33c-.483.132-.99.151-1.481.056a3.29 3.29 0 0 0 3.065 2.282A6.583 6.583 0 0 1 0 13.026 9.312 9.312 0 0 0 5.033 14.5z' fill='currentcolor' /%3E %3C/svg%3E") center / contain no-repeat; } .share__btn.linkedin::after { mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M14.816 0H1.18C.528 0 0 .516 0 1.153v13.69A1.17 1.17 0 0 0 1.181 16h13.635c.653 0 1.184-.519 1.184-1.153V1.153C16 .516 15.469 0 14.816 0zM4.746 13.634H2.373V5.997h2.375v7.637zM3.56 4.956a1.376 1.376 0 1 1-.004-2.751 1.376 1.376 0 0 1 .004 2.751zm10.075 8.678h-2.372V9.922c0-.885-.015-2.025-1.234-2.025-1.234 0-1.422.966-1.422 1.962v3.775H6.237V5.997h2.275V7.04h.032c.315-.6 1.09-1.235 2.243-1.235 2.404 0 2.847 1.582 2.847 3.638v4.19z' fill='currentcolor' /%3E %3C/svg%3E") center / contain no-repeat; } */ /* --------------------------------- MARK: ASPECT RATIO BOXES ---------------------------------- */ [class*="arb--"] { width: 100%; } :where([class*="arb--"]) :is(picture, svg, video, img) { display: block; object-fit: cover; width: 100%; } :where([class*="arb--"])[class*="--contain"] :is(picture, svg, video, img) { object-fit: contain; } :where([class*="arb--"][class*="--9-21"]) :is(picture, svg, video, img) { aspect-ratio: 9 / 21; } :where([class*="arb--"][class*="--21-9"]) :is(picture, svg, video, img) { aspect-ratio: 21 / 9; } :where([class*="arb--"][class*="--9-16"]) :is(picture, svg, video, img) { aspect-ratio: 9 / 16; } :where([class*="arb--"][class*="--16-9"]) :is(picture, svg, video, img) { aspect-ratio: 16 / 9; } :where([class*="arb--"][class*="--10-16"]) :is(picture, svg, video, img) { aspect-ratio: 10 / 16; } :where([class*="arb--"][class*="--16-10"]) :is(picture, svg, video, img) { aspect-ratio: 16 / 10; } :where([class*="arb--"][class*="--4-5"]) :is(picture, svg, video, img) { aspect-ratio: 4 / 5; } :where([class*="arb--"][class*="--5-4"]) :is(picture, svg, video, img) { aspect-ratio: 5 / 4; } :where([class*="arb--"][class*="--3-4"]) :is(picture, svg, video, img) { aspect-ratio: 3 / 4; } :where([class*="arb--"][class*="--4-3"]) :is(picture, svg, video, img) { aspect-ratio: 4 / 3; } :where([class*="arb--"][class*="--2-3"]) :is(picture, svg, video, img) { aspect-ratio: 2 / 3; } :where([class*="arb--"][class*="--3-2"]) :is(picture, svg, video, img) { aspect-ratio: 3 / 2; } :where([class*="arb--"][class*="--1-2"]) :is(picture, svg, video, img) { aspect-ratio: 1 / 2; } :where([class*="arb--"][class*="--2-1"]) :is(picture, svg, video, img) { aspect-ratio: 2 / 1; } :where([class*="arb--"][class*="--4-1"]) :is(picture, svg, video, img) { aspect-ratio: 4 / 1; } :where([class*="arb--"][class*="--8-1"]) :is(picture, svg, video, img) { aspect-ratio: 8 / 1; } :where([class*="arb--"][class*="--1-1"]) :is(picture, svg, video, img) { aspect-ratio: 1 / 1; } @supports not (aspect-ratio: 1 / 1) { [class*="arb--"] { position: relative; width: 100%; } [class*="arb--"]::before { content: ""; display: block; height: 0; overflow: hidden; position: relative; } [class*="arb--"][class*="--9-21"]::before { padding-top: calc(21 / 9 * 100%); } [class*="arb--"][class*="--21-9"]::before { padding-top: calc(9 / 21 * 100%); } [class*="arb--"][class*="--9-16"]::before { padding-top: calc(16 / 9 * 100%); } [class*="arb--"][class*="--16-9"]::before { padding-top: calc(9 / 16 * 100%); } [class*="arb--"][class*="--10-16"]::before { padding-top: calc(16 / 10 * 100%); } [class*="arb--"][class*="--16-10"]::before { padding-top: calc(10 / 16 * 100%); } [class*="arb--"][class*="--4-5"]::before { padding-top: calc(5 / 4 * 100%); } [class*="arb--"][class*="--5-4"]::before { padding-top: calc(4 / 5 * 100%); } [class*="arb--"][class*="--3-4"]::before { padding-top: calc(4 / 3 * 100%); } [class*="arb--"][class*="--4-3"]::before { padding-top: calc(3 / 4 * 100%); } [class*="arb--"][class*="--2-3"]::before { padding-top: calc(3 / 2 * 100%); } [class*="arb--"][class*="--3-2"]::before { padding-top: calc(2 / 3 * 100%); } [class*="arb--"][class*="--1-2"]::before { padding-top: calc(2 / 1 * 100%); } [class*="arb--"][class*="--2-1"]::before { padding-top: calc(1 / 2 * 100%); } [class*="arb--"][class*="--4-1"]::before { padding-top: calc(1 / 4 * 100%); } [class*="arb--"][class*="--8-1"]::before { padding-top: calc(1 / 8 * 100%); } [class*="arb--"][class*="--1-1"]::before { padding-top: 100%; } [class*="arb--"] :is(picture, svg, video, img) { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; } [class*="arb--"][class*="--contain"] :is(picture, svg, video, img) { object-fit: contain; } } /* --------------------------------- MARK: ACCORDION GLOBALS ---------------------------------- */ /* .accordion-toggle.selected {} */ .accordion-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 700ms var(--ease-out-quad), opacity 300ms var(--ease-out-quad), visibility 0ms 300ms; visibility: hidden; will-change: opacity, max-height; } .accordion-content.active { opacity: 1; transition: max-height 1000ms var(--ease-out-quad), opacity 1500ms var(--ease-out-quad), visibility 0ms; visibility: visible; } /* --------------------------------- MARK: BACKDROP & OVERLAY ---------------------------------- */ .bg-wrapper { position: relative; z-index: 0; } .bg { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; } .bg :is(picture, svg, video, img) { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; } .bg .overlay { --color-opacity: 0.3; background-color: var(--backdrop-lightbox); mix-blend-mode: luminosity; z-index: 1; } .bg.light .image { opacity: 0.2; } .bg.light .overlay { --color-opacity: 1; background-color: var(--grey-mid); mix-blend-mode: color; } /* .overlay { background-color: var(--black); cursor: pointer; height: 100%; left: 0; mix-blend-mode: multiply; opacity: 0; position: fixed; top: 0; transition: opacity 150ms ease-out, visibility 0ms 150ms; visibility: hidden; width: 100%; z-index: 1; } */ /* .overlay.enabled { opacity: 0.8; transition: opacity 300ms ease-in, visibility 0ms; visibility: visible; } */ /** * * MARK: INFINITE SCROLL GLOBALS * */ .grid-group { display: block; width: 100%; } .grid-group .grid-item { opacity: 0; } .grid-group .grid-item.visible { opacity: 1; transition: var(--t-cards); } .infinite-scroll-error, .infinite-scroll-last, .infinite-scroll-request { display: none; } .status { min-height: var(--size-xl); } .load-more.visible { display: inline-flex; } .load-more[disabled] { display: none; } .infinite-scroll-request { white-space: nowrap; } .infinite-scroll-request::after { content: ""; animation: ellipsis-smooth 2000ms infinite; } @keyframes ellipsis-smooth { 0%, 25% { content: ""; } /* 25% duration */ 25%, 50% { content: "."; } /* 25% duration */ 50%, 75% { content: ".."; } /* 25% duration */ 75%, 100% { content: "..."; } /* 25% duration */ } /** * In/Out Page Fader * @source: https://christopheraue.net/design/fading-pages-on-load-and-unload * @author Christopher Aue * @author Pyetro * @version 1.1 */ .fader { align-items: center; animation-duration: 1000ms; animation-timing-function: var(--ease-out-quad); background: var(--color-accent); display: flex; flex-direction: column; gap: var(--size-lg); height: 100%; justify-content: center; left: 0; opacity: 1; position: fixed; text-align: center; top: 0; width: 100%; z-index: 999999; } .fader noscript { mix-blend-mode: difference; } .fader.fade-out { animation-name: fade-out; opacity: 0; pointer-events: none; } .fader.fade-in { animation-name: fade-in; opacity: 1; pointer-events: all; } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* --------------------------------- MARK: LAYOUT ---------------------------------- */ :where([class*="full--"])[class*="--w"] { width: 100%; } :where([class*="full--"])[class*="--h"] { /* min-height: calc(100 * var(--vh)); */ min-height: 100svh; } :where(.main-container > section)[class*="full--"][class*="--h"]:first-of-type { min-height: calc(100svh - var(--header-height)); } body.admin-bar [class*="full--"][class*="--h"] { min-height: calc(100svh - 32px); } body.admin-bar :where( .main-container > section )[class*="full--"][class*="--h"]:first-of-type { min-height: calc(100svh - var(--header-height) - 32px); } [class*="wrapper--"] { margin: 0 auto; position: relative; width: 100%; z-index: 0; } [class*="container--"] { margin: 0 auto; max-width: var(--max-width); width: 100%; } :where([class*="wrapper--"], [class*="container--"])[class*="--w-auto"] { width: auto; } :where([class*="wrapper--"], [class*="container--"])[class*="--flex"] { display: flex; } :where( [class*="container--"], [class*="wrapper--"] )[class*="--flex"][class*="--wrap"] { flex-wrap: wrap; } :where([class*="container--"], [class*="wrapper--"])[class*="--bg-back"] { background-color: var(--color-bg); color: var(--color-fg); } :where([class*="container--"], [class*="wrapper--"])[class*="--bg-fore"] { background-color: var(--color-fg); color: var(--color-bg); } :where([class*="container--"], [class*="wrapper--"])[class*="--bg-accent"] { background-color: var(--color-accent); color: var(--color-fg); } :where([class*="container--"], [class*="wrapper--"])[class*="--bg-ui-25"] { background-color: var(--ui-25); color: var(--color-fg); } :where([class*="container--"], [class*="wrapper--"])[class*="--bg-ui-50"] { background-color: var(--ui-50); color: var(--color-bg); } :where([class*="container--"], [class*="wrapper--"])[class*="--of"] { overflow: hidden; } :where([class*="wrapper--"], [class*="container--"])[class*="--ac-start"] { align-content: start; align-content: flex-start; } :where([class*="wrapper--"], [class*="container--"])[class*="--ac-end"] { align-content: end; align-content: flex-end; } :where([class*="wrapper--"], [class*="container--"])[class*="--ac-center"] { align-content: center; } :where([class*="wrapper--"], [class*="container--"])[class*="--jc-start"] { justify-content: start; justify-content: flex-start; } :where([class*="wrapper--"], [class*="container--"])[class*="--jc-end"] { justify-content: end; justify-content: flex-end; } :where([class*="wrapper--"], [class*="container--"])[class*="--jc-between"] { justify-content: space-between; } :where([class*="wrapper--"], [class*="container--"])[class*="--jc-center"] { justify-content: center; } :where([class*="wrapper--"], [class*="container--"])[class*="--ai-start"] { align-items: start; align-items: flex-start; } :where([class*="wrapper--"], [class*="container--"])[class*="--ai-end"] { align-items: end; align-items: flex-end; } :where([class*="wrapper--"], [class*="container--"])[class*="--ai-center"] { align-items: center; } :where([class*="wrapper--"], [class*="container--"])[class*="--ai-baseline"] { align-items: first baseline; } :where([class*="wrapper--"], [class*="container--"])[class*="--ji-start"] { justify-items: start; justify-items: flex-start; } :where([class*="wrapper--"], [class*="container--"])[class*="--ji-end"] { justify-items: end; justify-items: flex-end; } :where([class*="wrapper--"], [class*="container--"])[class*="--ji-center"] { justify-items: center; } :where([class*="wrapper--"], [class*="container--"])[class*="--outer"] { padding: 0 var(--gutter-outer); } :where([class*="wrapper--"], [class*="container--"])[class*="--p-0"] { padding: 0; } :where([class*="wrapper--"], [class*="container--"])[class*="--p-3xs"] { padding: var(--size-3xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--p-2xs"] { padding: var(--size-2xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--p-xs"] { padding: var(--size-xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--p-sm"] { padding: var(--size-sm); } :where([class*="wrapper--"], [class*="container--"])[class*="--p-md"] { padding: var(--size-md); } :where([class*="wrapper--"], [class*="container--"])[class*="--p-lg"] { padding: var(--size-lg); } :where([class*="wrapper--"], [class*="container--"])[class*="--p-xl"] { padding: var(--size-xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--p-2xl"] { padding: var(--size-2xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--p-3xl"] { padding: var(--size-3xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--px-0"] { padding-left: 0; padding-right: 0; } :where([class*="wrapper--"], [class*="container--"])[class*="--px-3xs"] { padding-left: var(--size-3xs); padding-right: var(--size-3xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--px-2xs"] { padding-left: var(--size-2xs); padding-right: var(--size-2xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--px-xs"] { padding-left: var(--size-xs); padding-right: var(--size-xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--px-sm"] { padding-left: var(--size-sm); padding-right: var(--size-sm); } :where([class*="wrapper--"], [class*="container--"])[class*="--px-md"] { padding-left: var(--size-md); padding-right: var(--size-md); } :where([class*="wrapper--"], [class*="container--"])[class*="--px-lg"] { padding-left: var(--size-lg); padding-right: var(--size-lg); } :where([class*="wrapper--"], [class*="container--"])[class*="--px-xl"] { padding-left: var(--size-xl); padding-right: var(--size-xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--px-2xl"] { padding-left: var(--size-2xl); padding-right: var(--size-2xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--px-3xl"] { padding-left: var(--size-3xl); padding-right: var(--size-3xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--py-0"] { padding-bottom: 0; padding-top: 0; } :where([class*="wrapper--"], [class*="container--"])[class*="--py-3xs"] { padding-bottom: var(--size-3xs); padding-top: var(--size-3xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--py-2xs"] { padding-bottom: var(--size-2xs); padding-top: var(--size-2xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--py-xs"] { padding-bottom: var(--size-xs); padding-top: var(--size-xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--py-sm"] { padding-bottom: var(--size-sm); padding-top: var(--size-sm); } :where([class*="wrapper--"], [class*="container--"])[class*="--py-md"] { padding-bottom: var(--size-md); padding-top: var(--size-md); } :where([class*="wrapper--"], [class*="container--"])[class*="--py-lg"] { padding-bottom: var(--size-lg); padding-top: var(--size-lg); } :where([class*="wrapper--"], [class*="container--"])[class*="--py-xl"] { padding-bottom: var(--size-xl); padding-top: var(--size-xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--py-2xl"] { padding-bottom: var(--size-2xl); padding-top: var(--size-2xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--py-3xl"] { padding-bottom: var(--size-3xl); padding-top: var(--size-3xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--pt-3xs"] { padding-top: var(--size-3xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--pt-2xs"] { padding-top: var(--size-2xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--pt-xs"] { padding-top: var(--size-xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--pt-sm"] { padding-top: var(--size-sm); } :where([class*="wrapper--"], [class*="container--"])[class*="--pt-md"] { padding-top: var(--size-md); } :where([class*="wrapper--"], [class*="container--"])[class*="--pt-lg"] { padding-top: var(--size-lg); } :where([class*="wrapper--"], [class*="container--"])[class*="--pt-xl"] { padding-top: var(--size-xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--pt-2xl"] { padding-top: var(--size-2xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--pt-3xl"] { padding-top: var(--size-3xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--pr-3xs"] { padding-right: var(--size-3xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--pr-2xs"] { padding-right: var(--size-2xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--pr-xs"] { padding-right: var(--size-xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--pr-sm"] { padding-right: var(--size-sm); } :where([class*="wrapper--"], [class*="container--"])[class*="--pr-md"] { padding-right: var(--size-md); } :where([class*="wrapper--"], [class*="container--"])[class*="--pr-lg"] { padding-right: var(--size-lg); } :where([class*="wrapper--"], [class*="container--"])[class*="--pr-xl"] { padding-right: var(--size-xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--pr-2xl"] { padding-right: var(--size-2xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--pr-3xl"] { padding-right: var(--size-3xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--pb-3xs"] { padding-bottom: var(--size-3xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--pb-2xs"] { padding-bottom: var(--size-2xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--pb-xs"] { padding-bottom: var(--size-xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--pb-sm"] { padding-bottom: var(--size-sm); } :where([class*="wrapper--"], [class*="container--"])[class*="--pb-md"] { padding-bottom: var(--size-md); } :where([class*="wrapper--"], [class*="container--"])[class*="--pb-lg"] { padding-bottom: var(--size-lg); } :where([class*="wrapper--"], [class*="container--"])[class*="--pb-xl"] { padding-bottom: var(--size-xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--pb-2xl"] { padding-bottom: var(--size-2xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--pb-3xl"] { padding-bottom: var(--size-3xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--pl-3xs"] { padding-left: var(--size-3xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--pl-2xs"] { padding-left: var(--size-2xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--pl-xs"] { padding-left: var(--size-xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--pl-sm"] { padding-left: var(--size-sm); } :where([class*="wrapper--"], [class*="container--"])[class*="--pl-md"] { padding-left: var(--size-md); } :where([class*="wrapper--"], [class*="container--"])[class*="--pl-lg"] { padding-left: var(--size-lg); } :where([class*="wrapper--"], [class*="container--"])[class*="--pl-xl"] { padding-left: var(--size-xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--pl-2xl"] { padding-left: var(--size-2xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--pl-3xl"] { padding-left: var(--size-3xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--m-0"] { margin: 0; } :where([class*="wrapper--"], [class*="container--"])[class*="--my-0"] { margin-block: 0; } :where([class*="wrapper--"], [class*="container--"])[class*="--mx-0"] { margin-inline: 0; } :where([class*="wrapper--"], [class*="container--"])[class*="--my-auto"] { margin-block: auto; } :where([class*="wrapper--"], [class*="container--"])[class*="--mx-auto"] { margin-inline: auto; } :where([class*="wrapper--"], [class*="container--"])[class*="--m-3xs"] { margin: var(--size-3xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--m-2xs"] { margin: var(--size-2xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--m-xs"] { margin: var(--size-xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--m-sm"] { margin: var(--size-sm); } :where([class*="wrapper--"], [class*="container--"])[class*="--m-md"] { margin: var(--size-md); } :where([class*="wrapper--"], [class*="container--"])[class*="--m-lg"] { margin: var(--size-lg); } :where([class*="wrapper--"], [class*="container--"])[class*="--m-xl"] { margin: var(--size-xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--m-2xl"] { margin: var(--size-2xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--m-3xl"] { margin: var(--size-3xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--mx-0"] { margin-left: 0; margin-right: 0; } :where([class*="wrapper--"], [class*="container--"])[class*="--mx-3xs"] { margin-left: var(--size-3xs); margin-right: var(--size-3xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--mx-2xs"] { margin-left: var(--size-2xs); margin-right: var(--size-2xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--mx-xs"] { margin-left: var(--size-xs); margin-right: var(--size-xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--mx-sm"] { margin-left: var(--size-sm); margin-right: var(--size-sm); } :where([class*="wrapper--"], [class*="container--"])[class*="--mx-md"] { margin-left: var(--size-md); margin-right: var(--size-md); } :where([class*="wrapper--"], [class*="container--"])[class*="--mx-lg"] { margin-left: var(--size-lg); margin-right: var(--size-lg); } :where([class*="wrapper--"], [class*="container--"])[class*="--mx-xl"] { margin-left: var(--size-xl); margin-right: var(--size-xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--mx-2xl"] { margin-left: var(--size-2xl); margin-right: var(--size-2xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--mx-3xl"] { margin-left: var(--size-3xl); margin-right: var(--size-3xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--my-0"] { margin-bottom: 0; margin-top: 0; } :where([class*="wrapper--"], [class*="container--"])[class*="--my-3xs"] { margin-bottom: var(--size-3xs); margin-top: var(--size-3xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--my-2xs"] { margin-bottom: var(--size-2xs); margin-top: var(--size-2xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--my-xs"] { margin-bottom: var(--size-xs); margin-top: var(--size-xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--my-sm"] { margin-bottom: var(--size-sm); margin-top: var(--size-sm); } :where([class*="wrapper--"], [class*="container--"])[class*="--my-md"] { margin-bottom: var(--size-md); margin-top: var(--size-md); } :where([class*="wrapper--"], [class*="container--"])[class*="--my-lg"] { margin-bottom: var(--size-lg); margin-top: var(--size-lg); } :where([class*="wrapper--"], [class*="container--"])[class*="--my-xl"] { margin-bottom: var(--size-xl); margin-top: var(--size-xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--my-2xl"] { margin-bottom: var(--size-2xl); margin-top: var(--size-2xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--my-3xl"] { margin-bottom: var(--size-3xl); margin-top: var(--size-3xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--mt-3xs"] { margin-top: var(--size-3xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--mt-2xs"] { margin-top: var(--size-2xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--mt-xs"] { margin-top: var(--size-xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--mt-sm"] { margin-top: var(--size-sm); } :where([class*="wrapper--"], [class*="container--"])[class*="--mt-md"] { margin-top: var(--size-md); } :where([class*="wrapper--"], [class*="container--"])[class*="--mt-lg"] { margin-top: var(--size-lg); } :where([class*="wrapper--"], [class*="container--"])[class*="--mt-xl"] { margin-top: var(--size-xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--mt-2xl"] { margin-top: var(--size-2xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--mt-3xl"] { margin-top: var(--size-3xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--mb-3xs"] { margin-bottom: var(--size-3xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--mb-2xs"] { margin-bottom: var(--size-2xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--mb-xs"] { margin-bottom: var(--size-xs); } :where([class*="wrapper--"], [class*="container--"])[class*="--mb-sm"] { margin-bottom: var(--size-sm); } :where([class*="wrapper--"], [class*="container--"])[class*="--mb-md"] { margin-bottom: var(--size-md); } :where([class*="wrapper--"], [class*="container--"])[class*="--mb-lg"] { margin-bottom: var(--size-lg); } :where([class*="wrapper--"], [class*="container--"])[class*="--mb-xl"] { margin-bottom: var(--size-xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--mb-2xl"] { margin-bottom: var(--size-2xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--mb-3xl"] { margin-bottom: var(--size-3xl); } :where([class*="wrapper--"], [class*="container--"])[class*="--anchor"]:target { scroll-margin-top: var(--scroll-margin-top); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--gutter"] { gap: var(--gutter); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--gutter"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--gutter"][class*="--row"] > * + * { margin-left: var(--gutter); margin-top: unset; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--gutter"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--gutter); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-0"] { gap: 0; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-0"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-0"][class*="--row"] > * + * { margin-left: 0; margin-top: unset; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-3xs"] { gap: var(--size-3xs); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-3xs"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-3xs"][class*="--row"] > * + * { margin-left: var(--size-3xs); margin-top: unset; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-3xs"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-3xs); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-2xs"] { gap: var(--size-2xs); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-2xs"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-2xs"][class*="--row"] > * + * { margin-left: var(--size-2xs); margin-top: unset; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-2xs"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-2xs); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-xs"] { gap: var(--size-xs); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-xs"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-xs"][class*="--row"] > * + * { margin-left: var(--size-xs); margin-top: unset; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-xs"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-xs); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-sm"] { gap: var(--size-sm); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-sm"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-sm"][class*="--row"] > * + * { margin-left: var(--size-sm); margin-top: unset; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-sm"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-sm); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-md"] { gap: var(--size-md); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-md"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-md"][class*="--row"] > * + * { margin-left: var(--size-md); margin-top: unset; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-md"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-md); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-lg"] { gap: var(--size-lg); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-lg"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-lg"][class*="--row"] > * + * { margin-left: var(--size-lg); margin-top: unset; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-lg"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-lg); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-xl"] { gap: var(--size-xl); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-xl"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-xl"][class*="--row"] > * + * { margin-left: var(--size-xl); margin-top: unset; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-xl"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-xl); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-2xl"] { gap: var(--size-2xl); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-2xl"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-2xl"][class*="--row"] > * + * { margin-left: var(--size-2xl); margin-top: unset; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-2xl"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-2xl); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-3xl"] { gap: var(--size-3xl); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-3xl"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-3xl"][class*="--row"] > * + * { margin-left: var(--size-3xl); margin-top: unset; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--g-3xl"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-3xl); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-0"] { row-gap: 0; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-0"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-0"][class*="--row"] > * + * { margin-left: 0; margin-top: unset; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-3xs"] { row-gap: var(--size-3xs); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-3xs"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-3xs"][class*="--row"] > * + * { margin-left: var(--size-3xs); margin-top: unset; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-2xs"] { row-gap: var(--size-2xs); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-2xs"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-2xs"][class*="--row"] > * + * { margin-left: var(--size-2xs); margin-top: unset; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-xs"] { row-gap: var(--size-xs); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-xs"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-xs"][class*="--row"] > * + * { margin-left: var(--size-xs); margin-top: unset; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-sm"] { row-gap: var(--size-sm); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-sm"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-sm"][class*="--row"] > * + * { margin-left: var(--size-sm); margin-top: unset; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-md"] { row-gap: var(--size-md); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-md"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-md"][class*="--row"] > * + * { margin-left: var(--size-md); margin-top: unset; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-lg"] { row-gap: var(--size-lg); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-lg"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-lg"][class*="--row"] > * + * { margin-left: var(--size-lg); margin-top: unset; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-xl"] { row-gap: var(--size-xl); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-xl"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-xl"][class*="--row"] > * + * { margin-left: var(--size-xl); margin-top: unset; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-2xl"] { row-gap: var(--size-2xl); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-2xl"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-2xl"][class*="--row"] > * + * { margin-left: var(--size-2xl); margin-top: unset; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-3xl"] { row-gap: var(--size-3xl); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-3xl"] > * + *, .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--rg-3xl"][class*="--row"] > * + * { margin-left: var(--size-3xl); margin-top: unset; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-0"] { column-gap: 0; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-0"][class*="--col"] > * + * { margin-left: unset; margin-top: 0; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-0"] { column-gap: 0; } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-3xs"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-3xs); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-2xs"] { column-gap: var(--size-2xs); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-2xs"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-2xs); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-xs"] { column-gap: var(--size-xs); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-xs"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-xs); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-sm"] { column-gap: var(--size-sm); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-sm"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-sm); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-md"] { column-gap: var(--size-md); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-md"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-md); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-lg"] { column-gap: var(--size-lg); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-lg"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-lg); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-xl"] { column-gap: var(--size-xl); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-xl"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-xl); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-2xl"] { column-gap: var(--size-2xl); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-2xl"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-2xl); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-3xl"] { column-gap: var(--size-3xl); } .no-flexbox-gap :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--cg-3xl"][class*="--col"] > * + * { margin-left: unset; margin-top: var(--size-3xl); } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--col"] { flex-direction: column; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--col-reverse"] { flex-direction: column-reverse; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--row"] { flex-direction: row; } :where( [class*="wrapper--"][class*="--flex"], [class*="container--"][class*="--flex"] )[class*="--row-reverse"] { flex-direction: row-reverse; } :where([class*="wrapper--"], [class*="container--"])[class*="--grid"] { display: grid; } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--dense"] { grid-auto-flow: dense; } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--gutter"] { column-gap: var(--gutter); gap: var(--gutter) var(--gutter); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--c-gutter"] { column-gap: var(--gutter); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--r-gutter"] { row-gap: var(--gutter); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--g-3xs"] { column-gap: var(--size-3xs); gap: var(--size-3xs) var(--size-3xs); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--g-2xs"] { column-gap: var(--size-2xs); gap: var(--size-2xs) var(--size-2xs); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--g-xs"] { column-gap: var(--size-xs); gap: var(--size-xs) var(--size-xs); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--g-sm"] { column-gap: var(--size-sm); gap: var(--size-sm) var(--size-sm); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--g-md"] { column-gap: var(--size-md); gap: var(--size-md) var(--size-md); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--g-lg"] { column-gap: var(--size-lg); gap: var(--size-lg) var(--size-lg); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--g-xl"] { column-gap: var(--size-xl); gap: var(--size-xl) var(--size-xl); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--g-2xl"] { column-gap: var(--size-2xl); gap: var(--size-2xl) var(--size-2xl); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--g-3xl"] { column-gap: var(--size-3xl); gap: var(--size-3xl) var(--size-3xl); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--c-3xs"] { column-gap: var(--size-3xs); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--c-2xs"] { column-gap: var(--size-2xs); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--c-xs"] { column-gap: var(--size-xs); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--c-sm"] { column-gap: var(--size-sm); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--c-md"] { column-gap: var(--size-md); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--c-lg"] { column-gap: var(--size-lg); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--c-xl"] { column-gap: var(--size-xl); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--c-2xl"] { column-gap: var(--size-2xl); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--c-3xl"] { column-gap: var(--size-3xl); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--r-3xs"] { row-gap: var(--size-3xs); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--r-2xs"] { row-gap: var(--size-2xs); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--r-xs"] { row-gap: var(--size-xs); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--r-sm"] { row-gap: var(--size-sm); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--r-md"] { row-gap: var(--size-md); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--r-lg"] { row-gap: var(--size-lg); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--r-xl"] { row-gap: var(--size-xl); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--r-2xl"] { row-gap: var(--size-2xl); } :where( [class*="wrapper--"][class*="--grid"], [class*="container--"][class*="--grid"] )[class*="--r-3xl"] { row-gap: var(--size-3xl); } :where( :is([class*="wrapper--"], [class*="container--"])[class*="--grid"] > [class*="content--"] )[class*="--full"] { grid-column: 1 / -1; } :where( :is([class*="wrapper--"], [class*="container--"])[class*="--flex"] > [class*="content--"] )[class*="--full"] { flex-basis: 100%; width: 100%; } :where( :is([class*="wrapper--"], [class*="container--"])[class*="--flex"] > [class*="content--"] )[class*="--half"] { flex-basis: 50%; width: 50%; } /** * * MARK: ANIMATIONS * */ .tba-top { opacity: 0; transition: all 500ms var(--ease-out-cubic); translate: 0 calc(-1 * var(--size-xl)); will-change: translate, opacity; } .tba-top.animated { opacity: 1; transition: translate 1000ms var(--ease-out-quad) 50ms, opacity 1000ms var(--ease-out-quad) 50ms; translate: 0 0; } .tba-bottom { opacity: 0; transition: all 500ms var(--ease-out-cubic); translate: 0 var(--size-xl); will-change: translate, opacity; } .tba-bottom.animated { opacity: 1; transition: translate 1000ms var(--ease-out-quad) 50ms, opacity 1000ms var(--ease-out-quad) 50ms; translate: 0 0; } .tba-opacity { opacity: 0; transition: opacity 500ms var(--ease-out-cubic); will-change: opacity; } .tba-opacity.animated { opacity: 1; transition: opacity 1000ms var(--ease-out-quad) 50ms; } .tba-shift-blur { filter: blur(var(--size-sm)); translate: calc(var(--size-lg) * -1); opacity: 0; transition: opacity 500ms var(--ease-out-cubic), filter 500ms var(--ease-out-cubic), translate 500ms var(--ease-out-cubic); will-change: translate, filter, opacity; } .tba-shift-blur.animated { filter: blur(0); translate: 0; opacity: 1; transition: opacity 1000ms var(--ease-out-quad) 50ms, filter 1000ms var(--ease-out-quad) 50ms, translate 1000ms var(--ease-out-quad) 50ms; } .tba-blur, .link:has(.tba-blur)::after { filter: blur(var(--size-sm)); opacity: 0; transition: opacity 500ms var(--ease-out-cubic), filter 500ms var(--ease-out-cubic); will-change: filter, opacity; } .tba-blur.animated, .link:has(.tba-blur.animated)::after { filter: blur(0); opacity: 1; transition: opacity 1000ms var(--ease-out-quad) 50ms, filter 1000ms var(--ease-out-quad) 50ms; }