/* Core blocks with the site's look (see inc/block-styles.php). Loaded on pages, single posts and in the editor. Looks hang on block style variations (is-style-rhsa-*) and a few named classes, never on a page or block ID. Spacing, colors and sizes that differ from these defaults are each block's own sidebar settings. Colors are the style.css tokens. */ /* Phones: the lead size steps down, as in typography.css. */ @media (max-width: 600px) { body { --wp--preset--font-size--lead: 18px; } } /* Sections: full-width bands whose content sits in the page column (90% of the window, at most 1170px; see assets/css/layout.css). No margins unless the block sets its own (the doubled :is() outweighs Astra's). */ :is(.is-style-rhsa-section, .is-style-rhsa-section-dark, .is-style-rhsa-section-tint):is(.is-style-rhsa-section, .is-style-rhsa-section-dark, .is-style-rhsa-section-tint) { box-sizing: border-box; position: relative; margin-top: 0; margin-bottom: 0; padding: 0; /* Astra pads top-level groups 3em; a block's own padding wins */ } :is(.is-style-rhsa-section, .is-style-rhsa-section-dark, .is-style-rhsa-section-tint) > :not(.alignfull) { box-sizing: border-box; width: 100%; /* fills the column in a flex section (rhsa-stack) too */ max-width: min(1170px, 90%); margin-left: auto !important; margin-right: auto !important; } .is-style-rhsa-section-dark { background-color: var(--rhsa-ink); color: #fff; } .is-style-rhsa-section-tint { background-color: var(--rhsa-tint); } .is-style-rhsa-section-dark :is(h1, h2, h3, h4, h5, h6):not(.has-text-color) { color: #fff; } /* Converted Columns placed straight on a page: no Astra block padding (3em) unless the block sets its own. */ .entry-content > .wp-block-columns.rhsa-stack-gap { padding-top: 0; padding-bottom: 0; } /* Hero: a full-width photo with its text in the page column. */ .wp-block-cover.is-style-rhsa-hero { padding-left: 0; padding-right: 0; } .wp-block-cover.is-style-rhsa-hero > .wp-block-cover__inner-container { box-sizing: border-box; width: min(1170px, 90%); max-width: none; margin-left: auto; margin-right: auto; } /* A blurred circle of color behind a section's left side (rhsa-glow with rhsa-glow-pink, -red or -teal). Content stays above it. */ .rhsa-glow { position: relative; overflow: hidden; isolation: isolate; } .rhsa-glow::before { content: ""; position: absolute; z-index: -1; top: 70px; left: -5%; width: 300px; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); pointer-events: none; } .rhsa-glow-pink::before { background: rgba(241, 191, 208, .4); } .rhsa-glow-teal::before { background: rgba(29, 48, 53, .4); } .rhsa-glow-red::before { background: rgba(166, 9, 7, .1); top: 100px; left: 5%; width: 400px; } @media (max-width: 1366px) { .rhsa-glow::before { width: 250px; top: 90px; } .rhsa-glow-red::before { left: 0; width: 400px; top: 100px; } } @media (max-width: 1024px) { .rhsa-glow::before { width: 200px; top: 130px; } .rhsa-glow-red::before { width: 300px; top: 100px; } } @media (max-width: 767px) { .rhsa-glow::before { top: 150px; } .rhsa-glow-red::before { top: 100px; } } @media (max-width: 480px) { .rhsa-glow::before { width: 150px; top: 170px; left: 0; } .rhsa-glow-red::before { width: 300px; top: 100px; left: -10%; } } /* Photo halves: full-width Columns with text in the page column and a photo (a Cover) running to the window's edge. rhsa-photo-first puts the photo above the text on phones. */ .rhsa-photo-half.alignfull, :is(.is-style-rhsa-section, .is-style-rhsa-section-dark, .is-style-rhsa-section-tint) > .wp-block-columns.alignfull { max-width: none; width: 100%; margin-left: 0 !important; margin-right: 0 !important; } .rhsa-photo-half.alignfull { margin: 0 !important; } .rhsa-photo-half > .wp-block-column { display: flex; flex-direction: column; } .rhsa-photo-half > .wp-block-column > .wp-block-cover.rhsa-photo, .wp-block-column > .wp-block-cover.rhsa-photo:only-child { flex: 1 1 auto; margin: 0; } .wp-block-column:has(> .wp-block-cover.rhsa-photo:only-child) { display: flex; flex-direction: column; } .rhsa-gutter-start { padding-left: max(5vw, calc((100vw - 1170px) / 2)) !important; } .rhsa-gutter-end { padding-right: max(5vw, calc((100vw - 1170px) / 2)) !important; } @media (max-width: 781px) { .rhsa-photo-half.rhsa-photo-first { flex-direction: column-reverse; } .rhsa-photo-half > .wp-block-column:has(> .rhsa-photo) { padding-top: 0 !important; padding-bottom: 0 !important; } .rhsa-gutter-end { padding-left: 5vw !important; } .rhsa-gutter-start { padding-right: 5vw !important; } } /* rhsa-hover-zoom: pointing at the block slowly enlarges the photos behind its boxes (Covers). Still for visitors who ask for less motion. */ .rhsa-hover-zoom .wp-block-cover { overflow: hidden; } .rhsa-hover-zoom .wp-block-cover__image-background { transition: transform .3s ease; } .rhsa-hover-zoom:hover .wp-block-cover__image-background { transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { .rhsa-hover-zoom .wp-block-cover__image-background { transition: none; } .rhsa-hover-zoom:hover .wp-block-cover__image-background { transform: none; } } /* rhsa-stack-gap: stacked columns are as far apart as their block gap says, without the 20px Astra adds under each one on phones. */ @media (max-width: 544px) { .wp-block-columns.rhsa-stack-gap > .wp-block-column:not(:last-child) { margin-bottom: 0; } } /* rhsa-cols-wrap: Columns that wrap onto more lines on wide screens too (each column's width says how many share a line). */ .wp-block-columns.rhsa-cols-wrap { flex-wrap: wrap !important; } /* rhsa-cols-2up: Columns that sit two to a line on phones and tablets instead of one (WordPress stacks them below 782px). */ @media (max-width: 781px) { .wp-block-columns.rhsa-cols-2up { flex-wrap: wrap !important; } .wp-block-columns.rhsa-cols-2up > .wp-block-column { flex: 1 1 calc(50% - 30px) !important; } } /* Cards: white boxes with round corners. */ .is-style-rhsa-card { box-sizing: border-box; background-color: #fff; border-radius: 20px; overflow: hidden; } /* Pill buttons; every one hovers to ink. A button with the rhsa-arrow class gets an arrow after its label. */ .wp-block-button[class*="is-style-rhsa-pill"] .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 2px solid; border-radius: 999px; padding: 14px 28px; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; } .wp-block-button.is-style-rhsa-pill-red .wp-block-button__link { background-color: var(--rhsa-red); border-color: var(--rhsa-red); color: #fff; } .wp-block-button.is-style-rhsa-pill-outline .wp-block-button__link { background-color: transparent; border-color: var(--rhsa-ink); color: var(--rhsa-ink); } .wp-block-button.is-style-rhsa-pill-white .wp-block-button__link { background-color: #fff; border-color: #fff; color: var(--rhsa-ink); } .wp-block-button[class*="is-style-rhsa-pill"] .wp-block-button__link:is(:hover, :focus-visible) { background-color: var(--rhsa-ink) !important; border-color: var(--rhsa-ink) !important; color: #fff !important; } .wp-block-button[class*="is-style-rhsa-pill"] .wp-block-button__link:focus-visible { outline: 2px solid var(--rhsa-ink); outline-offset: 3px; } .wp-block-button.rhsa-arrow .wp-block-button__link::after { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.15 5l7 7-7 7m7-7H1.85'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.15 5l7 7-7 7m7-7H1.85'/%3E%3C/svg%3E") center / contain no-repeat; } /* rhsa-arrow-box: the arrow centered in a 34px box, 14px from the label. */ .wp-block-button.rhsa-arrow-box .wp-block-button__link { gap: 14px; } .wp-block-button.rhsa-arrow-box .wp-block-button__link::after { width: 34px; height: 34px; -webkit-mask-size: 16px 16px; mask-size: 16px 16px; } /* Plain buttons: no fill or border, just the label (and arrow); a red glow around them with rhsa-glow. */ .wp-block-button.is-style-rhsa-plain .wp-block-button__link { display: inline-flex; align-items: center; gap: 12px; background-color: transparent; border: 0; color: var(--rhsa-ink); text-decoration: none; } .wp-block-button.is-style-rhsa-plain .wp-block-button__link:hover { color: var(--rhsa-ink) !important; } .wp-block-button.rhsa-glow .wp-block-button__link { box-shadow: 0 0 8px rgba(166, 9, 7, .16); } /* Display text in the condensed face. */ .rhsa-cond.rhsa-cond { font-family: var(--rhsa-cond) !important; } /* Images brought over from MaxiBlocks have no frame (Astra shadows figures in single posts) and no margins of their own (Astra gives images in posts 2em above and 3em below); spacing is each block's own setting. */ .wp-block-image.rhsa-flat, .wp-block-image.rhsa-flat img { box-shadow: none !important; } .entry-content .wp-block-image.rhsa-flat { margin-top: 0; margin-bottom: 0; } /* Links in text brought over from MaxiBlocks: the site red. */ .entry-content :is(p.wp-block-paragraph, .wp-block-list > li, .wp-block-heading) a:where(:not(.wp-element-button)) { color: var(--rhsa-red); } /* Lists with red dots between thin rules (the Book strip's features). */ .wp-block-list.is-style-rhsa-dots { list-style: none; margin: 0; padding: 0; } .wp-block-list.is-style-rhsa-dots > li { position: relative; margin: 0; padding: 12px 0 12px 20px; border-bottom: 1px solid var(--rhsa-line); color: var(--rhsa-ink) !important; font-weight: 400; } .wp-block-list.is-style-rhsa-dots > li:first-child { border-top: 1px solid var(--rhsa-line); } .wp-block-list.is-style-rhsa-dots > li::before { content: ""; position: absolute; left: 0; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--rhsa-red); } /* Red markers: plain bullets in the site red (MaxiBlocks' default list). */ .wp-block-list.is-style-rhsa-red-markers > li::marker { color: var(--rhsa-red); } /* Sparkle markers: bold ink items, each after a four-point star, 32px and centered on the first line, as MaxiBlocks' custom SVG marker was. */ .wp-block-list.is-style-rhsa-sparkle { list-style: none; } .wp-block-list.is-style-rhsa-sparkle > li { color: var(--rhsa-ink); font-weight: 700; } .wp-block-list.is-style-rhsa-sparkle > li + li { margin-top: 4px; } .wp-block-list.is-style-rhsa-sparkle > li::before { content: ""; display: inline-block; width: 2em; height: 2em; margin: 0 0.5em 0 -2.5em; vertical-align: middle; background: currentColor; -webkit-mask: var(--rhsa-sparkle) center / contain no-repeat; mask: var(--rhsa-sparkle) center / contain no-repeat; --rhsa-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36.1 36.1'%3E%3Cpath d='M28.7 18.05c-8.233 0-10.65 3.995-10.65 17.6 0-13.605-2.418-17.6-10.65-17.6 8.233 0 10.65-3.995 10.65-17.6 0 13.605 2.418 17.6 10.65 17.6z'/%3E%3C/svg%3E"); } /* No markers: items stacked flush left, 10px apart. */ .wp-block-list.is-style-rhsa-no-markers { list-style: none; padding-left: 0; } .wp-block-list.is-style-rhsa-no-markers > li + li { margin-top: 10px; } /* Tight lines for big display text that wraps. */ :is(h1, h2, h3, h4, h5, h6, p).is-style-rhsa-tight.is-style-rhsa-tight { line-height: 1.1 !important; } /* Rules: a thin line, in the line color unless the block sets one (its background color); rhsa-rule-2/3/4 make it thicker. The hr and :not() outweigh core's 100px separator width. */ hr.wp-block-separator.is-style-rhsa-rule:not(.is-style-dots) { border: 0; height: 1px; background-color: var(--rhsa-line); opacity: 1; width: 100%; max-width: none; margin-left: 0; margin-right: 0; } hr.wp-block-separator.is-style-rhsa-rule.has-text-color:not(.is-style-dots) { background-color: currentColor; } .is-layout-flex > hr.wp-block-separator.is-style-rhsa-rule:not(.is-style-dots) { width: auto; margin: 0; } hr.wp-block-separator.is-style-rhsa-rule.rhsa-rule-2:not(.is-style-dots) { height: 2px; } hr.wp-block-separator.is-style-rhsa-rule.rhsa-rule-3:not(.is-style-dots) { height: 3px; } hr.wp-block-separator.is-style-rhsa-rule.rhsa-rule-4:not(.is-style-dots) { height: 4px; } /* News cards: the latest posts in white cards on a tint section. */ .is-style-rhsa-news-cards .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 2.5%; margin: 0; padding: 0; list-style: none; } .is-style-rhsa-news-cards .wp-block-post-template > li { margin: 0; } .is-style-rhsa-news-cards .rhsa-news-card { height: 100%; box-sizing: border-box; padding: 15px; background: #fff; border-radius: 20px; } .is-style-rhsa-news-cards .wp-block-post-featured-image { margin: 0; border-radius: 20px; overflow: hidden; } .is-style-rhsa-news-cards .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .is-style-rhsa-news-cards .rhsa-news-card:hover .wp-block-post-featured-image img { transform: scale(1.06); } .is-style-rhsa-news-cards .rhsa-news-card > * { margin-block: 0; } .is-style-rhsa-news-cards .rhsa-news-card__body { padding: 22px 20px 20px; } .is-style-rhsa-news-cards .rhsa-news-card__body > * { margin-top: 0; } .is-style-rhsa-news-cards .wp-block-post-terms { margin-bottom: 15px; } .is-style-rhsa-news-cards .wp-block-post-title { margin: 0 0 15px; font-family: var(--rhsa-cond); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--rhsa-ink); } .is-style-rhsa-news-cards .wp-block-post-title a { color: inherit; text-decoration: none; } .is-style-rhsa-news-cards .wp-block-post-excerpt { margin: 0 0 20px; } .is-style-rhsa-news-cards .wp-block-post-excerpt__excerpt { margin: 0; font-family: var(--rhsa-sans); font-size: 16px; line-height: 26px; color: var(--rhsa-body); } .wp-block-read-more.is-style-rhsa-pill-red { display: inline-flex; align-items: center; padding: 15px 36px; border-radius: 999px; background: var(--rhsa-red); border: 0; color: #fff; font-family: var(--rhsa-cond); font-weight: 700; font-size: 16px; line-height: 16px; text-decoration: none; transition: background-color .2s; } .wp-block-read-more.is-style-rhsa-pill-red:is(:hover, :focus-visible) { background: var(--rhsa-ink); color: #fff; } .wp-block-read-more.is-style-rhsa-pill-red:focus-visible { outline: 2px solid var(--rhsa-ink); outline-offset: 3px; } @media (max-width: 767px) { .is-style-rhsa-news-cards .wp-block-post-template { grid-template-columns: minmax(0, 1fr); row-gap: 30px; } .is-style-rhsa-news-cards .rhsa-news-card { padding: 10px; } .is-style-rhsa-news-cards .rhsa-news-card__body { padding: 12px 10px 10px; } .is-style-rhsa-news-cards .wp-block-post-terms, .is-style-rhsa-news-cards .wp-block-post-title { margin-bottom: 10px; } .is-style-rhsa-news-cards .wp-block-post-excerpt { margin-bottom: 15px; } } /* Category label on news cards: a tint pill with a red dot. */ .wp-block-post-terms.is-style-rhsa-pill-label { display: inline-block; position: relative; padding: 1px 10px 1px 30px; border-radius: 999px; background: var(--rhsa-tint); font-family: var(--rhsa-cond); font-weight: 700; font-size: 14px; line-height: 20px; } .wp-block-post-terms.is-style-rhsa-pill-label::before { content: ""; position: absolute; left: 10px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--rhsa-red); } .wp-block-post-terms.is-style-rhsa-pill-label a { color: var(--rhsa-red); text-decoration: none; } /* Single posts keep Astra's layout. In its narrow container (650px) a full-width block stays 650px wide, so it reaches the window edges here, as MaxiBlocks' full-width containers did (4256's survey band). */ .ast-narrow-container .entry-content > .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Fluent Forms inside a section: MaxiBlocks' sections set line-height: 1, which the forms' labels inherit (Fluent Forms says "inherit"). */ :is(.is-style-rhsa-section, .is-style-rhsa-section-dark, .is-style-rhsa-section-tint) .fluentform { line-height: 1; } /* A note in a form's section description (the fund forms' "Any donation over $500…"), set as the MaxiBlocks text pasted there looked. */ .fluentform .rhsa-form-note { font-size: 16px; line-height: 26px; margin: 0 0 20px; } /* rhsa-stack: blocks stacked as in MaxiBlocks, in a flex column, so each block's top and bottom margins add up instead of collapsing. */ :is(.wp-block-group, .wp-block-column).rhsa-stack { display: flex; flex-direction: column; } /* Inside sections and heroes (MaxiBlocks containers before), nothing has block margins or inline padding of its own unless its block or a stronger rule says so, as under MaxiBlocks' ".maxi-block *". Lists and embeds kept as they were (a core list, a form) rely on it. */ :is(.is-style-rhsa-section, .is-style-rhsa-section-dark, .is-style-rhsa-section-tint, .is-style-rhsa-hero) * { margin-block-start: 0; margin-block-end: 0; padding-inline-start: 0; padding-inline-end: 0; } /* Astra's ".entry-content ul { margin: revert }" outweighs that; lists in sections had no margins either. */ :is(.is-style-rhsa-section, .is-style-rhsa-section-dark, .is-style-rhsa-section-tint, .is-style-rhsa-hero) :is(ul, ol).wp-block-list { margin-block: 0; } /* Separators in WordPress's flow layout keep the spacing they have with MaxiBlocks active (the block gap above, unless first; none below): without it, Astra's "[data-ast-blocks-layout] .wp-block-separator { margin: 20px auto }" takes over. */ .entry-content :is(.is-layout-flow, .is-layout-constrained) > .wp-block-separator:not(.is-style-rhsa-rule) { margin-top: var(--wp--style--block-gap, 24px); margin-bottom: 0; } .entry-content :is(.is-layout-flow, .is-layout-constrained) > .wp-block-separator:not(.is-style-rhsa-rule):first-child { margin-top: 0; } /* rhsa-shortcode: a shortcode (form, gallery, flipbook) with the room it had (the group's padding). MaxiBlocks, while active, wraps shortcode output in a paragraph, which the browser splits into two empty ones around it (one may hold a gallery's