/*
PUBLIC LANDS - LANDING PAGE - CSS
Last Updated: 07.27.2026
Structure follows the outside-in-five / half-dome landing pages. Legacy
class names (rei-smr21-filmhub-*, rei-spiritpeaks-*, rei-oi5-*) are kept
where markup was copied wholesale — only one landing-page stylesheet loads
per page template, so these rules are scoped to this page in practice.
New page-specific rules use the rei-public-lands-* prefix.
*/
/* -------------
GLOBALS
--------------*/
.clear {
clear: both;
}
/* -------------
HERO
--------------*/
.rei-smr21-filmhub-hero-container {
width: 100%;
text-align: center;
color: #ffffff;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
height: calc(100vh - 174px);
overflow: hidden;
margin-top: -30px;
}
.rei-smr21-filmhub-hero-copy {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: auto;
text-align: center;
z-index: 2;
}
@media ( max-width: 836px ) {
.rei-smr21-filmhub-hero-copy {
width: 90%;
}
}
.rei-smr21-filmhub-hero-copy-title {
margin: 0 auto;
}
@media ( max-width: 721px ) {
.rei-smr21-filmhub-hero-copy-title {
width: 100%;
}
}
.rei-smr21-filmhub-hero-copy h1 {
margin: 0;
padding: 0;
font-size: 74px;
font-family: Stuart, Georgia, serif;
/* Stuart Light. Stuart is a variable font (weight axis 1–999) served by REI's
universal nav stylesheet, so 300 renders the real Light cut rather than a
synthesised one. Matches the display titles in the brand guidelines:
https://live.standards.site/reicoop/typography */
font-weight: 300;
margin-bottom: 20px;
color: #ffffff !important;
text-shadow: 1px 2px rgba(0,0,0, 0.2);
/* 1.08em. The old 63px (0.85em) suited the uppercase setting, which has no
descenders; title case needs room for them if the headline ever wraps. */
line-height: 80px;
}
/* Steps down at 575px rather than the 500px this page inherited: the copy
container is only 90% of the viewport below 836px, so at 74px the headline
had nowhere to go between 501px and 575px and broke into three ragged lines.
The 575px threshold was measured against the previous, shorter headline
("Help Us Spend"); the current first line is longer and has not been
re-measured. */
@media ( max-width: 575px ) {
.rei-smr21-filmhub-hero-copy h1 {
font-size: 50px;
line-height: 54px;
}
}
/* Small phones. Sized so the forced first line clears the container at the
commonest Android and SE widths. Like the step above, the 380px threshold
was measured against the previous, shorter headline and has not been
re-measured for the current one. */
@media ( max-width: 380px ) {
.rei-smr21-filmhub-hero-copy h1 {
font-size: 42px;
line-height: 46px;
}
}
/* Forces the headline to break at the phrase boundary — "Let's put our love /
into action" — instead of wrapping wherever it happens to land.
Unconditional, as it was for the previous headline. The width at which the
forced line stops fitting has not been re-measured since the copy change. */
.rei-public-lands-title-break {
display: inline;
}
.rei-smr21-filmhub-hero-copy p {
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 17px;
line-height: 26px;
text-shadow: 1px 2px rgba(0,0,0, 0.2);
font-weight: 500;
width: 700px;
margin: 0 auto;
}
@media ( max-width: 780px ) {
.rei-smr21-filmhub-hero-copy p {
width: auto;
}
}
.rei-smr21-filmhub-hero-caret {
width: 60px;
height: 40px;
background-image: url(_img/caret-down.png);
background-repeat: no-repeat;
background-size: cover;
position: absolute;
bottom: 0px;
left: 50%;
transform: translate3d(-50%, -50%, 0);
z-index: 2;
}
.rei-smr21-filmhub-hero-vidcontrol {
position: absolute;
bottom: 20px;
right: 0px;
text-shadow: 1px 2px rgb(0 0 0 / 20%);
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-weight: 600;
text-align: right;
margin-right: 40px;
cursor: pointer;
z-index: 2;
}
.rei-smr21-filmhub-hero-vidcontrol-play {
display: none;
}
.rei-smr21-filmhub-hero-video-holder {
height: calc(100vh - 174px);
overflow: hidden;
position: relative;
}
.rei-smr21-filmhub-hero-video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
z-index: -100;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
overflow: hidden;
}
/* Legibility scrim over the hero video.
Sits above the video (z-index: -100) and below the copy, caret and video
controls (all z-index: 2). Weighted toward the upper half: the footage opens
on a bright sky exactly where the centred h1 falls, while the lower third is
already dark mountain, so easing off at the bottom avoids crushing it. */
.rei-smr21-filmhub-hero-video-holder::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.45) 0%,
rgba(0, 0, 0, 0.50) 45%,
rgba(0, 0, 0, 0.25) 100%
);
}
/* ---------------------
CREAM BAND
(Vote + Public Lands 101)
----------------------*/
.rei-smr21-filmhub-podcast-container {
width: 100%;
text-align: center;
margin-bottom: 90px;
background-color: #f4f2ed;
padding-top: 100px;
padding-bottom: 100px;
font-family: Graphik, 'Helvetica Neue', sans-serif;
}
@media ( max-width: 725px ) {
.rei-smr21-filmhub-podcast-container {
padding-top: 40px;
padding-bottom: 40px;
}
}
.rei-smr21-filmhub-podcast-container h2 {
padding-top: 0px !important;
}
.rei-smr21-filmhub-podcast-container p {
width: 758px;
margin: 0 auto;
font-size: 16px;
margin-bottom: 40px;
}
@media ( max-width: 838px ) {
.rei-smr21-filmhub-podcast-container p {
width: auto;
padding-left: 40px;
padding-right: 40px;
}
}
/* ---------------------
VOTE
----------------------*/
/* QSM (Quiz And Survey Master) embed. Width matches the band's own so the
plugin's output lines up with the copy above it. */
.rei-public-lands-quiz {
width: 758px;
margin: 0 auto;
text-align: center;
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 26px;
}
@media ( max-width: 838px ) {
.rei-public-lands-quiz {
width: auto;
padding-left: 40px;
padding-right: 40px;
}
}
/* The band width-constrains every
; QSM emits its own, so undo that inside
the embed only (alignment stays centered, inherited from the wrapper). */
.rei-public-lands-quiz p {
width: auto;
margin: 0 0 20px 0;
padding-left: 0;
padding-right: 0;
text-align: center;
}
/* QSM emits its featured image with no dimensions or max-width, so it
overflows the wrapper at large source sizes. */
.rei-public-lands-quiz img {
max-width: 100%;
height: auto;
}
/* QSM ships a default blue submit button. Match the green pill used by every
other CTA on this page (.rei-oi5-cta-details-btn).
!important is required: qmn_primary.css sets
`.qmn_quiz_container .qmn_btn { background-color: #3498db !important }`. */
.rei-public-lands-quiz .qsm-submit-btn,
.rei-public-lands-quiz input[type="submit"] {
padding: 15px 20px !important;
border: 0 !important;
border-radius: 6px !important;
background-color: #2d5040 !important;
color: #fff !important;
font-size: 15px !important;
font-family: 'Graphik web', sans-serif;
cursor: pointer;
text-shadow: none;
}
.rei-public-lands-quiz .qsm-submit-btn:hover,
.rei-public-lands-quiz input[type="submit"]:hover {
background-color: #13352c !important;
color: #fff !important;
}
/* Center the submit button (QSM right-aligns it by default). */
.rei-public-lands-quiz .qsm-pagination,
.rei-public-lands-quiz .qmn_pagination {
text-align: center !important;
float: none !important;
display: block !important;
}
.rei-public-lands-quiz .qsm-pagination .qsm-submit-btn,
.rei-public-lands-quiz .qmn_pagination input[type="submit"] {
float: none !important;
display: inline-block !important;
margin: 0 auto !important;
}
/* ------------------------------------------------------------------
QSM FORM FIELDS — REI Cedar
https://cedar.rei.com/components/input
https://cedar.rei.com/components/radio-button
Values taken from @rei/cdr-tokens and rei/rei-cedar
(CdrInput.vars.scss / CdrRadio.vars.scss), converted from rem to px:
Cedar assumes a 10px rem base (html{font-size:62.5%}) but this theme
uses 16px, so 4rem = 40px, 1.6rem = 16px, 0.4rem = 4px, etc.
Tokens used:
text-input-default #20201d
text-input-placeholder rgba(66, 59, 47, 0.75)
text-input-label rgba(12, 11, 8, 0.75)
background-input-default rgba(244, 242, 237, 0.15)
background-input-*-hover/focus/active #f9f8f6
border-input-default #928b80
border-input-*-focus/hover #20201d
border/background-input-default-selected #4e4d49
icon-checkbox-default-selected #ffffff
radius-softer 0.4rem | form-input-height-default 4rem
form-figure-size-medium 1.6rem (inner dot = size / 4)
------------------------------------------------------------------ */
/* NOTE: the scoping class is intentionally repeated
(.rei-public-lands-quiz.rei-public-lands-quiz) purely to raise specificity.
QSM's qmn_primary.css uses selectors of equal weight (.quiz_section
input[type=text]) and is enqueued from inside the shortcode, so it loads
after this file and would otherwise win on source order. Doubling the class
avoids sprinkling !important across every declaration below. */
/* --- Text + email inputs --- */
.rei-public-lands-quiz.rei-public-lands-quiz input[type="text"],
.rei-public-lands-quiz.rei-public-lands-quiz input[type="email"] {
box-sizing: border-box;
display: block;
width: 100%;
max-width: 380px;
height: 40px;
margin: 0 auto;
padding: 8px;
text-align: left;
border: 0;
border-radius: 4px;
background-color: rgba(244, 242, 237, 0.15);
box-shadow: inset 0 0 0 1px #928b80;
color: #20201d;
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 22px;
letter-spacing: -0.16px;
appearance: none;
-webkit-appearance: none;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.rei-public-lands-quiz.rei-public-lands-quiz input[type="text"]::placeholder,
.rei-public-lands-quiz.rei-public-lands-quiz input[type="email"]::placeholder {
color: rgba(66, 59, 47, 0.75);
opacity: 1;
}
.rei-public-lands-quiz.rei-public-lands-quiz input[type="text"]:hover,
.rei-public-lands-quiz.rei-public-lands-quiz input[type="email"]:hover {
background-color: #f9f8f6;
box-shadow: inset 0 0 0 1px #20201d;
}
.rei-public-lands-quiz.rei-public-lands-quiz input[type="text"]:focus,
.rei-public-lands-quiz.rei-public-lands-quiz input[type="email"]:focus {
outline: none;
background-color: #f9f8f6;
box-shadow: inset 0 0 0 2px #20201d;
}
/* QSM's own error state */
.rei-public-lands-quiz.rei-public-lands-quiz input.qsm-error,
.rei-public-lands-quiz.rei-public-lands-quiz input[type="text"].mlwRequiredText.qsm-error,
.rei-public-lands-quiz.rei-public-lands-quiz input[type="email"].qsm-error {
background-color: rgba(255, 242, 242, 0.75);
box-shadow: inset 0 0 0 1px #b33322;
}
/* --- Field labels ---
Cedar CdrLabelStandalone: cdr-text-utility-sans-200 (Graphik 400,
1.4rem/1.8rem -> 14px/18px, letter-spacing -0.16px) in
$cdr-color-text-input-label, with $cdr-space-half-x (8px) below it.
The contact field wrapper is constrained to the input's own width and
centred, so the label sits flush with the left edge of the field rather
than the left edge of the 758px embed. */
.rei-public-lands-quiz.rei-public-lands-quiz .qsm_contact_div {
max-width: 380px;
margin: 0 auto 20px auto;
text-align: left;
}
.rei-public-lands-quiz.rei-public-lands-quiz .qsm_contact_div label,
.rei-public-lands-quiz.rei-public-lands-quiz .mlw_qmn_question,
.rei-public-lands-quiz.rei-public-lands-quiz .qsm_question {
display: block;
margin: 0 0 8px 0;
color: rgba(12, 11, 8, 0.75);
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: -0.16px;
text-align: left;
}
/* --- Contact field note ---
Privacy line under the email field (injected on qsm_contact_fields_end).
Aligned to the field rather than the 758px embed: same 380px measure and
left edge as .qsm_contact_div above it, so it reads as attached to the
input instead of floating in the centre of the band.
The -12px collapses against the contact div's 20px bottom margin to leave
8px — the same gap the labels use above their inputs. */
.rei-public-lands-quiz.rei-public-lands-quiz .rei-public-lands-quiz-note {
max-width: 380px;
margin: -12px auto 20px auto;
color: rgba(12, 11, 8, 0.6);
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 18px;
letter-spacing: -0.16px;
text-align: left;
}
/* --- Radio buttons --- */
.rei-public-lands-quiz.rei-public-lands-quiz .qmn_mc_answer_wrap {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.rei-public-lands-quiz.rei-public-lands-quiz input[type="radio"] {
box-sizing: border-box;
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 0 8px 0 0;
padding: 0;
border: 0;
border-radius: 100%;
background-color: rgba(244, 242, 237, 0.15);
box-shadow: inset 0 0 0 1px #928b80;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.rei-public-lands-quiz.rei-public-lands-quiz input[type="radio"]:hover {
background-color: #f9f8f6;
box-shadow: inset 0 0 0 1px #20201d;
}
/* Selected: dark fill with a 4px white centre dot (figure size / 4).
A radial-gradient is used rather than ::after — form controls don't
render pseudo-elements reliably across browsers. */
.rei-public-lands-quiz.rei-public-lands-quiz input[type="radio"]:checked {
background-color: #4e4d49;
background-image: radial-gradient(circle at 50% 50%, #ffffff 0 2px, transparent 2px);
box-shadow: inset 0 0 0 1px #4e4d49;
}
.rei-public-lands-quiz.rei-public-lands-quiz input[type="radio"]:checked:hover {
background-color: #928b80;
box-shadow: inset 0 0 0 1px #928b80;
}
.rei-public-lands-quiz.rei-public-lands-quiz input[type="radio"]:focus-visible {
outline: 2px solid #20201d;
outline-offset: 2px;
}
.rei-public-lands-quiz.rei-public-lands-quiz .qsm-input-label {
margin: 0;
color: rgba(12, 11, 8, 0.75);
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 22px;
letter-spacing: -0.16px;
cursor: pointer;
}
/* ---------------------
PNTS MAP
----------------------*/
.rei-spiritpeaks-illustration-container {
width: 745px;
margin: 0 auto;
margin-top: 90px !important;
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 26px;
}
@media ( max-width: 785px ) {
.rei-spiritpeaks-illustration-container {
width: auto;
padding-left: 20px;
padding-right: 20px;
}
}
.rei-spiritpeaks-illustration-container img {
width: 745px;
margin-top: 40px;
}
@media ( max-width: 785px ) {
.rei-spiritpeaks-illustration-container img {
width: auto;
}
}
.rei-public-lands-pnts {
text-align: center;
}
.rei-public-lands-pnts h2 {
padding-top: 0px !important;
}
/* ---------------------
4 WAYS (2x2 grid)
Replaced the inherited Splide carousel: with exactly four fixed items it
never scrolled at desktop width (its next arrow was permanently disabled),
and it was the only full-bleed block on a page where every other section is
width-constrained, which is what made it read as stretched. A constrained
2x2 grid of horizontal cards fixes both and drops the Splide dependency.
----------------------*/
.rei-public-lands-ways {
width: 100%;
background-color: #f4f2ed;
padding-top: 90px;
padding-bottom: 90px;
}
@media ( max-width: 725px ) {
.rei-public-lands-ways {
padding-top: 50px;
padding-bottom: 50px;
}
}
.rei-public-lands-ways-inner {
width: 1130px;
margin: 0 auto;
text-align: center;
}
@media ( max-width: 1180px ) {
.rei-public-lands-ways-inner {
width: auto;
padding-left: 40px;
padding-right: 40px;
}
}
/* Type (size/weight) deliberately absent: it comes from the shared section
title rule near the end of the file. This rule previously set 35px/600 of
its own, inherited from the source landing page. */
.rei-public-lands-ways-inner h2 {
color: #000000 !important;
margin: 0 0 50px 0 !important;
padding: 0 !important;
}
.rei-public-lands-ways-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px 60px;
text-align: left;
}
@media ( max-width: 900px ) {
.rei-public-lands-ways-grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
/* align-items must be stretch, not flex-start: the content column has to fill
the full card height for the button's `margin-top: auto` to bottom-align it.
The icon keeps its own explicit height, so stretch doesn't distort it. */
.rei-public-lands-ways-card {
display: flex;
align-items: stretch;
gap: 30px;
}
@media ( max-width: 600px ) {
.rei-public-lands-ways-card {
flex-direction: column;
gap: 20px;
}
}
.rei-public-lands-ways-icon {
flex: 0 0 120px;
height: 120px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* Column so the button can be pushed to the bottom of the card, keeping the
CTAs on a common baseline across a row despite uneven copy lengths. */
.rei-public-lands-ways-content {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-width: 0;
}
/* Card title. Same treatment the carousel used, kept so the cards retain a
type hierarchy against the 18px article body copy. */
.rei-oi5-belowcopy-titles {
font-family: Stuart, Georgia, serif;
font-size: 25px;
line-height: 30px;
font-weight: 500;
margin-bottom: 15px;
}
.rei-public-lands-ways-copy {
flex: 1 1 auto;
margin-bottom: 20px;
}
/* !important on the margin: .rei-btn-blacklg (style.css:2317) sets
`margin: 0 auto` + `margin-top: 20px`, and the parent theme stylesheet loads
after this one. As a flex item, `margin: 0 auto` would also shrink-wrap and
centre the button, fighting the left-aligned copy above it. */
.rei-public-lands-ways-btn {
margin: auto 0 0 0 !important;
align-self: flex-start;
text-align: left !important;
}
/* ---------------------
PNTS PARTNERS
----------------------*/
/* Dark green band with white text, matching the "In Partnership" section on
/friends-of-anacostia-park (outside-in-five.css:776). */
.rei-smr21-filmhub-paricipation-container {
width: 100%;
background-color: #f4f2ed;
/* No `color` here: the band now matches the other cream sections, so its
text inherits the page defaults rather than being forced light. */
font-family: Stuart, Georgia, serif;
font-weight: 400;
font-size: 40px;
line-height: 55px;
margin-bottom: 90px;
}
@media ( max-width: 600px ) {
.rei-smr21-filmhub-paricipation-container {
font-size: 35px;
line-height: 50px;
}
}
.rei-spiritpeaks-partners {
margin-top: 65px;
margin-bottom: 65px;
}
.rei-spiritpeaks-partners-container {
width: auto;
margin: 0 auto;
text-align: center;
padding-bottom: 65px;
}
.rei-spiritpeaks-partners-container h2 {
padding-top: 65px;
}
/* Title measure. Unconstrained, this headline sets on one very long line
across the full band (~1500px at 44px in the Georgia fallback). 780px holds
it to two, breaking at the phrase rather than mid-clause:
Get to know a few of our local partners
in protecting the public lands we love.
Only the title is constrained — the partner grid below keeps its 1130px.
Margins are longhand: the section-title rule sets margin-top/bottom with
!important, which the shorthand would fight. */
.rei-spiritpeaks-partners-container.rei-spiritpeaks-partners-container h2 {
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.rei-spiritpeaks-partners-container p {
font-size: 20px;
line-height: 25px;
width: 800px;
margin: 0 auto;
margin-top: 40px;
}
@media ( max-width: 840px ) {
.rei-spiritpeaks-partners-container p {
width: auto;
padding-left: 20px;
padding-right: 20px;
}
}
.rei-spiritpeaks-partners-container img {
height: 75px;
margin-left: 30px;
margin-right: 30px;
margin-top: 35px;
display: inline;
}
/* NOTE: outside-in-five.css:946 writes this as `max-width: 575` with no unit,
which makes the whole query invalid — the logos never shrink on phones. */
@media ( max-width: 575px ) {
.rei-spiritpeaks-partners-container img {
height: 45px;
}
}
/* ---------------------
SHOP
----------------------*/
.rei-public-lands-shop {
width: 1130px;
margin: 0 auto;
margin-top: 90px;
margin-bottom: 90px;
text-align: center;
}
@media ( max-width: 1130px ) {
.rei-public-lands-shop {
width: 100%;
}
}
.rei-public-lands-shop img {
width: 100%;
}
/* Desktop only. Above 1130px the section is a fixed 1130px, so the banner was
being stretched past the source image's own 852px and rendering soft. Capped
at native width it sits a little smaller and renders 1:1.
Scoped to a min-width query rather than a bare max-width so nothing changes
where the layout is already fluid: below 1131px the section is width:100%
and the banner keeps filling it exactly as it does now. */
@media ( min-width: 1131px ) {
.rei-public-lands-shop img {
max-width: 852px;
}
}
.rei-public-lands-shop .rei-oi5-cta-details-btn {
margin-top: 30px;
}
/* Legal terms under the poll embed. Deliberately quieter than body copy —
smaller and lighter, as legal text rather than something to read. Held to
the 758px measure the band already uses: at 13px, full-band width would run
to ~150 characters a line. */
/* The "see details below" jump link. Underlined but in the fine-print colour
rather than the article blue, which shouts inside legal copy. */
.rei-public-lands-vote .rei-public-lands-vote-terms a,
.rei-public-lands-vote .rei-public-lands-vote-terms a:hover {
color: inherit;
text-decoration: underline;
}
.rei-public-lands-vote .rei-public-lands-vote-terms {
width: 758px;
max-width: 100%;
margin: 30px auto 0;
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 13px;
line-height: 20px;
font-weight: 400;
color: rgba(12, 11, 8, 0.6);
letter-spacing: 0.08px;
text-align: center;
}
@media ( max-width: 838px ) {
.rei-public-lands-vote .rei-public-lands-vote-terms {
width: auto;
padding-left: 40px;
padding-right: 40px;
}
}
/* ---------------------
MORE WAYS TO TAKE ACTION
Full-bleed photo background with two white content cards over it.
----------------------*/
.rei-public-lands-action {
position: relative;
width: 100%;
background-image: url(_img/action-promo.jpg);
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
text-align: center;
}
/* Legibility scrim, the same idea as the hero's. The photo runs from a pale
dawn sky at the top to dark ridgeline below, so neither white nor dark type
is readable across the whole frame — and because the background is sized
with `cover`, which part of it sits behind the title shifts with the
viewport. A flat scrim makes white type safe at every crop. */
.rei-public-lands-action::before {
content: '';
position: absolute;
inset: 0;
background-color: rgba(12, 11, 8, 0.4);
pointer-events: none;
}
.rei-public-lands-action-inner {
position: relative;
z-index: 1;
width: 1130px;
margin: 0 auto;
}
@media ( max-width: 1180px ) {
.rei-public-lands-action-inner {
width: auto;
padding-left: 40px;
padding-right: 40px;
}
}
/* The gap is the point: it lets the photo read between the two cards. */
.rei-public-lands-action-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
text-align: center;
}
@media ( max-width: 600px ) {
.rei-public-lands-action-grid {
grid-template-columns: 1fr;
}
}
/* Bottom padding is not 40px like the top, so that the white space BELOW the
CTA reads the same as the white space above the card — the 53.6px between the
section title's glyphs and the card's top edge.
The extra 10px is the CTA's own overhang: its anchor is display:inline, so its
green background paints 10px past the bottom of its wrapper box. A symmetric
40px would have left 30px of visible space under the button against 53.6px
above the card. 63.6 - 10 = 53.6 seen.
The 40px top and 30px sides are untouched; those sit between the card's edge
and the heading's own leading and are not part of this comparison. */
.rei-public-lands-action-card {
background-color: #ffffff;
padding: 40px 30px 63.6px;
}
.rei-public-lands-action .rei-public-lands-action-title {
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 20px !important;
line-height: 26px;
font-weight: 600;
color: rgba(12, 11, 8, 0.9);
margin: 0 0 6px !important;
padding: 0 !important;
letter-spacing: 0.08px;
}
.rei-public-lands-action .rei-public-lands-action-copy {
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: rgba(12, 11, 8, 0.75);
letter-spacing: 0.08px;
width: auto;
margin: 0;
padding: 0;
}
/* The page's standard copy-to-button gap: 23px of VISIBLE white space, matching
the Get Involved columns, the partner cards and the About panel.
33.5px of box, where those three use 32px. The extra 1.5px is not a fudge:
this button's anchor sets line-height 27px against their 30px, and since the
anchor is display:inline its background paints out to its line box, so it
starts 1.5px higher relative to the wrapper — exactly half the 3px line-height
difference. Using a flat 32px here would read 1.5px tighter than the others.
The copy above carries no bottom margin, so this margin is the whole box gap
with nothing to collapse against. */
.rei-public-lands-action .rei-public-lands-action-card .rei-oi5-cta-details-btn {
margin-top: 33.5px;
}
/* ---------------------
LEGAL T&C
Fine print closing the page. Same type treatment as the poll's legal line
(.rei-public-lands-vote-terms) — 13px, quiet, on the page's 758px measure.
----------------------*/
.rei-public-lands-legal {
/* 1130px, the page's content measure — the Get Involved and partners grids
and the About panel's content all sit on it, so the fine print shares
their edges.
This was 620px, chosen so the 13px type stayed near the 45-75 characters
a line that reads comfortably; at this measure it runs far longer. That is
a deliberate trade for alignment on a block of legal fine print, which is
scanned for a clause rather than read through. If it needs to read better,
raising the font size suits this width better than narrowing it again. */
width: 1130px;
margin: 0 auto;
/* Jump target for the poll's "see details below" link. The offset keeps the
heading clear of the site header, which overlays the top of the viewport;
re-measure if that header's height changes. */
scroll-margin-top: 120px;
}
@media ( max-width: 838px ) {
.rei-public-lands-legal {
width: auto;
padding-left: 40px;
padding-right: 40px;
}
}
/* Left-aligned, unlike the poll's one-line legal note, which is centred with
the rest of its band. This block runs to a full paragraph, and centring a
ragged 150-word legal text makes every line start in a different place. */
.rei-public-lands-legal .rei-public-lands-legal-title {
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 13px !important;
line-height: 20px;
font-weight: 600;
color: rgba(12, 11, 8, 0.6);
letter-spacing: 0.08px;
margin: 0 0 6px !important;
padding: 0 !important;
text-align: left;
}
.rei-public-lands-legal .rei-public-lands-legal-copy {
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 13px;
/* 1.69, up from the 1.54 the one-line notes use. A long measure needs more
leading for the eye to find the next line reliably. */
line-height: 22px;
font-weight: 400;
color: rgba(12, 11, 8, 0.6);
letter-spacing: 0.08px;
width: auto;
margin: 0;
padding: 0;
text-align: left;
}
/* ---------------------
CTA BANNER
(also the "where we donated" giveback module)
----------------------*/
.rei-oi5-cta-container {
width: 1370px;
margin: 0 auto;
background-color: #f4f2ed;
padding-top: 30px;
padding-bottom: 30px;
margin-top: 65px;
margin-bottom: 65px;
}
@media ( max-width: 1370px ) {
.rei-oi5-cta-container {
width: auto;
}
}
.rei-oi5-cta-holder {
margin: 0 auto;
width: 1082px;
display: flex;
align-items: center;
justify-content: center;
}
@media ( max-width: 1130px ) {
.rei-oi5-cta-holder {
width: auto;
}
}
@media ( max-width: 990px ) {
.rei-oi5-cta-holder {
display: inline;
}
}
.rei-oi5-cta-top {
display: flex;
align-items: center;
justify-content: center;
}
.rei-oi5-cta-top img {
max-width: 100%;
height: auto;
}
.rei-oi5-cta-bottom {
display: flex;
align-items: center;
justify-content: center;
}
.rei-oi5-cta-divider {
height: 200px;
width: 1px;
background-color: #2e5141;
margin-left: 80px;
margin-right: 80px;
}
@media ( max-width: 1130px ) {
.rei-oi5-cta-divider {
margin-left: 40px;
margin-right: 40px;
}
}
@media ( max-width: 990px ) {
.rei-oi5-cta-divider {
display: none;
}
}
.rei-oi5-cta-details {
width: 390px;
}
@media ( max-width: 990px ) {
.rei-oi5-cta-details {
margin-top: 30px;
}
}
.rei-oi5-details-copy {
padding-bottom: 20px;
font-family: 'Graphik web', sans-serif;
font-size: 16px;
line-height: 20px;
color: #333;
margin-bottom: 10px;
}
.rei-oi5-cta-details-btn a {
padding: 15px 20px;
border-radius: 6px;
background-color: #2d5040;
color: #fff;
font-size: 15px;
font-family: 'Graphik web', sans-serif;
}
.rei-oi5-cta-details-btn a:hover {
color: #ffffff;
}
/* ---------------------
DONATION RECIPIENTS
----------------------*/
.rei-public-lands-donations {
width: 1130px;
margin: 0 auto;
margin-bottom: 90px;
text-align: center;
font-family: Graphik, 'Helvetica Neue', sans-serif;
}
@media ( max-width: 1180px ) {
.rei-public-lands-donations {
width: auto;
padding-left: 40px;
padding-right: 40px;
}
}
/* Type comes from the shared section title rule, as with the 4 Ways title
above; this previously set its own 35px/600. */
.rei-public-lands-donations h2 {
padding-top: 0px !important;
margin-bottom: 40px !important;
}
.rei-public-lands-donation-grid {
display: flex;
gap: 30px;
box-sizing: border-box;
}
@media ( max-width: 900px ) {
.rei-public-lands-donation-grid {
flex-direction: column;
}
}
.rei-public-lands-donation-cell {
flex: 1;
box-sizing: border-box;
font-size: 16px;
line-height: 26px;
}
.rei-public-lands-donation-cell a {
display: inline-block;
}
.rei-public-lands-donation-cell img {
height: 120px;
width: auto;
margin-bottom: 20px;
}
/* ==================================================================
BODY COPY — match the standard article template
Reference: /blog/cycle/gear-check-lael-wilcox-2026 (.cb-entry-content p)
font-family Graphik, 'Helvetica Neue', sans-serif
font-size 18px
line-height 30px
font-weight 400
color rgba(12, 11, 8, 0.75)
letter-spacing 0.08px
links #406eb5, underlined
This block sits at the end of the file deliberately: the section rules
above were inherited from outside-in-five / half-dome and set their own
sizes (16/26, 17/26, 20/25, 16/20) at the same specificity, so this has
to come later to win without resorting to !important.
Headings are untouched — h1/h2 and .rei-oi5-belowcopy-titles keep the
display serif treatment. Form controls are also excluded: the QSM field
and label styles follow the Cedar spec and are scoped with a repeated
class, so they outrank everything here.
================================================================== */
.rei-smr21-filmhub-podcast-container p,
.rei-spiritpeaks-illustration-container,
.rei-spiritpeaks-illustration-container p,
.rei-public-lands-ways-copy,
.rei-spiritpeaks-partners-container p,
.rei-oi5-details-copy,
.rei-public-lands-donation-cell,
.rei-public-lands-donation-cell p,
.rei-public-lands-quiz {
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 18px;
line-height: 30px;
font-weight: 400;
color: rgba(12, 11, 8, 0.75);
letter-spacing: 0.08px;
}
.rei-smr21-filmhub-podcast-container p,
.rei-spiritpeaks-illustration-container p,
.rei-public-lands-donation-cell p {
margin-bottom: 20px;
}
/* Body-copy links, matching the article template.
Every selector is scoped to inline links inside copy (p / belowcopy) so it
cannot reach the CTA buttons, which are siblings of the copy rather than
inside it. */
.rei-smr21-filmhub-podcast-container p a,
.rei-spiritpeaks-illustration-container p a,
.rei-public-lands-ways-copy a,
.rei-spiritpeaks-partners-container p a,
.rei-oi5-details-copy a,
.rei-public-lands-donation-cell p a {
color: #406eb5;
text-decoration: underline;
}
.rei-smr21-filmhub-podcast-container p a:hover,
.rei-spiritpeaks-illustration-container p a:hover,
.rei-public-lands-ways-copy a:hover,
.rei-spiritpeaks-partners-container p a:hover,
.rei-oi5-details-copy a:hover,
.rei-public-lands-donation-cell p a:hover {
color: #406eb5;
text-decoration: none;
}
/* Links inside the quiz's own messages, matching the article treatment above.
Needs its own rule because that one is scoped to `p a`, and QSM wraps both
the results text and the end message in divs, not paragraphs. Two containers
are covered: .qmn_results_page is injected by JS on submit (both of QSM's
renderers apply that class), .qsm-after-message is the end message rendered
with the form. Scoped to those two rather than the whole quiz so it cannot
reach the pagination or submit controls, which are anchors too. */
.rei-public-lands-quiz .qmn_results_page a,
.rei-public-lands-quiz .qsm-after-message a {
color: #406eb5;
text-decoration: underline;
}
.rei-public-lands-quiz .qmn_results_page a:hover,
.rei-public-lands-quiz .qsm-after-message a:hover {
color: #406eb5;
text-decoration: none;
}
/* Belt and braces: the green pill CTAs are always white and undecorated,
whatever section they sit in. Declared after the body-copy links so a
future copy rule can't bleed into a button the way it did here. */
.rei-oi5-cta-details-btn a,
.rei-oi5-cta-details-btn a:hover,
.rei-oi5-cta-details-btn a:focus,
.rei-oi5-cta-details-btn a:visited {
color: #ffffff;
text-decoration: none;
}
/* Hero overlay copy: size, leading and tracking matched to the article body,
but it keeps white + text-shadow + weight 500 because it sits over video
and the article's dark body colour would be unreadable there. */
.rei-smr21-filmhub-hero-copy p {
font-size: 18px;
line-height: 30px;
letter-spacing: 0.08px;
}
/* The 4-Ways slide titles sit inside .rei-public-lands-ways-copy,
so they would inherit the article body colour set above. Pin them back to
the black they had before, leaving the slide titles genuinely unchanged. */
.rei-oi5-belowcopy-titles {
color: #000000;
letter-spacing: normal;
}
/* This band keeps the cream it inherits from .rei-smr21-filmhub-podcast-container,
the same as the Vote section. It previously carried a white override, from when
it sat directly beneath the cream 4-Ways band and needed to break from it; it
now sits between two white sections, so the inherited cream is what separates
it from them. */
/* The partners band is dark green, so its copy has to stay white — the
body-copy block above sets rgba(12,11,8,0.75), which would be unreadable
here. Size, leading, weight and tracking follow the article template.
The white overrides that used to sit here — for the paragraph and for its
inline links — are gone with the dark background: on cream the body colour
and the article blue both read normally, and they are already set by the
typography block above. */
/* ==================================================================
SECTION RHYTHM
One value drives the whole page, held in a custom property so there is a
single place to change it. Every section carries this much space above and
below its content, and every section title carries it below.
desktop 95px
<= 900px 60px (matches where the 4-Ways grid goes single column)
<= 600px 45px (matches where the 4-Ways cards stack)
Sections butt directly against each other with no vertical margins, so each
boundary is one rhythm unit from this section plus one from the next, and
colour changes land exactly on the seam with no stray page background.
This replaces the inherited mixture of 30 / 35 / 40 / 50 / 65 / 90 / 100px
that came across from outside-in-five and half-dome.
Only vertical values are set — the horizontal padding the media queries
apply to the constrained containers, and the `margin: 0 auto` that centres
them, both need to survive.
================================================================== */
:root {
--pl-rhythm: 95px;
/* Column gap for the page's three card grids — Vote, Get Involved and
Partners. One value so the three read as the same system: they had drifted
to 30 / 40 / 30px, which showed most once Get Involved went to three
columns beside the four-column partners grid.
Only the COLUMN axis. Each grid keeps its own row gap, which does a
different job: it separates stacked cards, and on phones, where every grid
collapses to one column, it is the only gap left. */
--pl-col-gap: 50px;
}
@media ( max-width: 900px ) {
:root {
--pl-rhythm: 60px;
}
}
@media ( max-width: 600px ) {
:root {
--pl-rhythm: 45px;
}
}
.rei-smr21-filmhub-podcast-container,
.rei-public-lands-ways,
.rei-spiritpeaks-illustration-container,
.rei-smr21-filmhub-paricipation-container,
.rei-public-lands-shop,
.rei-public-lands-action,
.rei-public-lands-legal,
.rei-oi5-cta-container,
.rei-public-lands-donations {
padding-top: var(--pl-rhythm);
padding-bottom: var(--pl-rhythm);
margin-top: 0;
margin-bottom: 0;
}
/* The PNTS map container inherits `margin-top: 90px !important` from the
outside-in-five original, so this one needs !important to reset. */
.rei-spiritpeaks-illustration-container {
margin-top: 0 !important;
}
/* Nested spacing inside the partners band — the band itself now supplies the
rhythm, so these inherited offsets would stack on top of it. */
.rei-spiritpeaks-partners {
margin-top: 0;
margin-bottom: 0;
}
.rei-spiritpeaks-partners-container {
padding-bottom: 0;
}
/* The band's 95px of top and bottom padding are equal as boxes but not to the
eye. At the top the padding is followed by 8.3px of leading above the
title's caps, so the gap reads as 103.3px. At the bottom the last thing in
the grid is a button whose anchor is display:inline, and its background
paints 8.5px BELOW the grid's own box edge, so the gap reads as 86.5px — a
17px difference in what is actually seen.
Adding the two corrections back (8.3 + 8.5 = 16.8, rounded to 17) makes the
visible space at the bottom match the visible space at the top. Written as a
calc on the rhythm token so the breakpoints still scale the base value; the
correction itself is a constant, since neither the type's leading nor the
button's overhang scales with the rhythm.
Note this makes the section's BOX padding asymmetric (95 top, 112 bottom) and
the seam with the next band one rhythm unit + 17px rather than a clean two
units. That is the trade for the two ends looking equal. */
.rei-public-lands-partners.rei-public-lands-partners {
padding-bottom: calc(var(--pl-rhythm) + 17px);
}
/* ------------------------------------------------------------------
SECTION TITLES
Every section heading gets exactly one rhythm unit beneath it. The space
*above* each title is already supplied by its section's top padding, so
adding padding-top here as well would double it (190px on desktop).
The hero
is deliberately excluded — it is absolutely positioned and
centred over the video, on its own display treatment.
------------------------------------------------------------------ */
.rei-smr21-filmhub-podcast-container h2,
.rei-public-lands-ways-inner h2,
.rei-public-lands-pnts h2,
.rei-spiritpeaks-partners-container h2,
.rei-public-lands-shop h2,
.rei-public-lands-action h2,
.rei-public-lands-donations h2 {
margin-top: 0 !important;
margin-bottom: var(--pl-rhythm) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Elements sitting directly beneath a title that carry their own top offset —
zeroed so the gap under each title is exactly one rhythm unit, not the
rhythm plus an inherited 35-40px. The partner logos keep their row spacing,
moved to margin-bottom so it separates the two logo rows instead. */
.rei-spiritpeaks-illustration-container img {
margin-top: 0;
}
.rei-spiritpeaks-partners-container img {
margin-top: 0;
margin-bottom: 35px;
}
/* The partner logos are inline ![]()
in a container that inherits the band's
40px/55px display type, so each logo row sat in a 55px line box on the text
baseline — adding ~70px of phantom space under the title on top of the
rhythm. Collapsing the container's inline formatting removes it; the h2 and
p both set their own font-size and line-height, so they are unaffected, and
row separation now comes from the logos' own margin-bottom. */
.rei-spiritpeaks-partners-container {
font-size: 0;
line-height: 0;
}
.rei-spiritpeaks-partners-container img {
display: inline-block;
vertical-align: top;
}
/* ------------------------------------------------------------------
FEATURED PARTNER CARDS
Four columns of photo + name + description + link, replacing the logo
strip this section inherited from spirit-of-the-peaks.
Wider than the page's 758px copy measure: at that width four columns of
running text would be ~170px each. 1130px matches the Shop section, so the
page keeps two established widths rather than gaining a third.
Several inherited rules have to be undone here — the container sets
font-size/line-height to 0 to collapse the old inline logo row, and the
logo rule pins every img to 75px tall with side margins.
------------------------------------------------------------------ */
.rei-public-lands-partners-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px var(--pl-col-gap);
width: 1130px;
max-width: 100%;
margin: 0 auto;
text-align: left;
font-size: 18px;
line-height: 30px;
}
@media ( max-width: 1180px ) {
.rei-public-lands-partners-grid {
width: auto;
padding-left: 40px;
padding-right: 40px;
}
}
/* Two up, then one: below ~900px four columns of running copy get too narrow
to read, and the photos drop under 200px wide. */
@media ( max-width: 900px ) {
.rei-public-lands-partners-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media ( max-width: 600px ) {
.rei-public-lands-partners-grid {
grid-template-columns: 1fr;
gap: 45px;
}
}
/* font-size and color carry !important because the parent theme's
`.cb-body-light h3` sets both that way, which specificity alone can't beat. */
.rei-spiritpeaks-partners-container .rei-public-lands-partner-title {
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 20px !important;
line-height: 26px;
font-weight: 600;
color: rgba(12, 11, 8, 0.9) !important;
margin: 0 0 10px !important;
padding: 0 !important;
letter-spacing: 0.08px;
}
/* Repeated class: the container's own `p { color:#fff }` rule sits later in
the file, and this needs to beat the body-copy sizing without !important. */
.rei-spiritpeaks-partners-container .rei-public-lands-partner-copy.rei-public-lands-partner-copy {
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: rgba(12, 11, 8, 0.75);
letter-spacing: 0.08px;
width: auto;
margin: 0 0 12px;
padding: 0;
text-align: left;
}
/* The cards close on the shared green pill (.rei-oi5-cta-details-btn) rather
than the bare URL link they used to carry. Only the top margin is set here —
everything else comes from the shared button rules.
32px to match the gap the Get Involved columns use above their buttons. This
is the value that applies below 601px, where the cards are still in block
layout: the copy's 12px bottom margin collapses into this margin and the
larger of the two wins, so the gap reads as 32px, the same as the flex rule
below builds a different way. */
.rei-spiritpeaks-partners-container .rei-public-lands-partner .rei-oi5-cta-details-btn {
margin-top: 32px;
}
/* Line the four buttons up with each other instead of letting each one sit
wherever its card's copy happens to end. Grid already stretches every card to
the row's height, so making the card a flex column and giving the button
`margin-top:auto` parks it against the card's bottom edge — a shared line for
every card in the row.
Applies from 601px up, which covers the four-up desktop grid and the two-up
tablet one; each grid ROW aligns independently, so at two-up the pairs line
up with each other, which is the same fix. Below 601px the grid is one card
per row, a row is only as tall as its own card, and `auto` has no free space
to absorb — the rule is inert there rather than needing to be undone.
padding-top, not a margin: `margin-top:auto` has to replace the 32px above,
and flex items don't collapse margins the way blocks do, so the copy's 12px
bottom margin survives here instead of being absorbed. 20px of padding on top
of that 12px makes the same 32px, and it holds as the MINIMUM — `auto` only
ever adds to it, on the cards whose copy runs short. The two numbers differ
(32 above, 12+20 here) because the layout modes count the copy's margin
differently; the gap they produce is identical, and so is the Get Involved
section's. */
@media ( min-width: 601px ) {
.rei-spiritpeaks-partners-container .rei-public-lands-partner {
display: flex;
flex-direction: column;
}
.rei-spiritpeaks-partners-container .rei-public-lands-partner .rei-oi5-cta-details-btn {
margin-top: auto;
padding-top: 20px;
}
}
/* Centre the cards once the grid drops to a single column. Left alignment
works while the cards sit side by side and share a left edge with each
other; alone in a narrow column, a left-aligned heading and button read as
adrift.
Placed after the rules it overrides, and repeating their selectors exactly:
the copy rule doubles its class to beat the band's own paragraph styling, so
a lighter selector here would lose no matter what the media query says. */
@media ( max-width: 600px ) {
.rei-public-lands-partners-grid {
text-align: center;
}
.rei-spiritpeaks-partners-container .rei-public-lands-partner-copy.rei-public-lands-partner-copy {
text-align: center;
}
}
/* Vote, PNTS and Public Lands 101: the description reads as a continuation of
the heading, so it sits tight beneath it at 25px rather than taking the full
section rhythm. The other sections keep the rhythm below their titles.
!important is needed to beat the section-title rule above, which uses it. */
/* These are optical values, not arbitrary ones. A 25px margin does NOT give
25px of visible space: the h2's line box carries ~10px of empty descender
depth below its glyphs (neither title has a descender), and a paragraph adds
~7px of half-leading above its first line. Measured, a 25px margin rendered
as 42px of whitespace above the copy against 30px below it.
So each gap is set to 25px MINUS its own leading overhang:
title -> copy overhang 17px -> 8px margin
title -> image overhang 6px -> 19px margin (an image has no leading)
image -> copy overhang 11px -> 14px margin
copy -> next overhang 5px -> 20px margin
text-box-trim would solve this properly, but Firefox has no support yet, so
it would silently leave the imbalance for some visitors.
If the title font, size or line-height changes, re-measure these. */
.rei-public-lands-vote h2,
.rei-public-lands-101 h2 {
margin-bottom: 8px !important;
}
/* ------------------------------------------------------------------
SECTION TITLE TREATMENT
Every section title on the page takes the hero h1's face — Stuart Light —
at its own h2 size, without the hero's text-shadow (that only existed to
lift white type off video).
The selector list is the page's own six section titles, matching the
rhythm rule further down. It is deliberately NOT a bare `h2`: the global
footer ships its own h2s ("Who we are", "Become an REI Co-op Member" and
friends) which must keep the theme treatment.
Each scoping class is repeated, as with the quiz inputs above. The parent
theme's `.cb-body-light h2` sets weight 600 at identical specificity and
style.css loads after this file, so a single class loses on source order.
------------------------------------------------------------------ */
.rei-public-lands-vote.rei-public-lands-vote h2,
.rei-public-lands-101.rei-public-lands-101 h2,
.rei-public-lands-pnts.rei-public-lands-pnts h2,
.rei-public-lands-ways-inner.rei-public-lands-ways-inner h2,
.rei-spiritpeaks-partners-container.rei-spiritpeaks-partners-container h2,
.rei-public-lands-shop.rei-public-lands-shop h2,
.rei-public-lands-action.rei-public-lands-action h2,
.rei-public-lands-donations.rei-public-lands-donations h2 {
font-family: Stuart, Georgia, serif;
font-weight: 300;
/* !important only because the parent theme's .cb-body-light h2 sets
font-size: 32px !important, which no amount of specificity beats. */
font-size: 44px !important;
line-height: 50px;
text-shadow: none;
}
@media ( max-width: 575px ) {
.rei-public-lands-vote.rei-public-lands-vote h2,
.rei-public-lands-101.rei-public-lands-101 h2,
.rei-public-lands-pnts.rei-public-lands-pnts h2,
.rei-public-lands-ways-inner.rei-public-lands-ways-inner h2,
.rei-spiritpeaks-partners-container.rei-spiritpeaks-partners-container h2,
.rei-public-lands-shop.rei-public-lands-shop h2,
.rei-public-lands-action.rei-public-lands-action h2,
.rei-public-lands-donations.rei-public-lands-donations h2 {
font-size: 34px !important;
line-height: 39px;
}
}
/* This title sits on the photo, so it takes the hero's treatment — white with
the same soft shadow — instead of the dark used on the flat-background
sections. Declared after the shared title rules so it beats their
`text-shadow: none` at equal specificity.
780px measure: at the full 1130px the headline overflows by ~40px and drops
the single word "action" onto line two. Held to 780 it breaks cleanly as
"More ways you can put your love for / public lands into action". */
.rei-public-lands-action.rei-public-lands-action h2 {
max-width: 780px;
margin-left: auto;
margin-right: auto;
color: #ffffff !important;
text-shadow: 1px 2px rgba(0, 0, 0, 0.2);
}
/* Optical margins, re-measured at 44px per the note on the shared rule above.
The two title-to-copy gaps diverge because of what each title ends on:
"…should go" drops a descender past the line box and needs the margin to
make up ~1px, while "Public Lands 101" ends on a digit and the larger line
box now supplies almost the whole gap on its own. The remaining margins in
this file are section rhythm rather than optical values, so they stand. */
.rei-public-lands-vote.rei-public-lands-vote h2 {
margin-bottom: 9px !important;
}
.rei-public-lands-101.rei-public-lands-101 h2 {
margin-bottom: 1px !important;
}
@media ( max-width: 575px ) {
.rei-public-lands-vote.rei-public-lands-vote h2 {
margin-bottom: 8px !important;
}
.rei-public-lands-101.rei-public-lands-101 h2 {
margin-bottom: 5px !important;
}
}
/* Accent colour for part of a section title. Which part varies — first word,
last phrase, or a figure mid-sentence — so it is applied inline per title. */
.rei-public-lands-accent {
color: #78701A;
}
/* The quiz's "message before" is deliberately unset in the quiz settings, but
QSM prints the wrapper regardless, and its own 10px padding and 20px margin
left 30px of dead space above the form. Zeroed rather than display:none, and
rather than :empty — QSM leaves a whitespace text node inside, so :empty
never matches — so that a message reinstated later would still render. */
.rei-public-lands-quiz .qsm-before-message {
margin-bottom: 0;
padding-bottom: 0;
}
/* The section inherits a 745px container from
.rei-spiritpeaks-illustration-container, sized for the single column of copy
this block used to be. Three cards do not fit that measure — at 745px they
came out 215px wide, the narrowest on the page, against 245px for the
four-up partner cards below.
1130px is the page's content measure: the partners grid and the About
panel's content both use it, so all three sections now share a left and
right edge. Its own class, because .rei-public-lands-pnts and
.rei-spiritpeaks-illustration-container are both shared with the About
panel, which sets its own width.
The h2 gains room too and now sets on one line rather than two. */
.rei-public-lands-getinvolved.rei-public-lands-getinvolved {
width: 1130px;
max-width: 100%;
}
/* ---------------------
GET INVOLVED COLUMNS
Two icon + title + copy + button columns under the section's description.
Everything here is scoped with a repeated .rei-public-lands-pnts because
that class is shared with the PNTS section below, whose own rules target
bare `img` and .rei-oi5-cta-details-btn inside the section (the 745px map
width, and the 37px button gap tuned for a button that follows a
paragraph). Those rules still serve that section, so they stay — these
simply out-specify them for the elements inside a column.
--------------------- */
.rei-public-lands-pnts.rei-public-lands-pnts .rei-public-lands-getinvolved-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px var(--pl-col-gap);
margin: 34px auto 0;
text-align: center;
}
/* Single column on phones, as the vote grid does: at two across the buttons
start wrapping to two lines inside their columns. */
@media ( max-width: 600px ) {
.rei-public-lands-pnts.rei-public-lands-pnts .rei-public-lands-getinvolved-grid {
grid-template-columns: 1fr;
gap: 34px;
}
}
/* Sized by height like the vote icons, since the two differ in aspect (0.60
and 0.77). Taller than the vote grid's 72px because both of these are
portrait: at 72px they carry visibly less optical weight than a landscape
icon of the same height. */
.rei-public-lands-pnts.rei-public-lands-pnts .rei-public-lands-getinvolved-icon {
display: block;
width: auto;
height: 88px;
margin: 0 auto 16px;
}
.rei-public-lands-pnts.rei-public-lands-pnts .rei-public-lands-getinvolved-title {
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 20px !important;
line-height: 26px;
font-weight: 600;
color: rgba(12, 11, 8, 0.9);
margin: 0 0 6px !important;
padding: 0 !important;
letter-spacing: 0.08px;
}
/* Matches the vote card copy. Explicit width and margin: the section's
paragraph rules set an 18px/30px body size and their own margins, which
would leave the two columns visibly out of step with the other card grid. */
.rei-public-lands-pnts.rei-public-lands-pnts .rei-public-lands-getinvolved-copy {
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: rgba(12, 11, 8, 0.75);
letter-spacing: 0.08px;
width: auto;
margin: 0;
padding: 0;
}
/* Not the section's 37px: that value is sized to collapse against a paragraph's
20px bottom margin, and .rei-public-lands-getinvolved-copy sets margin 0, so
nothing collapses here and the whole value would land as-is.
Read optically, not off the box: as the section rule below explains, the
anchor is display:inline and its background paints ~9px above this wrapper's
top edge, so the visible gap is roughly 9px less than the margin. 32px here
reads as ~23px of white space above the button — enough to separate it from
the copy while still closing the card rather than splitting it.
(Was 20px, chosen while both columns held two-word placeholder copy and the
button sat close under a single short line. With real multi-line copy in the
columns that gap read as too tight.) */
.rei-public-lands-pnts.rei-public-lands-pnts .rei-public-lands-getinvolved-col .rei-oi5-cta-details-btn {
margin-top: 32px;
}
/* Both buttons on one line, the same way the partner cards do it: the grid
stretches the two columns to equal height, so a flex column plus
`margin-top:auto` on the button parks it against the column's bottom edge.
Without this the buttons sit wherever each column's copy ends, and the two
copy blocks differ by a line.
Only above 600px, which is where the grid is two across. Below that it is one
column per row, each row is only as tall as its own card, and there is no
free space for `auto` to absorb — nothing to align, and nothing to undo.
padding-top rather than a margin, because `margin-top:auto` has to replace
the 32px above. Unlike the partner cards this is a straight 32px, not 12+20:
.rei-public-lands-getinvolved-copy sets `margin: 0`, so there is no bottom
margin here to collapse in blocks or to add on in flex, and the same number
works in both layouts.
The icons are safe under `align-items:stretch` (the default) despite having
`width:auto`: their `margin: 0 auto` sets auto cross-axis margins, and an
item with an auto margin on the cross axis is not stretched. Verified — both
icons still measure 53x88 and 68x88 after this rule. */
@media ( min-width: 601px ) {
.rei-public-lands-pnts.rei-public-lands-pnts .rei-public-lands-getinvolved-col {
display: flex;
flex-direction: column;
}
.rei-public-lands-pnts.rei-public-lands-pnts .rei-public-lands-getinvolved-col .rei-oi5-cta-details-btn {
margin-top: auto;
padding-top: 32px;
}
}
/* ---------------------
VOTE CATEGORY COLUMNS
Three icon + title + copy columns between the Vote title and its copy.
Width matches the 758px the section's paragraphs use so the block lines up
with the copy above and below it.
--------------------- */
.rei-public-lands-vote-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px var(--pl-col-gap);
width: 758px;
max-width: 100%;
margin: 34px auto 30px;
text-align: center;
}
@media ( max-width: 838px ) {
.rei-public-lands-vote-grid {
width: auto;
padding-left: 40px;
padding-right: 40px;
}
}
/* Single column on phones: at three across the copy wraps to five or six
very short lines and the icons shrink below a legible size. */
@media ( max-width: 600px ) {
.rei-public-lands-vote-grid {
grid-template-columns: 1fr;
gap: 34px;
margin-top: 30px;
}
}
/* Sized by height, not width: the three icons have different aspect ratios
(1.36, 1.22 and 0.85), so matching heights keeps them optically consistent
where matching widths would not. */
.rei-public-lands-vote-icon {
display: block;
height: 72px;
width: auto;
margin: 0 auto 16px;
}
.rei-public-lands-vote.rei-public-lands-vote .rei-public-lands-vote-title {
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 20px !important;
line-height: 26px;
font-weight: 600;
color: rgba(12, 11, 8, 0.9);
margin: 0 0 6px !important;
padding: 0 !important;
letter-spacing: 0.08px;
}
/* Repeated class and explicit width: .rei-smr21-filmhub-podcast-container p
sets width 758px with a 20px bottom margin, which would stretch each column
and add a gap under the last line. */
.rei-public-lands-vote.rei-public-lands-vote .rei-public-lands-vote-copy {
font-family: Graphik, 'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: rgba(12, 11, 8, 0.75);
letter-spacing: 0.08px;
width: auto;
margin: 0;
padding: 0;
}
.rei-public-lands-pnts h2 {
margin-bottom: 19px !important;
}
/* PNTS map: 25px above and below, matching the gap under the title.
display:block is still required — as an inline element the image sits on the
text baseline, which adds ~18px underneath that no margin can remove. The
paragraph's inherited top margin stays zeroed so the image's own 25px is the
whole gap rather than compounding with it. */
.rei-public-lands-pnts img {
display: block;
/* display:block with no auto margins parks the map on the left edge as soon
as it is narrower than the container — which it is below 785px, where the
width rule above switches it to auto. */
margin-left: auto;
margin-right: auto;
margin-bottom: 14px;
}
.rei-public-lands-pnts p {
margin-top: 0;
}
/* Balance the copy block in the three tight sections: the description sits 25px
below its title, so it needs the same 25px beneath it. The inherited rule
left 20px, which read as visibly lopsided against the 25px above.
Direct child (>) so this only touches each section's own description — the
QSM embed emits its own paragraphs inside .rei-public-lands-quiz, which keep
their own spacing. (PNTS also had an inline `margin-top:30px` on its button
that collapsed to 30px here; removed from the template.) */
.rei-public-lands-vote > p,
.rei-public-lands-101 > p,
.rei-public-lands-pnts > p {
margin-bottom: 20px;
}
/* Matches the whitespace above the button to the whitespace between the
paragraphs — measured 32.8px between paragraph glyphs, against 15.7px above
the button before this rule. Two things eat that difference, and neither is
visible in the box model:
- a paragraph carries ~8px of empty leading above its first line, and the
button, being a filled box, carries none;
- the anchor is display:inline, so its 15px padding does not grow the line
box and its background paints ~9px above the wrapper's own top edge.
So the box gap has to be 37px to read as the same 32.8px of white space.
Stated as one value rather than 17px added on: this margin collapses with
the paragraph's 20px bottom margin, and collapsing takes the larger of the
two, so anything under 20px here would have no effect at all. */
.rei-public-lands-pnts .rei-oi5-cta-details-btn {
margin-top: 37px;
}
/* ==================================================================
VERTICAL SPACING SCALE
Declared last so it settles every gap inside a section in one place,
rather than leaving them spread across the rules above.
Two values, in *visible* white space rather than margin values:
25px a title to the content it introduces — tight, so the heading
reads as belonging to what follows
33px between content blocks: image to copy, copy to copy, copy to
a CTA, and a CTA to the small print beneath it
Section top and bottom padding stays at the 95px rhythm and is already
consistent, so it is untouched here.
The margins below are NOT those two numbers. Visible space is the margin
plus the empty leading each neighbour carries: a paragraph adds ~8px above
its first line, an image or button adds none, and a title's own descender
depth varies with whether its last line ends on a descender. Each value is
therefore the measured margin needed to land on the target, and every one
was checked in the browser. Re-measure if the type sizes change.
================================================================== */
/* --- Title -> content : 25px visible --- */
.rei-public-lands-vote-grid {
margin-top: 25px;
}
/* "Celebrate…" and "Partnership for…" both run into an image, which has no
leading of its own, so the margin is the whole gap. */
.rei-public-lands-pnts.rei-public-lands-pnts h2 {
margin-bottom: 25px !important;
}
/* The only title running into a paragraph rather than an image or a grid, so
it gives up leading at BOTH ends — ~8px under the title's glyphs and ~8px
above the copy's first line — and needs the smallest margin of the set. */
.rei-public-lands-101.rei-public-lands-101 h2 {
margin-bottom: 9px !important;
}
/* Half a rhythm unit below the partners title — deliberately half, so the
title sits closer to its grid than to the band edge above it. Measured, the
gap reads as ~52px of visible space against the ~103px above the title.
Not on the 25px tier further up either: this is its own value. (The 17px it
carried before was tuned for the old "Meet Four Featured Partners" wording,
which ended on an 's'; the current title ends on "we love." and its
descenders eat the ~8px that value assumed, so it had been reading tighter
than the 25px it was aiming for.)
Divided from the token rather than hard-coded, so the 900px and 600px
breakpoints keep scaling it. No optical correction is added here: the
title's last line ends on descenders that fill its line box (-0.9px of tail)
and the h3 below contributes 5.8px of leading, which together add only ~4.6px
to whatever this margin is — under a pixel of difference from a true halving,
and not worth a magic number to chase. */
.rei-spiritpeaks-partners-container.rei-spiritpeaks-partners-container h2 {
margin-bottom: calc(var(--pl-rhythm) / 2) !important;
}
/* "Shop Our Public Lands Collection" ends on an 'n' with no descender, leaving
~8px under the glyphs; the banner below is an image, which has no leading. */
.rei-public-lands-shop.rei-public-lands-shop h2 {
margin-bottom: 17px !important;
}
/* Matched to the visible gap under the partners title, measured 53.6px there.
Where the gap ENDS differs between the two sections, which is what sets the
margin. The partner cards are transparent with no padding, so nothing is
visible until their heading's glyphs and the gap runs glyph to glyph. These
cards are filled white boxes sitting on this section's background PHOTO, so
the eye stops at the card's top edge — their 40px of internal top padding is
inside the card, not part of the white space above it.
So the measurement here runs from the title's glyphs to the card's edge, and
the margin is very nearly the whole gap: this title's last line ("…into
action") has no descenders, leaving only 0.6px of tail below its glyphs.
+5.5px over the partners value is the difference between what each gap picks
up for free — 6.1px there from the title's descenders plus the h3's leading,
0.6px here. Kept on the token so both track together at the breakpoints. */
.rei-public-lands-action.rei-public-lands-action h2 {
margin-bottom: calc((var(--pl-rhythm) / 2) + 5.5px) !important;
}
/* "Where your support went" ends on a descender, which eats into the gap. */
.rei-public-lands-donations.rei-public-lands-donations h2 {
margin-bottom: 26px !important;
}
/* --- Content -> content : 33px visible --- */
.rei-public-lands-pnts.rei-public-lands-pnts img {
margin-bottom: 25px;
}
.rei-public-lands-vote-grid {
margin-bottom: 25px;
}
.rei-public-lands-vote.rei-public-lands-vote > p {
margin-bottom: 28px;
}
/* Buttons are filled boxes with no leading, and their inline padding paints
~9px above the wrapper's box, so these carry more than the others. They also
collapse against the preceding paragraph's bottom margin, which takes the
larger of the two — hence single values rather than increments. */
.rei-public-lands-101.rei-public-lands-101 .rei-oi5-cta-details-btn {
margin-top: 39px;
}
.rei-public-lands-shop.rei-public-lands-shop .rei-oi5-cta-details-btn {
margin-top: 47px;
}
/* ==================================================================
ABOUT NATIONAL SCENIC & HISTORIC TRAILS
A two-column cream panel: map on the left, title / copy / CTA on the right.
Every selector here doubles .rei-public-lands-about, because BOTH classes
this section inherits are shared with the Get Involved section above —
.rei-spiritpeaks-illustration-container (745px container, map sizing) and
.rei-public-lands-pnts (centred text, 37px button gap, title rhythm). Those
rules still serve that section, so nothing above is edited; this block
out-specifies them for this section only. It sits at the end of the file so
it also wins on source order against the equal-specificity title rules in
the VERTICAL SPACING SCALE block.
================================================================== */
/* The inherited container is 745px, sized for the old single column.
The panel's CONTENT lines up with the cards above — map left edge to the
first card's left edge, copy right edge to the last card's right edge — so
the cream box sits one rhythm unit proud of them on each side, and its width
is the partners grid's 1130px content measure plus that padding twice.
Matching the box itself to 1130px would inset the content by the padding and
leave nothing aligned. Kept as a calc on the token so the two stay tied. */
.rei-public-lands-about.rei-public-lands-about {
width: calc(1130px + (var(--pl-rhythm) * 2));
max-width: 100%;
}
/* The panel. #f4f2ed and a constrained width follow the page's existing
constrained-cream precedent, .rei-oi5-cta-container — deliberately not a
full-bleed band, so it reads as a card inside the white section rather than
as another colour band in the page's rhythm.
text-align:left overrides the centring .rei-public-lands-pnts applies to the
whole section: centred type in a half-width column with a ragged CTA under
it reads as unresolved, and the copy here is long enough to need a straight
left edge. */
.rei-public-lands-about.rei-public-lands-about .rei-public-lands-about-box {
box-sizing: border-box;
padding: var(--pl-rhythm);
/* Same +17px the partners band above carries, and for the same reason: the
body column is the taller of the two and closes on the CTA, whose inline
anchor paints its background ~8.5px below the grid's own box edge, while
at the top the padding is followed by ~8.3px of leading above the title's
caps. Equal padding would read as ~86px at the bottom against ~103px at
the top; this makes both ends look like the rhythm unit they are. */
padding-bottom: calc(var(--pl-rhythm) + 17px);
background-color: #f4f2ed;
text-align: left;
}
/* The two columns sit below the title, which spans the panel. */
.rei-public-lands-about.rei-public-lands-about .rei-public-lands-about-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 48px;
align-items: center;
}
/* One column below the 4-Ways breakpoint, where half of 1130px stops being
wide enough for either the map or the copy. Centred again once stacked, to
match how the other grids on the page behave at this width. */
@media ( max-width: 900px ) {
.rei-public-lands-about.rei-public-lands-about .rei-public-lands-about-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.rei-public-lands-about.rei-public-lands-about .rei-public-lands-about-box {
text-align: center;
}
}
/* The map is pinned to 745px by two inherited rules; in a column that
overflows the panel. Fluid instead, so it scales with the column. */
.rei-public-lands-about.rei-public-lands-about .rei-public-lands-about-media img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin: 0;
}
/* The title spans the panel and is centred over both columns, so it is a
direct child of the panel rather than of the body column — and it keeps its
own centring against the panel's left-aligned text.
The shared rules give every section heading a full rhythm unit below (95px),
which is a between-sections value; inside a panel the title is closing on its
own content, so it takes a tighter 32px. */
.rei-public-lands-about.rei-public-lands-about h2 {
margin-bottom: 32px !important;
text-align: center;
}
/* .rei-public-lands-pnts > p no longer reaches these paragraphs — they are
children of the body column now, not of the section — so their spacing is
set here rather than inherited. */
.rei-public-lands-about.rei-public-lands-about .rei-public-lands-about-body p {
margin-top: 0;
margin-bottom: 20px;
text-align: inherit;
}
.rei-public-lands-about.rei-public-lands-about .rei-public-lands-about-body p:last-of-type {
margin-bottom: 0;
}
/* The page's standard copy-to-button gap: 32px of box, which reads as 23px of
visible white space once the anchor's inline background is accounted for
(it paints ~9px above this wrapper's top edge). Matches the Get Involved
columns and the partner cards exactly.
A plain 32px margin here, not the 12+20 split the partner cards use: the
last paragraph in the panel is zeroed by the :last-of-type rule above, so
there is no bottom margin to collapse with or add to, and the margin is the
whole gap. The 37px inherited from .rei-public-lands-pnts is tuned for a
button closing a full-width section and is overridden. */
.rei-public-lands-about.rei-public-lands-about .rei-oi5-cta-details-btn {
margin-top: 32px;
}
/* ==================================================================
VOTE SECTION MEASURE (desktop)
860px rather than the band's inherited 758px. At 758 the description broke
across six lines and left "2nd." alone on the last one; 860 pulls it back to
five with the final line running about half the measure. Measured, the copy
needs 782px to lose the orphan and would drop to four lines at 982px, so 860
sits with headroom on both sides — a copy tweak either way will not re-orphan
it or reflow the block.
All four of the section's blocks move together. The grid, the quiz embed and
the legal line are each documented as matching the paragraph's measure so the
section shares one pair of edges; widening the paragraph alone would leave it
51px proud of the other three.
Desktop only, from 960px — 860 plus 50px of breathing room each side. Below
that the existing rules still apply: 758px down to 838px, then width:auto
with 40px of padding, which is what the phone layout already does well. */
@media ( min-width: 960px ) {
.rei-public-lands-vote.rei-public-lands-vote > p,
.rei-public-lands-vote.rei-public-lands-vote .rei-public-lands-vote-grid,
.rei-public-lands-vote.rei-public-lands-vote .rei-public-lands-quiz {
width: 860px;
max-width: 100%;
}
}