/**
* DWN main theme styles
*/
/* --------------- Custom properties --------------- */
:root {
/* Centered container size */
--standard-width: 1024px;
--narrow-width: 924px;
--container-width: var(--standard-width);
/* Edge padding */
--container-padding-inline: max(1.5rem, (100vw - var(--drupal-displace-offset-left, 0px) - var(--container-width)) / 2);
/* Stretch full-width block to edges */
--container-margin-inline-stretch: calc(-1 * max(1.5rem, (100vw - var(--drupal-displace-offset-left, 0px) - var(--container-width)) / 2));
/* Weights */
--font-weight-text: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-light: 300;
--font-weight-heading: 400;
--font-weight-heading-bold: 500;
--font-weight-link: 400;
--font-weight-label: 600;
--font-weight-button: 600;
/* Leading */
--font-lineheight-tallest: 1.875;
--font-lineheight-taller: 1.75;
--font-lineheight-normal: 1.625;
--font-lineheight-shorter: 1.375;
--font-lineheight-shortest: 1.1875;
--font-lineheight-tiny: 1;
/* Absolute font sizes (12-26px) */
--font-size-minus-4: calc(1rem - 4px);
--font-size-minus-3: calc(1rem - 3px);
--font-size-minus-2: calc(1rem - 2px);
--font-size-minus-1: calc(1rem - 1px);
--font-size-base: 1rem; /* 16px */
--font-size-plus-1: calc(1rem + 1px);
--font-size-plus-2: calc(1rem + 2px);
--font-size-plus-3: calc(1rem + 3px);
--font-size-plus-4: calc(1rem + 4px);
--font-size-plus-5: calc(1rem + 5px);
--font-size-plus-6: calc(1rem + 6px);
--font-size-plus-7: calc(1rem + 7px);
--font-size-plus-8: calc(1rem + 8px);
--font-size-plus-9: calc(1rem + 9px);
--font-size-plus-10: calc(1rem + 10px);
/* Relative font sizes */
--font-size-smaller-3: calc((1em - 3px) / 1em);
--font-size-smaller-2: calc((1em - 2px) / 1em);
--font-size-smaller: calc((1em - 1px) / 1em);
--font-size-bigger: calc((1em + 1px) / 1em);
--font-size-bigger-2: calc((1em + 2px) / 1em);
--font-size-bigger-3: calc((1em + 3px) / 1em);
/* Fonts */
--font-family-text: "Open Sans", sans-serif;
--font-lineheight-text: var(--font-lineheight-normal);
--font-size-content: var(--font-size-base);
--font-text: var(--font-weight-text) var(--font-size-content)/var(--font-lineheight-text) var(--font-family-text);
--font-family-heading: Oswald, "Arial Narrow", sans-serif;
--font-lineheight-heading: var(--font-lineheight-shortest);
--font-heading: var(--font-weight-heading) var(--font-size-content)/var(--font-lineheight-heading) var(--font-family-heading);
--font-family-button: Oswald, "Arial Narrow", sans-serif;
--font-size-button: 1em;
/* Brand colors */
--color-blue: hsl(192 100% 30%); /* #007a99 */
--color-blue-dark: hsl(229 37% 21%); /* #222949 */
--color-orange-light: hsl(20 98% 53%); /* Over dark backgrounds */
--color-orange: hsl(20 98% 50%);
--color-orange-dark: hsl(20 98% 41%);
/* Grayscale palette */
--white: white;
--gray-1: hsl(52 6% 95%);
--gray-2: hsl(52 6% 86%);
--gray-3: hsl(52 6% 79%);
--gray-4: hsl(52 6% 70%);
--gray-5: hsl(52 6% 60%);
--gray-6: hsl(52 6% 50%);
--gray-7: hsl(52 6% 42%); /* #6b6b6b AA text */
--gray-8: hsl(52 6% 33%);
--gray-9: hsl(52 6% 25%); /* #404040 AAA text */
--gray-10: hsl(52 6% 16%);
--black: hsl(52 6% 7%);
/* Element colors */
--color-primary: var(--color-blue);
--color-primary-dark: var(--color-blue-dark);
--color-secondary: var(--color-orange);
--color-secondary-light: var(--color-orange-light);
--color-secondary-dark: var(--color-orange-dark);
--color-submenu: #0a6a8c;
--color-highlight: var(--color-orange);
--color-text-bright: var(--gray-2); /* For dark backgrounds */
--color-text-brighter: var(--gray-1);
--color-text-brightest: var(--white);
--color-button-background: var(--color-secondary);
--color-button-background-hover: var(--color-secondary-dark);
--color-button-text: var(--color-text-brightest);
--color-button-text-hover: var(--color-text-brightest);
--color-boxes: var(--gray-1);
/* Light mode-only colors */
--color-text: var(--gray-9);
--color-text-light: var(--gray-7);
--color-text-dark: var(--gray-10);
--color-heading: var(--gray-10);
--color-link: var(--color-blue);
--color-link-visited: hsl(192 72% 30%);
--color-link-hover: var(--color-blue-dark);
--color-link-underline: var(--color-link);
--color-page-background: var(--white);
--color-background: var(--color-page-background);
--color-alt-background: var(--gray-1); /* Alternating background */
--color-light-background: var(--white); /* Cards */
--color-dark-background: var(--gray-3);
--color-borders: var(--gray-3);
--color-hr: var(--gray-3);
--color-hr-light: var(--gray-5);
--color-field-background: var(--color-background);
--color-field-border: var(--gray-6);
--color-unpublished-background: #fff4f4;
--color-unpublished-background-dark: #f8d7da;
--color-unpublished-text: #721c24;
--color-mark: #feffc8;
accent-color: var(--color-primary);
/* SVG mask icons */
--icon-bullet: url("data:image/svg+xml,%3Csvg width='6' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='3' fill='hsl(192 100% 30%)'/%3E%3C/svg%3E");
--icon-bullet-white: url("data:image/svg+xml,%3Csvg width='6' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50%' cy='50%' r='3' fill='white'/%3E%3C/svg%3E");
--icon-right-chevron: url("data:image/svg+xml,%3Csvg height='11' viewBox='0 0 7 11' width='7' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='black' stroke-linecap='round' stroke-linejoin='round' transform='translate(1 1)'%3E%3Cpath d='m.25.25 4.5 4.5'/%3E%3Cpath d='m.25 5 4.5 4.5' transform='matrix(-1 0 0 1 5 0)'/%3E%3C/g%3E%3C/svg%3E");
--icon-plus: url("data:image/svg+xml,%3Csvg width='18' height='17' viewBox='0 0 18 17' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16.05 8h-14.1'/%3E%3Cpath d='m9 1.1v14.1'/%3E%3C/svg%3E");
--icon-minus: url("data:image/svg+xml,%3Csvg width='18' height='3' viewBox='0 0 18 3' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16.05 1.25h-14.1'/%3E%3C/svg%3E");
--icon-down-chevron: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' xmlns='http://www.w3.org/2000/svg' fill='white' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 5 6'/%3E%3Cpath d='m6 7 6-6'/%3E%3C/svg%3E");
--icon-updates-below: url("data:image/svg+xml,%3Csvg width='14' height='16' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m128 0c13.3 0 24 10.7 24 24v40h144v-40c0-13.3 10.7-24 24-24s24 10.7 24 24v40h40c35.3 0 64 28.7 64 64v16 48 256c0 35.3-28.7 64-64 64h-320c-35.3 0-64-28.7-64-64v-256-48-16c0-35.3 28.7-64 64-64h40v-40c0-13.3 10.7-24 24-24zm272 192h-352v256c0 8.8 7.2 16 16 16h320c8.8 0 16-7.2 16-16zm-152 56v102.1l39-39c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-80 80c-9.4 9.4-24.6 9.4-33.9 0l-80-80c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l39 39v-102.1c0-13.3 10.7-24 24-24s24 10.7 24 24z'/%3E%3C/svg%3E");
/* Resources */
--icon-reports: url('data:image/svg+xml,');
--icon-analysis: url('data:image/svg+xml,');
--icon-signon: url('data:image/svg+xml,');
/* Link list icons (Bootstrap 1.11.0) */
--icon-email: url('data:image/svg+xml,');
--icon-phone: url('data:image/svg+xml,');
/* File icons (Bootstrap 1.11.0) */
--icon-file: url('data:image/svg+xml,');
--icon-file-pdf: url('data:image/svg+xml,');
--icon-file-text: url('data:image/svg+xml,');
--icon-file-document: url('data:image/svg+xml,');
--icon-file-image: url('data:image/svg+xml,');
--icon-file-video: url('data:image/svg+xml,');
--icon-file-spreadsheet: url('data:image/svg+xml,');
--icon-file-slide: url('data:image/svg+xml,');
--icon-file-chart: url('data:image/svg+xml,');
--icon-file-zip: url('data:image/svg+xml,');
}
/* Generic fade-in and fade-out animations */
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeout {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* --------------- Formatting --------------- */
html {
font-size: 1em; /* 16px base */
line-height: var(--font-lineheight-text);
font-family: var(--font-family-text);
block-size: 100%;
/* Prevent mobile text size adjust after orientation change */
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
body {
min-block-size: 100%;
margin: 0;
padding: 0;
background-color: var(--color-background);
overflow-x: hidden;
overflow-y: auto;
color: var(--color-text);
font-family: inherit;
line-height: inherit;
}
[hidden] {
display: none;
}
:where(p, address, ul, ol, li, dl, dt, dd, td, th) {
line-height: var(--font-lineheight-text);
}
:where(sup, sub),
small > :where(sup, sub) {
font-size: var(--font-size-minus-4);
}
:where(b, strong) {
font-weight: var(--font-weight-semibold);
}
/* ----- Links ----- */
:where(a) {
font-weight: var(--font-weight-link);
color: var(--color-link);
text-decoration: underline;
text-decoration-color: var(--color-link-underline);
transition: color 200ms, background-color 200ms, border-color 200ms, opacity 200ms;
}
:where(a):visited {
color: var(--color-link-visited);
}
:where(a):visited:hover,
:where(a):hover {
color: var(--color-link-hover);
text-decoration: underline;
}
:where(a):active,
:where(a):focus {
color: var(--color-link-hover);
}
/* No color links (typically for redundant heading links) */
a.no-color {
color: var(--color-text-dark);
}
/* Force breaks in long links */
:where(main a) {
overflow-wrap: break-word;
word-break: break-word;
}
/* Action button */
a.action {
display: inline-block;
padding: 0.6875em 1.5em;
border: 1px solid var(--color-orange);
text-align: center;
color: var(--color-orange);
background-color: var(--white);
font-weight: var(--font-weight-link);
font-family: var(--font-family-button);
font-size: var(--font-size-button);
line-height: var(--font-lineheight-shorter);
text-transform: uppercase;
text-decoration: none;
}
a.action:hover,
a.action:active {
border-color: var(--color-orange-dark);
background-color: rgb(255 255 255 / 0.9);
color: var(--color-orange-dark);
text-decoration: none;
}
/* Donate button */
a.action-donate {
display: inline-block;
padding: 0.6875em 1.5em;
border: 1px solid var(--color-orange);
background-color: var(--color-orange);
text-align: center;
color: var(--white);
font-weight: var(--font-weight-link);
font-family: var(--font-family-button);
font-size: var(--font-size-button);
line-height: var(--font-lineheight-shorter);
text-transform: uppercase;
text-decoration: none;
}
a.action-donate:hover,
a.action-donate:active {
border-color: var(--color-orange-dark);
background-color: var(--color-orange-dark);
color: var(--white);
text-decoration: none;
}
.big a.action,
.big a.action-donate {
font-size: var(--font-size-plus-5);
border-width: 2px;
}
/* More and back links */
a.more,
a.back {
font-weight: var(--font-weight-medium);
}
a.more::after {
content: "\00a0»";
}
a.back::before {
content: "«\00a0";
}
/* Full width */
a.action.stretch,
a.action-donate.stretch {
display: block;
}
/* YouTube play button */
a.youtube-play {
position: relative;
}
a.youtube-play::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
inline-size: 64px;
block-size: 45px;
margin: -22px 0 0 -32px;
opacity: 0.75;
background: url("../images/icon-youtube-play.webp") no-repeat 50% 50%;
background-size: 64px auto;
pointer-events: none;
}
a.youtube-play:hover::after {
opacity: 1;
}
/* ----- Text ----- */
:where(p) {
margin-block: 0 1.75em;
text-wrap: pretty;
}
:where(address) {
font-style: normal;
margin-block: 0 1.75em;
}
/* Media images */
article.media--type-image:not(:last-child) {
margin-block: 0 1.75em;
}
a:has(> article.media--type-image):not(:last-child) { /* Do not inline-block so max-width can be enforced */
display: block;
max-inline-size: fit-content;
margin-block: 0 1.75em;
}
/* Allow floats */
a:has(> article.media--type-image.align-right),
a:has(> article.media--type-image.align-left) {
display: inline;
}
/* Blockquotes */
blockquote {
display: block;
margin-block: 0 1.75rem;
margin-inline: 1rem;
margin-trim: block-end;
padding: 0;
font-size: inherit;
text-wrap: pretty;
}
blockquote > *:last-child {
margin-block-end: 0; /* Trim bottom margin */
}
blockquote p {
margin-block-end: 0.375rem;
font: 300 168.75%/1.6 var(--font-family-heading);
}
/* Inject quotation marks */
blockquote p:first-child::before {
content: '"';
display: inline-block;
text-indent: -9999px;
overflow: hidden;
vertical-align: top;
inline-size: 33px;
block-size: 35px;
margin-inline-end: 0.3em;
background: url("../images/blockquote-open.webp") no-repeat;
background-size: 33px auto;
}
blockquote p:first-child::after {
content: '"';
display: inline-block;
text-indent: -9999px;
overflow: hidden;
vertical-align: bottom;
inline-size: 33px;
block-size: 35px;
margin-inline-start: 0.3em;
background: url("../images/blockquote-close.webp") no-repeat;
background-size: 33px auto;
}
blockquote p cite,
blockquote p.cite {
font-style: normal;
font-weight: var(--font-weight-text);
font-size: var(--font-size-base);
line-height: var(--font-lineheight-text);
font-family: var(--font-family-text);
}
blockquote p cite {
display: inline-block;
}
/* Small blockquote */
blockquote.small p {
font-size: 1.25rem;
}
blockquote.small p:first-child::before {
inline-size: 18px;
block-size: 24px;
background-size: 18px auto;
}
blockquote.small p:first-child::after {
inline-size: 18px;
block-size: 24px;
background-size: 18px auto;
}
blockquote.small p cite,
blockquote.small p.cite {
font-size: 0.9375rem;
}
/* Old: Page introduction text */
p.intro {
margin-block-end: 1.625rem;
border-block-end: 1px solid var(--color-borders);
padding-block-end: 1.625rem;
font-size: var(--font-size-plus-3);
font-weight: var(--font-weight-semibold);
line-height: var(font-lineheight-shorter);
}
p.intro strong {
font-weight: var(--font-weight-bold);
}
p.big-intro {
margin-block-end: 1.5rem;
border-block-end: 1px solid var(--color-borders);
padding-block-end: 1.5rem;
text-align: center;
font-size: var(--font-size-plus-6);
font-weight: var(--font-weight-bold);
line-height: var(--font-lineheight-shorter);
color: var(--color-orange);
}
p.big-intro.alignleft,
p.big-intro.text-align-left {
text-align: left;
}
p.intro.clean,
p.big-intro.clean { /* No bottom rule */
border-block-end: none;
padding-block-end: 0;
}
/* Sizes */
:where(small, .small) {
font-size: var(--font-size-minus-3);
}
:where(big, .big) {
font-size: var(--font-size-plus-3);
}
/* Highlighted mark */
:is(mark, .mark) {
background-color: var(--color-mark);
padding-block: 0.15em;
padding-inline: 0.4em;
color: var(--color-text);
border-radius: 0.1em;
}
/* Highlighted text */
.highlight,
a.highlight {
color: var(--color-highlight);
}
/* Dates, times, and episode numbers */
:is(.tag) {
inline-size: fit-content;
margin-block-end: 0.625rem;
font-weight: var(--font-weight-semibold);
line-height: var(--font-lineheight-shortest);
color: var(--color-tag, var(--color-primary));
text-transform: uppercase;
}
time {
display: inline-block;
}
:is(.tag) a {
color: var(--color-tag, var(--color-primary));
}
:is(.tag) a:hover,
a:hover :is(.tag, time) {
color: var(--color-tag-hover, var(--color-link-hover));
}
/* Legacy alignment (from Drupal 7 site) */
.alignleft {
text-align: left;
}
.aligncenter,
.rtecenter {
text-align: center;
}
.alignright {
text-align: right;
}
.alignjustify {
text-align: justify;
}
/* ----- Images ----- */
:where(img) {
display: block; /* Block by default */
max-inline-size: 100%;
block-size: auto;
}
:where(a img) {
border: none;
}
/* Resized media (don't break out of box) */
article.media-embed-resized {
max-inline-size: 100% !important;
}
/* Centered images */
.text-align-center img {
margin-inline: auto;
}
.align-center figcaption {
text-align: center;
}
img.align-center {
margin-block-end: 1.75em; /* CKEditor places outside of paragraph */
}
a:has(> .align-center) {
margin-inline: auto;
}
/* Inline images */
img.inline {
display: inline-block;
}
figure {
margin: 0;
}
/* Photos with captions */
figure.image {
margin: 0 0 1.675rem;
max-inline-size: max-content;
}
figure.image > p {
margin-block: 0;
}
/* Captions */
figcaption {
caption-side: bottom;
margin-block: 0.5rem;
margin-inline: 0;
color: var(--color-text-light);
font-size: var(--font-size-minus-2);
line-height: var(--font-lineheight-shortest);
}
/* Floating images */
.align-left,
.floatleft {
clear: left;
float: left;
margin-block: 0 1.5rem;
margin-inline: 0 1.5rem;
}
.align-right,
.floatright {
clear: right;
float: right;
margin-block: 0 1.5rem;
margin-inline: 1.5rem 0;
}
img.align-left,
img.align-right {
max-inline-size: calc((100% - clamp(2rem, 4.75vw, 3rem)) / 2);
}
@media screen and (max-width: 767px) {
img.align-left,
img.align-right {
max-inline-size: calc((100% - clamp(2rem, 4.75vw, 3rem)) / 1.75);
}
}
@media screen and (max-width: 420px) {
img.align-left,
img.align-right {
inline-size: 100%;
max-inline-size: none;
}
/* Float clear following element */
img.align-left + *,
img.align-right + *,
p:has(img.align-left) + *,
p:has(img.align-right) + * {
clear: both;
}
}
.featured-image {
inline-size: 100%;
}
/* Fade/blend into page edge (when in columns) */
@media screen and (min-width: 480px) {
/* Image will stretch to the left/right edge of the browser */
.layout-columns .fade-edges {
block-size: 100%;
}
.layout-columns .fade-edges .image-wrapper {
position: relative;
display: block;
block-size: 100%;
margin-inline-end: var(--container-margin-inline-stretch, 0px);
}
.layout-columns .fade-edges .image-wrapper::after {
content: "";
position: absolute;
display: block;
inset: 0;
block-size: 100%;
inline-size: 100%;
background: linear-gradient(90deg, transparent 50%, var(--color-background) 95%);
pointer-events: none;
}
.layout-columns .block-inline-blockimage.fade-edges .image-wrapper img,
.layout-columns .fade-edges img {
/* Stretch to fill space */
display: block;
object-fit: cover;
object-position: 20% 40%;
inline-size: 100%;
margin-inline: 0;
}
/* Left edge */
.layout-columns > div:first-child figure figcaption {
text-align: right; /* Right-align caption */
}
.layout-columns > div:first-child:has(.fade-edges) .fade-edges .image-wrapper {
margin-inline-start: var(--container-margin-inline-stretch, 0px);
margin-inline-end: 0;
}
.layout-columns > div:first-child:has(.fade-edges) .fade-edges .image-wrapper::after {
background: linear-gradient(90deg, var(--color-background) 5%, transparent 50%);
}
}
/* Contain image height (when in columns) */
@media screen and (min-width: 480px) {
/* Image will stretch to the size of the column */
.layout-columns .match-height {
block-size: 100%;
}
.layout-columns .match-height .image-wrapper {
position: relative;
display: block;
block-size: 100%;
}
.layout-columns .block-inline-blockimage.match-height .image-wrapper img,
.layout-columns .match-height img {
/* Stretch to fill space */
position: absolute; /* Limit to height of neighbor column */
display: block;
object-fit: cover;
object-position: 20% 40%;
block-size: 100%;
inline-size: 100%;
margin-inline: 0;
}
/* TODO: Account for minimal spacing between adjacent color sections */
/* Standard paragraph bottom margin */
/*
section:is(.color-blue:has(+ section.color-blue), .color-blue-dark:has(+ section.color-blue-dark), .color-orange:has(+ section.color-orange), .color-orange-dark:has(+ section.color-orange-dark), .color-gray:has(+ section.color-gray), .color-gray:has(+ section.color-gradient), .color-gradient:has(+ section.color-clear), .color-clear:has(+ section.color-clear)) .layout-columns > div:has(.match-height) {
padding-block-end: 1.75rem;
}
*/
}
/* Inline document icons */
a:where([href$=".pdf"], [href$=".doc"], [href$=".docx"], [href$=".xls"], [href$=".xlsx"], [href$=".ppt"], [href$=".pptx"], [href$=".txt"], [href$=".rtf"]):not(.no-icon, :has(img)) {
&::after {
content: "";
display: inline-block;
inline-size: 1em;
block-size: 1em;
margin-inline: 0.2em 0.1em;
vertical-align: baseline;
transform: translateY(0.2em);
background-color: var(--color-link);
-webkit-print-color-adjust: exact; /* Print background images */
color-adjust: exact;
transition: background-color 200ms;
}
&:hover::after {
background-color: var(--color-link-hover);
}
&:is([href$=".pdf"])::after {
-webkit-mask: var(--icon-file-pdf) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-pdf) no-repeat 50% 50% / 100% auto;
}
&:is([href$=".doc"], [href$=".docx"])::after {
-webkit-mask: var(--icon-file-document) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-document) no-repeat 50% 50% / 100% auto;
}
&:is([href$=".xls"], [href$=".xlsx"])::after {
-webkit-mask: var(--icon-file-spreadsheet) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-spreadsheet) no-repeat 50% 50% / 100% auto;
}
&:is([href$=".ppt"], [href$=".pptx"])::after {
-webkit-mask: var(--icon-file-slide) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-slide) no-repeat 50% 50% / 100% auto;
}
&:is([href$=".txt"], [href$=".rtf"])::after {
-webkit-mask: var(--icon-file-text) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-text) no-repeat 50% 50% / 100% auto;
}
}
/* No icons within heading links */
.region :is(h2, h3, h4, h5, h6) a:is([href$=".pdf"], [href$=".doc"], [href$=".docx"], [href$=".xls"], [href$=".xlsx"], [href$=".ppt"], [href$=".pptx"])::after {
content: none;
display: inline-block;
inline-size: auto;
block-size: auto;
margin-inline: 0;
transform: none;
}
/* ----- Separators ----- */
:where(hr) {
background-color: var(--color-hr);
block-size: 1px;
margin-block: 1.75rem;
padding: 0;
border-width: 0;
overflow: hidden;
}
/* Webform override */
hr.webform-horizontal-rule {
margin-block: 1.75rem;
}
/* ----- Headings ----- */
:where(h1, h2, h3) {
margin-block: 0 0.75em;
padding: 0;
color: var(--color-heading);
font: var(--font-heading);
text-wrap: pretty;
}
/* Title field heading (Press Release, Analysis, Organizational Letters, Member Resource) */
h2 span.field--name-title {
display: block;
}
:where(h1, h2, h3) a {
text-decoration: none;
}
:where(h1, h2, h3) :is(strong, b) {
font-weight: var(--font-weight-heading-bold);
}
:where(h4, h5, h6) {
margin-block: 0 0.95em;
padding: 0;
color: var(--color-heading);
font-family: var(--font-family-text);
font-weight: var(--font-weight-semibold);
line-height: var(--font-lineheight-heading);
text-wrap: pretty;
}
:where(h1, h2, h3, h4, h5, h6) a {
font-weight: inherit;
}
/* 40–48px */
:where(h1, h2.big) {
margin-block-end: 0.25em;
}
h2.big, h2 big, h2 .big, :where(h1) {
font-size: clamp(2.5rem, 8vw, 3rem);
}
/* 32–36px */
h3.big, h3 big, h3 .big, :where(h2) {
margin-block-end: 0.75em;
font-size: clamp(2rem, 8vw, 2.625rem);
}
/* 25px */
h2.small, h2 small, h2 .small, h4.big, h4 big, h4 .big, :where(h3) {
font-size: var(--font-size-plus-9);
}
/* 20px */
h3.small, h3 small, h3 .small, h5.big, h5 big, h5 .big, :where(h4) {
font-size: var(--font-size-plus-4);
}
/* 18px */
h4.small, h4 small, h4 .small, h6.big, h6 big, h6 .big, :where(h5) {
font-size: var(--font-size-plus-2);
margin-block-end: 0.75em;
}
/* 16px */
h5.small, :where(h6) {
margin-block-end: 0.75em;
}
h5.small, h5 small, h5 .small, :where(h6) {
font-size: var(--font-size-base);
}
/* ---------- Lists ---------- */
:where(main ul) {
margin-block: 0 1.75em;
margin-inline: 0;
margin-trim: block-end;
padding-block: 0;
padding-inline: 1.5rem 0;
list-style-image: var(--icon-bullet);
}
:where(main ul > li) {
margin-block: 0 1em;
margin-inline: 0;
padding-block: 0;
padding-inline: 0.5rem 0;
}
/* Complex design */
:where(ul.complex) {
padding-block: 0.25rem;
padding-inline-start: 4rem;
border-inline-start: 2px solid var(--color-secondary);
}
:where(.layout-columns ul.complex) {
padding-inline-start: 3rem;
}
:where(main li > ol, main li > ul) {
margin-block: 0.8em; /* Nested lists */
}
/* Inline list */
ul.inline {
display: flex;
flex-flow: row wrap;
gap: 1.25rem;
list-style: none;
}
ul.inline > li {
margin: 0;
padding: 0;
list-style: none;
}
/* Ordered lists */
:where(main ol) {
counter-reset: list-counter;
margin-block: 0 1.75rem;
margin-inline: 0;
margin-trim: block-end;
padding-block: 0;
padding-inline: 2rem 0;
}
:where(main ol > li) {
counter-increment: list-counter;
margin-block: 0 1em;
margin-inline: 0;
padding: 0;
}
:where(main ol > li)::marker {
content: counter(list-counter) " ";
color: var(--color-primary);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-plus-4);
line-height: 1;
}
/* Complex design */
:where(ol.complex) {
padding-block: 0.25rem;
padding-inline-start: 4.75rem;
border-inline-start: 2px solid var(--color-secondary);
}
:where(.layout-columns ol.complex) {
padding-inline-start: 3.5rem;
}
:where(ol.complex > li)::marker {
font-size: var(--font-size-plus-3);
}
/* Definition lists */
:where(dl) {
margin-block: 0 1.75rem;
padding-block: 0;
}
:where(dl > dt) {
display: block;
margin-block: 1em 0;
margin-inline: 0;
padding: 0;
font-weight: var(--font-weight-semibold);
}
:where(dl > dt:first-child) {
margin-block-start: 0;
}
:where(dl > dd) {
margin-block: 0;
margin-inline: 0;
margin-trim: block-end;
padding: 0;
}
:where(dl > dd) > *:last-child {
margin-block-end: 0; /* Trim bottom margin */
}
/* Inline data grid (> mobile) */
dl.grid p:last-child {
margin-block-end: 0;
}
@media (min-width: 480px) {
dl.grid {
display: inline-grid;
grid-template-columns: auto auto;
gap: 1em 1.2em;
}
dl.grid > :is(dt, dd) {
margin: 0;
}
}
/* Impact list */
ul.impact {
padding-inline: 0;
list-style: none;
}
ul.impact > li {
margin-block: 0 2rem;
padding: 0;
line-height: var(--font-lineheight-shorter);
font-size: var(--font-size-plus-3);
}
ul.impact strong {
display: block;
font-family: var(--font-family-heading);
font-size: clamp(3.125rem, 6vw, 4rem);
font-weight: var(--font-weight-heading);
color: var(--color-orange);
overflow-wrap: break-word;
}
ul.impact strong + br {
display: none; /* Remove extra line breaks */
}
/* ----- iframes ----- */
iframe {
display: block;
aspect-ratio: var(--aspect-ratio, auto);
inline-size: 100%;
max-inline-size: min(100%, var(--max-inline-size, calc(100vw - var(--container-padding-inline) * 2)));
block-size: auto;
margin-block-end: 1.75rem;
}
/* Video player */
main iframe:is(.video-player, [src*="youtube.com/"], [src*="youtu.be/"], [src*="vimeo.com/"], [src*="facebook.com/"], [src*="fb.watch/"]) {
--aspect-ratio: 16 / 9;
inline-size: var(--max-inline-size, var(--narrow-width));
margin-inline: auto;
}
/* Facebook Watch portrait videos */
main iframe[width^="380"][height^="476"] {
--aspect-ratio: 380 / 476;
display: block;
inline-size: 380px;
max-inline-size: var(--max-inline-size, 100%);
block-size: auto;
margin-inline: auto;
}
/* Video wrapper box */
.video-wrapper {
position: relative;
inline-size: fit-content;
margin-inline: auto;
margin-block-end: 2.5rem;
}
.video-wrapper > iframe {
position: relative;
z-index: 1;
border: 4px solid rgb(0 0 0 / 0.1);
}
/* ----- Data tables ----- */
:where(table) {
inline-size: 100%;
max-inline-size: 100% !important;
margin-block: 0 1.75em;
padding: 0;
border: none;
border-spacing: 0;
border-collapse: collapse;
}
:where(thead, tbody, tr, th, td) {
border: none;
}
:where(table caption) {
margin-block: 0 0.5em;
padding: 0;
color: var(--color-text-dark);
text-align: left;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-plus-3);
}
:where(td, th) {
padding-block: 0.625rem;
padding-inline: 0.75rem;
border: 1px solid var(--color-borders);
vertical-align: top;
text-align: left;
}
:where(thead th) {
background-color: var(--color-alt-background);
font-weight: var(--font-weight-semibold);
}
/* Reduce bottom margins */
:where(td, th) > *:last-child {
margin-block-end: 0;
}
/* --------------- Page layout --------------- */
/* Main container padding */
:where(section, aside:not(.admin-toolbar), .region-top-bar, .region-header-mobile, .region-header, .region-main-menu, .region-title-banner, .region-pre-content, .region-highlighted, footer > .region) {
display: flow-root; /* Clearfix */
padding-inline: var(--container-padding-inline);
}
/* Nested sections */
:where(section section, section aside) {
padding-inline: unset;
}
/* Narrow single-column section (unused) */
:where(section.narrow, .narrow section) {
--container-width: var(--narrow-width);
}
/* Contain Drupal content block width */
.block-system-main-block > form,
.block-system-main-block > h2,
.block-system-main-block > nav,
.block-system-main-block > table,
.block-system-main-block > div:not(.node, .layout-builder),
.block-system-main-block > .views-element-container,
.block-system-main-block:not(:has(div)) {
display: flow-root; /* Clearfix */
margin-inline: var(--container-padding-inline);
}
/* Space away from footer */
.block-system-main-block > .views-element-container:last-child,
.block-system-main-block > form:last-child,
.block-system-main-block:not(:has(div)):last-child {
margin-block-end: 3.5rem;
}
@media (max-width: 460px) {
/* Mobile: Reduce edge padding */
:root {
--container-padding-inline: 1.5rem;
}
}
/* --------------- Main header --------------- */
/* TODO: Allow for variable header bar height */
:root {
--header-height: 60px;
--header-block-padding: 2.75rem;
}
/* Scroll hash targets */
*:target {
scroll-margin-top: calc(var(--drupal-displace-offset-top, 0px) + 1rem);
}
@media screen and (min-width: 1024px) {
.header-wrapper {
position: sticky;
/* Just navigation is sticky; push header bar off screen */
top: calc(-1 * var(--header-height) - var(--header-block-padding) + var(--drupal-displace-offset-top, 0px));
z-index: 80;
}
/* Scroll hash targets */
*:target {
scroll-margin-top: calc(var(--header-height) + var(--header-block-padding) + var(--drupal-displace-offset-top, 0px));
}
}
.region-header {
min-block-size: var(--header-height);
padding-block: 1.5rem 1.25rem;
padding-inline: var(--container-padding-inline); /* Contain width */
background-color: var(--color-background);
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
gap: 1rem 1.75rem;
}
/* Donate link */
.region-header p {
margin-block: 0;
}
.region-header a {
text-decoration: none;
}
/* ----- Logo ----- */
.region-header #block-dwn-site-branding {
flex: 1 0 auto;
}
a.site-logo {
display: block;
inline-size: fit-content;
cursor: pointer;
}
/* ----- Auxiliary menu ----- */
.region-header nav {
flex: 0 1 auto;
}
.region-header ul.menu {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: end;
gap: 0.125rem 0.625rem;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--font-size-minus-1);
}
@media (max-width: 950px) {
.region-header ul.menu {
font-size: var(--font-size-minus-2);
}
}
.region-header ul.menu > li {
margin: 0;
padding: 0;
white-space: nowrap;
line-height: var(--font-lineheight-shorter);
}
.region-header ul.menu > li a {
padding-block: 0.5rem; /* Larger touch target */
}
.region-header ul.menu > li a:hover,
.region-header ul.menu > li a:active {
text-decoration: none;
}
/* [Old] Member Login icon */
#block-dwn-dwn-menu-menu-auxiliary a[href="/account"] {
display: flex;
flex-flow: row nowrap;
gap: 0.45em;
align-items: center;
}
#block-dwn-dwn-menu-menu-auxiliary a[href="/account"]::before {
display: block;
content: url('data:image/svg+xml,');
inline-size: 0.9em;
block-size: 0.9lh;
line-height: 1;
transition: filter 200ms;
}
#block-dwn-dwn-menu-menu-auxiliary a[href="/account"]:hover::before {
filter: hue-rotate(48.2deg) saturate(0.5) brightness(0.5); /* Match hover color */
}
/* Member Login block */
:is(#block-dwn-header-login, #block-dwn-header-login-es) p {
margin-block: 0;
}
:is(#block-dwn-header-login, #block-dwn-header-login-es) a {
white-space: nowrap;
}
:is(#block-dwn-header-login, #block-dwn-header-login-es) a[href="/membership/login"] {
display: flex;
flex-flow: row nowrap;
gap: 0.45em;
align-items: center;
}
:is(#block-dwn-header-login, #block-dwn-header-login-es) a[href="/membership/login"]::before {
display: block;
content: url('data:image/svg+xml,');
inline-size: 0.9em;
block-size: 0.9lh;
line-height: 1;
transition: filter 200ms;
}
:is(#block-dwn-header-login, #block-dwn-header-login-es) a[href="/membership/login"]:hover::before {
filter: hue-rotate(48.2deg) saturate(0.5) brightness(0.5); /* Match hover color */
}
/* Member Account/Logout block */
#block-dwn-header-account p {
margin-block: 0;
font-size: var(--font-size-minus-2);
}
#block-dwn-header-account a {
white-space: nowrap;
}
/* ----- Search form ----- */
.region-header search {
flex: 0 1 auto;
}
.region-header search form {
display: grid;
align-items: center;
border: 2px solid var(--gray-3);
transition: border 200ms;
}
.region-header search form:hover {
border-color: var(--gray-5);
}
.region-header search form .form-item,
.region-header search form .form-actions {
grid-row: 1;
grid-column: 1;
margin-block: 0;
}
.region-header search form .form-search {
-webkit-appearance: textfield;
appearance: textfield;
inline-size: clamp(200px, 30vw, 350px);
margin: 0;
padding-block: 0.625rem;
padding-inline: 0.75rem;
border: none;
color: var(--gray-8);
font-size: var(--font-size-base); /* Prevent iOS zooming */
}
.region-header search form .form-search::-webkit-search-cancel-button {
display: none;
}
/* Placeholder */
.region-header search form .form-text::-webkit-input-placeholder,
.region-header search form .form-text::-moz-placeholder,
.region-header search form .form-text::placeholder-shown {
color: var(--gray-5);
}
.region-header search form .form-actions {
justify-self: end;
padding-inline: 0.5rem;
}
.region-header search form .form-submit {
display: block;
inline-size: 1.25rem;
block-size: 1.25rem;
margin: 0;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
.region-header search form .form-submit svg {
inline-size: 100%;
block-size: 100%;
fill: var(--gray-3);
transition: fill 200ms;
}
.region-header search form:hover .form-submit svg {
fill: var(--gray-5);
}
/* ----- Main menu ----- */
.region-main-menu {
position: sticky;
top: 0;
z-index: 80;
background-color: var(--color-blue-dark);
color: var(--white);
}
.region-main-menu a {
text-decoration: none;
}
.header-menu .menu--main > ul.menu {
display: flex;
flex-flow: row nowrap;
margin: 0;
padding: 0;
list-style: none;
}
.header-menu .menu--main > ul.menu > li {
flex-grow: 1;
position: relative;
vertical-align: middle;
margin: 0;
padding: 0;
border: none;
line-height: var(--font-lineheight-shorter);
}
.header-menu .menu--main > ul.menu > li.active-trail,
.header-menu .menu--main > ul.menu > li > a.is-active {
background-color: var(--color-blue);
}
.header-menu .menu--main > ul.menu > li > a {
display: block;
margin-inline-end: -1px;
padding-block: 1.125rem;
border-inline: 1px solid rgb(255 255 255 / 0.2);
text-align: center;
font-weight: var(--font-weight-text);
font-size: var(--font-size-plus-4);
line-height: var(--font-lineheight-shortest);
font-family: var(--font-family-heading);
color: var(--white);
white-space: nowrap;
text-transform: uppercase;
}
.header-menu .menu--main > ul.menu > li:hover > a,
.header-menu .menu--main > ul.menu > li:focus-within > a {
z-index: 4;
background-color: var(--color-submenu);
color: var(--white);
text-decoration: none;
}
/* Delayed hover menu */
.header-menu .menu--main > ul.menu > li > a[aria-controls] {
--menu-toggle: hover;
}
.header-menu .menu--main > ul.menu > li:not(.active-trail) > a[aria-expanded="true"] {
border-block-end-color: var(--color-primary);
}
/* ----- Nested flyout submenus ----- */
.header-menu .menu--main .submenu {
--megamenu-padding-inline: 2rem;
display: none;
position: absolute;
z-index: 50;
}
.header-menu .menu--main .menu-item:last-child .submenu {
right: 0;
}
.header-menu .menu--main .submenu ul.menu {
inline-size: max-content;
min-inline-size: 12em;
max-inline-size: 380px;
margin: 0;
padding: 0;
border: 1px solid #2e9fbb;
background-color: var(--color-submenu);
box-shadow: 0 2px 8px rgb(0 0 0 / 0.5);
list-style: none;
}
@keyframes subnav-fadein {
from {
display: flex;
opacity: 0;
}
to {
opacity: 1;
}
}
/* Show submenu upon hover */
.header-menu .menu--main > ul.menu > li .submenu:not([hidden]) {
display: block;
animation: 200ms subnav-fadein forwards ease-out;
}
.header-menu .menu--main .submenu li {
margin: 0;
padding: 0;
border: none;
line-height: var(--font-lineheight-shorter);
}
.header-menu .menu--main .submenu li a {
display: block;
padding-block: 0.625rem;
padding-inline: 1.5rem 2.375rem;
border: none;
text-align: left;
font: normal 100%/inherit var(--font-family-text);
color: var(--white);
text-transform: none;
}
.header-menu .menu--main .submenu li a:hover,
.header-menu .menu--main .submenu li a:focus-within,
.header-menu .menu--main .submenu li.active-trail a,
.header-menu .menu--main .submenu li a.active-trail,
.header-menu .menu--main .submenu li a.is-active {
margin-inline-end: 0;
border: none;
background-color: var(--color-blue);
color: var(--white);
text-decoration: none;
}
/* Hide third-level menu */
.header-menu .menu--main .submenu li ul.menu {
display: none;
}
/* ----- Mobile header ----- */
/* Only appears at mobile sizes; main menu converts to slide-down */
.header-mobile {
position: relative;
z-index: 400;
box-shadow: 0 0.1rem 0.3rem rgb(0 0 0 / 0.25);
}
@media screen and (min-width: 1024px) {
.header-mobile {
display: none;
}
}
/* Hide shadow when menu is open */
.header-mobile:has(+ .header-wrapper.menu-open) {
box-shadow: none;
}
.region-header-mobile {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
gap: 1.75rem;
padding-block: 1.5rem 1.25rem;
padding-inline: var(--container-padding-inline); /* Contain width */
background-color: var(--color-background);
}
/* Mobile logo */
.region-header-mobile #block-dwn-mobile-branding {
flex: 0 1 auto;
}
/* Mobile menu toggle hamburger */
#block-dwn-header-hamburger {
align-self: center;
}
#block-dwn-header-hamburger .header-menu-toggle button {
display: grid;
grid-template-areas: "icon";
place-items: center;
border: none;
padding: 0;
background: transparent;
cursor: pointer;
}
#block-dwn-header-hamburger .header-menu-toggle button svg {
grid-area: icon;
transition: fill 200ms, stroke 200ms, opacity 150ms;
fill: var(--color-primary);
stroke: var(--color-primary);
will-change: opacity;
opacity: 1;
}
#block-dwn-header-hamburger .header-menu-toggle button:hover svg {
fill: var(--color-primary-dark);
stroke: var(--color-primary-dark);
}
/* Swap icons */
#block-dwn-header-hamburger .header-menu-toggle button[aria-expanded="true"] .menu-hamburger,
#block-dwn-header-hamburger .header-menu-toggle button:not([aria-expanded="true"]) .menu-close {
opacity: 0;
}
/* Mobile menu (with animation) */
@media screen and (max-width: 1023px) {
/* Mobile menu slide up/down animation */
@keyframes mobile-menu-show {
from {
transform: translateY(-120%);
opacity: 0.5;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes mobile-menu-hide {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-120%);
opacity: 0.75;
}
}
@media screen and (prefers-reduced-motion) {
/* Mobile menu show (fade only) */
@keyframes mobile-menu-show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mobile-menu-hide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
}
/* Cover over for menu animation */
.header-bar::after {
content: "";
position: absolute;
z-index: 10;
inset: 0;
background-color: var(--color-background);
}
#block-dwn-header-logo,
#block-dwn-header-hamburger {
z-index: 15;
}
/* Show and hide animations */
.header-wrapper {
display: none;
position: absolute;
z-index: 6; /* Behind header cover */
inset-block-start: calc(var(--drupal-displace-offset-top, 0px) + var(--header-height) + var(--header-block-padding) - 1px); /* Prevent shadow leak */
inset-inline-start: 0;
inline-size: calc(100% - var(--container-padding-inline) * 2);
padding-block: 0.75rem 2rem;
padding-inline: var(--container-padding-inline);
background-color: var(--color-background);
box-shadow: 0 0.6rem 0.7rem rgb(0 0 0 / 0.2); /* Obvious visual separation */
}
.header-wrapper.menu-open {
/* Slide down */
display: block;
visibility: visible;
animation: 250ms mobile-menu-show forwards ease-out;
}
.header-wrapper.menu-closed {
/* Slide up */
display: block;
visibility: hidden;
animation: 200ms mobile-menu-hide forwards ease-in;
transition: visibility 0s linear 200ms; /* Completely hide after animation */
}
/* Header layout */
.region-header {
padding-block: 0;
margin-block-end: 2.5rem;
}
/* Hide redundant logo */
.region-header .block-system-branding-block {
display: none;
}
/* Login/logout blocks */
.region-header #block-dwn-header-login,
.region-header #block-dwn-header-account {
order: 1;
flex: 1 1 auto;
}
/* Donate */
.region-header #block-dwn-header-donate {
order: 2;
flex: 0 0 auto;
justify-self: end;
}
/* Mobile search */
.region-header search {
order: 0;
flex: 1 0 100%;
margin-block: 0;
}
/* Mobile main menu */
.region-main-menu {
position: relative;
background-color: transparent;
color: var(--color-text);
}
/* Main menu */
.header-menu .menu--main > ul.menu {
block-size: auto;
flex-direction: column;
border-block-start: 1px solid var(--color-primary);
}
.header-menu .menu--main > ul.menu > li {
padding-inline-start: 0;
border-block-end: 1px solid var(--color-primary);
font-size: var(--font-size-plus-5);
}
@media (prefers-color-scheme: dark) {
.header-menu .menu--main > ul.menu {
border-block-start-color: var(--color-primary-light);
}
.header-menu .menu--main > ul.menu > li {
border-block-end-color: var(--color-primary-light);
}
}
.header-menu .menu--main > ul.menu > li > a[aria-controls] {
--menu-toggle: click; /* For toggle script */
}
.header-menu .menu--main > ul.menu > li > a[aria-controls],
.header-menu .menu--main > ul.menu > li.active-trail > a {
display: flex;
flex-flow: row nowrap;
gap: 0 0.75rem; /* Space before icon */
align-items: center;
justify-content: space-between;
block-size: auto;
padding-block: 0.625rem;
padding-inline: 0.75rem;
border-block-end: none;
background: none;
text-align: left;
font-weight: var(--font-weight-normal);
color: var(--color-text);
}
/* Active menu link */
.header-menu .menu--main > ul.menu > li.active-trail > a {
color: var(--color-primary);
}
.header-menu .menu--main > ul.menu > li > a:hover,
.header-menu .menu--main > ul.menu > li.active-trail > a:hover {
border-block-end: none;
color: var(--color-link);
}
/* Plus icon */
.header-menu .menu--main > ul.menu > li > a[aria-controls]::after {
content: "";
display: block;
inline-size: 18px;
block-size: 17px;
background-color: var(--color-primary); /* Use mask to change color in dark mode */
-webkit-mask: var(--icon-plus) no-repeat 50% 50% / 100% auto;
mask: var(--icon-plus) no-repeat 50% 50% / 100% auto;
transition: background-color 200ms;
}
/* Minus icon */
.header-menu .menu--main > ul.menu > li > a[aria-controls][aria-expanded="true"]::after {
-webkit-mask-image: var(--icon-minus);
mask-image: var(--icon-minus);
}
/* Icon hover and dark mode colors */
.header-menu .menu--main > ul.menu > li > a:hover[aria-controls]::after {
background-color: var(--color-link);
}
@media (prefers-color-scheme: dark) {
.header-menu .menu--main > ul.menu > li > a[aria-controls]::after {
background-color: var(--color-primary-light);
}
.header-menu .menu--main > ul.menu > li > a:hover[aria-controls]::after {
background-color: var(--color-link);
}
}
/* Active menu highlight */
.header-menu .menu--main > ul.menu > li.active-trail > a {
color: var(--color-primary);
}
@media (prefers-color-scheme: dark) {
.header-menu .menu--main > ul.menu > li.active-trail > a {
color: var(--color-primary-light);
}
}
.header-menu .menu--main > ul.menu > li.active-trail {
background:
linear-gradient(to right, var(--color-alt-background) 60%, var(--color-background)),
var(--color-alt-background);
}
/* Subnav */
.header-menu .menu--main .submenu,
.header-menu .menu--main .active-trail .submenu {
display: none;
overflow: initial;
position: initial;
inset-block-start: initial;
inset-inline-start: initial;
inline-size: auto;
block-size: auto;
background-color: transparent;
box-shadow: none;
margin-block: 0 1rem;
margin-inline: 0.75rem;
padding: 0;
transition: initial;
transform: initial;
font-size: var(--font-size-base);
}
.header-menu .menu--main > ul.menu > li:not(.active-trail) .submenu:not([hidden]),
.header-menu .menu--main > ul.menu > li .submenu:not([hidden]) {
display: block;
animation: none;
}
.header-menu .menu--main .submenu,
.header-menu .menu--main .active-trail .submenu {
block-size: auto;
flex-direction: column;
gap: 0.375rem;
align-items: initial;
justify-content: initial;
overflow-x: initial;
overflow-y: initial;
overscroll-behavior-x: initial;
scrollbar-width: initial;
margin-block-start: 0.25rem;
}
.header-menu .menu--main .submenu ul.menu {
min-inline-size: auto;
border: none;
background-color: unset;
box-shadow: none;
}
.header-menu .menu--main .submenu > * {
padding-block: 0;
}
.header-menu .menu--main .submenu > *:not(:last-child) {
padding-inline: 0;
border-inline-end: none;
}
.header-menu .menu--main .active-trail .submenu::before,
.header-menu .menu--main .active-trail .submenu::after {
content: none;
}
.header-menu .menu--main .submenu .not-subnav,
.header-menu .menu--main .submenu .not-flyout {
display: block;
}
.header-menu .menu--main .submenu span.not-subnav,
.header-menu .menu--main .submenu span.not-flyout {
display: inline;
}
.header-menu .menu--main .submenu .not-mobile {
display: none;
}
.header-menu .menu--main .active-trail .submenu ul {
display: block;
}
.header-menu .menu--main .submenu li,
.header-menu .menu--main .active-trail .submenu ul > li {
margin-block-end: 0.5rem;
text-align: left;
}
.header-menu .menu--main .active-trail .submenu ul:last-child,
.header-menu .menu--main .active-trail .submenu ul > li:last-child {
margin-block-end: 0; /* Trim bottom margin */
}
.header-menu .menu--main .submenu li a {
padding-block: 0.25rem;
padding-inline: 0;
white-space: normal;
color: var(--color-link);
}
.header-menu .menu--main .submenu li a:hover,
.header-menu .menu--main .submenu li a:focus-within,
.header-menu .menu--main .submenu li.active-trail a,
.header-menu .menu--main .submenu li a.active-trail,
.header-menu .menu--main .submenu li a.is-active {
color: var(--color-link-hover);
background-color: unset;
}
.header-menu .menu--main .submenu a,
.header-menu .menu--main .active-trail .submenu a {
display: inline-block;
font-weight: var(--font-weight-text);
line-height: var(--font-lineheight-shorter);
}
}
/* Shrink mobile logo */
@media screen and (max-width: 450px) {
.header-bar {
--header-height: 93px;
}
}
@media screen and (max-width: 375px) {
.header-bar {
--header-height: 81px;
}
.region-header-mobile {
gap: 1rem;
}
a.site-logo img {
width:
}
.region-header search form .form-search {
inline-size: 100%;
}
}
/* --------------- Footers --------------- */
/* ----- Top footer (Sign up form) ----- */
.region-footer-actions {
padding-block: 2.75rem;
background-color: var(--color-blue);
background-image: url("../images/logo-mark-blue.svg");
background-repeat: no-repeat;
background-position: calc(100% + 28px) calc(100% + 62px); /* Crop logo mark */
background-size: 175px auto;
color: var(--white);
--color-text: var(--white);
--color-heading: var(--white);
--color-link: var(--white);
--color-link-visited: var(--gray-1);
--color-link-hover: var(--gray-2);
--color-link-underline: var(--gray-1);
}
.region-footer-actions .block {
margin-trim: block;
}
.region-footer-actions .block > *:last-child {
margin-block-end: 0;
}
.region-footer-actions .block h2 {
margin-block-end: 1.5rem;
font-weight: var(--font-weight-heading);
font-size: var(--font-size-plus-8);
font-family: var(--font-family-heading);
color: var(--gray-1);
text-transform: uppercase;
}
.region-footer-actions .block p {
margin-block-end: 1.5em;
}
/* Form columns */
.region-footer-actions form {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto 1fr;
grid-template-areas:
"intro form"
"terms form";
align-items: start;
gap: 2.25rem clamp(1.75rem, 4vw, 2.5rem);
}
@media (max-width: 756px) {
.region-footer-actions form {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 459px) {
.region-footer-actions .block h2 {
text-align: center;
}
.region-footer-actions form {
grid-template-columns: 1fr;
grid-template-areas:
"intro"
"form"
"terms";
}
}
.region-footer-actions form > .form-item-intro {
grid-area: intro;
margin-trim: block-end;
}
.region-footer-actions form > .form-item-intro > *:last-child {
margin-block-end: 0;
}
/* Terms */
.region-footer-actions form > #edit-terms {
grid-area: terms;
margin-trim: block-end;
}
.region-footer-actions form > #edit-terms summary {
font-weight: var(--font-weight-semibold);
cursor: pointer;
}
.region-footer-actions form > #edit-terms .details-wrapper {
margin-block-start: 1rem;
margin-trim: block-end;
}
.region-footer-actions .form-item-policies p:last-child {
margin-block-end: 0;
}
/* Field wrapper box */
.region-footer-actions .box {
grid-area: form;
inline-size: calc(100% - 2rem);
margin-block: 0;
margin-inline: auto;
padding: 1rem;
box-shadow: inset 0 0 2px rgb(0 0 0 / 0.2);
background-color: rgb(0 0 0 / 0.1);
font-size: var(--font-size-minus-1);
}
/* Two-column grid for textfields */
.region-footer-actions .signup-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem 1.25rem;
margin-block-end: 1rem;
}
@media (max-width: 450px) {
.region-footer-actions .signup-fields {
grid-template-columns: 1fr;
}
}
.region-footer-actions .form-item {
margin: 0;
}
.region-footer-actions label {
color: var(--white);
}
/* Required mark */
.region-footer-actions .form-required::after {
color: var(--color-orange-light);
}
/* Checkboxes */
.region-footer-actions .box .form-type-checkbox {
display: flex;
flex-flow: row nowrap;
align-items: start;
gap: 0.375rem;
margin-block-end: 0.75rem;
line-height: var(--font-lineheight-shorter);
}
.region-footer-actions .box .form-type-checkbox input[type="checkbox"] {
margin-block-start: 0.375rem;
}
/* Help popup */
.region-footer-actions .box .webform-element-help {
background-color: var(--gray-5);
border-color: var(--gray-5);
color: var(--white);
}
.region-footer-actions .box .tippy-content {
padding: 1rem;
}
/* Submit button */
.region-footer-actions form .form-actions {
margin-block: 1rem 0;
}
/* ----- Middle footer (links and donate) ----- */
.region-footer-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 2.5rem 2rem;
padding-block: 2.75rem;
background-color: var(--color-blue-dark);
color: var(--white);
--color-text: var(--white);
--color-heading: var(--white);
--color-link: var(--white);
--color-link-visited: var(--white);
--color-link-hover: var(--gray-3);
}
.region-footer-links .block {
margin-trim: block-end;
}
.region-footer-links .block > *:last-child,
.region-footer-links .block > *:last-child > *:last-child {
margin-block-end: 0;
}
.region-footer-links .block p {
margin-block-end: 1.5rem;
line-height: var(--font-lineheight-taller);
}
/* Links */
.footer-links {
display: flex;
flex-flow: column nowrap;
gap: 0.375rem;
align-items: start;
margin: 0;
padding: 0;
list-style: none;
}
.footer-links li {
margin: 0;
padding: 0;
list-style: none;
}
.footer-links a {
display: inline-block;
padding-block: 0.2em;
font-weight: var(--font-weight-semibold);
line-height: var(--font-lineheight-shorter);
text-decoration: none;
}
/* Heading */
.region-footer-links .block h3 {
margin-block-end: 0.5em;
font-weight: var(--font-weight-heading);
font-size: var(--font-size-plus-8);
font-family: var(--font-family-heading);
color: var(--color-orange-light);
text-transform: uppercase;
}
.region-footer-links .block h3 a {
color: var(--color-orange-light);
}
/* Donate */
.region-footer-actions .block a.action-donate {
border: 1px solid var(--color-orange-dark);
}
/* ----- Social icons ----- */
.footer-social {
display: flex;
flex-flow: row wrap;
gap: 1rem;
align-items: center;
margin-block: 0 1.5rem;
padding: 0;
list-style: none;
}
.footer-social li {
margin: 0;
padding: 0;
}
.footer-social a {
display: block;
margin: 0;
padding: 0;
color: var(--white);
will-change: opacity;
transition: opacity 200ms;
}
.footer-social a:hover {
opacity: 0.6;
}
.footer-social a svg {
display: block;
block-size: 2.375rem;
inline-size: auto;
max-inline-size: 2.375rem;
}
/* Reduce size of tall logos */
.footer-social a:is([href*="facebook"], [href*="tiktok"]) svg {
block-size: 2.125rem;
}
@media (max-width: 459px) {
.region-footer-links .block {
text-align: center;
}
.region-footer-links .block,
.footer-social {
justify-content: center;
}
.footer-links li {
margin-inline: auto;
}
}
/* Footer IDC link (bottom) */
.region-footer {
padding-block: 1.375rem;
text-align: center;
font-size: var(--font-size-minus-2);
}
.region-footer .block p {
margin-block-end: 0;
text-wrap: pretty;
}
.region-footer .block img {
display: inline-block;
margin-inline-end: 6px;
vertical-align: middle;
}
.region-footer a {
text-decoration: none;
}
@media (max-width: 460px) {
.region-footer .block {
font-size: var(--font-size-minus-3);
}
.region-footer .block img {
display: block;
margin-block: 0 0.4em;
margin-inline: auto;
}
}
/* --------------- Title banner region --------------- */
.region-title-banner {
--color-link: var(--white);
--color-link-visited: var(--white);
--color-link-hover: var(--gray-1);
--color-link-underline: var(--gray-1);
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
justify-content: space-between;
gap: 1.75rem 2.5rem;
margin-trim: block-end;
padding-block: 2.75rem;
background-color: var(--color-blue);
background-image: url("../images/logo-mark-blue.svg");
background-repeat: no-repeat;
background-position: calc(100% + 28px) calc(100% + 62px); /* Crop logo mark */
background-size: 175px auto;
color: var(--white);
}
/* ----- Page title ----- */
.block-page-title-block h1 {
margin-block: 0;
font-weight: var(--font-weight-light);
line-height: var(--font-lineheight-shortest);
font-family: var(--font-family-heading);
color: var(--white);
}
/* Private nodes: Add member mark */
body:has(.node--private.node--view-mode-full) h1.page-title {
margin-block: -0.9375rem;
}
body:has(.node--private.node--view-mode-full) h1.page-title .field--name-title::before {
display: block;
content: "Members Only";
inline-size: fit-content;
margin-block-start: -0.875em;
margin-block-end: 0.125em;
background-color: var(--gray-1);
padding: 0.25em 0.5em;
background-color: rgb(255 255 255 / 0.1);
color: var(--white);
font-family: var(--font-family-text);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-minus-1);
line-height: var(--font-lineheight-shorter);
}
/* ----- Introduction ----- */
.region-title-banner .block-field-introduction-block {
grid-column: 1 / span 2;
font-size: clamp(var(--font-size-plus-1), 3vw, var(--font-size-plus-4));
font-weight: var(--font-weight-medium);
}
.region-title-banner .field--name-field-introduction {
margin-trim: block-end;
}
.region-title-banner .field--name-field-introduction > *:last-child,
.region-title-banner p:last-child {
margin-block-end: 0;
}
@media screen and (max-width: 1023px) {
/* Tighten mobile spacing */
.region-title-banner {
padding-block: 1.875rem;
grid-template-columns: auto;
}
/* Introduction takes single column */
.region-title-banner .block-field-introduction-block {
grid-column: 1;
}
}
/* Remove redundant introduction from views */
.view .view-header .introduction {
display: none;
}
/* --------------- Above content region --------------- */
/* Tabs */
.region-pre-content {
--section-block-padding: 1rem;
position: relative;
margin-block: var(--section-block-padding);
margin-trim: block-end;
}
.region-title-banner + .region-pre-content {
--section-block-padding: 1rem 0.5rem;
}
/* Empty section */
.region-pre-content:not(:has(div)) {
display: none;
}
/* Drupal tabs */
#block-dwn-primary-local-tasks {
position: static;
}
.region-pre-content nav.tabs {
padding-block-end: 1rem;
}
.region-pre-content nav.tabs ul {
justify-content: start;
text-transform: none;
}
.region-pre-content nav.tabs ul li {
text-align: start;
}
.region-pre-content nav.tabs ul a {
padding-block: 0;
font-weight: var(--font-weight-semibold);
}
.region-pre-content nav.tabs ul a.is-active,
.region-pre-content nav.tabs ul a:focus,
.region-pre-content nav.tabs ul a:hover {
background-color: unset;
}
/* Messages */
.region-highlighted {
--section-block-padding: 2rem;
}
/* Only indent message areas */
.region-highlighted > div {
margin-block: var(--section-block-padding);
margin-trim: block-end;
}
/* --------------- Content Layout --------------- */
/* --------------- Content sections/blocks/bars --------------- */
:where(section, aside:not(.admin-toolbar)),
.webform-confirmation {
--section-block-padding: 3.5rem; /* Default padding = 56px */
position: relative;
display: flow-root;
padding-block: var(--section-block-padding, 3.5rem);
background-color: var(--color-background);
color: var(--color-text);
}
section.flush-top {
padding-block-start: 0;
}
section.flush-bottom {
padding-block-end: 0;
}
/* Section background colors */
:where(.color-gradient) {
background: linear-gradient(to bottom, var(--color-boxes), var(--color-background));
}
:where(.color-orange) {
--color-background: var(--color-orange);
--color-text: var(--white);
--color-highlight: var(--gray-3);
--color-heading: var(--white);
--color-link: var(--white);
--color-link-visited: var(--gray-1);
--color-link-hover: var(--gray-2);
--color-link-underline: rgb(255 255 255 / 0.4);
--color-boxes: rgba(0, 0, 0, 0.2);
--icon-bullet: var(--icon-bullet-white);
margin-trim: block-end;
}
:where(.color-orange-dark) {
--color-background: var(--color-orange-dark);
--color-text: var(--white);
--color-highlight: var(--gray-3);
--color-heading: var(--white);
--color-link: var(--white);
--color-link-visited: var(--gray-1);
--color-link-hover: var(--gray-2);
--color-link-underline: rgb(255 255 255 / 0.4);
--color-boxes: rgba(0, 0, 0, 0.2);
--icon-bullet: var(--icon-bullet-white);
margin-trim: block-end;
}
:where(.color-blue) {
--color-background: var(--color-blue);
--color-text: var(--white);
--color-highlight: var(--gray-3);
--color-heading: var(--white);
--color-link: var(--white);
--color-link-visited: var(--gray-1);
--color-link-hover: var(--gray-2);
--color-link-underline: rgb(255 255 255 / 0.4);
--color-boxes: rgba(0, 0, 0, 0.2);
--icon-bullet: var(--icon-bullet-white);
margin-trim: block-end;
}
:where(.color-blue-dark) {
--color-background: var(--color-blue-dark);
--color-text: var(--white);
--color-highlight: var(--color-orange-light);
--color-heading: var(--white);
--color-link: var(--white);
--color-link-visited: var(--gray-1);
--color-link-hover: var(--gray-3);
--color-link-underline: rgb(255 255 255 / 0.4);
--color-boxes: rgba(255, 255, 255, 0.15);
--icon-bullet: var(--icon-bullet-white);
margin-trim: block-end;
}
:where(.color-white) {
--color-background: var(--white);
margin-trim: block-end;
}
:where(.color-gray) {
--color-background: var(--color-boxes);
--color-highlight: var(--color-orange-dark);
margin-trim: block-end;
}
:where(.color-gray-light) {
--color-background: var(--gray-2);
--color-highlight: var(--color-orange-dark);
margin-trim: block-end;
}
:where(.color-gray-dark) {
--color-background: var(--gray-9);
--color-text: var(--white);
--color-highlight: var(--color-orange-light);
--color-heading: var(--white);
--color-link: var(--white);
--color-link-visited: var(--gray-1);
--color-link-hover: var(--gray-3);
--color-link-underline: rgb(255 255 255 / 0.4);
--color-boxes: rgba(255, 255, 255, 0.15);
--icon-bullet: var(--icon-bullet-white);
margin-trim: block-end;
}
:where(.color-black) {
--color-background: var(--black);
--color-text: var(--white);
--color-highlight: var(--color-orange-light);
--color-heading: var(--white);
--color-link: var(--white);
--color-link-visited: var(--gray-1);
--color-link-hover: var(--gray-3);
--color-link-underline: rgb(255 255 255 / 0.4);
--color-boxes: rgba(255, 255, 255, 0.15);
--icon-bullet: var(--icon-bullet-white);
margin-trim: block-end;
}
/* Tighten mobile spacing */
@media screen and (max-width: 1023px) {
:where(section) {
--section-block-padding: 3.25rem;
}
}
@media screen and (max-width: 760px) {
:where(section) {
--section-block-padding: 3rem;
}
}
/* Optional padding variations */
:where(section.small-block-padding) {
--section-block-padding: 2.5rem;
}
:where(section.small-block-start-padding) {
padding-block-start: 2.5rem;
}
:where(section.no-block-padding) {
--section-block-padding: 0;
}
:where(section.no-block-start-padding) {
padding-block-start: 0;
}
:where(section.no-block-end-padding) {
padding-block-end: 0;
}
/* Tighten adjacent color sections */
/* Remove top padding of lower adjacent section */
:where(section.color-blue + section.color-blue),
:where(section.color-blue-dark + section.color-blue-dark),
:where(section.color-orange + section.color-orange),
:where(section.color-orange-dark + section.color-orange-dark),
:where(section.color-gray + section.color-gray),
:where(section.color-gray + section.color-gradient),
:where(section.color-gradient + section.color-clear),
:where(section.color-clear + section.color-clear) {
padding-block-start: 1.75rem;
}
/* Prevent margin collapse so color bleeds */
section.color-blue:has(+ section.color-blue),
section.color-blue-dark:has(+ section.color-blue-dark),
section.color-orange:has(+ section.color-orange),
section.color-orange-dark:has(+ section.color-orange-dark),
section.color-gray:has(+ section.color-gray),
section.color-gray:has(+ section.color-gradient),
section.color-gradient:has(+ section.color-clear),
section.color-clear:has(+ section.color-clear) {
padding-block-end: 0.5px;
}
/* Trim bottom margin from last element of sections */
article > .node-content,
article > .node-content > section {
margin-trim: block-end;
}
article > .node-content > *:last-child,
article > .node-content > section > *:last-child,
article > .node-content > section > *:last-child > *:last-child,
article > .node-content > section > *:last-child > *:last-child > *:last-child,
article > .node-content > section > *:last-child > *:last-child > *:last-child > *:last-child,
article > .node-content > section > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child,
article > .node-content > section > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child > *:last-child {
margin-block-end: 0; /* Trim bottom margin */
}
/* Dedicated section heading with gradient top */
section header h2 {
margin-block-end: 2rem;
text-align: center;
background: linear-gradient(transparent 4px, var(--color-heading) 18px);
background-clip: text;
line-height: var(--font-lineheight-shorter); /* Prevent clipping of hanging letters */
-webkit-text-fill-color: transparent;
text-wrap: balance;
}
/* Left align headings (h2 is centered by default) */
section.heading-align-left header h2 {
text-align: left;
}
/* Section buttons row */
.links {
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 1.25rem 2.5rem;
margin-block: 2rem;
margin-trim: block-end;
text-align: center;
}
.links p {
margin-block-end: 0;
}
/* ----- Content layout options ----- */
/* --- Thumbnail columns (small left thumbnail image) --- */
ul.thumbnails {
margin: 0 0 1.7em;
padding: 0;
list-style: none;
}
ul.thumbnails > li {
clear: both;
margin: 0 0 1.7em;
padding: 0 0 1.7em 168px;
list-style: none;
background: url("../images/hr-dotted.webp") repeat-x 0 100%;
background-size: auto 1px;
}
/* Clear after floats */
ul.thumbnails > li::after {
content: "";
display: block;
block-size: 0;
clear: both;
visibility: hidden;
}
ul.thumbnails > li:last-child {
margin-block-end: 0;
padding-block-end: 0;
background: none;
}
ul.thumbnails > li > *:last-child {
margin-block-end: 0;
}
/* Photos */
ul.thumbnails img,
ul.thumbnails video {
float: left;
max-inline-size: 144px !important;
block-size: auto !important;
margin: 0.3em 0 0 -168px;
}
/* Photos with captions */
ul.thumbnails figure {
float: left;
inline-size: 144px;
margin: 0.3em 0 0 -168px;
}
ul.thumbnails figure img {
display: block;
float: none;
margin: 0;
}
ul.thumbnails figure figcaption {
display: block;
background-color: #f3f3f1;
margin: 0;
padding: 14px 10px;
text-align: left;
font: normal 12px/1.5 var(--font-family-text);
color: #666;
}
/* Improve touch targets */
ul.thumbnails p a.more {
display: inline-block;
padding: 0.1em 0;
}
/* Separate adjacent links */
ul.thumbnails p a.more + br + a.more {
margin-block-start: 0.3em;
}
@media (max-width: 1000px) {
/* Reduce image width */
ul.thumbnails > li {
padding-inline-start: 148px;
}
ul.thumbnails > li img,
ul.thumbnails > li video,
ul.thumbnails > li figure {
max-inline-size: 124px !important;
margin-inline-start: -148px;
}
ul.thumbnails > li figure img,
ul.thumbnails > li figure video {
margin-inline-start: 0;
}
}
@media (max-width: 410px) {
/* Remove wrapping at small mobile */
ul.thumbnails > li {
padding-inline-start: 0;
}
ul.thumbnails > li img,
ul.thumbnails > li video,
ul.thumbnails > li figure {
display: block;
float: none;
inline-size: 80vw;
max-inline-size: 240px !important;
margin: 0 auto 1em;
}
ul.thumbnails > li figure img,
ul.thumbnails > li figure video {
margin-block-end: 0;
}
}
/* --- Featured columns (large thumbnail; 50/50 split) --- */
ul.featured-thumbnails {
margin: 0 0 1.8em;
padding: 0;
list-style: none;
}
ul.featured-thumbnails > li {
clear: both;
margin: 0 0 1.8em;
padding: 0 0 1.7em 53%;
list-style: none;
background: url("../images/hr-dotted.webp") repeat-x 0 100%;
background-size: auto 1px;
}
/* Clear after floats */
ul.featured-thumbnails > li::after {
content: "";
display: block;
block-size: 0;
clear: both;
visibility: hidden;
}
ul.featured-thumbnails > li:last-child {
margin-block-end: 0;
padding-block-end: 0;
background: none;
}
ul.featured-thumbnails > li p {
margin-block-end: 1.2em;
font-size: 112.5%;
font-weight: var(--font-weight-semibold);
}
ul.featured-thumbnails > li > *:last-child {
margin-block-end: 0;
}
/* Photos */
ul.featured-thumbnails > li img {
float: left;
inline-size: 100%;
block-size: auto !important;
margin: 0.3em 0 0 -112%;
}
/* Photos with captions */
ul.featured-thumbnails > li figure {
float: left;
inline-size: 100%;
margin: 0.3em 0 0 -112%;
}
ul.featured-thumbnails > li figure img {
display: block;
float: none;
margin: 0;
}
ul.featured-thumbnails > li figure figcaption {
display: block;
background-color: #f3f3f1;
margin: 0;
padding: 14px 10px;
text-align: left;
font: normal 12px/1.5 var(--font-family-text);
color: #666;
}
/* CKEditor fix */
ul.thumbnails .cke_widget_wrapper img.cke_widget_drag_handler,
ul.featured-thumbnails .cke_widget_wrapper img.cke_widget_drag_handler {
float: none;
margin: 0;
inline-size: 15px !important;
block-size: 15px !important;
max-inline-size: none;
display: inline-block;
}
ul.thumbnails .cke_widget_image.cke_widget_wrapper > a,
ul.featured-thumbnails .cke_widget_image.cke_widget_wrapper,
ul.featured-thumbnails .cke_widget_image.cke_widget_wrapper > a {
display: inline;
}
ul.thumbnails h2,
ul.featured-thumbnails h2 {
font-size: 1.25em;
}
@media (max-width: 1000px) {
ul.featured-thumbnails > li {
padding-inline-start: 0;
}
ul.featured-thumbnails > li img,
ul.featured-thumbnails > li video,
ul.featured-thumbnails > li figure {
float: none;
max-inline-size: none !important;
margin: 0 0 1.2em;
}
}
/* ----- Alternate featured (side) image ----- */
.featured-image {
margin: 0 auto 2.5rem;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: flex-start;
}
.featured-image .content > *:last-child { /* Collapse bottom padding */
margin-block-end: 0;
}
.featured-image > .image {
order: -1;
margin-inline-end: 2.75rem;
flex-shrink: 0;
flex-basis: 38%;
}
.featured-image > .image.right { /* Switch sides */
order: 1;
margin-inline-start: 2.75rem;
margin-inline-end: 0;
}
.featured-image > .image img,
.featured-image > .image video {
display: block;
max-inline-size: 100%;
block-size: auto;
}
@media screen and (max-width: 740px) {
.featured-image {
flex-flow: column nowrap;
align-items: center;
}
.featured-image > .content {
margin-block-end: 2.5rem;
}
.featured-image > .image,
.featured-image > .image.right { /* Wrap image below */
order: 1;
margin: 0;
max-inline-size: none;
text-align: center;
}
}
/* --------------- Components --------------- */
/* ---------- Resources boxes ---------- */
/* TODO: Move to separate CSS */
/* Extra dark orange */
section.color-orange-dark:has(.block-inline-blockresources) {
background-color: hsl(20 98% 30%);
}
.block-inline-blockresources > .field {
--color-text: var(--white);
--color-highlight: var(--gray-3);
--color-heading: var(--white);
--color-link: var(--white);
--color-link-visited: var(--gray-1);
--color-link-hover: var(--gray-2);
--color-link-underline: rgb(255 255 255 / 0.4);
--color-boxes: rgba(0, 0, 0, 0.2);
--icon-bullet: var(--icon-bullet-white);
position: relative;
overflow: hidden;
padding: 1.75rem;
background-repeat: no-repeat;
border-radius: 0.1875rem;
color: var(--color-text);
}
.block-inline-blockresources > .field > * {
position: relative;
z-index: 1;
}
.block-inline-blockresources > .field h3 {
margin-block-end: 1em;
font-size: var(--font-size-plus-10);
}
/* Remove inline document icons */
.block-inline-blockresources > .field ul > li a::after {
content: none;
}
/* Link lists (similar to .icons lists) */
.block-inline-blockresources > .field ul {
display: flex;
flex-flow: column nowrap;
gap: 1.75rem;
margin-block: 0 1.75rem;
margin-inline: 0;
padding: 0;
list-style: none;
}
.block-inline-blockresources > .field *:last-child,
.block-inline-blockresources > .field ul:last-child > li:last-child {
margin-block-end: 0;
}
.block-inline-blockresources > .field ul > li {
position: relative;
min-block-size: calc(32px + 0.225rem); /* Space for icon */
margin: 0;
padding-block: 0;
padding-inline: 46px 0;
line-height: var(--font-lineheight-shorter);
}
/* Generic file icon */
.block-inline-blockresources > .field ul > li:has(a)::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0.225rem;
inline-size: 32px;
block-size: 32px;
background-color: hsl(52 6% 95%);
-webkit-mask: var(--icon-file) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file) no-repeat 50% 50% / 100% auto;
}
/* Other file type icons */
.block-inline-blockresources > .field ul > li:has(a[href$=".rtf"], a[href$=".txt"])::before {
-webkit-mask: var(--icon-file-text) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-text) no-repeat 50% 50% / 100% auto;
}
.block-inline-blockresources > .field ul > li:has(a[href$=".doc"], a[href$=".docx"])::before {
-webkit-mask: var(--icon-file-document) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-document) no-repeat 50% 50% / 100% auto;
}
.block-inline-blockresources > .field ul > li:has(a[href$=".xls"], a[href$=".xlsx"])::before {
-webkit-mask: var(--icon-file-spreadsheet) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-spreadsheet) no-repeat 50% 50% / 100% auto;
}
.block-inline-blockresources > .field ul > li:has(a[href$=".ppt"], a[href$=".pptx"])::before {
-webkit-mask: var(--icon-file-slide) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-slide) no-repeat 50% 50% / 100% auto;
}
.block-inline-blockresources > .field ul > li:has(a[href$=".webp"], a[href$=".gif"], a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"])::before {
-webkit-mask: var(--icon-file-image) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-image) no-repeat 50% 50% / 100% auto;
}
.block-inline-blockresources > .field ul > li:has(a[href$=".zip"])::before {
-webkit-mask: var(--icon-file-zip) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-zip) no-repeat 50% 50% / 100% auto;
}
.block-inline-blockresources > .field ul > li:has(a[href*="youtube.com"], a[href*="youtu.be"], a[href*="vimeo.com"])::before {
-webkit-mask: var(--icon-file-video) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-video) no-repeat 50% 50% / 100% auto;
}
.block-inline-blockresources > .field ul > li:has(a[href$=".pdf"])::before {
-webkit-mask: var(--icon-file-pdf) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-pdf) no-repeat 50% 50% / 100% auto;
}
/* Box background icons */
.block-inline-blockresources > .field::before,
.block-inline-blockresources > .field::after {
content: "";
display: block;
position: absolute;
z-index: 0;
top: -23px;
right: -18px;
inline-size: 120px;
block-size: 120px;
pointer-events: none;
}
.block-inline-blockresources > .field::before {
/* Circle outline */
border-radius: 100%;
background-color: rgb(255 255 255 / 0.1);
}
/* Reports */
.block-inline-blockresources .field--name-field-resources-reports {
background-color: hsl(20 98% 41%);
}
.block-inline-blockresources .field--name-field-resources-reports::after {
/* Icon */
background-color: hsl(20 98% 41%);
-webkit-mask: var(--icon-reports) no-repeat 50% 50% / 65% auto;
mask: var(--icon-reports) no-repeat 50% 50% / 65% auto;
}
/* Analysis */
.block-inline-blockresources .field--name-field-resources-analysis {
background-color: hsl(192 100% 30%);
}
.block-inline-blockresources .field--name-field-resources-analysis::after {
/* Icon */
background-color: hsl(192 100% 30%);
-webkit-mask: var(--icon-analysis) no-repeat 50% 50% / 60% auto;
mask: var(--icon-analysis) no-repeat 50% 50% / 60% auto;
}
/* Organizational Letters to Congress */
.block-inline-blockresources .field--name-field-resources-letters {
background-color: var(--color-blue-dark);
}
.block-inline-blockresources .field--name-field-resources-letters::after {
/* Icon */
background-color: var(--color-blue-dark);
-webkit-mask: var(--icon-signon) no-repeat 50% 50% / 60% auto;
mask: var(--icon-signon) no-repeat 50% 50% / 60% auto;
}
/* ---------- Social media bar ---------- */
.block-block-content:has(.social-bar) {
margin-inline: var(--container-margin-inline-stretch, 0px);
padding-inline: var(--container-padding-inline, 0px);
padding-block: 2rem;
background-color: var(--color-orange-dark);
margin-trim: block;
}
.block-block-content:has(.social-bar):has(+ div.block) {
margin-block-end: 2rem;
}
.block-block-content:has(.social-bar) .field--name-body {
display: flex;
flex-flow: row wrap;
gap: 1rem 3.5rem;
align-items: center;
justify-content: center;
}
.block-block-content:has(.social-bar) h2 {
margin-block: 0;
color: var(--white);
}
.social-bar {
display: flex;
flex-flow: row wrap;
gap: 1rem 1.25rem;
align-items: center;
justify-content: center;
margin-block: 0;
padding: 0;
list-style: none;
}
.social-bar li {
margin: 0;
padding: 0;
}
.social-bar a {
display: block;
margin: 0;
padding: 0;
color: var(--white);
will-change: opacity;
transition: opacity 200ms;
}
.social-bar a:hover {
opacity: 0.6;
}
.social-bar a svg {
display: block;
block-size: 2.5rem;
inline-size: auto;
max-inline-size: 2.5rem;
}
/* Reduce size of tall logos */
.social-bar a:is([href*="facebook"], [href*="tiktok"]) svg {
block-size: 2.25rem;
}
/* ---------- Content columns (within CKEditor) ---------- */
.section-columns {
--column-min-size: 200px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--column-min-size), 1fr)); /* Equal columns */
justify-content: space-between;
gap: 2rem clamp(2rem, 4.75vw, 3rem);
margin-block-end: 2rem;
margin-trim: block-end;
}
.section-columns.auto-width {
grid-template-columns: repeat(auto-fit, minmax(var(--column-min-size), auto)); /* Unequal columns */
}
.section-columns > *,
.section-columns > * > *:last-child,
.section-columns > * > *:last-child > *:last-child {
margin-block-end: 0; /* Trim bottom margin */
}
/* ---------- Column layout with impact list ---------- */
.layout-columns:has(ul.impact) {
align-items: center;
gap: 2rem clamp(2rem, 10vw, 8rem);
}
/* Separator line */
@media screen and (min-width: 587px) {
.layout-columns:has(ul.impact)::before {
content: "";
position: absolute;
top: 0.25rem;
bottom: 0;
left: 50%;
transform: translateX(-50%); /* Horizontally center */
inline-size: 4px;
background-color: rgb(255 255 255 / 0.4);
}
}
.layout-columns > div:not(:has(ul.impact), :has(.view-lists), .social-share) h2 {
font-size: clamp(2rem, 8vw, 2.75rem);
}
/* ---------- Single image layout block ---------- */
.block-inline-blockimage > figure {
/* Fit image and caption */
display: flex;
flex-flow: column nowrap;
block-size: 100%;
gap: 0.5rem;
margin-block-end: 1.75rem;
}
.layout-columns > *:last-child .block-inline-blockimage > figure {
margin-block-end: 1.75rem;
}
.block-inline-blockimage > figure > figcaption {
flex-grow: 0;
flex-shrink: 0;
margin-block: 0;
}
.block-inline-blockimage > figure img {
margin-inline: auto;
max-inline-size: min(var(--max-inline-size, 100%), 100%);
}
/*
.block-inline-blockimage:not(:last-child) > figure:not(:has(figcaption)) img {
margin-block-end: 1.75rem;
}
*/
/* ---------- Tabs ---------- */
nav.tabs {
--shadow-width: 40px;
position: relative;
display: grid;
grid-template-columns: auto; /* Tabs overlap shadows */
grid-template-rows: auto;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-block: 0 2.75rem; /* Keep space if trimmed at end of sections */
}
/* Hide scrollbar */
nav.tabs::-webkit-scrollbar {
display: none;
}
nav.tabs ul {
grid-column: 1;
grid-row: 1;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
gap: 1rem;
min-inline-size: fit-content; /* Stretch bar to content */
margin: 0;
padding-inline: 0;
padding-block: 0 0.625rem;
border-bottom: 5px solid var(--color-primary);
font-size: var(--font-size-plus-1);
list-style: none;
text-transform: uppercase;
}
@media screen and (max-width: 1023px) {
/* Reduce font */
nav.tabs ul {
font-size: var(--font-size-base);
}
}
@media screen and (max-width: 767px) {
/* Reduce gap */
nav.tabs ul {
gap: 0.75rem;
}
}
nav.tabs li {
position: relative;
scroll-snap-align: center;
display: flex;
align-items: center; /* Vertically center */
margin: 0;
padding: 0;
text-align: center;
line-height: var(--font-lineheight-shorter);
list-style: none;
}
nav.tabs a {
display: block;
min-inline-size: 4ch;
padding: 0.5rem;
color: var(--color-text);
font-weight: var(--font-weight-bold);
text-wrap: balance;
overflow-wrap: initial; /* Don't break words */
word-break: initial;
}
nav.tabs a:focus,
nav.tabs a:hover {
background-color: transparent;
color: var(--color-link);
}
/* Active tab */
nav.tabs li.is-active a {
color: var(--color-primary);
}
/* Active tab marker */
nav.tabs li.is-active::after {
--mark-size: 10px;
content: "";
position: absolute;
left: calc(50% - var(--mark-size));
bottom: calc(-0.625rem - 4px - var(--mark-size));
inline-size: 0;
block-size: 0;
border-inline-start: var(--mark-size) solid transparent;
border-inline-end: var(--mark-size) solid transparent;
border-block-start: var(--mark-size) solid var(--color-primary);
}
/* Edge scroll shadows (similar to subnav) */
nav.tabs::before,
nav.tabs::after {
content: "";
grid-column: 1;
grid-row: 1;
display: block;
position: sticky;
z-index: 1;
inline-size: var(--shadow-width);
background: linear-gradient(to var(--direction), var(--color-background), transparent);
pointer-events: none; /* Don't block links */
}
/* Don't show edge shadows with .no-scroll-shadows */
nav.tabs.no-scroll-shadows::before,
nav.tabs.no-scroll-shadows::after {
content: none;
}
/* Animate when at edges after initial processing */
nav.tabs.loaded::before,
nav.tabs.loaded::after {
transition: width 120ms ease-in-out, left 120ms ease-in-out;
}
nav.tabs::before {
--direction: right;
inset-inline-start: 0;
}
nav.tabs::after {
--direction: left;
/* Chrome CSS with overflow bug prevents placing into third grid column */
/* grid-area: right-shadow; right: 0; */
inset-inline-start: calc(100% - var(--shadow-width));
}
/* Hide gradient when at scroll edges (class added by script) */
nav.tabs.scroll-start::before,
nav.tabs.scroll-end::after {
--shadow-width: 0px;
}
/* ---------- Boxes ---------- */
.box {
display: flow-root; /* Clear floating overflow */
margin-block-end: 2rem;
margin-trim: block-end;
padding: 2.25rem;
background-color: var(--color-alt-background);
border-radius: 0.1875rem;
}
.alt-back .box {
background-color: var(--color-background);
}
.box > *:last-child,
.box > *:last-child > *:last-child {
margin-block-end: 0; /* Trim bottom margin */
}
.box.small {
font-size: 87.5%;
}
.box.small h3,
.box.small h4 {
margin-block-end: 0.4em;
}
.box.small p {
margin-block-end: 0.6em;
line-height: var(--font-lineheight-shorter);
}
.box .box {
background-color: var(--color-background);
}
/* Remove extra width within columns */
.layout-columns .box {
margin-inline: 0;
}
@media (max-width: 1247px) {
/* Remove extra width at 1.5rem side margins */
.box {
margin-inline: 0;
}
}
/* With background image */
.box .box-background img {
position: absolute;
z-index: 0;
inset: 0;
block-size: 100%;
inline-size: 100%;
opacity: 0.125;
pointer-events: none;
object-fit: cover;
}
/* ---------- Icons list box ---------- */
ul.icons {
display: flex;
flex-flow: column nowrap;
gap: 1.75rem;
margin-block: 0 1.75rem;
margin-inline: 0;
padding-block: 2.5rem;
padding-inline: 2.25rem;
background-color: var(--color-boxes);
border-radius: 0.1875rem;
list-style: none;
}
.box ul.icons {
/* Within box */
background-color: var(--color-background);
}
ul.icons > li {
position: relative;
min-block-size: calc(36px + 0.225rem); /* Space for icon */
margin: 0;
padding-block: 0;
padding-inline: 50px 0;
}
ul.icons > li:last-child {
margin-block-end: 0; /* Remove bottom margin */
}
/* Remove inline document icons */
ul.icons > li a::after {
content: none;
}
/* Generic file icon */
ul.icons > li:has(a)::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0.225rem;
inline-size: 36px;
block-size: 36px;
background-color: var(--color-text);
-webkit-mask: var(--icon-file) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file) no-repeat 50% 50% / 100% auto;
}
/* Other icons */
ul.icons > li:has(a[href^="mailto:"])::before {
-webkit-mask: var(--icon-email) no-repeat 50% 20% / 78% auto;
mask: var(--icon-email) no-repeat 50% 20% / 78% auto;
}
ul.icons > li:has(a[href^="tel:"])::before {
-webkit-mask: var(--icon-phone) no-repeat 50% 20% / 80% auto;
mask: var(--icon-phone) no-repeat 50% 20% / 80% auto;
}
ul.icons > li:has(a[href$=".txt"], a[href$=".rtf"])::before {
-webkit-mask: var(--icon-file-text) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-text) no-repeat 50% 50% / 100% auto;
}
ul.icons > li:has(a[href$=".doc"], a[href$=".docx"])::before {
-webkit-mask: var(--icon-file-document) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-document) no-repeat 50% 50% / 100% auto;
}
ul.icons > li:has(a[href$=".xls"], a[href$=".xlsx"])::before {
-webkit-mask: var(--icon-file-spreadsheet) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-spreadsheet) no-repeat 50% 50% / 100% auto;
}
ul.icons > li:has(a[href$=".ppt"], a[href$=".pptx"])::before {
-webkit-mask: var(--icon-file-slide) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-slide) no-repeat 50% 50% / 100% auto;
}
ul.icons > li:has(a[href$=".webp"], a[href$=".gif"], a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"])::before {
-webkit-mask: var(--icon-file-image) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-image) no-repeat 50% 50% / 100% auto;
}
ul.icons > li:has(a[href$=".zip"])::before {
-webkit-mask: var(--icon-file-zip) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-zip) no-repeat 50% 50% / 100% auto;
}
ul.icons > li:has(a[href*="youtube.com"], a[href*="youtu.be"], a[href*="vimeo.com"])::before {
-webkit-mask: var(--icon-file-video) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-video) no-repeat 50% 50% / 100% auto;
}
ul.icons > li:has(a[href$=".pdf"])::before {
-webkit-mask: var(--icon-file-pdf) no-repeat 50% 50% / 100% auto;
mask: var(--icon-file-pdf) no-repeat 50% 50% / 100% auto;
}
/* ---------- Image gallery lists ---------- */
ul.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
justify-items: center;
margin: 0 0 2rem;
padding: 0;
list-style: none;
}
ul.gallery > li {
margin: 0;
padding: 0;
background: none;
list-style: none;
text-align: center;
}
ul.gallery > li figure {
margin: 0;
}
ul.gallery > li img {
display: block;
max-inline-size: 100%;
block-size: auto;
will-change: transform;
transition: transform 0.3s ease-in-out;
}
ul.gallery > li img:hover {
transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
ul.gallery > li img:hover {
transform: none;
outline: 2px solid var(--color-blue);
}
}
/* Sponsor logo columns */
.logo-columns {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 1.5rem;
margin: 0 0 2rem;
padding: 0;
background-image: none;
list-tyle: none;
}
.logo-columns > * {
flex: 1 1 0px;
min-inline-size: 220px;
min-inline-size: min(220px, 100%);
margin: 0;
padding: 0;
background-image: none;
list-tyle: none;
text-align: center;
}
/* Video thumbnail columns */
.video-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 2rem 2.5rem;
margin: 0 0 2rem;
}
.video-columns > * {
/* Center when wrapping on tablet/mobile */
margin: 0 auto;
max-inline-size: 77.8vw;
}
/* Remove bottom margin */
.video-columns > * > *:last-child,
.video-columns > * > *:last-child > *:last-child {
margin-block-end: 0;
}
.video-columns img {
max-inline-size: 100%;
block-size: auto;
}
.video-columns figcaption {
margin: 0.3em 0 0;
text-align: left;
font-size: var(--font-size-content);
color: var(--color-text);
}
/* Column lists */
ul.columns {
display: block;
column-count: 2;
column-gap: 52px;
}
ul.columns > li {
overflow: hidden;
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
margin: 0 0 0.6em;
padding: 0 0 0 38px;
}
@media (max-width: 1000px) {
ul.columns {
column-count: auto;
}
}
/* -------------- MyEmma email signup form -------------- */
/* Hide logo */
.e2ma_signup_form .e2ma_signup_image_container {
display: none;
}
/* Revert all fonts */
.e2ma_signup_form :is(p, span, label) {
font: var(--font-text);
}
.e2ma_signup_form p span[style] {
font: var(--font-text) !important;
}
/* Use layout columns */
.e2ma_signup_form {
--column-min-size: 200px;
display: grid;
grid-template-columns: 1fr 2fr;
justify-content: space-between;
gap: 2rem clamp(2rem, 4.75vw, 4rem);
margin-trim: block-end;
@media screen and (max-width: 768px) {
grid-template-columns: 1fr;
}
}
/* Content */
.e2ma_signup_message p:last-child {
margin-block-end: 0;
}
/* Boxed form */
.e2ma_signup_form form {
margin-block-end: 2rem;
margin-trim: block-end;
padding: 2.25rem;
background-color: var(--color-alt-background);
border-radius: 0.1875rem;
}
.e2ma_signup_form form > *:last-child,
.e2ma_signup_form form > *:last-child > *:last-child {
margin-block-end: 0; /* Trim bottom margin */
}
/* Labels */
.e2ma_signup_form_label,
.e2ma_signup_form_group_label {
display: inline;
margin: 0;
padding: 0;
font-size: inherit;
font-weight: var(--font-weight-label);
}
.e2ma_signup_form_required_asterix,
.emmaFormLabelSmall {
color: var(--color-orange);
}
/* Fields */
.e2ma_signup_form_row {
margin-block: 0 1rem;
}
.e2ma_signup_form input[type="text"],
.e2ma_signup_form input[type="email"] {
inline-size: 100%;
}
.e2ma_signup_form label:has(input[type="checkbox"]) {
display: flex;
flex-flow: row nowrap;
align-items: start;
gap: 0.375rem;
line-height: var(--font-lineheight-shorter);
}
.e2ma_signup_form label:has(input[type="checkbox"]) input[type="checkbox"] {
margin-block-start: 0.375rem;
}
/* Required note */
.e2ma_signup_form_required_footnote {
margin: 1.5em 0 1.1em;
font-size: 87.5%;
}
/* Action buttons */
.e2ma_signup_form_button_row #e2ma_signup_reset_button {
display: none;
}
/* --------------- Sign up webform (within page body) --------------- */
.node-content .webform-submission-news-signup-form {
display: grid;
grid-template-columns: min(330px, 37%) auto;
grid-template-rows: auto 1fr;
grid-template-areas:
"intro form"
"terms form";
align-items: start;
gap: 2.25rem clamp(1.75rem, 4vw, 2.5rem);
}
@media (max-width: 640px) {
/* Single column */
.node-content .webform-submission-news-signup-form {
grid-template-columns: 1fr;
grid-template-rows: unset;
grid-template-areas:
"intro"
"form"
"terms";
}
}
/* Hide redundant heading */
.node-content .webform-submission-news-signup-form h2 {
display: none;
}
.node-content .webform-submission-news-signup-form > .form-item-intro {
grid-area: intro;
margin-trim: block-end;
}
.node-content .webform-submission-news-signup-form > .form-item-intro > *:last-child {
margin-block-end: 0;
}
/* Terms */
.node-content .webform-submission-news-signup-form > #edit-terms {
grid-area: terms;
margin-trim: block-end;
}
.node-content .webform-submission-news-signup-form > #edit-terms summary {
font-weight: var(--font-weight-semibold);
cursor: pointer;
}
.node-content .webform-submission-news-signup-form > #edit-terms .details-wrapper {
margin-block-start: 1rem;
margin-trim: block-end;
}
.node-content .webform-submission-news-signup-form .form-item-policies p:last-child {
margin-block-end: 0;
}
/* Field wrapper box */
.node-content .webform-submission-news-signup-form .box {
grid-area: form;
justify-self: stretch;
margin: 0;
}
/* Two-column grid for textfields */
.node-content .webform-submission-news-signup-form .signup-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem 1.25rem;
margin-block-end: 1rem;
}
@media (max-width: 450px) {
.node-content .webform-submission-news-signup-form .signup-fields {
grid-template-columns: 1fr;
}
}
.node-content .webform-submission-news-signup-form .form-item {
margin: 0;
}
/* Checkboxes */
.node-content .webform-submission-news-signup-form .box .form-type-checkbox {
display: flex;
flex-flow: row nowrap;
align-items: start;
gap: 0.375rem;
margin-block-end: 0.75rem;
line-height: var(--font-lineheight-shorter);
}
.node-content .webform-submission-news-signup-form .box .form-type-checkbox input[type="checkbox"] {
margin-block-start: 0.375rem;
}
/* Help popup */
.node-content .webform-submission-news-signup-form .box .webform-element-help {
background-color: var(--gray-5);
border-color: var(--gray-5);
color: var(--white);
}
.node-content .webform-submission-news-signup-form .box .tippy-content {
padding: 1rem;
}
/* Submit button */
.node-content .webform-submission-news-signup-form form .form-actions {
margin-block: 1rem 0;
}
/* --------------- Overlay/Modal/Popup boxes ----------- */
/* Backdrop cover */
.overlay {
position: fixed;
z-index: 1000000;
opacity: 1;
top: 0;
left: 0;
inline-size: 100vw;
block-size: 100vh;
background-color: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
overflow-y: hidden;
}
@media (prefers-reduced-motion: no-preference) {
.overlay {
animation: overlay-fade 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
}
@keyframes overlay-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Dialog area */
.overlay > .overlay-wrapper {
inline-size: 90vw;
max-inline-size: 920px;
min-inline-size: 50px;
block-size: calc(100vh - 90px);
max-block-size: 60vh;
min-block-size: 100px;
position: relative;
background-color: rgba(255, 255, 255, 0.96);
box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.4);
will-change: transform;
transform: translate(0, 0);
}
@media (prefers-reduced-motion: no-preference) {
.overlay > .overlay-wrapper {
animation: overlay-wrapper-appear 0.3s ease-out;
transition: transform 0.3s ease-out;
}
}
@keyframes overlay-wrapper-appear {
from {
transform: translate(0, 100px);
}
to {
transform: translate(0, 0);
}
}
@media (max-width: 1024px) {
.overlay > .overlay-wrapper {
max-block-size: 70vh;
}
}
@media (max-width: 740px) {
.overlay > .overlay-wrapper {
max-block-size: 78vh;
}
}
/* Closing animation */
.overlay.overlay-close {
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.overlay.overlay-close > .overlay-wrapper {
transform: translate(0, 100px);
}
}
/* Close button */
.overlay .overlay-close-button {
position: absolute;
z-index: 2;
top: 0;
right: 0;
display: inline-block;
inline-size: 32px;
block-size: 32px;
cursor: pointer;
overflow: hidden;
border: none;
background: transparent;
transform: translate(0, -32px); /* Top right */
}
@media (orientation: landscape) {
/* Move close button to right on landscape browsers */
.overlay .overlay-close-button {
transform: translate(36px, 0);
}
}
.overlay .overlay-close-button::before,
.overlay .overlay-close-button::after {
content: "";
position: absolute;
block-size: 4px;
inline-size: 100%;
top: 50%;
left: 0;
background: #b8b8b8;
border-radius: 5px;
margin-block-start: -6px;
}
@media (prefers-reduced-motion: no-preference) {
.overlay .overlay-close-button::before,
.overlay .overlay-close-button::after {
transition: background-color 0.2s ease-out;
}
}
.overlay .overlay-close-button::before {
transform: rotate(45deg);
}
.overlay .overlay-close-button::after {
transform: rotate(-45deg);
}
.overlay .overlay-close-button:hover::before,
.overlay .overlay-close-button:hover::after {
background: white;
}
/* Animated loading icon */
.overlay .overlay-loading-spinner {
position: absolute;
z-index: 10;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em); /* Center on content */
font-size: 25px;
inline-size: 1em;
block-size: 1em;
border-radius: 50%;
will-change: transform;
transform: translateZ(0) scale(0.5);
}
@media (prefers-reduced-motion: no-preference) {
.overlay .overlay-loading-spinner {
animation: overlay-spinner 1.1s infinite linear;
}
}
@keyframes overlay-spinner {
0%, 100% {
box-shadow: 0 -2.6em 0 0 var(--color-orange), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0 var(--color-orange), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.7), 2.5em 0 0 0 var(--color-orange), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.5), 2.5em 0 0 0 rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0 var(--color-orange), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.7), 0 2.5em 0 0 var(--color-orange), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.2), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.5), 0 2.5em 0 0 rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0 var(--color-orange), -2.6em 0 0 0 rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.7), -2.6em 0 0 0 var(--color-orange), -1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0 -2.6em 0 0 rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0 rgba(255, 255, 255, 0.2), 2.5em 0 0 0 rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0 rgba(255, 255, 255, 0.2), 0 2.5em 0 0 rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0 rgba(255, 255, 255, 0.5), -2.6em 0 0 0 rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0 var(--color-orange);
}
}
/* Inner wrapper */
.overlay .overlay-inner-wrapper {
inline-size: 100%;
block-size: 100%;
overflow-x: hidden;
overflow-y: auto;
}
/* Indent content area (loaded from AJAX) */
.overlay .overlay-content {
position: relative;
padding: 1.2rem;
}
/* Optional paginated questions */
.overlay .overlay-content .overlay-pages {
display: flex;
flex-flow: row nowrap;
margin: -1.2rem;
will-change: transform;
transition: transform 0.75s ease-in-out;
}
.overlay .overlay-pages > * {
position: relative;
flex-grow: 1;
flex-shrink: 0;
inline-size: calc(100% - 2.4rem);
padding: 1.2rem;
overflow: auto;
}
.overlay .overlay-pages > *:focus {
outline: none;
}
/* Slide pages forward */
.overlay[data-overlay-page="2"] .overlay-pages {
transform: translateX(-100%);
}
.overlay[data-overlay-page="3"] .overlay-pages {
transform: translateX(-200%);
}
.overlay[data-overlay-page="4"] .overlay-pages {
transform: translateX(-300%);
}
/* Stretch heading */
.overlay-heading {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
background-color: var(--color-orange);
background: conic-gradient(from -270deg at 20% -5%, var(--color-orange), var(--color-dark-orange));
margin: -1.2rem -1.2rem 2rem;
padding: 1.5rem 1.2rem;
border-bottom: 0;
color: white;
}
.overlay-subheading { /* Alternate gradient */
background-color: var(--color-dark-orange);
background: conic-gradient(from -270deg at 80% -5%, var(--color-dark-orange), var(--color-orange));
}
.overlay-heading h2 {
flex-grow: 1;
flex-shrink: 1;
margin: 0;
padding: 0;
color: white;
font: bold 1.3125rem/1.5 var(--font-family-text);
text-align: center;
}
@media (max-width: 420px) {
.overlay-heading h2 {
font-size: 1.1875rem;
}
}
/* Previous page button/arrow */
button.overlay-previous {
flex-grow: 0;
flex-shrink: 0;
-webkit-appearance: none;
appearance: none;
inline-size: 0;
block-size: 0;
margin: 0 0.8rem 0 -0.5rem;
padding: 0;
border-block-start: 0.8rem solid transparent;
border-inline-end: 0.9rem solid rgba(255, 255, 255, 0.7);
border-block-end: 0.8rem solid transparent;
border-inline-start: none;
background: transparent;
color: white;
text-indent: -9999px;
cursor: pointer;
transition: border-color 0.2s ease-out;
}
button.overlay-previous:hover {
border-inline-end-color: rgba(255, 255, 255, 1);
}
.overlay .overlay-content hr {
border-top: 4px solid white;
}
/* Yes+No tabs */
.overlay .overlay-content .tablist {
text-align: center;
}
.overlay .overlay-content .tablist a {
margin: 0 1rem;
}
.overlay .overlay-content .tablist a[aria-selected="true"] { /* Same as donate button */
background-color: var(--color-orange);
color: var(--white);
}
/* ----- Image-only overlays ----- */
.overlay.overlay-image > .overlay-wrapper {
/* 2022 National Day of Action */
background-color: #ff6318;
/* Requires square image */
block-size: min(620px, 88vw, 85vh);
inline-size: min(620px, 88vw, 85vh);
min-inline-size: 100px;
min-block-size: 100px;
max-inline-size: none;
max-block-size: none;
}
.overlay.overlay-image .overlay-inner-wrapper {
/* No scrolling */
overflow-y: hidden;
}
.overlay.overlay-image .overlay-content {
padding: 0;
}
.overlay.overlay-image .overlay-content a {
display: block;
}
.overlay.overlay-image .overlay-content img {
display: block;
inline-size: 100%;
block-size: auto !important;
will-change: transform;
transition: transform 0.2s ease-in, filter 0.2s ease-in;
}
.overlay.overlay-image .overlay-content img:hover {
transform-origin: center;
transform: scale(1.01);
filter: brightness(1.05);
}
/* --------------- Full width bars (not boxed) --------------- */
.full-width:not(.box) {
margin-inline: var(--container-margin-inline-stretch, 0px);
padding-inline: var(--container-padding-inline, 0px);
}
/* Within layout columns */
.layout-columns .full-width:not(.box) {
margin-inline: 0;
padding-inline: 0;
}
/* Collapse adjacent blocks */
.full-width:has(+ .full-width):not(.box) {
margin-block-end: 0;
}
/* ----- Social share ----- */
/* Social icons */
.social-share {
justify-self: end;
}
@media (max-width: 479px) {
/* Switch top top at mobile wrap */
.layout-columns .social-share {
justify-self: center;
order: -1;
}
}
.social-share h2 {
margin-block-end: 0.5rem;
text-transform: uppercase;
text-align: center;
font: var(--font-text);
font-size: 1rem;
font-weight: var(--font-weight-text);
}
.social-share ul {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
.social-share li {
margin: 0;
padding: 0;
}
.social-share a {
display: grid;
place-items: center;
inline-size: 40px;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-color: var(--color-blue-dark);
overflow: hidden;
}
.social-share a:hover {
background-color: var(--color-blue);
}
/* Icon spacing */
.social-share svg {
inline-size: 62%;
}
/* Facebook icon (already circle) */
.social-share a.facebook-share {
border-radius: none;
background-color: transparent;
}
.social-share a.facebook-share:hover {
background-color: transparent;
}
.social-share .facebook-share svg {
inline-size: auto;
fill: var(--color-blue-dark);
transition: fill 200ms;
}
.social-share .facebook-share:hover svg {
fill: var(--color-blue);
}
/* ----- Submenu block ----- */
.block-submenu {
--card-shadow-opacity: 0.1;
margin-block: 0;
background-color: var(--gray-2);
box-shadow: 0 2px 7px rgb(0 0 0 / var(--card-shadow-opacity));
}
.block-submenu h2 {
margin-block: 0;
background-color: var(--color-primary);
padding: 1.125rem 0.5rem;
text-align: center;
font: var(--font-heading);
font-size: var(--font-size-plus-8);
color: var(--white);
}
.block-submenu ul {
margin: 0;
padding: 0;
list-style: none;
}
.block-submenu li {
margin: 0;
padding: 0;
}
.block-submenu li a {
position: relative;
display: block;
padding-block: 0.75rem;
padding-inline: 1.875rem 1rem;
font-size: var(--font-size-minus-1);
color: var(--color-text);
cursor: pointer;
}
.block-submenu li a:hover {
color: var(--color-link);
}
.block-submenu li:not(:last-child) a {
/* Separator */
border-bottom: 1px solid var(--color-background);
}
/* Active link highlight */
.block-submenu li a.is-active {
position: relative;
background-color: var(--gray-1);
color: var(--color-primary);
}
/* Hide parent siblings not within active menu */
.block-submenu > ul > li:not(.active-trail) {
display: none;
}
/* Chevron icons */
.block-submenu > ul.menu > li > a::before {
--summary-icon-size: 0.75rem;
content: "";
position: absolute;
display: block;
inset-block-start: calc(50% - var(--summary-icon-size) / 2);
inset-inline-start: 0.675rem;
inline-size: var(--summary-icon-size);
block-size: var(--summary-icon-size);
background-color: var(--color-primary); /* Use mask to change color in dark mode */
-webkit-mask: var(--icon-down-chevron) no-repeat 50% 50% / 100% auto;
mask: var(--icon-down-chevron) no-repeat 50% 50% / 100% auto;
transition: background-color 200ms;
}
.block-submenu > ul.menu > li > a:not(.is-active)::before {
rotate: 180deg;
}
/* --------------- Membership directory page --------------- */
/* Two column boxes */
@media (min-width: 480px) {
#member-directory .field--name-body ul {
columns: 2;
}
}
#member-directory .field--name-body ul > li {
text-wrap: pretty;
}
/* --------------- Take Action landing page --------------- */
/* Title banner icon */
body:has(.view-take-action) .region-title-banner {
position: relative;
padding-inline-start: calc(var(--container-padding-inline) + 170px);
}
body:has(.view-take-action) .region-title-banner::before {
content: "";
display: block;
position: absolute;
top: 0;
left: var(--container-padding-inline);
block-size: 100%;
inline-size: 140px;
opacity: 0.65;
background-image: url("/themes/dwn/images/icons/megaphone.webp");
background-repeat: no-repeat;
background-size: contain;
background-position: 0 60%;
}
/* Mobile: Move megaphone to title */
@media (max-width: 420px) {
body:has(.view-take-action) .region-title-banner {
padding-inline-start: var(--container-padding-inline);
}
body:has(.view-take-action) .region-title-banner::before {
content: none;
}
body:has(.view-take-action) .region-title-banner h1.page-title {
display: flex;
flex-flow: row nowrap;
gap: clamp(1rem, 0.5vw, 1.5rem);
align-items: center;
}
body:has(.view-take-action) .region-title-banner h1.page-title::before {
content: "";
display: block;
position: relative;
inline-size: 70px;
aspect-ratio: 10 / 11;
margin-block-end: -1.5rem;
opacity: 0.65;
background-image: url("/themes/dwn/images/icons/megaphone.webp");
background-repeat: no-repeat;
background-size: contain;
background-position: 0 0;
}
}
/* Top spacing */
.view-take-action {
margin-block-start: 2.75rem;
}
/* Increase font size */
.view-take-action.view-lists .view-content h2 {
font-size: var(--font-size-plus-10);
}
.view-take-action .view-content .node__links {
margin-block-start: 1.25rem;
font-size: var(--font-size-plus-3);
}
/* --------------- Resources landing page --------------- */
/* Float boxes */
#resources-landing > div > .block:not(.block-views) {
position: relative;
z-index: 2;
clear: right;
float: right;
border-inline-start: 1.5rem solid var(--color-page-background); /* Hide touching list separators */
border-block-end: 2rem solid var(--color-page-background);
margin-block-end: 0;
/* Match two-column layout box width */
inline-size: calc((100% - clamp(2rem, 4.75vw, 4rem)) / 2 - 2.25rem * 2);
}
#resources-landing > div > .infographic {
padding: 2.25rem;
margin-inline: 0;
}
#resources-landing:has(> div > div.infographic:first-child) {
padding-block-start: var(--section-block-padding, 3.5rem); /* Undo top padding reset */
}
/* Mobile: Swap order */
@media (max-width: 750px) {
#resources-landing > div {
display: flex;
flex-flow: column nowrap;
gap: 20px;
}
#resources-landing > div > .block:not(.block-views) {
float: none;
clear: none;
border-inline-start: unset;
inline-size: auto;
}
/* Last box at bottom */
#resources-landing > div > .block:has(+ .block-views) {
margin-block-end: 0;
}
/* Move resources to top */
#resources-landing > div > .block-views {
order: -1;
}
}
/* ----- Resources View (mini teasers) ----- */
/* Content type tag */
.view-lists .tag {
display: block;
inline-size: fit-content;
margin-block: 0 0.375em;
padding: 0.25em 0.5em;
background-color: var(--color-link);
color: var(--white);
font-size: var(--font-size-minus-2);
text-transform: capitalize;
}
.view-lists .view-content h2 {
margin-block-end: 1rem;
}
/* --------------- Resources Views --------------- */
/* No result */
.view-lists .view-empty {
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-plus-2);
}
/* Rows */
.view-lists .view-content .views-row {
display: flow-root; /* Clear floating overflow */
margin-block: 0;
margin-inline: 0;
padding-block: 0;
padding-inline: 0;
}
.view-lists .view-content .views-row:not(:last-child) {
margin-block: 0 2.25rem;
padding-block: 0 2.25rem;
border-block-end: 1px solid var(--color-borders);
}
.view-lists .view-content h2 {
margin-block: 0 1.125rem;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-plus-6);
line-height: var(--font-lineheight-shorter);
font-family: var(--font-family-text);
}
.view-lists .view-content .field--name-field-resource-date,
.block-field-blocknodeact-nowfield-resource-date .field--name-field-resource-date {
margin-block-end: 0.25rem;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-plus-2);
}
.view-lists .view-content .field--name-body {
margin-trim: block-end;
}
/* ----- Pagination ----- */
.pager {
margin-block: 3rem 2rem;
margin-trim: block-end;
padding: 0;
text-align: center;
font-size: var(--font-size-plus-2);
}
.pager ul {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 0.5rem 1.5rem;
margin-block: 0;
padding-inline: 0;
list-style: none;
}
.pager ul > li {
margin: 0;
padding: 0;
}
.pager a {
text-decoration: none;
}
/* Current page */
.pager ul > li.is-active {
margin-inline: -0.5rem;
}
.pager a[aria-current="page"] {
display: inline-block;
block-size: 1lh;
padding: 0.5em;
background-color: var(--color-blue);
border-radius: 50%;
aspect-ratio: 1;
line-height: 1;
color: var(--white);
font-weight: var(--font-weight-bold);
}
/* ----- Pressroom ----- */
/* Reverse order of date field */
.view-pressroom .press-titlearea {
display: flex;
flex-flow: column nowrap;
}
.view-pressroom .view-content .field--name-body {
margin-block-end: 1.5rem;
}
.view-pressroom .view-content .field--name-body > .more {
margin-block-start: 0.75rem;
}
/* ----- Reports ----- */
/* Layout columns */
.view-lists:not(.view-take-action) .node-content:has(.field img) {
display: flex;
flex-flow: row nowrap;
gap: clamp(2rem, 5vw, 3rem);
margin: 0;
padding: 0;
}
/* Thumbnail image and text */
.view-lists:not(.view-take-action) .node-content .field:has(img) {
flex: 0 0 240px; /* Larger for most list views */
}
.view-resources.view-lists .node-content .field:has(img) {
flex: 0 0 160px; /* Smaller for resources roll-up) */
}
.view-lists:not(.view-take-action) .node-content .field img {
inline-size: 100%;
}
/* Mobile: Float image */
@media (max-width: 640px) {
.view-lists:not(.view-take-action) .node-content:has(.field img) {
display: block;
}
.view-lists:not(.view-take-action) .node-content .field:has(img) {
max-inline-size: min(240px, 50%);
margin-block: 0 1.25rem;
margin-inline: 1.5rem 0;
float: right;
}
}
/* Small mobile: Single column */
@media (max-width: 420px) {
.view-lists:not(.view-take-action) .node-content .field:has(img) {
max-inline-size: min(240px, 80%);
margin-inline: auto;
float: none;
}
}
/* Light outline for member resources */
.view-lists .field--name-field-resource-image img {
border: 1px solid var(--gray-2);
}
/* Other field formatting */
.view-lists .field--name-field-report-coauthors {
margin-block-end: 0.75rem;
color: var(--color-text-light);
font-size: var(--font-size-minus-1);
}
.view-lists .field--name-field-report-coauthors .field__label {
font-weight: var(--font-weight-text);
}
.view-lists .field--name-field-report-coauthors div {
display: inline;
}
.view-member-resources.view-lists .field--name-body {
margin-trim: block-end;
}
.view-lists .field--name-body > *:last-child {
margin-block-end: 0;
}
/* Mini view (reports landing page) */
.view-reports.view-display-id-block_recent .view-content h2 {
font-size: var(--font-size-plus-2);
}
.view-reports.view-display-id-block_recent .field--name-field-report-cover {
flex-basis: 140px;
}
.view-reports.view-display-id-block_recent .view-content .field--name-body {
margin-block-start: 0.25rem;
}
.view-reports.view-display-id-block_recent .view-content .field--name-body p {
text-wrap: pretty;
}
/* ----- Exposed filters ----- */
/* Remove intro underline */
.view-header:has(+ .view-filters) .intro {
border-block-end: none;
padding-block-end: 0;
}
/* Full page */
.view-lists form.views-exposed-form,
div.views-exposed-form form {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
justify-content: space-between;
gap: 1.75rem 2rem;
padding-block: 2rem;
padding-inline: var(--container-padding-inline, 0px);
background-color: var(--color-boxes);
font-size: var(--font-size-base);
}
/* Attached filters (full width) */
.view-lists form.views-exposed-form {
margin-block-end: 2.75rem;
margin-inline: var(--container-margin-inline-stretch, 0px);
}
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) .form-item {
margin-block: 0;
}
/* Hide labels */
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) label {
position: absolute !important;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
inline-size: 1px;
block-size: 1px;
word-wrap: normal;
}
/* Select filter */
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) select {
-webkit-appearance: menulist-button;
appearance: menulist-button;
inline-size: 100%;
block-size: 38px;
padding-block: 0;
padding-inline: 0.75em;
border: 1px solid var(--color-borders);
border-radius: 0.25rem;
background-color: var(--white);
}
/* Text filters */
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) input:not([type="radio"], [type="checkbox"]) {
inline-size: calc(100% - 1.5em - 2px);
min-inline-size: 150px;
max-inline-size: none;
block-size: calc(38px - 1em - 2px);
}
/* Search filter */
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) .form-item-keyword {
position: relative;
grid-row: 1;
grid-column: 3;
}
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) .form-item-keyword input[type="search"] {
/* Different appearance box model */
inline-size: 100%;
block-size: 38px;
padding-inline-end: 2.25rem;
}
/* Apply button */
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) .form-actions {
grid-row: 1;
grid-column: 3;
position: relative;
z-index: 5;
display: grid;
place-items: center;
inline-size: fit-content;
block-size: 100%;
inset-block-start: 0;
inset-inline-end: 0.6rem;
margin-block: 0;
margin-inline: auto 0;
}
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) button[type="submit"] {
background: transparent;
padding: 0;
border: none;
color: var(--color-text);
cursor: pointer;
}
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) button[type="submit"]:hover {
color: var(--color-link);
}
@media screen and (max-width: 680px) {
/* Large mobile wrapping */
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) {
grid-template-columns: 1fr 1fr;
}
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) :is(.form-item-keyword, .form-actions) {
grid-row: 2;
grid-column: 1 / span 2;
}
}
@media screen and (max-width: 415px) {
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) {
grid-template-columns: 1fr;
}
:is(.view-lists form.views-exposed-form, div.views-exposed-form form) :is(.form-item-keyword, .form-actions) {
grid-row: 3;
grid-column: 1;
}
}
/* --------------- Press releases --------------- */
/* Release date */
.node--type-press.node--view-mode-full .field--name-field-resource-date {
display: flex;
flex-flow: row wrap;
margin-block-end: 1.75rem;
font-size: var(--font-size-plus-2);
}
.node--type-press.node--view-mode-full .field--name-field-resource-date .field__label {
font-weight: var(--font-weight-bold);
}
/* Subtitle */
.node--type-press .field--name-field-release-subtitle {
margin-block: 0 1.75rem;
font-size: var(--font-size-plus-3);
text-align: center;
font-style: italic;
text-wrap: balance;
}
/* Footer topics */
.topics-links {
margin-block-end: 1.75rem;
}
.topics-links ul {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}
.topics-links li {
display: inline;
margin: 0;
padding: 0;
}
.topics-links a {
white-space: nowrap;
}
.topics-links li:not(:last-child)::after {
content: ", ";
}
/* --------------- Reports (uses Layout Builder) --------------- */
/* Un-collapse heading */
article.node--type-report.node--view-mode-full > section.node-content:first-child:has(> h2) {
margin-trim: initial;
}
/* Cover image */
.node--type-report.node--view-mode-full .block-field-blocknodereportfield-report-cover:has(+ div) {
margin-block-end: 2.5rem;
}
.node--type-report.node--view-mode-full .block-field-blocknodereportfield-report-cover .field--type-image img {
inline-size: 100%;
max-inline-size: 360px;
margin-inline: auto;
}
/* Document download */
.node--type-report.node--view-mode-full .block-field-blocknodereportfield-report-downloads {
--color-text: var(--white);
--color-highlight: var(--color-orange-light);
--color-heading: var(--white);
--color-link: var(--white);
--color-link-visited: var(--gray-1);
--color-link-hover: var(--gray-3);
--color-link-underline: rgb(255 255 255 / 0.4);
position: relative;
z-index: 2;
margin-block-end: 1.5rem;
margin-trim: block-end;
padding: 2.25rem;
background-color: hsl(20 98% 41%);
border-radius: 0.1875rem;
}
/* Box background icons */
.node--type-report.node--view-mode-full .block-field-blocknodereportfield-report-downloads::before,
.node--type-report.node--view-mode-full .block-field-blocknodereportfield-report-downloads::after {
content: "";
display: block;
position: absolute;
z-index: 0;
top: -23px;
right: -18px;
inline-size: 120px;
block-size: 120px;
pointer-events: none;
}
.node--type-report.node--view-mode-full .block-field-blocknodereportfield-report-downloads::before {
/* Circle outline */
border-radius: 100%;
background-color: rgb(255 255 255 / 0.1);
}
.node--type-report.node--view-mode-full .block-field-blocknodereportfield-report-downloads::after {
/* Icon */
background-color: hsl(20 98% 41%);
-webkit-mask: var(--icon-reports) no-repeat 50% 50% / 65% auto;
mask: var(--icon-reports) no-repeat 50% 50% / 65% auto;
}
.node--type-report.node--view-mode-full .block-field-blocknodereportfield-report-downloads > * {
position: relative;
z-index: 1;
}
/* Link spacing */
.node--type-report.node--view-mode-full .block-field-blocknodereportfield-report-downloads .field--name-field-report-downloads {
display: flex;
flex-flow: column wrap;
gap: 0.75rem;
}
/* Remove default file icons */
.node--type-report.node--view-mode-full .block-field-blocknodereportfield-report-downloads .file {
display: block;
background: none;
min-height: auto;
padding-inline: 0;
text-wrap: pretty;
}
.node--type-report.node--view-mode-full .block-field-blocknodereportfield-report-downloads .file a {
font-weight: var(--font-weight-semibold);
}
/* Report date */
.node--type-report.node--view-mode-full .field--name-field-resource-date {
margin-block-end: 1rem;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-plus-4);
}
/* Co-authors */
.node--type-report.node--view-mode-full .field--name-field-report-coauthors {
margin-block-end: 1.75rem;
}
.node--type-report.node--view-mode-full .field--name-field-report-coauthors > div {
display: inline;
}
.node--type-report.node--view-mode-full .field--name-field-report-coauthors .field__label {
float: none;
padding-inline-end: 0.125rem;
font-weight: var(--font-weight-semibold);
}
/* --------------- Resources (Organizational Letters, Analysis, Reports) --------------- */
/* Resource date */
.node--view-mode-full .field--name-field-resource-date {
margin-block-end: 1rem;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-plus-4);
}
/* Document download */
.node--view-mode-full .field--name-field-resource-document {
--color-text: var(--white);
--color-highlight: var(--color-orange-light);
--color-heading: var(--white);
--color-link: var(--white);
--color-link-visited: var(--gray-1);
--color-link-hover: var(--gray-3);
--color-link-underline: rgb(255 255 255 / 0.4);
position: relative;
z-index: 2;
clear: right;
float: right;
/* Match two-column layout box width */
inline-size: calc((100% - clamp(2rem, 4.75vw, 4rem)) / 2 - 2.25rem * 2);
margin-block-end: 1.5rem;
margin-trim: block-end;
padding: 2.25rem;
border-inline-start: 1.5rem solid var(--color-background);
background-color: var(--gray-9);
border-radius: 0.1875rem;
@media (max-width: 639px) {
float: none;
border-inline-start: unset;
inline-size: auto;
}
}
/* Box background icons */
.node--view-mode-full .field--name-field-resource-document::before,
.node--view-mode-full .field--name-field-resource-document::after {
content: "";
display: block;
position: absolute;
z-index: 0;
top: -23px;
right: -18px;
inline-size: 120px;
block-size: 120px;
pointer-events: none;
}
.node--view-mode-full .field--name-field-resource-document::before {
/* Circle outline */
border-radius: 100%;
background-color: rgb(255 255 255 / 0.1);
}
.node--view-mode-full .field--name-field-resource-document > * {
position: relative;
z-index: 1;
}
.node--view-mode-full .field--name-field-resource-document h3 {
font-weight: var(--font-weight-heading);
}
/* Remove default file icons */
.node--view-mode-full .field--name-field-resource-document .file {
display: block;
background: none;
min-height: auto;
padding-inline: 0;
text-wrap: pretty;
}
.node--view-mode-full .field--name-field-resource-document .file a {
font-weight: var(--font-weight-semibold);
}
/* Analysis background and icons */
.node--type-analysis.node--view-mode-full .field--name-field-resource-document {
background-color: hsl(192 100% 30%);
}
.node--type-analysis.node--view-mode-full .field--name-field-resource-document::after {
background-color: hsl(192 100% 30%);
-webkit-mask: var(--icon-analysis) no-repeat 50% 50% / 60% auto;
mask: var(--icon-analysis) no-repeat 50% 50% / 60% auto;
}
/* Organizational Letters background and icons */
.node--type-signon-letter.node--view-mode-full .field--name-field-resource-document {
background-color: var(--color-blue-dark);
}
.node--type-signon-letter.node--view-mode-full .field--name-field-resource-document::after {
background-color: var(--color-blue-dark);
-webkit-mask: var(--icon-signon) no-repeat 50% 50% / 60% auto;
mask: var(--icon-signon) no-repeat 50% 50% / 60% auto;
}
/* --------------- Member Resources --------------- */
/* Member profile block */
.block-dwn-neon-member-profile-block dl {
overflow-wrap: anywhere;
}
/* Reverse order of date field */
.view-member-resources .resource-titlearea {
display: flex;
flex-flow: column nowrap;
}
.view-member-resources .view-content h2 {
order: 1;
margin-block-end: 1.5rem;
}
/* Resource type link */
.view-member-resources .field--name-field-resource-type {
order: 0;
inline-size: fit-content;
margin-block: 0 0.375em;
}
.view-member-resources .field--name-field-resource-type a {
display: block;
padding: 0.25em 0.5em;
background-color: var(--color-link);
color: var(--white);
font-size: var(--font-size-minus-2);
font-weight: var(--font-weight-semibold);
line-height: var(--font-lineheight-shorter);
text-transform: capitalize;
text-decoration: none;
}
/* Content column */
.view-member-resources.view-lists .view-content .report-content > * {
margin-block: 0 0.75rem; /* Cannot use flexbox column so content can float/wrap at mobile */
}
.view-member-resources.view-lists .view-content .report-content > *:last-child {
margin-block-end: 0;
}
/* Resource tag links */
.view-member-resources .field--name-field-resource-tags .field__items {
display: flex;
flex-flow: row wrap;
gap: 0.5rem;
}
.view-member-resources .field--name-field-resource-tags a {
display: block;
background-color: var(--gray-1);
padding: 0.25em 0.5em;
font-size: 0.875rem;
text-decoration: none;
}
/* --------------- Search form --------------- */
.search-form {
margin-block-end: 2rem;
}
/* Hide help link */
.search-help-link {
display: none;
}
/* Hide results heading */
.search-form + h2 {
position: absolute !important;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
inline-size: 1px;
block-size: 1px;
word-wrap: normal;
}
.search-form + .item-list,
.search-form + h2 + .item-list {
margin-block-end: 3rem;
}
/* --------------- Drupal styles --------------- */
/* Fix contextual links */
.contextual-region .contextual .contextual-links a {
font-weight: normal;
}
/* ----- Action links (custom blocks) ----- */
/* Reorder buttons */
#block-dwn-staff-reorder-link {
position: relative;
z-index: 1; /* Push above title */
top: 3rem;
float: right;
padding-inline-end: var(--container-padding-inline);
}
@media print {
:is(#block-dwn-staff-reorder-link) {
display: none;
}
}
@media screen and (max-width: 600px) {
:is(#block-dwn-staff-reorder-link) {
top: 1rem;
float: none;
text-align: right;
}
}
:is(#block-dwn-staff-reorder-link) p {
margin-block: 0;
}
:is(#block-dwn-staff-reorder-link) a.button {
padding-inline-start: 3.15em;
background-image: url('data:image/svg+xml,');
background-size: 1.2em auto;
background-repeat: no-repeat;
background-position: 1.65em 50%;
white-space: nowrap;
}
/* --------------- Custom block fields --------------- */
/* Image block: Maximum width field (so datalist options appear) */
form input[list="maxwidth-options"] {
-moz-appearance: textfield;
min-inline-size: 180px;
}
form input[list="maxwidth-options"]::-webkit-outer-spin-button,
form input[list="maxwidth-options"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* --------------- Homepage --------------- */
/* Language switcher: Position over hero */
.path-frontpage .region-title-banner {
position: absolute;
z-index: 10;
right: 0;
padding-inline-start: 0;
padding-block-end: 0;
background: transparent none;
display: block;
}
/* Current language link */
.path-frontpage .region-title-banner .language-switcher ul a.is-active {
border-color: rgb(255 255 255 / 0.2);
}
.path-frontpage:has(.region-pre-content) .region-title-banner {
margin-block-start: 58px;
}
.path-frontpage .field--name-body {
margin-trim: block-end;
}
.path-frontpage .field--name-body > *:last-child {
margin-block-end: 0;
}
/* ----- Hero ----- */
.path-frontpage section#hero {
padding-block: 0;
}
.path-frontpage .homepage-hero {
background:
/* Darken behind words */
radial-gradient(circle farthest-side at calc((100vw - 950px) / 2 + 17vw) 65%, rgba(0, 0, 20, 0.6) 40%, rgba(0, 0, 0, 0) 60%),
/* Darken left half */
radial-gradient(circle farthest-side at 90% -5%, rgba(5, 5, 5, 0) 0%, rgba(0, 50, 80, 0.5) 85%),
/* Red top-right */
radial-gradient(ellipse farthest-side at calc(var(--red-percent, 20) * 1%) -15%, rgba(200, 0, 0, 0.5) 15%, rgba(255, 255, 255, 0) 80%),
/* Teal top-left */
radial-gradient(ellipse farthest-corner at calc(var(--teal-percent, 20) * 1%) -15%, rgba(115, 255, 255, 0.75) 10%, rgba(255, 255, 255, 0) 40%),
/* Image */
url("/sites/default/files/images/2025/homepage-hero.webp");
background-repeat: no-repeat;
background-size: cover;
min-height: 300px;
padding-block: 3rem 6rem;
text-wrap: pretty;
animation: homepage-hero-red 20s 1s infinite linear,
homepage-hero-teal 15s 2s infinite linear;
}
/* Subtle color animation */
@property --red-percent {
initial-value: 100;
inherits: false;
syntax: '';
}
@property --teal-percent {
initial-value: 20;
inherits: false;
syntax: '';
}
@keyframes homepage-hero-red {
0, 100% {
--red-percent: 100;
}
50% {
--red-percent: 30;
}
}
@keyframes homepage-hero-teal {
0, 100% {
--teal-percent: 20;
}
50% {
--teal-percent: 70;
}
}
.path-frontpage .homepage-hero h1 {
margin-block: 0 2rem;
color: var(--color-orange);
color: white;
font-size: 4rem;
line-height: 1.2;
max-inline-size: 540px;
}
.path-frontpage .homepage-hero h1 em {
font-style: normal;
color: #ecb;
}
.path-frontpage .homepage-hero p {
margin-block: 0 3rem;
font-size: var(--font-size-plus-2);
color: white;
max-inline-size: 540px;
}
.path-frontpage .homepage-hero .links {
justify-content: start;
font-size: var(--font-size-plus-1);
}
/* Introduction box */
.path-frontpage #intro .box {
margin-block: -7rem 0;
margin-inline: clamp(0px, 3.5vw, 2rem);
background-color: var(--white);
}
/* Latest Updates view */
.path-frontpage #updates h3 {
font-size: var(--font-size-plus-10);
}
.block-views-blocklatest-updates-block-simple .item-list ul:not(.contextual-links) {
margin-block: 0 3rem;
list-style: none;
}
.block-views-blocklatest-updates-block-simple .item-list ul:not(.contextual-links) > li {
margin-inline: 0;
margin-block: 0 1.5rem;
}
.block-views-blocklatest-updates-block-simple .item-list ul:not(.contextual-links) > li:not(:last-child) {
padding-block: 0 1.5rem;
border-block-end: 1px solid rgb(255 255 255 / 0.25);
}
.block-views-blocklatest-updates-block-simple .views-field-type {
font-size: var(--font-size-minus-2);
opacity: 0.8;
}
.block-views-blocklatest-updates-block-simple .views-field-field-resource-date {
margin-block: 0 0.4rem;
font-size: var(--font-size-plus-2);
font-weight: var(--font-weight-semibold);
}
/* CNC Campaign */
.path-frontpage #communitiesnotcages .layout-columns .field--name-body {
font-size: clamp(var(--font-size-base), 1.6vw, var(--font-size-plus-4));
}
.path-frontpage #communitiesnotcages .layout-columns .field--name-body p {
text-wrap: balance;
}
/* Membership */
.path-frontpage #membership {
background-color: hsl(229 37% 15%);
}
/* --------------- Unbuild Walls Book Hero --------------- */
/* Hide regular title */
body:has(#book-hero) .region-title-banner {
display: none;
}
#book-hero {
margin-block-end: var(--section-block-padding, 3.5rem);
padding-block: var(--section-block-padding, 3.5rem);
background-color: #aae1fc; /* Match book blue */
}
#book-hero .container {
display: grid;
grid-template-areas:
"cover title"
"cover author"
"cover abstract"
"cover purchase";
grid-template-columns: clamp(200px, 23vw, 240px) 1fr;
gap: 1rem 2.5rem;
}
@media (max-width: 550px) {
#book-hero .container {
grid-template-areas:
"cover title"
"cover author"
"abstract abstract"
"purchase purchase";
grid-template-columns: clamp(170px, 37vw, 200px) 1fr;
gap: 1.125rem 2.5rem;
}
}
@media (max-width: 448px) {
#book-hero .container {
grid-template-areas:
"cover"
"title"
"author"
"abstract"
"purchase";
grid-template-columns: 1fr;
gap: 1.25rem;
}
#book-hero .book-cover {
margin-inline: auto;
max-inline-size: 230px;
}
}
#book-hero .container p {
margin-block: 0;
margin-inline: 0;
}
/* Book cover */
#book-hero .book-cover {
grid-area: cover;
margin-block: 0;
perspective: 800px; /* Angle book */
}
#book-hero .book-cover a {
display: block;
margin-inline: auto;
cursor: pointer;
will-change: transform;
transform-style: preserve-3d;
}
/* Hover animations */
@media (prefers-reduced-motion: no-preference) {
#book-hero .book-cover a {
transition: transform 450ms ease-in-out;
}
#book-hero .book-cover a:hover,
#book-hero .book-cover a:focus-within {
transform: rotateY(14deg) rotateX(3deg) translateX(8px) scale(1.03);
}
}
#book-hero .book-cover a img {
transition: box-shadow 450ms;
box-shadow: 0 0 0.5rem 0.1rem rgb(0 0 0 / 0.35);
}
#book-hero .book-cover a:hover img {
box-shadow: 0 0 0.7rem 0.2rem rgb(0 0 0 / 0.2);
}
#book-hero h1 {
grid-area: title;
margin-block: 0;
color: var(--color-text);
font-weight: 400;
}
#book-hero h1 small {
display: block;
margin-block-start: 0.25rem;
font-size: 1.75rem;
line-height: 1.25;
}
#book-hero .book-author {
grid-area: author;
}
#book-hero .book-abstract {
grid-area: abstract;
}
#book-hero .book-purchase {
grid-area: purchase;
display: flex;
flex-flow: row wrap;
gap: 0.75rem;
align-items: start;
@media (max-width: 640px) {
align-items: stretch;
flex-direction: column;
}
}
/* --- Resources promo box --- */
.unbuild-promo {
display: flow-root;
margin-trim: block-end;
}
/* Book cover */
.unbuild-promo .book-cover {
max-inline-size: 70%;
margin-block: 0 1.5rem;
margin-inline: auto;
perspective: 800px; /* Angle book */
@media ((min-width: 445px) and (max-width: 639px)) or (min-width: 880px) {
float: right;
inline-size: 165px;
margin-inline: 1.75rem 0;
}
}
.unbuild-promo .book-cover a {
display: block;
cursor: pointer;
will-change: transform;
transform-style: preserve-3d;
}
/* Hover animations */
@media (prefers-reduced-motion: no-preference) {
.unbuild-promo .book-cover a {
transition: transform 450ms ease-in-out;
}
.unbuild-promo .book-cover a:hover,
.unbuild-promo .book-cover a:focus-within {
transform: rotateY(-14deg) rotateX(3deg) translateX(-2px) scale(1.03);
}
}
.unbuild-promo .book-cover a img {
margin-inline: auto;
transition: box-shadow 450ms;
box-shadow: 0 0 0.5rem 0.1rem rgb(0 0 0 / 0.35);
}
.unbuild-promo .book-cover a:hover img {
box-shadow: 0 0 0.7rem 0.2rem rgb(0 0 0 / 0.2);
}
.unbuild-promo h3 small {
display: block;
margin-block-start: 0.375rem;
font-size: 0.75em;
line-height: 1.25;
}
.unbuild-promo p {
margin-block-end: 1.5em;
}
.unbuild-promo p:last-child {
margin-block-end: 0;
}
/* --------------- Individual member application modal --------------- */
/* Work around CKEditor id bug */
section[id^="apply-individual"] {
margin-block-end: 2rem;
margin-inline: 2rem;
outline: 5px solid var(--gray-4);
}
:is(section, dialog)[id^="apply-individual"] :is(h2, h3) {
font-size: var(--font-size-plus-9);
margin-block-end: 1.75rem;
text-align: center;
}
/* Tabs outer grid */
.application-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
gap: 2rem 2rem;
details {
display: grid;
grid-column: 1 / -1;
grid-row: 1 / span 2;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
align-items: start;
}
/* Buttons */
details > summary {
grid-row: 1;
inline-size: fit-content;
z-index: 1;
cursor: pointer;
}
details:first-child > summary {
grid-column: 1 / span 1;
justify-self: end;
}
details:last-child > summary {
grid-column: 2 / span 1;
}
/* Content subgrid stretch full width */
details::details-content,
details > .details-wrapper {
position: relative;
z-index: 2;
grid-row: 2;
grid-column: 1 / -1;
margin-inline: 0;
}
/* Stop hidden tab from overlapping */
details:not([open])::details-content,
details:not([open]) > .details-wrapper {
display: none;
}
details > *:last-child > *:last-child,
details > *:last-child > *:last-child > *:last-child,
details > *:last-child > *:last-child > *:last-child > *:last-child {
margin-block-end: 0;
}
/* Summary button */
details > summary::before {
content: none;
}
details > summary {
position: relative;
margin-block-end: 1.5rem;
padding: 0.6875em 1.5em;
border: 1px solid var(--color-orange);
text-align: center;
color: var(--color-orange);
background-color: var(--white);
font-weight: var(--font-weight-link);
font-family: var(--font-family-button);
font-size: var(--font-size-button);
line-height: var(--font-lineheight-shorter);
text-transform: uppercase;
text-decoration: none;
}
details > summary:is(:hover, :active) {
border-color: var(--color-orange-dark);
background-color: rgb(255 255 255 / 0.9);
color: var(--color-orange-dark);
text-decoration: none;
}
details[open] > summary {
background-color: var(--color-orange);
color: white;
}
details[open]:not(.ck-widget) > summary::after {
content: "";
background-color: var(--color-text);
-webkit-mask: var(--icon-down-chevron) no-repeat 50% 0 / 22px auto;
mask: var(--icon-down-chevron) no-repeat 50% 0 / 22px auto;
color: #fff;
display: block;
position: absolute;
left: 0;
inline-size: 100%;
block-size: 20px;
margin-block-start: 1.75em;
}
}
/* Reduce spacing */
dialog .application-tabs details {
margin-block-end: 0;
}