@charset "UTF-8"; /* ========================================================= ANNUAL REPORT STYLES Only applies to 2024 and newer 1. Defaults / globals 2. Utilities 3. Components 4. Vendor / third-party ========================================================= */ /* MARK: Defaults / globals ---------------- */ /* ========================================================= MODERN CSS RESET Taken from - https://andy-bell.co.uk/a-more-modern-css-reset/ - https://www.joshwcomeau.com/css/custom-css-reset/ ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul[role=list], ol[role=list] { list-style: none; margin-inline: 0; padding: 0; } body { line-height: 1.5; min-height: 100vh; } h1, h2, h3, h4, h5, h6, button, input, label { line-height: 1.1; } p { text-wrap: pretty; } a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } input, button, textarea, select { font: inherit; } textarea:not([rows]) { min-height: 10rem; } img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; } audio { width: 100%; } button, [type=button], [type=reset], [type=submit], [type=image], [type=checkbox], [type=radio], summary { cursor: pointer; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } pre { white-space: pre-wrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (prefers-reduced-motion: no-preference) { :has(:target) { scroll-behavior: smooth; scroll-padding-top: 1.25rem; } } /* ========================================================= FONTS ========================================================= */ /* MARK: Libre Baskerville (headings only) ----------------------------------------------- */ @font-face { font-style: normal; font-weight: normal; src: url("/assets/fonts/librebaskerville-regular-webfont.woff2") format("woff2"), url("/assets/fonts/librebaskerville-regular-webfont.woff") format("woff"); font-family: "libre_baskerville"; } @font-face { font-style: normal; font-weight: bold; src: url("/assets/fonts/librebaskerville-bold-webfont.woff2") format("woff2"), url("/assets/fonts/librebaskerville-bold-webfont.woff") format("woff"); font-family: "libre_baskerville"; } @font-face { font-style: italic; font-weight: normal; src: url("/assets/fonts/librebaskerville-italic-webfont.woff2") format("woff2"), url("/assets/fonts/librebaskerville-italic-webfont.woff") format("woff"); font-family: "libre_baskerville"; } /* MARK: Calluna Sans ----------------------------------------------- */ @font-face { font-style: normal; font-weight: normal; src: url("/assets/fonts/CallunaSansRegular-webfont.eot"); src: url("/assets/fonts/CallunaSansRegular-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/CallunaSansRegular-webfont.woff2") format("woff2"), url("/assets/fonts/CallunaSansRegular-webfont.woff") format("woff"), url("/assets/fonts/CallunaSansRegular-webfont.ttf") format("truetype"), url("/assets/fonts/CallunaSansRegular-webfont.svg#calluna_sans") format("svg"); font-family: "calluna_sans"; } @font-face { font-style: normal; font-weight: lighter; src: url("/assets/fonts/CallunaSansLight-webfont.eot"); src: url("/assets/fonts/CallunaSansLight-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/CallunaSansLight-webfont.woff2") format("woff2"), url("/assets/fonts/CallunaSansLight-webfont.woff") format("woff"), url("/assets/fonts/CallunaSansLight-webfont.ttf") format("truetype"), url("/assets/fonts/CallunaSansLight-webfont.svg#calluna_sans") format("svg"); font-family: "calluna_sans"; } @font-face { font-style: normal; font-weight: bold; src: url("/assets/fonts/CallunaSansBold-webfont.eot"); src: url("/assets/fonts/CallunaSansBold-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/CallunaSansBold-webfont.woff2") format("woff2"), url("/assets/fonts/CallunaSansBold-webfont.woff") format("woff"), url("/assets/fonts/CallunaSansBold-webfont.ttf") format("truetype"), url("/assets/fonts/CallunaSansBold-webfont.svg#calluna_sans") format("svg"); font-family: "calluna_sans"; } @font-face { font-style: italic; font-weight: normal; src: url("/assets/fonts/CallunaSansLightItalic-webfont.woff2"); src: url("/assets/fonts/CallunaSansLightItalic-webfont.woff2") format("woff2"), url("/assets/fonts/CallunaSansLightItalic-webfont.woff") format("woff"), url("/assets/fonts/CallunaSansLightItalic-webfont.ttf") format("truetype"), url("/assets/fonts/CallunaSansLightItalic-webfont.svg#calluna_sans") format("svg"); font-family: "calluna_sans"; } @font-face { font-style: normal; font-weight: bold; src: url("/assets/fonts/librebaskerville-bold-webfont.woff2") format("woff2"), url("/assets/fonts/librebaskerville-bold-webfont.woff") format("woff"); font-family: "libre_baskerville"; } /* MARK: Source Sans 3 (body; non-headings) ----------------------------------------------- */ /* source-sans-3-200 - latin */ @font-face { font-style: normal; font-weight: 200; src: url("/assets/fonts/source-sans-3-v19-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: "Source Sans 3"; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* source-sans-3-200italic - latin */ @font-face { font-style: italic; font-weight: 200; src: url("/assets/fonts/source-sans-3-v19-latin-200italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: "Source Sans 3"; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* source-sans-3-300 - latin */ @font-face { font-style: normal; font-weight: 300; src: url("/assets/fonts/source-sans-3-v19-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: "Source Sans 3"; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* source-sans-3-300italic - latin */ @font-face { font-style: italic; font-weight: 300; src: url("/assets/fonts/source-sans-3-v19-latin-300italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: "Source Sans 3"; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* source-sans-3-regular - latin */ @font-face { font-style: normal; font-weight: 400; src: url("/assets/fonts/source-sans-3-v19-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: "Source Sans 3"; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* source-sans-3-italic - latin */ @font-face { font-style: italic; font-weight: 400; src: url("/assets/fonts/source-sans-3-v19-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: "Source Sans 3"; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* source-sans-3-500 - latin */ @font-face { font-style: normal; font-weight: 500; src: url("/assets/fonts/source-sans-3-v19-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: "Source Sans 3"; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* source-sans-3-500italic - latin */ @font-face { font-style: italic; font-weight: 500; src: url("/assets/fonts/source-sans-3-v19-latin-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: "Source Sans 3"; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* source-sans-3-600 - latin */ @font-face { font-style: normal; font-weight: 600; src: url("/assets/fonts/source-sans-3-v19-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: "Source Sans 3"; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* source-sans-3-600italic - latin */ @font-face { font-style: italic; font-weight: 600; src: url("/assets/fonts/source-sans-3-v19-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: "Source Sans 3"; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* source-sans-3-700 - latin */ @font-face { font-style: normal; font-weight: 700; src: url("/assets/fonts/source-sans-3-v19-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: "Source Sans 3"; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* source-sans-3-700italic - latin */ @font-face { font-style: italic; font-weight: 700; src: url("/assets/fonts/source-sans-3-v19-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ font-family: "Source Sans 3"; font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ } /* ========================================================= CUSTOM PROPERTIES / VARIABLES ========================================================= */ :root { /* MARK: Fonts ----------------------------------------------- */ --font-callunasans: calluna_sans, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-librebaskerville: libre_baskerville, garamond, times, serif; --font-serif: var(--font-librebaskerville); --font-sans-serif: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif; /* MARK: Colors ----------------------------------------------- */ --dark-gray: rgba(94, 94, 95, 1); --dark-gray-darker: #4d4d4d; --dark-gray-light: rgba(238, 238, 239, 1); --light-gray: #f5f5f5; --gold: rgba(172, 146, 87, 1); --gold-light: rgba(247, 244, 238, 1); --gold-light-opaque: #eee9dc; --lake: rgba(80, 201, 181, 1); --lake-light: rgba(237, 249, 247, 1); --lake-mild: #8ee0d3; --lake-light-legacy: rgba(80, 201, 181, 0.16); --lake-light-opaque: #d9f7f2; --river: rgba(11, 63, 74, 1); --river-light: rgba(229, 238, 240, 1); --salmon: rgba(224, 104, 74, 1); --salmon-light: rgba(251, 239, 236, 1); --salmon-light-opaque: #f8af9c; --twilight: rgba(2, 94, 110, 1); --twilight-light: rgba(229, 238, 240, 1); --twilight-light-opaque: #629aa1; --twilight-dark: #0d414b; --form-error-color: #e80000; /* MARK: Widths ----------------------------------------------- */ --max-width: 1435px; --max-body-width: 1200px; --max-body-width-narrow: 1000px; /* MARK: Border radius ----------------------------------------------- */ --box-radius: 7px; --border-radius: 0.25rem; --border-radius-lg: 0.3rem; --border-radius-xl: 0.5rem; /* MARK: z-index ----------------------------------------------- */ --zindex-sticky-header: 99999; --z-below: -1; --z-base: 0; --z-above: 1; --z-navigation: calc(var(--z-above) + 100); --z-nav-logo: calc(var(--z-navigation) + 10); --z-cookie-notice: calc(var(--z-navigation) + 11); --z-modal: calc(var(--z-navigation) + 12); /* MARK: Transitions ----------------------------------------------- */ --transition-timing: 0.5s ease-in-out; --transition-timing-fast: 0.3s ease-in-out; } /* ========================================================= DEFAULT/CLASSLESS HTML STYLES ========================================================= */ /* MARK: Body ----------------------------------------------- */ body { position: relative; background-repeat: no-repeat; background-attachment: fixed !important; background-color: #fff; padding-bottom: 0; min-height: 800px; color: var(--dark-gray); font-weight: 100; font-size: 21px; font-family: var(--font-callunasans); letter-spacing: -0.15px; } /* MARK: Main content container ----------------------------------------------- */ main[role=document] { padding-inline: 0; min-height: 800px; } /* MARK: Headings ----------------------------------------------- */ h2 { font-weight: 700; font-size: 2rem; } h2.medium { font-weight: 500; } h3 { font-weight: 700; font-size: 1.75rem; } h3.twilight-regular { font-weight: 500; font-size: 1.5rem; } h4 { font-size: 1.5rem; } h4.dark-gray-bold { color: var(--black); font-weight: 700 !important; font-size: 1.3125rem; line-height: 1.5; } h4.dark-gray-regular { color: var(--black); font-weight: 400; font-size: 1.3125rem; } /* MARK: Links ----------------------------------------------- */ a.anchor, h2 a.anchor, h3 a.anchor, h4 a.anchor { display: none; } /* MARK: Images ----------------------------------------------- */ picture > img { width: 100%; } /* MARK: Misc Mostly previous dev styles ----------------------------------------------- */ .banner .container { max-width: none; } .link::after { display: inline; margin-inline: 4px -12px; content: "›"; color: var(--salmon); line-height: 14px; } a { transition: all var(--transition-timing); border-bottom: 1px solid transparent; color: var(--salmon); text-decoration: none; } a:hover { color: var(--salmon); text-decoration: none; } .prose a:not(.button):hover { border-bottom: 1px solid var(--salmon); } a.pdf::after, a[href$=".pdf"]:not(.no-label)::after { display: inline-block; position: relative; bottom: -4px; margin-left: 5px; background-image: url("/assets/images/icon_pdf_inline.svg"); background-position: initial; background-size: auto 0.7em; background-repeat: no-repeat; width: 1.4em; height: 0.9em; content: ""; /* was previously \203a */ line-height: 12px; text-indent: 33px; } a[href^="tel:"] { color: inherit; text-decoration: none; white-space: nowrap; } .link a { font-weight: bold; } a.hoverline:hover { text-decoration: underline; } b, strong { font-weight: bold; } h1, h2, h3, h4 { color: var(--twilight); } .header-block h2 { margin: 0 auto; } body:not(.home) .content h4 { margin: 1em 0 0.5em; } h1.block { display: block; margin: 0 auto; border-radius: 6px 6px 0 0; padding: 12px 12px; color: #fff; text-align: center; } section { padding-top: 40px; padding-bottom: 40px; min-height: 200px; } section.wide-background { padding-top: 60px; padding-bottom: 60px; } .content img { border-radius: var(--box-radius); max-width: 100%; } .content .wp-block-image img { border-radius: var(--box-radius); } .content strong em, .content em strong { letter-spacing: -0.75px; } .wp-block-table { margin-bottom: 2em; } .wp-block-table td { border: 4px solid white; border-radius: 10px; background-color: rgba(0, 0, 0, 0.05); padding: 5px; } .wp-block-table .wide { width: 100%; } ul.list_blog-filters { margin-top: 25px; text-align: center; } ul.list_blog-filters li { display: inline-block; transition: background-color 0.5s; margin-right: 5px; margin-bottom: 12px; border: 2px solid var(--twilight); border-radius: var(--box-radius); background-color: var(--lake-light-opaque); list-style: none; } ul.list_blog-filters li a { display: block; transition: color 0.5s; padding: 8px 12px 8px 12px; color: var(--twilight); font-weight: bold; font-size: 15px; line-height: 15px; text-decoration: none; text-transform: uppercase; } ul.list_blog-filters li:hover, ul.list_blog-filters li.active { background-color: var(--twilight); } ul.list_blog-filters li:hover a, ul.list_blog-filters li.active a { color: #fff; } .content form ul li::before { content: none !important; } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) iframe, body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) figure { border: none; border-radius: var(--box-radius); } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) iframe { padding-bottom: 30px; } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) figure > iframe { max-width: 500px; } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) figure.aligncenter > iframe { max-width: 800px; } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) ol li { counter-increment: basic-list; margin-left: 0.2em; padding-left: 1em; text-indent: -1.35em; } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) ol li::before { margin-right: 10px; content: counter(basic-list) " ­"; color: var(--lake); font-weight: bolder; } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) ol:not(.start, .continue), body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) ul:not(.no-bullets) { counter-reset: basic-list; line-height: 33px; list-style: none; } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) ol:not(.start, .continue) li, body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) ul:not(.no-bullets) li { margin-bottom: 15px; } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) ul:not(.no-bullets) li { margin-left: 0.2em; padding-left: 0; list-style-type: none; text-indent: -0.7em; } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) ul:not(.no-bullets) li::before { content: "› "; color: var(--lake); font-weight: bolder; font-size: 27px; line-height: 1px; } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) ul:not(.no-bullets) li ul li { text-indent: -0.9em; } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) ul:not(.no-bullets) li ul li::before { content: "– "; } .content-width .wp-block-columns { margin-right: auto; margin-left: auto; max-width: var(--max-body-width); } section.left-border div.row:nth-of-type(3) { margin-left: 2%; } section.right-border { clear: both; margin-bottom: 40px; border-right: 10px solid var(--lake); border-radius: var(--box-radius); padding-right: 15px; } section.right-border blockquote { margin: 1em -20px 1.5em 0; border-radius: var(--box-radius) 0 0 var(--box-radius); } section.right-border img.illustration { display: block; margin: 1em auto 2em; max-width: 80%; } section.right-border div.row:nth-of-type(3) { margin-right: 2%; } section.no-padding { padding-top: 0; padding-bottom: 0; } .row { margin-right: auto; margin-left: auto; max-width: var(--max-width); } ol.no-indent, ul.no-indent { padding-left: 15px; } .inner-content { margin-right: auto; margin-left: auto; max-width: 500px; } .inner-content h3 { margin-top: -11px; font-size: 43px; letter-spacing: -1.75px; } .vertical-padding { padding-top: 20px; padding-bottom: 20px; } .uppercase { text-transform: uppercase; } .small-font { font-size: 14px; } .clear { clear: both; } .nowrap { white-space: nowrap; } .icon { display: inline-block; vertical-align: middle; margin-right: 15px; background-size: cover; background-repeat: no-repeat; width: 50px; height: 50px; } .sector-icon-ACE { background-image: url("/assets/images/sector-icon-ACE.svg"); } .sector-icon-CEC { background-image: url("/assets/images/sector-icon-CEC.svg"); } .sector-icon-HES { background-image: url("/assets/images/sector-icon-HES.svg"); } .sector-icon-SRE { background-image: url("/assets/images/sector-icon-SRE.svg"); } .sector-icon-NLD { background-image: url("/assets/images/sector-icon-NLD.svg"); } nav.posts-navigation .nav-links { text-align: center; text-transform: uppercase; } nav.posts-navigation .nav-links .nav-previous, nav.posts-navigation .nav-links .nav-next { display: inline-block; margin-bottom: 12px; margin-left: 22px; border: 2px solid var(--twilight); border-radius: var(--box-radius); background-color: var(--lake-light-opaque); padding: 0 12px 4px; list-style: none; } nav.posts-navigation .nav-links .nav-previous a, nav.posts-navigation .nav-links .nav-next a { color: var(--twilight); font-weight: bold; font-size: 16px; line-height: 16px; text-decoration: none; } nav.posts-navigation .nav-links .nav-previous:hover, nav.posts-navigation .nav-links .nav-next:hover { background-color: var(--twilight); } nav.posts-navigation .nav-links .nav-previous:hover a, nav.posts-navigation .nav-links .nav-next:hover a { color: white; } .cta-footer h1 { letter-spacing: -1.25px; } .grant-process section h1 { font-weight: bold; } .grant-process section h3 { font-weight: normal; font-size: 26px; line-height: 31px; letter-spacing: -0.5px; } .grant-process section .round-bottom-borders { padding: 1.5em 0; } /* RESPONSIVE ADJUSTMENTS */ @media only screen and (min-width: 993px) { section.left-border img.illustration { position: absolute; top: 50%; margin-top: -25%; } .slideshow_blog .slideHolder { max-width: 74.3vw; } .blog-lead-in { padding: 0 1em; } } /* REMOVE IMPORTANT ATT'S BELOW AFTER 'STRATEGIC' COMPILING IS COMPLETE */ @media only screen and (max-width: 993px) and (min-width: 480px) { .blog-lead-in { margin-bottom: 2em !important; border-radius: 0 var(--box-radius) var(--box-radius) 0 !important; min-height: auto !important; } .blog-lead-in img { display: inline-block; max-width: 50%; } .blog-lead-in p { display: inline-block; vertical-align: middle; max-width: 49%; } } /* end 993px 480px */ @media only screen and (max-width: 768px) { .blog-lead-in { padding: 0 1em; font-size: 16px; } body { min-height: 0; } body .slideshow .blog-lead-in img, body .slideshow .blog-lead-in p { max-width: 100%; font-family: var(--font-callunasans); } body ul.list_blog-filters { padding-left: 0; } } @media only screen and (max-width: 480px) { section.left-border { margin-left: -15px; border-radius: 0; } section.left-border div.row { padding-left: 3%; } section.right-border { margin-right: -15px; border-radius: 0; } section.right-border div.row { padding-right: 3%; } ol.w-75, ul.w-75 { padding-left: 25px; width: 100% !important; } body:not(.home):not(.search-results):not(.search) .content div:not(.serenity-side-menu):not(.wp-block-serenity-sector-areas-list):not(.breadcrumbs) ol li { padding-left: 0; } } /* MARK:
----------------------------------------------- */ hr { margin-block: 3rem !important; } /* MARK: Utilities ---------------- */ /* ========================================================= COLORS Pulled in from original WordPress site and converted to use custom properties. - Foreground - Background ========================================================= */ /* Foreground ---------------- */ .dark-gray { color: var(--dark-gray); } .lake { color: var(--lake); } .dark-grey-background .lake { color: var(--lake-light-opaque); } .twilight { color: var(--twilight); } .salmon { color: var(--salmon); } .gold { color: var(--gold); } .white { color: #fff; } /* Background ---------------- */ .twilight-background { background-color: var(--twilight); } .twilight-background.white { color: #fff; } .twilight-background.white h1, .twilight-background.white h2, .twilight-background.white h3, .twilight-background.white h4 { color: #fff; } .lake-background { background-color: var(--lake); } .lake-light-background { background-color: var(--lake-light-legacy); } .gold-background { background-color: var(--gold); } .salmon-background { background-color: var(--salmon); } .dark-grey-background { background-color: var(--dark-grey); } .light-green-background { background-color: var(--lake-light-legacy); } .light-blue-background { background-color: var(--twilight-light); } .light-gold-background { background-color: var(--gold-light-opaque); } .light-grey-background { background-color: var(--light-grey); } .white-background { background-color: #fff; } /* ========================================================= CONTAINER UTILITY ========================================================= */ .container { --container-margin-inline: 1.5rem; --container-padding-inline: unset; --container-max-width: var(--max-body-width); margin-inline: var(--container-margin-inline); padding-inline: var(--container-padding-inline); max-width: var(--container-max-width); } @media (width >= 1250px) { .container { margin-inline: auto; } } .container[data-container=annual-report] { --container-margin-inline: 1.25rem; } .container[data-container=narrow] { --container-max-width: var(--max-body-width-narrow); --container-padding-inline: 1.25rem; --container-margin-inline: auto; } .content .container, footer .container { width: 100vw; } footer .container { margin-inline: auto; padding-inline: 25px; } .container.is-intro { margin-block-start: 80px; } @media (width >= 992px) { .container.is-intro { margin-block-start: 120px; } } @media (width >= 576px) { .t-standardPage article.container { max-width: var(--max-body-width-narrow); } } @media (width >= 1080px) { .t-standardPage article.container { padding-inline: 0; } } @media (width >= 576px) { .t-standardPage article.container.is-wide { max-width: var(--max-body-width); } } @media (width >= 576px) { .t-sectorPage article.container.is-wide { max-width: var(--max-body-width); } } /* ========================================================= HELPER UTILITY CLASSES - Video embed - Screen reader only (visually hidden) - Hide element - Font family & text alignment - Full width - Clear floats ========================================================= */ /* Video embed ---------------- */ /* Screen reader only (visually hidden) ---------------- */ .sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .sr-only:focus-visible { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } /* Hide element ---------------- */ .hidden { display: none; } /* Font family & text alignment ---------------- */ .font-serif { font-family: var(--font-librebaskerville); } .text-center { text-align: center; } /* Full width ---------------- */ .full-width { left: 50%; margin-left: -50vw; margin-right: -50vw; max-width: 100vw; position: relative; right: 50%; width: 100vw; } /* Clear floats ---------------- */ .clearfix { clear: both; } /* ========================================================= FLOW UTILITY The flow utility provides flow and rhythm between direct sibling elements. Reference: - https://piccalil.li/quick-tip/flow-utility/ - https://andy-bell.co.uk/my-favourite-3-lines-of-css/ ========================================================= */ .flow > * + * { margin-block-start: var(--flow-space, 1rem); } /* ========================================================= PROSE UTILITY CLASS Use on a div that wraps around CKEditor output. Example:
{{ entry.myCKEditorField }}
========================================================= */ .prose > * + *, .prose ul > * + *, .prose ol > * + * { margin-block-start: var(--prose-flow-space, 1rem); } /* ========================================================= TYPOGRAPHY 1.0 Custom lists 2.0 Hierarchical/Legal ol ========================================================= */ /* 1.0 Custom lists ---------------- */ :is(ol, ul).custom-list { --custom-list-padding-left: 1.5rem; list-style: none; margin-inline: 0; padding-inline-start: var(--custom-list-padding-left); text-indent: -2ch; } :is(ol, ul).custom-list li { counter-increment: basic-list; } :is(ol, ul).custom-list li::before { color: var(--lake); content: counter(basic-list) " ­"; font-weight: bolder; margin-inline-end: 0.75ch; } ul.custom-list > li::before { content: "›"; font-size: 1.6875rem; line-height: 1; } /* 2.0 Hierarchical/Legal ol ---------------- */ ol.hierarchical { --list-text-indent: 0; --list-padding-left: 0; counter-reset: clause; list-style: none outside none; text-indent: var(--list-text-indent); padding-inline-start: var(--list-padding-left); margin-inline: 0; } @media (width >= 768px) { ol.hierarchical { --list-text-indent: -2.75ch; --list-padding-left: 2rem; } } ol.hierarchical > li { counter-increment: clause; } ol.hierarchical > li::before { color: var(--lake); content: counters(clause, ".") ". "; margin-inline-end: 0.5ch; } ol.hierarchical > li > ol { padding-inline-start: calc(var(--list-padding-left) + 1ch); margin-block-start: 0.25rem; } @media (width >= 768px) { ol.hierarchical > li > ol { --list-text-indent: -4ch; } } ol.hierarchical > li > ol > li > ol { padding-inline-start: calc(var(--list-padding-left) + 2ch); } @media (width >= 768px) { ol.hierarchical > li > ol > li > ol { --list-text-indent: -5ch; } } ol.hierarchical > li > ol > li > ol > li > ol { padding-inline-start: calc(var(--list-padding-left) + 3.25ch); } @media (width >= 768px) { ol.hierarchical > li > ol > li > ol > li > ol { --list-text-indent: -6ch; } } ol.hierarchical > li > ul.custom-list { --custom-list-padding-left: 2.875rem; } ol.hierarchical > li > ol > li > ul.custom-list { --custom-list-padding-left: 4rem; } ol.hierarchical > li > ol > li > ol > li > ul.custom-list { --custom-list-padding-left: 4.5rem; } /* ========================================================= VIDEO EMBED ========================================================= */ figure.video-embed { margin-block-start: var(--flow-space, 30px); margin-inline: auto; width: 100%; max-width: var(--max-body-width-narrow); } figure.video-embed > iframe { aspect-ratio: 16/9; height: 100%; width: 100%; } .container.is-wide figure.video-embed { max-width: calc(var(--max-body-width) - 50px); } /* MARK: Components ---------------- */ /* ========================================================= BUTTONS Buttons here have been refactored 1. Base styles 2. Button styles 3. Sizing 4. Button group 5. Grants Portal button 6. Section link button 7. Forms button 8. Grants Awarded table buttons 99. Left overs from previous dev ========================================================= */ /* MARK: 1. Base styles ---------------- */ button a, button, input.button, a.button { --button-label-color: var(--salmon); --button-bg-color: transparent; --button-padding: 0; --button-border: 0; --button-border-radius: 0; border: var(--button-border); border-radius: var(--button-border-radius); background-color: var(--button-bg-color); padding: var(--button-padding); color: var(--button-label-color); font-weight: 700; font-size: 1.3125rem; line-height: 1; font-family: var(--font-callunasans); } button a:hover, button:hover, input.button:hover, a.button:hover { --button-label-color: var(--salmon); --button-bg-color: transparent; } button a[data-button-color=darkGray], button[data-button-color=darkGray], input.button[data-button-color=darkGray], a.button[data-button-color=darkGray] { --button-label-color: white; --button-bg-color: var(--dark-gray); --button-padding: 1.25rem; } button a[data-button-color=darkGray]:hover, button[data-button-color=darkGray]:hover, input.button[data-button-color=darkGray]:hover, a.button[data-button-color=darkGray]:hover { --button-label-color: white; --button-bg-color: var(--dark-gray-darker); border: 0; } /* MARK: 2. Button styles ---------------- */ .button[data-button-style="river solid"] { --button-label-color: white; --button-bg-color: var(--river); --button-padding: 0.625rem 0.875rem; --button-border: 2px solid var(--button-label-color); --button-border-radius: var(--border-radius); } .button[data-button-style="river solid"]:hover { --button-label-color: white; --button-bg-color: var(--river); } .button[data-button-style="river outline"] { --button-label-color: var(--river); --button-bg-color: transparent; --button-padding: 0.625rem 0.875rem; --button-border: 2px solid var(--button-label-color); --button-border-radius: var(--border-radius); } .button[data-button-style="river outline"]:hover { --button-label-color: var(--river); --button-bg-color: transparent; --button-border: 2px solid var(--button-label-color); } .button[data-button-style="lake solid"] { --button-label-color: white; --button-bg-color: var(--lake); --button-padding: 0.625rem 0.875rem; --button-border: 2px solid var(--button-label-color); --button-border-radius: var(--border-radius); } .button[data-button-style="lake solid"]:hover { --button-label-color: white; --button-bg-color: var(--lake); } .button[data-button-style=flag] { --button-label-color: white; --button-bg-color: var(--salmon); display: grid; position: relative; justify-content: center; align-items: center; border-top-left-radius: var(--box-radius); border-bottom-left-radius: var(--box-radius); background: linear-gradient(90deg, var(--button-bg-color) 0%, var(--button-bg-color) calc(100% - 30px), rgba(255, 255, 255, 0) calc(100% - 30px), rgba(255, 255, 255, 0) 100%); padding-inline: 1.875rem 2.1875rem; padding-block: 1rem; overflow: hidden; font-weight: 400; font-weight: 400; font-size: 1.875rem; line-height: 1; letter-spacing: -3%; } .button[data-button-style=flag] span { display: block; position: relative; z-index: var(--z-above); color: var(--button-label-color); } .button[data-button-style=flag] svg { position: absolute; top: 50%; right: 0; transform: translateY(-50%); fill: var(--button-bg-color); } .button[data-button-style=flag]:hover { --button-label-color: white; --button-bg-color: #e6836b; } /* MARK: 3. Sizing ---------------- */ button[data-button-size=small], .button[data-button-size=small] { font-size: 1.125rem; } /* MARK: 4. Button group ---------------- */ .button-group { display: flex; flex-wrap: wrap; gap: 0.5rem; } .button-group.left { justify-content: flex-start; } .button-group.right { justify-content: flex-end; } .button-group.center { justify-content: center; } /* MARK: 5. Grants Portal button ---------------- */ .button-grants-portal { transition: background-color 0.25s ease-in-out; background-color: #37baa5; padding: 0 7px 1px 10px; color: white; font-weight: 100; font-size: 13px; line-height: 20px; letter-spacing: 0.15px; text-transform: uppercase; } .button-grants-portal:hover { background-color: var(--twilight-dark); color: white; } /* MARK: 6. Section link button ---------------- */ .button-section-link { display: inline-flex; position: relative; -moz-column-gap: 0.75rem; column-gap: 0.75rem; border-radius: var(--box-radius); background-color: var(--salmon-light); padding: 6px 16px; color: var(--salmon); font-weight: 700; } /* MARK: 7. Forms button ---------------- */ .button.fui-submit, .fui-btn.fui-submit { transition: all 0.5s ease-in-out; border: 0; border-radius: 0; background-color: #333; padding: 12px; color: #f7f7f7; font-size: 1rem; } .button.fui-submit:hover, .fui-btn.fui-submit:hover { cursor: pointer; background-color: #c4c4c4; color: #787878; } /* MARK: 8. Grants Awarded table buttons ---------------- */ button.expand-button { display: flex; -moz-column-gap: 4px; column-gap: 4px; border: 2px solid var(--salmon); border-radius: 4px; background-color: white; padding: 4px 10px; color: var(--salmon); font-size: 0.8125rem; text-transform: uppercase; } @media (width < 992px) { button.expand-button { display: none; } } button.reset-button { position: relative; transition: all 0.3s ease-in-out; border: 2px solid var(--salmon); border-width: 2px 0 2px 2px; border-radius: 4px 0 0 4px; background-color: white; padding: 2px 4px 2px 6px; width: -moz-fit-content; width: fit-content; color: var(--salmon); font-weight: 700; font-size: 0.8125rem; letter-spacing: 1px; text-transform: uppercase; } @media (width < 992px) { button.reset-button { display: none; } } button.reset-button span { position: relative; z-index: var(--z-above); } button.reset-button::after { position: absolute; top: 50%; right: -7.5px; transform: translateY(-50%) rotate(45deg); transition: all 0.3s ease-in-out; border: 2px solid var(--salmon); border-width: 2px 2px 0 0; background-color: white; padding: 4px; aspect-ratio: 1; width: 15px; content: ""; } button.reset-button:hover { background-color: var(--salmon); color: white; } button.reset-button:hover::after { background-color: var(--salmon); } button.load-more-grants { display: block; margin-inline: auto; margin-block-end: 4rem; border-radius: var(--box-radius); background-color: var(--salmon); padding: 8px 20px; color: white; text-transform: uppercase; } /* MARK: 99. Left overs from previous dev ---------------- */ .button-panel { max-width: var(--max-width); } button.small, a.button.small { display: inline-block; position: relative; z-index: 1; border-radius: 8px 0 0 8px; background-color: transparent; padding: 0.4em 1.25em 0.4em 0.75em; width: auto; overflow: hidden; color: white; font-weight: bold; font-size: 18px; line-height: 18px; letter-spacing: 0.25px; text-transform: uppercase; white-space: nowrap; } button.small::after, a.button.small::after { display: block; position: absolute; top: 0; right: 0; z-index: -1; background-position: right; background-size: auto 100%; background-repeat: no-repeat; width: 160%; height: 100%; content: ""; } button.medium, a.button.medium { display: inline-block; position: relative; float: none; clear: both; z-index: 1; margin-bottom: 1em; border-radius: 8px 0 0 8px; background-color: transparent; padding: 20px 1.25em 0 0.75em; width: auto; height: 77px; overflow: hidden; color: white; font-weight: bold; font-size: 30px; line-height: 1.2em; letter-spacing: -1px; } button.medium::after, a.button.medium::after { display: block; position: absolute; top: 0; right: 0; clear: both; z-index: -1; background-position: right; background-size: auto 100%; background-repeat: no-repeat; width: 160%; height: 77px; content: ""; } button.wide, button.cta, a.button.wide, a.button.cta { display: block; position: relative; z-index: 1; margin: 1em auto 1em; background-color: transparent; width: 90%; max-width: 1071px; height: 87px; color: white; font-weight: normal; font-size: 50px; letter-spacing: -2px; } button.wide::before, button.cta::before, a.button.wide::before, a.button.cta::before { display: block; position: absolute; top: 0; left: -33px; z-index: -1; background-size: auto 100%; background-repeat: no-repeat; width: 100%; height: 87px; content: ""; } button.wide::after, button.cta::after, a.button.wide::after, a.button.cta::after { display: block; position: absolute; top: 0; right: 0; z-index: -1; background-position: right; background-size: auto 100%; background-repeat: no-repeat; width: 100%; height: 87px; content: ""; } /* NEW BUTTON STUFF (still need: rounded left edge; 'medium' buttons */ button.dark-grey::before, a.button.dark-grey::before { background-image: url("/assets/images/arrow-bg_left_dark-grey.svg"); } button.dark-grey::after, a.button.dark-grey::after { background-image: url("/assets/images/arrow-bg_right_dark-grey.svg"); } button.light-grey > a, a.button.light-grey { color: var(--dark-gray); } button.light-grey::before, a.button.light-grey::before { background-image: url("/assets/images/arrow-bg_left_light-grey.svg"); } button.light-grey::after, a.button.light-grey::after { background-image: url("/assets/images/arrow-bg_right_light-grey.svg"); } button.salmon::before, button.cta::before, a.button.salmon::before, a.button.cta::before { background-image: url("/assets/images/arrow-bg_left_salmon.svg"); } button.salmon::after, button.cta::after, a.button.salmon::after, a.button.cta::after { background-image: url("/assets/images/arrow-bg_right_salmon.svg"); } button.salmon.light > a, a.button.salmon.light { color: var(--salmon); } button.salmon.light::before, a.button.salmon.light::before { background-image: url("/assets/images/arrow-bg_left_salmon_light.svg"); } button.salmon.light::after, a.button.salmon.light::after { background-image: url("/assets/images/arrow-bg_right_salmon_light.svg"); } button.twilight::before, a.button.twilight::before { background-image: url("/assets/images/arrow-bg_left_twilight.svg"); } button.twilight::after, a.button.twilight::after { background-image: url("/assets/images/arrow-bg_right_twilight.svg"); } button.twilight.light > a, a.button.twilight.light { color: var(--twilight); } button.twilight.light::before, a.button.twilight.light::before { background-image: url("/assets/images/arrow-bg_left_twilight_light.svg"); } button.twilight.light::after, a.button.twilight.light::after { background-image: url("/assets/images/arrow-bg_right_twilight_light.svg"); } button.gold::before, a.button.gold::before { background-image: url("/assets/images/arrow-bg_left_gold.svg"); } button.gold::after, a.button.gold::after { background-image: url("/assets/images/arrow-bg_right_gold.svg"); } button.gold.light > a, a.button.gold.light { color: var(--gold); } button.gold.light::before, a.button.gold.light::before { background-image: url("/assets/images/arrow-bg_left_gold_light.svg"); } button.gold.light::after, a.button.gold.light::after { background-image: url("/assets/images/arrow-bg_right_gold_light.svg"); } button.lake::before, a.button.lake::before { background-image: url("/assets/images/arrow-bg_left_lake.svg"); } button.lake::after, a.button.lake::after { background-image: url("/assets/images/arrow-bg_right_lake.svg"); } button.lake.light > a, a.button.lake.light { color: var(--lake); } button.lake.light::before, a.button.lake.light::before { background-image: url("/assets/images/arrow-bg_left_lake_light.svg"); } button.lake.light::after, a.button.lake.light::after { background-image: url("/assets/images/arrow-bg_right_lake_light.svg"); } button.lake-mild::before, a.button.lake-mild::before { background-image: url("/assets/images/arrow-bg_left_lake-mild.svg"); } button.lake-mild::after, a.button.lake-mild::after { background-image: url("/assets/images/arrow-bg_right_lake-mild.svg"); } button.white::before, a.button.white::before { background-image: url("/assets/images/arrow-bg_left_white.svg"); } button.white::after, a.button.white::after { background-image: url("/assets/images/arrow-bg_right_white.svg"); } button.white.lake > a, a.button.white.lake { color: var(--lake); } button.white.dark-grey > a, a.button.white.dark-grey { color: var(--dark-gray); } button.white.salmon > a, a.button.white.salmon { color: var(--salmon); } button.white.twilight > a, a.button.white.twilight { color: var(--twilight); } button.white.gold > a, a.button.white.gold { color: var(--gold); } button.light-grey > a:hover, a.button.light-grey:hover { color: var(--dark-gray); } button.salmon.light > a:hover, a.button.salmon.light:hover { color: var(--salmon); } button.twilight.light > a:hover, a.button.twilight.light:hover { color: var(--twilight); } button.gold.light > a:hover, a.button.gold.light:hover { color: var(--gold); } button.lake.light > a:hover, a.button.lake.light:hover { color: var(--lake); } /* RESPONSIVE ADJUSTMENTS */ @media only screen and (max-width: 1280px) { html { margin: auto; /* dummy class, only present to make yarn happy */ } } @media only screen and (max-width: 768px) { button.medium, a.button.medium { font-size: 25px; letter-spacing: -0.5px; } } @media only screen and (max-width: 480px) { button.medium, a.button.medium { font-size: 20px; letter-spacing: 0; } button.small, a.button.small { font-size: 14px; letter-spacing: -0.25px; } } /* ========================================================= ANNUAL REPORTS NAVIGATION 1. Nav container 2. Logo 3. Mobile menu button 4. Mobile menu overlay 5. Desktop links ========================================================= */ /* MARK: 1. Nav container ---------------- */ nav.ar-nav { --nav-bg-color: var(--river); display: flex; position: fixed; top: 0; left: 50%; -moz-column-gap: 5.75rem; column-gap: 5.75rem; justify-content: space-between; align-items: center; transform: translateX(-50%); z-index: var(--z-navigation); border-radius: 0 0 8px 8px; background-color: var(--nav-bg-color); padding-inline: 1rem; padding-block: 0.875rem; width: 100vw; max-width: 100vw; height: 66px; } @media (width >= 768px) { nav.ar-nav { max-width: calc(100vw - 2.5rem); } } @media (width >= 1080px) { nav.ar-nav { max-width: 1015px; } } /* MARK: 2. Logo ---------------- */ nav .logo { display: flex; align-items: center; margin-block-start: 14px; } @media (width >= 768px) { nav .logo { margin-block-start: 0; } } nav .logo .logomark { display: grid; justify-content: center; align-items: center; border-radius: 50%; background-color: var(--nav-bg-color); aspect-ratio: 1; width: 74px; } @media (width >= 768px) { nav .logo .logomark { width: 29px; } } nav .logo .logomark img { width: 52px; } nav .logo .logotype { width: 132px; } @media (width >= 768px) { nav .logo .logotype { display: none; } } /* MARK: 3. Mobile menu button ---------------- */ nav .mobile-menu-button { all: unset; display: flex; flex-direction: column; gap: 5px; margin-block-start: 0.75rem; width: -moz-fit-content; width: fit-content; } @media (width >= 768px) { nav .mobile-menu-button { display: none; } } nav .mobile-menu-button:hover { cursor: pointer; } nav .mobile-menu-button .bars { display: flex; flex-direction: column; justify-content: space-between; width: 33px; height: 23px; } nav .mobile-menu-button .bars .bar { border-radius: 10px; background-color: white; width: 100%; height: 3px; } nav .mobile-menu-button span { color: white; font-weight: 900; font-size: 0.6875rem; letter-spacing: 4%; text-align: center; text-transform: uppercase; } /* MARK: 4. Mobile menu overlay ---------------- */ nav .mobile-menu-overlay { display: flex; position: fixed; top: 0; left: 0; flex-direction: column; z-index: calc(var(--z-navigation) + 1); background-color: var(--river); padding-inline: 1.125rem; padding-block: 1rem 1.25rem; width: 100vw; height: 100vh; } @media (width >= 768px) { nav .mobile-menu-overlay { display: none; } } nav .mobile-menu-overlay .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; } nav .mobile-menu-overlay .mobile-menu-header .title { display: flex; align-items: center; gap: 0.875rem; color: white; font-weight: 400; font-size: 1.1875rem; font-family: var(--font-serif); } nav .mobile-menu-overlay .mobile-menu-header .title img { width: 38px; } nav .mobile-menu-overlay .mobile-menu-header button { display: grid; gap: 4px; border: 0; background-color: transparent; padding: 0; } nav .mobile-menu-overlay .mobile-menu-header button .x { display: block; position: relative; margin-inline: auto; width: 25px; height: 25px; } nav .mobile-menu-overlay .mobile-menu-header button .x .bar { --bar-width: 33px; --bar-height: 3px; position: absolute; top: 50%; left: 50%; transform-origin: center; margin-inline-start: calc(var(--bar-width) / 2 * -1); margin-block-start: calc(var(--bar-height) / 2 * -1); border-radius: 10px; background-color: white; width: var(--bar-width); height: var(--bar-height); } nav .mobile-menu-overlay .mobile-menu-header button .x .bar:nth-child(1) { transform: rotate(45deg); } nav .mobile-menu-overlay .mobile-menu-header button .x .bar:nth-child(2) { transform: rotate(-45deg); } nav .mobile-menu-overlay .mobile-menu-header button span { color: white; font-weight: 900; font-size: 0.6875rem; line-height: 1; letter-spacing: 4%; text-align: center; text-transform: uppercase; } nav .mobile-menu-overlay .mobile-menu-nav { flex: 1; } nav .mobile-menu-overlay .mobile-menu-nav ul { display: grid; gap: 1.75rem; padding-block-start: 8.125rem; color: white; font-weight: 400; font-size: 1.8125rem; line-height: 1; font-family: var(--font-serif); letter-spacing: 2%; text-align: center; } nav .mobile-menu-overlay .mobile-menu-nav ul li a { color: inherit; } nav .mobile-menu-overlay .mobile-menu-footer { color: var(--lake); font-weight: 700; font-size: 0.9375rem; line-height: 2; letter-spacing: -1%; text-align: center; } nav .mobile-menu-overlay .mobile-menu-footer a { color: inherit; } nav .mobile-menu-overlay .mobile-menu-footer .social { display: flex; -moz-column-gap: 1.875rem; column-gap: 1.875rem; justify-content: center; align-items: center; margin-block-end: 1rem; } nav .mobile-menu-overlay .mobile-menu-footer .social svg { fill: var(--lake); } nav .mobile-menu-overlay .mobile-menu-footer .social svg.facebook { width: 15px; } nav .mobile-menu-overlay .mobile-menu-footer .social svg.x { width: 29px; } nav .mobile-menu-overlay .mobile-menu-footer .social svg.instagram { width: 27px; } nav .mobile-menu-overlay .mobile-menu-footer .social svg.linkedin { width: 27px; } /* MARK: 5. Desktop links ---------------- */ nav .links { display: flex; justify-content: space-between; margin-block: 0; width: 100%; color: white; font-weight: 400; font-size: 1.1875rem; line-height: 1; font-family: var(--font-serif); letter-spacing: -1.5%; } @media (width < 768px) { nav .links { display: none; } } nav .links li { flex-shrink: 0; } nav .links li a { display: block; transition: color var(--transition-timing-fast); color: inherit; } nav .links li a:hover { color: var(--lake); } /* ========================================================= ANNUAL REPORTS HEADER 1. Container 2. Title/sidebar 3. Image 4. Avoid header bg collision 5. Animation keyframes ========================================================= */ /* MARK: 1. Container ---------------- */ header.ar-header { display: grid; position: relative; background-color: var(--dark-gray); height: 100vh; min-height: 500px; overflow-y: hidden; } @media (width >= 768px) { header.ar-header { grid-template-columns: 40% auto; } } @media (width >= 1100px) { header.ar-header { grid-template-columns: 500px auto; } } header.ar-header::before { position: fixed; bottom: 0; left: 0; transform: translate3d(0, calc(var(--scroll-y, 0) * -0.2), 0); will-change: transform; background-image: url("/assets/images/bg-map-annual-report.svg"); background-position: left bottom; background-size: auto; background-repeat: no-repeat; width: 100%; max-width: 530px; height: 100%; content: ""; } @media (width < 768px) { header.ar-header::before { display: none; } } /* MARK: 2. Title/sidebar ---------------- */ header.ar-header .title { padding-block-start: 3rem; font-weight: 400; font-family: var(--font-serif); } @media (width >= 768px) { header.ar-header .title { margin-inline: auto 3.25rem; padding-block-start: 6.3125rem; } } header.ar-header .title svg { max-width: 282px; height: 6.75vw; fill: white; margin-inline-start: auto; } @media (width < 768px) { header.ar-header .title svg { display: none; } } header.ar-header .title h1 { margin-inline: auto; margin-block: 8.125rem 3.875rem; max-width: 250px; color: white; font-weight: inherit; font-size: 3.0625rem; line-height: 1.04; letter-spacing: -1.5%; text-align: center; } @media (width >= 768px) { header.ar-header .title h1 { text-align: right; } } header.ar-header .title h1 span { display: block; margin-block-end: 0.75rem; font-size: 5.25rem; line-height: 0.6; letter-spacing: -5.9%; } header.ar-header .title ul { display: grid; position: relative; gap: 1rem; z-index: var(--z-above); margin-block-start: 5.375rem; max-width: 250px; color: var(--river); font-weight: inherit; text-align: right; } @media (width < 768px) { header.ar-header .title ul { display: none; } } header.ar-header .title ul li a { color: inherit; } /* MARK: 3. Image ---------------- */ header.ar-header .image { position: relative; background-color: white; min-height: 446px; } header.ar-header .image picture { display: block; width: 100%; height: 100%; } header.ar-header .image picture img { opacity: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /* MARK: 4. Avoid header bg collision ---------------- */ #ar-ceo, #ar-review, #ar-grant-highlights, #ar-people, #ar-investments, #ar-benefactor, #ar-mission, footer { position: relative; z-index: var(--z-above); } /* ========================================================= ANNUAL REPORTS CEO LETTER ========================================================= */ #ar-ceo { background-color: rgba(94, 94, 95, 0.1); padding-block: 7.5rem; } @media (width >= 768px) { #ar-ceo { background-image: url("/assets/images/bg-annual-report-ceo-map.svg"); background-position: right bottom; background-repeat: no-repeat; } } #ar-ceo article { --border-style: 8px solid var(--lake); --content-padding-inline: 1.25rem; --content-padding-block: 2.5rem; display: grid; border-top: var(--border-style); border-radius: 8px; overflow: hidden; } @media (width >= 768px) { #ar-ceo article { grid-template-columns: auto 295px; border-top: 0; border-left: var(--border-style); } } #ar-ceo article .prose { background-color: white; padding-inline: var(--content-padding-inline); padding-block: var(--content-padding-block); } @media (width >= 768px) { #ar-ceo article .prose { --content-padding-inline: 2.5rem; --content-padding-block: 3rem 4.375rem; } } @media (width >= 1024px) { #ar-ceo article .prose { --content-padding-inline: 4.8125rem; --content-padding-block: 4rem 5.75rem; } } #ar-ceo article .prose :is(h2, h3) + * { --prose-flow-space: 2rem; } #ar-ceo article .prose h2 { color: var(--lake); font-weight: 400; font-size: 3rem; line-height: 1.25; font-family: var(--font-serif); letter-spacing: -2.2%; } #ar-ceo article .prose h3 { font-weight: 700; font-size: 1.75rem; line-height: 1.25; letter-spacing: -1%; } #ar-ceo article .prose p { --prose-flow-space: 0.875rem; color: #393939; font-size: 1.25rem; line-height: 1.6; } #ar-ceo article .prose svg, #ar-ceo article .prose img { max-width: 300px; } #ar-ceo article figure { background-color: #e3e3e3; } @media (width >= 768px) { #ar-ceo article figure { background-color: rgba(94, 94, 95, 0.08); } } #ar-ceo article figure picture img { width: 100%; } @media (width >= 768px) { #ar-ceo article figure picture.min { display: none; } } @media (width < 768px) { #ar-ceo article figure picture.max { display: none; } } #ar-ceo article figure figcaption { --content-padding-inline: 1.125rem; --content-padding-block: 2.25rem; padding-inline: var(--content-padding-inline); padding-block: var(--content-padding-block); color: var(--dark-gray); letter-spacing: -1%; } @media (width >= 768px) { #ar-ceo article figure figcaption { --content-padding-inline: 2.1875rem; --content-padding-block: 1.875rem; } } #ar-ceo article figure figcaption p { font-size: 1.125rem; line-height: 1.6875; } #ar-ceo article figure figcaption p:nth-child(1) strong { font-size: 1.5rem; line-height: 2; } /* ========================================================= ANNUAL REPORTS IN REVIEW SECTION 1. Section container 2. Stats block 3. Video block ========================================================= */ /* MARK: 1. Section container ---------------- */ #ar-review { padding: 0; } /* MARK: 2. Stats block ---------------- */ .ar-review-stats { --content-padding-block: 7.3125rem 3.75rem; display: grid; } @media (width >= 768px) { .ar-review-stats { --content-padding-block: 7.3125rem 7.875rem; grid-template-columns: calc(50% + 12px) auto; } } .ar-review-stats .summary { --content-max-width: 300px; background-color: var(--river); padding-inline: 1.25rem; padding-block: var(--content-padding-block); color: white; text-align: center; } @media (width >= 768px) { .ar-review-stats .summary { text-align: right; } } @media (width >= 768px) { .ar-review-stats .summary { padding-inline: 1.25rem 5.5rem; } } .ar-review-stats .summary h2 { color: inherit; font-weight: 400; font-size: 4.75rem; line-height: 1; font-family: var(--font-serif); letter-spacing: -3%; } @media (width >= 768px) { .ar-review-stats .summary h2 { margin-inline-start: auto; max-width: var(--content-max-width); } } .ar-review-stats .summary h2 + * { margin-block-start: 5rem; } @media (width >= 768px) { .ar-review-stats .summary .stat-item { margin-inline-start: auto; max-width: var(--content-max-width); } } .ar-review-stats .summary .stat-item + .stat-item { margin-block-start: 2rem; } .ar-review-stats .summary .stat-item span { font-weight: 700; font-size: 5.8125rem; line-height: 0.5; letter-spacing: -4%; text-align: inherit; } .ar-review-stats .summary .stat-item p { font-weight: 400; font-size: 1.75rem; line-height: 1.7; letter-spacing: -1%; } .ar-review-stats .details { --content-padding-block: 3.6875rem 7.4375rem; display: grid; position: relative; gap: 2.625rem; background-color: rgba(11, 63, 74, 0.2); padding-inline: 1.25rem; padding-block: var(--content-padding-block); } @media (width >= 768px) { .ar-review-stats .details { --content-padding-block: 7.3125rem 3.75rem; padding-inline: 4.6875rem 1.25rem; } } .ar-review-stats .details .item { display: grid; grid-template-columns: 65px auto; gap: 1rem; } .ar-review-stats .details .item p { color: #025e6e; font-size: 1.4375rem; line-height: 1.2; letter-spacing: -2%; } .ar-review-stats .details .item p span { display: block; margin-block-end: 1.2rem; font-weight: 700; font-size: 4.1875rem; line-height: 0.5; letter-spacing: -5%; } .ar-review-stats .details::before { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); background-image: url("/assets/images/arrow-annual-report-stats.svg"); background-position: center; background-repeat: no-repeat; width: 99px; height: 20px; content: ""; } @media (width >= 768px) { .ar-review-stats .details::before { top: 50%; left: -49px; transform: translateX(0) translateY(-50%); rotate: -90deg; } } /* MARK: 3. Video block ---------------- */ .ar-review-video { --section-padding-block: 7.25rem 7.5rem; background-color: rgba(80, 201, 181, 0.2); padding-block: var(--section-padding-block); color: var(--river); } @media (width >= 768px) { .ar-review-video { --section-padding-block: 6.9375rem 7.5rem; background-image: url("/assets/images/bg-map-annual-report-video-block.svg"); background-position: right bottom; background-repeat: no-repeat; } } @media (width >= 768px) { .ar-review-video .container { --container-margin-inline: 2.5rem; } } .ar-review-video .prose { --prose-flow-space: 0.625rem; color: inherit; } .ar-review-video .prose h2 { --heading-font-size: 3rem; --heading-line-height: 1.25; --heading-letter-spacing: -2.2%; color: inherit; font-weight: 400; font-size: var(--heading-font-size); line-height: var(--heading-line-height); font-family: var(--font-serif); letter-spacing: var(--heading-letter-spacing); text-align: center; } @media (width >= 768px) { .ar-review-video .prose h2 { --heading-font-size: 4.75rem; --heading-letter-spacing: -3%; } } .ar-review-video .prose p { margin-inline: auto; max-width: 62.5rem; color: inherit; font-size: 1.75rem; line-height: 1.35; letter-spacing: -1%; } .ar-review-video figure.video-embed { --flow-space: 4.375rem; max-width: 75rem; } /* ========================================================= ANNUAL REPORTS GRANT HIGHLIGHTS 1. Section / container 2. Vertical spacing 3. Programming block ========================================================= */ /* MARK: 1. Section / container ---------------- */ #ar-grant-highlights { padding-block: 0; } /* MARK: 2. Vertical spacing ---------------- */ .ar-text-narrow-image-block + .dual-slider { --margin-block-start: 2.75rem; margin-block-start: var(--margin-block-start); } @media (width >= 768px) { .ar-text-narrow-image-block + .dual-slider { --margin-block-start: 5.75rem; } } .ar-image-block { margin-block: 2.5rem; } /* MARK: 3. Programming block ---------------- */ .programming { background-color: var(--lake); padding-block: 7.5rem; } @media (width >= 768px) { .programming { background-image: url("/assets/images/bg-map-annual-report-programming.svg"); background-position: right bottom; background-repeat: no-repeat; } } .programming .ar-text-narrow-image-block { --block-margin-block-start: 0; --block-background-color: white; --figcaption-bg-color: rgba(255, 255, 255, 0.15); --figcaption-color: white; } .programming .ar-text-narrow-image-block + * { margin-block-start: 2.8125rem; } @media (width >= 768px) { .programming .ar-text-narrow-image-block + * { margin-block-start: 2.5rem; } } @media (width >= 1024px) { .programming .ar-text-narrow-image-block + * { margin-block-start: 1.5625rem; } } /* ========================================================= ANNUAL REPORTS TEXT + IMAGE BLOCK 1. Base styles 2. Prose 3. Image 4. Buttons ========================================================= */ /* MARK: 1. Base styles ---------------- */ .ar-text-narrow-image-block { --block-background-color: rgba(94, 94, 95, 0.08); --block-margin-block-start: 7.5rem; --block-border-styling: 8px solid var(--river); --block-border-width: 8px 0 0 0; --heading-color: var(--river); --heading-font-size: 3rem; --heading-line-height: 1.25; --prose-font-size: 1.25rem; --prose-padding-block: 1.875rem; --prose-padding-inline: 1.25rem; --figcaption-padding-block: 1.625rem 1.875rem; --figcaption-padding-inline: 1.125rem; --figcaption-bg-color: rgba(94, 94, 95, 0.2); --figcaption-color: var(--dark-gray); --figcaption-font-size: 1.125rem; --figcaption-font-size-lg: 1.5rem; display: grid; position: relative; z-index: var(--z-above); margin-block-start: var(--block-margin-block-start); border: var(--block-border-styling); border-width: var(--block-border-width); border-radius: 8px; max-width: 1188px; overflow: hidden; } @media (width >= 768px) { .ar-text-narrow-image-block { --block-border-width: 0 0 0 8px; --heading-font-size: 3rem; --heading-line-height: 1.35; --prose-padding-block: 3rem 3.5625rem; --prose-padding-inline: 3rem 3.6875rem; --figcaption-padding-block: 1.5rem 1.875rem; --figcaption-padding-inline: 1.875rem; grid-template-columns: auto 290px; } } @media (width >= 1024px) { .ar-text-narrow-image-block { --prose-padding-block: 4rem 6.4375rem; --prose-padding-inline: 4rem; } } /* MARK: 2. Prose ---------------- */ .ar-text-narrow-image-block .prose { background-color: var(--block-background-color); padding-inline: var(--prose-padding-inline); padding-block: var(--prose-padding-block); font-size: var(--prose-font-size); } .ar-text-narrow-image-block .prose h2 { color: var(--heading-color); font-weight: 400; font-size: var(--heading-font-size); line-height: var(--heading-line-height); font-family: var(--font-serif); letter-spacing: -2.2%; } .ar-text-narrow-image-block .prose h2.small { --heading-font-size: 2.25rem; --heading-line-height: 1.25; } .ar-text-narrow-image-block .prose p { --prose-flow-space: 2rem; line-height: 1.6; } @media (width >= 768px) { .ar-text-narrow-image-block .prose p { --prose-flow-space: 1.875rem; } } .ar-text-narrow-image-block .prose p a { font-weight: 700; } /* MARK: 3. Image ---------------- */ .ar-text-narrow-image-block figure { display: flex; flex-direction: column; } .ar-text-narrow-image-block figure picture { flex: 1; max-height: 100%; } .ar-text-narrow-image-block figure picture img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .ar-text-narrow-image-block figcaption { flex: 1; background-color: var(--figcaption-bg-color); padding-inline: var(--figcaption-padding-inline); padding-block: var(--figcaption-padding-block); color: var(--figcaption-color); font-style: italic; font-size: var(--figcaption-font-size); } .ar-text-narrow-image-block figcaption p:has(strong) { font-style: normal; font-size: var(--figcaption-font-size-lg); } .ar-text-narrow-image-block figcaption p:has(strong) + p { margin-block-start: 0.75rem; } /* 4. Buttons ---------------- */ .ar-text-narrow-image-block .button-group { -moz-column-gap: 2.5rem; column-gap: 2.5rem; row-gap: 1.25rem; margin-block-start: 2.1875rem; } .ar-text-narrow-image-block .button-group .button { text-transform: uppercase; } /* ========================================================= ANNUAL REPORTS IMAGE BLOCKS 1. Single/1-up 2. Two-up 3. Figures with caption ========================================================= */ /* MARK: 1. Single/1-up ---------------- */ /* MARK: 2. Two-up ---------------- */ .ar-image-block[data-img-block="2-up"] { --gap: 1rem; display: grid; gap: var(--gap); } @media (width >= 850px) { .ar-image-block[data-img-block="2-up"] { --gap: 1.25rem; grid-template-columns: repeat(2, 1fr); } .ar-image-block[data-img-block="2-up"] figure { overflow: hidden; } .ar-image-block[data-img-block="2-up"] figure:nth-child(1) { border-radius: 0 8px 8px 0; } .ar-image-block[data-img-block="2-up"] figure:nth-child(2) { border-radius: 8px 0 0 8px; } } @media (width >= 1024px) { .ar-image-block[data-img-block="2-up"] { --gap: 2rem; } } /* MARK: 3. Figures with caption ---------------- */ figure.with-caption { position: relative; } figure.with-caption figcaption { position: absolute; background-color: rgba(0, 0, 0, 0.8); padding: 0.5rem 0.875rem; color: white; font-size: 0.9375rem; line-height: 1.4; letter-spacing: -1%; } figure.with-caption[data-caption=sw] figcaption { bottom: 0; left: 0; } figure.with-caption[data-caption=se] figcaption { right: 0; bottom: 0; } /* ========================================================= ANNUAL REPORTS ACCORDION CARDS 1. Base styles 2. Single/1-up layout 3. 2-up or more layout ========================================================= */ /* MARK: 1. Base styles ---------------- */ .ar-accordion-cards { --card-heading-font-size: 2rem; --card-heading-line-height: 1.2; --card-heading-letter-spacing: -3%; --card-summary-icon-width: 9px; --card-summary-gap: 0.75rem; --card-summary-font-size: 1.3125rem; --card-summary-line-height: 1.9; --card-summary-letter-spacing: -3%; --card-prose-font-size: 1rem; --card-prose-line-height: 1.625; --card-prose-letter-spacing: -3%; } @media (width >= 768px) { .ar-accordion-cards { --card-heading-font-size: 1.75rem; --card-heading-line-height: 1.25; --card-heading-letter-spacing: -1%; } } .ar-accordion-cards .card { align-items: start; border-radius: 8px; background-color: white; padding-inline: 1.6875rem; padding-block: 1.875rem 3.75rem; } .ar-accordion-cards .card h3 { font-weight: 700; font-size: var(--card-heading-font-size); line-height: var(--card-heading-line-height); letter-spacing: var(--card-heading-letter-spacing); } .ar-accordion-cards .card h3 + * { margin-block-start: 1.75rem; } .ar-accordion-cards .card details[open] summary::before { rotate: 90deg; } .ar-accordion-cards .card details + details { margin-block-start: 1.25rem; } .ar-accordion-cards .card details summary { display: grid; grid-template-columns: var(--card-summary-icon-width) auto; gap: var(--card-summary-gap); font-size: var(--card-summary-font-size); line-height: 1.14285714; list-style: none; /* Ensure default marker is removed for Firefox */ } .ar-accordion-cards .card details summary::before { display: inline-block; transition: all var(--transition-timing-fast); margin-block-start: 5px; background-image: url("/assets/images/icon-accordion-arrow.svg"); background-position: center; background-repeat: no-repeat; width: var(--card-summary-icon-width); height: 15px; content: ""; } .ar-accordion-cards .card details summary span.extra { font-size: 1rem; } .ar-accordion-cards .card details summary::-moz-list-bullet { list-style-type: none; /* Firefox */ } .ar-accordion-cards .card details summary::-webkit-details-marker, .ar-accordion-cards .card details summary::marker { display: none; /* Webkit - Safari, Chrome, Edge */ } .ar-accordion-cards .card details .prose { margin-block-start: 0.25rem; padding-inline-start: calc(var(--card-summary-icon-width) + var(--card-summary-gap)); font-size: var(--card-prose-font-size); line-height: var(--card-prose-line-height); letter-spacing: var(--card-prose-letter-spacing); } .ar-accordion-cards .card details .prose a { font-weight: 700; } /* MARK: 2. Single/1-up layout ---------------- */ /* MARK: 3. 2-up or more layout ---------------- */ .ar-accordion-cards[data-accordion-cards="2-up"] { display: grid; row-gap: 2.5rem; } @media (width >= 700px) { .ar-accordion-cards[data-accordion-cards="2-up"] { grid-template-columns: repeat(2, 1fr); -moz-column-gap: 1.125rem; column-gap: 1.125rem; } } @media (width >= 1024px) { .ar-accordion-cards[data-accordion-cards="2-up"] { -moz-column-gap: 1.375rem; column-gap: 1.375rem; } } /* ========================================================= ANNUAL REPORTS DUAL SLIDER & FILTERS 1. Container styles 2. Min/mobile filters 3. Max/desktop filters 4. Slider 6. Slider instructions 7. Slider modal ========================================================= */ /* MARK: 1. Container styles ---------------- */ .dual-slider { width: 100%; overflow: hidden; } /* MARK: 2. Min/mobile filters ---------------- */ .filters-min { --filter-primary-color: #025d6e; position: relative; margin-block-end: 1.875rem; } @media (width >= 640px) { .filters-min { display: none; } } .filters-min button.mobile-filter-toggle { display: block; border: 2px solid var(--filter-primary-color); border-radius: 6px; background-color: white; padding: 0.25rem 0.5rem; width: 100%; color: var(--filter-primary-color); font-weight: 600; font-size: 1.125rem; text-transform: uppercase; } .filters-min button.mobile-filter-toggle[aria-expanded=true] { border-radius: 6px 6px 0 0; } .filters-min button.mobile-filter-toggle .toggle-icon { display: inline-block; rotate: -90deg; transition: rotate var(--transition-timing-fast); } .filters-min button.mobile-filter-toggle .toggle-icon.open { rotate: 0deg; } .filters-min .mobile-dropdown { position: absolute; top: 100%; right: 0; left: 0; z-index: calc(var(--z-above) + 10); background-color: var(--filter-primary-color); padding: 1.25rem 0.625rem 2.5rem; } .filters-min .dropdown-content { text-align: center; } .filters-min .dropdown-content > div:has(.dropdown-section) { display: flex; } .filters-min .dropdown-content > div:has(.dropdown-section) .dropdown-section:nth-child(1) { flex-basis: 40%; } .filters-min .dropdown-content > div:has(.dropdown-section) .dropdown-section:nth-child(2) { flex-basis: 60%; } .filters-min .dropdown-content button { display: block; border: 0; background-color: transparent; padding: 1rem; width: 100%; color: white; font-weight: 600; font-size: 0.875rem; line-height: 1; letter-spacing: -0.15px; text-align: center; text-transform: uppercase; } .filters-min .dropdown-content button.active { color: #4e8f9a; } /* MARK: 3. Max/desktop filters ---------------- */ @media (width < 640px) { .filters-max { display: none; } } .filters-max .view-toggle { --view-toggle-bg: var(--salmon); display: block; position: relative; transition: all var(--transition-timing); margin-inline: auto 0; border: 0; border-radius: 5px 6px 6px 0; background-color: var(--view-toggle-bg); padding: 0.5rem 1.25rem 0.5rem 0.75rem; color: white; font-weight: 700; font-size: 0.875rem; line-height: 1; letter-spacing: 3%; text-transform: uppercase; } .filters-max .view-toggle::before { --slant-width: 14px; position: absolute; bottom: 0; left: calc(var(--slant-width) * -1.4); clip-path: polygon(100% 0, 0% 100%, 100% 100%); background-color: var(--view-toggle-bg); width: calc(var(--slant-width) * 1.5); height: calc(100% - 1px); content: ""; } .filters-max .view-toggle:hover { filter: brightness(1.3); } .filters-max .filter-buttons { --flow-space: 0.375rem; --btn-label-color: white; --btn-min-width: clamp(70px, 4vw, 150px); --btn-bg-color: var(--twilight); --btn-border-color: var(--btn-bg-color); --btn-border: 1.5px solid var(--btn-border-color); --btn-font-size: clamp(0.875rem, 2vw, 1.25rem); display: flex; -moz-column-gap: 0.3125rem; column-gap: 0.3125rem; margin-block-end: 3.75rem; } .filters-max .filter-buttons button { position: relative; transition: all var(--transition-timing-fast); border: var(--btn-border); border-radius: var(--border-radius); background-color: var(--btn-bg-color); padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5625rem, 2vw, 1rem); min-width: var(--btn-min-width); color: var(--btn-label-color); font-weight: 700; font-size: var(--btn-font-size); } .filters-max .filter-buttons button.active::after { --arrow: url("/assets/images/bg-filter-btn-arrow-twilight.svg"); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-image: var(--arrow); background-position: center; background-repeat: no-repeat; width: 70px; height: 16px; content: ""; } .filters-max .filter-buttons button[data-filter=all], .filters-max .filter-buttons button[data-filter=all].active { --btn-bg-color: white; --btn-border-color: var(--twilight); --btn-label-color: var(--twilight); max-width: -moz-fit-content; max-width: fit-content; text-transform: uppercase; } .filters-max .filter-buttons button[data-filter=all]::after, .filters-max .filter-buttons button[data-filter=all].active::after { display: none; } .filters-max .filter-buttons.state-filters button { flex: 1 0 auto; background-position: center; background-size: contain; background-repeat: no-repeat; height: clamp(32px, 5vw, 64px); text-transform: uppercase; } .filters-max .filter-buttons.state-filters button:hover { filter: brightness(1.3); } .filters-max .filter-buttons.state-filters button[data-filter=Alaska] { background-image: url("/assets/images/bg-state-filter-btn-ak.svg"); } .filters-max .filter-buttons.state-filters button[data-filter=Idaho] { --btn-min-width: clamp(72px, 4vw, 150px); background-image: url("/assets/images/bg-state-filter-btn-id.svg"); } .filters-max .filter-buttons.state-filters button[data-filter=Montana] { background-image: url("/assets/images/bg-state-filter-btn-mt.svg"); } .filters-max .filter-buttons.state-filters button[data-filter=Oregon] { background-image: url("/assets/images/bg-state-filter-btn-or.svg"); } .filters-max .filter-buttons.state-filters button[data-filter=Washington] { background-image: url("/assets/images/bg-state-filter-btn-wa.svg"); } .filters-max .filter-buttons.state-filters button[data-filter=bcNational] { --btn-min-width: clamp(122px, 14vw, 183px); background-image: url("/assets/images/bg-state-filter-btn-bc-natl.svg"); } .filters-max .filter-buttons.sector-filters button { --btn-border: 1.5px solid var(--btn-border-color); --btn-font-size: clamp(0.75rem, 1vw, 1rem); line-height: 1.2; } .filters-max .filter-buttons.sector-filters button:hover { filter: brightness(1.2) saturate(0.6); } .filters-max .filter-buttons.sector-filters button.active { filter: brightness(1.5) saturate(0); } .filters-max .filter-buttons.sector-filters button[data-filter=all], .filters-max .filter-buttons.sector-filters button[data-filter=all].active { --btn-min-width: max-content; --btn-font-size: clamp(0.75rem, 1vw, 1.25rem); filter: none; } .filters-max .filter-buttons.sector-filters button[data-filter=arts-culture] { --btn-bg-color: var(--lake); --btn-border-color: var(--btn-bg-color); } .filters-max .filter-buttons.sector-filters button[data-filter=arts-culture].active::after { --arrow: url("/assets/images/bg-filter-btn-arrow-lake.svg"); } .filters-max .filter-buttons.sector-filters button[data-filter=human-services] { --btn-bg-color: var(--dark-gray); --btn-border-color: var(--btn-bg-color); } .filters-max .filter-buttons.sector-filters button[data-filter=human-services].active::after { --arrow: url("/assets/images/bg-filter-btn-arrow-dark-gray.svg"); } .filters-max .filter-buttons.sector-filters button[data-filter=health] { --btn-bg-color: var(--salmon); --btn-border-color: var(--btn-bg-color); } .filters-max .filter-buttons.sector-filters button[data-filter=health].active::after { --arrow: url("/assets/images/bg-filter-btn-arrow-salmon.svg"); } .filters-max .filter-buttons.sector-filters button[data-filter=education] { --btn-bg-color: var(--twilight); --btn-border-color: var(--btn-bg-color); } .filters-max .filter-buttons.sector-filters button[data-filter=education].active::after { --arrow: url("/assets/images/bg-filter-btn-arrow-twilight.svg"); } .filters-max .filter-buttons.sector-filters button[data-filter=research] { --btn-bg-color: var(--gold); --btn-border-color: var(--btn-bg-color); } .filters-max .filter-buttons.sector-filters button[data-filter=research].active::after { --arrow: url("/assets/images/bg-filter-btn-arrow-gold.svg"); } /* MARK: 4. Slider ---------------- */ .dual-slider-container { width: 100%; overflow: hidden; } .dual-slider-container .slider + .slider { margin-block-start: 0.9375rem; } .dual-slider-container .swiper-slide { --slide-dimension: 150px; --slide-sector-color: white; flex-shrink: 0; opacity: 1; transition: all var(--transition-timing); border-radius: var(--box-radius); width: var(--slide-dimension) !important; height: var(--slide-dimension); overflow: hidden; } @media (width >= 640px) { .dual-slider-container .swiper-slide { --slide-dimension: 200px; } } .dual-slider-container .swiper-slide[data-sector=arts-culture] { --slide-sector-color: var(--lake); } .dual-slider-container .swiper-slide[data-sector=human-services] { --slide-sector-color: var(--dark-gray); } .dual-slider-container .swiper-slide[data-sector=health] { --slide-sector-color: var(--salmon); } .dual-slider-container .swiper-slide[data-sector=education] { --slide-sector-color: var(--twilight); } .dual-slider-container .swiper-slide[data-sector=research] { --slide-sector-color: var(--gold); } .dual-slider-container .swiper-slide:not(.active) { opacity: 0.2; } .dual-slider-container .swiper-slide button { display: flex; position: relative; margin: 0; border: 0; background-color: transparent; padding: 0; width: 100%; height: 100%; } .dual-slider-container .swiper-slide button::before, .dual-slider-container .swiper-slide button::after { position: absolute; inset-inline: 0; width: 100%; height: 8px; content: ""; } .dual-slider-container .swiper-slide button .slide-overlay { display: flex; position: absolute; flex-direction: column; justify-content: space-between; align-items: center; transition: all var(--transition-timing); inset: 0; background-color: var(--slide-sector-color); padding-inline: 0.75rem; padding-block: 1.5rem 1rem; width: 100%; height: 100%; } .dual-slider-container .swiper-slide button .slide-overlay h3 { color: white; font-weight: 400; font-size: 1rem; line-height: 1.375; font-family: var(--font-serif); letter-spacing: -2%; } .dual-slider-container .swiper-slide button .slide-overlay div { display: flex; justify-content: space-between; align-items: center; width: 100%; } .dual-slider-container .swiper-slide button .slide-overlay div img { opacity: 0.4; } .dual-slider-container .swiper-slide button .slide-overlay div img:nth-child(2) { max-width: 50px; } .dual-slider-container .swiper-slide button:focus-visible { outline: 2px solid var(--focus-color, blue); outline-offset: 2px; } .dual-slider-container .swiper-slide button:active .slide-overlay { transform: translateY(0); } .dual-slider-container .slider-1 .swiper-slide button .slide-overlay { transform: translateY(-100%); } .dual-slider-container .slider-1 .swiper-slide button::before { top: 0; background-color: var(--slide-sector-color); } .dual-slider-container .slider-2 .swiper-slide button .slide-overlay { transform: translateY(100%); } .dual-slider-container .slider-2 .swiper-slide button::after { bottom: 0; background-color: var(--slide-sector-color); } .dual-slider-container .swiper-slide button:hover .slide-overlay, .dual-slider-container .swiper-slide button:focus-visible .slide-overlay, .dual-slider-container .swiper-slide button.touch-active .slide-overlay { transform: translateY(0); } /* MARK: 5. Instructions ---------------- */ .slider-instructions { transition: opacity 0.7s ease; font-weight: 700; font-size: 1.375rem; line-height: 1.1; text-align: center; text-transform: uppercase; } .slider-instructions p { display: flex; -moz-column-gap: 20px; column-gap: 20px; justify-content: center; align-items: center; opacity: 0.4; color: var(--lake); font-size: inherit; letter-spacing: 3%; } @media (width >= 640px) { .slider-instructions p { -moz-column-gap: 30px; column-gap: 30px; } } .slider-instructions[data-instructions=top] { margin-block-end: 1.875rem; } .slider-instructions[data-instructions=bottom] { margin-block-start: 2.5rem; font-size: 0.875rem; } @media (width >= 640px) { .slider-instructions[data-instructions=bottom] { font-size: 1.25rem; } } .slider-instructions[data-instructions=bottom] p svg { width: 20px; } @media (width >= 640px) { .slider-instructions[data-instructions=bottom] p svg { width: 32px; } } .slider-instructions[data-instructions=bottom] p svg:first-of-type { rotate: 180deg; } .slider-instructions.visible { opacity: 1; } /* MARK: 6. Modal ---------------- */ .micromodal-slide { display: none; position: relative; z-index: calc(var(--z-modal) + 50); } .micromodal-slide.is-open { display: block; } .micromodal-slide .modal__overlay { display: flex; position: fixed; justify-content: center; align-items: center; inset: 0; background: rgba(0, 0, 0, 0.6); width: 100vw; height: 100vh; min-height: 100vh; overflow: auto; } .micromodal-slide .modal__container { position: relative; flex: 1; background-color: white; width: 100%; height: 100%; max-height: 100%; overflow-y: auto; } .micromodal-slide .modal__container .modal__btn { display: grid; position: absolute; top: 5px; right: 20px; justify-content: center; align-items: center; z-index: calc(var(--z-modal) + 1); transition: all var(--transition-timing); margin: 0; border: 0; background-color: transparent; padding: 0; width: 60px; height: 60px; color: white; } @media (width >= 768px) { .micromodal-slide .modal__container .modal__btn { top: 40px; right: 40px; border-radius: 50%; background-color: var(--dark-gray); } } .micromodal-slide .modal__container .modal__btn::after { width: 100%; height: 100%; content: "✕"; color: white; font-size: 2.6875rem; line-height: 1.4; } .micromodal-slide .modal__container .modal__btn:hover { rotate: -90deg; } .micromodal-slide .modal__content { --sector-color: white; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 100vh; } @media (width >= 768px) { .micromodal-slide .modal__content { display: grid; grid-template-columns: 30% auto; } } @media (width >= 1024px) { .micromodal-slide .modal__content { grid-template-columns: 25% auto; } } .micromodal-slide .modal__content[data-sector=arts-culture] { --sector-color: var(--lake); } .micromodal-slide .modal__content[data-sector=human-services] { --sector-color: var(--dark-gray); } .micromodal-slide .modal__content[data-sector=health] { --sector-color: var(--salmon); } .micromodal-slide .modal__content[data-sector=education] { --sector-color: var(--twilight); } .micromodal-slide .modal__content[data-sector=research] { --sector-color: var(--gold); } .micromodal-slide .modal__content .prose { --p-font-size: 0.9375rem; --p-line-height: 1.3; --heading-font-size: 1.8175rem; --heading-line-height: 1.3; --heading-margin-bottom: 0.9375rem; --padding-inline: 1.875rem; flex-shrink: 0; background-color: var(--sector-color); padding-inline: var(--padding-inline); padding-block: 2.5rem 1.875rem; color: white; font-size: var(--p-font-size); line-height: var(--p-line-height); } @media (width >= 768px) { .micromodal-slide .modal__content .prose { --p-font-size: 1rem; --p-line-height: 1.5625; --heading-font-size: 1.875rem; --heading-line-height: 1.3; } } @media (width >= 1024px) { .micromodal-slide .modal__content .prose { --heading-margin-bottom: 3.125rem; --padding-inline: 1.5rem; } } @media (width >= 1180px) { .micromodal-slide .modal__content .prose { --padding-inline: 2rem; } } @media (width >= 1280px) { .micromodal-slide .modal__content .prose { --padding-inline: 3rem; } } .micromodal-slide .modal__content .prose h3 { margin-block-end: var(--heading-margin-bottom); color: inherit; font-weight: 400; font-size: var(--heading-font-size); line-height: var(--heading-line-height); font-family: var(--font-serif); } .micromodal-slide .modal__content figure { position: relative; flex-grow: 1; flex-shrink: 1; min-height: 40vh; } .micromodal-slide .modal__content figure img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .micromodal-slide .modal__content figure footer { --gap: 0.625rem; --padding: 0.75rem; --justify: center; --stats-font-size: 1.75rem; display: flex; position: absolute; bottom: 0; -moz-column-gap: var(--gap); column-gap: var(--gap); justify-content: var(--justify); align-items: center; inset-inline: 0; background-color: rgba(255, 255, 255, 0.9); padding: var(--padding); width: 100%; } @media (width >= 420px) { .micromodal-slide .modal__content figure footer { --gap: 2rem; --padding: 1rem 0.75rem; } } @media (width >= 500px) { .micromodal-slide .modal__content figure footer { --gap: 3rem; --padding: 1rem 2rem; --justify: space-between; } } @media (widdth >= 768px) { .micromodal-slide .modal__content figure footer { --stats-font-size: 2.2rem; } } @media (width >= 1024px) { .micromodal-slide .modal__content figure footer { --gap: 4rem; --justify: flex-start; --stats-font-size: 3rem; } } .micromodal-slide .modal__content figure footer .sector { --text-max-width: calc(40% - var(--gap)); --text-font-size: 0.875rem; display: flex; -moz-column-gap: 6px; column-gap: 6px; align-items: center; max-width: var(--text-max-width); color: var(--sector-color); font-size: var(--text-font-size); line-height: 1.2; } @media (width >= 500px) { .micromodal-slide .modal__content figure footer .sector { --text-font-size: 0.9375rem; } } @media (width >= 768px) { .micromodal-slide .modal__content figure footer .sector { --text-font-size: 1.15rem; } } @media (width >= 1024px) { .micromodal-slide .modal__content figure footer .sector { --text-font-size: 1.375rem; } } @media (width >= 420px) { .micromodal-slide .modal__content figure footer .sector[data-sector=arts-culture] { --text-max-width: 150px; } } @media (width >= 500px) { .micromodal-slide .modal__content figure footer .sector[data-sector=arts-culture] { --text-max-width: 170px; } } @media (width >= 768px) { .micromodal-slide .modal__content figure footer .sector[data-sector=arts-culture] { --text-max-width: 190px; } } @media (width >= 1024px) { .micromodal-slide .modal__content figure footer .sector[data-sector=arts-culture] { --text-max-width: 240px; } } @media (width >= 420px) { .micromodal-slide .modal__content figure footer .sector[data-sector=human-services] { --text-max-width: 160px; } } @media (width >= 500px) { .micromodal-slide .modal__content figure footer .sector[data-sector=human-services] { --text-max-width: 180px; } } @media (width >= 768px) { .micromodal-slide .modal__content figure footer .sector[data-sector=human-services] { --text-max-width: 210px; } } @media (width >= 1024px) { .micromodal-slide .modal__content figure footer .sector[data-sector=human-services] { --text-max-width: 260px; } } @media (width >= 420px) { .micromodal-slide .modal__content figure footer .sector[data-sector=health] { --text-max-width: 180px; } } @media (width >= 500px) { .micromodal-slide .modal__content figure footer .sector[data-sector=health] { --text-max-width: 220px; } } @media (width >= 768px) { .micromodal-slide .modal__content figure footer .sector[data-sector=health] { --text-max-width: 280px; } } @media (width >= 1024px) { .micromodal-slide .modal__content figure footer .sector[data-sector=health] { --text-max-width: 300px; } } @media (width >= 420px) { .micromodal-slide .modal__content figure footer .sector[data-sector=education] { --text-max-width: 180px; } } @media (width >= 500px) { .micromodal-slide .modal__content figure footer .sector[data-sector=education] { --text-max-width: 200px; } } @media (width >= 768px) { .micromodal-slide .modal__content figure footer .sector[data-sector=education] { --text-max-width: 280px; } } @media (width >= 420px) { .micromodal-slide .modal__content figure footer .sector[data-sector=research] { --text-max-width: 140px; } } @media (width >= 500px) { .micromodal-slide .modal__content figure footer .sector[data-sector=research] { --text-max-width: 160px; } } .micromodal-slide .modal__content figure footer .sector svg, .micromodal-slide .modal__content figure footer .sector img { --icon-width: 38px; flex-shrink: 0; width: var(--icon-width); } @media (width >= 420px) { .micromodal-slide .modal__content figure footer .sector svg, .micromodal-slide .modal__content figure footer .sector img { --icon-width: 48px; } } @media (width >= 1024px) { .micromodal-slide .modal__content figure footer .sector svg, .micromodal-slide .modal__content figure footer .sector img { --icon-width: 64px; } } .micromodal-slide .modal__content figure footer .state { --state-icon-margin-inline: 0; display: flex; align-items: center; color: var(--sector-color); font-weight: 700; font-size: var(--stats-font-size); } .micromodal-slide .modal__content figure footer .state svg { --svg-max-sizing: 40px; fill: var(--sector-color); margin-inline-start: var(--state-icon-margin-inline); max-width: var(--svg-max-sizing); max-height: var(--svg-max-sizing); } @media (width >= 768px) { .micromodal-slide .modal__content figure footer .state svg { --svg-max-sizing: 50px; } } @media (width >= 1024px) { .micromodal-slide .modal__content figure footer .state svg { --svg-max-sizing: 64px; } } .micromodal-slide .modal__content figure footer .state[data-state=Alaska] svg { --state-icon-margin-inline: 0; } @media (width >= 768px) { .micromodal-slide .modal__content figure footer .state[data-state=Alaska] svg { --state-icon-margin-inline: 4px; } } .micromodal-slide .modal__content figure footer .state[data-state=Idaho] svg { --state-icon-margin-inline: -4px; } @media (width >= 768px) { .micromodal-slide .modal__content figure footer .state[data-state=Idaho] svg { --state-icon-margin-inline: 4px; } } .micromodal-slide .modal__content figure footer .state[data-state=Montana] svg { --state-icon-margin-inline: 4px; } @media (width >= 768px) { .micromodal-slide .modal__content figure footer .state[data-state=Montana] svg { --state-icon-margin-inline: 7px; } } .micromodal-slide .modal__content figure footer .state[data-state=Oregon] svg { --state-icon-margin-inline: 5px; } @media (width >= 1024px) { .micromodal-slide .modal__content figure footer .state[data-state=Oregon] svg { --state-icon-margin-inline: 8px; } } .micromodal-slide .modal__content figure footer .state[data-state=Washington] svg { --state-icon-margin-inline: 2px; } @media (width >= 768px) { .micromodal-slide .modal__content figure footer .state[data-state=Washington] svg { --state-icon-margin-inline: 4px; } } .micromodal-slide .modal__content figure footer .state[data-state=BC] svg { --state-icon-margin-inline: 4px; } @media (width >= 768px) { .micromodal-slide .modal__content figure footer .state[data-state=BC] svg { --state-icon-margin-inline: 8px; } } .micromodal-slide .modal__content figure footer .state[data-state=National] svg { --state-icon-margin-inline: 2px; } @media (width >= 768px) { .micromodal-slide .modal__content figure footer .state[data-state=National] svg { --state-icon-margin-inline: 4px; } } .micromodal-slide .modal__content figure footer .amount { color: var(--sector-color); font-weight: 700; font-size: var(--stats-font-size); text-transform: uppercase; } /* MARK: 7. Modal animations ---------------- */ @keyframes mmfadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } } .micromodal-slide[aria-hidden=false] .modal__overlay, .micromodal-slide[aria-hidden=false] .modal__container { animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); } .micromodal-slide[aria-hidden=true] .modal__overlay { animation: mmfadeOut 0.5s cubic-bezier(0, 0, 0.2, 1); } .micromodal-slide[aria-hidden=true] .modal__container { animation: mmfadeOut 0.25s cubic-bezier(0, 0, 0.2, 1); } /* ========================================================= PEOPLE SECTION 1. People section 2. People grid 3. People cards 4. People bio panel 5. Single person text & image blocks 6. Large image ========================================================= */ /* MARK: 1. People section ---------------- */ #ar-people { padding-block: 7.125rem 0; } #ar-people h2.section-heading { color: var(--lake); font-weight: 400; font-size: 3rem; line-height: 1.25; font-family: var(--font-serif); letter-spacing: -2.2%; text-align: center; } @media (width >= 768px) { #ar-people h2.section-heading { font-size: 4.75rem; letter-spacing: -3%; } } /* MARK: 2. People grid ---------------- */ .people-grid { --grid-col-gap: 1.25rem; --grid-row-gap: 1.25rem; --bio-border: 10px solid var(--lake); --bio-border-width: 0 0 10px 0; --bio-padding-inline: 1.25rem; --bio-padding-block: 1.75rem; display: flex; -moz-column-gap: var(--grid-col-gap); column-gap: var(--grid-col-gap); row-gap: var(--grid-row-gap); flex-wrap: wrap; justify-content: center; margin-block-start: 2.5rem; } @media (width >= 768px) { .people-grid { --grid-col-gap: 3.75rem; --grid-row-gap: 3rem; --bio-border-width: 0 0 0 10px; --bio-padding-inline: 1.375rem; --bio-padding-block: 2rem; } } @media (width >= 1024px) { .people-grid { --grid-col-gap: 4.375rem; --grid-row-gap: 3rem; margin-block-start: 3.375rem; } } /* MARK: 3. People cards ---------------- */ article.people-card { position: relative; flex: 0 0 150px; } @media (width >= 768px) { article.people-card { flex: 0 0 182px; } } article.people-card .bio { display: none !important; } article.people-card button { cursor: pointer; border: 0; background: none; padding: 0; width: 100%; text-align: left; } article.people-card button:focus-visible { outline: 3px solid var(--lake); outline-offset: 2px; } article.people-card.bio-active::after { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); animation: fadeInSlide 0.4s ease-out; background-image: url("/assets/images/bg-bio-arrow.svg"); background-position: center; background-repeat: no-repeat; width: 109px; height: 21px; content: ""; } @media (width >= 768px) { article.people-card.bio-active::after { bottom: -48px; } } article.people-card figure { position: relative; margin: 0; } article.people-card figure img { border-radius: 8px; aspect-ratio: 1; width: 100%; } article.people-card figure .icon { display: grid; position: absolute; top: 154px; right: 4px; justify-content: center; align-items: center; margin: 0; border-radius: 50%; background-color: white; width: 24px; height: 24px; } article.people-card figure .icon svg { margin-inline: auto; width: 70%; fill: var(--lake); } article.people-card figure figcaption { margin-block-start: 0.625rem; } article.people-card figure figcaption h3 { color: var(--river); font-weight: 700; font-size: 1.125rem; line-height: 1.17; letter-spacing: -1%; } article.people-card figure figcaption p { margin-block-start: 0.625rem; color: var(--dark-gray); font-style: italic; font-size: 1rem; line-height: 1.25; letter-spacing: -1%; } @media (width >= 768px) { article.people-card figure figcaption p { margin-block-start: 0.375rem; } } /* MARK: 4. People bio panel ---------------- */ .full-width-bio-row { display: none; position: relative; left: 50%; transform: translateX(-50%); transition: all 0.3s ease; border: var(--bio-border); border-width: var(--bio-border-width); border-radius: 8px; background-color: rgba(94, 94, 95, 0.1); width: 100vw; } .full-width-bio-row.showing-bio { display: block; animation: fadeInSlide 0.4s ease-out; } .full-width-bio-row .bio-content-wrapper { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin: 0 auto; padding: var(--bio-padding-block) var(--bio-padding-inline); max-width: 1200px; /* Match your container */ } .full-width-bio-row .bio-text { transition: opacity 0.3s ease; } .full-width-bio-row .bio-close { flex: 0 0 auto; cursor: pointer; border: none; background: none; width: 38px; height: 38px; } .full-width-bio-row .bio-close:focus-visible { outline: 3px solid var(--lake); outline-offset: 2px; } .full-width-bio-row .bio-close .icon-close { display: block; position: relative; width: 100%; height: 100%; } .full-width-bio-row .bio-close .icon-close span { display: block; position: absolute; top: 50%; left: 0; transform-origin: center; background-color: var(--dark-gray); width: 100%; height: 3px; } .full-width-bio-row .bio-close .icon-close span:nth-child(1) { rotate: 45deg; } .full-width-bio-row .bio-close .icon-close span:nth-child(2) { rotate: -45deg; } @keyframes fadeInSlide { from { opacity: 0; } to { opacity: 1; } } /* MARK: 5. Single person text & image blocks ---------------- */ .ar-single-person-blocks { margin-block-start: 7.5rem; background-color: var(--river); padding-block: 7.5rem; } @media (width >= 768px) { .ar-single-person-blocks { margin-block-start: 7.125rem; background-image: url("/assets/images/bg-map-annual-report-people.svg"); background-position: right bottom; background-repeat: no-repeat; } } @media (width >= 1024px) { .ar-single-person-blocks { margin-block-start: 7.25rem; } } .ar-single-person-blocks .ar-text-narrow-image-block { --block-background-color: white; --block-margin-block-start: 0; --block-border-styling: 8px solid var(--lake); --figcaption-bg-color: rgba(255, 255, 255, 0.1); --figcaption-color: white; } .ar-single-person-blocks .ar-text-narrow-image-block + .ar-text-narrow-image-block { --block-margin-block-start: 3rem; } /* MARK: 6. Large image ---------------- */ /* ========================================================= ANNUAL REPORTS INVESTMENTS SECTION 1. Section / container 2. Intro text & image block 3. Total assets chart 4. Investment types chart ========================================================= */ /* MARK: 1. Section / container ---------------- */ #ar-investments { --section-padding-block: 7rem 6.6875rem; padding-block: var(--section-padding-block); } @media (width >= 768px) { #ar-investments { --section-padding-block: 7.5rem 7rem; } } /* MARK: 2. Intro text & image block ---------------- */ #ar-investments .ar-text-narrow-image-block:first-of-type { --block-margin-block-start: 0; } /* MARK: 3. Total assets chart ---------------- */ #ar-investments .ar-total-assets-chart-container { --section-margin-block-start: 2.5rem; --chart-min-height: 800px; margin-block-start: var(--section-margin-block-start); } @media (width >= 768px) { #ar-investments .ar-total-assets-chart-container { --chart-min-height: 500px; --section-margin-block-start: 3.75rem; } } @media (width >= 1024px) { #ar-investments .ar-total-assets-chart-container { --chart-min-height: 400px; --section-margin-block-start: 7rem; } } #ar-investments .ar-total-assets-chart-container .prose { margin-block-end: 1rem; font-size: 1.25rem; } #ar-investments .ar-total-assets-chart-container .ar-stacked-chart { height: var(--chart-min-height); min-height: var(--chart-min-height); } #ar-investments .ar-total-assets-chart-container .ar-stacked-chart #stacked-financial-chart { width: 100%; height: 100%; } /* MARK: 4. Investment types chart ---------------- */ #ar-investments .ar-investment-types { --section-margin-block-start: 2.25rem; display: grid; row-gap: 1.5625rem; margin-block-start: var(--section-margin-block-start); } @media (width >= 768px) { #ar-investments .ar-investment-types { --section-margin-block-start: 3.75rem; } } @media (width >= 960px) { #ar-investments .ar-investment-types { grid-template-rows: auto 1fr; grid-template-columns: auto 223px; row-gap: 3.125rem; } } @media (width >= 1024px) { #ar-investments .ar-investment-types { --section-margin-block-start: 7.5rem; grid-template-columns: auto 260px; -moz-column-gap: 5.375rem; column-gap: 5.375rem; } } #ar-investments .ar-investment-types .prose { font-size: 1.25rem; line-height: 1.6; } @media (width >= 960px) { #ar-investments .ar-investment-types .prose { grid-row: 1; grid-column: 1; } } #ar-investments .ar-investment-types .prose a { font-weight: 700; } #ar-investments .ar-investment-types figure.donut-chart-container { margin-inline: auto; width: 248px; max-width: 100%; } @media (width >= 960px) { #ar-investments .ar-investment-types figure.donut-chart-container { grid-row: 1/3; grid-column: 2; } } #ar-investments .ar-investment-types figure.donut-chart-container figcaption { margin-inline: auto; margin-block-start: 1rem; max-width: 120px; font-size: 1.75rem; line-height: 1.1; letter-spacing: -1%; text-align: center; } #ar-investments .ar-investment-types .ar-investment-types-container { --spacing: 2.25rem; } @media (width >= 960px) { #ar-investments .ar-investment-types .ar-investment-types-container { --spacing: 1.25rem; grid-row: 2; grid-column: 1; } } #ar-investments .ar-investment-types h3 { --heading-alignment: center; font-weight: 400; font-size: 1.75rem; line-height: 1.35; font-family: var(--font-serif); letter-spacing: -2.2%; text-align: var(--heading-alignment); } @media (width >= 960px) { #ar-investments .ar-investment-types h3 { --heading-alignment: left; } } #ar-investments .ar-investment-types h3 + .ar-investment-types-lists { margin-block-start: var(--spacing); } #ar-investments .ar-investment-types .ar-investment-types-lists { --dl-text-align: center; --dl-column-gap: 1rem; --dt-margin-inline: auto; --dt-padding-inline: 1.125rem; display: grid; row-gap: 2.5rem; } @media (width >= 768px) { #ar-investments .ar-investment-types .ar-investment-types-lists { grid-template-columns: 1fr 1fr 1fr; -moz-column-gap: var(--dl-column-gap); column-gap: var(--dl-column-gap); } } @media (width >= 960px) { #ar-investments .ar-investment-types .ar-investment-types-lists { --dl-text-align: left; --dl-column-gap: 0.5rem; } } #ar-investments .ar-investment-types .ar-investment-types-lists dl { color: var(--dark-gray); font-size: 1.25rem; line-height: 1; letter-spacing: -1%; text-align: var(--dl-text-align); } #ar-investments .ar-investment-types .ar-investment-types-lists dl:nth-child(1) dt { background-color: var(--twilight); } #ar-investments .ar-investment-types .ar-investment-types-lists dl:nth-child(2) dt { background-color: var(--lake); } #ar-investments .ar-investment-types .ar-investment-types-lists dl:nth-child(3) dt { background-color: var(--salmon); } #ar-investments .ar-investment-types .ar-investment-types-lists dl dt { margin-inline: var(--dt-margin-inline); border-radius: var(--border-radius); padding-inline: var(--dt-padding-inline); padding-block: 0.8125rem; width: -moz-fit-content; width: fit-content; color: white; font-weight: 700; } @media (width >= 960px) { #ar-investments .ar-investment-types .ar-investment-types-lists dl dt { --dt-margin-inline: 0 auto; } } #ar-investments .ar-investment-types .ar-investment-types-lists dl dd { margin-block-start: 0.875rem; } @media (width >= 960px) { #ar-investments .ar-investment-types .ar-investment-types-lists dl dd { padding-inline-start: var(--dt-padding-inline); } } /* ========================================================= ANNUAL REPORT: BENEFACTOR SECTION ========================================================= */ #ar-benefactor { background-color: rgba(94, 94, 95, 0.1); padding-block: 7.5rem; } @media (width >= 768px) { #ar-benefactor { background-image: url("/assets/images/bg-map-annual-report-benefactor.svg"); background-position: left bottom; background-repeat: no-repeat; } } #ar-benefactor .ar-text-narrow-image-block { --block-background-color: white; margin-block: 0; } /* ========================================================= ANNUAL REPORT: MISSION SECTION ========================================================= */ #ar-mission .ar-text-narrow-image-block { --block-background-color: rgba(80, 201, 181, 0.1); --block-border-styling: 8px solid var(--lake); --heading-color: var(--lake); } /* ========================================================= ANNUAL REPORT: FOOTER ========================================================= */ footer { margin-block-start: 7.5rem; padding-block: 2.25rem 3.375rem; } @media (width < 960px) { footer { --flow-space: 2.625rem; } } @media (width >= 960px) { footer { display: flex; row-gap: 3.5625rem; flex-wrap: wrap; justify-content: space-between; align-items: center; } } footer > a { display: block; font-weight: 700; font-size: 1.375rem; line-height: 1.4; letter-spacing: -1%; text-align: center; } footer ul { display: flex; -moz-column-gap: 2.25rem; column-gap: 2.25rem; justify-content: center; align-items: center; } footer ul li:nth-child(1) { width: 19px; } footer ul li:nth-child(2) { width: 36px; } footer ul li:nth-child(3) { width: 33px; } footer ul li:nth-child(4) { width: 34px; } footer ul li svg { fill: var(--salmon); } footer > p { color: rgba(0, 0, 0, 0.3); font-weight: 400; font-size: 0.75rem; line-height: 1; letter-spacing: -1%; text-align: center; } @media (width >= 960px) { footer > p { flex-basis: 100%; } } /* ========================================================= ANNUAL REPORTS: ANIMATIONS 1. Header animations 9. Keyframes ========================================================= */ *[data-aos] { will-change: opacity; } *[data-aos]:not(.aos-animate) { opacity: 0; } /* MARK: 1. Header animations ---------------- */ header.ar-header { animation: colorChange 0.75s ease-in-out 1s forwards; } header.ar-header .title svg[data-aos] { will-change: opacity, transform; } header.ar-header .title svg[data-aos]:not(.aos-animate) { transform: translateX(-60px); opacity: 0; } header.ar-header .image picture img { animation: imageFadeIn 1.5s ease-in-out forwards; } #ar-grant-highlights .ar-image-block figure:nth-child(1):not(.aos-animate) { transform: translateX(-100px); opacity: 0; } #ar-grant-highlights .ar-image-block figure:nth-child(2):not(.aos-animate) { transform: translateX(100px); opacity: 0; } /* MARK: 9. Keyframes ---------------- */ @keyframes colorChange { to { background-color: var(--lake); } } @keyframes imageFadeIn { from { opacity: 0; } to { opacity: 1; } } html { overflow-y: auto; /* or overflow-y: auto */ scroll-behavior: smooth !important; scroll-padding-top: 80px !important; } body { position: relative; overflow-x: hidden !important; } a.to-top { position: fixed; right: 0; bottom: 0; z-index: calc(var(--z-navigation) + 100); border-radius: var(--box-radius) 0 0 0; background-color: var(--lake); padding: 3px 7px 7px 7px; } /*# sourceMappingURL=annual-reports.css.map*/