/*!************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/normalize.css/normalize.css ***! \************************************************************************************************************************/ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./assets/scss/frontend.scss ***! \*************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Align -------------------------------------------------------------- */ :root { --align-narrow: 800px; --align-default: 1216px; --align-wide: 1440px; --align-full: none; } /* -------------------------------------------------------------- # Colors -------------------------------------------------------------- */ :root { /* stylelint-disable-line no-duplicate-selectors */ --color-white: #fff; --color-black: #231f20; --color-gray-100: #4d4d4d; --color-gray-300: #8c8c8c; --color-gray-500: #bfbfbf; --color-gray-700: #d9d9d9; --color-gray-800: #e9e9e9; --color-gray-900: #f5f5f5; --color-blue-dark: #004249; --color-green: #41a300; --color-green-semi-light: #d0e8bf; --color-green-light: #e3f1d9; --color-blue-light: #d0e8e1; --color-blue-lighter: #e3f1ed; --color-beige: #f0e8c8; --color-beige-light: #faf6e7; --color-purple: #76c; --color-magenta: #c02eaf; --color-primary: var(--color-green); --color-secondary: var(--color-green-light); --color-primary-hover: var(--color-green-light); --color-accent: rgba(0, 0, 0, 0.5); --color-success: var(--color-green); --color-success-light: #eaf8e9; --color-error: #e42a11; --color-error-light: #f8e8e6; --color-warning: #d79b00; --color-warning-light: #fdfbe9; --color-outline: var(--color-primary); --color-border: var(--color-gray-700); } .color-scheme-blue-dark { --color-primary: var(--color-blue-dark); --color-secondary: var(--color-blue-light); --color-primary-hover: var(--color-blue-light); } /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ :root { /* stylelint-disable-line no-duplicate-selectors */ --spacing-xxs: 1rem; --spacing-xs: 1.5rem; --spacing-sm: 2rem; --spacing-md: 2.5rem; --spacing-lg: 3.25rem; --spacing-xl: 5rem; --gutter: 1.5rem; } @media (min-width: 782px) { :root { --spacing-md: 3.75rem; } } @media (min-width: 1080px) { :root { --spacing-md: 3rem; } } @media (min-width: 480px) { :root { --spacing-lg: 3.75rem; } } @media (min-width: 782px) { :root { --spacing-lg: 4.25rem; } } @media (min-width: 1080px) { :root { --spacing-lg: 4.75rem; } } @media (min-width: 1280px) { :root { --spacing-lg: 5rem; } } @media (min-width: 480px) { :root { --spacing-xl: 5.5rem; } } @media (min-width: 782px) { :root { --spacing-xl: 6.25rem; } } @media (min-width: 1080px) { :root { --spacing-xl: 7.75rem; } } @media (min-width: 1280px) { :root { --spacing-xl: 9.25rem; } } @media (min-width: 480px) { :root { --gutter: 1.75rem; } } @media (min-width: 782px) { :root { --gutter: 2.5rem; } } @media (min-width: 1280px) { :root { --gutter: 4.25rem; } } /* -------------------------------------------------------------- # Typography -------------------------------------------------------------- */ :root { /* stylelint-disable-line no-duplicate-selectors */ --font-family-sans: "aktiv-grotesk", helvetica, arial, sans-serif; --font-family-sans-header: "aktiv-grotesk-extended", "aktiv-grotesk", helvetica, arial, sans-serif; --font-family-serif: "Georgia", serif; font-size: 16px; --font-size-h1: 2.5rem; --font-size-h2: 2rem; --font-size-h3: 1.5rem; --font-size-h4: 1.25rem; --font-size-h5: 1.125rem; --font-size-h6: 1.125rem; --font-size-2xs: 0.625rem; --font-size-xs: 0.875rem; --font-size-sm: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.375rem; --font-size-xl: 1.5rem; --font-weight-regular: 400; --font-weight-bold: 600; --font-weight-extrabold: 700; --line-height-h1: calc(72 / 64); --line-height-h2: calc(52 / 42); --line-height-h3: calc(42 / 34); --line-height-h4: calc(34 / 26); --line-height-h5: calc(25 / 20); --line-height-sm: 1.25; --line-height-md: 1.5; --line-width-heading-sm: 18ch; --line-width-heading-md: 45ch; --line-width-text-sm: 45ch; --line-width-text-md: 65ch; --underline-offset-sm: 0.125em; --underline-offset-md: 0.375em; } @media (min-width: 480px) { :root { --font-size-h1: 2.75rem; } } @media (min-width: 782px) { :root { --font-size-h1: 3.125rem; } } @media (min-width: 1080px) { :root { --font-size-h1: 3.625rem; } } @media (min-width: 1280px) { :root { --font-size-h1: 4rem; } } @media (min-width: 480px) { :root { --font-size-h2: 2.125rem; } } @media (min-width: 782px) { :root { --font-size-h2: 2.25rem; } } @media (min-width: 1080px) { :root { --font-size-h2: 2.375rem; } } @media (min-width: 1280px) { :root { --font-size-h2: 2.5rem; } } @media (min-width: 480px) { :root { --font-size-h3: 1.625rem; } } @media (min-width: 782px) { :root { --font-size-h3: 1.75rem; } } @media (min-width: 1080px) { :root { --font-size-h3: 1.875rem; } } @media (min-width: 1280px) { :root { --font-size-h3: 2rem; } } @media (min-width: 782px) { :root { --font-size-h4: 1.5rem; } } @media (min-width: 782px) { :root { --font-size-h5: 1.25rem; } } /* -------------------------------------------------------------- # Borders -------------------------------------------------------------- */ :root { /* stylelint-disable-line no-duplicate-selectors */ --border-radius-sm: 4px; --border-radius-lg: 8px; --border-default: 1px solid var(--color-border); } /* -------------------------------------------------------------- # Header -------------------------------------------------------------- */ :root { /* stylelint-disable-line no-duplicate-selectors */ --height-header: 56px; --height-header-secondary: 0px; /* stylelint-disable-line length-zero-no-unit */ --height-admin-bar: 46px; --min-height-input: 46px; } @media (min-width: 782px) { :root { --height-admin-bar: 32px; } } @media (min-width: 1080px) { :root { --height-header: 80px; --height-header-secondary: 42px; } :root .headroom--not-top { --height-header: 80px; } } @media (min-width: 1280px) { :root { --height-header: 112px; --height-header-secondary: 48px; } } /* -------------------------------------------------------------- # Base -------------------------------------------------------------- */ .block-root, .block-editor-block-list__layout.is-root-container { padding-left: var(--gutter); padding-right: var(--gutter); /** * "Collapse" specific blocks. It's recommended to use a utility * class for custom blocks that need this (like ".collapse"), * but for core blocks we can't do that. */ } .block-root > :first-child, .block-editor-block-list__layout.is-root-container > :first-child { margin-top: var(--spacing-lg); } .block-root > :last-child, .block-editor-block-list__layout.is-root-container > :last-child { margin-bottom: var(--spacing-lg); } .block-root > * + *, .block-root .wp-block-group > * + *, .block-editor-block-list__layout.is-root-container > * + *, .block-editor-block-list__layout.is-root-container .wp-block-group > * + * { margin-top: var(--spacing-lg); } .block-root > .wp-block-heading + *, .block-editor-block-list__layout.is-root-container > .wp-block-heading + * { margin-top: var(--spacing-sm); } .block-root .is-style-tight > * + *, .block-editor-block-list__layout.is-root-container .is-style-tight > * + * { margin-top: var(--spacing-sm); } .block-root .is-style-loose.wp-block-group, .block-editor-block-list__layout.is-root-container .is-style-loose.wp-block-group { padding: 2.5rem; } @media (max-width: 781px) { .block-root .is-style-loose.wp-block-group, .block-editor-block-list__layout.is-root-container .is-style-loose.wp-block-group { padding: 1.5rem; } } .block-root .is-style-narrow-content.wp-block-group > *, .block-editor-block-list__layout.is-root-container .is-style-narrow-content.wp-block-group > * { max-width: 850px; } .block-root .wp-block-scb-column > * + *, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > * + * { margin-top: var(--spacing-sm); } .block-root .is-style-block-heading + *, .block-root .wp-block-group > .is-style-block-heading + *, .block-editor-block-list__layout.is-root-container .is-style-block-heading + *, .block-editor-block-list__layout.is-root-container .wp-block-group > .is-style-block-heading + * { margin-top: var(--spacing-sm); } .block-root > .wp-block-group.has-background.alignfull + .wp-block-group.has-background.alignfull, .block-root > .wp-block-group.has-background.alignfull + .wp-block-cover, .block-root > .wp-block-group.has-background.alignfull + .collapse, .block-root > .wp-block-cover + .wp-block-group.has-background.alignfull, .block-root > .wp-block-cover + .wp-block-cover, .block-root > .wp-block-cover + .collapse, .block-root > .collapse + .wp-block-group.has-background.alignfull, .block-root > .collapse + .wp-block-cover, .block-root > .collapse + .collapse, .block-editor-block-list__layout.is-root-container > .wp-block-group.has-background.alignfull + .wp-block-group.has-background.alignfull, .block-editor-block-list__layout.is-root-container > .wp-block-group.has-background.alignfull + .wp-block-cover, .block-editor-block-list__layout.is-root-container > .wp-block-group.has-background.alignfull + .collapse, .block-editor-block-list__layout.is-root-container > .wp-block-cover + .wp-block-group.has-background.alignfull, .block-editor-block-list__layout.is-root-container > .wp-block-cover + .wp-block-cover, .block-editor-block-list__layout.is-root-container > .wp-block-cover + .collapse, .block-editor-block-list__layout.is-root-container > .collapse + .wp-block-group.has-background.alignfull, .block-editor-block-list__layout.is-root-container > .collapse + .wp-block-cover, .block-editor-block-list__layout.is-root-container > .collapse + .collapse { margin-top: 0; } .block-root .yoast-breadcrumbs + *, .block-editor-block-list__layout.is-root-container .yoast-breadcrumbs + * { margin-top: var(--spacing-xs); } .block-root > *, .block-root .wp-block-group > *, .block-editor-block-list__layout.is-root-container > *, .block-editor-block-list__layout.is-root-container .wp-block-group > * { max-width: var(--align-default); margin-left: auto; margin-right: auto; } .block-root .alignwide, .block-root [data-align=wide], .block-editor-block-list__layout.is-root-container .alignwide, .block-editor-block-list__layout.is-root-container [data-align=wide] { max-width: var(--align-wide); margin-left: auto; margin-right: auto; } .block-root .alignfull, .block-root [data-align=full], .block-editor-block-list__layout.is-root-container .alignfull, .block-editor-block-list__layout.is-root-container [data-align=full] { max-width: var(--align-full); margin-left: auto; margin-right: auto; } .block-root--narrow > *, .block-root--narrow .wp-block-group > *, .block-editor-block-list__layout.is-root-container--narrow > *, .block-editor-block-list__layout.is-root-container--narrow .wp-block-group > * { max-width: var(--align-narrow); margin-left: auto; margin-right: auto; } .block-root > h1 + p, .block-root > h1 + ul, .block-root > h1 + ol, .block-root > h2 + p, .block-root > h2 + ul, .block-root > h2 + ol, .block-root > h3 + p, .block-root > h3 + ul, .block-root > h3 + ol, .block-root > h4 + p, .block-root > h4 + ul, .block-root > h4 + ol, .block-root > ul + p, .block-root > ul + ul, .block-root > ul + ol, .block-root > ol + p, .block-root > ol + ul, .block-root > ol + ol, .block-root > p + p, .block-root > p + ul, .block-root > p + ol, .block-root .wp-block-group > h1 + p, .block-root .wp-block-group > h1 + ul, .block-root .wp-block-group > h1 + ol, .block-root .wp-block-group > h2 + p, .block-root .wp-block-group > h2 + ul, .block-root .wp-block-group > h2 + ol, .block-root .wp-block-group > h3 + p, .block-root .wp-block-group > h3 + ul, .block-root .wp-block-group > h3 + ol, .block-root .wp-block-group > h4 + p, .block-root .wp-block-group > h4 + ul, .block-root .wp-block-group > h4 + ol, .block-root .wp-block-group > ul + p, .block-root .wp-block-group > ul + ul, .block-root .wp-block-group > ul + ol, .block-root .wp-block-group > ol + p, .block-root .wp-block-group > ol + ul, .block-root .wp-block-group > ol + ol, .block-root .wp-block-group > p + p, .block-root .wp-block-group > p + ul, .block-root .wp-block-group > p + ol, .block-root .wp-block-scb-column > h1 + p, .block-root .wp-block-scb-column > h1 + ul, .block-root .wp-block-scb-column > h1 + ol, .block-root .wp-block-scb-column > h2 + p, .block-root .wp-block-scb-column > h2 + ul, .block-root .wp-block-scb-column > h2 + ol, .block-root .wp-block-scb-column > h3 + p, .block-root .wp-block-scb-column > h3 + ul, .block-root .wp-block-scb-column > h3 + ol, .block-root .wp-block-scb-column > h4 + p, .block-root .wp-block-scb-column > h4 + ul, .block-root .wp-block-scb-column > h4 + ol, .block-root .wp-block-scb-column > ul + p, .block-root .wp-block-scb-column > ul + ul, .block-root .wp-block-scb-column > ul + ol, .block-root .wp-block-scb-column > ol + p, .block-root .wp-block-scb-column > ol + ul, .block-root .wp-block-scb-column > ol + ol, .block-root .wp-block-scb-column > p + p, .block-root .wp-block-scb-column > p + ul, .block-root .wp-block-scb-column > p + ol, .block-editor-block-list__layout.is-root-container > h1 + p, .block-editor-block-list__layout.is-root-container > h1 + ul, .block-editor-block-list__layout.is-root-container > h1 + ol, .block-editor-block-list__layout.is-root-container > h2 + p, .block-editor-block-list__layout.is-root-container > h2 + ul, .block-editor-block-list__layout.is-root-container > h2 + ol, .block-editor-block-list__layout.is-root-container > h3 + p, .block-editor-block-list__layout.is-root-container > h3 + ul, .block-editor-block-list__layout.is-root-container > h3 + ol, .block-editor-block-list__layout.is-root-container > h4 + p, .block-editor-block-list__layout.is-root-container > h4 + ul, .block-editor-block-list__layout.is-root-container > h4 + ol, .block-editor-block-list__layout.is-root-container > ul + p, .block-editor-block-list__layout.is-root-container > ul + ul, .block-editor-block-list__layout.is-root-container > ul + ol, .block-editor-block-list__layout.is-root-container > ol + p, .block-editor-block-list__layout.is-root-container > ol + ul, .block-editor-block-list__layout.is-root-container > ol + ol, .block-editor-block-list__layout.is-root-container > p + p, .block-editor-block-list__layout.is-root-container > p + ul, .block-editor-block-list__layout.is-root-container > p + ol, .block-editor-block-list__layout.is-root-container .wp-block-group > h1 + p, .block-editor-block-list__layout.is-root-container .wp-block-group > h1 + ul, .block-editor-block-list__layout.is-root-container .wp-block-group > h1 + ol, .block-editor-block-list__layout.is-root-container .wp-block-group > h2 + p, .block-editor-block-list__layout.is-root-container .wp-block-group > h2 + ul, .block-editor-block-list__layout.is-root-container .wp-block-group > h2 + ol, .block-editor-block-list__layout.is-root-container .wp-block-group > h3 + p, .block-editor-block-list__layout.is-root-container .wp-block-group > h3 + ul, .block-editor-block-list__layout.is-root-container .wp-block-group > h3 + ol, .block-editor-block-list__layout.is-root-container .wp-block-group > h4 + p, .block-editor-block-list__layout.is-root-container .wp-block-group > h4 + ul, .block-editor-block-list__layout.is-root-container .wp-block-group > h4 + ol, .block-editor-block-list__layout.is-root-container .wp-block-group > ul + p, .block-editor-block-list__layout.is-root-container .wp-block-group > ul + ul, .block-editor-block-list__layout.is-root-container .wp-block-group > ul + ol, .block-editor-block-list__layout.is-root-container .wp-block-group > ol + p, .block-editor-block-list__layout.is-root-container .wp-block-group > ol + ul, .block-editor-block-list__layout.is-root-container .wp-block-group > ol + ol, .block-editor-block-list__layout.is-root-container .wp-block-group > p + p, .block-editor-block-list__layout.is-root-container .wp-block-group > p + ul, .block-editor-block-list__layout.is-root-container .wp-block-group > p + ol, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > h1 + p, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > h1 + ul, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > h1 + ol, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > h2 + p, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > h2 + ul, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > h2 + ol, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > h3 + p, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > h3 + ul, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > h3 + ol, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > h4 + p, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > h4 + ul, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > h4 + ol, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > ul + p, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > ul + ul, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > ul + ol, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > ol + p, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > ol + ul, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > ol + ol, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > p + p, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > p + ul, .block-editor-block-list__layout.is-root-container .wp-block-scb-column > p + ol { margin-top: 0; } .block-root > iframe, .block-editor-block-list__layout.is-root-container > iframe { display: block; width: 100%; } .block-root > p:empty:not(:last-child), .block-editor-block-list__layout.is-root-container > p:empty:not(:last-child) { display: none; } .block-root { overflow: hidden; word-break: break-word; } body.single-ytk_info_page .block-root .columns-information-bank > .wp-block-column .wp-block-group + *, body.single-ytk_info_page .block-editor-block-list__layout.is-root-container .columns-information-bank > .wp-block-column .wp-block-group + * { margin-top: var(--spacing-md); } body.single-ytk_info_page .block-root .columns-information-bank > .wp-block-column .wp-block-evermade-accordion + *, body.single-ytk_info_page .block-editor-block-list__layout.is-root-container .columns-information-bank > .wp-block-column .wp-block-evermade-accordion + * { margin-top: var(--spacing-md); } body.single-ytk_info_page .block-root .columns-information-bank > .wp-block-column .wp-block-image + *, body.single-ytk_info_page .block-editor-block-list__layout.is-root-container .columns-information-bank > .wp-block-column .wp-block-image + * { margin-top: var(--spacing-md); } body.single-ytk_info_page .block-root .columns-information-bank > .wp-block-column > .wp-block-group, body.single-ytk_info_page .block-root .columns-information-bank > .wp-block-column > .wp-block-heading, body.single-ytk_info_page .block-editor-block-list__layout.is-root-container .columns-information-bank > .wp-block-column > .wp-block-group, body.single-ytk_info_page .block-editor-block-list__layout.is-root-container .columns-information-bank > .wp-block-column > .wp-block-heading { margin-top: var(--spacing-md); } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } figure { margin: 0; } figcaption { margin-top: 0.625rem; font-size: var(--font-size-xs); color: var(--color-accent); } html, button, input, select, textarea { font-family: inherit; font-weight: inherit; line-height: inherit; } embed, img, object, video { vertical-align: middle; max-width: 100%; height: auto; } a { text-decoration: none; } html { background: var(--color-white); font-size: 100%; } body { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); background-color: var(--color-white); font-size: var(--font-size-md); font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); line-height: var(--line-height-md); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a.skip-to-content, a.skip-to-content:focus, a.skip-to-content:focus-visible, a.skip-to-content:focus:focus-visible { position: absolute; outline: 0; color: var(--color-blue-dark) !important; background-color: var(--color-white); border: solid 4px var(--color-primary); border-radius: 0; } a.skip-to-content::before, a.skip-to-content:focus::before, a.skip-to-content:focus-visible::before, a.skip-to-content:focus:focus-visible::before { display: none; } h1 { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); line-height: var(--line-height-h1); margin-bottom: 1.875rem; } h2 { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); line-height: var(--line-height-h2); margin-bottom: 1.5rem; } h3 { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); line-height: var(--line-height-h3); margin-bottom: 1.25rem; } h4 { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); margin-bottom: 1.25rem; } h5 { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h5); font-weight: var(--font-weight-bold); line-height: var(--line-height-h5); margin-bottom: 0.625rem; } h6 { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h6); font-weight: var(--font-weight-bold); line-height: var(--line-height-h6); margin-bottom: 0.625rem; } p { color: var(--color-text); font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: var(--line-height-md); margin-bottom: 1.25rem; } p.is-style-lead { color: var(--color-text-lead); font-size: var(--font-size-lg); } p.is-style-heading { color: var(--color-heading); font-family: var(--font-family-sans-header); font-weight: var(--font-weight-bold); } p.is-style-pre-headline { font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent); margin-bottom: 0.625rem; } p.is-style-semi-transparent { opacity: 0.5; } ul, ol { color: var(--color-text); font-family: var(--font-family-sans); font-weight: var(--font-weight-regular); font-size: var(--font-size-md); line-height: var(--line-height-md); padding-left: 1.5rem; margin-bottom: 1.25rem; } ul li, ol li { margin-bottom: 0.3125rem; } ul ul, ul ol, ol ul, ol ol { margin-left: 0.5rem; margin-top: 0.3125rem; margin-bottom: 0.625rem; color: inherit; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; } ul.is-style-check li, ol.is-style-check li { position: relative; padding-left: 1.105rem; margin-bottom: 1.125rem; } ul.is-style-check li::before, ol.is-style-check li::before { content: ""; position: absolute; display: inline-block; height: 1.35em; width: 1.35em; left: -1.2em; border-radius: 999px; background-color: var(--color-primary); background-image: url(icon-check.svg?v=f17cd1308a388b17d50a); background-position: 57% 60%; background-repeat: no-repeat; background-size: 75%; } ul.is-style-cross li, ol.is-style-cross li { position: relative; padding-left: 0.8rem; margin-bottom: 1rem; } ul.is-style-cross li::before, ol.is-style-cross li::before { content: ""; position: absolute; display: inline-block; height: 1.35em; width: 1.35em; left: -1.2em; border-radius: 999px; background-color: var(--color-error); background-image: url(icon-cross.svg?v=5158e5d0e6a7063c1152); background-position: 54% 52%; background-repeat: no-repeat; background-size: 65%; } ul.is-style-styled-list li, ol.is-style-styled-list li { list-style-type: none; position: relative; } ul.is-style-styled-list li::before, ol.is-style-styled-list li::before { content: ""; position: absolute; height: 0.5em; width: 0.5em; top: 0.5em; left: -1em; border-radius: 50%; background-color: var(--color-primary); } ol { counter-reset: li; --marker-size: 2em; --list-padding: calc(var(--marker-size) + var(--spacing-xs)); } @media (min-width: 782px) { ol { --marker-size: 2.667em; } } ol.is-style-styled-list { padding-left: 0; } ol.is-style-styled-list ul, ol.is-style-styled-list ol { margin-top: 1.5rem; margin-left: 0; padding-left: 0; } ol.is-style-styled-list li { min-height: var(--marker-size); padding-left: var(--list-padding); margin-bottom: 1.55rem; counter-increment: li; padding-top: calc(var(--marker-size) / 4); } ol.is-style-styled-list li::before { content: counter(li); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; height: var(--marker-size); width: var(--marker-size); background-color: var(--color-beige-light); font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--color-blue-dark); } nav ul, nav li { list-style-type: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5, p, ul, ol { margin-top: 0; } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; } h1.is-style-underlined, h2.is-style-underlined, h3.is-style-underlined, h4.is-style-underlined, h5.is-style-underlined, p.is-style-underlined, ul.is-style-underlined, ol.is-style-underlined { display: inline-block; position: relative; padding-bottom: 0.7rem; } h1.is-style-underlined::after, h2.is-style-underlined::after, h3.is-style-underlined::after, h4.is-style-underlined::after, h5.is-style-underlined::after, p.is-style-underlined::after, ul.is-style-underlined::after, ol.is-style-underlined::after { content: ""; position: absolute; left: 0; bottom: -0.4rem; width: 100%; height: 3px; background-color: var(--color-primary); } a { color: var(--color-link); text-decoration: underline; text-underline-offset: var(--underline-offset-sm); } a:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; } a:hover, a:active { text-decoration-color: var(--color-secondary); } strong { font-weight: var(--font-weight-bold); } em { font-style: italic; } blockquote { --quote-size: 3rem; position: relative; margin-left: 0; margin-right: 0; padding-left: calc(var(--quote-size) + 1.5rem); padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } @media (min-width: 480px) { blockquote { --quote-size: 3.25rem; } } @media (min-width: 782px) { blockquote { --quote-size: 3.5rem; } } @media (min-width: 1280px) { blockquote { --quote-size: 4rem; } } @media (min-width: 782px) { blockquote { padding-top: 2.5rem; padding-bottom: 2.5rem; padding-left: calc(var(--quote-size) * 0.5 + var(--quote-size)); } } blockquote p { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); margin-bottom: 0.3125rem; color: var(--color-blockquote); } blockquote cite { font-style: normal; font-weight: var(--font-weight-bold); color: var(--color-gray-100); display: inline-block; margin-top: 0.5rem; } blockquote::before { content: ""; position: absolute; top: 1.75rem; left: 0; width: var(--quote-size); height: var(--quote-size); background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: 85%; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2756%27 height=%2737%27 fill=%27none%27%3E%3Cpath fill=%27%2341A300%27 d=%27M10.354 0H26.25l-5.833 37H0L10.354 0Zm29.75 0H56l-5.833 37H29.75L40.104 0Z%27/%3E%3C/svg%3E"); } @media (min-width: 782px) { blockquote::before { top: 2.25rem; } } .color-scheme-blue-dark blockquote::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2756%27 height=%2737%27 fill=%27none%27%3E%3Cpath fill=%27%23004249%27 d=%27M10.354 0H26.25l-5.833 37H0L10.354 0Zm29.75 0H56l-5.833 37H29.75L40.104 0Z%27/%3E%3C/svg%3E"); } blockquote.is-style-question::before, blockquote.is-style-exclamation::before { border-radius: 999px; top: 2.375rem; } @media (min-width: 782px) { blockquote.is-style-question::before, blockquote.is-style-exclamation::before { top: 2.9rem; } } blockquote.is-style-question::before { background-color: var(--color-blockquote); background-size: 35%; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2719%27 height=%2724%27 fill=%27none%27%3E%3Cpath fill=%27%23fff%27 d=%27M7.574 17.184v-.48c0-.747.107-1.408.32-1.984.214-.576.587-1.141 1.12-1.696.534-.555 1.259-1.173 2.176-1.856.79-.597 1.387-1.088 1.792-1.472.406-.405.683-.779.832-1.12.171-.363.256-.757.256-1.184 0-.96-.362-1.696-1.088-2.208-.704-.512-1.728-.768-3.072-.768-1.472 0-2.613.256-3.424.768-.81.512-1.386 1.355-1.728 2.528l-4.16-.448C1.43 2.934 4.588.768 10.07.768c2.71 0 4.811.523 6.304 1.568 1.515 1.045 2.272 2.507 2.272 4.384 0 1.195-.288 2.24-.864 3.136-.554.875-1.536 1.835-2.944 2.88-.832.597-1.472 1.11-1.92 1.536-.426.427-.725.832-.896 1.216-.17.363-.256.79-.256 1.28v.416H7.574Zm4.352 2.336V24H7.382v-4.48h4.544Z%27/%3E%3C/svg%3E"); } blockquote.is-style-exclamation::before { background-color: var(--color-blockquote); background-size: 11%; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%276%27 height=%2723%27 fill=%27none%27%3E%3Cpath fill=%27%23fff%27 d=%27M.62.152h4.8L5.1 16.184H.907L.62.152ZM.716 18.52h4.576V23H.716v-4.48Z%27/%3E%3C/svg%3E"); } .has-drop-cap::first-letter { float: left; font-family: var(--font-family-serif); font-size: 3em; padding-top: 0.2em; padding-right: 0.2em; } /** * Make line widths easy to read. We sadly cannot do this for * block elements on the main level, but can for example wrap * them inside a Columns block first. */ .wp-block-column h1, .wp-block-column h2, .wp-block-column h3, .wp-block-column h4, .wp-block-column h5, .wp-block-column h6 { max-width: var(--line-width-heading-md); } .wp-block-column p, .wp-block-column ul, .wp-block-column ol, .wp-block-column blockquote { max-width: var(--line-width-text-md); } table { border-collapse: separate; border-spacing: 0; margin: 0 0 var(--spacing-xs); width: 100%; } th, td { border: none; padding: 0.75rem 1rem; text-align: left; } th { font-weight: var(--font-weight-bold); background-color: var(--color-primary); color: var(--color-white); } tr:nth-child(even) { background-color: var(--color-secondary); } tfoot { font-weight: var(--font-weight-bold); color: var(--color-heading); } /* -------------------------------------------------------------- # Blocks -------------------------------------------------------------- */ .wp-block-buttons { display: flex; flex-flow: row wrap; gap: 0.9375rem; } .wp-block-buttons.aligncenter { justify-content: center; } .wp-block-buttons.alignright { justify-content: flex-end; } .wp-block-buttons:not(:first-child) { margin-top: 1.5rem; } .wp-block-buttons.is-content-justification-left { justify-content: flex-start; } .wp-block-buttons.is-content-justification-center { justify-content: center; } .wp-block-buttons.is-content-justification-right { justify-content: flex-end; } .wp-block-buttons.is-content-justification-space-between { justify-content: space-between; } .wp-block-buttons.is-style-styled-links { row-gap: 1rem; column-gap: 2rem; align-items: stretch; justify-content: flex-start; } .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button { display: flex; float: left; position: relative; flex-basis: calc(33.3333333333% - 1.33333rem); } @media (max-width: 1079px) { .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button { flex-basis: calc(50% - 1rem); } } @media (max-width: 781px) { .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button { flex-basis: 100%; } } @media (max-width: 1279px) { .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button.block-editor-block-list__block { flex-basis: calc(50% - 1rem); } } @media (max-width: 1079px) { .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button.block-editor-block-list__block { flex-basis: 100%; } } .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link { display: flex; align-items: center; line-height: 1.45; font-size: var(--font-size-md); color: var(--color-blue-dark) !important; width: 100%; padding: 1.2rem 2.7rem 1.2rem 1.5rem; border-radius: 4px; background: var(--color-beige-light); transition: 0s; text-underline-offset: 0.25rem; } @media (max-width: 781px) { .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link { padding-top: 1.2rem; padding-bottom: 1.2rem; } } .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link::before { content: initial; display: none; } .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link::after { content: ""; display: inline-block; position: absolute; background-image: url(icon-arrow-right.svg?v=1d2a94587b4e1ab546e3); background-position: center; background-repeat: no-repeat; pointer-events: none; -webkit-user-select: none; user-select: none; height: 1.25em; width: 1.25em; top: 50%; right: 0.7em; transform: translate(0, -50%); transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link:not(.block-editor-rich-text__editable):hover, .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link:not(.block-editor-rich-text__editable):focus-visible { text-decoration: underline; } .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link:not(.block-editor-rich-text__editable):hover::after, .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link:not(.block-editor-rich-text__editable):focus-visible::after { transform: translate(5px, -50%); } .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link:not(.block-editor-rich-text__editable):focus-visible { outline: 4px solid var(--color-blue-dark); outline-offset: 0; } .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button:not(:last-of-type) .wp-block-button__link { padding-left: 4.2rem; } .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button:not(:last-of-type)::before { content: ""; z-index: 1; position: absolute; display: inline-block; pointer-events: none; -webkit-user-select: none; user-select: none; height: 1.75em; width: 1.75em; top: 50%; left: 1.1em; border-radius: 50%; transform: translateY(-50%); background-color: var(--color-primary); background-image: url(icon-check.svg?v=f17cd1308a388b17d50a); background-position: 57% 60%; background-repeat: no-repeat; background-size: 75%; } .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button:last-of-type .wp-block-button__link { background: var(--color-secondary); } .wp-block-buttons.is-style-styled-links .wp-block-button.wp-block-button.wp-block-button:last-of-type::before { display: none; } .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link:hover, .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link:focus-visible { text-decoration: none; } .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link:hover::before, .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link:focus-visible::before { transform: scaleX(1); } .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link { background-color: var(--button-background) !important; } .wp-block-button.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link { --button-background: transparent; --button-border: var(--color-button-outline); --button-text: var(--color-button-outline-text); } .wp-block-button.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--button-background); --button-border: var(--color-button-outline-hover); --button-text: var(--color-button-outline-hover); } .wp-block-button.wp-block-button.wp-block-button.is-style-outline .wp-block-button__link:disabled { --button-border: var(--color-grey-500); --button-text: var(--color-grey-500); } .wp-block-button.wp-block-button.wp-block-button.is-style-text .wp-block-button__link { --button-padding: 1rem 2em 1rem 0; --button-background: transparent; --button-border: transparent; --button-text: var(--color-button-text); border-radius: 0; font-size: var(--font-size-md); } .wp-block-button.wp-block-button.wp-block-button.is-style-text .wp-block-button__link::before { left: 0; right: 0; } .wp-block-button.wp-block-button.wp-block-button.is-style-text .wp-block-button__link::after { content: ""; display: inline-block; position: absolute; background-image: url(icon-arrow-right.svg?v=1d2a94587b4e1ab546e3); background-position: center; background-repeat: no-repeat; height: 1em; width: 1em; right: 0.5em; top: 50%; transform: translateY(-50%); transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .has-green-background-color .wp-block-button.wp-block-button.wp-block-button.is-style-text .wp-block-button__link::after, .has-blue-dark-background-color .wp-block-button.wp-block-button.wp-block-button.is-style-text .wp-block-button__link::after { filter: invert(1) brightness(1.5); } .wp-block-button.wp-block-button.wp-block-button.is-style-text .wp-block-button__link:disabled { --button-text: var(--color-grey-500); } .wp-block-button.wp-block-button.wp-block-button.is-style-text .wp-block-button__link:hover, .wp-block-button.wp-block-button.wp-block-button.is-style-text .wp-block-button__link:focus-visible { --button-text: var(--color-button-text); background: var(--button-background); } .wp-block-button.wp-block-button.wp-block-button.is-style-text .wp-block-button__link:hover::after, .wp-block-button.wp-block-button.wp-block-button.is-style-text .wp-block-button__link:focus-visible::after { right: 0; } .wp-block-button.wp-block-button.wp-block-button .wp-block-button__width-25 { min-width: 25%; } .wp-block-button.wp-block-button.wp-block-button .wp-block-button__width-50 { min-width: 50%; } .wp-block-button.wp-block-button.wp-block-button .wp-block-button__width-75 { min-width: 75%; } .wp-block-button.wp-block-button.wp-block-button .wp-block-button__width-100 { width: 100%; } .wp-block-button.wp-block-button.wp-block-button.has-custom-width .wp-block-button__link { width: 100%; text-align: center; } .wp-block-button.wp-block-button.wp-block-button .wp-block-button__link:empty { display: none; } .wp-block-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.875rem; } .wp-block-columns.has-background, .wp-block-columns .wp-block-column.has-background { padding: var(--spacing-xs); } .wp-block-columns.is-not-stacked-on-mobile { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } .wp-block-columns.are-vertically-aligned-top { align-items: flex-start; } .wp-block-columns.are-vertically-aligned-center { align-items: center; } .wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end; } .wp-block-columns.has-4-columns { grid-template-columns: 1fr; } @media (min-width: 480px) { .wp-block-columns.has-4-columns { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .wp-block-columns.has-4-columns { grid-template-columns: repeat(4, 1fr); } } .wp-block-columns.has-4-columns.is-not-stacked-on-mobile { grid-template-columns: repeat(2, 1fr); } @media (min-width: 1080px) { .wp-block-columns.has-4-columns.is-not-stacked-on-mobile { grid-template-columns: repeat(4, 1fr); } } .wp-block-columns.has-sidebar { grid-template-columns: 1fr; } @media (min-width: 480px) { .wp-block-columns.has-sidebar { grid-template-columns: 2fr 1fr; } } .wp-block-columns.has-sidebar.is-not-stacked-on-mobile { grid-template-columns: 2fr 1fr; } .wp-block-cover { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); padding-left: var(--spacing-md); padding-right: var(--spacing-md); background-color: var(--color-black); background-repeat: no-repeat; background-size: cover; overflow: hidden; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); --color-heading: var(--color-white); --color-text: var(--color-white); --color-text-lead: var(--color-white); --color-accent: rgba(255, 255, 255, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary); --color-blockquote: var(--color-secondary); --color-border: rgba(255, 255, 255, 0.1); --color-button-default: var(--color-white); --color-button-default-hover: var(--color-white); --color-button-default-text: var(--color-blue-dark); --color-button-outline: var(--color-white); --color-button-outline-hover: var(--color-white); --color-button-outline-text: var(--color-white); --color-button-text: var(--color-white); --color-outline: var(--color-white); --form-color-error-background: transparent; --form-color-light: transparent; color: var(--color-text); align-items: center; display: flex; height: 100%; justify-content: flex-start; position: relative; z-index: 1; } .block-root > .wp-block-cover, .block-editor-block-list__layout.is-root-container > .wp-block-cover { max-width: var(--align-full); margin-left: auto; margin-right: auto; margin-left: calc(var(--gutter) * -1) !important; margin-right: calc(var(--gutter) * -1) !important; padding-left: var(--gutter); padding-right: var(--gutter); padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); } .block-root > .wp-block-cover:first-child, .block-editor-block-list__layout.is-root-container > .wp-block-cover:first-child { margin-top: 0; } .block-root > .wp-block-cover:last-child, .block-editor-block-list__layout.is-root-container > .wp-block-cover:last-child { margin-bottom: 0; } .wp-block-cover__image-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; height: 100%; width: 100%; z-index: 1; pointer-events: none; } .wp-block-cover__gradient-background, .wp-block-cover__background { --dim-opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-black); opacity: var(--dim-opacity); pointer-events: none; z-index: 2; } .wp-block-cover__gradient-background.has-background-dim, .wp-block-cover__background.has-background-dim { --dim-opacity: 0.5; } .wp-block-cover__gradient-background.has-background-dim-0, .wp-block-cover__background.has-background-dim-0 { --dim-opacity: 0; } .wp-block-cover__gradient-background.has-background-dim-10, .wp-block-cover__background.has-background-dim-10 { --dim-opacity: 0.1; } .wp-block-cover__gradient-background.has-background-dim-20, .wp-block-cover__background.has-background-dim-20 { --dim-opacity: 0.2; } .wp-block-cover__gradient-background.has-background-dim-30, .wp-block-cover__background.has-background-dim-30 { --dim-opacity: 0.3; } .wp-block-cover__gradient-background.has-background-dim-40, .wp-block-cover__background.has-background-dim-40 { --dim-opacity: 0.4; } .wp-block-cover__gradient-background.has-background-dim-50, .wp-block-cover__background.has-background-dim-50 { --dim-opacity: 0.5; } .wp-block-cover__gradient-background.has-background-dim-60, .wp-block-cover__background.has-background-dim-60 { --dim-opacity: 0.6; } .wp-block-cover__gradient-background.has-background-dim-70, .wp-block-cover__background.has-background-dim-70 { --dim-opacity: 0.7; } .wp-block-cover__gradient-background.has-background-dim-80, .wp-block-cover__background.has-background-dim-80 { --dim-opacity: 0.8; } .wp-block-cover__gradient-background.has-background-dim-90, .wp-block-cover__background.has-background-dim-90 { --dim-opacity: 0.9; } .wp-block-cover__gradient-background.has-background-dim-100, .wp-block-cover__background.has-background-dim-100 { --dim-opacity: 1; } .wp-block-cover__inner-container { max-width: var(--align-default); margin-left: auto; margin-right: auto; display: flex; flex-direction: column; width: 100%; z-index: 3; } .wp-block-cover__inner-container > h1, .wp-block-cover__inner-container > h2, .wp-block-cover__inner-container > h3, .wp-block-cover__inner-container > h4, .wp-block-cover__inner-container > h5 { max-width: var(--line-width-heading-sm); margin-left: 0; } .wp-block-cover__inner-container > p { max-width: var(--line-width-text-sm); margin-left: 0; } .wp-block-cover__inner-container > .wp-block-group { width: 100%; } .wp-block-cover:not(.has-custom-content-position) .wp-block-cover__inner-container { justify-content: center; align-items: center; } .wp-block-cover.is-position-top-left .wp-block-cover__inner-container { margin-bottom: auto; align-items: flex-start; } .wp-block-cover.is-position-top-right .wp-block-cover__inner-container { margin-bottom: auto; align-items: flex-start; } .wp-block-cover.is-position-top-center .wp-block-cover__inner-container { margin-bottom: auto; align-items: flex-start; } .wp-block-cover.is-position-center-right .wp-block-cover__inner-container { align-items: flex-end; } .wp-block-cover.is-position-bottom-left .wp-block-cover__inner-container { margin-top: auto; } .wp-block-cover.is-position-bottom-right .wp-block-cover__inner-container { margin-top: auto; align-items: flex-end; } .wp-block-cover.is-position-bottom-center .wp-block-cover__inner-container { margin-top: auto; align-items: center; } .wp-block-cover.is-repeated, .wp-block-cover__image-background.is-repeated { background-size: auto; background-repeat: repeat; } .wp-block-cover__image-background.has-parallax { position: fixed; height: 100vh; width: 100vw; background-size: cover; } .wp-block-cover__video-background { height: 100%; left: 50%; object-fit: cover; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; z-index: 1; } .wp-block-details { margin-bottom: 1.5rem; } .wp-block-details summary { list-style: none; cursor: pointer; padding-left: 2.3rem; position: relative; font-weight: var(--font-weight-bold); color: var(--color-blue-dark, #004249); } .wp-block-details summary::marker, .wp-block-details summary::-webkit-details-marker { display: none; } .wp-block-details summary::before { content: ""; position: absolute; width: 20px; height: 20px; top: 0.23rem; left: 0; border-radius: 50%; transform: rotate(0deg); background-color: var(--color-secondary); background-image: url(icon-arrow-down.svg?v=5a35ab858cc91731a473); background-position: 50% 80%; background-repeat: no-repeat; background-size: 85%; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .wp-block-details summary:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; } .wp-block-details > * { margin-top: 0.7rem; padding-left: 2.3rem; } .wp-block-details h1, .wp-block-details h2, .wp-block-details h3, .wp-block-details h4, .wp-block-details h5, .wp-block-details h6 { margin-top: 1.5rem; } .wp-block-details[open] summary::before { transform: rotate(180deg); } .wp-has-aspect-ratio .wp-block-embed__wrapper { height: 0; overflow: hidden; padding-top: 56.25%; position: relative; } .wp-has-aspect-ratio .wp-block-embed__wrapper iframe { height: 100%; left: 0; max-width: 100%; position: absolute; top: 0; width: 100%; } .wp-embed-aspect-21-9 .wp-block-embed__wrapper { padding-top: 42.85%; } .wp-embed-aspect-18-9 .wp-block-embed__wrapper, .wp-embed-aspect-9-16 .wp-block-embed__wrapper { padding-top: 50%; } .wp-embed-aspect-16-9 .wp-block-embed__wrapper { padding-top: 56.25%; } .wp-embed-aspect-4-3 .wp-block-embed__wrapper { padding-top: 75%; } .wp-embed-aspect-1-1 .wp-block-embed__wrapper { padding-top: 100%; } .wp-embed-aspect-9-6 .wp-block-embed__wrapper { padding-top: 66.66%; } .wp-embed-aspect-1-2 .wp-block-embed__wrapper { padding-top: 200%; } .wp-block-file { padding: 0.625rem; text-align: center; } .wp-block-file, .wp-block-file__content-wrapper { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; } .wp-block-file > a:not(.wp-block-file__button), .wp-block-file__textlink a { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); --button-padding: 1rem 2em 1rem 0; --button-background: transparent; --button-border: transparent; --button-text: var(--color-button-text); border-radius: 0; } .wp-block-file > a:not(.wp-block-file__button)::before, .wp-block-file__textlink a::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .wp-block-file > a:not(.wp-block-file__button):hover, .wp-block-file > a:not(.wp-block-file__button):focus-visible, .wp-block-file__textlink a:hover, .wp-block-file__textlink a:focus-visible { text-decoration: none; } .wp-block-file > a:not(.wp-block-file__button):hover::before, .wp-block-file > a:not(.wp-block-file__button):focus-visible::before, .wp-block-file__textlink a:hover::before, .wp-block-file__textlink a:focus-visible::before { transform: scaleX(1); } .wp-block-file > a:not(.wp-block-file__button):focus-visible, .wp-block-file__textlink a:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .wp-block-file > a:not(.wp-block-file__button):disabled, .wp-block-file__textlink a:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .wp-block-file > a:not(.wp-block-file__button), .block-editor-block-preview__content .wp-block-file__textlink a { background-color: var(--button-background) !important; } .wp-block-file > a:not(.wp-block-file__button)::before, .wp-block-file__textlink a::before { left: 0; right: 0; } .wp-block-file > a:not(.wp-block-file__button)::after, .wp-block-file__textlink a::after { content: ""; display: inline-block; position: absolute; background-image: url(icon-arrow-right.svg?v=1d2a94587b4e1ab546e3); background-position: center; background-repeat: no-repeat; height: 1em; width: 1em; right: 0.5em; top: 50%; transform: translateY(-50%); transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .has-green-background-color .wp-block-file > a:not(.wp-block-file__button)::after, .has-blue-dark-background-color .wp-block-file > a:not(.wp-block-file__button)::after, .has-green-background-color .wp-block-file__textlink a::after, .has-blue-dark-background-color .wp-block-file__textlink a::after { filter: invert(1) brightness(1.5); } .wp-block-file > a:not(.wp-block-file__button):disabled, .wp-block-file__textlink a:disabled { --button-text: var(--color-grey-500); } .wp-block-file > a:not(.wp-block-file__button):hover, .wp-block-file > a:not(.wp-block-file__button):focus-visible, .wp-block-file__textlink a:hover, .wp-block-file__textlink a:focus-visible { --button-text: var(--color-button-text); background: var(--button-background); } .wp-block-file > a:not(.wp-block-file__button):hover::after, .wp-block-file > a:not(.wp-block-file__button):focus-visible::after, .wp-block-file__textlink a:hover::after, .wp-block-file__textlink a:focus-visible::after { right: 0; } .wp-block-file__button { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); margin-top: 1.25rem; } .wp-block-file__button::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .wp-block-file__button:hover, .wp-block-file__button:focus-visible { text-decoration: none; } .wp-block-file__button:hover::before, .wp-block-file__button:focus-visible::before { transform: scaleX(1); } .wp-block-file__button:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .wp-block-file__button:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .wp-block-file__button { background-color: var(--button-background) !important; } .wp-block-gallery { display: grid; gap: 1.875rem; grid-template-columns: repeat(1, 1fr); list-style-type: none; padding-left: 0; } .wp-block-gallery.columns-2 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 480px) { .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); } } .wp-block-gallery.columns-3, .wp-block-gallery.columns-default { grid-template-columns: repeat(1, 1fr); } @media (min-width: 480px) { .wp-block-gallery.columns-3, .wp-block-gallery.columns-default { grid-template-columns: repeat(3, 1fr); } } .wp-block-gallery.columns-4 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 480px) { .wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); } } .wp-block-gallery.columns-5 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 480px) { .wp-block-gallery.columns-5 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 782px) { .wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); } } .wp-block-gallery.columns-6 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 480px) { .wp-block-gallery.columns-6 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 782px) { .wp-block-gallery.columns-6 { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1080px) { .wp-block-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); } } .wp-block-gallery.columns-7 { grid-template-columns: repeat(2, 1fr); } @media (min-width: 480px) { .wp-block-gallery.columns-7 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 782px) { .wp-block-gallery.columns-7 { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1080px) { .wp-block-gallery.columns-7 { grid-template-columns: repeat(7, 1fr); } } .wp-block-gallery .wp-block-image { position: relative; height: 100%; margin: 0; } .wp-block-gallery .wp-block-image a { text-decoration: none; border-radius: var(--border-radius-sm); display: block; } .wp-block-gallery .wp-block-image a h3 { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: var(--underline-offset-sm); } .wp-block-gallery .wp-block-image a:hover, .has-hover .wp-block-gallery .wp-block-image a:hover { text-decoration: none; } .wp-block-gallery .wp-block-image a:hover time, .wp-block-gallery .wp-block-image a:hover ul > *, .has-hover .wp-block-gallery .wp-block-image a:hover time, .has-hover .wp-block-gallery .wp-block-image a:hover ul > * { text-decoration: none; } .wp-block-gallery .wp-block-image a:hover h3, .has-hover .wp-block-gallery .wp-block-image a:hover h3 { text-decoration: underline; text-decoration-color: currentcolor; } .wp-block-gallery .wp-block-image a:hover img, .has-hover .wp-block-gallery .wp-block-image a:hover img { transform: scale(1.05); } .wp-block-gallery .wp-block-image img { transition: all 0.33s cubic-bezier(0.645, 0.045, 0.355, 1); } .wp-block-gallery .wp-block-image figcaption { padding: var(--spacing-xs); text-align: center; width: 100%; } .wp-block-gallery.is-cropped .wp-block-image img { display: block; aspect-ratio: 1/1; object-fit: cover; width: 100%; } .wp-block-group.has-background { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); } .wp-block-group.has-background:not(.alignfull) { border-radius: var(--border-radius-sm, 4px); } .block-root > .wp-block-group.alignfull, .block-editor-block-list__layout.is-root-container > .wp-block-group.alignfull { max-width: var(--align-full); margin-left: auto; margin-right: auto; margin-left: calc(var(--gutter) * -1) !important; margin-right: calc(var(--gutter) * -1) !important; padding-left: var(--gutter); padding-right: var(--gutter); } .block-root > .wp-block-group.alignfull.has-background, .block-editor-block-list__layout.is-root-container > .wp-block-group.alignfull.has-background { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); } .block-root > .wp-block-group.alignfull.has-background:first-child, .block-editor-block-list__layout.is-root-container > .wp-block-group.alignfull.has-background:first-child { margin-top: 0; } .block-root > .wp-block-group.alignfull.has-background:last-child, .block-editor-block-list__layout.is-root-container > .wp-block-group.alignfull.has-background:last-child { margin-bottom: 0; } .wp-block-image img { display: block; border-radius: var(--border-radius-sm); } .wp-block-image > figure { margin: 0; } .wp-block-image.aligncenter { text-align: center; } .wp-block-image.aligncenter img { margin-left: auto; margin-right: auto; } .wp-block-image.alignright { text-align: right; } .wp-block-image.alignright img { margin-left: auto; } .wp-block-media-text { display: grid; align-items: center; grid-template-areas: "media-text-media media-text-content"; grid-column-gap: 1.875rem; grid-row-gap: 1.5rem; grid-template-columns: 1fr 1fr; } @media (min-width: 782px) { .wp-block-media-text { grid-column-gap: 3.125rem; } } @media (min-width: 1280px) { .wp-block-media-text { grid-column-gap: 4.375rem; } } @media (min-width: 480px) { .wp-block-media-text { grid-row-gap: 1.75rem; } } @media (min-width: 480px) { .wp-block-media-text { grid-template-columns: 1fr 1fr; } } @media (min-width: 782px) { .wp-block-media-text { grid-template-columns: 50% 1fr; } } .wp-block-media-text__media { -ms-grid-row: 1; -ms-grid-column: 1; margin: 0; grid-area: media-text-media; } .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media { -ms-grid-row: 1; -ms-grid-column: 2; } .wp-block-media-text__media img, .wp-block-media-text__media video { border-radius: var(--border-radius-sm); } .wp-block-media-text__content { -ms-grid-row: 1; -ms-grid-column: 3; width: 100%; grid-area: media-text-content; } .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content { -ms-grid-row: 1; -ms-grid-column: 1; } .has-background > .wp-block-media-text__content { padding: var(--spacing-sm); } @media (min-width: 480px) { .has-background > .wp-block-media-text__content { padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0; } } @media (min-width: 480px) { .has-media-on-the-right.has-background > .wp-block-media-text__content { padding-right: 0; padding-left: var(--spacing-sm); } } .wp-block-media-text__content p { max-width: var(--line-width-text-sm); margin-right: auto; margin-left: 0; } .wp-block-media-text.has-media-on-the-right { grid-template-areas: "media-text-content media-text-media"; grid-template-columns: 1fr 1fr; } @media (min-width: 480px) { .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 1fr; } } @media (min-width: 782px) { .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 50%; } } .wp-block-media-text.is-vertically-aligned-bottom { align-items: end; } .wp-block-media-text.is-vertically-aligned-top { align-items: start; } .wp-block-media-text.is-image-fill .wp-block-media-text__media { height: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } .wp-block-media-text.is-image-fill .wp-block-media-text__media img { visibility: hidden; } @media (max-width: 479px) { .wp-block-media-text.is-stacked-on-mobile { grid-template-areas: "media-text-media" "media-text-content"; grid-template-columns: 1fr !important; } .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media { -ms-grid-row: 1; -ms-grid-column: 1; } .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content { -ms-grid-row: 2; -ms-grid-column: 1; } } .wp-block-separator { margin-top: 1.5625rem; margin-bottom: 1.5625rem; border: none; border-top-style: solid; border-top-width: 1px; color: var(--color-text); opacity: 0.2; } .wp-block-social-links { display: flex; flex-flow: row wrap; list-style-type: none; padding-left: 0; row-gap: 0.5rem; } .wp-block-social-links.is-vertical { flex-direction: column; } .wp-block-social-links.is-content-justification-left { justify-content: flex-start; } .wp-block-social-links.is-content-justification-center { justify-content: center; } .wp-block-social-links.is-content-justification-right { justify-content: flex-end; } .wp-block-social-links.is-content-justification-space-between { justify-content: space-between; } .wp-block-social-links .wp-social-link { margin: 0 4px; } .wp-block-social-links .wp-social-link:first-child { margin-left: 0; } .wp-block-social-links .wp-social-link:last-child { margin-right: 0; } .wp-block-social-links .wp-social-link a, .wp-block-social-links .wp-social-link button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--color-link); border-radius: 100%; } .wp-block-social-links .wp-social-link a svg, .wp-block-social-links .wp-social-link button svg { width: 24px; height: 24px; } .wp-block-social-links .wp-social-link a svg path, .wp-block-social-links .wp-social-link a svg circle, .wp-block-social-links .wp-social-link button svg path, .wp-block-social-links .wp-social-link button svg circle { fill: var(--color-white); } .wp-block-social-links .wp-social-link a:hover, .wp-block-social-links .wp-social-link button:hover { filter: saturate(1.1) brightness(1.1); } .wp-block-table .wp-block-table__cell-content:focus { box-shadow: inset 0 0 0 1px var(--color-outline); } .wp-block-table .block-editor-rich-text__editable { border-bottom: 1px solid var(--color-border); } .wp-block-table .block-editor-rich-text__editable:not(:last-child) { border-right: 1px solid var(--color-border); } .wp-block-video video { display: block; max-width: 100%; } .wp-block-video > figure { margin: 0; } .wp-block-video .aligncenter { text-align: center; } .wp-block-video .aligncenter video { margin-left: auto; margin-right: auto; } .wp-block-video .alignright { text-align: right; } .wp-block-video .alignright video { margin-left: auto; } .wp-block-video figcaption { text-align: center; } .wp-block-embed-youtube .cookieconsent-optout-marketing { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-beige-light); } .wp-block-embed-youtube .cookieconsent-optout-marketing__content { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: var(--spacing-sm); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 479px) { .wp-block-embed-youtube .cookieconsent-optout-marketing__content { padding: var(--spacing-xxs); } } @media (max-width: 479px) { .wp-block-embed-youtube .cookieconsent-optout-marketing p { font-size: var(--font-size-sm); margin-bottom: 0.6rem; } } @media (max-width: 479px) { .wp-block-embed-youtube .cookieconsent-optout-marketing .button { padding: 0.7rem 1.7rem; } } .em-block-accordion-item { --accordion-title-padding: var(--spacing-xs) 3rem var(--spacing-xs) var(--spacing-xxs); --accordion-background-color: var(--color-beige-light); --accordion-title-color: var(--color-blue-dark); border-radius: var(--border-radius-sm); /** * Editor only */ } .em-block-accordion-item + .em-block-accordion-item { margin-top: var(--spacing-xxs); } .em-block-accordion-item__title { font-size: var(--font-size-h4); } .em-block-accordion-item__title-wrapper, .em-block-accordion-item__title { margin-top: 0; margin-bottom: 0; } .em-block-accordion-item__content { transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .em-block-accordion-item__content > * + *, .em-block-accordion-item__content .block-editor-block-list__layout > * + * { margin-top: var(--spacing-sm); } .em-block-accordion-item.wp-block.is-selected, .em-block-accordion-item.wp-block.has-child-selected { border-bottom-color: var(--wp-admin-theme-color); } .em-block-accordion-item.wp-block .em-block-accordion-item__title { color: var(--accordion-title-color) !important; } .em-block-calculator { --color-calculator-background: var(--color-secondary); --form-color-primary: var(--color-blue-dark, #004249); --form-color-border: var(--color-gray-500, #bfbfbf); --form-color-light: var(--color-gray-900, #eee); --form-field-padding-x: 0.75rem; --form-field-padding-y: 0.5rem; } @media (min-width: 782px) { .em-block-calculator { --form-field-padding-x: 1rem; } } @media (min-width: 782px) { .em-block-calculator { --form-field-padding-y: 0.75rem; } } .em-block-calculator__app { max-width: var(--align-full); margin-left: auto; margin-right: auto; margin-left: calc(var(--gutter) * -1) !important; margin-right: calc(var(--gutter) * -1) !important; padding-left: var(--gutter); padding-right: var(--gutter); padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); } .em-block-calculator__container { max-width: var(--align-default); margin-left: auto; margin-right: auto; } .em-block-calculator__user-input { gap: 0.5rem; } .em-block-calculator__back { position: relative; } .em-block-calculator__back::before { content: ""; position: absolute; height: 1px; bottom: 0.5rem; left: 0.5rem; right: 0.5rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .em-block-calculator__back:hover, .em-block-calculator__back:focus-visible { text-decoration: none; } .em-block-calculator__back:hover::before, .em-block-calculator__back:focus-visible::before { transform: scaleX(1); } .em-block-calculator input[type=text], .em-block-calculator input[type=email], .em-block-calculator input[type=url], .em-block-calculator input[type=tel], .em-block-calculator input[type=number], .em-block-calculator input[type=password], .em-block-calculator select, .em-block-calculator textarea { color: var(--color-blue-dark); font-size: var(--font-size-md); border-radius: var(--border-radius-lg, 8px); border: 1px solid var(--form-color-border); padding: var(--form-field-padding-y) var(--form-field-padding-x); line-height: var(--line-height-md); min-height: var(--form-field-min-height); } .em-block-calculator input[type=text][aria-invalid=true], .em-block-calculator input[type=email][aria-invalid=true], .em-block-calculator input[type=url][aria-invalid=true], .em-block-calculator input[type=tel][aria-invalid=true], .em-block-calculator input[type=number][aria-invalid=true], .em-block-calculator input[type=password][aria-invalid=true], .em-block-calculator select[aria-invalid=true], .em-block-calculator textarea[aria-invalid=true] { color: var(--form-color-error); border-color: var(--form-color-error); } .em-block-calculator input[type=text]:focus, .em-block-calculator input[type=text]:focus-visible, .em-block-calculator input[type=email]:focus, .em-block-calculator input[type=email]:focus-visible, .em-block-calculator input[type=url]:focus, .em-block-calculator input[type=url]:focus-visible, .em-block-calculator input[type=tel]:focus, .em-block-calculator input[type=tel]:focus-visible, .em-block-calculator input[type=number]:focus, .em-block-calculator input[type=number]:focus-visible, .em-block-calculator input[type=password]:focus, .em-block-calculator input[type=password]:focus-visible, .em-block-calculator select:focus, .em-block-calculator select:focus-visible, .em-block-calculator textarea:focus, .em-block-calculator textarea:focus-visible { outline-width: 3px; outline-color: var(--color-blue-dark); } .em-block-calculator__radio-wrapper label { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .em-block-calculator__radio-wrapper label::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .em-block-calculator__radio-wrapper label:hover, .em-block-calculator__radio-wrapper label:focus-visible { text-decoration: none; } .em-block-calculator__radio-wrapper label:hover::before, .em-block-calculator__radio-wrapper label:focus-visible::before { transform: scaleX(1); } .em-block-calculator__radio-wrapper label:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .em-block-calculator__radio-wrapper label:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .em-block-calculator__radio-wrapper label { background-color: var(--button-background) !important; } .em-block-calculator__radio-wrapper input:hover + label, .em-block-calculator__radio-wrapper input:checked + label, .em-block-calculator__radio-wrapper input:focus-visible + label { text-decoration: none; } .em-block-calculator__radio-wrapper input:hover + label::before, .em-block-calculator__radio-wrapper input:checked + label::before, .em-block-calculator__radio-wrapper input:focus-visible + label::before { transform: scaleX(1); } .em-block-contact-card { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); } .em-block-contact-card__title { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); } .em-block-contact-card__job-title { font-size: var(--font-size-sm); } .em-block-contact-card__contact-details { font-size: var(--font-size-sm); } .em-block-contact-card__socials li a svg path { fill: var(--color-link); } .em-block-dynamic-pricing { --font-size-main-number: 3.5rem; margin-top: 2rem; margin-bottom: 3rem; position: relative; width: 100%; } @media (min-width: 782px) { .em-block-dynamic-pricing { --font-size-main-number: 4.2rem; } } @media (min-width: 1080px) { .em-block-dynamic-pricing { --font-size-main-number: 5rem; } } @media (max-width: 1079px) { .em-block-dynamic-pricing { margin-top: 0; margin-bottom: 0.5rem; } } .em-block-dynamic-pricing__main-title { text-align: center; font-size: var(--font-size-h4); margin-bottom: 1rem; } .em-block-dynamic-pricing__final-price { display: block; position: relative; text-align: center; line-height: 1; color: var(--color-blue-dark); font-weight: var(--font-weight-bold); font-size: var(--font-size-main-number); font-family: var(--font-family-sans-header); margin-bottom: 2rem; } .em-block-dynamic-pricing__final-price .screen-reader-text { height: 100%; width: 100%; display: block; } .em-block-dynamic-pricing__subtitle { margin-bottom: 1rem; font-weight: var(--font-weight-bold); font-size: var(--font-size-md); } @media (max-width: 1079px) { .em-block-dynamic-pricing__subtitle { font-size: var(--font-size-sm); } } .em-block-dynamic-pricing__table { margin: 0; padding: 0; list-style: none; } .em-block-dynamic-pricing__option { width: 100%; position: relative; display: flex; align-items: center; flex-direction: row; padding: 1rem; margin-bottom: 0; border-radius: var(--border-radius-sm); font-size: var(--font-size-md); background-color: var(--color-beige-light); } .em-block-dynamic-pricing__option:not(:last-of-type) { margin-bottom: 0.75rem; } @media (max-width: 1079px) { .em-block-dynamic-pricing__option { font-size: var(--font-size-sm); } } .em-block-dynamic-pricing__option-title { flex: 1; } .em-block-dynamic-pricing__option-fee { min-width: 50px; text-align: right; margin-left: 0.5rem; font-weight: var(--font-weight-bold); } .has-beige-light-background-color .em-block-dynamic-pricing__option { background-color: var(--color-beige); } .has-blue-light-background-color .em-block-dynamic-pricing__option { background-color: var(--color-white); } .em-block-payment-forecast { display: grid; row-gap: 1.5rem; column-gap: 5rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 2rem; margin-bottom: 3rem; position: relative; width: 100%; } @media (max-width: 479px) { .em-block-payment-forecast { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); } } .em-block-payment-forecast__column-description { margin-top: 1rem; } .em-block-payment-forecast__icon-list, .em-block-payment-forecast__slider { display: flex; flex-direction: row; justify-content: space-between; column-gap: 1rem; position: relative; margin: 0; padding: 0; list-style: none; } .em-block-payment-forecast__icon-list { align-items: center; } .em-block-payment-forecast__icon { flex: 1; max-width: 110px; } @media (max-width: 1079px) { .em-block-payment-forecast__icon { max-width: 80px; } } .em-block-payment-forecast__icon img { width: 100%; height: auto; display: block; position: relative; } .em-block-payment-forecast__slider { margin: 0 auto; margin-top: 2.5rem; width: calc(100% - 80px); } @media (max-width: 1079px) { .em-block-payment-forecast__slider { width: calc(100% - 20px); } } .em-block-payment-forecast__slider::before { content: ""; position: absolute; width: 100%; height: 4px; top: 0; left: 0; background-color: var(--color-secondary); } .em-block-payment-forecast__slider-section { flex-basis: 120px; display: flex; flex-direction: column; align-items: center; text-align: center; } @media (max-width: 1079px) { .em-block-payment-forecast__slider-section { flex-basis: 80px; } } .em-block-payment-forecast__slider-section:not(:first-child):not(:last-child) { flex-basis: 160px; } @media (max-width: 1079px) { .em-block-payment-forecast__slider-section:not(:first-child):not(:last-child) { flex-basis: 80px; } } .em-block-payment-forecast__slider-section.active-congestion .em-block-payment-forecast__slider-dot::before { display: block; } .em-block-payment-forecast__slider-section.active-congestion p { font-weight: var(--font-weight-bold); } .em-block-payment-forecast__slider-section p { margin-top: 0; position: relative; font-size: var(--font-size-sm); } @media (max-width: 1079px) { .em-block-payment-forecast__slider-section p { font-size: var(--font-size-xs); } } .em-block-payment-forecast__slider-section:first-child .em-block-payment-forecast__slider-dot { align-self: flex-start; } .em-block-payment-forecast__slider-section:first-child p { left: -45px; } @media (max-width: 1079px) { .em-block-payment-forecast__slider-section:first-child p { left: -25px; } } .em-block-payment-forecast__slider-section:last-child .em-block-payment-forecast__slider-dot { align-self: flex-end; } .em-block-payment-forecast__slider-section:last-child p { right: -45px; } @media (max-width: 1079px) { .em-block-payment-forecast__slider-section:last-child p { right: -25px; } } .em-block-payment-forecast__slider-dot { position: relative; top: -15px; width: 30px; height: 30px; border-radius: 50%; background-color: var(--color-secondary); } .em-block-payment-forecast__slider-dot::before { content: ""; position: absolute; display: none; top: 50%; left: 50%; width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); background-color: var(--color-primary); } .wp-block-group.is-hero-main.has-background { position: relative; padding-top: 4.5rem !important; padding-bottom: var(--spacing-lg) !important; } @media (max-width: 1079px) { .wp-block-group.is-hero-main.has-background { padding-top: 0 !important; padding-bottom: var(--spacing-xl) !important; } } .wp-block-group.is-hero-main::before { content: ""; top: 0; right: 0; width: 38%; height: 100%; position: absolute; display: block; background-color: var(--color-white); } @media (max-width: 1079px) { .wp-block-group.is-hero-main::before { display: none; } } .wp-block-group.is-hero-main::after { content: ""; top: -1px; right: calc(38% - 1px); width: 6px; height: 6px; position: absolute; display: block; background-color: var(--color-white); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 94% 78%, 84% 57%, 76% 45%, 62% 30%, 47% 18%, 28% 8%); clip-path: polygon(0 0, 100% 0, 100% 100%, 94% 78%, 84% 57%, 76% 45%, 62% 30%, 47% 18%, 28% 8%); } @media (max-width: 1079px) { .wp-block-group.is-hero-main::after { display: none; } } @media (max-width: 1439px) { .wp-block-group.is-hero-main.block-editor-block-list__block::before { width: 25%; } } .wp-block-group.is-hero-main .yoast-breadcrumbs { display: none; } .wp-block-group.is-hero-main h1 { margin-bottom: 1.4rem; } @media (min-width: 1080px) { .wp-block-group.is-hero-main h1 { padding-top: 1.5rem; } } .wp-block-group.is-hero-main .wp-block-buttons:not(:first-child) { margin-top: 2rem; } @media (min-width: 1080px) { .wp-block-group.is-hero-main .wp-block-buttons:not(:first-child) { margin-top: 2.5rem; } } .wp-block-group.is-hero-main .wp-block-image { height: 100%; position: relative; } @media (max-width: 1079px) { .wp-block-group.is-hero-main .wp-block-image { aspect-ratio: 3/2; } @supports not (aspect-ratio: 1/1) { .wp-block-group.is-hero-main .wp-block-image { padding-bottom: 66.666%; } } } .wp-block-group.is-hero-main .wp-block-image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1079px) { .wp-block-group.is-hero-main .wp-block-image img { border-radius: 0; } } @media (min-width: 1280px) { .wp-block-group.is-hero-main .wp-block-image { margin-right: -3rem; } } .wp-block-group.is-hero-main .wp-block-image.block-editor-block-list__block .components-resizable-box__container { width: 100% !important; height: 100% !important; } .wp-block-group.is-hero-main .scb-columns { row-gap: 0.5rem; column-gap: 2rem; grid-template-columns: repeat(2, 1fr); } @media (max-width: 1079px) { .wp-block-group.is-hero-main .scb-columns { grid-template-columns: 100%; } } .wp-block-group.is-hero-main .scb-columns .wp-block-scb-column:nth-child(2) { margin-right: calc(0rem - var(--gutter)); margin-bottom: calc(0rem - var(--spacing-lg)); } @media (max-width: 1079px) { .wp-block-group.is-hero-main .scb-columns .wp-block-scb-column:nth-child(1) { order: 2; } .wp-block-group.is-hero-main .scb-columns .wp-block-scb-column:nth-child(2) { order: 1; margin-right: calc(0rem - var(--gutter)); margin-left: calc(0rem - var(--gutter)); margin-bottom: 0; } } @media (min-width: 1080px) { .wp-block-group.is-hero-main .scb-columns .wp-block-scb-column.block-editor-block-list__block:nth-child(2) { margin-bottom: calc(4rem - var(--spacing-lg)); } } .is-hero { margin-bottom: 8rem; } @media (max-width: 781px) { .is-hero { margin-bottom: 60vw; } } .is-hero .wp-block-image { width: 100%; height: 100%; position: relative; margin-bottom: -8rem; } @media (max-width: 781px) { .is-hero .wp-block-image { height: auto; aspect-ratio: 3/2; margin-bottom: -60vw; } @supports not (aspect-ratio: 1/1) { .is-hero .wp-block-image { padding-bottom: 66.666%; } } } .is-hero .wp-block-image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .is-hero .wp-block-image.block-editor-block-list__block > *:first-of-type { width: 100% !important; height: 100% !important; } .is-hero .scb-columns { column-gap: 3rem; grid-template-columns: initial; } @media (min-width: 1280px) { .is-hero .scb-columns { column-gap: 5rem; } } @media (min-width: 782px) { .is-hero .scb-columns { min-height: 300px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } } @media (min-width: 782px) { .is-hero .scb-columns .wp-block-scb-column:nth-child(2) { margin-bottom: calc(0rem - var(--spacing-sm) * 4); } } .scb-columns { gap: 2rem; } .scb-columns:not(.has-2-column-layout--66-33) .em-block-service-card, .scb-columns:not(.has-2-column-layout--66-33) .em-block-page-card, .scb-columns:not(.has-2-column-layout--33-66) .em-block-service-card, .scb-columns:not(.has-2-column-layout--33-66) .em-block-page-card { height: 100%; } .scb-columns.is-style-line-styled { row-gap: 2rem; column-gap: 4rem; } @media (max-width: 781px) { .scb-columns.is-style-line-styled { grid-template-columns: initial; } } .scb-columns.is-style-line-styled .scb-column:not(:last-of-type)::before { content: ""; position: absolute; opacity: 0.2; background: var(--color-primary); } @media (min-width: 782px) { .scb-columns.is-style-line-styled .scb-column:not(:last-of-type)::before { width: 1px; height: 100%; top: 0; right: -2rem; } } @media (max-width: 781px) { .scb-columns.is-style-line-styled .scb-column:not(:last-of-type)::before { width: 100%; height: 1px; bottom: -1rem; left: 0; } } .scb-columns.is-style-line-styled .scb-column.block-editor-block-list__layout .wp-block-heading.has-h-2-font-size { font-size: var(--font-size-h4) !important; } .em-block-service-card { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); position: relative; width: 100%; } .em-block-service-card a.em-block-service-card__link, .em-block-service-card__link { color: #000; display: flex; flex-flow: column nowrap; flex-grow: 1; height: 100%; align-items: flex-start; padding: 1.5rem; border-radius: 4px; background-color: var(--color-beige-light); text-decoration: none; } .em-block-service-card a.em-block-service-card__link:hover h3, .em-block-service-card a.em-block-service-card__link:focus-visible h3, .em-block-service-card a.em-block-service-card__link:focus-within h3, .em-block-service-card__link:hover h3, .em-block-service-card__link:focus-visible h3, .em-block-service-card__link:focus-within h3 { text-decoration: none; } .em-block-service-card a.em-block-service-card__link:hover .wp-block-button__link::before, .em-block-service-card a.em-block-service-card__link:focus-visible .wp-block-button__link::before, .em-block-service-card a.em-block-service-card__link:focus-within .wp-block-button__link::before, .em-block-service-card__link:hover .wp-block-button__link::before, .em-block-service-card__link:focus-visible .wp-block-button__link::before, .em-block-service-card__link:focus-within .wp-block-button__link::before { transform: scaleX(1); } .em-block-service-card__icon { width: auto; max-width: 32px; height: 32px; margin-bottom: 1.5rem; } .em-block-service-card__title { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); margin-bottom: 0.6rem; font-weight: var(--font-weight-bold); } .em-block-service-card__description { margin-bottom: 1rem; font-size: var(--font-size-sm); } @media (min-width: 782px) { .em-block-service-card__description { font-size: var(--font-size-md); } } .em-block-service-card__terms { display: flex; flex-flow: row wrap; list-style-type: none; row-gap: 0.6rem; column-gap: 0.7rem; padding-left: 0; margin-left: 0; margin-bottom: 0.5rem; position: relative; } .em-block-service-card__term { font-size: var(--font-size-xs); color: var(--color-text); display: inline-block; border-radius: 2rem; margin: 0; padding: 0.3rem 0.9rem; background-color: var(--color-beige); } @media (min-width: 782px) { .em-block-service-card__term { font-size: var(--font-size-sm); } } .em-block-service-card__read-more { width: auto; position: relative; display: inline-flex; align-items: center; color: var(--color-blue-dark); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); } @media (min-width: 782px) { .em-block-service-card__read-more { font-size: var(--font-size-md); } } .em-block-page-card { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); position: relative; width: 100%; } .em-block-page-card a.em-block-page-card__link, .em-block-page-card__link { color: #000; display: flex; flex-flow: column nowrap; flex-grow: 1; height: 100%; align-items: flex-start; padding: 1.5rem; border-radius: 4px; background-color: var(--color-secondary); text-decoration: none; } .em-block-page-card a.em-block-page-card__link:hover h3, .em-block-page-card a.em-block-page-card__link:focus-visible h3, .em-block-page-card a.em-block-page-card__link:focus-within h3, .em-block-page-card__link:hover h3, .em-block-page-card__link:focus-visible h3, .em-block-page-card__link:focus-within h3 { text-decoration: none; } .em-block-page-card a.em-block-page-card__link:hover .wp-block-button__link::before, .em-block-page-card a.em-block-page-card__link:focus-visible .wp-block-button__link::before, .em-block-page-card a.em-block-page-card__link:focus-within .wp-block-button__link::before, .em-block-page-card__link:hover .wp-block-button__link::before, .em-block-page-card__link:focus-visible .wp-block-button__link::before, .em-block-page-card__link:focus-within .wp-block-button__link::before { transform: scaleX(1); } .em-block-page-card__icon { width: auto; max-width: 32px; height: 32px; margin-bottom: 1.5rem; } .em-block-page-card__title { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); margin-bottom: 0.6rem; font-weight: var(--font-weight-bold); } .em-block-page-card__description { margin-bottom: 1rem; font-size: var(--font-size-sm); } @media (min-width: 782px) { .em-block-page-card__description { font-size: var(--font-size-md); } } .em-block-page-card__terms { display: flex; flex-flow: row wrap; list-style-type: none; row-gap: 0.6rem; column-gap: 0.7rem; padding-left: 0; margin-left: 0; margin-bottom: 0.5rem; position: relative; } .em-block-page-card__term { font-size: var(--font-size-xs); color: var(--color-text); display: inline-block; border-radius: 2rem; margin: 0; padding: 0.3rem 0.9rem; background-color: var(--color-beige); } @media (min-width: 782px) { .em-block-page-card__term { font-size: var(--font-size-sm); } } .em-block-page-card__read-more { width: auto; position: relative; display: inline-flex; align-items: center; color: var(--color-blue-dark); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); margin-top: auto; } @media (min-width: 782px) { .em-block-page-card__read-more { font-size: var(--font-size-md); } } .em-block-term-list { margin-top: var(--spacing-md); margin-bottom: var(--spacing-sm); position: relative; width: 100%; } .em-block-term-list__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 0.5rem; row-gap: 0.5rem; } .em-block-term-list__list-item { position: relative; display: inline-flex; margin-bottom: 0; } .em-block-term-list__list-item-link { text-decoration: none; color: var(--color-button-default-text); position: relative; border-radius: 999px; border: 0; display: inline-block; font-size: var(--font-size-sm); line-height: 1.25; padding: 0.4rem 0.8rem; font-weight: var(--font-weight-regular); background-color: var(--color-secondary); cursor: initial; } @media (max-width: 479px) { .em-block-term-list__list-item-link { font-size: var(--font-size-xs); } } .em-block-term-list__list-item-link:hover { text-decoration: none; } .yoast-breadcrumbs { --yoast-separator-font-size: var(--font-size-md); --yoast-breadcrumb-font-size: var(--font-size-xs); --yoast-breadcrumb-color-link: var(--color-text); --yoast-breadcrumb-color-current: var(--color-text); } .yoast-breadcrumbs > span { display: flex; align-items: center; flex-wrap: wrap; gap: 0 15px; } .yoast-breadcrumbs > span > span { display: inline-flex; align-items: center; font-size: var(--yoast-breadcrumb-font-size); } .yoast-breadcrumbs > span > span a { color: var(--yoast-breadcrumb-color-link); text-decoration: none; } .yoast-breadcrumbs > span > span a:hover { text-decoration: underline; } .yoast-breadcrumbs > span > span.breadcrumb_last { color: var(--yoast-breadcrumb-color-current); } .yoast-breadcrumbs > span > span:not(:last-child)::after { content: " "; display: inline-block; margin-left: 8px; height: 0.45em; width: 0.45em; transform: rotate(-45deg); border-right: 1px solid currentcolor; border-bottom: 1px solid currentcolor; opacity: 0.85; } .wp-block-yoast-how-to-block { position: relative; } h1 + .wp-block-yoast-how-to-block, h2 + .wp-block-yoast-how-to-block, h3 + .wp-block-yoast-how-to-block, h4 + .wp-block-yoast-how-to-block, h5 + .wp-block-yoast-how-to-block, h6 + .wp-block-yoast-how-to-block { margin-top: 0; } .schema-how-to-total-time { font-size: var(--font-size-xs); } .schema-how-to-total-time .schema-how-to-duration-time-text { text-transform: uppercase; font-weight: var(--font-weight-bold); } .schema-how-to-description { font-size: var(--font-size-md); margin-bottom: 1.25rem; } .schema-how-to-steps { padding-left: 0; } .schema-how-to-step-name { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h5); font-weight: var(--font-weight-bold); line-height: var(--line-height-h5); display: block; margin-bottom: 1.25rem; } .schema-how-to-step-text { display: block; padding-bottom: var(--spacing-sm); } .schema-how-to-step-text img { display: block; margin-top: var(--spacing-sm); } ol.schema-how-to-steps { --counter-size: 2em; --list-padding: calc(var(--counter-size) + var(--spacing-xs)); counter-reset: step; } @media (min-width: 782px) { ol.schema-how-to-steps { --counter-size: 2.667em; --list-padding: calc(var(--counter-size) + var(--spacing-sm)); } } ol.schema-how-to-steps li { padding-left: var(--list-padding); margin-bottom: var(--spacing-xs); counter-increment: step; list-style-type: none; position: relative; } ol.schema-how-to-steps li::before { content: counter(step); position: absolute; left: 0; display: flex; align-items: center; justify-content: center; height: var(--counter-size); width: var(--counter-size); top: initial; border-radius: 999px; background-color: var(--color-beige-light); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-blue-dark); } @media (max-width: 1079px) { ol.schema-how-to-steps li::before { height: 2.667em; width: 2.667em; font-size: var(--font-size-md); } } ul.schema-how-to-steps { padding-left: 0; } ul.schema-how-to-steps li { list-style-type: none; } .wp-block-yoast-faq-block { position: relative; } h1 + .wp-block-yoast-faq-block, h2 + .wp-block-yoast-faq-block, h3 + .wp-block-yoast-faq-block, h4 + .wp-block-yoast-faq-block, h5 + .wp-block-yoast-faq-block, h6 + .wp-block-yoast-faq-block { margin-top: 0; } .schema-faq-section { padding-bottom: var(--spacing-sm); } .schema-faq-section:not(:last-child) { border-bottom: var(--border-default); margin-bottom: var(--spacing-sm); } .schema-faq-question { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); color: var(--color-heading); display: inline-block; margin-bottom: 0.625rem; font-size: var(--font-size-h4); line-height: var(--line-height-h4); } .schema-faq-answer img { display: block; margin-top: var(--spacing-sm); } /* -------------------------------------------------------------- # Components -------------------------------------------------------------- */ .archive-items { display: grid; gap: 1.875rem; grid-template-columns: 1fr; } @media (min-width: 480px) { .archive-items { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 782px) { .archive-items { grid-template-columns: repeat(3, 1fr); } } .site-content { padding-top: var(--height-header); } .has-secondary-nav .site-content { padding-top: calc(var(--height-header) + var(--height-header-secondary)); } /* -------------------------------------------------------------- # Utilities -------------------------------------------------------------- */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); box-shadow: none; clip: auto !important; -webkit-clip-path: none; clip-path: none; display: block; height: auto; left: 5px; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .screen-reader-text:focus::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .screen-reader-text:focus:hover, .screen-reader-text:focus:focus-visible { text-decoration: none; } .screen-reader-text:focus:hover::before, .screen-reader-text:focus:focus-visible::before { transform: scaleX(1); } .screen-reader-text:focus:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .screen-reader-text:focus:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .screen-reader-text:focus { background-color: var(--button-background) !important; } /* -------------------------------------------------------------- # Keyframes -------------------------------------------------------------- */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 60px, 0); } 100% { opacity: 1; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -30px, 0); } 100% { opacity: 1; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(30px, 0, 0); } 100% { opacity: 1; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-30px, 0, 0); } 100% { opacity: 1; transform: none; } } @keyframes zoomIn { 0% { opacity: 0; transform: scale3d(0.9, 0.9, 0.9); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } } /* -------------------------------------------------------------- # Types -------------------------------------------------------------- */ @media (min-width: 782px) { .fade-in, .fade-in-up, .fade-in-right, .fade-in-down, .fade-in-left, .zoom-in { animation-fill-mode: both; animation-duration: 1s; animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } } @media (min-width: 782px) and (prefers-reduced-motion) { .fade-in, .fade-in-up, .fade-in-right, .fade-in-down, .fade-in-left, .zoom-in { animation: none !important; /* For the first time it feels right to use important */ animation-duration: 1ms !important; } } @media (min-width: 782px) { .fade-in { animation-name: fadeIn; } .fade-in-up { animation-name: fadeInUp; } .fade-in-right { animation-name: fadeInRight; } .fade-in-down { animation-name: fadeInDown; } .fade-in-left { animation-name: fadeInLeft; } .zoom-in { animation-name: zoomIn; } } /* -------------------------------------------------------------- # Triggers -------------------------------------------------------------- */ .js-scroll-animate { animation-play-state: paused; } /* -------------------------------------------------------------- # Delay -------------------------------------------------------------- */ .delay--1 { animation-delay: 0.15s; } .delay--2 { animation-delay: 0.3s; } .delay--3 { animation-delay: 0.45s; } .delay--4 { animation-delay: 0.6s; } .delay--5 { animation-delay: 0.9s; } .delay--6 { animation-delay: 1.2s; } .delay--7 { animation-delay: 1.5s; } .delay--8 { animation-delay: 2s; } .delay--9 { animation-delay: 2.5s; } .delay--10 { animation-delay: 3s; } /* -------------------------------------------------------------- # Duration -------------------------------------------------------------- */ .duration--fast { animation-duration: 0.6s; } .duration--slow { animation-duration: 1.25s; } .duration--very-slow { animation-duration: 3s; } .button { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .button::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .button:hover, .button:focus-visible { text-decoration: none; } .button:hover::before, .button:focus-visible::before { transform: scaleX(1); } .button:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .button:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .button { background-color: var(--button-background) !important; } .button--outline { --button-background: transparent; --button-border: var(--color-button-outline); --button-text: var(--color-button-outline-text); } .button--outline:hover { background: var(--button-background); --button-border: var(--color-button-outline-hover); --button-text: var(--color-button-outline-hover); } .button--outline:disabled { --button-border: var(--color-grey-500); --button-text: var(--color-grey-500); } .button--text { --button-padding: 1rem 2em 1rem 0; --button-background: transparent; --button-border: transparent; --button-text: var(--color-button-text); border-radius: 0; } .button--text::before { left: 0; right: 0; } .button--text::after { content: ""; display: inline-block; position: absolute; background-image: url(icon-arrow-right.svg?v=1d2a94587b4e1ab546e3); background-position: center; background-repeat: no-repeat; height: 1em; width: 1em; right: 0.5em; top: 50%; transform: translateY(-50%); transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .has-green-background-color .button--text::after, .has-blue-dark-background-color .button--text::after { filter: invert(1) brightness(1.5); } .button--text:disabled { --button-text: var(--color-grey-500); } .button--text:hover, .button--text:focus-visible { --button-text: var(--color-button-text); background: var(--button-background); } .button--text:hover::after, .button--text:focus-visible::after { right: 0; } /** * Text colors – as Gutenberg doesn't let us separately define * text / background colors, we have to prepare these to be * used as background colors as well. */ .has-dark-background-color { background-color: var(--color-black); } .has-dark-background-color:not(.has-text-color) { --color-heading: var(--color-white); --color-text: var(--color-white); --color-text-lead: var(--color-white); --color-accent: rgba(255, 255, 255, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary); --color-blockquote: var(--color-secondary); --color-border: rgba(255, 255, 255, 0.1); --color-button-default: var(--color-white); --color-button-default-hover: var(--color-white); --color-button-default-text: var(--color-blue-dark); --color-button-outline: var(--color-white); --color-button-outline-hover: var(--color-white); --color-button-outline-text: var(--color-white); --color-button-text: var(--color-white); --color-outline: var(--color-white); --form-color-error-background: transparent; --form-color-light: transparent; color: var(--color-text); } .has-dark-color { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); } .has-light-background-color { background-color: var(--color-white); } .has-light-background-color:not(.has-text-color) { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); } .has-light-color { --color-heading: var(--color-white); --color-text: var(--color-white); --color-text-lead: var(--color-white); --color-accent: rgba(255, 255, 255, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary); --color-blockquote: var(--color-secondary); --color-border: rgba(255, 255, 255, 0.1); --color-button-default: var(--color-white); --color-button-default-hover: var(--color-white); --color-button-default-text: var(--color-blue-dark); --color-button-outline: var(--color-white); --color-button-outline-hover: var(--color-white); --color-button-outline-text: var(--color-white); --color-button-text: var(--color-white); --color-outline: var(--color-white); --form-color-error-background: transparent; --form-color-light: transparent; color: var(--color-text); } .has-blue-dark-background-color { background-color: var(--color-blue-dark); } .has-blue-dark-background-color:not(.has-text-color) { --color-heading: var(--color-white); --color-text: var(--color-white); --color-text-lead: var(--color-white); --color-accent: rgba(255, 255, 255, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary); --color-blockquote: var(--color-secondary); --color-border: rgba(255, 255, 255, 0.1); --color-button-default: var(--color-white); --color-button-default-hover: var(--color-white); --color-button-default-text: var(--color-blue-dark); --color-button-outline: var(--color-white); --color-button-outline-hover: var(--color-white); --color-button-outline-text: var(--color-white); --color-button-text: var(--color-white); --color-outline: var(--color-white); --form-color-error-background: transparent; --form-color-light: transparent; color: var(--color-text); } .has-blue-dark-color { --color-heading: var(--color-blue-dark); --color-text: var(--color-blue-dark); --color-text-lead: var(--color-blue-dark); --color-accent: var(--color-blue-dark); --color-link: var(--color-blue-dark); --color-link-hover: var(--color-blue-dark); --color-blockquote: var(--color-blue-dark); --color-border: var(--color-blue-dark); --color-button-default: var(--color-blue-dark); --color-button-default-hover: var(--color-blue-dark); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-blue-dark); --color-button-outline-hover: var(--color-blue-dark); --color-button-outline-text: var(--color-blue-dark); --color-button-text: var(--color-blue-dark); color: var(--color-text); } .has-blue-light-background-color { background-color: var(--color-blue-light); } .has-blue-light-background-color:not(.has-text-color) { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); } .has-blue-lighter-background-color { background-color: var(--color-blue-lighter); } .has-blue-lighter-background-color:not(.has-text-color) { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); } .has-green-background-color { background-color: var(--color-green); } .has-green-background-color:not(.has-text-color) { --color-heading: var(--color-white); --color-text: var(--color-white); --color-text-lead: var(--color-white); --color-accent: rgba(255, 255, 255, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary); --color-blockquote: var(--color-secondary); --color-border: rgba(255, 255, 255, 0.1); --color-button-default: var(--color-white); --color-button-default-hover: var(--color-white); --color-button-default-text: var(--color-blue-dark); --color-button-outline: var(--color-white); --color-button-outline-hover: var(--color-white); --color-button-outline-text: var(--color-white); --color-button-text: var(--color-white); --color-outline: var(--color-white); --form-color-error-background: transparent; --form-color-light: transparent; color: var(--color-text); } .has-green-color { --color-heading: var(--color-green); --color-text: var(--color-green); --color-text-lead: var(--color-green); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-green); --color-link-hover: var(--color-green); --color-blockquote: var(--color-green); --color-border: rgba(0, 0, 0, 0.1); --color-button-default: var(--color-green); --color-button-default-hover: var(--color-green); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-green); --color-button-outline-hover: var(--color-green); --color-button-outline-text: var(--color-green); --color-button-text: var(--color-green); color: var(--color-text); } .has-green-light-background-color { background-color: var(--color-green-light); } .has-green-light-background-color:not(.has-text-color) { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); } .has-beige-light-background-color { background-color: var(--color-beige-light); } .has-beige-light-background-color:not(.has-text-color) { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); } .wrapper-link { cursor: pointer; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .pt-xs { padding-top: var(--spacing-xs) !important; } .pt-none { padding-top: 0 !important; } .pb-xs { padding-bottom: var(--spacing-xs) !important; } .pb-none { padding-bottom: 0 !important; } .mt-xs { margin-top: var(--spacing-xs) !important; } .mt-none { margin-top: 0 !important; } .mt-xs-neg { margin-top: calc(var(--spacing-xs) * -1) !important; } .mb-xs { margin-bottom: var(--spacing-xs) !important; } .mb-none { margin-bottom: 0 !important; } .pt-sm { padding-top: var(--spacing-sm) !important; } .pt-none { padding-top: 0 !important; } .pb-sm { padding-bottom: var(--spacing-sm) !important; } .pb-none { padding-bottom: 0 !important; } .mt-sm { margin-top: var(--spacing-sm) !important; } .mt-none { margin-top: 0 !important; } .mt-sm-neg { margin-top: calc(var(--spacing-sm) * -1) !important; } .mb-sm { margin-bottom: var(--spacing-sm) !important; } .mb-none { margin-bottom: 0 !important; } .pt-md { padding-top: var(--spacing-md) !important; } .pt-none { padding-top: 0 !important; } .pb-md { padding-bottom: var(--spacing-md) !important; } .pb-none { padding-bottom: 0 !important; } .mt-md { margin-top: var(--spacing-md) !important; } .mt-none { margin-top: 0 !important; } .mt-md-neg { margin-top: calc(var(--spacing-md) * -1) !important; } .mb-md { margin-bottom: var(--spacing-md) !important; } .mb-none { margin-bottom: 0 !important; } .pt-lg { padding-top: var(--spacing-lg) !important; } .pt-none { padding-top: 0 !important; } .pb-lg { padding-bottom: var(--spacing-lg) !important; } .pb-none { padding-bottom: 0 !important; } .mt-lg { margin-top: var(--spacing-lg) !important; } .mt-none { margin-top: 0 !important; } .mt-lg-neg { margin-top: calc(var(--spacing-lg) * -1) !important; } .mb-lg { margin-bottom: var(--spacing-lg) !important; } .mb-none { margin-bottom: 0 !important; } .pt-xl { padding-top: var(--spacing-xl) !important; } .pt-none { padding-top: 0 !important; } .pb-xl { padding-bottom: var(--spacing-xl) !important; } .pb-none { padding-bottom: 0 !important; } .mt-xl { margin-top: var(--spacing-xl) !important; } .mt-none { margin-top: 0 !important; } .mt-xl-neg { margin-top: calc(var(--spacing-xl) * -1) !important; } .mb-xl { margin-bottom: var(--spacing-xl) !important; } .mb-none { margin-bottom: 0 !important; } .has-text-align-left { text-align: left; } .has-text-align-center { text-align: center; } .has-text-align-right { text-align: right; } .has-h-1-font-size { font-size: var(--font-size-h1); line-height: var(--line-height-h1); margin-bottom: 1.875rem; } .has-h-2-font-size { font-size: var(--font-size-h2); line-height: var(--line-height-h2); margin-bottom: 1.5rem; } .has-h-3-font-size { font-size: var(--font-size-h3); line-height: var(--line-height-h3); margin-bottom: 1.25rem; } .has-h-4-font-size { font-size: var(--font-size-h4); line-height: var(--line-height-h4); margin-bottom: 1.25rem; } .has-h-5-font-size { font-size: var(--font-size-h5); line-height: var(--line-height-h5); margin-bottom: 1rem; } .has-sm-font-size { font-size: var(--font-size-sm); margin-bottom: 1.25rem; } .has-md-font-size { font-size: var(--font-size-md); margin-bottom: 1.25rem; } .has-lg-font-size { font-size: var(--font-size-lg); margin-bottom: 1.25rem; } .pre-headline { font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: 1px; } .input-label { font-size: var(--font-size-xs); margin-bottom: 0.3125rem; } /* -------------------------------------------------------------- # Print -------------------------------------------------------------- */ @media print { .site-header { display: none; } .site-footer { display: none; } #site-content { padding: 0; } .share-links { display: none; } a { page-break-inside: avoid; } blockquote { page-break-inside: avoid; } h1, h2, h3, h4, h5, h6 { page-break-after: avoid; page-break-inside: avoid; } img { page-break-inside: avoid; page-break-after: avoid; } table, pre { page-break-inside: avoid; } ul, ol, dl { page-break-before: avoid; } /** There are also some "special" styles for print, few for example: * - page-break-after * - page-break-before * - break-inside * - @page :left * - @page :right */ /* You can also define the "whitespace" around the document */ } /*!********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/breadcrumb/frontend.scss ***! \********************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .b-breadcrumb { margin-bottom: var(--spacing-xs); } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/button/frontend.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/cpt-blog-post/frontend.scss ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .em-block-blog-post-card { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); background-color: transparent; } .em-block-blog-post-card__link { text-decoration: none; border-radius: var(--border-radius-sm); } .em-block-blog-post-card__link h3 { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: var(--underline-offset-sm); } .em-block-blog-post-card__link:hover, .has-hover .em-block-blog-post-card__link:hover { text-decoration: none; } .em-block-blog-post-card__link:hover time, .em-block-blog-post-card__link:hover ul > *, .has-hover .em-block-blog-post-card__link:hover time, .has-hover .em-block-blog-post-card__link:hover ul > * { text-decoration: none; } .em-block-blog-post-card__link:hover h3, .has-hover .em-block-blog-post-card__link:hover h3 { text-decoration: underline; text-decoration-color: currentcolor; } .em-block-blog-post-card__link:hover img, .has-hover .em-block-blog-post-card__link:hover img { transform: scale(1.05); } .em-block-blog-post-card__link:focus-visible { outline-offset: 4px; outline-color: var(--color-outline); outline-width: 3px; outline-style: solid; } .em-block-blog-post-card__link:focus-visible h3 { text-decoration: underline; } .em-block-blog-post-card__title { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .em-block-blog-post-card__image { border-radius: var(--border-radius-sm); } .em-block-blog-post-card__image img { transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transform: scale(1); } .em-block-blog-post-card__cta { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); --button-padding: 1rem 2em 1rem 0; --button-background: transparent; --button-border: transparent; --button-text: var(--color-button-text); border-radius: 0; margin-bottom: 0; } .em-block-blog-post-card__cta::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .em-block-blog-post-card__cta:hover, .em-block-blog-post-card__cta:focus-visible { text-decoration: none; } .em-block-blog-post-card__cta:hover::before, .em-block-blog-post-card__cta:focus-visible::before { transform: scaleX(1); } .em-block-blog-post-card__cta:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .em-block-blog-post-card__cta:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .em-block-blog-post-card__cta { background-color: var(--button-background) !important; } .em-block-blog-post-card__cta::before { left: 0; right: 0; } .em-block-blog-post-card__cta::after { content: ""; display: inline-block; position: absolute; background-image: url(icon-arrow-right.svg?v=1d2a94587b4e1ab546e3); background-position: center; background-repeat: no-repeat; height: 1em; width: 1em; right: 0.5em; top: 50%; transform: translateY(-50%); transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .has-green-background-color .em-block-blog-post-card__cta::after, .has-blue-dark-background-color .em-block-blog-post-card__cta::after { filter: invert(1) brightness(1.5); } .em-block-blog-post-card__cta:disabled { --button-text: var(--color-grey-500); } .em-block-blog-post-card__cta:hover, .em-block-blog-post-card__cta:focus-visible { --button-text: var(--color-button-text); background: var(--button-background); } .em-block-blog-post-card__cta:hover::after, .em-block-blog-post-card__cta:focus-visible::after { right: 0; } .em-block-blog-post-card__terms { margin-left: 0; padding-left: 0; } .em-block-blog-post-card__date { color: var(--color-text); opacity: 0.7; font-size: var(--font-size-xs); text-transform: uppercase; } .em-block-blog-post-card__term { color: var(--color-text); opacity: 0.7; font-size: var(--font-size-xs); text-transform: uppercase; } .em-block-blog-post-card__term a { color: inherit; } .has-hover .em-block-blog-post-card__term a:hover, .em-block-blog-post-card__term a:focus-visible { color: var(--color-link); } .em-block-blog-post-feed__filters { display: flex; justify-content: center; margin-bottom: var(--spacing-md); } .em-block-blog-post-feed__filters > * { width: 100%; max-width: 500px; } .em-block-blog-post-feed__posts { gap: 1.875rem; grid-template-columns: 1fr; } @media (min-width: 480px) { .em-block-blog-post-feed__posts { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 782px) { .em-block-blog-post-feed__posts { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 480px) { .em-block-blog-post-feed__posts { gap: 2rem 1.875rem; } } @media (min-width: 782px) { .em-block-blog-post-feed__posts { gap: 3rem 1.875rem; } .em-block-blog-post-feed__posts .em-block-blog-post-card:nth-child(10n+5) { grid-column: auto/span 2; } .em-block-blog-post-feed__posts .em-block-blog-post-card:nth-child(10n+9) { grid-column: span 2/auto; } } .em-block-blog-post-feed__empty { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); } .em-block-blog-post-list-item { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); background-color: transparent; } .em-block-blog-post-list-item__title { font-family: var(--font-family-sans); } .cpt-blog-post__title { margin-top: var(--spacing-sm) !important; } @media (max-width: 479px) { .cpt-blog-post__title { font-size: calc(var(--font-size-h1) - 0.5rem); } } .cpt-blog-post__details { color: var(--color-gray-300); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 1.12px; display: flex; gap: 0.5rem; } @media (max-width: 781px) { .cpt-blog-post .featured-image { margin-top: var(--spacing-md); } } .cpt-blog-post__category { position: relative; } .cpt-blog-post__category::after { display: inline-block; content: "-"; margin-left: 0.5rem; } .cpt-blog-post__topics { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); } .cpt-blog-post__content { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); } @media (max-width: 781px) { .cpt-blog-post__content { grid-template-columns: 1fr !important; } } .cpt-blog-post__content > .scb-column > .em-block-page-card, .cpt-blog-post__content > .scb-column > .em-block-service-card { height: auto; } @media (max-width: 781px) { .cpt-blog-post__content > .scb-column:first-child { order: 2; padding-top: 1.5rem; border-top: 1px solid var(--color-gray-800); } .cpt-blog-post__content > .scb-column:nth-child(2) { overflow: hidden; } } .cpt-blog-post__terms { display: flex; flex-flow: row wrap; list-style-type: none; row-gap: 0.6rem; column-gap: 0.7rem; padding-left: 0; margin-left: 0; margin-bottom: 0; position: relative; } .cpt-blog-post__term { font-size: var(--font-size-sm); color: var(--color-blue-dark); display: inline-block; border-radius: var(--border-radius-sm); margin: 0; padding: 0.5rem 0.9rem 0.4rem; background-color: var(--color-secondary); } .cpt-blog-post .related-items__list { gap: 1.5rem; align-items: initial; grid-auto-flow: initial; grid-template-columns: repeat(1, 1fr); max-width: 100%; } @media (min-width: 782px) { .cpt-blog-post .related-items__list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .cpt-blog-post .related-items__list { grid-template-columns: repeat(3, 1fr); } } .cpt-blog-post .related-items__list .em-block-blog-post-card__content { padding-left: 0; padding-right: 0; } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/cpt-info-page/frontend.scss ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .wp-block-columns.columns-information-bank:not(.columns-information-bank__full-width) { gap: 7rem; } @media (min-width: 480px) { .wp-block-columns.columns-information-bank:not(.columns-information-bank__full-width) { grid-template-columns: 1fr; } } @media (min-width: 782px) { .wp-block-columns.columns-information-bank:not(.columns-information-bank__full-width) { grid-template-columns: 1fr; } } @media (min-width: 1080px) { .wp-block-columns.columns-information-bank:not(.columns-information-bank__full-width) { grid-template-columns: 2.5fr minmax(280px, 1fr); } } @media (max-width: 1279px) { .wp-block-columns.columns-information-bank:not(.columns-information-bank__full-width) { gap: 4rem; } } .wp-block-columns h1 { margin-bottom: 5rem; } @media (max-width: 1079px) { .wp-block-columns h1 { margin-bottom: 2.5rem; } } .wp-block-columns time { display: block; margin-bottom: 1.5rem; font-size: var(--font-size-sm); opacity: 0.5; } @media (max-width: 1079px) { .wp-block-columns time { font-size: var(--font-size-xs); } } .info-page-link-list { --info-page-default-size: 52px; margin-bottom: 2.5rem; position: relative; } @media (max-width: 1079px) { .info-page-link-list__desktop { display: none; } } .info-page-link-list__main-title { color: var(--color-blue-dark); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); margin-bottom: 0.5rem; } @media (min-width: 1080px) { .info-page-link-list__main-title { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } } .info-page-link-list__top-level > li { border-bottom: solid 1px var(--color-gray-700); } .info-page-link-list ul { margin: 0; padding: 0; list-style: none; } .info-page-link-list ul > li { display: flex; flex-wrap: wrap; position: relative; margin: 0; } .info-page-link-list ul > li a { flex: 1; display: flex; align-items: center; height: auto; position: relative; padding: 0.7rem 0; color: var(--color-blue-dark); text-decoration: none; } @media (max-width: 1079px) { .info-page-link-list ul > li a { font-size: var(--font-size-sm); } } .info-page-link-list ul > li a:hover { text-decoration: underline; } .info-page-link-list ul > li.is-current-page > a { font-weight: var(--font-weight-bold); } .info-page-link-list ul > li:not(.page-item-is-child) > a { min-height: var(--info-page-default-size); padding-right: calc(var(--info-page-default-size) / 1.5); font-weight: var(--font-weight-bold); } .info-page-link-list ul > li.page-item-is-child a { padding: 0.6rem 0; } .info-page-link-list ul .children-reveal-btn { -webkit-appearance: none; appearance: none; border: 0; border-radius: 0; background: transparent; width: calc(var(--info-page-default-size) / 1.5); height: var(--info-page-default-size); top: 0; right: 0; position: absolute; } .info-page-link-list ul .children-reveal-btn::before { content: ""; position: absolute; opacity: 0; width: 30px; height: 30px; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: var(--color-secondary); } .info-page-link-list ul .children-reveal-btn::after { content: ""; position: absolute; width: 24px; height: 24px; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); background-image: url(icon-arrow-down.svg?v=5a35ab858cc91731a473); background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; } .info-page-link-list ul .children-reveal-btn.active::after { transform: translate(-50%, -50%) rotate(180deg); } .info-page-link-list ul .children-reveal-btn:hover { cursor: pointer; } .info-page-link-list ul .children-reveal-btn:hover::before { opacity: 1; } .info-page-link-list ul .children-reveal-btn:focus-visible { outline: 3px var(--color-primary) solid; outline-offset: 1px; } .info-page-link-list ul ul.children { display: none; flex-basis: 100%; padding-left: 1rem; margin-bottom: 0.4rem; } .info-page-link-list ul ul.children a { visibility: hidden; pointer-events: none; transition: visibility 0.2s ease-out; } .info-page-link-list ul ul.children.active { display: block; } .info-page-link-list ul ul.children.active a { visibility: visible; pointer-events: auto; } .info-page-link-list ul ul.children li.is-current-page > a::before { content: ""; position: absolute; width: 4px; height: calc(100% - 1rem); top: 0.55rem; left: -0.9rem; background-color: var(--color-primary); } .info-page-link-list__mobile { display: none; } @media (max-width: 1079px) { .info-page-link-list__mobile { display: block; } } .info-page-link-list__mobile .mobile-info-page-list-reveal-btn { -webkit-appearance: none; appearance: none; color: var(--color-text); font-size: var(--font-size-sm); border: 1px solid var(--color-gray-800); border-radius: 4px; background: transparent; width: 100%; position: relative; padding: 0.725rem 2.3rem 0.725rem 1rem; text-align: left; } .info-page-link-list__mobile .mobile-info-page-list-reveal-btn::after { content: ""; position: absolute; width: 24px; height: 24px; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); top: 50%; right: 0.5rem; transform: translateY(-50%) rotate(0deg); background-image: url(icon-arrow-down.svg?v=5a35ab858cc91731a473); background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; } .info-page-link-list__mobile .mobile-info-page-list-reveal-btn:hover { cursor: pointer; border-color: var(--color-blue-dark); } .info-page-link-list__mobile .mobile-info-page-list-reveal-btn:focus-visible { outline: 3px var(--color-primary) solid; outline-offset: 1px; } .info-page-link-list__mobile .mobile-info-page-list-reveal-btn.active::after { transform: translateY(-50%) rotate(180deg); } .info-page-link-list__mobile .info-page-link-list__top-level { display: none; z-index: 1; top: calc(100% + 0.4rem); left: 0; width: 100%; height: auto; max-height: calc(100vh - 300px); position: absolute; padding: 0.5rem 0.8rem 1rem; overflow-y: auto; background-color: var(--color-white); box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px; } .info-page-link-list__mobile .info-page-link-list__top-level.active { display: block; } .info-page-link-list__mobile .info-page-link-list__top-level > li:last-child { border-bottom: 0; } .info-page-link-list__mobile ul > li a { padding: 0.7rem 0.5rem; } .info-page-link-list__mobile ul ul.children { padding-left: 1.5rem; padding-right: 0.5rem; } /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/cpt-release/frontend.scss ***! \*********************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .em-block-release-card { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); border-radius: var(--border-radius-sm); background-color: var(--color-secondary); border-top: 4px solid var(--color-primary); } .em-block-release-card__link:focus-visible { outline-offset: 4px; outline-color: var(--color-outline); outline-width: 3px; outline-style: solid; } .em-block-release-card__link:focus-visible h3 { text-decoration: underline; } .em-block-release-card__title { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .em-block-release-card__image { border-radius: var(--border-radius-sm); } .em-block-release-card__image img { transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transform: scale(1); } .em-block-release-card__cta { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); --button-padding: 1rem 2em 1rem 0; --button-background: transparent; --button-border: transparent; --button-text: var(--color-button-text); border-radius: 0; padding-top: 0; padding-bottom: 0; margin-bottom: 0; } .em-block-release-card__cta::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .em-block-release-card__cta:hover, .em-block-release-card__cta:focus-visible { text-decoration: none; } .em-block-release-card__cta:hover::before, .em-block-release-card__cta:focus-visible::before { transform: scaleX(1); } .em-block-release-card__cta:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .em-block-release-card__cta:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .em-block-release-card__cta { background-color: var(--button-background) !important; } .em-block-release-card__cta::before { left: 0; right: 0; } .em-block-release-card__cta::after { content: ""; display: inline-block; position: absolute; background-image: url(icon-arrow-right.svg?v=1d2a94587b4e1ab546e3); background-position: center; background-repeat: no-repeat; height: 1em; width: 1em; right: 0.5em; top: 50%; transform: translateY(-50%); transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .has-green-background-color .em-block-release-card__cta::after, .has-blue-dark-background-color .em-block-release-card__cta::after { filter: invert(1) brightness(1.5); } .em-block-release-card__cta:disabled { --button-text: var(--color-grey-500); } .em-block-release-card__cta:hover, .em-block-release-card__cta:focus-visible { --button-text: var(--color-button-text); background: var(--button-background); } .em-block-release-card__cta:hover::after, .em-block-release-card__cta:focus-visible::after { right: 0; } .em-block-release-card__cta::before { bottom: -0.525rem; } .em-block-release-card__terms { margin-left: 0; padding-left: 0; } .em-block-release-card__date { color: var(--color-text); opacity: 0.7; font-size: var(--font-size-sm); text-transform: uppercase; } .em-block-release-card__content { padding: 1.5rem; } @media (max-width: 479px) { .em-block-release-card__content { padding: 1.2rem; } } .em-block-release-feed__filters { gap: 1.875rem; grid-template-columns: 1fr; margin-bottom: var(--spacing-md); } @media (min-width: 782px) { .em-block-release-feed__filters { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .em-block-release-feed__filters { grid-template-columns: repeat(3, 1fr); } } .em-block-release-feed__posts { gap: 1.875rem; grid-template-columns: 1fr; } @media (min-width: 782px) { .em-block-release-feed__posts { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 782px) { .em-block-release-feed__posts { gap: 2rem; } } .em-block-release-feed__empty { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); } .em-block-release-list-item { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); background-color: transparent; } .em-block-release-list-item__title { font-family: var(--font-family-sans); } .cpt-release .b-breadcrumb { margin-bottom: var(--spacing-sm); } .cpt-release__title { margin-top: var(--spacing-sm) !important; } .cpt-release__details { color: var(--color-primary); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 1.12px; display: flex; gap: 0.5rem; } .cpt-release__type { position: relative; } .cpt-release__type::after { display: inline-block; content: "-"; margin-left: 0.5rem; } .cpt-release__topics { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); } .cpt-release__content { max-width: var(--align-narrow); margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); } @media (max-width: 781px) { .cpt-release__content { grid-template-columns: 1fr !important; } } .cpt-release__content > .scb-column > .em-block-page-card, .cpt-release__content > .scb-column > .em-block-service-card { height: auto; } @media (max-width: 781px) { .cpt-release__content > .scb-column:first-child { order: 2; padding-top: 1.5rem; border-top: 1px solid var(--color-gray-800); } .cpt-release__content > .scb-column:nth-child(2) { overflow: hidden; } } .cpt-release .related-items__list { gap: 1.5rem; align-items: initial; grid-auto-flow: initial; grid-template-columns: repeat(2, 1fr); max-width: 100%; } @media (max-width: 781px) { .cpt-release .related-items__list { grid-template-columns: repeat(1, 1fr); } } /*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/cpt-story/frontend.scss ***! \*******************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .em-block-story-card { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); background-color: transparent; } .em-block-story-card__link { text-decoration: none; border-radius: var(--border-radius-sm); } .em-block-story-card__link h3 { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: var(--underline-offset-sm); } .em-block-story-card__link:hover, .has-hover .em-block-story-card__link:hover { text-decoration: none; } .em-block-story-card__link:hover time, .em-block-story-card__link:hover ul > *, .has-hover .em-block-story-card__link:hover time, .has-hover .em-block-story-card__link:hover ul > * { text-decoration: none; } .em-block-story-card__link:hover h3, .has-hover .em-block-story-card__link:hover h3 { text-decoration: underline; text-decoration-color: currentcolor; } .em-block-story-card__link:hover img, .has-hover .em-block-story-card__link:hover img { transform: scale(1.05); } .em-block-story-card__link:focus-visible { outline-offset: 4px; outline-color: var(--color-outline); outline-width: 3px; outline-style: solid; } .em-block-story-card__link:focus-visible h3 { text-decoration: underline; } .em-block-story-card__title { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .em-block-story-card__image { border-radius: var(--border-radius-sm); } .em-block-story-card__image img { transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transform: scale(1); } .em-block-story-card__cta { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); --button-padding: 1rem 2em 1rem 0; --button-background: transparent; --button-border: transparent; --button-text: var(--color-button-text); border-radius: 0; margin-bottom: 0; } .em-block-story-card__cta::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .em-block-story-card__cta:hover, .em-block-story-card__cta:focus-visible { text-decoration: none; } .em-block-story-card__cta:hover::before, .em-block-story-card__cta:focus-visible::before { transform: scaleX(1); } .em-block-story-card__cta:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .em-block-story-card__cta:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .em-block-story-card__cta { background-color: var(--button-background) !important; } .em-block-story-card__cta::before { left: 0; right: 0; } .em-block-story-card__cta::after { content: ""; display: inline-block; position: absolute; background-image: url(icon-arrow-right.svg?v=1d2a94587b4e1ab546e3); background-position: center; background-repeat: no-repeat; height: 1em; width: 1em; right: 0.5em; top: 50%; transform: translateY(-50%); transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .has-green-background-color .em-block-story-card__cta::after, .has-blue-dark-background-color .em-block-story-card__cta::after { filter: invert(1) brightness(1.5); } .em-block-story-card__cta:disabled { --button-text: var(--color-grey-500); } .em-block-story-card__cta:hover, .em-block-story-card__cta:focus-visible { --button-text: var(--color-button-text); background: var(--button-background); } .em-block-story-card__cta:hover::after, .em-block-story-card__cta:focus-visible::after { right: 0; } .em-block-story-card__terms { margin-left: 0; padding-left: 0; } .em-block-story-card__date { color: var(--color-text); opacity: 0.7; font-size: var(--font-size-xs); text-transform: uppercase; } .em-block-story-card__term { color: var(--color-text); opacity: 0.7; font-size: var(--font-size-xs); text-transform: uppercase; } .em-block-story-card__term a { color: inherit; } .has-hover .em-block-story-card__term a:hover, .em-block-story-card__term a:focus-visible { color: var(--color-link); } .em-block-story-feed__filters { gap: 1.875rem; grid-template-columns: 1fr; margin-bottom: var(--spacing-md); } @media (min-width: 782px) { .em-block-story-feed__filters { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .em-block-story-feed__filters { grid-template-columns: repeat(3, 1fr); } } .em-block-story-feed__posts { gap: 1.875rem; grid-template-columns: 1fr; } @media (min-width: 480px) { .em-block-story-feed__posts { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 782px) { .em-block-story-feed__posts { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 480px) { .em-block-story-feed__posts { gap: 2rem 1.875rem; } } @media (min-width: 782px) { .em-block-story-feed__posts { gap: 3rem 1.875rem; } .em-block-story-feed__posts .em-block-story-card:nth-child(10n+5) { grid-column: auto/span 2; } .em-block-story-feed__posts .em-block-story-card:nth-child(10n+9) { grid-column: span 2/auto; } } .em-block-story-feed__empty { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); } .em-block-story-list-item { --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); background-color: transparent; } .em-block-story-list-item__title { font-family: var(--font-family-sans); } .story__title { margin-top: var(--spacing-sm) !important; } .story__details { color: var(--color-gray-300); font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 1.12px; display: flex; gap: 0.5rem; } .story__category { position: relative; } .story__category::after { display: inline-block; content: "-"; margin-left: 0.5rem; } .story__topics { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); } .story__content { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); } @media (max-width: 781px) { .story__content { grid-template-columns: 1fr !important; } } .story__content > .scb-column > .em-block-page-card, .story__content > .scb-column > .em-block-service-card { height: auto; } @media (max-width: 781px) { .story__content > .scb-column:first-child { order: 2; padding-top: 1.5rem; border-top: 1px solid var(--color-gray-800); } .story__content > .scb-column:nth-child(2) { overflow: hidden; } } .story__terms { display: flex; flex-flow: row wrap; list-style-type: none; row-gap: 0.6rem; column-gap: 0.7rem; padding-left: 0; margin-left: 0; margin-bottom: 0; position: relative; } .story__term { font-size: var(--font-size-sm); color: var(--color-blue-dark); display: inline-block; border-radius: var(--border-radius-sm); margin: 0; padding: 0.5rem 0.9rem 0.4rem; background-color: var(--color-secondary); } /*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/extra-mobile-link/frontend.scss ***! \***************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .extra-mobile-button { position: relative; height: var(--height-header); min-width: var(--height-header); background-color: var(--color-white); border: 0; padding: 0.2rem 0.4rem 0; display: flex; flex-direction: column; justify-content: center; align-items: center; row-gap: 0.1rem; text-decoration: none; } .extra-mobile-button:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; } @media (min-width: 1080px) { .extra-mobile-button { display: none; } } .extra-mobile-button img { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 1.25rem; } .extra-mobile-button img path { fill: var(--color-blue-dark); } .extra-mobile-button span { display: block; font-size: 0.625rem; line-height: 1.5; color: var(--color-blue-dark); text-decoration: none; } .extra-mobile-button::before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: var(--menu-item-px); right: var(--menu-item-px); background-color: var(--color-blue-dark); transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .extra-mobile-button:hover::before { transform: scaleX(1); text-decoration: underline; } .extra-mobile-button:focus-visible { outline: solid 3px var(--color-blue-dark); outline-offset: -3px; } body.has-open-mobile-menu .navigation-bar__extra-mobile-button { display: none; } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/featured-image/frontend.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/footer/frontend.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .site-footer { padding-left: var(--gutter); padding-right: var(--gutter); --color-heading: var(--color-white); --color-text: var(--color-white); --color-text-lead: var(--color-white); --color-accent: rgba(255, 255, 255, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary); --color-blockquote: var(--color-secondary); --color-border: rgba(255, 255, 255, 0.1); --color-button-default: var(--color-white); --color-button-default-hover: var(--color-white); --color-button-default-text: var(--color-blue-dark); --color-button-outline: var(--color-white); --color-button-outline-hover: var(--color-white); --color-button-outline-text: var(--color-white); --color-button-text: var(--color-white); --color-outline: var(--color-white); --form-color-error-background: transparent; --form-color-light: transparent; color: var(--color-text); position: relative; z-index: 60; background-color: var(--color-blue-dark); padding-top: calc(var(--spacing-md) + 0.5rem); padding-bottom: var(--spacing-md); } @media (max-width: 781px) { .site-footer { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); } } .site-footer__container { max-width: var(--align-default); margin-left: auto; margin-right: auto; } .site-footer__columns { display: flex; flex-flow: column nowrap; padding-top: 3.125rem; padding-bottom: 3.125rem; gap: 1.875rem; } @media (min-width: 480px) { .site-footer__columns { flex-flow: row nowrap; } } @media (min-width: 1080px) { .site-footer__columns { gap: 4.375rem; } } .site-footer__menu { flex-grow: 1; } .site-footer .wp-block-group { padding: 0; } .site-footer p { font-size: var(--font-size-md); } @media (max-width: 781px) { .site-footer p { font-size: var(--font-size-sm); } } .site-footer .wp-block-heading { margin-bottom: 0.6rem; } .site-footer .scb-column .wp-block-image img { max-width: 300px; } @media (max-width: 479px) { .site-footer .scb-column .wp-block-image img { max-width: 60vw; max-height: 45px; } } .site-footer .wp-block-button.is-style-text .wp-block-button__link { padding-top: 0.5rem; padding-bottom: 0.5rem; margin-left: -0.1rem; } @media (max-width: 781px) { .site-footer .wp-block-button.is-style-text .wp-block-button__link { font-size: var(--font-size-sm); } } .site-footer .wp-block-button.is-style-text .wp-block-button__link::before { bottom: 0.15rem; } .site-footer .wp-block-buttons { margin-top: -0.8rem; } .site-footer .wp-block-buttons + .wp-block-buttons { margin-top: 0.2rem; } .site-footer .wp-block-buttons + p { margin-top: 1.5rem; } @media (min-width: 782px) { .site-footer__social-media { margin-left: auto; justify-self: flex-end; } } .site-footer__bottom { position: relative; padding-top: 1.25rem; padding-bottom: 1.25rem; width: 100%; border-top: solid 1px rgba(255, 255, 255, 0.2); } .site-footer__bottom p, .site-footer__bottom a { font-size: var(--font-size-sm); } @media (max-width: 781px) { .site-footer__bottom p, .site-footer__bottom a { font-size: var(--font-size-xs); } } @media (min-width: 782px) { .site-footer__bottom { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } } .site-footer__bottom-primary, .site-footer__bottom-secondary { margin-bottom: 20px; display: flex; align-items: center; } @media (min-width: 782px) { .site-footer__bottom-primary, .site-footer__bottom-secondary { margin-bottom: 0; } } .site-footer__bottom-primary a { color: inherit; } .site-footer__bottom-secondary > *:first-of-type { margin-left: 0; } .site-footer__bottom-secondary > *:last-of-type { margin-right: 0; margin-bottom: 0; } .site-footer__bottom-secondary a { display: inline-block; margin: 0 0.2rem 0.2rem; color: inherit; text-decoration: none; } .site-footer__bottom-secondary a:hover { text-decoration: underline; } .site-footer__bottom-secondary button { -webkit-appearance: none; appearance: none; display: inline-block; margin: 0 0.2rem 0.2rem; padding: 0; background: transparent; border: 0; border-radius: 0; color: inherit; text-decoration: none; font-size: var(--font-size-sm); line-height: var(--line-height-md); cursor: pointer; } .site-footer__bottom-secondary button:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; } @media (max-width: 781px) { .site-footer__bottom-secondary button { font-size: var(--font-size-xs); } } .site-footer__bottom-secondary button:hover { text-decoration: underline; } .footer-menu { font-size: var(--font-size-sm); margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); } @media (min-width: 782px) { .footer-menu { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1080px) { .footer-menu { grid-template-columns: repeat(5, 1fr); } } .footer-menu a { text-decoration: none; } .footer-menu > li { display: block; padding-right: 1.875rem; padding-bottom: 1.875rem; } .footer-menu > li > a { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); display: block; margin-bottom: 10px; color: var(--color-heading); line-height: 1.2; } .footer-menu > li > a:hover { color: var(--color-link); } .footer-menu > li.current-menu-item > a { color: var(--color-link); } @media (min-width: 480px) { .footer-menu > li:last-child { padding-right: 0; } } .footer-menu > li > ul li { display: block; } .footer-menu > li > ul li a { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text); display: block; } .footer-menu > li > ul li.current-menu-item > a { color: var(--color-link); } .footer-menu > li > ul a { display: block; line-height: 1.2em; padding: 0.3em 0; } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/header/frontend.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .header-menu-desktop { --sub-menu-offset: 0; --sub-menu-py: 0; --menu-item-px: 0.9375rem; --toggle-icon-width: 1.25rem; --toggle-color: var(--color-blue-dark); --toggle-background-color: var(--color-secondary); --megamenu-offset: calc( var(--height-header) + var(--height-header-secondary) ); } .header-menu-desktop button { background: none; border: 0; border-radius: 0; color: inherit; font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-user-select: none; user-select: none; cursor: pointer; } .header-menu-desktop button:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 0.25rem; } .header-menu-desktop a, .header-menu-desktop [data-toggle-type=cover] { display: inline-flex; align-items: center; justify-content: space-between; padding-inline: 0.5rem; } .header-menu-desktop a > *, .header-menu-desktop [data-toggle-type=cover] > * { flex-shrink: 0; } .header-menu-desktop a:focus-visible, .header-menu-desktop [data-toggle-type=cover]:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; } .header-menu-desktop [data-toggle-type=cover], .header-menu-desktop [data-toggle-type=icon] { transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .header-menu-desktop [data-toggle-type=cover] svg, .header-menu-desktop [data-toggle-type=icon] svg { transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .header-menu-desktop .menu-item-has-children { display: flex; align-items: center; } .header-menu-desktop .menu-item-has-children > ul { flex: 1; } .header-menu-desktop [data-toggle-type=icon] { width: var(--toggle-icon-width); height: var(--toggle-icon-width); background: var(--toggle-background-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--toggle-color); border-radius: 50%; } .header-menu-desktop [data-toggle-type=icon] svg { fill: currentcolor; height: 1rem; aspect-ratio: 1; } .header-menu-desktop [hidden] { display: none !important; } .header-menu-desktop__list { display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; pointer-events: none; } @media (min-width: 1080px) { .header-menu-desktop__list { gap: 0.5rem; } } @media (min-width: 1440px) { .header-menu-desktop__list { gap: 1rem; } } .header-menu-desktop__list > * { pointer-events: auto; } .header-menu-desktop__list a, .header-menu-desktop__list [data-toggle-type=cover] { text-decoration: none; color: var(--color-blue-dark); } .has-hover .header-menu-desktop__list a:hover svg, .header-menu-desktop__list a:focus svg, .has-hover .header-menu-desktop__list [data-toggle-type=cover]:hover svg, .header-menu-desktop__list [data-toggle-type=cover]:focus svg { opacity: 1; transform: translateX(0.25rem); } .header-menu-desktop__list a:focus-visible, .header-menu-desktop__list [data-toggle-type=cover]:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; } .header-menu-desktop__list .menu-item:not(.current_page_parent).current-menu-item > a, .header-menu-desktop__list .menu-item:not(.current_page_parent).current-menu-item > [data-toggle-type=cover], .header-menu-desktop__list .menu-item:not(.current_page_parent).current-menu-ancestor > a, .header-menu-desktop__list .menu-item:not(.current_page_parent).current-menu-ancestor > [data-toggle-type=cover] { text-decoration: underline; } .header-menu-desktop__list .menu-item:not(.current_page_parent).current-menu-item > a::before, .header-menu-desktop__list .menu-item:not(.current_page_parent).current-menu-item > [data-toggle-type=cover]::before, .header-menu-desktop__list .menu-item:not(.current_page_parent).current-menu-ancestor > a::before, .header-menu-desktop__list .menu-item:not(.current_page_parent).current-menu-ancestor > [data-toggle-type=cover]::before { transform: translateY(calc(-50% + 1.3rem)) scaleX(1); } .header-menu-desktop__list > .menu-item { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); position: relative; } .header-menu-desktop__list > .menu-item > a, .header-menu-desktop__list > .menu-item > [data-toggle-type=cover] { position: relative; display: inline-flex; align-items: center; height: var(--height-header); } .header-menu-desktop__list > .menu-item > a::before, .header-menu-desktop__list > .menu-item > [data-toggle-type=cover]::before { content: ""; position: absolute; height: 2px; top: 50%; left: 0.5rem; right: 0; width: calc(100% - 1rem); background-color: var(--color-blue-dark); transform: translateY(calc(-50% + 1.3rem)) scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .header-menu-desktop__list > .menu-item:hover > a::before, .header-menu-desktop__list > .menu-item:hover > [data-toggle-type=cover]::before { transform: translateY(calc(-50% + 1.3rem)) scaleX(1); } .header-menu-desktop__list > .menu-item.current-menu-item:not(.menu-item-has-children) > a::before, .header-menu-desktop__list > .menu-item.current-menu-item:not(.menu-item-has-children) > [data-toggle-type=cover]::before { display: none; } .header-menu-desktop__list > .menu-item > [data-toggle-type=cover] svg { width: 1.125rem; height: 1.125rem; } .header-menu-desktop__list > .menu-item > [data-toggle-type=cover][aria-expanded=true], .header-menu-desktop__list > .menu-item > [data-toggle-type=icon][aria-expanded=true] { --toggle-color: var(--color-secondary); --toggle-background-color: var(--color-primary); } .header-menu-desktop__list > .menu-item > [data-toggle-type=cover][aria-expanded=true] svg, .header-menu-desktop__list > .menu-item > [data-toggle-type=icon][aria-expanded=true] svg { transform: rotate(-180deg); } .header-menu-desktop__list > .menu-item .sub-menu { position: absolute; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); --hidden-safe-area-height: 2.4rem; } .headroom--not-top .header-menu-desktop__list > .menu-item .sub-menu { --hidden-safe-area-height: 1.8rem; } .header-menu-desktop__list > .menu-item .sub-menu::before { content: ""; position: fixed; top: calc(var(--height-header) + var(--height-header-secondary) - var(--hidden-safe-area-height)); left: 0; right: 0; height: var(--hidden-safe-area-height); display: block; background: transparent; } .header-menu-desktop__list > .menu-item .sub-menu.is-open, .header-menu-desktop__list > .menu-item .sub-menu.animate-open { --sub-menu-py: 3.5rem; opacity: 1; visibility: visible; pointer-events: auto; } .header-menu-desktop__list > .menu-item .sub-menu.animate-close { --sub-menu-py: 0; opacity: 0; } .header-menu-desktop__list > .menu-item .sub-menu .menu-item { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); position: relative; margin-bottom: 1rem; display: table; width: 100%; } .header-menu-desktop__list > .menu-item .sub-menu .menu-item > a, .header-menu-desktop__list > .menu-item .sub-menu .menu-item > [data-toggle-type=cover] { display: inline-block; align-items: center; justify-content: flex-start; gap: 0.5rem; line-height: 1; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1.25rem; padding-right: 1.25rem; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); width: 100%; text-underline-offset: 0.25rem; } .header-menu-desktop__list > .menu-item .sub-menu .menu-item > a svg, .header-menu-desktop__list > .menu-item .sub-menu .menu-item > [data-toggle-type=cover] svg { top: 0.25rem; width: 1.25rem; height: 1.25rem; position: relative; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); margin-left: 0.5rem; } .header-menu-desktop__list > .menu-item .sub-menu .menu-item > a svg path, .header-menu-desktop__list > .menu-item .sub-menu .menu-item > [data-toggle-type=cover] svg path { transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .header-menu-desktop__list > .menu-item .sub-menu .menu-item > a:hover, .header-menu-desktop__list > .menu-item .sub-menu .menu-item > [data-toggle-type=cover]:hover { color: var(--color-blue-dark); text-decoration: underline; } .header-menu-desktop__list > .menu-item .sub-menu .menu-item [data-toggle-type=cover][aria-expanded=true] svg, .header-menu-desktop__list > .menu-item .sub-menu .menu-item [data-toggle-type=icon][aria-expanded=true] svg { transform: rotate(-90deg); } .header-menu-desktop__list > .menu-item .sub-menu .menu-item.current-menu-item > a svg, .header-menu-desktop__list > .menu-item .sub-menu .menu-item.current-menu-item > [data-toggle-type=cover] svg { transform: none; } .header-menu-desktop__list > .menu-item .sub-menu .menu-item.current-menu-item > a svg path, .header-menu-desktop__list > .menu-item .sub-menu .menu-item.current-menu-item > [data-toggle-type=cover] svg path { fill: currentcolor; } .header-menu-desktop__list > .menu-item .sub-menu .menu-item.current-menu-item > a::before, .header-menu-desktop__list > .menu-item .sub-menu .menu-item.current-menu-item > [data-toggle-type=cover]::before { transform: scaleX(1); } .header-menu-desktop__list > .menu-item .sub-menu .sub-menu { position: absolute; min-width: 192px; top: -1px; left: 100%; width: 100%; margin-left: 0; border-radius: 0 4px 4px 0; box-shadow: 10px 0 10px 0 rgba(0, 0, 0, 0.035) inset; border-left-width: 0; } .header-menu-desktop__list > .menu-item .sub-menu .sub-menu.is-out-of-bounds { left: calc(-100% + 1px); border-radius: 4px 0 0 4px; border-right-width: 0; border-left-width: 1px; margin-right: 0; } .header-menu-desktop__list > .menu-item .sub-menu .megamenu { position: fixed; top: var(--megamenu-offset); left: 0; right: 0; bottom: auto; height: -moz-fit-content; height: fit-content; padding: var(--sub-menu-py) var(--gutter); background-color: var(--color-green-light); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); overflow: hidden; } .color-scheme-blue-dark .header-menu-desktop__list > .menu-item .sub-menu .megamenu { background-color: var(--color-beige-light); } .admin-bar .headroom--top .header-menu-desktop__list > .menu-item .sub-menu .megamenu, .admin-bar .headroom--pinned .header-menu-desktop__list > .menu-item .sub-menu .megamenu { top: calc(var(--megamenu-offset) + var(--height-admin-bar)); } .header-menu-desktop__list > .menu-item .sub-menu .megamenu__background { position: absolute; top: -17.5rem; left: calc(14.5rem + 50%); right: auto; bottom: 0; transform: translateX(-50%); max-width: var(--align-default); } .header-menu-desktop__list > .menu-item .sub-menu .megamenu__background svg path { fill: var(--color-green-semi-light); } .color-scheme-blue-dark .header-menu-desktop__list > .menu-item .sub-menu .megamenu__background svg path { fill: var(--color-beige); } .header-menu-desktop__list > .menu-item .sub-menu .megamenu__content { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); max-width: var(--align-default); margin-inline: auto; min-height: 100%; } .header-menu-desktop__list > .menu-item .sub-menu .megamenu__side-content__title { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); line-height: var(--line-height-h3); display: block; font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-xxs); } .header-menu-desktop__list > .menu-item .sub-menu .megamenu__side-content__description { margin-bottom: var(--spacing-xs); } .header-menu-desktop__list > .menu-item .sub-menu .megamenu__side-content__cta { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .header-menu-desktop__list > .menu-item .sub-menu .megamenu__side-content__cta::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .header-menu-desktop__list > .menu-item .sub-menu .megamenu__side-content__cta:hover, .header-menu-desktop__list > .menu-item .sub-menu .megamenu__side-content__cta:focus-visible { text-decoration: none; } .header-menu-desktop__list > .menu-item .sub-menu .megamenu__side-content__cta:hover::before, .header-menu-desktop__list > .menu-item .sub-menu .megamenu__side-content__cta:focus-visible::before { transform: scaleX(1); } .header-menu-desktop__list > .menu-item .sub-menu .megamenu__side-content__cta:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .header-menu-desktop__list > .menu-item .sub-menu .megamenu__side-content__cta:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .header-menu-desktop__list > .menu-item .sub-menu .megamenu__side-content__cta { background-color: var(--button-background) !important; } .header-menu-desktop__list > .menu-item .sub-menu .megamenu__items { max-height: 18rem; grid-column: 2/span 2; column-count: 2; column-fill: auto; column-gap: var(--gutter); gap: 0.5rem; } .header-menu-desktop-secondary { --menu-item-px: 0.5rem; margin-left: auto; } .header-menu-desktop-secondary__list { display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; gap: var(--menu-item-px); } .header-menu-desktop-secondary__list a { text-decoration: none; color: var(--color-white); position: relative; transform: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .has-hover .header-menu-desktop-secondary__list a:hover::before { transform: scaleX(1); } .header-menu-desktop-secondary__list a:focus-visible { outline: solid 2px var(--color-white); outline-offset: -2px; } .header-menu-desktop-secondary__list a::before { content: ""; position: absolute; height: 2px; bottom: 0; left: var(--menu-item-px); right: var(--menu-item-px); background-color: var(--color-white); transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .header-menu-desktop-secondary__list > .menu-item { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); position: relative; } .header-menu-desktop-secondary__list > .menu-item > a { padding-left: var(--menu-item-px); padding-right: var(--menu-item-px); position: relative; display: inline-flex; align-items: center; height: var(--height-header-secondary); } .header-menu-mobile { --sub-menu-py: 0.5rem; --toggle-icon-width: 1.5rem; } .header-menu-mobile button { background: none; border: 0; border-radius: 0; color: inherit; font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-user-select: none; user-select: none; cursor: pointer; } .header-menu-mobile button > * { pointer-events: none; } .header-menu-mobile a, .header-menu-mobile [data-toggle-type=cover] { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; text-align: left; } .header-menu-mobile a > *, .header-menu-mobile [data-toggle-type=cover] > * { flex-shrink: 0; } .header-menu-mobile a:focus-visible, .header-menu-mobile [data-toggle-type=cover]:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; } .header-menu-mobile a svg, .header-menu-mobile [data-toggle-type=cover] svg { display: none; } .header-menu-mobile [data-toggle-type=cover] svg, .header-menu-mobile [data-toggle-type=icon] svg { width: 1.5rem; height: 1.5rem; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .header-menu-mobile [data-toggle-type=cover][aria-expanded=true] svg, .header-menu-mobile [data-toggle-type=icon][aria-expanded=true] svg { transform: rotate(-180deg); } .header-menu-mobile .menu-item-has-children:has(> [data-toggle-type=icon]) > a { margin-right: var(--toggle-icon-width); max-width: calc(100% - var(--toggle-icon-width)); } .header-menu-mobile [data-toggle-type=icon] { position: absolute; top: 0; left: auto; right: 0; bottom: 0; height: -moz-fit-content; height: fit-content; padding-block: 0.5rem; background: var(--color-primary); display: flex; align-items: center; justify-content: center; color: var(--color-white); } .header-menu-mobile [data-toggle-type=icon] svg { width: var(--toggle-icon-width); height: var(--toggle-icon-width); fill: currentcolor; } .header-menu-mobile [hidden] { display: none !important; } .header-menu-mobile__list { position: relative; display: flex; flex-flow: column nowrap; gap: 0.5rem; } .header-menu-mobile__list > .menu-item { font-size: var(--font-size-md); font-weight: var(--font-weight-regular); color: var(--color-white); position: relative; text-underline-offset: var(--underline-offset-md); } .header-menu-mobile__list > .menu-item a { text-decoration: none; } .header-menu-mobile__list > .menu-item > a, .header-menu-mobile__list > .menu-item > [data-toggle-type=cover] { text-decoration: none; position: relative; padding-block: 0.5rem; color: inherit; } .header-menu-mobile__list > .menu-item > a:hover, .header-menu-mobile__list > .menu-item > [data-toggle-type=cover]:hover { text-decoration: underline; } .header-menu-mobile__list > .menu-item .sub-menu { flex: 1; padding-top: var(--sub-menu-py); padding-left: 1rem; display: none; transition: all 0.125s cubic-bezier(0.19, 1, 0.22, 1); } .header-menu-mobile__list > .menu-item .sub-menu.is-open { display: block; } .header-menu-mobile__list > .menu-item .sub-menu .menu-item { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); position: relative; margin-bottom: 0.4rem; } .header-menu-mobile__list > .menu-item .sub-menu .menu-item > a, .header-menu-mobile__list > .menu-item .sub-menu .menu-item > [data-toggle-type=cover] { position: relative; padding-block: 0.5rem; color: inherit; text-underline-offset: var(--underline-offset-md); } .header-menu-mobile__list > .menu-item .sub-menu .menu-item > a:hover, .header-menu-mobile__list > .menu-item .sub-menu .menu-item > [data-toggle-type=cover]:hover { text-decoration: underline; } .header-menu-mobile__list .menu-item.current-menu-item > a, .header-menu-mobile__list .menu-item.current-menu-item > [data-toggle-type=cover] { font-weight: var(--font-weight-bold); text-decoration: underline; } .header-menu-mobile-secondary { position: relative; padding-block: 0.5rem; } .header-menu-mobile-secondary__list { display: flex; flex-direction: column; gap: 0.5rem; } .header-menu-mobile-secondary__list .menu-item > a { display: block; text-decoration: none; font-size: var(--font-size-md); color: var(--color-white); padding-block: 0.5rem; text-underline-offset: var(--underline-offset-md); } .header-menu-mobile-secondary__list .menu-item > a:hover { text-decoration: underline; } /** * Required styles * * @see https://a11y-dialog.netlify.app/usage/styling */ .mobile-navigation, .mobile-navigation__overlay { position: fixed; top: var(--mobile-navigation-safe-margin); right: 0; bottom: 0; left: 0; height: auto; min-height: calc(100dvh - var(--mobile-navigation-safe-margin)); } .mobile-navigation { z-index: 100; display: flex; flex-direction: column; } .mobile-navigation[aria-hidden=true] { visibility: hidden; opacity: 0; transform: scale(0.8); } .mobile-navigation__container { margin: auto; z-index: 1000000; position: relative; background-color: #fff; flex-grow: 1; } body.has-open-mobile-menu { overscroll-behavior-y: none; } @media (max-width: 1079px) { body.has-open-mobile-menu { overflow: hidden; } } body.has-open-mobile-menu .log-in-menu__toggle-mobile { display: none; } /** * Modal styles */ .mobile-navigation { /* stylelint-disable-line no-duplicate-selectors */ --mobile-navigation-safe-margin: var(--height-header, 0); background: var(--color-primary); transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .admin-bar .mobile-navigation { --mobile-navigation-safe-margin: calc( var(--height-header, 0) + var(--height-admin-bar, 0) ); } .mobile-navigation__wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (min-width: 1080px) { .mobile-navigation { display: none !important; } } .mobile-navigation[aria-hidden=true] { /* stylelint-disable-line no-duplicate-selectors */ visibility: hidden; opacity: 0; transform: translateY(calc(-100% + var(--mobile-navigation-safe-margin))); } .mobile-navigation.is-open { visibility: visible; opacity: 1; transform: translateY(0); } .mobile-navigation__sites > * { width: 100%; } .mobile-navigation__container { /* stylelint-disable-line no-duplicate-selectors */ width: 100%; background: var(--color-primary); padding-left: var(--gutter); padding-right: var(--gutter); padding-block: var(--spacing-xxs); padding-bottom: 2rem; } .mobile-navigation .language-switcher { flex-grow: 1; display: flex; justify-content: flex-start; } .mobile-navigation .language-switcher__list { padding-top: 2rem; padding-inline: 0; background-color: transparent; } .mobile-navigation .language-switcher__list .lang-item { flex-basis: 47.5%; position: relative; color: var(--color-white); } .mobile-navigation .language-switcher__list .lang-item a { width: auto; font-size: 1rem; padding: 0.4rem 0.4rem; font-weight: var(--font-weight-bold); display: flex; align-items: center; justify-content: center; border: solid var(--color-white) 2px; border-radius: 30px; text-underline-offset: --underline-offset-md; } .mobile-navigation .language-switcher__list .lang-item:hover, .mobile-navigation .language-switcher__list .lang-item:focus-visible { text-decoration: underline; } .mobile-navigation .language-switcher__list .lang-item.current-lang { display: block; } .mobile-navigation .language-switcher__list .lang-item.current-lang a { color: var(--color-black); background-color: var(--color-white); } .sites-navigation { display: flex; --sites-navigation-height: 45px; } .sites-navigation__sites { display: flex; flex-flow: row nowrap; justify-content: stretch; flex-grow: 1; } @media (max-width: 1079px) { .sites-navigation__sites { overflow: auto; } } .sites-navigation__site { display: flex; height: 100%; width: -moz-fit-content; width: fit-content; justify-content: center; flex-grow: 1; } .sites-navigation__site a { display: flex; height: var(--sites-navigation-height); font-size: var(--font-size-sm); justify-content: center; align-items: center; flex-grow: 1; gap: 0.25rem; position: relative; text-decoration: none; background-color: var(--color-secondary); color: var(--color-blue-dark); white-space: nowrap; text-underline-offset: var(--underline-offset-md); } @media (max-width: 1079px) { .sites-navigation__site a { padding: 0 1rem; } } @media (min-width: 1080px) { .sites-navigation__site a { background-color: var(--color-primary); color: var(--color-white); padding-inline: 1rem; height: 100%; } } .has-hover .sites-navigation__site a:hover::before, .sites-navigation__site a:focus-visible::before { width: 100%; } .has-hover .sites-navigation__site a:hover .menu-icon svg, .sites-navigation__site a:focus-visible .menu-icon svg { transform: translateX(0.25rem); } .sites-navigation__site a:focus-visible { outline: solid 3px var(--color-white); outline-offset: -3px; } .sites-navigation__site a.current-menu-item { background-color: var(--color-primary); color: var(--color-white); } @media (max-width: 1079px) { .sites-navigation__site a.current-menu-item { text-decoration: underline; } } @media (min-width: 1080px) { .sites-navigation__site a.current-menu-item { background-color: var(--color-white); color: var(--color-blue-dark); } } .sites-navigation__site a.current-menu-item:focus-visible { outline-color: var(--color-primary); } .sites-navigation__site a .menu-icon { display: flex; align-items: center; justify-content: center; height: 1rem; aspect-ratio: 1; } .sites-navigation__site a .menu-icon svg { height: 100%; rotate: -45deg; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .sites-navigation__site a .menu-icon svg path { fill: currentcolor; } /** * The navigation bar layout handles displaying and positioning the * various navigation elements. Instead of showing and hiding * individual components, do it in this file. */ .navigation-bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--height-header); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .navigation-bar__logo { transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .navigation-bar__logo img { width: 100%; height: 100%; } @media (max-width: 1079px) { .navigation-bar__logo { z-index: 11; } } @media (min-width: 1080px) { .navigation-bar__logo { height: 100%; padding-block: 1rem; } .headroom--not-top .navigation-bar__logo { padding-block: 0.5rem; } } .navigation-bar__tools { font-size: 0; display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-end; /** * If you don't need any tools apart from the mobile menu toggle * set display to none on the tools container on desktop breakpoint. * * @include mq-desktop-navigation { * display: none; * } */ } @media (min-width: 1080px) { .navigation-bar__tools { display: none; } } @media (min-width: 1080px) { .navigation-bar__tools > div { margin-left: 0.625rem; margin-right: 0.625rem; } } @media (min-width: 1080px) { .navigation-bar__tools > div:last-child { margin-right: 0; } } .navigation-bar__menu { margin-left: auto; } @media (max-width: 1079px) { .navigation-bar__menu { display: none; } } @media (min-width: 1080px) { .navigation-bar__menu-toggle { display: none; } } /** * The header block handles the top level positioning of the header * bar and mobile menu. * * 1) Try to handle the display state and positioning of the various * bar and menu elements in the layout instead of block level. * 2) Headroom.js is used to show and hide the header bar based on * user behaviour. * 3) Opening or closing the mobile menu is handled by toggling a * has-open-mobile-menu -class on the body element with JavaScript. */ .site-header { --secondary-header-background-color: var(--color-primary); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; pointer-events: none; position: fixed; will-change: transform; transform: translateY(0); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); /** * Headroom.js makes the header hidden when the user scrolls down. * Read more from: http://wicky.nillia.ms/headroom.js/ */ } @media (min-width: 1080px) { .site-header { height: auto; } } .site-header__bar { padding-left: var(--gutter); background-color: var(--color-white); color: var(--color-black); pointer-events: auto; position: relative; z-index: 2; } @media (min-width: 1080px) { .site-header__bar { padding-left: var(--gutter); padding-right: var(--gutter); } } .site-header__secondary-bar { padding-left: var(--gutter); padding-right: var(--gutter); background-color: var(--secondary-header-background-color); color: var(--color-white); pointer-events: auto; position: relative; z-index: 3; } @media (max-width: 1079px) { .site-header__secondary-bar { display: none; } } .site-header__container { max-width: var(--align-default); margin-left: auto; margin-right: auto; } .site-header__secondary-container { max-width: var(--align-default); margin-left: auto; margin-right: auto; display: flex; flex-flow: row nowrap; justify-content: space-between; height: var(--height-header-secondary); } .site-header__secondary-navigation { display: flex; flex-direction: row; gap: 1rem; } @media (max-width: 1279px) { .site-header__secondary-navigation { gap: 0.5rem; } } .site-header__log-in { position: relative; } .site-header__mobile-navigation { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); background-color: var(--color-primary); color: var(--color-white); pointer-events: auto; transform: translateY(-100%); visibility: hidden; z-index: 1; } @media (min-width: 1080px) { .site-header__mobile-navigation { display: none; } } .has-open-mobile-menu .site-header__mobile-navigation { transform: translateY(0); visibility: visible; } .site-header.headroom--not-top:not(.headroom--pinned) { transform: translateY(calc(-1 * (var(--height-header) + var(--height-header-secondary)))); } .admin-bar .site-header.headroom--top, .admin-bar .site-header.headroom--pinned { padding-top: var(--height-admin-bar); } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/inline-modal/frontend.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ /** * Required styles * * @see https://a11y-dialog.netlify.app/usage/styling */ .modal, .modal__overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .modal { z-index: 1000000; display: flex; } .modal[aria-hidden=true] { visibility: hidden; opacity: 0; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .modal__container { margin: auto; z-index: 1000000; position: relative; background-color: #fff; } /** * Modal styles */ .modal { /* stylelint-disable-line no-duplicate-selectors */ } .modal__overlay { animation: modalFadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); } .modal__container { /* stylelint-disable-line no-duplicate-selectors */ animation: modalSlideIn 0.3s cubic-bezier(0, 0, 0.2, 1); } .modal[aria-hidden=true] { /* stylelint-disable-line no-duplicate-selectors */ pointer-events: none; } .modal[aria-hidden=true] .modal__overlay { animation: modalFadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); } .modal[aria-hidden=true] .modal__container { animation: modalSlideOut 0.3s cubic-bezier(0, 0, 0.2, 1); } .modal__overlay { /* stylelint-disable-line no-duplicate-selectors */ background-color: rgba(0, 0, 0, 0.75); } @media (prefers-reduced-motion) { .modal__overlay { animation: none !important; /* For the first time it feels right to use important */ animation-duration: 1ms !important; } } .modal__container { /* stylelint-disable-line no-duplicate-selectors */ position: relative; background-color: #fff; padding-top: 2rem; padding-bottom: 2rem; padding-left: 2rem; padding-right: 2rem; max-width: 500px; max-height: 100vh; border-radius: 4px; overflow-y: auto; box-sizing: border-box; } @media (min-width: 1280px) { .modal__container { padding-top: 3rem; padding-bottom: 3rem; padding-right: 4rem; padding-left: 4rem; max-width: 800px; } } .modal__container--video { background-color: transparent; border-radius: 0; overflow: hidden; height: 100%; width: 100%; max-width: 177.7777777778vh; display: flex; align-items: center; justify-content: center; pointer-events: none; padding-top: 0; padding-bottom: 0; padding-right: 30px; padding-left: 30px; } @media (min-width: 1280px) { .modal__container--video { padding-left: 50px; padding-right: 50px; } } .modal__container--video iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 100%; height: 100%; pointer-events: auto; } .modal__responsive-wrapper { position: relative; background-color: #000; padding-top: 56.25%; width: 100%; } .modal__close { position: absolute; top: 15px; right: 15px; background: transparent; border: 0; z-index: 2; width: 30px; height: 30px; cursor: pointer; } .modal__close::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: "✕"; z-index: 1; } .modal__close:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; } .modal__close:hover, .modal__close:focus-visible { color: var(--color-link-hover); } .modal__close--outside { color: #fff; top: 0; right: 0; } .modal__close--outside:focus-visible { outline-offset: -4px; } @media (min-width: 1280px) { .modal__close--outside { width: 45px; height: 45px; } } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes modalSlideIn { from { transform: translateY(15%); } to { transform: translateY(0); } } @keyframes modalSlideOut { from { transform: translateY(0); } to { transform: translateY(10%); } } /*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/language-switcher/frontend.scss ***! \***************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module mixins -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .language-switcher { --toggle-height: var(--height-header-secondary); --toggle-font-size: var(--font-size-sm); --toggle-font-weight: var(--font-weight-regular); --toggle-color: var(--color-white); --toggle-background-color: transparent; --toggle-caret-color: var(--color-white); --list-font-size: var(--font-size-md); --list-font-weight: var(--font-weight-bold); --list-color: var(--color-blue-dark); --list-background-color: var(--color-beige-light); position: relative; z-index: 10; } .language-switcher__toggle { position: relative; display: flex; align-items: center; gap: 0.5rem; height: var(--toggle-height); color: var(--toggle-color); background-color: var(--toggle-background-color); font-size: var(--toggle-font-size); font-weight: var(--toggle-font-weight); text-transform: uppercase; border: none; cursor: pointer; } .language-switcher__toggle svg { width: 16px; height: 16px; display: inline-block; pointer-events: none; } .language-switcher__toggle::before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: var(--color-white); transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .language-switcher__toggle::after { content: ""; position: relative; display: block; height: 1rem; width: 1rem; background-image: url(icon-arrow-down-wht.svg?v=a5684a58f6e07add4f52); background-size: 100%; background-position: center; background-repeat: no-repeat; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .language-switcher__toggle:hover::before { transform: scaleX(1); } .language-switcher__toggle:focus-visible { outline: solid 2px var(--color-white); outline-offset: -2px; } .language-switcher__toggle[aria-expanded=true]::after { rotate: 180deg; } .language-switcher__toggle[aria-expanded=false]::after { rotate: 0deg; } .language-switcher__list { position: relative; display: flex; flex-wrap: wrap; flex-direction: row; gap: 0.5rem; padding: 1rem; font-size: var(--list-font-size); font-weight: var(--list-font-weight); color: var(--list-color); background-color: var(--list-background-color); transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .language-switcher__list, .language-switcher__list li { margin: 0; text-indent: 0; list-style-type: none; } .language-switcher__list[aria-hidden=true] { opacity: 0; visibility: hidden; pointer-events: none; } .language-switcher__list[aria-hidden=false] { opacity: 1; visibility: visible; pointer-events: auto; } .language-switcher__list .lang-item { text-align: left; position: relative; } .language-switcher__list .lang-item a { width: 100%; color: inherit; position: relative; display: inline-block; text-decoration: none; font-size: var(--font-size-sm); padding-left: 1.5rem; } .language-switcher__list .lang-item a:hover { text-decoration: underline; } @media (min-width: 1080px) { .language-switcher__list .lang-item.current-lang a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.9rem; height: 1rem; background-image: url(icon-check-white.svg?v=5c5cc90db50b34999e44); background-size: 100%; background-position: center; background-repeat: no-repeat; filter: invert(1); opacity: 0.4; } } .language-switcher--dropdown .language-switcher__list { position: absolute; top: 100%; left: calc(50% + 1.5rem); bottom: auto; flex-direction: column; min-width: 80px; padding: 1rem 1rem; transform: translateX(-50%); } @media (max-width: 1279px) { .language-switcher--dropdown .language-switcher__list { left: 50%; } } /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/log-in-menu/frontend.scss ***! \*********************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module mixins -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .log-in-menu { --toggle-height: var(--height-header-secondary); --toggle-font-size: var(--font-size-sm); --toggle-font-weight: var(--font-weight-regular); --toggle-color: var(--color-blue-dark); --toggle-background-color: var(--color-secondary); --toggle-caret-color: var(--color-primary); --list-font-size: var(--font-size-md); --list-font-weight: var(--font-weight-bold); --list-color: var(--color-blue-dark); --list-background-color: var(--color-beige-light); position: relative; z-index: 10; } @media (max-width: 1079px) { .log-in-menu { --toggle-height: var(--height-header); } } @media (min-width: 1080px) { .log-in-menu.js-log-in-menu-mobile { display: none; } } .log-in-menu__toggle { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 1px 1rem; height: var(--toggle-height); color: var(--toggle-color); background-color: var(--toggle-background-color); font-size: var(--toggle-font-size); font-weight: var(--toggle-font-weight); border: none; cursor: pointer; } .log-in-menu__toggle svg { height: 1rem; } @media (max-width: 1079px) { .log-in-menu__toggle { padding: 1px 0.5rem; gap: 0; justify-content: center; flex-direction: column; font-size: var(--font-size-2xs); min-width: var(--toggle-height); } .log-in-menu__toggle svg { height: 1.5rem; } } .log-in-menu__toggle::before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: var(--color-blue-dark); transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } @media (min-width: 1080px) { .log-in-menu__toggle::after { content: ""; position: relative; display: block; height: 1rem; width: 1rem; background-image: url(icon-arrow-down-dark.svg?v=5a35ab858cc91731a473); background-size: 100%; background-position: center; background-repeat: no-repeat; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } } .log-in-menu__toggle:hover::before { transform: scaleX(1); } .log-in-menu__toggle:focus-visible { background-color: var(--color-white); outline: solid 4px var(--color-primary); outline-offset: -4px; } .log-in-menu__toggle[aria-expanded=true]::after { rotate: 180deg; } .log-in-menu__toggle[aria-expanded=false]::after { rotate: 0deg; } @media (min-width: 1080px) { .log-in-menu__toggle-mobile { display: none; } } .log-in-menu__list-wrapper { position: relative; } .log-in-menu__list { top: 0; margin-left: auto; background-color: var(--color-white); transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } @media (min-width: 1080px) { .log-in-menu__list { position: absolute; width: 370px; right: 0; background-color: var(--color-beige-light); } } @media (max-width: 1079px) { .log-in-menu__list { position: fixed; display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: flex-end; left: 0; width: 100%; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15); } .log-in-menu__list.log-in-list-admin-bar-offset { top: var(--height-admin-bar); } } .log-in-menu__list, .log-in-menu__list li { margin: 0; text-indent: 0; list-style-type: none; } .log-in-menu__list[aria-hidden=true] { opacity: 0; visibility: hidden; pointer-events: none; } .log-in-menu__list[aria-hidden=false] { opacity: 1; visibility: visible; pointer-events: auto; } .log-in-menu__list .link-title { font-size: var(--font-size-md); margin-bottom: 0.5rem; } @media (min-width: 1080px) { .log-in-menu__list .link-title { color: var(--color-blue-dark); } } .log-in-menu__list .link-description { font-size: var(--font-size-sm); margin-bottom: 1rem; } .log-in-menu__list a { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); text-decoration: none; color: var(--color-primary); position: relative; transform: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .log-in-menu__list a::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .log-in-menu__list a:hover, .log-in-menu__list a:focus-visible { text-decoration: none; } .log-in-menu__list a:hover::before, .log-in-menu__list a:focus-visible::before { transform: scaleX(1); } .log-in-menu__list a:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .log-in-menu__list a:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .log-in-menu__list a { background-color: var(--button-background) !important; } .has-hover .log-in-menu__list a:hover::before, .log-in-menu__list a:focus-visible::before { transform: scaleX(1); } .log-in-menu__list > .menu-item { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); position: relative; } .log-in-menu__list-items { display: flex; flex-direction: column; gap: 2.3rem; height: auto; } @media (min-width: 1080px) { .log-in-menu__list-items { padding: 1.5rem; } } @media (max-width: 1079px) { .log-in-menu__list-items { width: 100%; margin-top: 0.2rem; gap: 2rem; max-height: calc(90vh - var(--height-header)); overflow-y: auto; padding: 2.5rem var(--gutter) 2.5rem 1.5rem; border-top: 1px solid var(--color-gray-800); } } .log-in-menu .js-modal-menu-close-btn { min-width: 45px; height: 45px; display: flex; align-items: center; flex-direction: column; align-self: flex-end; margin-top: 0.5rem; margin-right: 0.4rem; color: var(--color-text); font-size: var(--font-size-2xs); -webkit-appearance: none; appearance: none; background: transparent; padding: 0.3rem; border: 0; } .log-in-menu .js-modal-menu-close-btn::before { content: ""; width: 20px; height: 20px; position: relative; display: inline-block; margin-bottom: 0.1rem; background-size: 130%; background-position: center; background-image: url(icon-close-b.svg?v=0080e4f7cf680d4134e6); } .log-in-menu .js-modal-menu-close-btn:hover { cursor: pointer; background: var(--color-secondary); } .log-in-menu .js-modal-menu-close-btn:focus-visible { outline-offset: 2px; outline-color: var(--color-outline); } /*!**************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/logo/frontend.scss ***! \**************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .logo { position: relative; display: flex; justify-content: flex-start; align-items: normal; } .logo img { display: block; width: auto; max-height: 100%; object-fit: contain; max-width: 18rem; } @media (max-width: 479px) { .logo img { max-width: 40vw; } } .logo--header { height: 2.8125rem; } @media (min-width: 1080px) { .logo--header { height: 100%; } } .logo--footer { width: 125px; } @media (min-width: 1080px) { .logo--footer { width: 165px; } } /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/menu-toggle/frontend.scss ***! \*********************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .menu-toggle { cursor: pointer; position: relative; height: var(--height-header); min-width: var(--height-header); background-color: var(--color-primary); border: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: none; } .menu-toggle:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; } .menu-toggle:focus-visible { outline-width: 3px; outline-offset: -3px; outline-color: var(--color-blue-dark); } .menu-toggle__icon { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 1.5rem; aspect-ratio: 1; } .menu-toggle__icon span { top: 0; position: relative; width: 1.25rem; height: 2px; margin-bottom: 5px; background-color: var(--color-white); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); display: block; } .menu-toggle__icon span:last-child { margin-bottom: 0; } .has-open-mobile-menu .menu-toggle__icon span { opacity: 0; background-color: var(--color-blue-dark); } .has-open-mobile-menu .menu-toggle__icon span:first-child { transform: rotate(45deg); opacity: 1; top: 7px; } .has-open-mobile-menu .menu-toggle__icon span:last-child { transform: rotate(-45deg); opacity: 1; top: -7px; } .menu-toggle__label { display: block; font-size: 0.625rem; line-height: 1.5; color: var(--color-white); transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .menu-toggle__label__open { display: block; } .menu-toggle__label__close { display: none; } .has-open-mobile-menu .menu-toggle__label { color: var(--color-blue-dark); } .has-open-mobile-menu .menu-toggle__label__open { display: none; } .has-open-mobile-menu .menu-toggle__label__close { display: block; } .has-open-mobile-menu .menu-toggle { background-color: var(--color-white); } /*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/notification-banner/frontend.scss ***! \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .notification-bar { background-color: #76c; padding: 1rem 0; position: relative; padding-left: var(--gutter); padding-right: calc(var(--gutter) + 1.5rem); transition: ease-in-out 0.15s; z-index: 90; } .notification-bar:nth-child(odd) { background-color: #76c; } .notification-bar:nth-child(even) { background-color: #c02eaf; } @media (prefers-reduced-motion) { .notification-bar { transition: 0s; } } .is-open + .site-content .notification-bar { z-index: 5; } .notification-bar.is-animated { height: 0; opacity: 0; padding: 0; } .notification-bar.is-hidden { display: none; } .notification-bar__container { max-width: var(--align-default); margin-inline: auto; } .notification-bar__content { display: flex; gap: 0.75rem; justify-content: center; } .notification-bar__content > svg { width: 24px; height: 24px; min-width: 24px; } @media (max-width: 781px) { .notification-bar__content { align-items: center; justify-content: flex-start; } } .notification-bar__text { margin: 0; text-align: center; color: var(--color-white); font-size: var(--font-size-sm); } @media (max-width: 781px) { .notification-bar__text { text-align: left; font-size: var(--font-size-xs); } } .notification-bar__link { color: inherit; text-decoration: underline; } .notification-bar__link:focus-visible { outline-color: var(--color-white); } .notification-bar__close { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); display: flex; align-items: center; justify-content: center; background: none; -webkit-appearance: none; appearance: none; outline: none; border: 0; position: absolute; border-radius: var(--border-radius-sm); right: 1rem; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; padding: 0; } .notification-bar__close::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .notification-bar__close:hover, .notification-bar__close:focus-visible { text-decoration: none; } .notification-bar__close:hover::before, .notification-bar__close:focus-visible::before { transform: scaleX(1); } .notification-bar__close:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .notification-bar__close:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .notification-bar__close { background-color: var(--button-background) !important; } .notification-bar__close:hover { background: transparent; } .notification-bar__close:hover svg, .notification-bar__close:hover img { transform: scale(0.8); } .notification-bar__close:focus-visible { outline-color: var(--color-white); } .notification-bar__close svg, .notification-bar__close img { display: block; position: relative; filter: invert(1); width: 20px; height: 20px; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .site-notifications { position: fixed; left: 0; right: 0; z-index: 1; top: 0; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } @media (min-width: 1080px) { .headroom--not-top + main .site-notifications { --height-header: 80px; } } .headroom--top + main .site-notifications, .headroom--pinned + main .site-notifications { top: calc(var(--height-header-secondary) + var(--height-header)); } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/password-form/frontend.scss ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ /*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/post-card/frontend.scss ***! \*******************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .post-card { text-decoration: none; border-radius: var(--border-radius-sm); --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); background-color: var(--color-white); border-radius: 4px; border-color: var(--color-gray-700); border-style: solid; border-width: 1px; overflow: hidden; position: relative; width: 100%; } .post-card h3 { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: var(--underline-offset-sm); } .post-card:hover, .has-hover .post-card:hover { text-decoration: none; } .post-card:hover time, .post-card:hover ul > *, .has-hover .post-card:hover time, .has-hover .post-card:hover ul > * { text-decoration: none; } .post-card:hover h3, .has-hover .post-card:hover h3 { text-decoration: underline; text-decoration-color: currentcolor; } .post-card:hover img, .has-hover .post-card:hover img { transform: scale(1.05); } .post-card, .post-card__link { display: flex; flex-flow: column nowrap; min-height: 100%; } .post-card__image { overflow: hidden; padding-top: 56.25%; position: relative; width: 100%; } .post-card__image img { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; } .post-card__title { color: var(--color-heading); font-family: var(--font-family-sans-header); font-size: var(--font-size-h4); font-weight: var(--font-weight-bold); line-height: var(--line-height-h4); margin-bottom: 1.25rem; } .post-card__content { color: #000; display: flex; flex-flow: column nowrap; flex-grow: 1; justify-content: space-between; padding-bottom: 0.625rem; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1.25rem; } .post-card__footer { margin-top: auto; } .post-card__cta { margin-top: 1.25rem; margin-bottom: 0.625rem; display: block; } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/related-items/frontend.scss ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .related-items { max-width: var(--align-full); margin-left: auto; margin-right: auto; margin-left: calc(var(--gutter) * -1) !important; margin-right: calc(var(--gutter) * -1) !important; margin-top: var(--spacing-xl); margin-bottom: 0 !important; padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); } .related-items__container { padding-left: var(--gutter); padding-right: var(--gutter); max-width: var(--align-default); margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; width: 100%; max-width: var(--align-wide); margin-left: auto; margin-right: auto; position: relative; } .related-items__wrapper { width: 100%; position: relative; } @media (max-width: 781px) { .related-items__wrapper { width: calc(100% + var(--gutter)); } } .related-items__list { --gap: 1.5rem; gap: var(--gap); flex-wrap: nowrap; margin-left: auto; margin-right: auto; width: 100%; display: grid; align-items: start; grid-auto-flow: column; grid-template-columns: max-content; max-width: max-content; position: relative; -ms-overflow-style: none; scrollbar-width: none; } @media (max-width: 781px) { .related-items__list { padding-right: var(--gutter); } } .related-items__header { text-align: center; margin-bottom: 1.875rem; } .related-items__footer { display: flex; flex-wrap: wrap; column-gap: 2rem; align-items: center; justify-content: center; margin-top: 1.5rem; } .related-items__footer a { --button-background: transparent; --button-border: var(--color-button-outline); --button-text: var(--color-button-outline-text); padding-right: 3rem; } .related-items__footer a:hover { background: var(--button-background); --button-border: var(--color-button-outline-hover); --button-text: var(--color-button-outline-hover); } .related-items__footer a:disabled { --button-border: var(--color-grey-500); --button-text: var(--color-grey-500); } .related-items__footer a::after { content: ""; display: inline-block; position: absolute; background-image: url(icon-arrow-right.svg?v=1d2a94587b4e1ab546e3); background-position: center; background-repeat: no-repeat; height: 1em; width: 1em; right: 1.4em; top: 51%; transform: translateY(-50%); transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/search-modal/frontend.scss ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ /** * Required styles * * @see https://a11y-dialog.netlify.app/usage/styling */ .site-search-modal, .site-search-modal__overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .site-search-modal { z-index: 1000000; display: flex; } .site-search-modal[aria-hidden=true] { visibility: hidden; opacity: 0; transform: scale(0.8); } .site-search-modal__container { margin: auto; z-index: 1000000; position: relative; background-color: var(--color-primary); } body.has-search-open { overflow: hidden; } /** * Modal styles */ .site-search-modal { /* stylelint-disable-line no-duplicate-selectors */ --color-heading: var(--color-primary); --color-text: var(--color-black); --color-text-lead: var(--color-black); --color-accent: rgba(0, 0, 0, 0.5); --color-link: var(--color-primary); --color-link-hover: var(--color-primary-hover); --color-blockquote: var(--color-primary); --color-border: var(--color-gray-700); --color-button-default: var(--color-primary); --color-button-default-hover: var(--color-primary-hover); --color-button-default-text: var(--color-white); --color-button-outline: var(--color-primary); --color-button-outline-hover: var(--color-primary); --color-button-outline-text: var(--color-primary); --color-button-text: var(--color-blue-dark); --color-outline: var(--color-primary); color: var(--color-text); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; } .site-search-modal__overlay { background-color: var(--color-gray-900); } .site-search-modal__container { /* stylelint-disable-line no-duplicate-selectors */ width: 100%; min-height: 100%; position: relative; padding-top: 1.75rem; padding-bottom: 1.75rem; } @media (min-width: 1080px) { .site-search-modal__container { padding-top: 4rem; padding-bottom: 4rem; } } @media (min-width: 1280px) { .site-search-modal__container { padding-top: 6rem; padding-bottom: 6rem; } } .site-search-modal__container-inner { padding-left: var(--gutter); padding-right: var(--gutter); max-width: var(--align-default); margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; width: 100%; position: relative; } .site-search-modal__close { background: none; border: 0; border-radius: 0; color: inherit; font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-user-select: none; user-select: none; cursor: pointer; width: 16px; height: 16px; position: absolute; top: 0; right: var(--gutter); background-image: url("data:image/svg+xml,%3Csvg viewBox=%270 0 32 32%27 width=%2732%27 height=%2732%27 fill=%27%23fff%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M.086 1.5L1.5.086l29.608 29.607-1.415 1.415z%27/%3E%3Cpath d=%27M29.693.086L31.108 1.5 1.5 31.108.086 29.693z%27/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; display: block; } @media (min-width: 480px) { .site-search-modal__close { width: 32px; height: 32px; } } .site-search-modal__close:focus-visible { outline: 2px var(--color-white) solid; outline-offset: 4px; } .site-search-modal.is-open { visibility: visible; opacity: 1; transform: scale(1); } .site-search-field { position: relative; } .site-search-field__label { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .site-search-field__input { -webkit-appearance: none; appearance: none; color: var(--color-white); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); background-color: transparent; padding: 1rem 0.125rem; margin-top: 1rem; border: none; width: 100%; max-width: 100%; border-radius: 4px; border-bottom: solid 1px rgba(255, 255, 255, 0.3); } .site-search-field__input::placeholder { opacity: 0.3; color: var(--color-white); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); vertical-align: baseline; } .site-search-field__input::-webkit-search-cancel-button { -webkit-appearance: none; } .site-search-field__input:focus-visible, .site-search-field__input:active { outline-offset: 3px; outline: 2px solid var(--color-white); } .site-search-field__title { color: var(--color-white); font-size: var(--font-size-h4); margin-bottom: 0.75rem; } .site-search-results { position: relative; margin-top: 1.75rem; } @media (min-width: 480px) { .site-search-results { margin-top: 2.5rem; } } @media (min-width: 782px) { .site-search-results { margin-top: 3.5rem; } } .site-search-results__loader { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: none; } .is-loading .site-search-results__loader { display: block; } .site-search-results__loader .spinner { border-top-color: rgba(255, 255, 255, 0.2); border-right-color: rgba(255, 255, 255, 0.2); border-bottom-color: rgba(255, 255, 255, 0.2); border-left-color: #fff; } .site-search-results__items { position: relative; display: flex; flex-flow: column nowrap; row-gap: 1rem; } .site-search-results__item { animation-name: searchResultEntrance; animation-duration: 0.25s; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-fill-mode: forwards; opacity: 0; display: flex; width: 100%; } .site-search-results__item:nth-child(1) { animation-delay: 0.075s; } .site-search-results__item:nth-child(2) { animation-delay: 0.15s; } .site-search-results__item:nth-child(3) { animation-delay: 0.225s; } .site-search-results__item:nth-child(4) { animation-delay: 0.3s; } .site-search-results__item:nth-child(5) { animation-delay: 0.375s; } .site-search-results__item:nth-child(6) { animation-delay: 0.45s; } .site-search-results__item:nth-child(7) { animation-delay: 0.525s; } .site-search-results__item:nth-child(8) { animation-delay: 0.6s; } .site-search-results__item:nth-child(9) { animation-delay: 0.675s; } .site-search-results__item:nth-child(10) { animation-delay: 0.75s; } .site-search-results__item:nth-child(11) { animation-delay: 0.825s; } .site-search-results__item:nth-child(12) { animation-delay: 0.9s; } .site-search-results__error { text-align: center; margin-left: auto; margin-right: auto; margin-top: 4rem; color: var(--color-white); } .search-result { width: 100%; height: 100%; position: relative; padding: 1em 0; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .search-result__link { display: block; height: 100%; color: var(--color-white); text-decoration: none; transition: none; } .search-result__link:hover, .search-result__link:focus-visible { text-decoration: none; } .search-result__link:hover .search-result__more::before, .search-result__link:focus-visible .search-result__more::before { transform: scaleX(1); } .search-result__link:hover .search-result__more::after, .search-result__link:focus-visible .search-result__more::after { transform: translateX(4px); } .search-result__link:focus-visible { outline: 3px var(--color-white) solid; outline-offset: 5px; } .search-result__label { font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: 1px; font-size: var(--font-size-xs); margin-bottom: 0.25rem; color: inherit; } .search-result__title { color: var(--color-white); margin-bottom: 1rem; } .search-result__excerpt { font-size: var(--font-size-md); color: var(--color-white); margin-bottom: 0.75rem; word-wrap: break-word; } @media (max-width: 781px) { .search-result__excerpt { font-size: var(--font-size-sm); } } .search-result__more { font-size: var(--font-size-md); color: var(--color-white); font-weight: var(--font-weight-bold); display: inline-block; position: relative; } @media (max-width: 781px) { .search-result__more { font-size: var(--font-size-sm); } } .search-result__more::before { content: ""; position: absolute; height: 1px; width: calc(100% + 3px); bottom: -0.07rem; left: -2px; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .search-result__more::after { content: ""; width: 20px; height: 20px; position: relative; display: inline-block; vertical-align: middle; margin-left: 0.4rem; background-size: cover; background-position: center; background-image: url(icon-arrow-right2.svg?v=98d3a6e3825059e82dd6); transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1); } @media (max-width: 781px) { .search-result__more::after { width: 18px; height: 18px; } } @keyframes searchResultEntrance { 0% { opacity: 0; transform: translate3d(0, 0.75rem, 0); } 100% { opacity: 1; transform: none; } } .search-toggle { background: none; border: 0; border-radius: 0; color: inherit; font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-user-select: none; user-select: none; cursor: pointer; position: relative; width: auto; font-size: var(--font-size-sm); color: var(--color-white); } .search-toggle:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; } .search-toggle svg { display: none; width: 1rem; height: 1rem; margin-right: 0.5rem; } .search-toggle svg path { fill: var(--color-white); } .search-toggle:focus-visible { outline: solid 2px var(--color-white); outline-offset: -2px; } @media (max-width: 1079px) { .search-toggle { padding-block: 0.5rem; font-size: var(--font-size-md); } .search-toggle:hover { text-decoration: underline; } } @media (min-width: 1080px) { .search-toggle { display: flex; align-items: center; justify-content: center; padding: 0 0.5rem; height: var(--height-header-secondary); } .search-toggle svg { display: block; } .search-toggle::before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: var(--menu-item-px); right: var(--menu-item-px); background-color: var(--color-white); transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .search-toggle:hover::before { transform: scaleX(1); } } .navigation-bar__extra-mobile-button .search-toggle { color: var(--color-blue-dark); font-size: var(--font-size-2xs); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 0.1rem; padding: 1px 1rem; height: var(--height-header); -webkit-user-select: initial; user-select: initial; text-decoration: none; } .navigation-bar__extra-mobile-button .search-toggle:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; } .navigation-bar__extra-mobile-button .search-toggle svg { width: 1.25rem; height: 1.25rem; display: block; margin: 0; margin-bottom: 0.1rem; overflow: visible; } .navigation-bar__extra-mobile-button .search-toggle svg path { fill: var(--color-blue-dark); stroke-width: 1; stroke: var(--color-blue-dark); } .navigation-bar__extra-mobile-button .search-toggle::before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: var(--color-blue-dark); transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .navigation-bar__extra-mobile-button .search-toggle:hover::before { transform: scaleX(1); } .navigation-bar__extra-mobile-button .search-toggle:focus-visible { outline: solid 3px var(--color-blue-dark); outline-offset: -3px; } /*!************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/search-results/frontend.scss ***! \************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .site-search-results { position: relative; margin-top: 1.75rem; } @media (min-width: 480px) { .site-search-results { margin-top: 2.5rem; } } @media (min-width: 782px) { .site-search-results { margin-top: 3.5rem; } } .site-search-results__loader { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: none; } .is-loading .site-search-results__loader { display: block; } .site-search-results__loader .spinner { border-top-color: rgba(255, 255, 255, 0.2); border-right-color: rgba(255, 255, 255, 0.2); border-bottom-color: rgba(255, 255, 255, 0.2); border-left-color: #fff; } .site-search-results__items { position: relative; display: flex; flex-flow: column nowrap; row-gap: 1rem; } .site-search-results__item { animation-name: searchResultEntrance; animation-duration: 0.25s; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); animation-fill-mode: forwards; opacity: 0; display: flex; width: 100%; } .site-search-results__item:nth-child(1) { animation-delay: 0.075s; } .site-search-results__item:nth-child(2) { animation-delay: 0.15s; } .site-search-results__item:nth-child(3) { animation-delay: 0.225s; } .site-search-results__item:nth-child(4) { animation-delay: 0.3s; } .site-search-results__item:nth-child(5) { animation-delay: 0.375s; } .site-search-results__item:nth-child(6) { animation-delay: 0.45s; } .site-search-results__item:nth-child(7) { animation-delay: 0.525s; } .site-search-results__item:nth-child(8) { animation-delay: 0.6s; } .site-search-results__item:nth-child(9) { animation-delay: 0.675s; } .site-search-results__item:nth-child(10) { animation-delay: 0.75s; } .site-search-results__item:nth-child(11) { animation-delay: 0.825s; } .site-search-results__item:nth-child(12) { animation-delay: 0.9s; } .site-search-results__error { text-align: center; margin-left: auto; margin-right: auto; margin-top: 4rem; color: var(--color-white); } .site-search-result { width: 100%; height: 100%; position: relative; padding: 1em 0; transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .site-search-result__link { display: block; height: 100%; color: var(--color-text); text-decoration: none; transition: none; } .site-search-result__link:hover, .site-search-result__link:focus-visible { text-decoration: none; } .site-search-result__link:hover .site-search-result__more::before, .site-search-result__link:focus-visible .site-search-result__more::before { transform: scaleX(1); } .site-search-result__link:hover .site-search-result__more::after, .site-search-result__link:focus-visible .site-search-result__more::after { transform: translateX(4px); } .site-search-result__link:focus-visible { outline: 3px var(--color-white) solid; outline-offset: 5px; } .site-search-result__label { font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: 1px; font-size: var(--font-size-xs); margin-bottom: 0.25rem; color: inherit; } .site-search-result__title { color: var(--color-text); margin-bottom: 1rem; } .site-search-result__excerpt { font-size: var(--font-size-md); color: var(--color-text); margin-bottom: 0.75rem; word-wrap: break-word; } @media (max-width: 781px) { .site-search-result__excerpt { font-size: var(--font-size-sm); } } .site-search-result__more { font-size: var(--font-size-md); color: var(--color-text); font-weight: var(--font-weight-bold); display: inline-block; position: relative; } @media (max-width: 781px) { .site-search-result__more { font-size: var(--font-size-sm); } } .site-search-result__more::before { content: ""; position: absolute; height: 1px; width: calc(100% + 3px); bottom: -0.07rem; left: -2px; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .site-search-result__more::after { content: ""; width: 20px; height: 20px; position: relative; display: inline-block; vertical-align: middle; margin-left: 0.4rem; background-size: cover; background-position: center; background-image: url(icon-arrow-right--black.svg?v=71d3f74f19020df511be); transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1); } @media (max-width: 781px) { .site-search-result__more::after { width: 18px; height: 18px; } } .ytk-search-highlight { background-color: var(--color-green-semi-light) !important; color: var(--color-text) !important; scroll-margin-top: var(--spacing-sm); } .search-highlight-toggle { --button-padding: 1rem 2rem; --button-background: var(--color-button-default); --button-hover: var(--color-button-default-hover); --button-text: var(--color-button-default-text); --button-border: transparent; --border-radius: 999px; background-color: var(--button-background); border-color: var(--button-border); color: var(--button-text) !important; padding: var(--button-padding); position: relative; border-radius: var(--border-radius); border-style: solid; border-width: 2px; cursor: pointer; display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-extrabold); line-height: 1.25; text-decoration: none; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); border: 0; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); position: fixed; line-height: 1; margin: 0 auto; bottom: 1em; left: 50%; transform: translateX(-50%); border-radius: 5em; z-index: 150; animation: search-highlight-toggle-enter 0.25s ease-out; cursor: pointer; } .search-highlight-toggle::before { content: ""; position: absolute; height: 1px; bottom: 0.875rem; left: 2rem; right: 2rem; background-color: currentcolor; transform: scaleX(0); transform-origin: left bottom; transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1); } .search-highlight-toggle:hover, .search-highlight-toggle:focus-visible { text-decoration: none; } .search-highlight-toggle:hover::before, .search-highlight-toggle:focus-visible::before { transform: scaleX(1); } .search-highlight-toggle:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; outline-offset: 1px; } .search-highlight-toggle:disabled { background: var(--color-grey-500); } .block-editor-block-preview__content .search-highlight-toggle { background-color: var(--button-background) !important; } .search-highlight-toggle--closing { animation: search-highlight-toggle-exit 0.25s ease-out; animation-fill-mode: forwards; } @keyframes search-highlight-toggle-enter { 0% { opacity: 0; transform: translateX(-50%) translateY(100%); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes search-highlight-toggle-exit { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(100%); } } @keyframes searchResultEntrance { 0% { opacity: 0; transform: translate3d(0, 0.75rem, 0); } 100% { opacity: 1; transform: none; } } /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/share-links/frontend.scss ***! \*********************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .share-links { position: relative; } .share-links__list { list-style: none; margin: 0; padding: 0; text-indent: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .share-links__list li { margin: 0; line-height: 0; } .share-links__link { display: block; padding-top: 0.625rem; padding-right: 0.625rem; padding-bottom: 0.625rem; padding-left: 0.625rem; width: 2.125rem; height: 2.125rem; background-color: var(--color-link); color: var(--color-white); border-radius: 50%; } .share-links__link svg { width: 0.875rem; height: 0.875rem; } .share-links__link svg path, .share-links__link svg circle { fill: currentcolor; } .share-links__link:hover { filter: saturate(1.1) brightness(1.1); } /*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/social-media-links/frontend.scss ***! \****************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .social-media-links { margin: 1.5rem 0; position: relative; font-size: 0; } @media (min-width: 782px) { .social-media-links { margin: 2rem 0; } } .social-media-links__title { display: inline-block; padding-right: 0.3em; } .social-media-links__list { display: flex; list-style-type: none; padding: 0; margin: 0 -4px; } @media (min-width: 782px) { .social-media-links__list { justify-content: flex-end; } } .social-media-links__list li { display: inline-block; margin: 0 4px; } .social-media-links__list li a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background-color: var(--color-green); border-radius: 100%; } .social-media-links__list li a:focus-visible { outline-color: var(--color-outline); outline-width: 4px; outline-style: solid; } .social-media-links__list li a svg { width: 16px; height: 16px; } .social-media-links__list li a svg path, .social-media-links__list li a svg circle { fill: var(--color-white); } .social-media-links__list li a:hover { filter: saturate(1.1) brightness(1.1); } /*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/spinner/frontend.scss ***! \*****************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .spinner, .spinner::after { border-radius: 50%; width: 32px; height: 32px; } .spinner { margin: 15px auto; font-size: 10px; position: relative; text-indent: -9999em; transform: translateZ(0); animation: spinner 0.75s infinite linear; border-top: 2px solid rgba(0, 0, 0, 0.2); border-right: 2px solid rgba(0, 0, 0, 0.2); border-bottom: 2px solid rgba(0, 0, 0, 0.2); border-left: 2px solid #000; } @media (prefers-reduced-motion) { .spinner { animation: none !important; /* For the first time it feels right to use important */ animation-duration: 1ms !important; } } @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/svg/frontend.scss ***! \*************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ /*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./modules/term-list/frontend.scss ***! \*******************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Dependencies -------------------------------------------------------------- */ /** * Legacy device reference: * xs phone * sm tablet-portrait * md tablet-landscape * lg laptop * xl desktop * 2xl large-desktop */ /** * Takes either a straight css value or a media breakpoint * map and assigns those to the properties. * * Examples: * @include mq-prop(margin-left, (xs: 1.875rem, lg: 6.25rem)); * @include mq-prop((padding-top, padding-bottom), 3.125rem); */ /* -------------------------------------------------------------- # Spacing -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Easing functions -------------------------------------------------------------- */ /* -------------------------------------------------------------- # Transitions -------------------------------------------------------------- */ /** * This is a dirty, but relatively working IE 11 * support for grid layouts. Use with caution though * and don't expect 1:1 results. */ /** * Remove animations if this media query is used in element * In the future we could remove animation.scss file from webpack and create it as a standalone, then call it like this: * * Then it will never be downloaded if user has the setting on */ /* -------------------------------------------------------------- # Module styles -------------------------------------------------------------- */ .term-list { position: relative; font-size: 0; padding: 0; opacity: 0.5; display: flex; flex-wrap: wrap; gap: calc(var(--font-size-2xs) * 2); list-style-type: none; } .term-list__item { font-size: var(--font-size-2xs); position: relative; text-transform: uppercase; } .term-list__item:not(:last-child)::after { content: "|"; position: absolute; right: calc(var(--font-size-2xs) * -1); } .term-list__link { color: inherit; } /*# sourceMappingURL=frontend.css.map?v=04922f431fde3fbb5375*/