@charset "UTF-8"; .base-archetype .block-image, .index-archetype .block-image, .base-archetype .block-text, .index-archetype .block-text, .base-archetype .block-cta_list, .index-archetype .block-cta_list, .base-archetype .block-callout, .index-archetype .block-callout, .base-archetype .block-embed, .index-archetype .block-embed, .base-archetype .block-page_list, .index-archetype .block-page_list, .base-archetype .block-person_list, .index-archetype .block-person_list, .base-archetype .block-organization_list, .index-archetype .block-organization_list, .base-archetype .block-session, .index-archetype .block-session, .base-archetype .block-gallery, .index-archetype .block-gallery, .base-archetype .block-column_set, .index-archetype .block-column_set, .base-archetype .block-stat_row, .index-archetype .block-stat_row, .base-archetype .block-accordion, .index-archetype .block-accordion { margin-block: 6rem; } .detail-archetype .block-image, .detail-archetype .block-text, .detail-archetype .block-cta_list, .detail-archetype .block-callout, .detail-archetype .block-embed, .detail-archetype .block-page_list, .detail-archetype .block-person_list, .detail-archetype .block-organization_list, .detail-archetype .block-session, .detail-archetype .block-gallery, .detail-archetype .block-column_set, .detail-archetype .block-stat_row, .detail-archetype .block-accordion { margin-block: 3rem; } /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @font-face { font-family: "Eastman-Grotesque"; src: url("/static/fonts/Eastman-Grotesque-Bold.woff2"); src: url("/static/fonts/Eastman-Grotesque-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; } @font-face { font-family: "Eastman-Grotesque"; src: url("/static/fonts/Eastman-Grotesque-Bold-Italic.woff2"); src: url("/static/fonts/Eastman-Grotesque-Bold-Italic.woff2") format("woff2"); font-weight: 700; font-style: italic; } @font-face { font-family: "Eastman-Grotesque"; src: url("/static/fonts/Eastman-Grotesque-Regular.woff2"); src: url("/static/fonts/Eastman-Grotesque-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: "Eastman-Grotesque"; src: url("/static/fonts/Eastman-Grotesque-Regular-Italic.woff2"); src: url("/static/fonts/Eastman-Grotesque-Regular-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; } @font-face { font-family: "Eastman-Grotesque"; src: url("/static/fonts/Eastman-Grotesque-Light.woff2"); src: url("/static/fonts/Eastman-Grotesque-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; } @font-face { font-family: "Eastman-Grotesque"; src: url("/static/fonts/Eastman-Grotesque-Light-Italic.woff2"); src: url("/static/fonts/Eastman-Grotesque-Light-Italic.woff2") format("woff2"); font-weight: 300; font-style: italic; } html { --aqua: hsl(185, 100%, 37%); --teal: hsl(188, 100%, 29%); --peach: hsl(21, 86%, 74%); --citrus: hsl(41, 97%, 53%); --burnt-orange: hsl(21, 84%, 62%); --bright-yellow: hsl(56, 100%, 65%); --deep-gray: hsl(0, 3%, 10%); --off-white: hsl(44, 20%, 98%); --white: white; --black: hsl(0, 3%, 10%); --light-blue: hsl(185, 100%, 75%); --light-peach: hsl(20, 95%, 85%); --red: hsl(355, 100%, 40%); --l-yellow-orange: linear-gradient(135deg, hsl(56, 100%, 65%) 0%, hsl(21, 84%, 62%) 100%); --l-lightblue-turquoise: linear-gradient(135deg, hsl(185, 100%, 75%) 0%, hsl(185, 100%, 37%) 100%); --l-lightpeach-orange: linear-gradient(135deg, #FDCEB6 0%, hsl(21, 84%, 62%) 100%); --r-lightblue-turquoise: radial-gradient(circle at 50% 50%, hsl(185, 100%, 75%) 0%, hsl(185, 100%, 37%) 75%); --r-brightyellow-orange: radial-gradient(circle at 50% 50%, hsl(56, 100%, 65%) 0%, hsl(21, 84%, 62%) 75%); --r-peach-orange: radial-gradient(circle at 50% 50%, #FDCEB6 0%, hsl(21, 84%, 62%) 50%); --radial-aqua: radial-gradient(circle at 50% 50%, white 0%, hsl(185, 100%, 37%) 75%); --radial-peach: radial-gradient(circle at 50% 50%, white 0%, hsl(21, 86%, 74%) 75%); --radial-light-blue: radial-gradient(circle at 50% 50%, white 0%, hsl(185, 100%, 75%) 75%); --radial-citrus: radial-gradient(circle at 50% 50%, white 0%, hsl(41, 97%, 53%) 75%); --loud: hsl(0, 3%, 10%); --spoken: hsl(0, 3%, 40%); --soft: hsl(0, 3%, 50%); --hushed: hsl(0, 3%, 60%); --breathy: hsl(0, 3%, 70%); --whisper: hsl(0, 3%, 80%); --quiet: hsl(44, 20%, 98%); --silent: white; --emphasis: hsl(41, 97%, 53%); --danger: hsl(355, 100%, 40%); --warning: hsl(21, 84%, 62%); --strange: hsl(21, 86%, 74%); --success: hsl(185, 100%, 37%); --info: hsl(188, 100%, 29%); --highlight: hsl(56, 100%, 65%); --hero: hsl(41, 97%, 53%); --invisible: transparent; --faded: hsla(0, 3%, 10%, 0.3); --dimmed: hsla(0, 3%, 10%, 0.3); --sans-font: "Eastman-Grotesque", sans-serif; --monospace-font: monospace; --default-font-size: 16px; --bold-weight: 700; --regular-weight: 400; --light-weight: 300; --oblique-style: italic; --default-line-height: 1.5; --compact-line-height: 1.25; --xx-large-width: 1600px; --x-large-width: 1200px; --large-width: 960px; --medium-width: 800px; --small-width: 600px; --x-small-width: 480px; --default-transition: 0.2s all ease-in-out; --default-border-radius: 0; --default-border-width: 1px; --squirqle-radius: 20px; --circle-radius: 100px; font-size: var(--default-font-size); height: 100%; scroll-behavior: smooth; } *:focus, *:focus-visible { outline-color: var(--whisper); outline-style: solid; outline-width: 2px; } body { background-color: var(--quiet); color: var(--loud); display: flex; flex-direction: column; font-family: var(--sans-font); font-optical-sizing: auto; font-size: 1rem; height: 100%; line-height: var(--default-line-height); margin: 0; } address, article, aside, div, footer, header, main, nav, search, section { display: block; } details { border-block-start: 1px solid var(--loud); clear: both; margin-block: 1rem; padding-block: 0.5rem 1rem; } summary { font-weight: var(--bold-weight); transition: margin 150ms ease-in-out; } summary:hover { cursor: pointer; } summary:before { content: ""; display: inline-block; height: 0.75rem; line-height: 1; margin-inline-end: 0.5rem; width: 0.75rem; background-repeat: no-repeat; background-size: 0.375rem 0.375rem, 0.375rem 0.375rem; background-image: linear-gradient(45deg, var(--loud) 50%, transparent 50%), linear-gradient(135deg, var(--loud) 50%, transparent 50%); background-position: right 0.125rem top 0, right 0.125rem top 0.375rem; } details[open] > summary { margin-block-end: 1rem; } details[open] > summary:before { background-repeat: no-repeat; background-size: 0.375rem 0.375rem, 0.375rem 0.375rem; background-image: linear-gradient(225deg, var(--loud) 50%, transparent 50%), linear-gradient(135deg, var(--loud) 50%, transparent 50%); background-position: right 0.375rem top 0.25rem, right 0 top 0.25rem; } summary::-webkit-details-marker, summary::marker { content: none; display: none; } button { border: 0; } h1, h2, h3, h4, h5, h6 { line-height: var(--compact-line-height); margin-block-end: 1rem; margin-block-start: 0; } h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child { margin-block-end: 0; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: inherit; font-weight: var(--light-weight); } h1 a, h1 a:link, h1 a:visited, h2 a, h2 a:link, h2 a:visited, h3 a, h3 a:link, h3 a:visited, h4 a, h4 a:link, h4 a:visited, h5 a, h5 a:link, h5 a:visited, h6 a, h6 a:link, h6 a:visited { color: inherit; } h1 { font-size: 2rem; font-weight: var(--bold-weight); } @media (min-width: 600px) { h1 { font-size: 3rem; } } h2 { font-size: 1.75rem; font-weight: var(--bold-weight); } @media (min-width: 600px) { h2 { font-size: 2.25rem; } } h3 { font-size: 1.25rem; font-weight: var(--bold-weight); } @media (min-width: 600px) { h3 { font-size: 1.5rem; } } h4 { font-size: 1rem; font-weight: var(--bold-weight); } h5 { color: var(--success); font-size: 0.9rem; font-weight: var(--bold-weight); } h6 { font-size: 1.25rem; font-weight: var(--light-weight); } @media (min-width: 600px) { h6 { font-size: 1.5rem; } } p { margin-block-end: 1rem; margin-block-start: 0; } p:last-child { margin-block-end: 0; } blockquote { background: color-mix(in srgb, var(--loud) 10%, transparent); border-radius: var(--squirqle-radius); font-style: var(--oblique-style); margin-block: 1.5rem; margin-inline: 0; padding-block: 1.5rem; padding-inline: 1rem; } pre { display: block; font-family: var(--monospace-font); } hr { border: none; border-bottom: 1px solid var(--loud); margin-block: 2rem; } a:link { color: var(--info); text-decoration: underline; } a:visited { color: var(--info); } a:hover { color: var(--hero); transition: var(--default-transition); } a:active { color: var(--success); } strong, b, dfn { font-weight: var(--bold-weight); } em, i, cite, q, var { font-style: var(--oblique-style); } u { text-decoration: underline; } s { text-decoration: line-through; } ins { color: var(--success); text-decoration: underline; } del { color: var(--danger); text-decoration: line-through; } small, sup, sub { font-size: 80%; } sup { vertical-align: super; } sub { vertical-align: sub; } kbd, code, samp { font-family: var(--monospace-font); } mark { background: var(--highlight); } menu { margin: 0; padding: 0; } ul, ol { margin-block-end: 1rem; margin-block-start: 0; margin-inline-start: 1rem; padding-inline-start: 1rem; } ul ul, ul ol, ol ul, ol ol { margin-block-end: 0; } ul:last-child, ol:last-child { margin-block-end: 0; } ul { list-style-type: disc; } ol { counter-reset: revert; list-style-type: auto; } dl { margin-block-end: 1rem; } dt { font-weight: var(--bold-weight); margin-block-start: 2rem; margin-block-end: 0.5rem; } dd { margin-block-end: 1rem; margin-inline-start: 1rem; } table { border: 1px solid var(--hushed); margin-block: 2rem; } table.borderless, table.borderless tr { border-width: 0; } tr { border-block-end: 1px solid var(--whisper); } td, th { padding: 0.5rem; text-align: start; vertical-align: start; } th { font-weight: var(--bold-weight); } thead, tfoot { background-color: var(--quiet); } img, svg { display: block; max-width: 100%; height: auto; } figure { margin: 0; padding: 0; } form ul { list-style-type: none; margin: 0; } fieldset { background: color-mix(in srgb, var(--black) 20%, transparent); border-width: 0; border-radius: var(--squirqle-radius); display: block; margin-block: 1rem; padding: 1rem; } legend { background-color: var(--silent); border: none; border-radius: var(--circle-radius); color: var(--loud); font-weight: var(--bold-weight); margin-inline-start: 0; padding: 0.25rem 1rem; } label { color: inherit; display: block; font-size: 0.9em; font-weight: var(--bold-weight); } input, textarea, select { border-color: var(--loud); border-radius: var(--default-border-radius); border-style: solid; border-width: 0 0 1px 0; font-family: var(--sans-font); } input, textarea, select, option { background-color: color-mix(in srgb, var(--silent) 20%, transparent); border-radius: var(--default-border-radius); box-shadow: 0 0 0; box-sizing: border-box; color: inherit; font-size: 1rem; max-width: 100%; padding: 1rem; } select, option { padding: 0.5rem; } select { appearance: none; background-color: var(--silent); padding-inline-end: 2rem; background-repeat: no-repeat; background-size: 0.375rem 0.375rem, 0.375rem 0.375rem; background-image: linear-gradient(225deg, var(--loud) 50%, transparent 50%), linear-gradient(135deg, var(--loud) 50%, transparent 50%); background-position: right 1.125rem top 1rem, right 0.75rem top 1rem; } input[type=text], input[type=password], input[type=url], input[type=email], input[type=search], input[type=number], input[type=color], input[type=range], input[type=date], input[type=month], input[type=week], input[type=datetime], input[type=datetime-local] { border-color: inherit; border-radius: var(--default-border-radius); border-style: solid; border-width: 0 0 1px 0; color: inherit; padding: 0.5rem; width: 100%; } input[type=text]::placeholder, input[type=password]::placeholder, input[type=url]::placeholder, input[type=email]::placeholder, input[type=search]::placeholder, input[type=number]::placeholder, input[type=color]::placeholder, input[type=range]::placeholder, input[type=date]::placeholder, input[type=month]::placeholder, input[type=week]::placeholder, input[type=datetime]::placeholder, input[type=datetime-local]::placeholder { opacity: 0.3; font-family: var(--sans-font); } input[type=color] { padding: 1px; height: 2rem; width: 2rem; } input[type=range] { -webkit-appearance: none; width: 100%; background: var(--silent); } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: 1px solid var(--hushed); height: 1rem; width: 1rem; border-radius: 100%; background: var(--whisper); margin-top: 0; } input[type=range]::-ms-thumb { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type=submit] { border: none; background: var(--l-yellow-orange); border-radius: var(--circle-radius); color: hsl(0, 3%, 10%); display: inline-block; font-weight: var(--bold-weight); padding: 0.5rem 2rem; text-decoration: none; outline: 0 solid var(--highlight); transition: var(--default-transition); } input[type=submit]:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } input[type=submit]:hover { cursor: pointer; transform: scale(1.05); } input[type=button] { border: none; background: var(--hushed); border-radius: var(--circle-radius); color: white; display: inline-block; font-weight: var(--bold-weight); padding: 0.5rem 2rem; text-decoration: none; outline: 0 solid var(--highlight); transition: var(--default-transition); } input[type=button]:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } input[type=button]:hover { cursor: pointer; transform: scale(1.05); } input[type=reset] { border: none; background: white; border-radius: var(--circle-radius); color: var(--danger); display: inline-block; font-weight: var(--bold-weight); padding: 0.5rem 2rem; text-decoration: none; outline: 0 solid var(--highlight); transition: var(--default-transition); } input[type=reset]:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } input[type=reset]:hover { cursor: pointer; transform: scale(1.05); } input[type=checkbox], input[type=radio] { padding: 0.5rem; } input[type=checkbox]:checked, input[type=radio]:checked { background: var(--loud); border-color: var(--loud); box-shadow: inset 0 0 0 2px var(--silent); } input[type=radio] { border-radius: 100%; } *[title=Required], .required { color: var(--danger); } .field-row { column-gap: 0.5rem; display: flex; justify-content: space-between; } .field-row .field-container { flex: 1 1 1%; } .field-container label:has(+ textarea), .field-container label:has(+ input[type=email]), .field-container label:has(+ input[type=text]) { font-family: var(--sans-font); position: absolute; margin: 0.5rem; opacity: 0.5; } .field-container label:has(+ textarea:focus), .field-container label:has(+ textarea:not(:placeholder-shown)), .field-container label:has(+ input[type=email]:focus), .field-container label:has(+ input[type=email]:not(:placeholder-shown)), .field-container label:has(+ input[type=text]:focus), .field-container label:has(+ input[type=text]:not(:placeholder-shown)) { opacity: 0; } .field-container { position: relative; } .field-container:not(:last-child) { margin-block-end: 0.5rem; } .is-error { border: 2px solid var(--danger) !important; } .is-error::placeholder { color: var(--danger); } label.error { color: var(--danger); } .is-valid { border: 2px solid var(--success) !important; } .is-valid::placeholder { color: var(--success); } label.valid { color: var(--success); } .options label { font-weight: var(--normal-weight); } .page-masthead { align-items: center; column-gap: 1rem; display: flex; justify-content: space-between; padding-block-end: 1rem; padding-block-start: 1rem; clear: both; max-width: 1200px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 1200px) { .page-masthead { margin-inline: auto; width: 100%; } } @media (min-width: 960px) { .page-masthead { padding-block-end: 2rem; } } .page-masthead__brand { flex: 0 0 300px; } .page-masthead__utility { align-items: flex-end; display: flex; flex: 1 0 1%; flex-direction: column; justify-content: flex-end; position: relative; } .page-hero { position: relative; background: var(--dark_gray); text-shadow: 0 0 1rem var(--dark_gray); } .page-hero__title { color: var(--white); z-index: 2; clear: both; max-width: 1200px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 1200px) { .page-hero__title { margin-inline: auto; width: 100%; } } @media (min-width: 960px) { .page-hero__title { font-size: 4rem; } } .page-hero img { max-height: 150px; min-height: 150px; width: 100%; object-fit: cover; } @media (min-width: 1600px) { .page-hero img { max-height: 300px; } } .page-hero .inner-wrapper { bottom: 0; display: flex; flex-direction: column; height: 100%; justify-content: center; left: 0; overflow: hidden; position: absolute; right: 0; text-align: start; top: 0; width: 100%; z-index: 1; } .page-main { container-type: inline-size; flex-grow: 1; } .page-footer { background: var(--loud); color: var(--silent); } .page-footer a { color: inherit; text-decoration: none; } .page-footer .inner-wrapper { container-type: inline-size; clear: both; max-width: 1200px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 1200px) { .page-footer .inner-wrapper { margin-inline: auto; width: 100%; } } .page-footer__brand { max-width: 200px; padding-block-end: 2rem; padding-block-start: 2rem; } .page-footer__contents { align-items: flex-start; column-gap: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; padding-block-end: 2rem; } .page-footer__about { margin-block-end: 2rem; } @container (min-width: 600px) { .page-footer__about { flex: 0 0 20rem; } } .page-footer__nav { flex: 1 0 1%; margin-block-end: 2rem; white-space: nowrap; } .page-footer__follow-us .social-media-menu { justify-content: flex-start; } @container (min-width: 600px) { .page-footer__newsletter { flex: 0 0 30rem; } } .page-footer__newsletter a { color: inherit; text-decoration: underline; } .page-footer__newsletter .field-container { position: relative; } .page-footer__legalese { border-block-start: 1px solid var(--silent); column-gap: 2rem; display: flex; font-size: 0.9em; justify-content: space-between; padding-block: 1rem; } .main-title { margin-block-end: 2rem; } .base-archetype .main-title, .index-archetype .main-title { clear: both; max-width: 800px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 800px) { .base-archetype .main-title, .index-archetype .main-title { margin-inline: auto; width: 100%; } } .base-archetype .content-body > .block-page_list, .index-archetype .content-body > .block-page_list, .base-archetype .content-body > .block-organization_list, .index-archetype .content-body > .block-organization_list, .base-archetype .content-body > .block-person_list, .index-archetype .content-body > .block-person_list { clear: both; max-width: 1200px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 1200px) { .base-archetype .content-body > .block-page_list, .index-archetype .content-body > .block-page_list, .base-archetype .content-body > .block-organization_list, .index-archetype .content-body > .block-organization_list, .base-archetype .content-body > .block-person_list, .index-archetype .content-body > .block-person_list { margin-inline: auto; width: 100%; } } .base-archetype .content-body > .block-text, .index-archetype .content-body > .block-text, .base-archetype .content-body > .block-cta_list, .index-archetype .content-body > .block-cta_list, .base-archetype .content-body > .block-image, .index-archetype .content-body > .block-image, .base-archetype .content-body > .block-gallery, .index-archetype .content-body > .block-gallery, .base-archetype .content-body > .block-embed, .index-archetype .content-body > .block-embed, .base-archetype .content-body > .block-stat_row, .index-archetype .content-body > .block-stat_row, .base-archetype .content-body > .block-accordion, .index-archetype .content-body > .block-accordion { clear: both; max-width: 1200px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 1200px) { .base-archetype .content-body > .block-text, .index-archetype .content-body > .block-text, .base-archetype .content-body > .block-cta_list, .index-archetype .content-body > .block-cta_list, .base-archetype .content-body > .block-image, .index-archetype .content-body > .block-image, .base-archetype .content-body > .block-gallery, .index-archetype .content-body > .block-gallery, .base-archetype .content-body > .block-embed, .index-archetype .content-body > .block-embed, .base-archetype .content-body > .block-stat_row, .index-archetype .content-body > .block-stat_row, .base-archetype .content-body > .block-accordion, .index-archetype .content-body > .block-accordion { margin-inline: auto; width: 100%; } } .base-archetype .content-body > .block-column_set, .index-archetype .content-body > .block-column_set { clear: both; max-width: 1200px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 1200px) { .base-archetype .content-body > .block-column_set, .index-archetype .content-body > .block-column_set { margin-inline: auto; width: 100%; } } .base-archetype .index-list, .index-archetype .index-list { clear: both; max-width: 1200px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 1200px) { .base-archetype .index-list, .index-archetype .index-list { margin-inline: auto; width: 100%; } } .detail-archetype .extra-content { clear: both; max-width: 1200px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 1200px) { .detail-archetype .extra-content { margin-inline: auto; width: 100%; } } .error .page-main { clear: both; max-width: 1200px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 1200px) { .error .page-main { margin-inline: auto; width: 100%; } } .form-page__form { margin-block: 6rem; clear: both; max-width: 800px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 800px) { .form-page__form { margin-inline: auto; width: 100%; } } .form-page__form form { background: color-mix(in srgb, var(--loud) 10%, transparent); border-radius: var(--squirqle-radius); padding: 1rem; } .content-body > .block-callout:first-child { margin-block-start: 0; } .content-body > .block-callout:last-child { margin-block-end: 0; } .basic-text h2 { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; } .callout { color: var(--black); font-size: 120%; position: relative; } .column-set .callout, .news-item__body .callout, .event__info__body .callout { margin-inline: -2rem; } @media (min-width: 800px) { .column-set .callout, .news-item__body .callout, .event__info__body .callout { border-radius: var(--squirqle-radius); margin-inline: auto; overflow: hidden; } } .callout.bg-deep-gray { color: var(--white); } .callout a { color: inherit; } .callout__text { align-items: center; display: flex; justify-content: center; min-height: 200px; position: relative; z-index: 3; clear: both; max-width: 1200px; margin-inline: 0rem; width: calc(100% - 0rem); } @media (min-width: 1200px) { .callout__text { margin-inline: auto; width: 100%; } } @container (min-width: 800px) { .callout__text { min-height: 300px; } } .callout__text--left { justify-content: flex-start; } .callout__text--right { justify-content: flex-end; } .callout__text--center { justify-content: center; } .callout__text__inner { border-radius: var(--squirqle-radius); margin-inline: 1rem; padding-block: 2rem; } @container (min-width: 800px) { .callout__text__inner { max-width: 50%; } } @container (min-width: 1200px) { .callout__text__inner { margin-inline: 0; } } .callout__image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; } .callout__image img { filter: contrast(1) grayscale(1); height: 100%; object-fit: cover; object-position: center; mix-blend-mode: screen; width: 100%; z-index: 2; } .embedded-media iframe { display: block; margin-inline: auto; } .image-with-caption__caption { font-style: italic; margin-block-start: 0.5rem; } .session { display: flex; flex-direction: column; margin-block-end: 1rem; padding-block-end: 1rem; } @container (min-width: 800px) { .session { display: grid; column-gap: 3rem; grid-template-columns: 1fr 2fr; } } .session__info { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; } @container (min-width: 800px) {} @container (min-width: 800px) { .session__body { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; } } .session__description { margin-block-end: 1rem; } .session__people { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; padding-block-end: 1rem; } .page-list { margin-block: 6rem; } .page-list__intro { margin-block-end: 3rem; } .page-list h2 { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; } .page-list__list { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; column-gap: 3rem; display: grid; justify-content: space-between; list-style-type: none; margin: 0; row-gap: 4rem; } @container (min-width: 800px) { .page-list__list { grid-template-columns: repeat(2, 1fr); } } @container (min-width: 960px) { .page-list__list { grid-template-columns: repeat(3, 1fr); } } .page-list__list--col-1 { column-gap: 3rem; display: grid; justify-content: space-between; list-style-type: none; margin: 0; row-gap: 4rem; } @container (min-width: 800px) { .page-list__list--col-1 { grid-template-columns: repeat(0, 1fr); } } @container (min-width: 960px) { .page-list__list--col-1 { grid-template-columns: repeat(1, 1fr); } } .page-list__list--col-2 { column-gap: 3rem; display: grid; justify-content: space-between; list-style-type: none; margin: 0; row-gap: 4rem; } @container (min-width: 800px) { .page-list__list--col-2 { grid-template-columns: repeat(1, 1fr); } } @container (min-width: 960px) { .page-list__list--col-2 { grid-template-columns: repeat(2, 1fr); } } .page-list__list--col-3 { column-gap: 3rem; display: grid; justify-content: space-between; list-style-type: none; margin: 0; row-gap: 4rem; } @container (min-width: 800px) { .page-list__list--col-3 { grid-template-columns: repeat(2, 1fr); } } @container (min-width: 960px) { .page-list__list--col-3 { grid-template-columns: repeat(3, 1fr); } } .page-list__list--col-4 { column-gap: 3rem; display: grid; justify-content: space-between; list-style-type: none; margin: 0; row-gap: 4rem; } @container (min-width: 800px) { .page-list__list--col-4 { grid-template-columns: repeat(3, 1fr); } } @container (min-width: 960px) { .page-list__list--col-4 { grid-template-columns: repeat(4, 1fr); } } .page-list__list--col-5 { column-gap: 3rem; display: grid; justify-content: space-between; list-style-type: none; margin: 0; row-gap: 4rem; } @container (min-width: 800px) { .page-list__list--col-5 { grid-template-columns: repeat(4, 1fr); } } @container (min-width: 960px) { .page-list__list--col-5 { grid-template-columns: repeat(5, 1fr); } } .page-list__list--col-6 { column-gap: 3rem; display: grid; justify-content: space-between; list-style-type: none; margin: 0; row-gap: 4rem; } @container (min-width: 800px) { .page-list__list--col-6 { grid-template-columns: repeat(5, 1fr); } } @container (min-width: 960px) { .page-list__list--col-6 { grid-template-columns: repeat(6, 1fr); } } @container (min-width: 800px) { .column-set { column-gap: 3rem; display: flex; flex-direction: row; flex-wrap: nowrap; } } .column-set__column { container-type: inline-size; flex: 1 1 1%; margin-block-end: 1rem; } .cta-list { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; display: flex; margin-block: 1rem; } .cta-list--vertical { flex-direction: column; row-gap: 0.5rem; } .cta-list--horizontal { flex-direction: row; column-gap: 0.5rem; } .stat-row { column-gap: 4rem; display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; } .stat-row__stat { align-items: center; row-gap: 1rem; display: flex; flex-direction: column; line-height: var(--compact-line-height); flex: 0 0 10rem; text-align: center; } .stat-row__stat__intro { align-content: end; flex: 0 0 4rem; } .stat-row__stat__stat { align-items: center; border-radius: var(--circle-radius); display: flex; flex-direction: column; font-weight: bold; font-size: 2rem; justify-content: center; height: 8rem; line-height: 1; width: 8rem; } .stat-row__stat__outro { align-content: start; flex: 0 0 4rem; } .embedded-form { background: color-mix(in srgb, var(--black) 80%, transparent); border-radius: var(--squirqle-radius); color: var(--white); margin-block: 1rem; margin-inline: auto; max-width: 30rem; padding: 2rem; } .embedded-form--l-yellow-orange { background: linear-gradient(135deg, hsla(56, 100%, 65%, 0.8) 0%, hsla(21, 84%, 62%, 0.8) 100%); color: var(--black); } .embedded-form--l-lightpeach-orange { background: linear-gradient(135deg, hsla(20, 95%, 85%, 0.8) 0%, hsla(21, 84%, 62%, 0.8) 100%); color: var(--black); } .embedded-form--l-lightblue-turquoise { background: linear-gradient(135deg, hsla(185, 100%, 75%, 0.8) 0%, hsla(185, 100%, 37%, 0.8) 100%); color: var(--black); } .embedded-form--deep-gray { background: hsla(0, 3%, 10%, 0.8); color: var(--white); } .icon-list { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; } .icon-list li { align-items: center; display: flex; } .icon-list__icon { align-items: center; display: inline-flex; flex: 0 0 1.5rem; justify-content: center; margin-inline-end: 0.25rem; } .icon-list__text { flex: 1 0 1%; } .tag-list { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; display: flex; column-gap: 0.25rem; } a.tag { background: color-mix(in srgb, var(--light-blue) 55%, transparent); border-radius: 2px; color: var(--loud); display: inline-block; font-size: 0.9em; font-weight: var(--regular-weight); padding: 0.125rem 0.325rem; text-decoration: none; } a.tag:hover { opacity: 0.8; } .list-capsule__text { border-block-start: 1px solid; flex: 1 0 1%; margin-block-start: 2rem; margin-inline-end: -3rem; padding-inline-end: 3rem; word-break: break-word; } .list-capsule__text__header { margin-block-start: -1.75rem; } .list-capsule__text__blurb { font-size: 85%; } .list-capsule__image { background: var(--radial-peach); height: auto; flex: 0 0 8rem; outline: 0 solid var(--highlight); overflow: hidden; z-index: 2; } @container (min-width: 960px) { .list-capsule__image { flex-basis: 10rem; } } .list-capsule__image--bubble { border-radius: var(--circle-radius); } .list-capsule__image--squirqle { border-radius: var(--squirqle-radius); } .list-capsule a { align-items: flex-start; box-sizing: border-box; color: inherit; display: flex; flex-direction: row; flex-wrap: nowrap; position: relative; text-decoration: none; } .list-capsule a:hover .list-capsule__image { outline: 1rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); } .sidebar__section { margin-block-end: 2rem; } .sidebar__section.byline { background-color: var(--whisper); } .glide__slides { align-items: center; } .glide__arrow { background: color-mix(in srgb, var(--black) 30%, transparent); color: var(--white); display: block; font-family: var(--sans-font); font-size: 1.5em; height: 4rem; position: absolute; text-align: center; top: 40%; width: 2rem; } @media (min-width: 960px) { .glide__arrow { font-size: 2em; height: 6rem; width: 3rem; } } .glide__arrow:hover { background: color-mix(in srgb, var(--black) 15%, transparent); cursor: pointer; outline: 0 solid var(--highlight); transition: var(--default-transition); } .glide__arrow:hover:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } .glide__arrow--left { left: 0; border-radius: 0 3rem 3rem 0; } .glide__arrow--right { right: 0; border-radius: 3rem 0 0 3rem; } .other-news-list { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; } .other-news-list__item { margin-block-end: 1rem; } .carousel { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; } .carousel__item { background-color: var(--spoken); position: relative; } .carousel__item__image { background-size: cover; } .carousel__item__image img { margin-inline: auto; } .carousel__item--yellow_orange { background: var(--l-yellow-orange); } .carousel__item--yellow_orange .carousel__item__image img { filter: contrast(1.5) grayscale(0.05); mix-blend-mode: hard-light; opacity: 0.9; } .carousel__item--aqua_turquoise { background: var(--r-lightblue-turquoise); } .carousel__item--aqua_turquoise img { filter: contrast(1.5) grayscale(0.05); mix-blend-mode: hard-light; opacity: 0.9; } .carousel__item--peach_orange { background: var(--r-peach-orange); } .carousel__item--peach_orange img { filter: contrast(1.5) grayscale(0.05); mix-blend-mode: hard-light; opacity: 0.9; } .carousel__item--dark_gray { background: var(--black); } .carousel__item--dark_gray img { filter: contrast(1.15) grayscale(0.9); } @media (min-width: 800px) { .carousel__item__overlay { pointer-events: none; display: flex; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .carousel__item__overlay--nw, .carousel__item__overlay--n, .carousel__item__overlay--ne { align-items: flex-start; } .carousel__item__overlay--w, .carousel__item__overlay--e, .carousel__item__overlay--c { align-items: center; } .carousel__item__overlay--sw, .carousel__item__overlay--s, .carousel__item__overlay--se { align-items: flex-end; } .carousel__item__overlay--nw, .carousel__item__overlay--w, .carousel__item__overlay--sw { justify-content: flex-start; } .carousel__item__overlay--n, .carousel__item__overlay--s, .carousel__item__overlay--c { justify-content: center; } .carousel__item__overlay--ne, .carousel__item__overlay--e, .carousel__item__overlay--se { justify-content: flex-end; } } .carousel__item__text { backdrop-filter: blur(10px); color: white; padding: 1rem; pointer-events: auto; } @media (min-width: 800px) { .carousel__item__text { background-color: color-mix(in srgb, var(--black) 50%, transparent); margin: 3rem; max-width: 600px; border-radius: 1rem; } } .carousel__item__text--yellow_orange { background: color-mix(in srgb, var(--citrus) 70%, transparent); color: var(--black); } .carousel__item__text--aqua_turquoise { background: color-mix(in srgb, var(--teal) 90%, transparent); } .carousel__item__text--peach_orange { background: color-mix(in srgb, var(--peach) 90%, transparent); color: var(--black); } .carousel__item__text p { font-size: 120%; } .carousel__item__cta { text-align: right; } .richtext-image { height: auto; margin-block-end: 1rem; margin-inline: auto; max-width: 100%; } @container (min-width: 600px) { .richtext-image.float-left { float: inline-start; height: auto; margin-block-end: 1rem; max-width: calc(50% - 1rem); margin-inline-end: 1rem; } } @container (min-width: 600px) { .richtext-image.float-right { float: inline-end; height: auto; margin-block-end: 1rem; max-width: calc(50% - 1rem); margin-inline-start: 1rem; } } .credited-image { position: relative; } .credited-image__credit { bottom: 0; padding: 0.25rem; right: 0; position: absolute; } .avatar { border-radius: 100%; } .wp-block-image { margin-block: 1rem; } .wp-block-image .wp-element-caption, .wp-block-image figcaption { color: var(--success); font-style: italic; margin-block-start: 0.5rem; } a.button.smaller, button.button.smaller, .button.smaller, a.button-hot.smaller, button.button-hot.smaller, .button-hot.smaller, a.button-cool.smaller, button.button-cool.smaller, .button-cool.smaller, a.button-icy.smaller, button.button-icy.smaller, .button-icy.smaller, a.button-xray-reversed.smaller, button.button-xray-reversed.smaller, .button-xray-reversed.smaller, a.button-xray.smaller, button.button-xray.smaller, .button-xray.smaller { font-size: 0.9rem; padding: 0.25rem 1rem; } a.button.full-width, button.button.full-width, .button.full-width, a.button-hot.full-width, button.button-hot.full-width, .button-hot.full-width, a.button-cool.full-width, button.button-cool.full-width, .button-cool.full-width, a.button-icy.full-width, button.button-icy.full-width, .button-icy.full-width, a.button-xray-reversed.full-width, button.button-xray-reversed.full-width, .button-xray-reversed.full-width, a.button-xray.full-width, button.button-xray.full-width, .button-xray.full-width { display: block; text-align: center; } a.button, button.button, .button { background: var(--info); border-radius: var(--circle-radius); color: var(--white); display: inline-block; font-weight: var(--bold-weight); padding: 0.5rem 2rem; text-decoration: none; outline: 0 solid var(--highlight); transition: var(--default-transition); } a.button:hover, button.button:hover, .button:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } a.button:hover, button.button:hover, .button:hover { cursor: pointer; transform: scale(1.05); } a.button-hot, button.button-hot, .button-hot { background: var(--l-yellow-orange); border-radius: var(--circle-radius); color: var(--black); display: inline-block; font-weight: var(--bold-weight); padding: 0.5rem 2rem; text-decoration: none; outline: 0 solid var(--highlight); transition: var(--default-transition); } a.button-hot:hover, button.button-hot:hover, .button-hot:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } a.button-hot:hover, button.button-hot:hover, .button-hot:hover { cursor: pointer; transform: scale(1.05); } a.button-cool, button.button-cool, .button-cool { background: var(--loud); border-radius: var(--circle-radius); color: var(--silent); display: inline-block; font-weight: var(--bold-weight); padding: 0.5rem 2rem; text-decoration: none; outline: 0 solid var(--highlight); transition: var(--default-transition); } a.button-cool:hover, button.button-cool:hover, .button-cool:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } a.button-cool:hover, button.button-cool:hover, .button-cool:hover { cursor: pointer; transform: scale(1.05); } a.button-icy, button.button-icy, .button-icy { background: var(--l-lightblue-turquoise); border-radius: var(--circle-radius); color: var(--black); display: inline-block; font-weight: var(--bold-weight); padding: 0.5rem 2rem; text-decoration: none; outline: 0 solid var(--highlight); transition: var(--default-transition); } a.button-icy:hover, button.button-icy:hover, .button-icy:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } a.button-icy:hover, button.button-icy:hover, .button-icy:hover { cursor: pointer; transform: scale(1.05); } a.button-reverse, button.button-reverse, .button-reverse { background: var(--white); border-radius: var(--circle-radius); color: var(--black); display: inline-block; font-weight: var(--bold-weight); padding: 0.5rem 2rem; text-decoration: none; outline: 0 solid var(--highlight); transition: var(--default-transition); } a.button-reverse:hover, button.button-reverse:hover, .button-reverse:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } a.button-reverse:hover, button.button-reverse:hover, .button-reverse:hover { cursor: pointer; transform: scale(1.05); } a.button-xray, button.button-xray, .button-xray { border: 1px solid; background: transparent; border-radius: var(--circle-radius); color: var(--loud); display: inline-block; font-weight: var(--bold-weight); padding: 0.5rem 2rem; text-decoration: none; outline: 0 solid var(--highlight); transition: var(--default-transition); } a.button-xray:hover, button.button-xray:hover, .button-xray:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } a.button-xray:hover, button.button-xray:hover, .button-xray:hover { cursor: pointer; transform: scale(1.05); } a.button-xray:hover, button.button-xray:hover, .button-xray:hover { background: var(--loud); border-color: transparent; color: var(--silent); fill: var(--silent); opacity: 1; } a.button-xray-reversed, button.button-xray-reversed, .button-xray-reversed { border: 1px solid; background: transparent; border-radius: var(--circle-radius); color: var(--silent); display: inline-block; font-weight: var(--bold-weight); padding: 0.5rem 2rem; text-decoration: none; outline: 0 solid var(--highlight); transition: var(--default-transition); } a.button-xray-reversed:hover, button.button-xray-reversed:hover, .button-xray-reversed:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } a.button-xray-reversed:hover, button.button-xray-reversed:hover, .button-xray-reversed:hover { cursor: pointer; transform: scale(1.05); } a.button-xray-reversed:hover, button.button-xray-reversed:hover, .button-xray-reversed:hover { background: var(--silent); border-color: transparent; color: var(--loud); fill: var(--loud); opacity: 1; } a.button-icon, button.button-icon { align-items: center; aspect-ratio: 1/1; display: flex; font-size: 150%; justify-content: center; min-width: 1.25rem; padding: 1rem; } .inline-menu { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; display: flex; column-gap: 1rem; } .menu a, .menu a:link, .menu a:visited { color: inherit; text-decoration: none; } .menu a:hover { color: var(--emphasis); fill: var(--emphasis); transition: var(--default-transition); } .menu__item.has-submenu { position: relative; } .menu__item.has-submenu > a:after { display: inline-block; content: "→"; padding-inline-start: 0.5rem; width: 1.5rem; } .menu__item.has-submenu > a.caret-down:after { content: "↓"; } .footer-menu { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; font-weight: var(--bold-weight); } .legalese { margin-block-start: 0; list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; } @container (min-width: 800px) { .legalese { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; display: flex; column-gap: 1rem; } } a.menu-trigger { color: var(--loud) !important; padding: 0.5rem; } a.menu-trigger.is-open { background: var(--emphasis); } @media (min-width: 960px) { a.menu-trigger { display: none; } } #main-menu-wrapper { background: var(--silent); border: 1px solid var(--loud); display: none; flex-direction: column; justify-content: flex-end; padding: 1rem; } @media (min-width: 960px) { #main-menu-wrapper { align-items: flex-end; background: none; border: none; display: flex; padding: 0; position: relative; } } #main-menu-wrapper.is-open { display: flex; position: absolute; top: 3rem; right: 0; z-index: 2; } .join-link-wrapper { order: 2; padding: 0.5rem; text-align: end; } @media (min-width: 960px) { .join-link-wrapper { order: 0; padding: 0; } } .main-menu { min-width: 20rem; } @media (min-width: 960px) { .main-menu { margin-block-start: 1rem; list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; display: flex; column-gap: 1rem; padding-block-end: 0.25rem; } } .main-menu > .menu__item > a { outline: 0 solid var(--highlight); transition: var(--default-transition); } .main-menu > .menu__item > a:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } @media (min-width: 960px) { .main-menu > .menu__item > a { border-radius: var(--squirqle-radius); } } .main-menu a { background: transparent; display: block; padding: 0.5rem; white-space: nowrap; } .main-menu a:has(+ .submenu.is-open) { background: var(--emphasis); color: var(--white); } .main-menu a:hover { background: var(--emphasis); color: var(--white); fille: var(--white); transition: var(--default-transition); } .submenu { background-color: var(--silent); border-radius: var(--default-border-radius); display: none; flex-direction: column; padding: 0; z-index: 10; } .submenu, .submenu > * { height: 0; } @media (min-width: 960px) { .submenu { display: none; height: auto; margin-block-start: 0.5rem; position: absolute; } .submenu, .submenu > * { height: auto; } } .submenu.is-open { border: 1px solid var(--emphasis); display: flex; overflow: hidden; } .submenu.is-open, .submenu.is-open > * { height: auto; } @media (min-width: 960px) { .submenu.is-open { border-block-start-color: var(--loud); border-color: transparent; border-radius: var(--squirqle-radius); outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); } } .social-media-menu { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; align-items: stretch; column-gap: 1rem; display: flex; flex-wrap: wrap; justify-content: center; margin-block-end: 1rem; row-gap: 1rem; } .legalese-menu { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; display: flex; column-gap: 1rem; } .pagination { padding-block: 2rem; text-align: center; } .paginator { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; justify-content: center; display: flex; } .paginator__item { margin-inline: var(--default-border-width); } .paginator__item:first-child a { border-radius: var(--circle-radius) 0 0 var(--circle-radius); } .paginator__item:last-child a { border-radius: 0 var(--circle-radius) var(--circle-radius) 0; } .paginator__pagenos { color: var(--info); display: block; padding: 0.5rem 0.75rem; } .paginator a { background: var(--info); color: var(--white); display: block; padding: 0.5rem 0.75rem; text-decoration: none; text-align: center; width: 100%; outline: 0 solid var(--highlight); transition: var(--default-transition); } .paginator a:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } .paginator a.is-active { background: var(--loud); } .paginator a.is-dimmed { opacity: 0.2; } .featured-item { display: flex; flex-direction: column; margin-block-start: 2rem; clear: both; max-width: 1200px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 1200px) { .featured-item { margin-inline: auto; width: 100%; } } @media (min-width: 600px) { .featured-item { flex-direction: row; } } .featured-item__image { flex-grow: 0; flex-shrink: 1; } .featured-item__image img { border-radius: 2rem; outline: 0 solid var(--highlight); transition: var(--default-transition); } .featured-item__image img:hover { outline: 1rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } .featured-item__text { border-block-start: 1px solid; margin-block-start: 2.25rem; padding-block: 1rem; } @media (min-width: 600px) { .featured-item__text { flex-basis: 50%; flex-grow: 1; flex-shrink: 0; margin-block-start: 2.75rem; padding-inline-start: 2rem; } } .featured-item__text__header { margin-block-start: -2.5rem; } .featured-item__blurb { margin-block-start: 1rem; } .featured-item__cta { margin-block-start: 1rem; text-align: end; } .text-align-end { text-align: end; } .nowrap { white-space: nowrap; } .is-visually-hidden:not(:focus):not(:active), .visually-hidden:not(:focus):not(:active) { border: 0; clip: rect(0 0 0 0); height: auto; margin: 0; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } .no-margin, .nomargin { margin: 0; } .no-underline { text-decoration: none !important; } .underline { text-decoration: underline; } .hoverglow { display: block; outline: 0 solid var(--highlight); transition: var(--default-transition); } .hoverglow:hover { outline: 0.5rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } .hoversize { display: block; transition: var(--default-transition); } .hoversize:hover { transform: scale(1.05); } .cleanline { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; } .readmore:after, .read-more:after, .cta:after { content: " →"; } .bg-aqua { background: var(--aqua) !important; } .fg-aqua { color: var(--aqua) !important; fill: var(--aqua) !important; } .bg-teal { background: var(--teal) !important; } .fg-teal { color: var(--teal) !important; fill: var(--teal) !important; } .bg-peach { background: var(--peach) !important; } .fg-peach { color: var(--peach) !important; fill: var(--peach) !important; } .bg-citrus { background: var(--citrus) !important; } .fg-citrus { color: var(--citrus) !important; fill: var(--citrus) !important; } .bg-burnt-orange { background: var(--burnt-orange) !important; } .fg-burnt-orange { color: var(--burnt-orange) !important; fill: var(--burnt-orange) !important; } .bg-bright-yellow { background: var(--bright-yellow) !important; } .fg-bright-yellow { color: var(--bright-yellow) !important; fill: var(--bright-yellow) !important; } .bg-deep-gray { background: var(--deep-gray) !important; } .fg-deep-gray { color: var(--deep-gray) !important; fill: var(--deep-gray) !important; } .bg-off-white { background: var(--off-white) !important; } .fg-off-white { color: var(--off-white) !important; fill: var(--off-white) !important; } .bg-white { background: var(--white) !important; } .fg-white { color: var(--white) !important; fill: var(--white) !important; } .bg-black { background: var(--black) !important; } .fg-black { color: var(--black) !important; fill: var(--black) !important; } .bg-light-blue { background: var(--light-blue) !important; } .fg-light-blue { color: var(--light-blue) !important; fill: var(--light-blue) !important; } .bg-light-peach { background: var(--light-peach) !important; } .fg-light-peach { color: var(--light-peach) !important; fill: var(--light-peach) !important; } .bg-red { background: var(--red) !important; } .fg-red { color: var(--red) !important; fill: var(--red) !important; } .bg-loud { background: var(--loud) !important; } .fg-loud { color: var(--loud) !important; fill: var(--loud) !important; } .bg-spoken { background: var(--spoken) !important; } .fg-spoken { color: var(--spoken) !important; fill: var(--spoken) !important; } .bg-soft { background: var(--soft) !important; } .fg-soft { color: var(--soft) !important; fill: var(--soft) !important; } .bg-hushed { background: var(--hushed) !important; } .fg-hushed { color: var(--hushed) !important; fill: var(--hushed) !important; } .bg-breathy { background: var(--breathy) !important; } .fg-breathy { color: var(--breathy) !important; fill: var(--breathy) !important; } .bg-whisper { background: var(--whisper) !important; } .fg-whisper { color: var(--whisper) !important; fill: var(--whisper) !important; } .bg-quiet { background: var(--quiet) !important; } .fg-quiet { color: var(--quiet) !important; fill: var(--quiet) !important; } .bg-silent { background: var(--silent) !important; } .fg-silent { color: var(--silent) !important; fill: var(--silent) !important; } .bg-emphasis { background: var(--emphasis) !important; } .fg-emphasis { color: var(--emphasis) !important; fill: var(--emphasis) !important; } .bg-danger { background: var(--danger) !important; } .fg-danger { color: var(--danger) !important; fill: var(--danger) !important; } .bg-warning { background: var(--warning) !important; } .fg-warning { color: var(--warning) !important; fill: var(--warning) !important; } .bg-strange { background: var(--strange) !important; } .fg-strange { color: var(--strange) !important; fill: var(--strange) !important; } .bg-success { background: var(--success) !important; } .fg-success { color: var(--success) !important; fill: var(--success) !important; } .bg-info { background: var(--info) !important; } .fg-info { color: var(--info) !important; fill: var(--info) !important; } .bg-highlight { background: var(--highlight) !important; } .fg-highlight { color: var(--highlight) !important; fill: var(--highlight) !important; } .bg-hero { background: var(--hero) !important; } .fg-hero { color: var(--hero) !important; fill: var(--hero) !important; } .bg-invisible { background: var(--invisible) !important; } .fg-invisible { color: var(--invisible) !important; fill: var(--invisible) !important; } .bg-faded { background: var(--faded) !important; } .fg-faded { color: var(--faded) !important; fill: var(--faded) !important; } .bg-dimmed { background: var(--dimmed) !important; } .fg-dimmed { color: var(--dimmed) !important; fill: var(--dimmed) !important; } .bg-l-yellow-orange { background-image: var(--l-yellow-orange) !important; } .bg-l-lightblue-turquoise { background-image: var(--l-lightblue-turquoise) !important; } .bg-l-lightpeach-orange { background-image: var(--l-lightpeach-orange) !important; } .bg-r-lightblue-turquoise { background-image: var(--r-lightblue-turquoise) !important; } .bg-r-brightyellow-orange { background-image: var(--r-brightyellow-orange) !important; } .bg-r-peach-orange { background-image: var(--r-peach-orange) !important; } .bg-radial-aqua { background-image: var(--radial-aqua) !important; } .bg-radial-peach { background-image: var(--radial-peach) !important; } .bg-radial-light-blue { background-image: var(--radial-light-blue) !important; } .bg-radial-citrus { background-image: var(--radial-citrus) !important; } .styleguide-color { background-color: var(--black); color: var(--white); margin-block-end: 0.125rem; padding: 0.25rem; width: 50%; } .uppercase { text-transform: uppercase; } .overlay-theme--yellow_orange { background: var(--l-yellow-orange); } .overlay-theme--yellow_orange img { filter: contrast(1.5) grayscale(0.85); mix-blend-mode: soft-light; } .overlay-theme--yellow_orange .overlay-theme__text { background: color-mix(in srgb, var(--citrus) 70%, transparent); color: var(--black); } .overlay-theme--aqua_turquoise { background: var(--r-lightblue-turquoise); text-shadow: 0 0 1rem var(--teal); } .overlay-theme--aqua_turquoise img { filter: contrast(1.5) grayscale(0.85); mix-blend-mode: soft-light; } .overlay-theme--aqua_turquoise .overlay-theme__text { background: color-mix(in srgb, var(--teal) 90%, transparent); } .overlay-theme--peach_orange { background: var(--l-lightpeach-orange); } .overlay-theme--peach_orange img { filter: contrast(1.5) grayscale(0.85); mix-blend-mode: soft-light; } .overlay-theme--peach_orange .overlay-theme__text { background: color-mix(in srgb, var(--burnt-orange) 60%, transparent); color: var(--black); } .overlay-theme--dark_gray { background: var(--dark_gray); text-shadow: 0 0 1rem var(--dark_gray); } .overlay-theme--dark_gray img { filter: contrast(1.15) grayscale(1); mix-blend-mode: multiply; } .generic-section { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; margin-block: 3rem; } .styleguide .page-main { clear: both; max-width: 1200px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 1200px) { .styleguide .page-main { margin-inline: auto; width: 100%; } } .responsive-object { position: relative; } .responsive-object iframe, .responsive-object object, .responsive-object embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #mce-success-response, #mce-error-response { border-radius: var(--squirqle-radius); font-weight: bold; margin-block-end: 0.5rem; padding: 1rem; } #mce-error-response { background-color: color-mix(in srgb, var(--warning) 85%, transparent); color: var(--white); } #mce-success-response { background-color: color-mix(in srgb, var(--success) 85%, transparent); color: var(--white); } .svg-icon { height: 1em; width: 1em; } .svg-icon svg { fill: inherit; } .newsletter-subscription { background: linear-gradient(135deg, hsla(185, 100%, 37%, 0.7) 0%, hsla(188, 100%, 29%, 0.7) 100%); border-radius: var(--squirqle-radius); max-width: 35rem; padding: 2rem; } .event .page-main { clear: both; max-width: 960px; margin-inline: 0rem; width: calc(100% - 0rem); } @media (min-width: 960px) { .event .page-main { margin-inline: auto; width: 100%; } } .event .main-title { border: none; padding: 0; } .event__info { display: block; margin-block: 6rem; } @container (min-width: 800px) { .event__info { align-items: start; column-gap: 3rem; display: grid; grid-template-columns: 2fr 1fr; } } .event__info__body { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; container-type: inline-size; } .event__info__sidebar { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; margin-block-end: 2rem; order: 0; padding-block-end: 1rem; } .event__info__deadline { background: var(--white); border-radius: var(--squirqle-radius); padding: 1rem; } .event .agenda { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; } .event .agenda__header { margin-block-end: 3rem; } .event-list { margin-block: 6rem; } .event-list__intro { margin-block-end: 3rem; } .event-list h2 { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; } .event-list__list { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; column-gap: 3rem; display: grid; justify-content: space-between; list-style-type: none; margin: 0; row-gap: 4rem; } @container (min-width: 800px) { .event-list__list { grid-template-columns: repeat(2, 1fr); } } @container (min-width: 960px) { .event-list__list { grid-template-columns: repeat(3, 1fr); } } .event-list__list__item { background: var(--l-lightblue-turquoise); color: var(--white) !important; border-radius: var(--squirqle-radius); display: flex; flex-direction: column; overflow: hidden; text-decoration: none !important; transition: var(--default-transition); } .event-list__list__item:hover { transform: scale(1.05); } .event-list__list__item h3, .event-list__list__item h4, .event-list__list__item h5, .event-list__list__item h6 { color: inherit; } .event-list__list__item--webinar { background: var(--l-lightblue-turquoise); color: var(--black) !important; } .event-list__list__item--supported { background: var(--l-lightpeach-orange); color: var(--black) !important; } .event-list__list__item--attending { background: var(--l-yellow-orange); color: var(--black) !important; } .event-list__list__item__image { position: relative; } .event-list__list__item__image > a { display: block; } .event-list__list__item__text { padding: 1rem; flex-grow: 1; } .event-list__list__item__wherewhen { padding-block-start: 1rem; } .event-list__list__item__footer { align-items: flex-end; column-gap: 1rem; display: flex; justify-content: center; padding-block-end: 1rem; padding-inline: 1rem; } .event-list__list__item__deadline { text-align: end; flex: 1 0 1%; } .event-list__list__item__cta { align-self: flex-end; white-space: nowrap; } .news-item .main-content { margin-block: 3rem; clear: both; max-width: 960px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 960px) { .news-item .main-content { margin-inline: auto; width: 100%; } } @container (min-width: 800px) { .news-item .main-content { column-gap: 3rem; display: grid; grid-template-columns: 2fr 1fr; margin-inline: auto; max-width: 960px; } } .news-item__thumbnail { margin-block-end: 2rem; clear: both; max-width: 960px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 960px) { .news-item__thumbnail { margin-inline: auto; width: 100%; } } .news-item__body, .news-item__sidebar { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; container-type: inline-size; margin-block-end: 2rem; } .news-item-index__header { margin-block-end: 3rem; } .news-item-list { margin-block: 6rem; } .news-item-list__intro { margin-block-end: 3rem; } .news-item-list h2 { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; } .news-item-list__list { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; column-gap: 3rem; display: grid; justify-content: space-between; list-style-type: none; margin: 0; row-gap: 4rem; } @container (min-width: 800px) { .news-item-list__list { grid-template-columns: repeat(2, 1fr); } } @container (min-width: 960px) { .news-item-list__list { grid-template-columns: repeat(3, 1fr); } } .organization .page-main { clear: both; max-width: 960px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 960px) { .organization .page-main { margin-inline: auto; width: 100%; } } @container (min-width: 800px) { .organization .main-content { align-items: flex-start; column-gap: 3rem; display: flex; flex-direction: row; } } .organization__image { align-items: center; aspect-ratio: 1/1; background-color: var(--white); border-radius: var(--squirqle-radius); display: flex; justify-content: center; overflow: hidden; margin-block-end: 2rem; margin-inline: auto; max-width: 300px; padding: 1rem; } @container (min-width: 800px) { .organization__image { flex: 0 0 300px; max-width: auto; } } @container (min-width: 800px) { .organization__info { flex: 1 0 1%; } } .organization .social-media-menu { justify-content: flex-start; padding-block: 2rem; } .organization-list { margin-block: 6rem; } .organization-list__intro { margin-block-end: 3rem; } .organization-list h2 { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; } .organization-list__list { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; column-gap: 2rem; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 2rem; } @container (min-width: 800px) { .organization-list__list { justify-content: flex-start; } } .organization-list__list__item { flex: 0 0 13.4rem; } .organization-list__list__item > a { align-items: center; color: inherit; display: flex; flex-direction: column; height: 100%; text-decoration: none; } .organization-list__list__item__image { align-items: center; background: var(--white); aspect-ratio: 1/1; border-radius: var(--squirqle-radius); display: flex; flex-grow: 0; height: auto; justify-content: center; margin-block-end: 1rem; max-width: 100%; overflow: hidden; padding: 1rem; } .organization-list__list__item__text { text-align: center; } .person .page-main { clear: both; max-width: 600px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 600px) { .person .page-main { margin-inline: auto; width: 100%; } } .person__info { margin-block: 6rem; } .person__photo { margin-block: 2rem; margin-inline: auto; max-width: 15rem; } @media (min-width: 600px) { .person__photo { float: right; margin-block-end: 1rem; margin-block-start: 2rem; margin-inline-start: 1rem; } } .person .social-media-menu { justify-content: flex-start; padding-block: 2rem; } .person-list { margin-block: 6rem; } .person-list__intro { margin-block-end: 3rem; } .person-list h2 { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; } .person-list__list { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; align-items: flex-start; column-gap: 3rem; display: flex; flex-wrap: wrap; justify-content: center; margin-block-start: 2rem; row-gap: 3rem; } .person-list__list__item { flex: 0 0 16.5rem; } .person-list__list__item > a { align-items: center; color: inherit; display: flex; flex-direction: column; height: 100%; text-decoration: none; } .person-list__list__item > a img { outline: 0 solid var(--highlight); transition: var(--default-transition); } .person-list__list__item > a img:hover { outline: 1rem solid color-mix(in srgb, var(--emphasis) 20%, transparent); transition: var(--default-transition); z-index: 10; } .person-list__list__item__image { align-items: center; display: flex; flex-grow: 1; height: auto; margin-block-end: 1rem; max-width: 200px; } .resource .page-main { clear: both; max-width: 960px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 960px) { .resource .page-main { margin-inline: auto; width: 100%; } } .resource .main-content { align-items: center; display: flex; flex-direction: column; margin-block-end: 2rem; } @container (min-width: 800px) { .resource .main-content { align-items: start; flex-direction: row; column-gap: 3rem; } } .resource__body { max-width: 37rem; order: 1; } .resource__cover-image { box-shadow: 0.25rem 0.25rem 0 var(--loud); margin-block-end: 2rem; overflow: hidden; } .resource__sidebar { flex: 1 0 20rem; max-width: 20rem; order: 0; padding-block-start: 2rem; } @container (min-width: 800px) { .resource__sidebar { order: 2; padding-block-start: 0; } } .resource-list { margin-block: 6rem; } .resource-list__intro { margin-block-end: 3rem; } .resource-list h2 { border-block-start: var(--default-border-width) solid var(--loud); padding-block-start: 0.5rem; } .resource-list__list { list-style-type: none; margin-block-end: 0; margin-inline-start: 0; padding: 0; column-gap: 3rem; display: grid; justify-content: space-between; list-style-type: none; margin: 0; row-gap: 4rem; } @container (min-width: 800px) { .resource-list__list { grid-template-columns: repeat(2, 1fr); } } @container (min-width: 960px) { .resource-list__list { grid-template-columns: repeat(3, 1fr); } } .homepage .page-main { clear: both; max-width: 100%; margin-inline: 0rem; width: calc(100% - 0rem); } @media (min-width: 100%) { .homepage .page-main { margin-inline: auto; width: 100%; } } .home-list { margin-block-end: 6rem; clear: both; max-width: 1200px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 1200px) { .home-list { margin-inline: auto; width: 100%; } } .home-list__header { margin-block-end: 2rem; } @container (min-width: 800px) { .home-list__header { align-items: flex-start; display: flex; flex-direction: row; justify-content: space-between; } } .home-list__text { flex: 1 0 1%; margin-block-end: 1rem; } .home-list__cta { flex: 0 1 1%; text-align: end; white-space: nowrap; } .homepage-carousel .glide { margin-inline: auto; max-width: 1200px; } .homepage-intro { margin-block-end: 6rem; } .homepage-intro h1, .homepage-intro h2 { font-size: 1.25rem; } @media (min-width: 600px) { .homepage-intro h1, .homepage-intro h2 { font-size: 2rem; } } .homepage-intro .button { font-size: 1rem; } .homepage-intro__text { border-radius: var(--squirqle-radius); color: var(--white); font-weight: var(--light-weight); line-height: var(--compact-line-height); padding-inline: 3rem; text-shadow: 0 0 1rem var(--black); z-index: 3; } @media (min-width: 600px) { .homepage-intro__text { font-size: 1.5rem; padding-block: 1.5rem; padding-inline: 1.5rem; } } .homepage-intro__item { position: relative; } .homepage-intro__item__image { height: auto; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; } .homepage-intro__item__image img { height: 100%; object-fit: cover; object-position: center; width: 100%; } .homepage-intro__item__inner { align-items: center; display: flex; flex-direction: column; justify-content: center; margin-inline: auto; max-width: 1200px; min-height: 360px; } @media (min-width: 1200px) { .homepage-intro__item__inner { min-height: 600px; } } @media (min-width: 1600px) { .homepage-intro__item__inner { min-height: 800px; } } .homepage-intro__item .globe { display: block; position: absolute; z-index: 2; } #homepage-intro-1 .homepage-intro__item__inner { align-items: flex-start; justify-content: center; } #homepage-intro-1 .homepage-intro__text { max-width: 20rem; } @media (min-width: 600px) { #homepage-intro-1 .homepage-intro__text { max-width: 600px; } } #homepage-intro-1 .globe { background: var(--r-brightyellow-orange); mix-blend-mode: hard-light; top: 10%; border-radius: 350px; height: 350px; right: -122.5px; width: 350px; } @media (max-width: 600px) { #homepage-intro-1 .globe { border-radius: 262.5px; height: 262.5px; right: -91.875px; width: 262.5px; } } @media (min-width: 1200px) { #homepage-intro-1 .globe { border-radius: 525px; height: 525px; right: -183.75px; width: 525px; } } @media (min-width: 1600px) { #homepage-intro-1 .globe { border-radius: 700px; height: 700px; right: -245px; width: 700px; } } #homepage-intro-2 .homepage-intro__item__inner { align-items: flex-end; justify-content: center; padding-block-start: 2rem; } @media (min-width: 600px) { #homepage-intro-2 .homepage-intro__item__inner { padding-block-start: 0; } } #homepage-intro-2 .homepage-intro__text { color: var(--white); max-width: 600px; } @media (min-width: 600px) { #homepage-intro-2 .homepage-intro__text { margin-block-start: 4rem; margin-inline-start: 4rem; } } #homepage-intro-2 .globe { background: var(--r-lightblue-turquoise); mix-blend-mode: hard-light; opacity: 0.5; position: absolute; bottom: 5%; border-radius: 470px; height: 470px; right: -235px; width: 470px; } @media (max-width: 600px) { #homepage-intro-2 .globe { border-radius: 352.5px; height: 352.5px; right: -176.25px; width: 352.5px; } } @media (min-width: 1200px) { #homepage-intro-2 .globe { border-radius: 705px; height: 705px; right: -352.5px; width: 705px; } } @media (min-width: 1600px) { #homepage-intro-2 .globe { border-radius: 940px; height: 940px; right: -470px; width: 940px; } } #homepage-intro-3 .homepage-intro__item__inner { align-items: flex-start; justify-content: center; } #homepage-intro-3 .homepage-intro__item__image img { object-position: bottom; } #homepage-intro-3 .homepage-intro__text { color: var(--white); max-width: 600px; } #homepage-intro-4 { background: var(--black); } #homepage-intro-4 .homepage-intro__text { align-items: center; display: flex; flex-direction: column; max-width: 960px; text-align: center; } #homepage-intro-4 .intro-logo { display: block; height: auto; margin-block-end: 2rem; margin-inline: auto; width: 40px; } @media (min-width: 600px) { #homepage-intro-4 .intro-logo { width: 60px; } } #homepage-intro-4 menu { margin-block: 1rem; } #homepage-intro-4 menu li { margin-block: 1rem; } .follow-join { align-items: center; background-color: var(--black); background-image: url("/static/images/solar-8244680_1280.jpg"); background-repeat: no-repeat; background-size: cover; color: var(--white); display: flex; flex-direction: column; justify-content: center; column-gap: 2rem; margin-block-end: 6rem; padding-block: 3rem; } @container (min-width: 800px) { .follow-join { flex-direction: row; } } .follow-join__follow-us { background: linear-gradient(135deg, hsla(56, 100%, 65%, 0.7) 0%, hsla(21, 84%, 62%, 0.7) 100%); border-radius: var(--squirqle-radius); margin: 1rem; padding: 2rem; } .follow-join__follow-us .social-media-menu { column-gap: 0.5rem; } @container (min-width: 600px) { .follow-join__follow-us .social-media-menu { column-gap: 1rem; } } @container (min-width: 800px) { .follow-join__newsletter-subscription { flex: 0 1 35rem; } } .glide { position: relative; width: 100%; box-sizing: border-box; } .glide * { box-sizing: inherit; } .glide__track { overflow: hidden; } .glide__slides { position: relative; width: 100%; list-style: none; backface-visibility: hidden; transform-style: preserve-3d; touch-action: pan-Y; overflow: hidden; margin: 0; padding: 0; white-space: nowrap; display: flex; flex-wrap: nowrap; will-change: transform; } .glide__slides--dragging { user-select: none; } .glide__slide { width: 100%; height: 100%; flex-shrink: 0; white-space: normal; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .glide__slide a { user-select: none; -webkit-user-drag: none; -moz-user-select: none; -ms-user-select: none; } .glide__arrows { -webkit-touch-callout: none; user-select: none; } .glide__bullets { -webkit-touch-callout: none; user-select: none; } .glide--rtl { direction: rtl; } .coming-soon { align-items: center; background: linear-gradient(90deg, hsl(56, 100%, 65%) 0%, hsl(21, 84%, 62%) 85%); justify-content: center; text-align: end; text-shadow: 0 0 2rem hsla(21, 84%, 27%, 0.5); } .coming-soon__page { clear: both; max-width: 800px; margin-inline: 1rem; width: calc(100% - 2rem); } @media (min-width: 800px) { .coming-soon__page { margin-inline: auto; width: 100%; } } .coming-soon .social-media-menu { justify-content: flex-start; margin-block-start: 4rem; } /*# sourceMappingURL=screen.css.map */