/*!*****************************************************************************************************************************************!*\ !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./styles/main.scss ***! \*****************************************************************************************************************************************/ @charset "UTF-8"; /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) 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 */ *: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; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* 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; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* 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; } @font-face { font-family: "Manrope"; src: url(../fonts/9c46bbd98ee2f6b9dc4c.woff2) format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: "Manrope"; src: url(../fonts/1c8a98b0a28f6e9c3eb0.woff2) format("woff2"); font-weight: 700; font-style: bold; } body, h1 { font-family: "Manrope", sans-serif; font-weight: 400; font-style: normal; } strong { font-weight: 700; font-style: bold; } header { font-size: var(--font-size-sm); line-height: var(--font-line-height-sm); } header .dropdown-toggle { font-size: var(--font-size-xs); line-height: var(--font-line-height-xs); } .emergency-support-text, .footer-acknowledgement { font-size: var(--font-size-xs); line-height: var(--font-line-height-xs); } .main-heading h1, .main-blocks h1, .home-blocks h1, .extra-blocks h1 { font-size: var(--font-size-3xl); line-height: var(--font-line-height-3xl); } .main-heading h2, .main-blocks h2, .home-blocks h2, .extra-blocks h2 { font-size: var(--font-size-2xl); line-height: var(--font-line-height-2xl); } .main-heading h3, .main-blocks h3, .home-blocks h3, .extra-blocks h3 { font-size: var(--font-size-xl); line-height: var(--font-line-height-xl); } .main-heading h4, .main-heading blockquote, .main-blocks h4, .main-blocks blockquote, .home-blocks h4, .home-blocks blockquote, .extra-blocks h4, .extra-blocks blockquote { font-size: var(--font-size-lg); line-height: var(--font-line-height-lg); } .main-heading h5, .main-blocks h5, .home-blocks h5, .extra-blocks h5 { font-size: var(--font-size-md); line-height: var(--font-line-height-md); } .home-blocks p, .home-blocks a, .default .main-blocks .cta-container p, .default .main-blocks .cta-container a { font-size: var(--font-size-lg); line-height: var(--font-line-height-lg); --underline-rg-offset: var(--underline-lg-offset); } .button-field button { font-size: var(--font-size-lg); line-height: var(--font-line-height-lg); --underline-rg-offset: var(--underline-lg-offset); text-decoration: underline; text-decoration-thickness: var(--underline-rg); text-underline-offset: var(--underline-rg-offset); } footer { --underline-rg: var(--underline-lg); --underline-rg-offset: var(--underline-lg-offset); } .dropdown-menu .container p, .dropdown-menu .container a { font-size: var(--font-size-md); line-height: var(--font-line-height-md); } .home-blocks a, .main-blocks a { text-decoration: underline; text-decoration-thickness: var(--underline-rg); text-underline-offset: var(--underline-rg-offset); } .main-blocks .events-past a { text-decoration: none; } .hero .hero-tagline, .breadcrumbs { font-size: var(--font-size-2xs); line-height: var(--font-line-height-2xs); text-transform: uppercase; letter-spacing: var(--font-letter-spacing-wide); } .center { text-align: center; } form > div[role=alert], .bio { font-size: var(--font-size-base); line-height: var(--font-line-height-base); } .small, footer { font-size: var(--font-size-sm); line-height: var(--font-line-height-sm); } .tiny, .event p, .footer-message { font-size: var(--font-size-xs); line-height: var(--font-line-height-xs); } :root { --base: 1.2vw; } @media (max-width: 1280px) { :root { --base: 16.5px; } } @media (max-width: 640px) { :root { --base: 3.3vw; } } :root { --font-size-2xs: calc(var(--base) * 0.8); --font-size-xs: calc(var(--base) * 0.93); --font-size-base: calc(var(--base) * 1); --font-size-sm: calc(var(--base) * 1.16); --font-size-md: calc(var(--base) * 1.32); --font-size-lg: calc(var(--base) * 1.88); --font-size-xl: calc(var(--base) * 2); --font-size-2xl: calc(var(--base) * 2.22); --font-size-3xl: calc(var(--base) * 3.68); --font-line-height-2xs: 124%; --font-line-height-xs: 136%; --font-line-height-base: 136%; --font-line-height-sm: 136%; --font-line-height-md: 124%; --font-line-height-lg: 124%; --font-line-height-xl: 118%; --font-line-height-2xl: 120%; --font-line-height-3xl: 118%; --font-letter-spacing-base: 0.0075em; --font-letter-spacing-wide: 0.06em; } @media (max-width: 640px) { :root { --font-size-2xs: calc(var(--base) * 0.8 * 1.125); --font-size-xs: calc(var(--base) * 0.93 * 1.125); --font-size-base: calc(var(--base) * 1 * 1.125); --font-size-sm: calc(var(--base) * 1.16 * 1); --font-size-md: calc(var(--base) * 1.32 * 1); --font-size-lg: calc(var(--base) * 1.88 * 0.75); --font-size-xl: calc(var(--base) * 2 * 0.75); --font-size-2xl: calc(var(--base) * 2.22 * 0.75); --font-size-3xl: calc(var(--base) * 3.68 * 0.625); --font-letter-spacing-base: 0.005em; --font-letter-spacing-wide: 0.03em; } } :root { --palette-navy: #1b1f3c; --palette-navy-light: #24294c; --palette-white: #fff; --palette-lavender: #e4dbe5; --palette-mauve: #f2e7f3; --palette-teal: #01a99e; --palette-teal-light: #b3dcd9; --palette-pink: #ffadef; --palette-pink-light: #ffd5f7; --palette-coral: #ff6b5f; --palette-coral-light: #ffada7; --gradient: linear-gradient( 180deg, var(--palette-pink) 50%, var(--palette-lavender) 100% ); --radial-gradient: radial-gradient( circle at 75% 28%, color-mix(in srgb, var(--palette-pink) 25%, transparent) 0%, color-mix(in srgb, var(--palette-lavender) 25%, transparent) 100% ); --colour-text: var(--palette-navy); --colour-text-muted: var(--palette-navy-light); --colour-bg: var(--palette-lavender); --colour-bg-soft: var(--palette-mauve); --colour-surface: var(--palette-white); --colour-primary: var(--palette-teal); --colour-primary-soft: var(--palette-teal-light); --colour-secondary: var(--palette-pink); --colour-secondary-soft: var(--palette-pink-light); --colour-accent: var(--palette-coral); --colour-accent-soft: var(--palette-coral-light); --colour-overlay: var(--palette-navy); --space-2xs: 0.2rem; --space-xs: 0.6rem; --space-sm: 1rem; --space-base: 1.2rem; --space-md: 1.8rem; --space-lg: 2.4rem; --space-xl: 3.6rem; --space-2xl: 4.8rem; --space-3xl: 7.2rem; } @media (max-width: 640px) { :root { --space-3xl: 5.6rem; } } :root { --padding-button: var(--space-sm); --padding-button-sm: var(--space-xs); --padding-button-back: var(--space-sm); --padding-button-logo: var(--space-sm); --padding-button-sides: var(--space-md); --padding-section: var(--space-md); --padding-header: var(--space-md); --padding-main-content: var(--space-3xl); --padding-list: var(--space-sm); --padding-form-input: var(--space-sm); --padding-footer-message: var(--space-sm); --padding-quick-esc: var(--space-xs); } @media (max-width: 640px) { :root { --padding-section: var(--space-sm); --padding-header: var(--space-sm); } } :root .navbar-menu { --padding-button-sides: var(--space-sm); } :root { --header-logo-width: var(--space-3xl); --header-set-height: calc(var(--header-logo-width) / 2); --anchor-scroll-offset: calc( var(--header-set-height) + var(--padding-section) - var(--space-2xs) ); --hero-height: 104svh; --hero-logo-width: 64vw; --text-banner-height: 92svh; --gap-col: var(--space-md); --gap-row: var(--space-xs); } @media (min-width: 1281px) { :root { --hero-logo-width: 48vw; } } @media (max-width: 640px) { :root { --header-logo-width: calc(var(--space-3xl) * 1); --header-set-height: calc(var(--header-logo-width) / 1.5); --hero-height: 98svh; --hero-logo-width: calc(100vw - var(--padding-section) * 2); --gap-col: var(--space-xs); --gap-row: var(--space-sm); } } :root { --hover-opacity: 0.5; --input-placeholder-opacity: 0.25; --colour-overlay-opacity: 0.75; --carousel-image-opacity: 0.875; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --stroke-rg: 0.1rem dashed var(--colour-text); --stroke-rg-solid: 0.1rem solid var(--colour-text); --stroke-offset: 0.1rem; --underline-sm: 0.075rem; --underline-rg: 0.1rem; --underline-rg-offset: 0.1rem; --underline-lg: 0.05rem; --underline-lg-offset: 0.15rem; } @media (max-width: 640px) { :root { --stroke-rg: 0.075rem dashed var(--colour-text); --stroke-rg-solid: 0.075rem solid var(--colour-text); --stroke-offset: 0.075rem; --underline-rg: 0.075rem; --underline-rg-offset: 0.075rem; --underline-lg: 0.0375rem; --underline-lg-offset: 0.1125rem; } } :root { --transition-fast: 0.2s; --transition-base: 0.3s; --transition-slow: 0.6s; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); } html { font-size: var(--font-size-base); line-height: normal; scroll-behavior: smooth; scroll-padding-top: var(--anchor-scroll-offset); box-sizing: border-box; } body { font-size: var(--font-size-md); line-height: var(--font-line-height-md); letter-spacing: var(--font-letter-spacing-base); background-color: var(--colour-bg); color: var(--colour-text); } img { height: auto; width: 100%; } button { border: none; background: none; padding: 0; cursor: pointer; font: inherit; } a, button { transition: color var(--transition-fast); } a:hover, button:hover { text-decoration: underline; text-decoration-thickness: var(--underline-rg); text-underline-offset: var(--underline-rg-offset); } .logo { fill: var(--colour-primary); } ::selection { background: transparent; color: var(--colour-accent); } .navbar-set ::selection, .looking-for-support .fill ::selection, .cta-container:nth-child(1) ::selection { color: var(--colour-accent-soft); } form > div[role=alert]::selection { color: var(--colour-accent-soft); } input, textarea { background-color: initial; appearance: auto; box-sizing: border-box; padding: initial; border: initial; } input::placeholder, textarea::placeholder { opacity: var(--input-placeholder-opacity); } blockquote { text-indent: -0.75rem; margin-left: 0.75rem; } @media (max-width: 640px) { blockquote { text-indent: -0.5rem; margin-left: 0.5rem; font-size: var(--font-size-md) !important; line-height: var(--font-line-height-md) !important; } } .block.heading p:not(:last-child), .block.text p:not(:last-child) { margin-bottom: var(--space-sm); } header { position: fixed; top: 0; left: 0; width: 100%; display: flex; flex-direction: row; z-index: 1000; } @media (max-width: 640px) { header { font-size: var(--font-size-md); line-height: var(--font-line-height-md); } } header.scrolled .navbar-lhs .navbar-buttons a.logo { height: var(--header-set-height); width: var(--header-set-height); padding: 0.6rem; transition: height 1s ease 0s, width 1s ease 0.25s, padding 0.3s ease 0s; } @media (max-width: 640px) { header.scrolled .navbar-rhs .navbar-set a { height: 0; opacity: 0; } header.scrolled.dropdown-open .navbar-rhs .navbar-set a { height: var(--header-set-height); opacity: 1; } } header a { padding: var(--padding-button); display: inline-flex; align-items: center; } header .navbar-lhs, header .navbar-rhs { display: flex; flex-direction: row; } header .navbar-lhs { flex: 1; min-width: 0; } @media (max-width: 640px) { header .navbar-lhs { flex: initial; } } header .navbar-lhs .navbar-buttons { display: flex; flex-direction: row; } header .navbar-lhs .navbar-buttons a { display: flex; align-items: center; justify-content: center; align-self: center; height: var(--header-logo-width); width: var(--header-logo-width); } header .navbar-lhs .navbar-buttons a img, header .navbar-lhs .navbar-buttons a svg { height: 100%; width: auto; } header .navbar-lhs .navbar-buttons a.size-sm { height: var(--header-set-height); width: var(--header-set-height); } header .navbar-lhs .navbar-buttons a.logo { --colour-text: var(--palette-white); --colour-text-muted: var(--palette-mauve); --colour-bg: var(--palette-navy); --colour-bg-soft: var(--palette-navy-light); --colour-surface: var(--palette-navy); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--colour-bg); transition: height 1s ease 0.25s, width 1s ease 0s, padding 0.3s ease 0.25s; } header .navbar-lhs .navbar-buttons a.logo.size-sm { background-color: var(--palette-white); padding: 0.8rem; } header .navbar-lhs .navbar-buttons a.logo.size-sm img { filter: saturate(0) brightness(0); } header .navbar-lhs .navbar-buttons a.back { background-color: var(--colour-primary); } header .navbar-lhs .navbar-buttons a.back.size-sm { padding: var(--padding-button-back); } header .navbar-lhs .navbar-menu { background-color: var(--colour-primary); height: var(--header-set-height); width: 100%; align-self: flex-start; display: flex; flex-direction: row; justify-content: safe center; align-content: center; padding: 0 var(--padding-button-sides); overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; } @media (max-width: 640px) { header .navbar-lhs .navbar-menu { display: none; } } header .navbar-lhs .navbar-menu::-webkit-scrollbar { display: none; } header .navbar-lhs .navbar-menu > a { text-decoration-thickness: var(--underline-sm); } header .navbar-lhs .navbar-menu > a:not(:last-child) { padding-right: 0; } header .navbar-lhs .navbar-menu > a:not(:last-child)::after { content: ""; display: inline-block; vertical-align: middle; width: 1rem; height: 1rem; margin-left: var(--space-sm); background-color: var(--colour-accent); mask-image: url(../img/separator.svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(../img/separator.svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } header .navbar-lhs .dropdown-menu { display: flex; flex-direction: column; width: 100%; background-color: var(--colour-primary); padding: var(--padding-header); display: none; } header .navbar-lhs .dropdown-menu .container { border-radius: var(--radius-md); color: var(--colour-text); background-color: var(--colour-primary-soft); overflow: hidden; } header .navbar-lhs .dropdown-menu a { padding: var(--padding-button); display: block; margin-left: 1.75rem; text-indent: -1.75rem; } header .navbar-lhs .dropdown-menu a:not(:last-child) { padding-bottom: 0; } header .navbar-lhs .dropdown-menu a::before { content: ""; display: inline-block; vertical-align: middle; width: 1rem; height: 1rem; margin-left: var(--space-2xs); margin-right: var(--space-xs); background-color: var(--colour-accent); mask-image: url(../img/separator.svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; -webkit-mask-image: url(../img/separator.svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } header .navbar-rhs { align-self: flex-start; } @media (max-width: 640px) { header .navbar-rhs { flex: 1; } header .navbar-rhs .navbar-set { width: 100%; } } header .navbar-rhs .navbar-set { height: var(--header-set-height); } header .navbar-rhs .navbar-set a { background-color: var(--colour-accent); padding: 0 var(--padding-button-sides); height: var(--header-set-height); display: flex; flex-direction: column; justify-content: center; align-content: center; text-decoration: underline; text-decoration-thickness: var(--underline-sm); text-underline-offset: var(--underline-rg-offset); } @media (max-width: 640px) { header .navbar-rhs .navbar-set a { text-decoration: none; height: 100%; transition: height 0.25s ease 0s, opacity 0.25s ease 0s; } } header .navbar-rhs .navbar-set a span.title-desktop { display: flex; } header .navbar-rhs .navbar-set a span.title-mobile { display: none; } @media (max-width: 640px) { header .navbar-rhs .navbar-set a span.title-desktop { display: none; } header .navbar-rhs .navbar-set a span.title-mobile { display: flex; } } header .navbar-rhs .dropdown-toggle { --colour-text: var(--palette-white); --colour-text-muted: var(--palette-mauve); --colour-bg: var(--palette-navy); --colour-bg-soft: var(--palette-navy-light); --colour-surface: var(--palette-navy); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--colour-text); background-color: var(--colour-bg); padding: var(--padding-button); text-decoration-thickness: var(--underline-sm); } header .navbar-rhs .dropdown-toggle span { display: flex; transform: rotate(-30deg); } header .navbar-rhs .dropdown-toggle span.close { display: none; } @media (max-width: 640px) { header.dropdown-open { flex-direction: column-reverse; } } header.dropdown-open .navbar-lhs .navbar-buttons a { height: 100%; } header.dropdown-open .navbar-lhs .navbar-buttons a:not(.back) { display: none; } header.dropdown-open .navbar-lhs .navbar-menu { display: none; } header.dropdown-open .navbar-lhs .dropdown-menu { display: block; } header.dropdown-open .navbar-rhs { align-self: stretch; } header.dropdown-open .navbar-rhs .navbar-set { height: 100%; } @media (max-width: 640px) { header.dropdown-open .navbar-rhs .navbar-set { height: var(--header-set-height) !important; opacity: 1 !important; } } header.dropdown-open .navbar-rhs .navbar-set a { height: 100%; } header.dropdown-open .navbar-rhs .dropdown-toggle span { transform: rotate(0); } header.dropdown-open .navbar-rhs .dropdown-toggle span.menu { display: none; } header.dropdown-open .navbar-rhs .dropdown-toggle span.close { display: flex; } body div:not(.home) header.dropdown-open .navbar-lhs .dropdown-menu { padding-left: var(--space-2xs); } .quick-esc { position: fixed; bottom: 0; right: 0; z-index: 1100; } .quick-esc:hover .quick-esc-link { background-color: var(--colour-secondary-soft); } .quick-esc .quick-esc-link { display: inline-flex; align-items: flex-start; padding: var(--padding-quick-esc) var(--padding-button) 0 var(--padding-quick-esc); background-color: var(--colour-secondary); text-decoration: none; border-radius: var(--space-3xl) 0 0 0; } .quick-esc .quick-esc-link .quick-esc-text { padding-bottom: var(--padding-quick-esc); margin-right: calc(var(--space-lg) * -1); font-size: var(--font-size-xs); line-height: var(--font-line-height-xs); text-transform: uppercase; transform-origin: top right; transform: rotate(-30deg); } .quick-esc .quick-esc-link .quick-esc-arrow { width: var(--space-2xl); height: var(--space-2xl); padding-top: var(--space-md); } .quick-esc .quick-esc-link .quick-esc-arrow img { width: 100%; height: auto; } footer { --colour-text: var(--palette-white); --colour-text-muted: var(--palette-mauve); --colour-bg: var(--palette-navy); --colour-bg-soft: var(--palette-navy-light); --colour-surface: var(--palette-navy); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--colour-bg); color: var(--colour-text); padding: var(--padding-section); scroll-margin-top: var(--header-set-height); } footer .container { background-color: var(--colour-bg-soft); padding: var(--padding-section); display: flex; flex-direction: column; gap: var(--space-lg); border-radius: var(--radius-md); } footer .footer-logo { width: 5rem; } footer .footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; column-gap: var(--space-md); align-items: flex-start; } footer .footer-nav > :nth-child(-n+3) { grid-column: 1; } footer .footer-nav > :nth-child(n+4) { grid-column: 2; } footer .footer-links, footer .footer-additional-links, footer .footer-copyright { display: flex; align-items: flex-start; flex-wrap: wrap; column-gap: var(--space-md); row-gap: var(--space-xs); } footer .footer-links > *, footer .footer-additional-links > *, footer .footer-copyright > * { width: calc(50% - var(--space-md) / 2); } footer .footer-links ul, footer .footer-links .additional-links-contents, footer .footer-additional-links ul, footer .footer-additional-links .additional-links-contents, footer .footer-copyright ul, footer .footer-copyright .additional-links-contents { display: flex; flex-direction: column; } footer .footer-links .site-credit, footer .footer-additional-links .site-credit, footer .footer-copyright .site-credit { display: block; } footer .footer-links .site-credit:hover .site-credit-title, footer .footer-additional-links .site-credit:hover .site-credit-title, footer .footer-copyright .site-credit:hover .site-credit-title { display: none; } footer .footer-links .site-credit:hover .site-credit-link, footer .footer-additional-links .site-credit:hover .site-credit-link, footer .footer-copyright .site-credit:hover .site-credit-link { display: block; } footer .footer-links .site-credit .site-credit-link, footer .footer-additional-links .site-credit .site-credit-link, footer .footer-copyright .site-credit .site-credit-link { display: none; } @media (max-width: 640px) { footer .footer-links { flex-direction: column; row-gap: var(--space-sm); } footer .footer-links .emergency-support-text, footer .footer-links .emergency-support-links { font-size: var(--font-size-xs); line-height: var(--font-line-height-xs); } footer .footer-links > * { width: 100%; } footer .footer-additional-links, footer .footer-copyright { font-size: var(--font-size-xs); line-height: var(--font-line-height-xs); } } footer .footer-acknowledgement { padding-right: var(--space-xl); } @media (max-width: 640px) { footer .footer-acknowledgement { padding-right: 0; padding-bottom: var(--space-xl); } } body div.site { position: relative; margin-top: var(--header-set-height); } body div.site > div:not(.home-blocks, .quick-esc) { padding: var(--padding-section); } .home-blocks > div.cta, .main-blocks > div.cta { display: flex; flex-direction: row; gap: var(--gap-col); row-gap: var(--gap-row); } @media (max-width: 640px) { .home-blocks > div.cta, .main-blocks > div.cta { flex-direction: column; } } .home-blocks > div.cta .cta-container, .main-blocks > div.cta .cta-container { position: relative; width: 100%; min-height: 14rem; display: flex; flex-direction: column; justify-content: space-between; padding: var(--padding-section); background-color: var(--colour-bg-soft); border-radius: var(--radius-md); outline: var(--stroke-rg); align-self: flex-start; } .home-blocks > div.cta .cta-container.rev, .main-blocks > div.cta .cta-container.rev { flex-direction: column-reverse; } .home-blocks > div.cta .cta-container:nth-child(1), .main-blocks > div.cta .cta-container:nth-child(1) { background-color: var(--colour-accent); outline: var(--stroke-rg-solid); } .home-blocks > div.cta .cta-container:nth-child(2), .main-blocks > div.cta .cta-container:nth-child(2) { min-height: 20rem; } .home-blocks > div.text, .home-blocks > div.events-upcoming, .home-blocks > div.events-past, .home-blocks > div.testimonials, .home-blocks > div.image-carousel, .home-blocks > div.profiles, .home-blocks > div.testimonials, .home-blocks > div.values, .main-blocks > div.text, .main-blocks > div.events-upcoming, .main-blocks > div.events-past, .main-blocks > div.testimonials, .main-blocks > div.image-carousel, .main-blocks > div.profiles, .main-blocks > div.testimonials, .main-blocks > div.values { padding-bottom: var(--space-base); } @media (max-width: 640px) { .home-blocks > div.text.image-carousel, .home-blocks > div.events-upcoming.image-carousel, .home-blocks > div.events-past.image-carousel, .home-blocks > div.testimonials.image-carousel, .home-blocks > div.image-carousel.image-carousel, .home-blocks > div.profiles.image-carousel, .home-blocks > div.testimonials.image-carousel, .home-blocks > div.values.image-carousel, .main-blocks > div.text.image-carousel, .main-blocks > div.events-upcoming.image-carousel, .main-blocks > div.events-past.image-carousel, .main-blocks > div.testimonials.image-carousel, .main-blocks > div.image-carousel.image-carousel, .main-blocks > div.profiles.image-carousel, .main-blocks > div.testimonials.image-carousel, .main-blocks > div.values.image-carousel { padding-bottom: var(--space-xs); } } .home-blocks > div.cta, .main-blocks > div.cta { padding-bottom: var(--space-md); } .home-blocks > div.heading + .heading, .home-blocks > div.heading + .profiles, .home-blocks > div.heading + .events-past, .home-blocks > div.heading + .list, .home-blocks > div.image-carousel + *, .main-blocks > div.heading + .heading, .main-blocks > div.heading + .profiles, .main-blocks > div.heading + .events-past, .main-blocks > div.heading + .list, .main-blocks > div.image-carousel + * { padding-top: var(--space-base); } .home-blocks > div.values + *, .main-blocks > div.values + * { padding-top: var(--space-xs); } .home-blocks > div.events-upcoming + .heading, .main-blocks > div.events-upcoming + .heading { padding-top: var(--space-base); } .home-blocks { padding-bottom: var(--space-md); } .main-heading, .main-blocks, .extra-blocks { display: flex; flex-direction: column; gap: var(--space-base); } .main-heading .breadcrumbs, .main-blocks .breadcrumbs, .extra-blocks .breadcrumbs { display: flex; flex-direction: row; gap: calc(var(--space-2xs) * 2); } .main-heading .page-title, .main-heading .fill, .main-blocks .page-title, .main-blocks .fill, .extra-blocks .page-title, .extra-blocks .fill { padding: var(--padding-section); background-color: var(--colour-secondary-soft); border-radius: var(--radius-lg); outline: var(--stroke-rg); } @media (max-width: 640px) { .main-heading .page-title, .main-blocks .page-title, .extra-blocks .page-title { padding: var(--space-2xl) var(--padding-section); } } .main-heading .block > *, .main-blocks .block > *, .extra-blocks .block > * { margin: 0 auto; max-width: 72%; } @media (max-width: 640px) { .main-heading .block > *, .main-blocks .block > *, .extra-blocks .block > * { max-width: initial; } } .main-heading .block > *.no-margin, .main-blocks .block > *.no-margin, .extra-blocks .block > *.no-margin { margin: 0; max-width: initial; } .main-heading { gap: var(--space-md); } @media (max-width: 640px) { .main-heading { gap: var(--space-sm); } } .image-carousel { margin: 0 calc(var(--padding-section) * -1); } .image-carousel .image-carousel-slider.small { height: 12rem; } .image-carousel .image-carousel-slider.medium { height: 18rem; } .image-carousel .image-carousel-slider.large { height: 24rem; } .testimonials { padding: var(--padding-section); background-color: var(--colour-bg-soft); border-radius: var(--radius-md); } .testimonials .testimonials-slider .swiper-slide { flex-direction: column; gap: var(--gap-row); } .image-carousel-slider .swiper, .testimonials-slider .swiper { width: 100%; overflow: hidden; user-select: none; } .image-carousel-slider .swiper-wrapper, .testimonials-slider .swiper-wrapper { height: 100%; } .image-carousel-slider .swiper-slide, .testimonials-slider .swiper-slide { display: flex; align-items: flex-start; justify-content: center; width: auto; height: 100%; position: relative; overflow: hidden; opacity: var(--carousel-image-opacity); } @media (max-width: 640px) { .image-carousel-slider .swiper-slide, .testimonials-slider .swiper-slide { opacity: 1; } } .image-carousel-slider .swiper-slide:hover, .testimonials-slider .swiper-slide:hover { opacity: 1; } .image-carousel-slider .swiper-slide:hover .overlay-1, .image-carousel-slider .swiper-slide:hover .overlay-2, .testimonials-slider .swiper-slide:hover .overlay-1, .testimonials-slider .swiper-slide:hover .overlay-2 { opacity: 0; } .image-carousel-slider .swiper-slide:hover .img, .testimonials-slider .swiper-slide:hover .img { opacity: 1; } .image-carousel-slider .swiper-slide .overlay-1, .image-carousel-slider .swiper-slide .overlay-2, .testimonials-slider .swiper-slide .overlay-1, .testimonials-slider .swiper-slide .overlay-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 640px) { .image-carousel-slider .swiper-slide .overlay-1, .image-carousel-slider .swiper-slide .overlay-2, .testimonials-slider .swiper-slide .overlay-1, .testimonials-slider .swiper-slide .overlay-2 { display: none; } } .image-carousel-slider .swiper-slide .overlay-1, .testimonials-slider .swiper-slide .overlay-1 { background-color: var(--colour-overlay); mix-blend-mode: color; opacity: var(--colour-overlay-opacity); } .image-carousel-slider .swiper-slide .overlay-2, .testimonials-slider .swiper-slide .overlay-2 { background: var(--radial-gradient); background-blend-mode: lighten, normal; } .image-carousel-slider .swiper-slide img, .testimonials-slider .swiper-slide img { display: block; width: auto; height: 100%; object-fit: cover; } .events-upcoming .events, .events-past .events { width: 100%; display: flex; column-gap: var(--gap-col); row-gap: var(--space-base); } .events-upcoming .events .event .event-desc, .events-past .events .event .event-desc { height: 100%; display: flex; row-gap: var(--space-sm); column-gap: var(--gap-col); } .events-upcoming .events .event .event-desc a, .events-past .events .event .event-desc a { text-decoration: none; } .events-upcoming .events .event .event-desc a:hover, .events-past .events .event .event-desc a:hover { text-decoration: underline; text-decoration-thickness: var(--underline-rg); } .events-upcoming { display: flex; flex-direction: column; gap: var(--space-md); } .events-upcoming .events { flex-direction: row; flex-wrap: wrap; } .events-upcoming .events .event { width: calc((100% - var(--gap-col) * 2) / 3); padding: var(--padding-section); background-color: var(--colour-bg-soft); border-radius: var(--radius-md); display: flex; flex-direction: column; row-gap: var(--space-sm); } @media (max-width: 640px) { .events-upcoming .events .event { width: calc((100% - var(--gap-col) * 2) / 2); } } .events-upcoming .events .event .event-image { aspect-ratio: 1/1; } .events-upcoming .events .event .event-image img { width: 100%; height: 100%; object-fit: cover; } .events-upcoming .events .event .event-desc { flex-direction: column-reverse; justify-content: space-between; } .events-past .events { flex-direction: column; } .events-past .events .event { width: 100%; display: flex; flex-direction: row; } .events-past .events .event .event-image { display: none; } .events-past .events .event .event-desc { flex-direction: row; justify-content: space-between; width: 100%; } .events-past .events .event .event-desc .event-details { display: none; } .events-past a, .list a { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; text-decoration: none; padding-bottom: var(--space-xs); border-bottom: var(--stroke-rg); } .events-past a h5, .list a h5 { font-weight: bold; } .events-past a::after, .list a::after { content: "→"; display: inline-flex; } .events-past a > *, .list a > * { margin-right: auto; } .events-past li:not(:first-child) a, .list li:not(:first-child) a { padding-top: var(--padding-list); } .events-past ul:hover li a:hover h4, .events-past ul:hover li a:hover span, .events-past ul:hover .event a:hover h4, .events-past ul:hover .event a:hover span, .events-past .events:hover li a:hover h4, .events-past .events:hover li a:hover span, .events-past .events:hover .event a:hover h4, .events-past .events:hover .event a:hover span, .list ul:hover li a:hover h4, .list ul:hover li a:hover span, .list ul:hover .event a:hover h4, .list ul:hover .event a:hover span, .list .events:hover li a:hover h4, .list .events:hover li a:hover span, .list .events:hover .event a:hover h4, .list .events:hover .event a:hover span { text-decoration: underline; text-decoration-thickness: var(--underline-rg); text-underline-offset: var(--underline-rg-offset); } .values { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-xs); text-align: center; } .values > div.item { width: calc(50% - var(--space-xs)); padding: var(--padding-section); background-color: var(--colour-bg-soft); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .values > div.item:hover { background-color: var(--colour-primary-soft); cursor: crosshair; outline: var(--stroke-rg); } .profiles { flex-direction: row; flex-wrap: wrap; width: 100%; display: flex; column-gap: var(--gap-col); row-gap: var(--gap-row); } .profiles .profile { width: calc((100% - var(--gap-col) * 2) / 3); padding: var(--padding-section); background-color: var(--colour-bg-soft); border-radius: var(--radius-md); display: flex; flex-direction: column; row-gap: var(--gap-row); align-self: flex-start; } @media (max-width: 640px) { .profiles .profile { width: 100%; } } .profiles .profile .profile-image, .profiles .profile .profile-content { display: flex; row-gap: var(--gap-row); column-gap: var(--gap-col); flex-direction: column; } .profiles .profile .profile-image { aspect-ratio: 1/1; } .profiles .profile .profile-image img { width: 100%; height: 100%; object-fit: cover; } .profiles .profile .profile-content .bio { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; } form > div:not(:last-child):not([role=alert]) { margin-bottom: var(--space-lg); } form > div[role=alert] { padding-bottom: var(--space-lg); color: var(--colour-accent); } form > div > div { display: flex; flex-direction: column; row-gap: var(--gap-row); } form > div > div > * { display: flex; flex-direction: column; height: 100%; font-size: var(--font-size-base); } form > div > div > * > label { margin-bottom: var(--space-xs); font-size: var(--font-size-sm); } form > div > div .text-field input, form > div > div .textarea-field textarea { padding: var(--padding-form-input); background-color: var(--colour-surface); border-radius: var(--radius-sm); } form > div > div .textarea-field textarea { min-height: 12rem; } form > div > div .radio-field > div, form > div > div .checkbox-field > div { display: flex; flex-direction: row; gap: calc(var(--space-2xs) * 2); } form > div > div .button-field button { position: relative; width: 100%; min-height: 14rem; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--padding-section); background-color: var(--colour-bg-soft); border-radius: var(--radius-md); outline: var(--stroke-rg); background-color: var(--colour-accent); outline: var(--stroke-rg-solid); } .footer-message .footer-message-container { padding: var(--padding-footer-message); background-color: var(--colour-primary-soft); border-radius: var(--radius-md); outline: var(--stroke-rg); display: flex; flex-direction: row; gap: var(--gap-col); } .footer-message .footer-message-container > * { text-decoration-thickness: var(--underline-sm); text-underline-offset: var(--underline-rg-offset); display: inline-flex; } .footer-message .footer-message-container > *:first-child { text-decoration: underline; } .footer-message .footer-message-container.stack { flex-direction: column; align-items: flex-start; } .footer-message .footer-message-container.rev > *:first-child { text-decoration: none; } .footer-message .footer-message-container.rev > *:last-child { text-decoration: underline; } .footer-message .footer-message-container:hover { text-decoration: none; background-color: var(--colour-primary); } body div.site.home { margin-top: initial; } .hero { --colour-text: var(--palette-white); --colour-text-muted: var(--palette-mauve); --colour-bg: var(--palette-navy); --colour-bg-soft: var(--palette-navy-light); --colour-surface: var(--palette-navy); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: var(--hero-height); background-color: var(--colour-bg-soft); color: var(--colour-text); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-sm); text-align: center; } .hero .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: var(--hero-height); z-index: 1; mix-blend-mode: color; filter: invert(0.75); } .hero .hero-video figure { display: contents; } .hero .hero-video figure iframe { width: 100%; height: 100%; aspect-ratio: 16/9; border: 0; } .hero .hero-tagline { z-index: 2; } .hero .hero-logo { z-index: 1; width: var(--hero-logo-width); } .home-blocks > div { padding: var(--padding-section); } .home-blocks > div.text-banner { height: var(--text-banner-height); background-color: var(--colour-secondary); background: linear-gradient(180deg, var(--colour-secondary) 50%, var(--colour-bg) 100%); } .home-blocks > div.text-banner .container { background-color: var(--colour-secondary-soft); border-radius: var(--radius-md); outline: var(--stroke-rg); } @media (max-width: 640px) { .home-blocks > div.text-banner { height: auto; } .home-blocks > div.text-banner .container { display: flex; flex-direction: column; height: auto; gap: var(--space-xl); } } .home-blocks > div .container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: var(--padding-section); } .default > :nth-child(2), body > div.events > :nth-child(2) { margin-top: var(--header-set-height); } .default.looking-for-support .page-title, .default.looking-for-support .fill, body > div.events.looking-for-support .page-title, body > div.events.looking-for-support .fill { background-color: var(--colour-accent-soft); } .default .events, body > div.events .events { max-width: initial; } /*!********************************************************************************************************************************************************!*\ !*** css ../node_modules/css-loader/dist/cjs.js!../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!../node_modules/swiper/swiper.css ***! \********************************************************************************************************************************************************/ /** * Swiper 12.1.3 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2026 Vladimir Kharlampidi * * Released under the MIT License * * Released on: March 24, 2026 */ :root { --swiper-theme-color: #007aff; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; .swiper-slide, .swiper-cube-shadow { transform-style: preserve-3d; } } /* CSS Mode */ .swiper-css-mode { > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ &::-webkit-scrollbar { display: none; } } > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } &.swiper-horizontal { > .swiper-wrapper { scroll-snap-type: x mandatory; } > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-slides-offset-before); scroll-margin-inline-start: var(--swiper-slides-offset-before); } > .swiper-wrapper > .swiper-slide:last-child { margin-inline-end: var(--swiper-slides-offset-after); } } &.swiper-vertical { > .swiper-wrapper { scroll-snap-type: y mandatory; } > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-slides-offset-before); scroll-margin-block-start: var(--swiper-slides-offset-before); } > .swiper-wrapper > .swiper-slide:last-child { margin-block-end: var(--swiper-slides-offset-after); } } &.swiper-free-mode { > .swiper-wrapper { scroll-snap-type: none; } > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } } &.swiper-centered { > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } } &.swiper-centered.swiper-horizontal { > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } } &.swiper-centered.swiper-vertical { > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } } } /* Slide styles start */ /* 3D Shadows */ .swiper-3d { .swiper-slide-shadow, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom, .swiper-slide-shadow, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top, .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress), .swiper-watch-progress .swiper-slide-visible { .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Slide styles end */