/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* stylelint-disable declaration-property-unit-allowed-list, a11y/line-height-is-vertical-rhythmed, a11y/no-display-none */ /* 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; } /* 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: .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; height: 0; overflow: visible; } /** * 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; font-size: 1em; } /* 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: 0; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /** * 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; font-size: 1em; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /* 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; font-size: 100%; line-height: 1.15; margin: 0; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; -moz-appearance: button; 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: .35em .75em .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; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } /** * 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; padding: 0; } /** * 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; outline-offset: -2px; } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* 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; } /* stylelint-enable declaration-property-unit-allowed-list */ /** * Convert hex color to RGB color format */ /* stylelint-disable declaration-property-unit-allowed-list */ /* stylelint-enable declaration-property-unit-allowed-list */ :root { --color-black: #222; --color-black-rock: #2b303c; --color-blue-chalk: #ece6f2; --color-east-bay: #545773; --color-pattens-blue: #eaf1f8; --color-science-blue: #0049d1; --color-valhalla: #2a2d3e; --color-white: #fff; --color-heading: var(--color-main); --color-main: var(--color-valhalla); --color-paragraph: var(--color-east-bay); --color-link-border-bottom: var(--color-science-blue); --color-link-border-focus: var(--color-black); --color-link-comment: #555; --color-link-comment-time-anchor: var(--color-east-bay); --color-link-edit-background-hover: var(--color-pattens-blue); --color-link-edit-border: var(--color-pattens-blue); --color-link-edit-text: darken(#eaf1f8, 20%); --color-link-edit-text-hover: var(--color-east-bay); --color-link-text: var(--color-science-blue); --color-link-text-focus: var(--color-black); --color-link-text-hover: var(--color-white); --color-link-background-hover: var(--color-link-text); --color-background-code-block: var(--color-black-rock); --color-background-code-inline: #f9f2f4; --color-background-default: #f0f0f0; --color-background-shade: #03061b; --color-background-tag: var(--color-pattens-blue); --color-blockquote: var(--color-science-blue); --color-comment-text: var(--color-east-bay); --color-comment-author-text: var(--color-east-bay); --color-tag-border: rgba(6, 22, 41, .1); --color-tag-border-hover: rgba(6, 22, 41, .4); --color-tag-text: var(--color-black); --color-category-border: #cdcfd4; --color-category-text: var(--color-black); --color-caption: #5c5c6a; --color-code-block: #c7254e; --color-code-text: #f5f5f5; --color-error: #e1b3b2; --color-kbd-border: #ccc; --color-kbd-background: var(--color-pattens-blue); --color-outline-overlay-items: #ff848a; --color-pagination-text: var(--color-valhalla); --color-pagination-background-hover: var(--color-valhalla); --color-pagination-border-hover: var(--color-valhalla); --color-pagination-text-hover: var(--color-white); --color-pagination-background-current: var(--color-valhalla); --color-pagination-border-current: var(--color-valhalla); --color-pagination-text-current: var(--color-white); --color-success: #8ed185; --color-top-arrow-dark: var(--color-black); --color-top-arrow-light: var(--color-white); --color-warning: #f4aa71; } :root { --padding-container-horizontal: 2rem; --padding-container-vertical: 6.4rem; --padding-site-header-vertical: 2rem; --padding-block: 8rem; --margin-between-text-elements: 4rem; --margin-wp-block-image: 4rem; --margin-between-paragraphs: 2.7rem; } @media (max-width: 1350px) { :root { --padding-container-horizontal: 2rem; } } @media (max-width: 960px) { :root { --padding-site-header-vertical: 2rem; } } @media (max-width: 770px) { :root { --padding-container-vertical: 5rem; } } @media (max-width: 600px) { :root { --padding-block: 6rem; } } @media (max-width: 480px) { :root { --padding-container-vertical: 4rem; } } @font-face { font-display: auto; font-family: "Inter"; font-style: normal; font-weight: 400; src: url("../../fonts/Inter-Regular.woff") format("woff"), url("../../fonts/Inter-Regular.woff2") format("woff2"), url("../../fonts/Inter-Regular.ttf") format("truetype"); } @font-face { font-display: auto; font-family: "Inter"; font-style: italic; font-weight: 400; src: url("../../fonts/Inter-Italic.woff") format("woff"), url("../../fonts/Inter-Italic.woff2") format("woff2"), url("../../fonts/Inter-Italic.ttf") format("truetype"); } @font-face { font-display: auto; font-family: "Inter"; font-style: normal; font-weight: 700; src: url("../../fonts/Inter-Bold.woff") format("woff"), url("../../fonts/Inter-Bold.woff2") format("woff2"), url("../../fonts/Inter-Bold.ttf") format("truetype"); } :root { --font-size-h1: 51px; --font-size-h2: 38px; --font-size-h3: 28px; --font-size-h4: 21px; --font-size-h5: 17px; --font-size-h6: 14px; --font-size-14: 14px; --font-size-16: 16px; --font-size-17: 17px; --font-size-18: 18px; --font-size-20: 20px; --font-size-22: 22px; --font-size-default: var(--font-size-17); --font-size-paragraphs: var(--font-size-18); --font-size-nav-toggle-label: 15px; --font-size-captions: 15px; --line-height-headings: 1.5; --line-height-core-heading: 1.23; --line-height-paragraphs: 1.7; --line-height-paragraphs-blog: 1.77; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-paragraphs: var(--font-weight-regular); --font-weight-headings: var(--font-weight-bold); } @media (max-width: 480px) { :root { --font-size-h1: 32px; --font-size-h2: 24px; --font-size-h3: 21px; --font-size-h4: 18px; --font-size-h5: 14px; --font-size-h6: 12px; } } @media (max-width: 420px) { :root { --font-size-16: 14px; } } @media (max-width: 480px) { :root { --font-size-paragraphs: 16px; --font-size-default: 16px; } } @media (max-width: 420px) { :root { --font-size-nav-toggle-label: 13px; } } .screen-reader-text, .gform_body .gform_validation_container { 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; /* stylelint-disable declaration-no-important */ word-wrap: normal !important; /* stylelint-enable declaration-no-important */ } .screen-reader-text.skip-link, .gform_body .skip-link.gform_validation_container { margin: 5px; } .screen-reader-text.skip-link:focus, .gform_body .skip-link.gform_validation_container:focus { color: var(--color-black); } .screen-reader-text:focus, .gform_body .gform_validation_container:focus { background-color: var(--color-white); border-radius: 0; box-shadow: 0 0 2px 2px rgba(22, 22, 22, 0.6); clip: auto; -webkit-clip-path: none; clip-path: none; display: block; font-size: 1.7rem; font-weight: var(--font-weight-bold); height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* stylelint-disable a11y/no-outline-none */ [data-whatinput="mouse"] *:focus, [data-whatinput="touch"] *:focus { outline: none; } /* stylelint-enable a11y/no-outline-none */ [data-whatinput="keyboard"] a:focus, [data-whatinput="keyboard"] input:focus, [data-whatinput="keyboard"] button:focus, [data-whatinput="keyboard"] select:focus, [data-whatinput="keyboard"] textarea:focus, [data-whatinput="keyboard"] div[tabindex]:focus { opacity: 1; } [data-whatinput="keyboard"] .global-link { transition: none; } [data-whatinput="keyboard"] a.global-link:focus { outline-color: var(--color-outline-overlay-items); outline-offset: -1px; outline-style: solid; outline-width: 4px; } a.is-external-link { align-items: center; display: inline-flex; justify-content: space-between; } a.is-external-link::after { background-image: url("../../svg/external-link.svg"); background-position: right center; background-repeat: no-repeat; background-size: 14px 14px; content: ''; display: inline-flex; height: 14px; margin-left: 5px; margin-right: 2px; position: relative; right: 0; top: 0; transition: all .18s ease-in-out; width: 14px; } /* stylelint-disable a11y/no-display-none */ a.is-external-link.global-link::after, a.is-external-link.no-external-link-indicator::after { display: none; } /* stylelint-enable a11y/no-display-none */ :root { --border-radius-sub-menu: 0; --box-shadow-navigation-static: 0 0 10px rgba(84, 87, 115, .1); --dropdown-toggle-size: 12px; --gap-dropdown: 1rem; --padding-main-level-vertical: .6rem; --padding-main-level-horizontal: 2rem; --padding-sub-menu-vertical: .6rem; --padding-sub-menu-horizontal: 1.5rem; --width-sub-menu: 22rem; --color-background-nav-desktop: var(--color-white); --color-background-sub-menu: var(--color-white); --color-border-sub-menu: rgba(41, 44, 61, .05); --color-dropdown-toggle: var(--color-valhalla); --color-sub-menu: var(--color-valhalla); --color-hover-main-level: var(--color-white); --color-hover-sub-menu: var(--color-valhalla); --color-main-level: var(--color-white); --color-current: var(--color-main); --font-size-main-level: 17px; --font-size-sub-menu: 16px; --font-weight-main-level: var(--font-weight-bold); --font-weight-sub-menu: var(--font-weight-regular); } .site-header ul { list-style: none; } @media only screen and (min-width: 960px) { .nav-container { background-color: transparent; position: absolute; width: 100%; } } @media only screen and (min-width: 960px) and (max-width: 960px) { ul li:focus > ul, ul li:hover > ul { display: block; } } @media only screen and (min-width: 960px) and (-ms-high-contrast: active), only screen and (min-width: 960px) and (-ms-high-contrast: none) { ul li:focus > ul, ul li:hover > ul { display: block; } } @media only screen and (min-width: 960px) { /* stylelint-disable a11y/no-display-none */ .nav-toggle { display: none; } /* stylelint-enable */ .nav-primary { padding-bottom: 0; padding-top: 0; } .menu-items { align-items: center; background-color: transparent; display: flex; margin: 0; padding: 0; position: relative; } .menu-item { margin: 0; position: relative; } .menu-item > a { align-items: center; color: var(--color-main-level); display: inline-flex; font-size: var(--font-size-main-level); font-weight: var(--font-weight-main-level); padding-bottom: var(--padding-main-level-vertical); padding-left: var(--padding-main-level-horizontal); padding-right: var(--padding-main-level-horizontal); padding-top: var(--padding-main-level-vertical); } .menu-item .sub-menu a { align-items: center; color: var(--color-sub-menu); display: flex; font-size: var(--font-size-sub-menu); font-weight: var(--font-weight-sub-menu); line-height: 1.5; padding-bottom: var(--padding-sub-menu-vertical); padding-left: var(--padding-sub-menu-horizontal); padding-right: var(--padding-sub-menu-horizontal); padding-top: var(--padding-sub-menu-vertical); } .menu-item.current-menu-parent > a, .menu-item.current-menu-item > a { color: var(--color-current); } .menu-item.menu-item-has-children a { padding-bottom: 0; padding-right: 1.5rem; padding-top: 0; transition: padding 0.2s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.2s cubic-bezier(0.19, 1, 0.22, 1); } .menu-item > a:hover, .menu-item > a:focus { color: var(--color-hover-main-level); } .menu-item .sub-menu a:hover, .menu-item .sub-menu a:focus { color: var(--color-hover-sub-menu); } /* stylelint-disable no-descending-specificity */ .sub-menu.toggled-on a, .sub-menu.toggled-on .sub-menu a, .menu-item.menu-item-has-children:hover .sub-menu a, .menu-item.menu-item-has-children:focus .sub-menu a { padding-bottom: var(--padding-sub-menu-vertical); padding-top: var(--padding-sub-menu-vertical); } /* stylelint-enable */ .nav-primary > ul:first-of-type > .menu-item-has-children:focus::before, .nav-primary > ul:first-of-type > .menu-item-has-children:hover::before { transform: scale(1); transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1); } .sub-menu { background-color: var(--color-background-sub-menu); border-bottom: 1px solid var(--color-border-sub-menu); border-bottom-left-radius: var(--border-radius-sub-menu); border-bottom-right-radius: var(--border-radius-sub-menu); border-left: 1px solid var(--color-border-sub-menu); border-right: 1px solid var(--color-border-sub-menu); border-top-left-radius: var(--border-radius-sub-menu); border-top-right-radius: var(--border-radius-sub-menu); box-shadow: 0 25px 20px -10px rgba(5, 4, 25, 0.05); left: 5%; margin-left: 0; margin-top: var(--gap-dropdown); opacity: 0; padding-bottom: .5rem; padding-left: 0; padding-top: .5rem; position: absolute; top: -9999px; transition: padding 0.2s cubic-bezier(0.19, 1, 0.22, 1); visibility: hidden; width: var(--width-sub-menu); z-index: 9; } .sub-menu .sub-menu { left: 100%; margin-left: 0; margin-top: -5px; top: 0; } .sub-menu li { float: none; padding: 0; width: var(--width-sub-menu); } .menu-item-has-children > .sub-menu.toggled-on, .menu-item-has-children:focus > .sub-menu, .menu-item-has-children:hover > .sub-menu { opacity: 1; top: 100%; transform: translateY(0%); visibility: visible; z-index: 1; } .menu-item-has-children .sub-menu.toggled-on .sub-menu, .menu-item-has-children .sub-menu .sub-menu.toggled-on, .menu-item-has-children:focus .sub-menu .sub-menu, .menu-item-has-children:hover .sub-menu .sub-menu { margin-top: -5px; top: 0; z-index: 10; } .menu-item.menu-item-has-children { align-items: center; display: flex; justify-content: space-between; margin-right: .8rem; position: relative; } .menu-item.menu-item-has-children::after { content: ''; display: block; height: var(--gap-dropdown); position: absolute; top: 100%; width: 100%; } .dropdown-toggle svg { height: var(--dropdown-toggle-size); width: var(--dropdown-toggle-size); transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1); } .dropdown-toggle.toggled-on svg { transform: rotateX(180deg); } .dropdown-toggle { align-items: center; background-color: transparent; border: 0; color: var(--color-dropdown-toggle); display: inline-flex; justify-content: center; padding: 0; } .sub-menu .dropdown-toggle { width: 3rem; } .sub-menu .dropdown-toggle svg { transform: rotate(-90deg) rotateX(0deg); } .sub-menu .dropdown-toggle.toggled-on svg { transform: rotate(-90deg) rotateX(180deg); } .menu-item.menu-item-has-children > .dropdown-toggle.toggled-on svg, .menu-item.menu-item-has-children:hover > .dropdown-toggle svg, .menu-item.menu-item-has-children:focus > .dropdown-toggle svg { transform: translateY(0%) rotate(180deg); } /* stylelint-disable selector-max-specificity, selector-max-class */ .menu-item.menu-item-has-children .menu-item.menu-item-has-children > .dropdown-toggle.toggled-on svg, .menu-item.menu-item-has-children .menu-item.menu-item-has-children:hover > .dropdown-toggle svg, .menu-item.menu-item-has-children .menu-item.menu-item-has-children:focus > .dropdown-toggle svg { transform: translateY(0%) rotate(90deg); } /* stylelint-enable */ /* stylelint-disable a11y/no-display-none */ .sub-menu .menu-item-has-children::after { display: none; } /* stylelint-enable */ .menu-item-has-children::before { /* stylelint-disable sh-waqar/declaration-use-variable */ border-color: transparent transparent var(--color-white); border-style: solid; border-width: 0 5px 5px; /* stylelint-enable */ bottom: -10px; content: ''; display: block; height: 0; left: 50%; margin-left: -20px; position: absolute; transform: scale(0); transform-origin: center bottom; transition: none; width: 0; } } :root { --font-size-main-level-mobile: 17px; --font-size-sub-menu-mobile: 17px; --font-weight-main-level-mobile: 600; --font-weight-sub-menu-mobile: 600; --dropdown-toggle-size-mobile: 12px; --height-navigation-mobile: 72px; --margin-left-sub-menu: 2rem; --padding-sub-menu-vertical-mobile: 1.2rem; --padding-sub-menu-horizontal-mobile: 2.5rem; --color-active-main-level-mobile: var(--color-white); --color-background-nav-mobile-header: var(--color-main); --color-background-nav-mobile-layer: var(--color-main); --color-current-mobile: var(--color-white); --color-dropdown-toggle-mobile: var(--color-white); --color-hamburger-active: var(--color-white); --color-hamburger: var(--color-white); --color-main-level-mobile: var(--color-white); --color-separator-nav-mobile: rgba(255, 255, 255, .1); --color-sub-menu-mobile: rgba(255, 255, 255, .8); } /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 4rem 1.5rem; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 0.8; } .hamburger.is-active:hover { opacity: 0.8; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: var(--color-hamburger); } .hamburger-box { width: 3rem; height: 1.6rem; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -0.1rem; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 3rem; height: 0.2rem; background-color: var(--color-hamburger); border-radius: 0; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -0.7rem; } .hamburger-inner::after { bottom: -0.7rem; } /* * 3DX */ .hamburger--3dx .hamburger-box { perspective: 6rem; } .hamburger--3dx .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx.is-active .hamburger-inner { background-color: transparent !important; transform: rotateY(180deg); } .hamburger--3dx.is-active .hamburger-inner::before { transform: translate3d(0, 0.7rem, 0) rotate(45deg); } .hamburger--3dx.is-active .hamburger-inner::after { transform: translate3d(0, -0.7rem, 0) rotate(-45deg); } /* * 3DX Reverse */ .hamburger--3dx-r .hamburger-box { perspective: 6rem; } .hamburger--3dx-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dx-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateY(-180deg); } .hamburger--3dx-r.is-active .hamburger-inner::before { transform: translate3d(0, 0.7rem, 0) rotate(45deg); } .hamburger--3dx-r.is-active .hamburger-inner::after { transform: translate3d(0, -0.7rem, 0) rotate(-45deg); } /* * 3DY */ .hamburger--3dy .hamburger-box { perspective: 6rem; } .hamburger--3dy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(-180deg); } .hamburger--3dy.is-active .hamburger-inner::before { transform: translate3d(0, 0.7rem, 0) rotate(45deg); } .hamburger--3dy.is-active .hamburger-inner::after { transform: translate3d(0, -0.7rem, 0) rotate(-45deg); } /* * 3DY Reverse */ .hamburger--3dy-r .hamburger-box { perspective: 6rem; } .hamburger--3dy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dy-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg); } .hamburger--3dy-r.is-active .hamburger-inner::before { transform: translate3d(0, 0.7rem, 0) rotate(45deg); } .hamburger--3dy-r.is-active .hamburger-inner::after { transform: translate3d(0, -0.7rem, 0) rotate(-45deg); } /* * 3DXY */ .hamburger--3dxy .hamburger-box { perspective: 6rem; } .hamburger--3dxy .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg) rotateY(180deg); } .hamburger--3dxy.is-active .hamburger-inner::before { transform: translate3d(0, 0.7rem, 0) rotate(45deg); } .hamburger--3dxy.is-active .hamburger-inner::after { transform: translate3d(0, -0.7rem, 0) rotate(-45deg); } /* * 3DXY Reverse */ .hamburger--3dxy-r .hamburger-box { perspective: 6rem; } .hamburger--3dxy-r .hamburger-inner { transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after { transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); } .hamburger--3dxy-r.is-active .hamburger-inner { background-color: transparent !important; transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); } .hamburger--3dxy-r.is-active .hamburger-inner::before { transform: translate3d(0, 0.7rem, 0) rotate(45deg); } .hamburger--3dxy-r.is-active .hamburger-inner::after { transform: translate3d(0, -0.7rem, 0) rotate(-45deg); } /* * Arrow */ .hamburger--arrow.is-active .hamburger-inner::before { transform: translate3d(-0.6rem, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrow.is-active .hamburger-inner::after { transform: translate3d(-0.6rem, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Arrow Right */ .hamburger--arrow-r.is-active .hamburger-inner::before { transform: translate3d(0.6rem, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrow-r.is-active .hamburger-inner::after { transform: translate3d(0.6rem, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Alt */ .hamburger--arrowalt .hamburger-inner::before { transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt .hamburger-inner::after { transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt.is-active .hamburger-inner::before { top: 0; transform: translate3d(-0.6rem, -0.75rem, 0) rotate(-45deg) scale(0.7, 1); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt.is-active .hamburger-inner::after { bottom: 0; transform: translate3d(-0.6rem, 0.75rem, 0) rotate(45deg) scale(0.7, 1); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Alt Right */ .hamburger--arrowalt-r .hamburger-inner::before { transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r .hamburger-inner::after { transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); } .hamburger--arrowalt-r.is-active .hamburger-inner::before { top: 0; transform: translate3d(0.6rem, -0.75rem, 0) rotate(45deg) scale(0.7, 1); transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } .hamburger--arrowalt-r.is-active .hamburger-inner::after { bottom: 0; transform: translate3d(0.6rem, 0.75rem, 0) rotate(-45deg) scale(0.7, 1); transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); } /* * Arrow Turn */ .hamburger--arrowturn.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn.is-active .hamburger-inner::before { transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); } .hamburger--arrowturn.is-active .hamburger-inner::after { transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); } /* * Arrow Turn Right */ .hamburger--arrowturn-r.is-active .hamburger-inner { transform: rotate(-180deg); } .hamburger--arrowturn-r.is-active .hamburger-inner::before { transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); } .hamburger--arrowturn-r.is-active .hamburger-inner::after { transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); } /* * Boring */ .hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after { transition-property: none; } .hamburger--boring.is-active .hamburger-inner { transform: rotate(45deg); } .hamburger--boring.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--boring.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } /* * Collapse */ .hamburger--collapse .hamburger-inner, .hamburger .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse .hamburger-inner::after, .hamburger .hamburger-inner::after { top: -1.4rem; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse .hamburger-inner::before, .hamburger .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse.is-active .hamburger-inner, .is-active.hamburger .hamburger-inner { transform: translate3d(0, -0.7rem, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse.is-active .hamburger-inner::after, .is-active.hamburger .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse.is-active .hamburger-inner::before, .is-active.hamburger .hamburger-inner::before { top: 0; transform: rotate(-90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Collapse Reverse */ .hamburger--collapse-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r .hamburger-inner::after { top: -1.4rem; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; } .hamburger--collapse-r .hamburger-inner::before { transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--collapse-r.is-active .hamburger-inner { transform: translate3d(0, -0.7rem, 0) rotate(45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--collapse-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; } .hamburger--collapse-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Elastic */ .hamburger--elastic .hamburger-inner { top: 0.1rem; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic .hamburger-inner::before { top: 0.7rem; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic .hamburger-inner::after { top: 1.4rem; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic.is-active .hamburger-inner { transform: translate3d(0, 0.7rem, 0) rotate(135deg); transition-delay: 0.075s; } .hamburger--elastic.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic.is-active .hamburger-inner::after { transform: translate3d(0, -1.4rem, 0) rotate(-270deg); transition-delay: 0.075s; } /* * Elastic Reverse */ .hamburger--elastic-r .hamburger-inner { top: 0.1rem; transition-duration: 0.275s; transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r .hamburger-inner::before { top: 0.7rem; transition: opacity 0.125s 0.275s ease; } .hamburger--elastic-r .hamburger-inner::after { top: 1.4rem; transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .hamburger--elastic-r.is-active .hamburger-inner { transform: translate3d(0, 0.7rem, 0) rotate(-135deg); transition-delay: 0.075s; } .hamburger--elastic-r.is-active .hamburger-inner::before { transition-delay: 0s; opacity: 0; } .hamburger--elastic-r.is-active .hamburger-inner::after { transform: translate3d(0, -1.4rem, 0) rotate(270deg); transition-delay: 0.075s; } /* * Emphatic */ .hamburger--emphatic { overflow: hidden; } .hamburger--emphatic .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; } .hamburger--emphatic .hamburger-inner::after { top: 0.7rem; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; } .hamburger--emphatic.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic.is-active .hamburger-inner::before { left: -6rem; top: -6rem; transform: translate3d(6rem, 6rem, 0) rotate(45deg); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic.is-active .hamburger-inner::after { right: -6rem; top: -6rem; transform: translate3d(-6rem, 6rem, 0) rotate(-45deg); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Emphatic Reverse */ .hamburger--emphatic-r { overflow: hidden; } .hamburger--emphatic-r .hamburger-inner { transition: background-color 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::before { left: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; } .hamburger--emphatic-r .hamburger-inner::after { top: 0.7rem; right: 0; transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; } .hamburger--emphatic-r.is-active .hamburger-inner { transition-delay: 0s; transition-timing-function: ease-out; background-color: transparent !important; } .hamburger--emphatic-r.is-active .hamburger-inner::before { left: -6rem; top: 6rem; transform: translate3d(6rem, -6rem, 0) rotate(-45deg); transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } .hamburger--emphatic-r.is-active .hamburger-inner::after { right: -6rem; top: 6rem; transform: translate3d(-6rem, -6rem, 0) rotate(45deg); transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); } /* * Minus */ .hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after { transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; } .hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after { opacity: 0; transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; } .hamburger--minus.is-active .hamburger-inner::before { top: 0; } .hamburger--minus.is-active .hamburger-inner::after { bottom: 0; } /* * Slider */ .hamburger--slider .hamburger-inner { top: 0.1rem; } .hamburger--slider .hamburger-inner::before { top: 0.7rem; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--slider .hamburger-inner::after { top: 1.4rem; } .hamburger--slider.is-active .hamburger-inner { transform: translate3d(0, 0.7rem, 0) rotate(45deg); } .hamburger--slider.is-active .hamburger-inner::before { transform: rotate(-45deg) translate3d(-0.42857rem, -0.5rem, 0); opacity: 0; } .hamburger--slider.is-active .hamburger-inner::after { transform: translate3d(0, -1.4rem, 0) rotate(-90deg); } /* * Slider Reverse */ .hamburger--slider-r .hamburger-inner { top: 0.1rem; } .hamburger--slider-r .hamburger-inner::before { top: 0.7rem; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } .hamburger--slider-r .hamburger-inner::after { top: 1.4rem; } .hamburger--slider-r.is-active .hamburger-inner { transform: translate3d(0, 0.7rem, 0) rotate(-45deg); } .hamburger--slider-r.is-active .hamburger-inner::before { transform: rotate(45deg) translate3d(0.42857rem, -0.5rem, 0); opacity: 0; } .hamburger--slider-r.is-active .hamburger-inner::after { transform: translate3d(0, -1.4rem, 0) rotate(90deg); } /* * Spin */ .hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin.is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spin Reverse */ .hamburger--spin-r .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin-r .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin-r.is-active .hamburger-inner { transform: rotate(-225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spin-r.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .hamburger--spin-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Spring */ .hamburger--spring .hamburger-inner { top: 0.1rem; transition: background-color 0s 0.13s linear; } .hamburger--spring .hamburger-inner::before { top: 0.7rem; transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring .hamburger-inner::after { top: 1.4rem; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring.is-active .hamburger-inner { transition-delay: 0.22s; background-color: transparent !important; } .hamburger--spring.is-active .hamburger-inner::before { top: 0; transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0.7rem, 0) rotate(45deg); } .hamburger--spring.is-active .hamburger-inner::after { top: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0.7rem, 0) rotate(-45deg); } /* * Spring Reverse */ .hamburger--spring-r .hamburger-inner { top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r .hamburger-inner::after { top: -1.4rem; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; } .hamburger--spring-r .hamburger-inner::before { transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spring-r.is-active .hamburger-inner { transform: translate3d(0, -0.7rem, 0) rotate(-45deg); transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--spring-r.is-active .hamburger-inner::after { top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; } .hamburger--spring-r.is-active .hamburger-inner::before { top: 0; transform: rotate(90deg); transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand */ .hamburger--stand .hamburger-inner { transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; } .hamburger--stand .hamburger-inner::before { transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand .hamburger-inner::after { transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand.is-active .hamburger-inner { transform: rotate(90deg); background-color: transparent !important; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; } .hamburger--stand.is-active .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand.is-active .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Stand Reverse */ .hamburger--stand-r .hamburger-inner { transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; } .hamburger--stand-r .hamburger-inner::before { transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r .hamburger-inner::after { transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--stand-r.is-active .hamburger-inner { transform: rotate(-90deg); background-color: transparent !important; transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; } .hamburger--stand-r.is-active .hamburger-inner::before { top: 0; transform: rotate(-45deg); transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--stand-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(45deg); transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; } .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { transform: rotate(45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } /* * Vortex */ .hamburger--vortex .hamburger-inner { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after { transition-duration: 0s; transition-delay: 0.1s; transition-timing-function: linear; } .hamburger--vortex .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex.is-active .hamburger-inner { transform: rotate(765deg); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex.is-active .hamburger-inner::after { bottom: 0; transform: rotate(90deg); } /* * Vortex Reverse */ .hamburger--vortex-r .hamburger-inner { transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after { transition-duration: 0s; transition-delay: 0.1s; transition-timing-function: linear; } .hamburger--vortex-r .hamburger-inner::before { transition-property: top, opacity; } .hamburger--vortex-r .hamburger-inner::after { transition-property: bottom, transform; } .hamburger--vortex-r.is-active .hamburger-inner { transform: rotate(-765deg); transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after { transition-delay: 0s; } .hamburger--vortex-r.is-active .hamburger-inner::before { top: 0; opacity: 0; } .hamburger--vortex-r.is-active .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); } @media only screen and (max-width: 960px) { /* stylelint-disable a11y/no-display-none */ .js .menu-items ul { display: none; } /* stylelint-enable */ } @media only screen and (max-width: 960px) { .js ul .sub-menu.toggled-on { display: block; } } @media (max-width: 960px) { .nav-container { background-color: var(--color-background-nav-mobile-header); left: 0; position: absolute; top: 0; width: 100%; } .site { padding-top: var(--height-navigation-mobile); } } @media screen and (max-width: 959px) { .site-header ul, .site-header li, .site-header a { position: relative; } .main-navigation-wrapper { order: 6; z-index: 999; } .no-js .site-header { background-color: var(--color-background-nav-mobile-header); position: static; } .disable-scroll { overflow: hidden; } .nav-primary { display: block; height: 100vh; margin: 0; opacity: 0; overflow: auto; pointer-events: none; transition: all 0.22s ease-in-out; visibility: hidden; width: 100vw; } .menu-items { margin: 0; opacity: 0; padding: 2rem 0; width: 100%; } .menu-item a { border-top: 1px solid var(--color-separator-nav-mobile); color: var(--color-main-level-mobile); display: block; font-size: var(--font-size-main-level-mobile); font-weight: var(--font-weight-main-level-mobile); margin-left: 0; margin-right: 0; padding-bottom: var(--padding-sub-menu-vertical-mobile); padding-left: var(--padding-sub-menu-horizontal-mobile); padding-right: var(--padding-sub-menu-horizontal-mobile); padding-top: var(--padding-sub-menu-vertical-mobile); position: relative; text-decoration: none; z-index: 0; } .sub-menu a { color: var(--color-sub-menu-mobile); font-size: var(--font-size-sub-menu-mobile); font-weight: var(--font-weight-sub-menu-mobile); padding-left: calc(var(--padding-sub-menu-horizontal-mobile) + var(--margin-left-sub-menu)); } .sub-menu { margin-left: 0; padding-left: 0; } .sub-menu .sub-menu a { padding-left: calc(var(--padding-sub-menu-horizontal-mobile) + var(--margin-left-sub-menu) + var(--margin-left-sub-menu)); } .menu-item a:hover, .menu-item a:focus { color: var(--color-active-main-level-mobile); } .menu-item.current-menu-parent > a, .menu-item.current-menu-item > a { color: var(--color-current-mobile); } .dropdown-toggle { align-items: center; background-color: transparent; border: 0; color: var(--color-dropdown-toggle-mobile); display: inline-flex; height: 100%; left: auto; margin-top: 0; max-height: 52px; overflow: hidden; padding-bottom: var(--padding-sub-menu-vertical-mobile); padding-left: var(--padding-sub-menu-horizontal-mobile); padding-right: var(--padding-sub-menu-horizontal-mobile); padding-top: var(--padding-sub-menu-vertical-mobile); position: absolute; right: 0; top: 2px; transform: rotate(0); transition: all 0.22s; z-index: 9999; } .dropdown-toggle:focus { z-index: 10000; } .sub-menu .dropdown-toggle { color: var(--color-sub-menu-mobile); } .dropdown-toggle svg { height: var(--dropdown-toggle-size-mobile); width: var(--dropdown-toggle-size-mobile); /* stylelint-disable a11y/no-display-none */ /* stylelint-enable */ } .dropdown-toggle.toggled-on { background-color: transparent; cursor: pointer; transform: rotate(-180deg); } .js .nav-primary { left: 0; position: fixed; top: var(--height-navigation-mobile); z-index: 5; } .js .nav-primary .menu-items { background-color: var(--color-background-nav-mobile-layer); height: 100vh; padding: 0; } .js.js-nav-active { overflow: hidden; } .js.js-nav-active .nav-primary { opacity: 1; pointer-events: all; visibility: visible; } .js.js-nav-active .menu-items { opacity: 1; } } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after { background-color: var(--color-hamburger-active); color: var(--color-hamburger-active); } .nav-toggle { background-color: transparent; border: 0; color: var(--color-hamburger); cursor: pointer; font-weight: var(--font-weight-bold); margin: 0; overflow: visible; padding: 0; position: relative; text-decoration: none; top: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 100000; /* stylelint-disable a11y/no-display-none */ /* stylelint-enable */ } @media (min-width: 960px) { .nav-toggle { display: none; } } .nav-toggle:not(.toggled-on) .hamburger-inner { transition: width 0.22s; width: 18px; } .nav-toggle.is-active .hamburger-inner, .nav-toggle:hover .hamburger-inner, .nav-toggle:focus .hamburger-inner { width: 3rem; } .nav-toggle span { color: var(--color-hamburger); font-size: 1.2em; } .nav-toggle.is-active span { color: var(--color-hamburger-active); } .nav-toggle:hover, .nav-toggle:active { color: var(--color-hamburger); } .nav-toggle:hover span, .nav-toggle:active span { color: var(--color-hamburger); } .nav-toggle:focus span span { background-color: var(--color-hamburger); } .nav-toggle:focus span span::before, .nav-toggle:focus span span::after { background-color: var(--color-hamburger); } .nav-toggle:not(.has-visible-label) .nav-toggle-label { display: none; } @media (max-width: 959px) { .nav-toggle { display: block; } .nav-toggle.has-visible-label { align-items: center; display: flex; } .nav-toggle.has-visible-label .nav-toggle-label { font-size: var(--font-size-nav-toggle-label); } } @media (max-width: 959px) and (max-width: 410px) { .nav-toggle.has-visible-label .nav-toggle-label { display: none; } } @media (max-width: 959px) and (min-width: 411px) { .nav-toggle.has-visible-label .hamburger-box { margin-right: 2rem; } } .nav-toggle.is-active { color: var(--color-hamburger-active); } .nav-toggle.is-active .hamburger-box .hamburger-inner { background-color: var(--color-hamburger-active); } .nav-toggle.is-active .hamburger-box .hamburger-inner::after { background-color: var(--color-hamburger-active); } .nav-toggle.is-active .focus .hamburger-inner, .nav-toggle.is-active span:focus .hamburger-inner { background-color: var(--color-hamburger-active); } .nav-toggle.is-active .focus .hamburger-inner::after, .nav-toggle.is-active span:focus .hamburger-inner::after { background-color: var(--color-hamburger-active); } .nav-toggle.is-active span:focus, .nav-toggle.is-active span:hover, .nav-toggle.is-active span:active { color: var(--color-hamburger-active); } .nav-toggle.is-active span:focus span, .nav-toggle.is-active span:hover span, .nav-toggle.is-active span:active span { color: var(--color-hamburger-active); } /* stylelint-disable */ :root { --color-baby-blue: #60f4ea; --color-wild-blue-yonder: #737fbf; --color-wild-blue-yonder-rgb: 115, 127, 191; --color-border-demo-header: rgba(var(--color-wild-blue-yonder-rgb), .5); } @media (min-width: 960px) { body .nav-container { background-color: var(--color-main); } } .site-header { padding-top: 4rem; padding-bottom: 4rem; } @media (max-width: 960px) { .site-header { padding-top: 2rem; padding-bottom: 2rem; } } .site-header .site-title { margin: 0; } .site-header .site-title svg { transition: transform 1s ease-in; } @media screen and (prefers-reduced-motion: reduce), (update: slow) { .site-header .site-title svg { transition: none; } } .site-header .site-title .clr-i-solid-path-2 { fill: var(--color-white); } .site-header .site-title a { color: var(--color-baby-blue); display: flex; align-items: center; } .site-header .site-title a:hover svg { transition: transform 0.4s cubic-bezier(0.6, -0.68, 0.73, 0.04); transform: translate(260%, -220%); } @media screen and (prefers-reduced-motion: reduce), (update: slow) { .site-header .site-title a:hover svg { transition: none; transform: none; } } .site-header .site-title a:hover svg .clr-i-solid-path-2 { display: block !important; fill: var(--color-baby-blue); } .site-header .site-title .logo-name { content: 'Air'; display: block; text-transform: lowercase; letter-spacing: .1em; font-weight: var(--font-weight-paragraphs); color: var(--color-white); margin-left: .75rem; font-size: 2.2rem; } .block.block-entry-header-demo { background-color: var(--color-valhalla); display: flex; align-items: center; justify-content: center; position: relative; max-height: 80rem; height: 60vh; max-width: 100%; margin: 0 auto; } @media (min-width: 480px) { .block.block-entry-header-demo { min-height: 60rem; } } @media (max-width: 480px) { .block.block-entry-header-demo { padding-top: 6rem; padding-bottom: 6rem; } } .block.block-entry-header-demo .shade { opacity: .4; } .block.block-entry-header-demo .inner { display: grid; grid-template-rows: 1fr 1fr; /* autoprefixer: off */ align-items: center; max-height: 100%; justify-items: center; padding: 2rem; max-width: 1200px; margin-top: 140px; margin-bottom: 80px; } @media (min-width: 770px) { .block.block-entry-header-demo .inner { padding: 0; display: grid; grid-template-rows: none; grid-template-columns: 3fr 5fr; max-width: 800px; } } @-webkit-keyframes plane-container { 0% { overflow: visible; } 80% { overflow: hidden; } 100% { overflow: hidden; } } @keyframes plane-container { 0% { overflow: visible; } 80% { overflow: hidden; } 100% { overflow: hidden; } } .block.block-entry-header-demo .logo { color: var(--color-baby-blue); border-top: 2px solid var(--color-border-demo-header); border-right: 0; width: 100%; text-align: center; order: 2; overflow: visible; -webkit-animation: plane-container 10s linear 1s infinite; animation: plane-container 10s linear 1s infinite; } .block.block-entry-header-demo .logo .logo-name { display: none; } @-webkit-keyframes plane { 0% { transform: translate(-200%, 140%); } 10% { transform: translate(0, 0); opacity: 1; } 85% { transform: translate(0, 0); opacity: 1; } 95% { transform: translate(140%, -100%); } 97% { opacity: 0; } 100% { transform: translate(0, 0); } } @keyframes plane { 0% { transform: translate(-200%, 140%); } 10% { transform: translate(0, 0); opacity: 1; } 85% { transform: translate(0, 0); opacity: 1; } 95% { transform: translate(140%, -100%); } 97% { opacity: 0; } 100% { transform: translate(0, 0); } } .block.block-entry-header-demo .logo svg { padding: 2rem; height: auto; width: 100%; max-width: 20rem; opacity: 0; transform: translate(-100%, 100%); -webkit-animation: plane 5s cubic-bezier(0.86, 0, 0.07, 1) 1s infinite; animation: plane 5s cubic-bezier(0.86, 0, 0.07, 1) 1s infinite; -webkit-animation-delay: -5s; animation-delay: -5s; position: relative; z-index: 6; } @media screen and (prefers-reduced-motion: reduce), (update: slow) { .block.block-entry-header-demo .logo svg { -webkit-animation: none; animation: none; transform: none; opacity: 1; } } @media (max-width: 480px) { .block.block-entry-header-demo .logo svg { max-width: 15rem; } } @media (min-width: 770px) { .block.block-entry-header-demo .logo { border-top: 0; border-right: 2px solid var(--color-border-demo-header); order: 0; text-align: right; } .block.block-entry-header-demo .logo svg { padding: 2rem 4rem; } } .block.block-entry-header-demo .main-heading { font-size: 32px; color: var(--color-white); margin: 0; padding: 2rem; position: relative; z-index: 2; text-align: center; line-height: 1.23; } @media screen and (min-width: 320px) { .block.block-entry-header-demo .main-heading { font-size: calc(32px + 30 * ((100vw - 320px) / 1600)); } } @media screen and (min-width: 1920px) { .block.block-entry-header-demo .main-heading { font-size: 62px; } } @media (min-width: 770px) { .block.block-entry-header-demo .main-heading { padding: 2rem 4rem; text-align: left; } } .accent { font-size: var(--font-size-h3); font-style: normal; letter-spacing: .05em; text-transform: lowercase; font-weight: var(--font-weight-medium); margin: 0; margin-bottom: 1rem; color: var(--color-wild-blue-yonder); display: block; position: relative; z-index: 2; } @media (min-width: 960px) { .dropdown-toggle, .menu-item.current-menu-item > a, .menu-item.current-menu-parent > a, .site-header .site-branding .site-title a, .site-header .nav-primary .menu-items.nav-menu .menu-item > .dropdown-toggle, .site-header .nav-primary .menu-items .current-menu-parent > a, .site-header .nav-primary .menu-items .current-menu-item > a { color: var(--color-baby-blue); } .site-header .nav-primary .menu-items .sub-menu .current-menu-parent > a, .site-header .nav-primary .menu-items .sub-menu .current-menu-item > a, .site-header .nav-primary .menu-items .sub-menu .dropdown-toggle { color: var(--color-current); } .site-header .nav-primary .menu-items.nav-menu .sub-menu .menu-item > .dropdown-toggle { color: var(--color-valhalla); } } .block.block-entry-header-demo + .block .container { max-width: 800px; } .block.block-entry-header-demo + .block .container.gutenberg-content { max-width: 100%; } .block.block-blog article, .block.block-blog nav { max-width: 800px; margin-left: auto; margin-right: auto; } .block-blog article { margin-bottom: var(--padding-block); } .block-blog article:last-child { margin-bottom: 0; } .block-blog ul.tags { padding-left: 0; } @media (min-width: 960px) { .block { min-height: 78px; } } .site-footer { background-color: var(--color-valhalla); } .block { background-color: var(--color-white); background-position: center; background-repeat: no-repeat; background-size: cover; margin: 0 auto; max-width: 100%; position: relative; } .shade { background-color: var(--color-background-shade); height: 100%; left: 0; opacity: .35; position: absolute; top: 0; width: 100%; z-index: 0; } .global-link { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 3; } .site { margin-left: auto; margin-right: auto; max-width: 100%; overflow: hidden; position: relative; } .container { margin: 0 auto; margin-left: auto; margin-right: auto; max-width: 1200px; padding-bottom: var(--padding-container-vertical); padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); padding-top: var(--padding-container-vertical); } .site-main .container { clear: both; overflow: hidden; } .entry-footer { clear: both; display: flex; justify-content: space-between; margin-top: var(--padding-container-vertical); overflow: hidden; } .edit-link { clear: both; display: block; margin-bottom: 0; margin-top: 2rem; max-width: 100%; min-width: 0; overflow: hidden; text-align: left; transition: all 0.22s; width: 100%; } .edit-link a { background-color: var(--color-white); border: 2px dashed var(--color-link-edit-border); clear: both; color: var(--color-link-edit-text); display: block; margin: 0; padding: 2rem; text-align: center; text-decoration: none; transition: all 0.22s; } .edit-link:focus, .edit-link a:hover { background-color: var(--color-link-edit-background-hover); color: var(--color-link-edit-text-hover); } @media (min-width: 480px) { .hide-on-desktop { /* stylelint-disable declaration-no-important */ display: none !important; /* stylelint-enable */ } } /* stylelint-disable declaration-no-important, a11y/no-display-none */ @media (max-width: 480px) { .hide-on-mobile { display: none !important; } } /* stylelint-enable */ /* stylelint-disable declaration-no-important, a11y/no-display-none */ @media (max-width: 960px) { .hide-on-mobile-nav-view { display: none !important; } } /* stylelint-enable */ /* stylelint-disable declaration-no-important, a11y/no-display-none */ @media (min-width: 960px) { .hide-on-desktop-nav-view { display: none !important; } } /* stylelint-enable */ /* stylelint-disable declaration-no-important, a11y/no-display-none */ .hide-completely { display: none !important; } /* stylelint-enable */ /* stylelint-disable a11y/no-display-none */ @media print { .nav-container, .site-footer, .side-nav { display: none; } } /* stylelint-disable declaration-property-unit-allowed-list */ :root { font-size: 62.5%; } /* stylelint-enable declaration-property-unit-allowed-list */ body { color: var(--color-paragraph); font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: var(--font-size-default); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-weight: var(--font-weight-paragraphs); text-rendering: geometricPrecision; } p, dd, dt, figcaption, hr, small, ol, ul, li, blockquote, kbd, pre, samp, code, th, td, table, tr, textarea, select, input[type="text"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="month"], input[type="week"], input[type="email"], input[type="search"] { font-size: var(--font-size-paragraphs); line-height: var(--line-height-paragraphs); } h1, h2, h3, h4, h5, h6 { color: var(--color-heading); font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-weight: var(--font-weight-headings); margin-bottom: var(--margin-between-paragraphs); margin-top: var(--margin-between-paragraphs); } h2, h3, h4, h5, h6 { line-height: var(--line-height-headings); } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } h4 { font-size: var(--font-size-h4); } h5 { font-size: var(--font-size-h5); } h6 { font-size: var(--font-size-h6); } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } ul { list-style: disc outside; padding-left: 1.9rem; } ul li { padding-left: 0; } ol { padding-left: 1.9rem; } b, strong { font-weight: var(--font-weight-bold); } em, i { font-style: italic; } small { font-size: .87em; } p { margin-bottom: 2.9rem; margin-top: 2.9rem; } blockquote { border: 0 none; clear: both; margin: 0; padding-bottom: 3rem; position: relative; } blockquote p { color: var(--color-blockquote); font-style: italic; margin-bottom: 0; overflow: visible; position: relative; } @media (min-width: 770px) { blockquote { margin-top: 4rem; padding-bottom: 4rem; } } blockquote::before { content: ''; display: block; height: 4px; left: 0; max-width: 147px; position: absolute; top: 0; } @media (min-width: 480px) { blockquote::before { width: 30%; } } cite { display: block; font-style: italic; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 0; } img { height: auto; -ms-interpolation-mode: bicubic; max-width: 100%; vertical-align: middle; } figure { margin-bottom: 1rem; margin-left: 0; margin-right: 0; margin-top: 0; position: relative; } figcaption { font-style: normal; font-weight: var(--font-weight-paragraphs); margin-top: 0; } kbd, pre, samp { font-family: "Inconsolata", "Menlo", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; } code { background-color: var(--color-background-code-inline); border-radius: .3rem; color: var(--color-code-block); font-family: "Inconsolata", "Menlo", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: inherit; padding: .37rem .5rem; } pre code { display: inline-block; padding: 1.15rem 1rem .85rem; } pre { border-radius: .3rem; display: block; margin-bottom: 2rem; white-space: pre-wrap; word-break: break-all; word-wrap: break-word; } .site-header { align-items: center; display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; max-width: 1200px; padding-bottom: var(--padding-site-header-vertical); padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); padding-top: var(--padding-site-header-vertical); position: relative; z-index: 15; } .site-title { line-height: 0; margin: 0; } .site-title a { align-items: center; display: flex; } .nav-container { z-index: 10; } .site-footer { clear: both; color: var(--color-white); overflow: hidden; padding: 6rem 2rem; text-align: center; /* stylelint-disable a11y/no-display-none */ /* stylelint-enable */ } .site-footer p, .site-footer span { color: var(--color-white); } .site-footer .wordpress-logo { display: block; margin-bottom: 2rem; margin-left: auto; margin-right: auto; } .site-footer span { display: block; text-align: center; } .site-footer svg { margin-right: 5px; position: relative; } .site-footer .is-external-link::after { display: none; } .site-footer .powered-by-wordpress { display: inline-block; font-weight: var(--font-weight-semibold); margin-bottom: 1rem; text-align: center; } .site-footer .github-link { margin-left: 8px; margin-top: 4px; overflow: hidden; padding-bottom: 4px; position: relative; } .site-footer .github-link.is-external-link::after { background-color: var(--color-white); bottom: 0; content: ''; display: block; height: 1px; opacity: .4; position: absolute; top: auto; transition: opacity 0.22s; width: 100%; } .site-footer a { color: var(--color-white); transition: opacity 0.22s; } .site-footer a:hover, .site-footer a:focus { color: var(--color-white); opacity: .5; } .site-footer a:hover::after, .site-footer a:focus::after { opacity: .2; } .site-footer .theme-info { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; line-height: 1.5; margin: 0 auto; text-align: center; } .site-footer .theme-info i { margin: 0 5px; } :root { --color-background-inputs: var(--color-white); --color-border-forms: #d9d9d9; --color-border-forms-focus: rgba(42, 45, 62, .3); --color-button: var(--color-white); --color-button-background: var(--color-east-bay); --color-button-background-hover: var(--color-valhalla); --color-checkbox: var(--color-east-bay); --color-checkbox-outline: 0 0 0 3px rgba(84, 87, 115, .2); --color-checkbox-border-hover: lighten(#545773, 15%); --color-placeholder: var(--color-paragraph); --color-placeholder-focus: var(--color-black); --opacity-placeholder: .4; --opacity-placeholder-focus: .8; --border-width-inputs: 2px; --checkbox-marker-size: 12px; --checkbox-radio-border-width: 2px; --checkbox-radio-gap: 10px; --checkbox-radio-line-height: var(--line-height-paragraphs); --checkbox-radio-size: 16px; --checkbox-radius: 4px; --radio-marker-size: 8px; } .button-wrapper { margin-bottom: 0; } .site-main button, .site-main .button, .site-main input[type="reset"], .site-main input[type="submit"], .site-main input[type="button"], .site-footer button, .site-footer .button, .site-footer input[type="reset"], .site-footer input[type="submit"], .site-footer input[type="button"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--color-button-background); border: 0; border-radius: 3px; color: var(--color-button); cursor: pointer; display: inline-block; font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: var(--font-size-16); font-weight: 700; line-height: 1; margin-bottom: 0; padding-bottom: 12px; padding-left: 25px; padding-right: 25px; padding-top: 12px; position: relative; text-decoration: none; transition: all 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: auto; /* stylelint-disable a11y/no-display-none */ /* stylelint-enable */ } .site-main button.is-external-link::after, .site-main .button.is-external-link::after, .site-main input[type="reset"].is-external-link::after, .site-main input[type="submit"].is-external-link::after, .site-main input[type="button"].is-external-link::after, .site-footer button.is-external-link::after, .site-footer .button.is-external-link::after, .site-footer input[type="reset"].is-external-link::after, .site-footer input[type="submit"].is-external-link::after, .site-footer input[type="button"].is-external-link::after { display: none; } .site-main button:hover, .site-main button:focus, .site-main .button:hover, .site-main .button:focus, .site-main input[type="reset"]:hover, .site-main input[type="reset"]:focus, .site-main input[type="submit"]:hover, .site-main input[type="submit"]:focus, .site-main input[type="button"]:hover, .site-main input[type="button"]:focus, .site-footer button:hover, .site-footer button:focus, .site-footer .button:hover, .site-footer .button:focus, .site-footer input[type="reset"]:hover, .site-footer input[type="reset"]:focus, .site-footer input[type="submit"]:hover, .site-footer input[type="submit"]:focus, .site-footer input[type="button"]:hover, .site-footer input[type="button"]:focus { background-color: var(--color-button-background-hover); border-color: var(--color-button-hover); color: var(--color-button-hover); } .site-main button.button-ghost, .site-main .button.button-ghost, .site-main input[type="reset"].button-ghost, .site-main input[type="submit"].button-ghost, .site-main input[type="button"].button-ghost, .site-footer button.button-ghost, .site-footer .button.button-ghost, .site-footer input[type="reset"].button-ghost, .site-footer input[type="submit"].button-ghost, .site-footer input[type="button"].button-ghost { background-color: transparent; border: 2px solid var(--color-button); border-radius: 3px; color: var(--color-button); transition: all 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .site-main button.button-ghost:focus, .site-main button.button-ghost:hover, .site-main .button.button-ghost:focus, .site-main .button.button-ghost:hover, .site-main input[type="reset"].button-ghost:focus, .site-main input[type="reset"].button-ghost:hover, .site-main input[type="submit"].button-ghost:focus, .site-main input[type="submit"].button-ghost:hover, .site-main input[type="button"].button-ghost:focus, .site-main input[type="button"].button-ghost:hover, .site-footer button.button-ghost:focus, .site-footer button.button-ghost:hover, .site-footer .button.button-ghost:focus, .site-footer .button.button-ghost:hover, .site-footer input[type="reset"].button-ghost:focus, .site-footer input[type="reset"].button-ghost:hover, .site-footer input[type="submit"].button-ghost:focus, .site-footer input[type="submit"].button-ghost:hover, .site-footer input[type="button"].button-ghost:focus, .site-footer input[type="button"].button-ghost:hover { background-color: var(--color-button-hover); border-color: var(--color-button-hover); color: var(--color-white); } .site-main button.button-small, .site-main .button.button-small, .site-main input[type="reset"].button-small, .site-main input[type="submit"].button-small, .site-main input[type="button"].button-small, .site-footer button.button-small, .site-footer .button.button-small, .site-footer input[type="reset"].button-small, .site-footer input[type="submit"].button-small, .site-footer input[type="button"].button-small { font-size: var(--font-size-16); padding-bottom: 8px; padding-left: 17px; padding-right: 17px; padding-top: 8px; } .site-main button.button-medium, .site-main .button.button-medium, .site-main input[type="reset"].button-medium, .site-main input[type="submit"].button-medium, .site-main input[type="button"].button-medium, .site-footer button.button-medium, .site-footer .button.button-medium, .site-footer input[type="reset"].button-medium, .site-footer input[type="submit"].button-medium, .site-footer input[type="button"].button-medium { font-size: var(--font-size-17); padding-bottom: 14px; padding-left: 27px; padding-right: 27px; padding-top: 14px; } .site-main button.button-large, .site-main .button.button-large, .site-main input[type="reset"].button-large, .site-main input[type="submit"].button-large, .site-main input[type="button"].button-large, .site-footer button.button-large, .site-footer .button.button-large, .site-footer input[type="reset"].button-large, .site-footer input[type="submit"].button-large, .site-footer input[type="button"].button-large { font-size: var(--font-size-20); padding-bottom: 19px; padding-left: 40px; padding-right: 40px; padding-top: 19px; } select { background-image: url("../../svg/select.svg"); background-position: right 0 center; background-repeat: no-repeat; background-size: 40px auto; border-color: var(--color-border-forms); border-radius: 0; border-style: solid; border-width: var(--border-width-inputs); color: var(--color-paragraph); font-size: var(--font-size-17); line-height: 24px; max-width: 100%; min-width: 0; padding: 15px; text-indent: 1px; transition: none; width: 100%; } textarea, select, input[type="text"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="month"], input[type="week"], input[type="email"], input[type="search"] { background-color: var(--color-background-inputs); border-color: var(--color-border-forms); border-radius: 3px; border-style: solid; border-width: var(--border-width-inputs); box-sizing: border-box; font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: var(--font-size-17); line-height: 24px; margin-bottom: 0; padding: 15px; position: relative; text-decoration: none; transition: background .55s; } textarea::-moz-placeholder, select::-moz-placeholder, input[type="text"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="month"]::-moz-placeholder, input[type="week"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="search"]::-moz-placeholder { color: var(--color-placeholder); opacity: var(--opacity-placeholder); } textarea::placeholder, select::placeholder, input[type="text"]::placeholder, input[type="tel"]::placeholder, input[type="url"]::placeholder, input[type="password"]::placeholder, input[type="number"]::placeholder, input[type="month"]::placeholder, input[type="week"]::placeholder, input[type="email"]::placeholder, input[type="search"]::placeholder { color: var(--color-placeholder); opacity: var(--opacity-placeholder); } textarea:focus, select:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="search"]:focus { background-color: var(--color-background-inputs); border-color: var(--color-border-forms-focus); } textarea:focus::-moz-placeholder, select:focus::-moz-placeholder, input[type="text"]:focus::-moz-placeholder, input[type="tel"]:focus::-moz-placeholder, input[type="url"]:focus::-moz-placeholder, input[type="password"]:focus::-moz-placeholder, input[type="number"]:focus::-moz-placeholder, input[type="month"]:focus::-moz-placeholder, input[type="week"]:focus::-moz-placeholder, input[type="email"]:focus::-moz-placeholder, input[type="search"]:focus::-moz-placeholder { color: var(--color-placeholder-focus); opacity: var(--opacity-placeholder-focus); } textarea:focus::placeholder, select:focus::placeholder, input[type="text"]:focus::placeholder, input[type="tel"]:focus::placeholder, input[type="url"]:focus::placeholder, input[type="password"]:focus::placeholder, input[type="number"]:focus::placeholder, input[type="month"]:focus::placeholder, input[type="week"]:focus::placeholder, input[type="email"]:focus::placeholder, input[type="search"]:focus::placeholder { color: var(--color-placeholder-focus); opacity: var(--opacity-placeholder-focus); } input[type="radio"], input[type="checkbox"] { height: var(--checkbox-radio-size); margin: 0; margin-top: calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2); opacity: 0; padding: 0; pointer-events: none; position: absolute; width: var(--checkbox-radio-size); } input[type="radio"] + label, input[type="checkbox"] + label { align-items: flex-start; cursor: pointer; display: inline-flex; line-height: var(--checkbox-radio-line-height); } input[type="radio"] + label::before, input[type="checkbox"] + label::before { align-self: center; background-color: var(--color-white); background-position: center; background-repeat: no-repeat; border-color: var(--color-checkbox); border-style: solid; border-width: var(--checkbox-radio-border-width); content: ''; display: inline-flex; flex-shrink: 0; height: var(--checkbox-radio-size); margin-right: var(--checkbox-radio-gap); position: relative; top: calc(var(--checkbox-radio-border-width) / 2); transition: transform .2s, border .2s; width: var(--checkbox-radio-size); } input[type="radio"] + label::before { border-radius: 50%; } input[type="checkbox"] + label::before { border-radius: var(--checkbox-radius); } input[type="radio"]:checked + label::before, input[type="checkbox"]:checked + label::before { background-color: var(--color-checkbox); border-color: var(--color-checkbox); box-shadow: none; transition: transform .2s; } input[type="radio"]:active + label::before, input[type="checkbox"]:active + label::before { transform: scale(0.8); transition: transform .2s; } input[type="radio"]:checked + label::before { background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); background-size: var(--radio-marker-size); } input[type="checkbox"]:checked + label::before { background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E"); background-size: var(--checkbox-marker-size); } input[type="radio"]:focus + label::before, input[type="checkbox"]:focus + label::before, input[type="radio"]:checked:active + label::before, input[type="checkbox"]:checked:active + label::before { border-color: var(--color-checkbox); box-shadow: var(--color-checkbox-outline); } input[type="radio"]:checked:active + label::before, input[type="checkbox"]:checked:active + label::before { transform: none; transition: none; } /* stylelint-disable selector-max-pseudo-class */ input[type="radio"]:not(:checked):not(:focus) + label:hover::before, input[type="checkbox"]:not(:checked):not(:focus) + label:hover::before { border-color: var(--color-checkbox-border-hover); } /* stylelint-enable selector-max-pseudo-class */ /* stylelint-disable no-descending-specificity */ .cat { margin-bottom: .5rem; margin-top: 4rem; } .cat a { background-color: transparent; border-color: var(--color-category-border); border-radius: 5px; border-style: solid; border-width: 1px 1px 2px; box-shadow: none; color: var(--color-category-text); display: inline-block; font-size: var(--font-size-16); margin-bottom: .5rem; margin-right: .5em; padding: .2em .6em; transition: all 0.22s; } .cat a:hover, .cat a:focus { border-color: var(--color-tag-border-hover); } .tags { list-style: none; margin-bottom: var(--margin-between-text-elements); margin-top: 0; overflow: hidden; } .tags li { float: left; margin-bottom: 10px; margin-left: 0; margin-right: 10px; margin-top: 0; padding-left: 0; } .tags a { background-color: transparent; border-color: var(--color-tag-border); border-radius: 5px; border-style: solid; border-width: 1px 1px 2px; box-shadow: none; color: var(--color-tag-text); display: inline-block; font-size: var(--font-size-14); margin-right: .4em; padding: .2em .6em; transition: all 0.22s; } .tags a:hover, .tags a:focus { border-color: var(--color-tag-border-hover); } .post-navigation .nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; } :root { --color-border-sticky: #d7e4f2; --color-bypostauthor: rgba(42, 45, 62, .5); } .sticky { border: 1px dashed var(--color-border-sticky); margin-bottom: 2rem; padding: 2rem; } .comment-list li.bypostauthor, .bypostauthor { border: 1px dashed var(--color-bypostauthor); padding: 2rem; } .wp-caption { max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption .wp-caption-text { font-style: italic; margin-bottom: 20px; padding: 1rem 0; text-align: left; } .site-footer .top { background-color: transparent; padding: 16px; } .site-footer .top svg { align-items: center; display: flex; fill: var(--color-top-arrow-dark); height: 18px; justify-content: center; margin: 0; opacity: .8; transition: all .3s ease; width: 18px; } @media (max-width: 480px) { .site-footer .top svg { height: 15px; width: 15px; } } .site-footer .top:hover, .site-footer .top:focus, .site-footer .top:active { opacity: 1; } .site-footer .top:hover svg, .site-footer .top:focus svg, .site-footer .top:active svg { transform: translateY(-0.5rem); } .site-footer .back-to-top { align-items: center; bottom: 1rem; display: flex; justify-content: center; margin: 0; opacity: 0; position: fixed; right: 1rem; text-decoration: none; transition: opacity 0.22s 0s, visibility 0s 0.22s; z-index: 9999; } .site-footer .back-to-top.has-light-bg svg { fill: var(--color-top-arrow-dark); } .site-footer .back-to-top.has-dark-bg svg { fill: var(--color-top-arrow-light); } .site-footer .back-to-top.is-visible, .site-footer .back-to-top.fade-out { transition: opacity 0.22s 0s, visibility 0s 0s; } .site-footer .back-to-top.is-visible { opacity: 1; } .site-footer .back-to-top.fade-out { opacity: 1; } .site-footer .back-to-top.fade-out:focus, .site-footer .back-to-top.fade-out:hover { opacity: 1; } .gallery { display: grid; grid-gap: 1.5em; margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; width: 100%; } .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); } .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); } .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); } .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); } .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); } .gallery-caption { display: block; } div.lazy { background-position: center; background-size: cover; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; } .has-lazyload { overflow: hidden; position: relative; } /* stylelint-disable a11y/font-size-is-readable */ .navigation:not(.post-navigation) .nav-links { align-items: flex-start; display: flex; font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: 14px; justify-content: flex-start; margin-top: 4rem; overflow: hidden; text-align: left; width: 100%; } .navigation:not(.post-navigation) .nav-links a { text-decoration: none; } /* stylelint-enable */ .page-numbers { align-items: center; background-color: var(--color-white); border-bottom: 2px solid var(--color-blue-chalk); border-left: 1px solid var(--color-blue-chalk); border-right: 1px solid var(--color-blue-chalk); border-top: 2px solid var(--color-blue-chalk); color: var(--color-pagination-text); display: flex; font-weight: var(--font-weight-medium); height: 35px; justify-content: center; margin-left: 0; margin-right: 0; transition: all 0.22s; width: 35px; } @media (max-width: 600px) { .page-numbers { height: 26px; width: 26px; } } .page-numbers:last-child { border-bottom-left-radius: 0; border-bottom-right-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 4px; } .page-numbers:first-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 0; border-top-left-radius: 4px; border-top-right-radius: 0; } a.page-numbers:hover, a.page-numbers:focus { background-color: var(--color-pagination-background-hover); border-color: var(--color-pagination-border-hover); color: var(--color-pagination-text-hover); } .page-numbers.current { background-color: var(--color-pagination-background-current); border-color: var(--color-pagination-border-current); color: var(--color-pagination-text-current); } .page-numbers.next, .page-numbers.prev { padding-left: 20px; padding-right: 20px; width: auto; } @media (max-width: 600px) { .page-numbers.next, .page-numbers.prev { padding-left: 10px; padding-right: 10px; } } /* stylelint-disable selector-class-pattern */ div.validation_error { background-color: var(--color-error); color: var(--color-white); font-size: var(--font-size-17); font-weight: var(--font-weight-bold); margin-bottom: 2rem; padding: 2rem; } div.validation_error:focus { color: var(--color-white); } body *[aria-invalid="true"] { border-color: var(--color-error); } .validation_message { color: var(--color-error); font-size: var(--font-size-16); font-weight: var(--font-weight-regular); } .validation_list { list-style: none; margin-bottom: 2rem; margin-left: 0; padding: 0; } .validation_list a { color: var(--color-error); text-decoration: none; } .validation_list li { color: var(--color-error); font-weight: var(--font-weight-bold); } .gform_body .gfield_required { color: var(--color-main); font-size: var(--font-size-22); position: relative; top: 3px; } .gform_body ul { list-style: none; margin: 0; padding: 0; } .gform_body .gform_fields li { margin-bottom: 1rem; margin-top: 1rem; } .gform_body .gfield_radio li, .gform_body .gfield_checkbox li { margin-bottom: 0; margin-top: 0; } .gform_body .gfieldset li { align-items: center; display: inline-flex; flex-wrap: wrap; justify-content: flex-start; margin: 0; width: 100%; } .gform_body .gform_fields li:last-child { margin-bottom: 0; } .gform_body .gfield_label, .gform_body .ginput_container label { display: inline-block; font-weight: var(--font-weight-bold); margin-bottom: 1rem; margin-top: 1rem; } .gform_body input[type="radio"], .gform_body input[type="checkbox"] { margin-right: 1rem; } .gform_body .gfield_radio li label, .gform_body .gfield_checkbox li label { margin-bottom: 0; margin-top: 0; } .gform_body input:not([type="radio"]):not([type="checkbox"]), .gform_body textarea { width: 100%; } @media (min-width: 480px) { .gform_body .ginput_full { display: block; width: 100%; } .gform_body .ginput_complex { display: flex; flex-wrap: wrap; margin-left: -.5rem; margin-right: -.5rem; } .gform_body .ginput_complex span { margin-left: .5rem; margin-right: .5rem; } .gform_body .ginput_left, .gform_body .ginput_right { display: inline-flex; flex-wrap: wrap; width: calc(50% - 1rem); } .gform_body .ginput_left > label, .gform_body .ginput_left input, .gform_body .ginput_right > label, .gform_body .ginput_right input { font-size: var(--font-size-16); width: 100%; } } /* stylelint-enable selector-class-pattern */ .block-search, .block-search-results { background-color: var(--color-white); } .block-search form { display: grid; /* autoprefixer: off */ grid-gap: 1rem; grid-template-columns: 9fr 1fr; } .block-search form input, .block-search form label { width: 100%; } .block-search-results > .container { padding-top: 0; } @media (min-width: 1024px) { .block-search-results > .container { display: grid; grid-auto-rows: minmax(0, auto); grid-gap: 16px; grid-row-gap: 16px; grid-template-columns: repeat(1, minmax(0, 1fr)); } @supports not (display: grid) { .block-search-results > .container { display: flex; flex-wrap: wrap; overflow: hidden; } .block-search-results > .container > div { margin-bottom: 16px; margin-right: 16px; width: calc(100% - 16px); } .block-search-results > .container > div:nth-child(1n+1) { margin-right: 0; } } } @media all and (min-width: 1024px) and (-ms-high-contrast: none), (min-width: 1024px) and (-ms-high-contrast: active) { .block-search-results > .container { display: flex; flex-wrap: wrap; overflow: hidden; } .block-search-results > .container > div { margin-bottom: 16px; margin-right: 16px; width: calc(100% - 16px); } .block-search-results > .container > div:nth-child(1n+1) { margin-right: 0; } } @media (min-width: 1024px) { @supports (-ms-ime-align: auto) { .block-search-results > .container { display: flex; flex-wrap: wrap; overflow: hidden; } .block-search-results > .container > div { margin-bottom: 16px; margin-right: 16px; width: calc(100% - 16px); } .block-search-results > .container > div:nth-child(1n+1) { margin-right: 0; } } } .block-search-results .row-result { border-top: 2px solid var(--color-border-forms); padding: 2rem 0; } .block-search-results .row-result:last-of-type { border-bottom: 2px solid var(--color-border-forms); } .block-search-results h3 { font-size: var(--font-size-h4); margin-bottom: 1rem; } .block-search-results p { margin-top: 1rem; } .block-search-results .tags a { background-color: var(--color-background-tag); color: var(--color-main); } .block-search-results .tags a:hover, .block-search-results .tags a:focus { background-color: var(--color-main); color: var(--color-background-tag); } @media (min-width: 480px) { .block-error-404 .container { padding-bottom: 10%; padding-top: 10%; } } .block-error-404 h1 { font-size: 42px; margin-bottom: 2rem; } @media screen and (min-width: 320px) { .block-error-404 h1 { font-size: calc(42px + 158 * ((100vw - 320px) / 1600)); } } @media screen and (min-width: 1920px) { .block-error-404 h1 { font-size: 200px; } } /* stylelint-disable no-descending-specificity */ .comments-area { margin-bottom: 0; margin-top: 50px; overflow: visible; } .comment-list { list-style: none; margin: 0; padding: 0; } .comment-list li { font-size: var(--font-size-14); margin-bottom: 70px; margin-top: 0; padding: 0; } .comment-list p { color: var(--color-comment-text); font-size: var(--font-size-14); } .comment-list .avatar { border-radius: 50%; float: right; } .comment-list .comment-author { color: var(--color-comment-author-text); font-size: var(--font-size-h4); margin-bottom: 10px; margin-top: 0; padding: 0; } .comment-list a, .comment-list .comments-link a { box-shadow: none; color: var(--color-link-comment); } .comment-list .comment-author a { color: var(--color-paragraph); } .comment-list .comment-time { font-size: var(--font-size-14); margin: 0; padding: 0; } .comment-list .comment-time a { color: var(--color-link-comment-time-anchor); } .comment-list .comment-time:focus, .comment-list .comment-time:hover { opacity: 1; } .comment-list .comment-time svg { fill: var(--color-link-comment-time-anchor); margin-right: 5px; position: relative; top: 2px; } .comments-link { align-items: center; display: inline-flex; font-size: var(--font-size-14); text-align: right; } .comments-link a { color: var(--color-link-comment); } .comments-link:hover, .comments-link:focus, .comments-link a:hover, .comments-link a:focus { color: var(--color-black); } .comments-link svg { margin-right: 7px; position: relative; top: -1px; } @media (min-width: 480px) { .comment-form { display: grid; grid-gap: 1em; grid-template-columns: 1fr 1fr; /* autoprefixer: off */ justify-content: center; } .comment-form .comment-notes, .comment-form .comment-form-comment, .comment-form .form-submit { grid-column: 1 / span 2; } } .comment-respond { margin-bottom: 0; overflow: visible; } @media (max-width: 480px) { .comment-respond input { width: 100%; } } .comment-respond .comment-form-author { margin-bottom: 20px; margin-top: 0; } .comment-respond .comment-form-author input { border-width: 1px; padding: 15px; width: 100%; } .comment-respond .comment-form-email { clear: right; margin-bottom: 20px; margin-right: 0; margin-top: 0; } .comment-respond .comment-form-email input { border-width: 1px; padding: 15px; width: 100%; } .comment-respond .comment-form-url { margin-bottom: 30px; margin-top: 0; position: relative; } .comment-respond .comment-form-url input { border-width: 1px; padding: 15px; width: 100%; } .comment-respond .form-submit { clear: both; display: block; margin-bottom: 0; margin-top: 0; } .comment-respond .comment-form-comment { margin-bottom: 20px; } .comment-respond textarea { width: 100%; } /* stylelint-enable no-descending-specificity */ .editor-styles-wrapper, .gutenberg-content { max-width: 100%; padding-bottom: var(--padding-block); padding-left: 0; padding-right: 0; padding-top: var(--padding-block); } .gutenberg-content > * { line-height: var(--line-height-paragraphs-blog); margin-left: auto; margin-right: auto; max-width: 800px; padding-left: 0; padding-right: 0; width: 100%; } @media (max-width: 840px) { .gutenberg-content > * { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .gutenberg-content > *.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } } .editor-styles-wrapper blockquote + cite, .editor-styles-wrapper blockquote + p > cite, .gutenberg-content blockquote + cite, .gutenberg-content blockquote + p > cite { margin-bottom: 4rem; } .editor-styles-wrapper > blockquote, .editor-styles-wrapper > blockquote.wp-block-quote, .gutenberg-content > blockquote, .gutenberg-content > blockquote.wp-block-quote { border-left: 2px solid var(--color-blockquote); line-height: var(--line-height-paragraphs-blog); margin-bottom: 4rem; margin-left: auto; margin-right: auto; margin-top: 4rem; padding: 3.5rem 6rem; width: calc(100% - 12rem); } @media (max-width: 840px) { .editor-styles-wrapper > blockquote, .editor-styles-wrapper > blockquote.wp-block-quote, .gutenberg-content > blockquote, .gutenberg-content > blockquote.wp-block-quote { padding: 3.5rem 2rem; width: calc(100% - 4rem); } } @media (max-width: 480px) { .editor-styles-wrapper > blockquote, .editor-styles-wrapper > blockquote.wp-block-quote, .gutenberg-content > blockquote, .gutenberg-content > blockquote.wp-block-quote { padding: 4rem 4rem 4rem 2rem; } } .editor-styles-wrapper > blockquote > p, .editor-styles-wrapper > blockquote.wp-block-quote > p, .gutenberg-content > blockquote > p, .gutenberg-content > blockquote.wp-block-quote > p { color: var(--color-blockquote); line-height: var(--line-height-paragraphs-blog); } .editor-styles-wrapper .wp-block-blockquote.alignwide, .editor-styles-wrapper .wp-block-blockquote.alignfull, .gutenberg-content .wp-block-blockquote.alignwide, .gutenberg-content .wp-block-blockquote.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-blockquote blockquote, .gutenberg-content .wp-block-blockquote blockquote { padding-bottom: 0; } pre { background-color: var(--color-background-code-block); border: 1px solid var(--color-background-code-block); border-radius: 4px; color: var(--color-code-text); display: block; font-family: "Inconsolata", "Menlo", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", monospace; font-size: var(--font-size-16); line-height: var(--line-height-paragraphs-blog); margin: 3rem 0; overflow: auto; padding: 15px 16px 14px; position: relative; white-space: pre; word-wrap: break-word; } pre code { background-color: transparent; border-radius: 4px; color: var(--color-code-text); } @media (max-width: 1240px) { .editor-styles-wrapper .wp-block-code, .gutenberg-content .wp-block-code { margin-left: var(--padding-container-horizontal); margin-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 4)); } } .editor-styles-wrapper pre, .gutenberg-content pre { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); } .editor-styles-wrapper .wp-block-columns.alignfull, .gutenberg-content .wp-block-columns.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); } .editor-styles-wrapper .wp-block-columns.columns-1.alignfull, .gutenberg-content .wp-block-columns.columns-1.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-columns.columns-1, .gutenberg-content .wp-block-columns.columns-1 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-columns.columns-1 .wp-block-column, .gutenberg-content .wp-block-columns.columns-1 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-columns.columns-1, .gutenberg-content .wp-block-columns.columns-1 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-columns.columns-2.alignfull, .gutenberg-content .wp-block-columns.columns-2.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-columns.columns-2, .gutenberg-content .wp-block-columns.columns-2 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-columns.columns-2 .wp-block-column, .gutenberg-content .wp-block-columns.columns-2 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-columns.columns-2, .gutenberg-content .wp-block-columns.columns-2 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-columns.columns-3.alignfull, .gutenberg-content .wp-block-columns.columns-3.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-columns.columns-3, .gutenberg-content .wp-block-columns.columns-3 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-columns.columns-3 .wp-block-column, .gutenberg-content .wp-block-columns.columns-3 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-columns.columns-3, .gutenberg-content .wp-block-columns.columns-3 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-columns.columns-4.alignfull, .gutenberg-content .wp-block-columns.columns-4.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-columns.columns-4, .gutenberg-content .wp-block-columns.columns-4 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-columns.columns-4 .wp-block-column, .gutenberg-content .wp-block-columns.columns-4 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-columns.columns-4, .gutenberg-content .wp-block-columns.columns-4 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-columns.columns-5.alignfull, .gutenberg-content .wp-block-columns.columns-5.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-columns.columns-5, .gutenberg-content .wp-block-columns.columns-5 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-columns.columns-5 .wp-block-column, .gutenberg-content .wp-block-columns.columns-5 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-columns.columns-5, .gutenberg-content .wp-block-columns.columns-5 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-columns.columns-6.alignfull, .gutenberg-content .wp-block-columns.columns-6.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-columns.columns-6, .gutenberg-content .wp-block-columns.columns-6 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-columns.columns-6 .wp-block-column, .gutenberg-content .wp-block-columns.columns-6 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-columns.columns-6, .gutenberg-content .wp-block-columns.columns-6 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-columns.columns-7.alignfull, .gutenberg-content .wp-block-columns.columns-7.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-columns.columns-7, .gutenberg-content .wp-block-columns.columns-7 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-columns.columns-7 .wp-block-column, .gutenberg-content .wp-block-columns.columns-7 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-columns.columns-7, .gutenberg-content .wp-block-columns.columns-7 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-columns.columns-8.alignfull, .gutenberg-content .wp-block-columns.columns-8.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-columns.columns-8, .gutenberg-content .wp-block-columns.columns-8 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-columns.columns-8 .wp-block-column, .gutenberg-content .wp-block-columns.columns-8 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-columns.columns-8, .gutenberg-content .wp-block-columns.columns-8 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-columns.columns-9.alignfull, .gutenberg-content .wp-block-columns.columns-9.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-columns.columns-9, .gutenberg-content .wp-block-columns.columns-9 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-columns.columns-9 .wp-block-column, .gutenberg-content .wp-block-columns.columns-9 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-columns.columns-9, .gutenberg-content .wp-block-columns.columns-9 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-cover__inner-container, .gutenberg-content .wp-block-cover__inner-container { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); } .editor-styles-wrapper .wp-block-cover__inner-container p, .gutenberg-content .wp-block-cover__inner-container p { line-height: var(--line-height-core-heading); } .editor-styles-wrapper .wp-block-embed iframe, .editor-styles-wrapper .wp-block-embed video, .gutenberg-content .wp-block-embed iframe, .gutenberg-content .wp-block-embed video { max-width: 100%; width: 100%; } @media (max-width: 1240px) { .editor-styles-wrapper .wp-block-embed.alignwide, .editor-styles-wrapper .wp-block-embed.alignfull, .gutenberg-content .wp-block-embed.alignwide, .gutenberg-content .wp-block-embed.alignfull { width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } } .editor-styles-wrapper .wp-block-embed.alignfull, .gutenberg-content .wp-block-embed.alignfull { margin-left: 0; margin-right: 0; max-width: 100%; padding-left: 0; padding-right: 0; width: 100%; } .editor-styles-wrapper .is-grid, .editor-styles-wrapper .wp-block-gallery, .gutenberg-content .is-grid, .gutenberg-content .wp-block-gallery { overflow: hidden; } .editor-styles-wrapper .is-grid figcaption, .editor-styles-wrapper .wp-block-gallery figcaption, .gutenberg-content .is-grid figcaption, .gutenberg-content .wp-block-gallery figcaption { color: var(--color-white); font-size: var(--font-size-16); line-height: 1.55; margin-bottom: var(--margin-between-text-elements); width: 100%; } .editor-styles-wrapper .is-grid img, .editor-styles-wrapper .wp-block-gallery img, .gutenberg-content .is-grid img, .gutenberg-content .wp-block-gallery img { margin-bottom: 0; } .editor-styles-wrapper .is-grid.alignwide, .editor-styles-wrapper .wp-block-gallery.alignwide, .gutenberg-content .is-grid.alignwide, .gutenberg-content .wp-block-gallery.alignwide { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); } .editor-styles-wrapper .is-grid.alignfull, .editor-styles-wrapper .wp-block-gallery.alignfull, .gutenberg-content .is-grid.alignfull, .gutenberg-content .wp-block-gallery.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .is-grid, .editor-styles-wrapper .blocks-gallery-grid, .gutenberg-content .is-grid, .gutenberg-content .blocks-gallery-grid { display: grid; padding-left: 0; } .editor-styles-wrapper .is-grid .blocks-gallery-item, .editor-styles-wrapper .blocks-gallery-grid .blocks-gallery-item, .gutenberg-content .is-grid .blocks-gallery-item, .gutenberg-content .blocks-gallery-grid .blocks-gallery-item { margin: 0; width: 100%; } .editor-styles-wrapper .is-grid.columns-2, .editor-styles-wrapper .columns-2 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-2, .gutenberg-content .columns-2 .blocks-gallery-grid { grid-gap: 3rem; grid-template-columns: repeat(2, 1fr); } @media (max-width: 1000px) { .editor-styles-wrapper .is-grid.columns-2, .editor-styles-wrapper .columns-2 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-2, .gutenberg-content .columns-2 .blocks-gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 670px) { .editor-styles-wrapper .is-grid.columns-2, .editor-styles-wrapper .columns-2 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-2, .gutenberg-content .columns-2 .blocks-gallery-grid { grid-gap: 2rem; grid-template-columns: repeat(2, 1fr); } } .editor-styles-wrapper .is-grid.columns-3, .editor-styles-wrapper .columns-3 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-3, .gutenberg-content .columns-3 .blocks-gallery-grid { grid-gap: 3rem; grid-template-columns: repeat(3, 1fr); } @media (max-width: 1000px) { .editor-styles-wrapper .is-grid.columns-3, .editor-styles-wrapper .columns-3 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-3, .gutenberg-content .columns-3 .blocks-gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 670px) { .editor-styles-wrapper .is-grid.columns-3, .editor-styles-wrapper .columns-3 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-3, .gutenberg-content .columns-3 .blocks-gallery-grid { grid-gap: 2rem; grid-template-columns: repeat(2, 1fr); } } .editor-styles-wrapper .is-grid.columns-4, .editor-styles-wrapper .columns-4 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-4, .gutenberg-content .columns-4 .blocks-gallery-grid { grid-gap: 3rem; grid-template-columns: repeat(4, 1fr); } @media (max-width: 1000px) { .editor-styles-wrapper .is-grid.columns-4, .editor-styles-wrapper .columns-4 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-4, .gutenberg-content .columns-4 .blocks-gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 670px) { .editor-styles-wrapper .is-grid.columns-4, .editor-styles-wrapper .columns-4 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-4, .gutenberg-content .columns-4 .blocks-gallery-grid { grid-gap: 2rem; grid-template-columns: repeat(2, 1fr); } } .editor-styles-wrapper .is-grid.columns-5, .editor-styles-wrapper .columns-5 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-5, .gutenberg-content .columns-5 .blocks-gallery-grid { grid-gap: 3rem; grid-template-columns: repeat(5, 1fr); } @media (max-width: 1000px) { .editor-styles-wrapper .is-grid.columns-5, .editor-styles-wrapper .columns-5 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-5, .gutenberg-content .columns-5 .blocks-gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 670px) { .editor-styles-wrapper .is-grid.columns-5, .editor-styles-wrapper .columns-5 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-5, .gutenberg-content .columns-5 .blocks-gallery-grid { grid-gap: 2rem; grid-template-columns: repeat(2, 1fr); } } .editor-styles-wrapper .is-grid.columns-6, .editor-styles-wrapper .columns-6 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-6, .gutenberg-content .columns-6 .blocks-gallery-grid { grid-gap: 3rem; grid-template-columns: repeat(6, 1fr); } @media (max-width: 1000px) { .editor-styles-wrapper .is-grid.columns-6, .editor-styles-wrapper .columns-6 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-6, .gutenberg-content .columns-6 .blocks-gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 670px) { .editor-styles-wrapper .is-grid.columns-6, .editor-styles-wrapper .columns-6 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-6, .gutenberg-content .columns-6 .blocks-gallery-grid { grid-gap: 2rem; grid-template-columns: repeat(2, 1fr); } } .editor-styles-wrapper .is-grid.columns-7, .editor-styles-wrapper .columns-7 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-7, .gutenberg-content .columns-7 .blocks-gallery-grid { grid-gap: 3rem; grid-template-columns: repeat(7, 1fr); } @media (max-width: 1000px) { .editor-styles-wrapper .is-grid.columns-7, .editor-styles-wrapper .columns-7 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-7, .gutenberg-content .columns-7 .blocks-gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 670px) { .editor-styles-wrapper .is-grid.columns-7, .editor-styles-wrapper .columns-7 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-7, .gutenberg-content .columns-7 .blocks-gallery-grid { grid-gap: 2rem; grid-template-columns: repeat(2, 1fr); } } .editor-styles-wrapper .is-grid.columns-8, .editor-styles-wrapper .columns-8 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-8, .gutenberg-content .columns-8 .blocks-gallery-grid { grid-gap: 3rem; grid-template-columns: repeat(8, 1fr); } @media (max-width: 1000px) { .editor-styles-wrapper .is-grid.columns-8, .editor-styles-wrapper .columns-8 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-8, .gutenberg-content .columns-8 .blocks-gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 670px) { .editor-styles-wrapper .is-grid.columns-8, .editor-styles-wrapper .columns-8 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-8, .gutenberg-content .columns-8 .blocks-gallery-grid { grid-gap: 2rem; grid-template-columns: repeat(2, 1fr); } } .editor-styles-wrapper .is-grid.columns-9, .editor-styles-wrapper .columns-9 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-9, .gutenberg-content .columns-9 .blocks-gallery-grid { grid-gap: 3rem; grid-template-columns: repeat(9, 1fr); } @media (max-width: 1000px) { .editor-styles-wrapper .is-grid.columns-9, .editor-styles-wrapper .columns-9 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-9, .gutenberg-content .columns-9 .blocks-gallery-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 670px) { .editor-styles-wrapper .is-grid.columns-9, .editor-styles-wrapper .columns-9 .blocks-gallery-grid, .gutenberg-content .is-grid.columns-9, .gutenberg-content .columns-9 .blocks-gallery-grid { grid-gap: 2rem; grid-template-columns: repeat(2, 1fr); } } .editor-styles-wrapper .blocks-gallery-item > figure figcaption, .gutenberg-content .blocks-gallery-item > figure figcaption { margin-bottom: 0; } .editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .gutenberg-content h1, .gutenberg-content h2, .gutenberg-content h3, .gutenberg-content h4, .gutenberg-content h5 { line-height: var(--line-height-core-heading); } .editor-styles-wrapper h1:first-child, .editor-styles-wrapper h2:first-child, .editor-styles-wrapper h3:first-child, .editor-styles-wrapper h4:first-child, .editor-styles-wrapper h5:first-child, .editor-styles-wrapper h6:first-child, .gutenberg-content h1:first-child, .gutenberg-content h2:first-child, .gutenberg-content h3:first-child, .gutenberg-content h4:first-child, .gutenberg-content h5:first-child, .gutenberg-content h6:first-child { margin-top: 0; } .editor-styles-wrapper .wp-block-image, .gutenberg-content .wp-block-image { display: block; margin-bottom: var(--margin-wp-block-image); margin-top: var(--margin-wp-block-image); } .editor-styles-wrapper .wp-block-image.alignfull, .gutenberg-content .wp-block-image.alignfull { padding-left: 0; padding-right: 0; } @media (min-width: 1240px) { .editor-styles-wrapper .wp-block-image.alignwide, .gutenberg-content .wp-block-image.alignwide { padding-left: 0; padding-right: 0; } } @media (max-width: 1240px) { .editor-styles-wrapper .wp-block-image.alignwide, .gutenberg-content .wp-block-image.alignwide { width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } } .editor-styles-wrapper .wp-block-image .alignwide img, .editor-styles-wrapper .wp-block-image .alignfull img, .gutenberg-content .wp-block-image .alignwide img, .gutenberg-content .wp-block-image .alignfull img { width: 100%; } .editor-styles-wrapper .wp-block-image .alignfull img, .gutenberg-content .wp-block-image .alignfull img { border-radius: 0; } .editor-styles-wrapper .wp-block-image > figure, .gutenberg-content .wp-block-image > figure { display: block; width: auto; } .editor-styles-wrapper .wp-block-image > figure.alignleft, .editor-styles-wrapper .wp-block-image > figure.alignright, .gutenberg-content .wp-block-image > figure.alignleft, .gutenberg-content .wp-block-image > figure.alignright { /* stylelint-disable csstools/value-no-unknown-custom-properties */ max-width: var(--width-child-img); /* stylelint-enable */ } .editor-styles-wrapper .wp-block-image figcaption, .gutenberg-content .wp-block-image figcaption { margin-bottom: 2rem; } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-image.alignleft img, .editor-styles-wrapper .wp-block-image.alignright img, .editor-styles-wrapper .wp-block-image.aligncenter img, .gutenberg-content .wp-block-image.alignleft img, .gutenberg-content .wp-block-image.alignright img, .gutenberg-content .wp-block-image.aligncenter img { float: none; height: auto; width: 100%; } } .editor-styles-wrapper .wp-block-image .aligncenter, .gutenberg-content .wp-block-image .aligncenter { text-align: center; } .editor-styles-wrapper .wp-block-image .aligncenter img, .gutenberg-content .wp-block-image .aligncenter img { margin-left: auto; margin-right: auto; } .editor-styles-wrapper .wp-block-categories-list, .editor-styles-wrapper ol:not([class]), .editor-styles-wrapper ul:not([class]), .gutenberg-content .wp-block-categories-list, .gutenberg-content ol:not([class]), .gutenberg-content ul:not([class]) { padding-left: calc(2rem + var(--margin-between-paragraphs)); } .editor-styles-wrapper p, .gutenberg-content p { color: var(--color-paragraph); line-height: var(--line-height-paragraphs-blog); } .editor-styles-wrapper .has-larger-font-size, .editor-styles-wrapper .has-large-font-size, .gutenberg-content .has-larger-font-size, .gutenberg-content .has-large-font-size { line-height: var(--line-height-headings); } @media (max-width: 480px) { .editor-styles-wrapper .has-large-font-size, .gutenberg-content .has-large-font-size { font-size: var(--font-size-18); } } @media (max-width: 480px) { .editor-styles-wrapper .has-larger-font-size, .gutenberg-content .has-larger-font-size { font-size: var(--font-size-22); } } @media (max-width: 1240px) { .editor-styles-wrapper .has-background, .gutenberg-content .has-background { width: calc(100% - calc(2.375em * 2)); } } @media (max-width: 1240px) { .editor-styles-wrapper .wp-block-preformatted, .gutenberg-content .wp-block-preformatted { margin-left: var(--padding-container-horizontal); margin-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 4)); } } .editor-styles-wrapper .wp-block-pullquote.alignwide, .editor-styles-wrapper .wp-block-pullquote.alignfull, .gutenberg-content .wp-block-pullquote.alignwide, .gutenberg-content .wp-block-pullquote.alignfull { padding-left: 0; padding-right: 0; } @media (max-width: 1240px) { .editor-styles-wrapper .wp-block-pullquote.alignwide, .editor-styles-wrapper .wp-block-pullquote.alignfull, .gutenberg-content .wp-block-pullquote.alignwide, .gutenberg-content .wp-block-pullquote.alignfull { margin-left: var(--padding-container-horizontal); margin-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } } .editor-styles-wrapper .wp-block-pullquote.alignfull, .gutenberg-content .wp-block-pullquote.alignfull { margin-left: var(--padding-container-horizontal); margin-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } table { border-collapse: collapse; border-spacing: 0; } td, th { font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; height: 3rem; padding: 1rem; } th { font-weight: var(--font-weight-bold); } .editor-styles-wrapper .wp-block-table.alignfull, .gutenberg-content .wp-block-table.alignfull { margin-left: var(--padding-container-horizontal); margin-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 1240px) { .editor-styles-wrapper .wp-block-table.alignwide, .gutenberg-content .wp-block-table.alignwide { margin-left: var(--padding-container-horizontal); margin-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } } .editor-styles-wrapper .wp-block-text-columns.alignfull, .gutenberg-content .wp-block-text-columns.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); } .editor-styles-wrapper .wp-block-text-columns.columns-1.alignfull, .gutenberg-content .wp-block-text-columns.columns-1.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-text-columns.columns-1, .gutenberg-content .wp-block-text-columns.columns-1 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-text-columns.columns-1 .wp-block-column, .gutenberg-content .wp-block-text-columns.columns-1 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-text-columns.columns-1, .gutenberg-content .wp-block-text-columns.columns-1 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-text-columns.columns-2.alignfull, .gutenberg-content .wp-block-text-columns.columns-2.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-text-columns.columns-2, .gutenberg-content .wp-block-text-columns.columns-2 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-text-columns.columns-2 .wp-block-column, .gutenberg-content .wp-block-text-columns.columns-2 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-text-columns.columns-2, .gutenberg-content .wp-block-text-columns.columns-2 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-text-columns.columns-3.alignfull, .gutenberg-content .wp-block-text-columns.columns-3.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-text-columns.columns-3, .gutenberg-content .wp-block-text-columns.columns-3 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-text-columns.columns-3 .wp-block-column, .gutenberg-content .wp-block-text-columns.columns-3 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-text-columns.columns-3, .gutenberg-content .wp-block-text-columns.columns-3 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-text-columns.columns-4.alignfull, .gutenberg-content .wp-block-text-columns.columns-4.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-text-columns.columns-4, .gutenberg-content .wp-block-text-columns.columns-4 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-text-columns.columns-4 .wp-block-column, .gutenberg-content .wp-block-text-columns.columns-4 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-text-columns.columns-4, .gutenberg-content .wp-block-text-columns.columns-4 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-text-columns.columns-5.alignfull, .gutenberg-content .wp-block-text-columns.columns-5.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-text-columns.columns-5, .gutenberg-content .wp-block-text-columns.columns-5 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-text-columns.columns-5 .wp-block-column, .gutenberg-content .wp-block-text-columns.columns-5 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-text-columns.columns-5, .gutenberg-content .wp-block-text-columns.columns-5 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-text-columns.columns-6.alignfull, .gutenberg-content .wp-block-text-columns.columns-6.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-text-columns.columns-6, .gutenberg-content .wp-block-text-columns.columns-6 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-text-columns.columns-6 .wp-block-column, .gutenberg-content .wp-block-text-columns.columns-6 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-text-columns.columns-6, .gutenberg-content .wp-block-text-columns.columns-6 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-text-columns.columns-7.alignfull, .gutenberg-content .wp-block-text-columns.columns-7.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-text-columns.columns-7, .gutenberg-content .wp-block-text-columns.columns-7 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-text-columns.columns-7 .wp-block-column, .gutenberg-content .wp-block-text-columns.columns-7 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-text-columns.columns-7, .gutenberg-content .wp-block-text-columns.columns-7 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-text-columns.columns-8.alignfull, .gutenberg-content .wp-block-text-columns.columns-8.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-text-columns.columns-8, .gutenberg-content .wp-block-text-columns.columns-8 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-text-columns.columns-8 .wp-block-column, .gutenberg-content .wp-block-text-columns.columns-8 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-text-columns.columns-8, .gutenberg-content .wp-block-text-columns.columns-8 { grid-template-columns: repeat(1, 1fr); } } .editor-styles-wrapper .wp-block-text-columns.columns-9.alignfull, .gutenberg-content .wp-block-text-columns.columns-9.alignfull { padding-left: var(--padding-container-horizontal); padding-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } @media (max-width: 900px) { .editor-styles-wrapper .wp-block-text-columns.columns-9, .gutenberg-content .wp-block-text-columns.columns-9 { display: grid; grid-gap: 1em; grid-template-columns: repeat(2, 1fr); width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } .editor-styles-wrapper .wp-block-text-columns.columns-9 .wp-block-column, .gutenberg-content .wp-block-text-columns.columns-9 .wp-block-column { margin: 0; width: 100%; } } @media (max-width: 480px) { .editor-styles-wrapper .wp-block-text-columns.columns-9, .gutenberg-content .wp-block-text-columns.columns-9 { grid-template-columns: repeat(1, 1fr); } } @media (max-width: 1240px) { .editor-styles-wrapper .wp-block-verse, .gutenberg-content .wp-block-verse { margin-left: var(--padding-container-horizontal); margin-right: var(--padding-container-horizontal); width: calc(100% - calc(var(--padding-container-horizontal) * 4)); } } .editor-styles-wrapper .wp-block-video video, .gutenberg-content .wp-block-video video { max-width: 100%; width: 100%; } @media (max-width: 1240px) { .editor-styles-wrapper .wp-block-video.alignwide, .editor-styles-wrapper .wp-block-video.alignfull, .gutenberg-content .wp-block-video.alignwide, .gutenberg-content .wp-block-video.alignfull { width: calc(100% - calc(var(--padding-container-horizontal) * 2)); } } .editor-styles-wrapper .wp-block-video.alignfull, .gutenberg-content .wp-block-video.alignfull { margin-left: 0; margin-right: 0; max-width: 100%; padding-left: 0; padding-right: 0; width: 100%; } .wp-block.is-style-boxed, .is-style-boxed { border: 2px solid var(--color-paragraph); color: var(--color-paragraph); font-size: 17px; font-style: normal; font-weight: var(--font-weight-medium); line-height: var(--line-height-paragraphs-blog); padding: 2rem; width: calc(100% - 4rem); } @media (min-width: 840px) { .gutenberg-content .is-style-boxed { transform: translate(2rem, 0); } } .wp-block-button__link { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--color-button-background); border: 0; border-radius: 3px; color: var(--color-button); cursor: pointer; display: inline-block; font-family: "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; font-size: var(--font-size-16); font-weight: 700; line-height: 1; margin-bottom: 0; padding-bottom: 12px; padding-left: 25px; padding-right: 25px; padding-top: 12px; position: relative; text-decoration: none; transition: all 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94); width: auto; /* stylelint-disable a11y/no-display-none */ /* stylelint-enable */ } .wp-block-button__link.is-external-link::after { display: none; } .wp-block-button__link:hover, .wp-block-button__link:focus { background-color: var(--color-button-background-hover); border-color: var(--color-button-hover); color: var(--color-button-hover); } .wp-block-file .wp-block-file__button { font-size: var(--font-size-16); padding-bottom: 8px; padding-left: 17px; padding-right: 17px; padding-top: 8px; font-size: .8em; padding: .3em .8em; } .editor-styles-wrapper .alignleft > *, .gutenberg-content .alignleft > * { float: left; } .editor-styles-wrapper .alignright > *, .gutenberg-content .alignright > * { float: right; } .editor-styles-wrapper .alignleft > img, .gutenberg-content .alignleft > img { margin-bottom: var(--margin-between-paragraphs); margin-right: var(--padding-container-horizontal); margin-top: var(--margin-between-paragraphs); } .editor-styles-wrapper .alignleft > img + figcaption, .gutenberg-content .alignleft > img + figcaption { margin-top: 0; } .editor-styles-wrapper .alignright > img, .gutenberg-content .alignright > img { margin-bottom: var(--margin-between-paragraphs); margin-left: var(--padding-container-horizontal); margin-top: var(--margin-between-paragraphs); } .editor-styles-wrapper .alignright > img + figcaption, .gutenberg-content .alignright > img + figcaption { margin-top: 0; } @media (min-width: 1240px) { .editor-styles-wrapper .alignwide, .gutenberg-content .alignwide { max-width: 1200px; width: 100%; } } @media (min-width: 1240px) { .editor-styles-wrapper .alignfull, .gutenberg-content .alignfull { margin-bottom: var(--padding-block); margin-top: var(--padding-block); max-width: 100%; width: 100%; } } .editor-styles-wrapper .alignfull.wp-block-image img, .gutenberg-content .alignfull.wp-block-image img { border-radius: 0; } /* stylelint-disable selector-max-combinators, selector-max-compound-selectors */ .editor-styles-wrapper figcaption, .editor-styles-wrapper cite, .editor-styles-wrapper small, .gutenberg-content figcaption, .gutenberg-content cite, .gutenberg-content small { border: 0; color: var(--color-caption); font-size: var(--font-size-captions); font-style: normal; margin-bottom: 6rem; margin-left: auto; margin-right: auto; margin-top: 3rem; max-width: 800px; padding-bottom: 0; text-align: center; width: 100%; } @media (max-width: 480px) { .editor-styles-wrapper figcaption, .editor-styles-wrapper cite, .editor-styles-wrapper small, .gutenberg-content figcaption, .gutenberg-content cite, .gutenberg-content small { margin-top: 2rem; } } .editor-styles-wrapper .wp-block-image figcaption, .editor-styles-wrapper .wp-block-image .alignright > figcaption, .editor-styles-wrapper .wp-block-image .aligncenter > figcaption, .editor-styles-wrapper .wp-block-image.is-resized > figcaption, .gutenberg-content .wp-block-image figcaption, .gutenberg-content .wp-block-image .alignright > figcaption, .gutenberg-content .wp-block-image .aligncenter > figcaption, .gutenberg-content .wp-block-image.is-resized > figcaption { display: block; width: 100%; } .editor-styles-wrapper cite, .gutenberg-content cite { margin-bottom: 0; } .editor-styles-wrapper img, .gutenberg-content img { border-radius: 4px; } kbd { background-color: var(--color-kbd-background); border: 1px solid var(--color-kbd-border); border-radius: 4px; box-shadow: 0 1px 0 rgba(22, 22, 22, 0.2), 0 0 0 2px var(--color-white) inset; color: var(--color-paragraph); display: inline-block; line-height: 1.4; padding: 0 .5rem; text-shadow: 0 1px 0 var(--color-white); white-space: nowrap; } /* stylelint-disable a11y/no-display-none, no-descending-specificity, selector-max-pseudo-class */ a { color: var(--color-link-text); text-decoration: none; } a:hover, a:focus { color: var(--color-link-text); } .editor-styles-wrapper li > a::after, .gutenberg-content li > a::after { display: none; } .editor-styles-wrapper [data-type="core/paragraph"] > a, .editor-styles-wrapper li > a, .editor-styles-wrapper p > strong > a, .editor-styles-wrapper p > em > a, .editor-styles-wrapper p:not([class]) > a:not([class]), .editor-styles-wrapper p.has-text-align-left > a, .editor-styles-wrapper p.has-text-align-center > a, .editor-styles-wrapper p.has-text-align-right > a, .editor-styles-wrapper p.has-small-font-size > a, .editor-styles-wrapper figcaption > a, .editor-styles-wrapper p:not([class]) > a.is-external-link, .gutenberg-content [data-type="core/paragraph"] > a, .gutenberg-content li > a, .gutenberg-content p > strong > a, .gutenberg-content p > em > a, .gutenberg-content p:not([class]) > a:not([class]), .gutenberg-content p.has-text-align-left > a, .gutenberg-content p.has-text-align-center > a, .gutenberg-content p.has-text-align-right > a, .gutenberg-content p.has-small-font-size > a, .gutenberg-content figcaption > a, .gutenberg-content p:not([class]) > a.is-external-link { border-bottom: 1px solid var(--color-link-border-bottom); box-shadow: inset 0 0 0 var(--color-link-background-hover); color: var(--color-link-text); display: inline; text-decoration: none; transition: box-shadow 0.1s cubic-bezier(0.19, 1, 0.22, 1), color 0.1s cubic-bezier(0.19, 1, 0.22, 1); } .editor-styles-wrapper [data-type="core/paragraph"] > a::after, .editor-styles-wrapper li > a::after, .editor-styles-wrapper p > strong > a::after, .editor-styles-wrapper p > em > a::after, .editor-styles-wrapper p:not([class]) > a:not([class])::after, .editor-styles-wrapper p.has-text-align-left > a::after, .editor-styles-wrapper p.has-text-align-center > a::after, .editor-styles-wrapper p.has-text-align-right > a::after, .editor-styles-wrapper p.has-small-font-size > a::after, .editor-styles-wrapper figcaption > a::after, .editor-styles-wrapper p:not([class]) > a.is-external-link::after, .gutenberg-content [data-type="core/paragraph"] > a::after, .gutenberg-content li > a::after, .gutenberg-content p > strong > a::after, .gutenberg-content p > em > a::after, .gutenberg-content p:not([class]) > a:not([class])::after, .gutenberg-content p.has-text-align-left > a::after, .gutenberg-content p.has-text-align-center > a::after, .gutenberg-content p.has-text-align-right > a::after, .gutenberg-content p.has-small-font-size > a::after, .gutenberg-content figcaption > a::after, .gutenberg-content p:not([class]) > a.is-external-link::after { background-image: url("../../svg/external-link-styled-links.svg"); } .editor-styles-wrapper [data-type="core/paragraph"] > a:hover, .editor-styles-wrapper li > a:hover, .editor-styles-wrapper p > strong > a:hover, .editor-styles-wrapper p > em > a:hover, .editor-styles-wrapper p:not([class]) > a:not([class]):hover, .editor-styles-wrapper p.has-text-align-left > a:hover, .editor-styles-wrapper p.has-text-align-center > a:hover, .editor-styles-wrapper p.has-text-align-right > a:hover, .editor-styles-wrapper p.has-small-font-size > a:hover, .editor-styles-wrapper figcaption > a:hover, .editor-styles-wrapper p:not([class]) > a.is-external-link:hover, .gutenberg-content [data-type="core/paragraph"] > a:hover, .gutenberg-content li > a:hover, .gutenberg-content p > strong > a:hover, .gutenberg-content p > em > a:hover, .gutenberg-content p:not([class]) > a:not([class]):hover, .gutenberg-content p.has-text-align-left > a:hover, .gutenberg-content p.has-text-align-center > a:hover, .gutenberg-content p.has-text-align-right > a:hover, .gutenberg-content p.has-small-font-size > a:hover, .gutenberg-content figcaption > a:hover, .gutenberg-content p:not([class]) > a.is-external-link:hover { border-color: transparent; box-shadow: inset 0 -3.3rem 0 var(--color-link-background-hover); color: var(--color-link-text-hover); } .editor-styles-wrapper [data-type="core/paragraph"] > a:hover::after, .editor-styles-wrapper li > a:hover::after, .editor-styles-wrapper p > strong > a:hover::after, .editor-styles-wrapper p > em > a:hover::after, .editor-styles-wrapper p:not([class]) > a:not([class]):hover::after, .editor-styles-wrapper p.has-text-align-left > a:hover::after, .editor-styles-wrapper p.has-text-align-center > a:hover::after, .editor-styles-wrapper p.has-text-align-right > a:hover::after, .editor-styles-wrapper p.has-small-font-size > a:hover::after, .editor-styles-wrapper figcaption > a:hover::after, .editor-styles-wrapper p:not([class]) > a.is-external-link:hover::after, .gutenberg-content [data-type="core/paragraph"] > a:hover::after, .gutenberg-content li > a:hover::after, .gutenberg-content p > strong > a:hover::after, .gutenberg-content p > em > a:hover::after, .gutenberg-content p:not([class]) > a:not([class]):hover::after, .gutenberg-content p.has-text-align-left > a:hover::after, .gutenberg-content p.has-text-align-center > a:hover::after, .gutenberg-content p.has-text-align-right > a:hover::after, .gutenberg-content p.has-small-font-size > a:hover::after, .gutenberg-content figcaption > a:hover::after, .gutenberg-content p:not([class]) > a.is-external-link:hover::after { background-image: url("../../svg/external-link-white.svg"); } .editor-styles-wrapper [data-type="core/paragraph"] > a:focus, .editor-styles-wrapper li > a:focus, .editor-styles-wrapper p > strong > a:focus, .editor-styles-wrapper p > em > a:focus, .editor-styles-wrapper p:not([class]) > a:not([class]):focus, .editor-styles-wrapper p.has-text-align-left > a:focus, .editor-styles-wrapper p.has-text-align-center > a:focus, .editor-styles-wrapper p.has-text-align-right > a:focus, .editor-styles-wrapper p.has-small-font-size > a:focus, .editor-styles-wrapper figcaption > a:focus, .editor-styles-wrapper p:not([class]) > a.is-external-link:focus, .gutenberg-content [data-type="core/paragraph"] > a:focus, .gutenberg-content li > a:focus, .gutenberg-content p > strong > a:focus, .gutenberg-content p > em > a:focus, .gutenberg-content p:not([class]) > a:not([class]):focus, .gutenberg-content p.has-text-align-left > a:focus, .gutenberg-content p.has-text-align-center > a:focus, .gutenberg-content p.has-text-align-right > a:focus, .gutenberg-content p.has-small-font-size > a:focus, .gutenberg-content figcaption > a:focus, .gutenberg-content p:not([class]) > a.is-external-link:focus { border-color: var(--color-link-border-focus); color: var(--color-link-text-focus); text-decoration: none; } .editor-styles-wrapper [data-type="core/paragraph"] > a:focus::after, .editor-styles-wrapper li > a:focus::after, .editor-styles-wrapper p > strong > a:focus::after, .editor-styles-wrapper p > em > a:focus::after, .editor-styles-wrapper p:not([class]) > a:not([class]):focus::after, .editor-styles-wrapper p.has-text-align-left > a:focus::after, .editor-styles-wrapper p.has-text-align-center > a:focus::after, .editor-styles-wrapper p.has-text-align-right > a:focus::after, .editor-styles-wrapper p.has-small-font-size > a:focus::after, .editor-styles-wrapper figcaption > a:focus::after, .editor-styles-wrapper p:not([class]) > a.is-external-link:focus::after, .gutenberg-content [data-type="core/paragraph"] > a:focus::after, .gutenberg-content li > a:focus::after, .gutenberg-content p > strong > a:focus::after, .gutenberg-content p > em > a:focus::after, .gutenberg-content p:not([class]) > a:not([class]):focus::after, .gutenberg-content p.has-text-align-left > a:focus::after, .gutenberg-content p.has-text-align-center > a:focus::after, .gutenberg-content p.has-text-align-right > a:focus::after, .gutenberg-content p.has-small-font-size > a:focus::after, .gutenberg-content figcaption > a:focus::after, .gutenberg-content p:not([class]) > a.is-external-link:focus::after { background-image: url("../../svg/external-link-black.svg"); }