/* Theme Name: Adam Rainoff Photographer Description: Theme for rainoff.com: photo-story fields, story details panel, Stories wording and the no-crop rule. Author: Adam Rainoff Version: 1.6.88 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: rainoff */ /* ---------- No-crop rule: images keep their natural aspect ratio everywhere ---------- */ img:not(.leaflet-tile):not(.rs-pop-img), .wp-post-image, .preview-media img, .featured-media img, .single-nav-item-media img { height: auto !important; max-width: 100%; object-fit: contain !important; aspect-ratio: auto !important; } .preview-media, .preview-media-link, .featured-media .media-wrapper, .single-nav-item-media { height: auto !important; aspect-ratio: auto !important; } /* ---------- Footer: copyright only, no theme credit ---------- */ .footer-credits .theme-credits { display: none; } /* 1.5.14: footer: 500px + Canon icons join the social-icon row (functions.php). 1.5.53: on every page, not only Home. * On phones the copyright takes its own row and the social icons sit on one right-aligned row below it (no wrap). */ @media (max-width: 699px) { #site-footer .footer-inner { flex-wrap: wrap; row-gap: .8rem; } #site-footer .social-menu { flex: 1 0 100%; flex-wrap: nowrap; justify-content: flex-end; } } @media (max-width: 359px) { #site-footer .social-menu a { padding: .8rem; } } /* ---------- Black site, white text (colours come from RPhoto's Customizer; these are the extras) ---------- */ html, body { background: var(--bg); color: var(--text); } a:hover, a:focus { color: var(--link-hover); } :focus-visible { outline: 2px solid var(--text) !important; outline-offset: 2px; } ::placeholder { color: var(--muted); opacity: 1; } .search-field, input[type="search"], input[type="text"], textarea { background: var(--bg); color: var(--text); border-color: var(--dim); } /* ---------- Stories wording additions ---------- */ .rainoff-read-story { display: inline-block; margin-top: .6rem; font-size: 1.5rem; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: .2em; } .rainoff-read-story:hover, .rainoff-read-story:focus { color: var(--link-hover); text-decoration: none; } .rainoff-more-stories { margin: 3.2rem auto 1.2rem; font-size: 1.8rem; color: var(--text); } .single-nav-label { display: block; margin: 0 0 .4rem; font-size: 1.4rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .rainoff-count { margin-top: .8rem; font-size: 1.5rem; color: var(--muted); } /* ---------- "Story behind the image" panel ---------- */ .rainoff-story-details { margin: 4rem 0 0; padding: 2.4rem; background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--text); color: var(--text); font-size: 1.6rem; } .rainoff-story-details .rainoff-panel-label { margin: 0 0 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1.3rem; color: var(--muted); } .rainoff-story-details dl { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1.6rem; margin: 0; } .rainoff-story-details dt { font-weight: 600; margin: 0; } .rainoff-story-details dd { margin: 0; } .rainoff-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; } /* The logo already carries the name; the tagline is kept for SEO but hidden (as on the previous theme). */ .site-description { display: none; } /* ---------- Header: same as the original static site (values converted from 16px rem to px) ---------- */ .rainoff-site-header { background: var(--nav-bg); color: var(--text); position: relative; z-index: 10; margin-bottom: 4.8rem; font-family: var(--rainoff-body); } .rainoff-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .rainoff-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; } .rainoff-logo-h { margin: 0; font-size: inherit; line-height: 0; } .rainoff-logo { display: block; flex: 0 1 auto; line-height: 0; } .rainoff-logo img { display: block; width: min(304px, 56vw) !important; height: auto !important; max-height: none; } .rainoff-nav-toggle { display: none; align-items: center; gap: 8px; background: transparent !important; color: var(--text) !important; border: 1px solid rgb(var(--text-rgb) / .45); border-radius: 4px; padding: 7.2px 12px; font: 400 12.8px/1 var(--rainoff-head); font-synthesis: none; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; text-decoration: none !important; } .rainoff-nav-toggle .bars, .rainoff-nav-toggle .bars::before, .rainoff-nav-toggle .bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; content: ""; } .rainoff-nav-toggle .bars::before { position: absolute; top: -6px; } .rainoff-nav-toggle .bars::after { position: absolute; top: 6px; } .rainoff-site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 25.6px; } .rainoff-site-nav li { margin: 0; } .rainoff-site-nav a { color: var(--text); text-decoration: none; font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; font-size: 12.8px; line-height: 1.7; letter-spacing: .14em; text-transform: uppercase; padding: 5.6px 0; border-bottom: 2px solid transparent; display: inline-block; } .rainoff-site-nav a:hover, .rainoff-site-nav a:focus { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .rainoff-site-nav .current-menu-item > a, .rainoff-site-nav .current-menu-parent > a, .rainoff-site-nav .current-post-ancestor > a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .rainoff-site-header :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } @media (min-width: 880px) { .rainoff-wrap { padding: 0 40px; } } @media (max-width: 879.98px) { .rainoff-js .rainoff-nav-toggle { display: inline-flex; } .rainoff-js .rainoff-site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--nav-bg); border-top: 1px solid var(--line); padding: 8px 20px 20px; } .rainoff-js .rainoff-site-nav.open { display: block; } .rainoff-js .rainoff-site-nav ul { flex-direction: column; gap: 0; } .rainoff-js .rainoff-site-nav a { display: block; padding: 12.8px 0; font-size: 14.4px; border-bottom: 1px solid var(--surface); } .rainoff-js .rainoff-site-nav .current-menu-item > a, .rainoff-js .rainoff-site-nav .current-menu-parent > a, .rainoff-js .rainoff-site-nav .current-post-ancestor > a { color: var(--text); border-bottom-color: var(--surface); } .rainoff-header-inner { padding-top: 11.2px; padding-bottom: 11.2px; } html:not(.rainoff-js) .rainoff-header-inner { flex-wrap: wrap; } .rainoff-js .rainoff-header-inner { flex-wrap: nowrap; } } .rainoff-nav-toggle:hover, .rainoff-nav-toggle:focus { background: transparent !important; color: var(--text) !important; text-decoration: none !important; } /* ---------- Home (front-page.php): original static home layout, on black. 16px-rem values converted to px. ---------- */ .home .rainoff-site-header { margin-bottom: 0; } .rainoff-home { font-family: var(--rainoff-body); font-weight: 300; font-size: 17px; line-height: 1.7; color: var(--text); background: var(--bg); } .rainoff-home h1, .rainoff-home h2 { font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; } .rainoff-home p { margin: 0 0 16px; } .rainoff-home a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .rainoff-home a:hover, .rainoff-home a:focus { color: var(--text); } .rainoff-home :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .rh-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .rh-section { padding: clamp(48px, 6vw, 88px) 0; } .rh-section + .rh-section { border-top: 0; } /* 1.5.60: shared separator (themes.css) */ .rh-band { background: var(--bg); } .rh-dark { background: var(--bg); color: var(--text); } .rh-center { text-align: center; } .rh-center .rh-btn-row { justify-content: center; } .rh-eyebrow { margin: 0 0 9.6px !important; font-size: 12.8px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .rh-meta { color: var(--muted); } .rh-section-head { text-align: center; max-width: 704px; margin: 0 auto 40px; } .rh-section-head h2 { margin: 0 0 12.8px; } .rh-section-head p { margin: 0; } /* Buttons: see "One white button style" (1.5.21) at the end of this file */ .rh-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* Photos: always whole, never cropped */ .rh-photo { margin: 0; } .rh-photo img { display: block; width: auto !important; height: auto !important; max-width: min(100%, 960px); max-height: min(80vh, 960px); margin: 0 auto; object-fit: contain; } /* Hero */ .rh-hero { background: var(--nav-bg); color: var(--text); padding: 24px 0 40px; } .rh-hero .rh-photo img { max-height: min(76vh, 960px); } .rh-hero-caption { text-align: center; margin-top: 16px; } .rh-hero-caption p { margin: 0; } .rh-hero-species { font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; font-size: clamp(24px, 17.6px + 1.6vw, 36.8px); line-height: 1.2; color: var(--text); } .rh-hero-place { margin: 5.6px 0 0 !important; font-size: 12.8px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .rh-hero-caption p:last-child { margin-top: 16px; } /* Mission */ .rh-mission { text-align: center; } .rh-mission h1 { margin: 0 auto; max-width: 38ch; text-wrap: balance; } /* Split */ .rh-split { display: grid; gap: 32px; align-items: center; } .rh-split h2 { margin: 0 0 16px; } .rh-h2-prints { margin: 0 0 12.8px; } /* Masonry of whole tiles (CSS columns) */ .rh-masonry { columns: 1; column-gap: 24px; list-style: none; margin: 0; padding: 0; } .rh-tile { break-inside: avoid; margin: 0 0 28px; display: block; } .rainoff-home .rh-tile a { display: block; text-decoration: none; color: inherit; } .rh-tile img { display: block; width: 100%; height: auto !important; } .rh-tile-text { display: block; padding-top: 10.4px; } .rh-tile-title { display: block; font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; font-size: 18.4px; color: var(--text); line-height: 1.3; } .rh-tile-meta { display: block; font-size: 13.6px; color: var(--muted); } .rainoff-home .rh-tile a:hover .rh-tile-title { color: var(--text); text-decoration: underline; } /* Meet the photographer */ .rh-portrait { margin: 0 auto; max-width: 288px; } .rh-portrait img { display: block; width: 100%; height: auto !important; object-fit: contain; } /* Conservation */ .rh-stat { font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; font-size: clamp(20px, 16px + 1vw, 27.2px); line-height: 1.4; color: var(--text); max-width: 736px; margin: 0 auto !important; text-wrap: balance; } @media (min-width: 640px) { .rh-masonry { columns: 2; } } @media (min-width: 880px) { .rh-wrap { padding: 0 40px; } .rh-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } .rh-split.rh-reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .rh-split.rh-reverse > :first-child { order: 2; } .rh-masonry { columns: 3; column-gap: 32px; } } #site-content.rainoff-home { display: block; overflow: visible; align-items: initial; } .rainoff-home > section { width: 100%; } /* ---------- Portfolio (page-portfolio.php): RPhoto masonry, images only ---------- */ .rp-head { margin-bottom: 4rem; } .rp-intro { color: var(--muted); } .rp-item { position: relative; margin: 0 0 3.2rem; } .rp-item a { display: block; position: relative; color: var(--text); text-decoration: none; } .rp-item img { display: block; width: 100%; height: auto !important; } .rp-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.4rem 1.2rem; font-size: 1.6rem; font-weight: 600; color: var(--text); background: linear-gradient(to top, rgb(var(--bg-rgb) / .85), rgb(var(--bg-rgb) / 0)); opacity: 0; transition: opacity .2s ease; pointer-events: none; } .rp-item a:hover .rp-caption, .rp-item a:focus .rp-caption, .rp-item a:focus-visible .rp-caption { opacity: 1; } .rp-item a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } @media (hover: none) { .rp-caption { position: static; opacity: 1; background: none; padding: .8rem 0 0; font-size: 1.5rem; } } /* ---------- Stories (category-stories.php): map + editorial list ---------- */ #site-content.rainoff-stories, #site-content.rainoff-portfolio { display: block; overflow: visible; } .rainoff-stories { font-family: var(--rainoff-body); color: var(--text); } .rs-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .rs-head { text-align: center; margin-bottom: 32px; } .rs-title { margin: 0 0 8px; font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; color: var(--text); } .rs-intro { max-width: 672px; margin: 0 auto; font-size: 17px; } .rs-intro p { margin: 0; } .rs-map-section { margin-bottom: 56px; } .rs-map { height: min(62vh, 560px); min-height: 320px; background: #0b0b0b; border: 1px solid #262626; position: relative; z-index: 1; } .rs-map-placeholder { margin: 0; padding: 24px; color: #bdbdbd; font-size: 15px; } .rs-map-credit { margin: 10px 0 0; font-size: 13.5px; color: #bdbdbd; line-height: 1.5; } .rs-map-credit a { color: #fff; text-decoration: underline; } .rs-map-credit a:hover, .rs-map-credit a:focus { color: #fff; } #rs-map .rs-tiles { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.35); } #rs-map.leaflet-container { background: #0b0b0b; font: 13px/1.4 var(--rainoff-body); } #rs-map .leaflet-control-attribution { background: rgba(0,0,0,.75); color: #d0d0d0; font-size: 11.5px; } #rs-map .leaflet-control-attribution a { color: #fff; } #rs-map .leaflet-bar a { background: #111; color: #fff; border-bottom-color: #333; } #rs-map .leaflet-bar a:hover, #rs-map .leaflet-bar a:focus { background: #222; color: #fff; } .rs-group { width: 0 !important; height: 0 !important; overflow: visible; } .rs-g { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px 10px 4px 4px; background: rgb(var(--bg-rgb) / .88); border: 1px solid rgb(var(--text-rgb) / .7); border-radius: 999px; color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.2; box-shadow: 0 1px 6px rgb(var(--bg-rgb) / .6); cursor: pointer; } .rs-g.rs-g-r { transform: translate(-16px, -50%); } /* 1.5.15: count bubble centred on the true point, name to the right */ .rs-g.rs-g-l { transform: translate(calc(-100% + 16px), -50%); flex-direction: row-reverse; padding: 4px 4px 4px 10px; } /* name to the left */ .rs-lead { position: absolute; left: 0; top: -0.5px; height: 1px; background: var(--text); opacity: .55; transform-origin: 0 50%; pointer-events: none; display: none; } /* 1.5.16 / 1.6.47: thin leader in label color (light + dark) */ .rs-gdot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); opacity: .75; box-shadow: 0 0 0 1px rgb(var(--bg-rgb) / .55); pointer-events: none; display: none; } .rs-moved .rs-lead, .rs-moved .rs-gdot { display: block; } .rs-group:hover .rs-g, .rs-group:focus .rs-g { background: var(--bg); border-color: var(--text); } .rs-g-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--text); color: var(--surface); box-shadow: 0 0 0 1px var(--surface); font-size: 12.5px; font-weight: 700; transition: transform .15s ease; } .rs-pin span { display: block; width: 22px; height: 22px; margin: 3px; border-radius: 50%; background: #fff; border: 1px solid #111; box-sizing: border-box; transition: transform .15s ease; } #rs-map .marker-cluster { background: rgba(255,255,255,.22); border-radius: 50%; } #rs-map .marker-cluster div { width: 30px; height: 30px; margin: 5px; border-radius: 50%; background: #fff; color: #111; border: 1px solid #111; box-sizing: border-box; font-weight: 700; display: flex; align-items: center; justify-content: center; } #rs-map .leaflet-popup-content-wrapper, #rs-map .leaflet-popup-tip { background: #111; color: #fff; border: 1px solid #333; } #rs-map .leaflet-popup-content { margin: 12px; } #rs-map a.leaflet-popup-close-button { color: #fff; } .rs-pop img { display: block; width: 100%; height: auto !important; max-width: 216px; margin: 0 0 8px; object-fit: contain; } .rs-pop-title { margin: 0 0 2px !important; font-weight: 700; font-size: 15px; color: #fff; } .rs-pop-place { margin: 0 0 8px !important; font-size: 12.5px; color: #c9cbc4; } .rs-pop-read { color: #fff !important; text-decoration: underline; font-weight: 600; } .rs-pop-read:hover { color: #fff !important; text-decoration-thickness: 2px; } .rs-list { list-style: none; margin: 0 auto; padding-top: 0; padding-bottom: 0; } .rs-item { margin: 0; padding: 40px 0; border-top: 1px solid var(--surface); } .rs-item:first-child { border-top: 0; padding-top: 0; } .rs-story { display: flex; flex-direction: column; gap: 20px; } .rs-photo { margin: 0; } .rs-photo a { display: block; line-height: 0; } .rs-photo img { display: block; width: auto !important; height: auto !important; max-width: 100%; max-height: 70vh; margin: 0 auto; object-fit: contain; } .rs-story-title { margin: 0 0 6px; font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; } .rs-story-title a { color: var(--text); text-decoration: none; } .rs-story-title a:hover, .rs-story-title a:focus { color: var(--text); text-decoration: underline; } .rs-meta { margin: 0 0 12px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.6; } .rs-meta span { display: block; } .rs-excerpt { margin: 0 0 16px; font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--text); } .rs-more { text-align: center; margin: 24px auto 64px; } .rs-top-more { margin: 8px auto 0; } @media (min-width: 880px) { .rs-wrap { padding: 0 40px; } .rs-story { flex-direction: row; align-items: center; gap: 48px; } .rs-photo { flex: 0 1 auto; max-width: 62%; } .rs-photo img { margin: 0; } .rs-text { flex: 1 1 320px; min-width: 280px; } } /* ---------- Stories drill-down (1.5.0): breadcrumb, cue, Top 12 ---------- */ .rs-crumbs ol { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 15px; } .rs-crumbs li { display: flex; align-items: center; color: var(--text); } .rs-crumbs li + li::before { content: "\203A"; padding: 0 8px; color: var(--muted); } .rs-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .rs-crumbs a:hover, .rs-crumbs a:focus { color: var(--text); } .rs-crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--text); } .rs-cue-wrap { margin: 14px 0 0; text-align: center; } .rs-cue[hidden] { display: none !important; } .rs-cue { gap: 8px; } .rs-cue span { font-size: 18px; line-height: 1; } @media (prefers-reduced-motion: no-preference) { .rs-cue span { animation: rs-bob 1.6s ease-in-out infinite; } } @keyframes rs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } .rs-top { margin: 0 auto 56px; outline: none; scroll-margin-top: 80px; } .rs-top-title { margin: 0 0 4px; text-align: center; font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; color: var(--text); } .rs-top-title .rs-ebird-out { color: var(--text); } /* Leave-site confirm (1.5.31): eBird hotspot link in the Top heading */ .rs-leave { max-width: min(440px, calc(100vw - 32px)); margin: auto; padding: 28px 28px 24px; box-sizing: border-box; background: var(--surface); color: var(--text); border: 1px solid var(--text); border-radius: 0; } .rs-leave::backdrop { background: rgb(var(--bg-rgb) / .72); } .rs-leave-title { margin: 0 0 12px; font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; font-size: var(--rainoff-h4); line-height: 1.3; color: var(--text); } .rs-leave-desc { margin: 0 0 22px; font-size: 16px; line-height: 1.5; color: var(--text); } .rs-leave-desc strong { color: var(--text); font-weight: 600; } .rs-leave-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; } .rs-top-note { margin: 0 0 24px; text-align: center; font-size: 14px; color: var(--muted); } .rs-top-empty { text-align: center; color: var(--muted); } .rs-top-grid { list-style: none; margin: 0; padding: 0; columns: 3 300px; column-gap: 20px; transition: opacity .2s ease; } .rs-top.is-loading .rs-top-grid { opacity: .45; } .rs-top-item { break-inside: avoid; margin: 0 0 20px; } .rs-top-item a { display: block; color: var(--text); text-decoration: none; } .rs-top-item img { display: block; width: 100%; height: auto !important; object-fit: contain; } .rs-top-text { display: block; padding: 8px 0 0; } .rs-top-name { display: block; font-weight: 600; font-size: 16px; color: var(--text); } .rs-top-place { display: block; font-size: 13px; color: var(--muted); } .rs-top-item a:hover .rs-top-name, .rs-top-item a:focus .rs-top-name { color: var(--text); text-decoration: underline; } .rs-top-item a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .rs-all-title { margin: 0 auto 8px; text-align: center; font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; color: var(--text); } .rs-all-sub { margin: 0 auto 28px; text-align: center; max-width: 36em; font-size: 16px; line-height: 1.5; color: var(--muted); font-weight: 300; } @media (pointer: coarse) { .rs-g { padding: 8px 14px 8px 8px; font-size: 14px; min-height: 40px; box-sizing: border-box; } .rs-g-count { min-width: 26px; height: 26px; } } @media (pointer: coarse) { .rs-g.rs-g-r { transform: translate(-22px, -50%); } .rs-g.rs-g-l { transform: translate(calc(-100% + 22px), -50%); padding: 8px 8px 8px 14px; } } @media (max-width: 640px) { .rs-map { height: 440px; } } /* ---------- Single story: extra rows + small location map ---------- */ .rainoff-story-details .rainoff-ebird-link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .rainoff-story-details .rainoff-ebird-link:hover, .rainoff-story-details .rainoff-ebird-link:focus { color: var(--text); } .rainoff-minimap-wrap { position: relative; margin: 20px 0 0; height: 220px; border: 1px solid var(--line); background: var(--bg); overflow: hidden; } .rainoff-minimap { position: absolute; inset: 0; z-index: 0; background: var(--bg); } .rainoff-minimap .rs-tiles { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.35); } .rainoff-minimap.leaflet-container { background: #0b0b0b; cursor: pointer; } .rainoff-minimap-hit { position: absolute; inset: 0; z-index: 1; display: block; } .rainoff-minimap-hit:focus-visible { outline: none !important; } .rainoff-minimap-wrap:has(.rainoff-minimap-hit:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; } .rainoff-minimap-wrap:hover { border-color: var(--text); } .rainoff-minimap-links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; margin: 6px 0 0; font-size: 14px; } .rainoff-minimap-links > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .rainoff-minimap-links > a:hover, .rainoff-minimap-links > a:focus { color: var(--text); } .rainoff-minimap-credit { font-size: 12px; color: var(--muted); } .rainoff-minimap-credit a { color: var(--text); } /* ---------- 960 px cap (1.5.3) ---------- * Every original is 960 px on the long side: never display a photo larger than 960 CSS px wide or tall, * never upscale, never crop. (CSS px cap only; high-DPI screens get the same 960 CSS px.) */ img:not(.leaflet-tile):not(.rs-pop-img) { max-width: min(100%, 960px) !important; max-height: 960px !important; height: auto !important; } /* Single-story featured photo (RPhoto stretches it to the content width): natural size, centered. */ #site-content .featured-media img, #site-content .featured-media .wp-post-image, #site-content .single-nav-item-media img { width: auto !important; height: auto !important; max-width: min(100%, 960px) !important; max-height: 960px !important; display: block; margin-left: auto !important; margin-right: auto !important; object-fit: contain !important; } #site-content .featured-media, #site-content .featured-media .media-wrapper { text-align: center; } /* Keep the viewport-height limits (stricter than 960 on short screens), capped at 960 on tall ones. */ #site-content .rh-photo img { width: auto !important; max-width: min(100%, 960px) !important; max-height: min(80vh, 960px) !important; } #site-content .rh-hero .rh-photo img { max-height: min(76vh, 960px) !important; } #site-content .rs-photo img { width: auto !important; max-width: min(100%, 960px) !important; max-height: min(70vh, 960px) !important; } #rs-map .rs-pop img.rs-pop-img { max-width: min(100%, 216px) !important; height: auto !important; } /* ---------- Text links: white + underlined everywhere (1.5.5, Branding/Adam 2026-10-02 23:03 PT) ---------- * Replaces the old link accent colour. Normal/visited: white, 1px underline; hover/focus: white, 2px underline. * Not touched: header nav menu items and logo, buttons (.rh-btn, .rs-read, .rs-load-more, .rs-cue, .rainoff-btn, * faux/wp buttons), image-card links (tiles, Top 12, portfolio, story photo), map controls and markers. */ a:not(.rainoff-site-header a):not(.rh-btn):not(.rs-read):not(.rs-load-more):not(.rs-cue):not(.rainoff-btn):not(.faux-button):not(.wp-block-button__link):not(.button):not(.leaflet-bar a):not(.leaflet-popup-close-button):not(.rainoff-minimap-hit):not(.rs-photo a):not(.rp-item a):not(.rh-tile a):not(.rs-top-item a):not(.rs-g), a:not(.rainoff-site-header a):not(.rh-btn):not(.rs-read):not(.rs-load-more):not(.rs-cue):not(.rainoff-btn):not(.faux-button):not(.wp-block-button__link):not(.button):not(.leaflet-bar a):not(.leaflet-popup-close-button):not(.rainoff-minimap-hit):not(.rs-photo a):not(.rp-item a):not(.rh-tile a):not(.rs-top-item a):not(.rs-g):visited { color: var(--link) !important; text-decoration-line: underline !important; text-decoration-color: currentColor !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; } a:not(.rainoff-site-header a):not(.rh-btn):not(.rs-read):not(.rs-load-more):not(.rs-cue):not(.rainoff-btn):not(.faux-button):not(.wp-block-button__link):not(.button):not(.leaflet-bar a):not(.leaflet-popup-close-button):not(.rainoff-minimap-hit):not(.rs-photo a):not(.rp-item a):not(.rh-tile a):not(.rs-top-item a):not(.rs-g):is(:hover, :focus) { color: var(--link-hover) !important; text-decoration-thickness: 2px !important; } a:not(.rainoff-site-header a):focus-visible { outline: 2px solid var(--text) !important; outline-offset: 2px; } /* Image-card links: hovering the card underlines its title in white (was green). */ .rainoff-home .rh-tile a:is(:hover, :focus) .rh-tile-title, .rs-top-item a:is(:hover, :focus) .rs-top-name { color: var(--text) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .rainoff-home :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } /* Safety: Leaflet's default light popups and attribution would hide white links, so keep them dark on every map. */ .leaflet-container .leaflet-popup-content-wrapper, .leaflet-container .leaflet-popup-tip { background: #111; color: #fff; } .leaflet-container .leaflet-control-attribution { background: rgba(0,0,0,.75); color: #d0d0d0; } /* ---------- Front page 1.5.6: rotating GOAT hero, quoted mission, closing area ---------- */ /* 1.5.7: the hero box follows each photo's own aspect ratio (no fixed stage, no letterbox bands). The active slide is in * normal flow and the others are stacked on top of it; hero.js animates the box height between slides. */ .rh-hero { padding-top: 0; } .rh-rotator { position: relative; } .rh-rotator.is-sizing { overflow: hidden; transition: height .9s ease; } .rh-slide { position: absolute; top: 0; left: 0; right: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 0s linear 1.2s; } .rh-slide.is-active { position: relative; opacity: 1; visibility: visible; z-index: 1; transition: opacity 1.2s ease, visibility 0s; } @media (prefers-reduced-motion: reduce) { .rh-slide, .rh-slide.is-active, .rh-rotator.is-sizing { transition: none; } } .rh-slide-box { display: flex; justify-content: center; line-height: 0; } /* Whole photo at its natural ratio: at most 960 px and the column width; portraits at most 85vh (and 960 px), centred. Never upscaled. */ #site-content .rh-slide-box img { display: block; width: auto !important; height: auto !important; max-width: min(100%, 960px) !important; max-height: min(85vh, 960px) !important; margin: 0 auto; object-fit: contain !important; } /* Featured newest story: the figure hugs the photo (no empty band). */ .rh-band .rh-split > .rh-photo { line-height: 0; align-self: center; } .rh-mission h1 { hanging-punctuation: first last; } /* ---------- Front page 1.5.8: tighter section rhythm; headshot | about | prints closing row ---------- */ .rainoff-home .rh-section { padding: clamp(32px, 4vw, 56px) 0; } .rainoff-home .rh-hero { padding-bottom: 24px; } .rainoff-home .rh-section-head { margin-bottom: 28px; } .rainoff-home .rh-btn-row { margin-top: 20px; } .rainoff-home .rh-split { gap: 28px; } .rainoff-home .rh-split h2 { margin-bottom: 12px; } .rh-closing-grid { display: grid; gap: 28px; align-items: center; } .rh-closing-grid .rh-portrait { margin: 0 auto; } .rh-closing-grid h2 { margin: 0 0 12px; font-size: clamp(27.2px, 19.2px + 1.8vw, 40px); } .rh-closing-prints { padding-top: 28px; border-top: 1px solid var(--surface); } @media (min-width: 880px) { .rainoff-home .rh-split { gap: 40px; } } @media (min-width: 1024px) { .rh-closing-grid { grid-template-columns: minmax(0, 288px) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } .rh-closing-prints { padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--surface); } } /* ---------- Front page 1.5.9: species ring charts under Conservation (white on black) ---------- */ .rh-rings-wrap { margin: 32px auto 0; max-width: 960px; } .rh-rings { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 48px; } .rh-ring { display: flex; flex-direction: column; align-items: center; margin: 0; width: 180px; } .rh-ring-chart { position: relative; display: block; width: 160px; height: 160px; } .rh-ring-chart svg { display: block; width: 160px; height: 160px; } .rh-ring-track { fill: none; stroke: var(--ring-track); stroke-width: 8; } .rh-ring-val { fill: none; stroke: var(--ring-value); stroke-width: 8; stroke-linecap: butt; stroke-dasharray: var(--c); stroke-dashoffset: var(--off); } .rh-rings.is-armed .rh-ring-val { stroke-dashoffset: var(--c); } .rh-rings.is-armed.is-in .rh-ring-val { stroke-dashoffset: var(--off); transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1); } .rh-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; font-size: 40px; line-height: 1; color: var(--text); } .rh-ring-label { margin-top: 12px; font-size: 12.8px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text); text-align: center; } .rh-rings-note { max-width: 640px; margin: 20px auto 0 !important; font-size: 13px; line-height: 1.6; color: var(--muted); text-align: center; } @media (max-width: 479.98px) { .rh-rings { gap: 20px 12px; } .rh-ring { width: 150px; } .rh-ring-chart, .rh-ring-chart svg { width: 132px; height: 132px; } .rh-ring-num { font-size: 34px; } } @media (prefers-reduced-motion: reduce) { .rh-rings.is-armed .rh-ring-val { stroke-dashoffset: var(--off); transition: none; } } /* ---------- One type system (2026-10-03): Tenor Sans 400 headings, Figtree body. Fonts are self-hosted * (assets/fonts, @font-face from theme.json, font-display: swap); RPhoto's Public Sans is not loaded. * (.h4-.h6 helper classes size only non-heading elements, so e.g. RPhoto's

keeps the h3 size.) * Heading scale (1.5.20, approved): h1 44/30px lh 1.15, h2 40/27.2px, h3 27.2/20px, h4-h6 step down below h3. ---------- */ :root { --rainoff-head: "Tenor Sans", Optima, Candara, sans-serif; --rainoff-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --rainoff-h1: clamp(30px, 23.86px + 1.5735vw, 44px); --rainoff-h1-lh: 1.15; /* 30px at 390 wide -> 44px from 1280 */ --rainoff-h2: clamp(27.2px, 19.2px + 1.8vw, 40px); --rainoff-h2-lh: 1.2; --rainoff-h3: clamp(20px, 16px + 1vw, 27.2px); --rainoff-h3-lh: 1.3; --rainoff-h4: clamp(18px, 16.24px + 0.4502vw, 22px); --rainoff-h4-lh: 1.3; /* 18 -> 22px */ --rainoff-h5: clamp(16px, 14.68px + 0.3377vw, 19px); --rainoff-h5-lh: 1.3; /* 16 -> 19px */ --rainoff-h6: clamp(15px, 14.12px + 0.2252vw, 17px); --rainoff-h6-lh: 1.3; /* 15 -> 17px */ --rphoto-body-font: var(--rainoff-body); --rphoto-headings-font: var(--rainoff-head); --rphoto-headings-weight: 400; } body { font-family: var(--rainoff-body); font-weight: 300; } body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .site-title, .entry-title, .preview-title, .widget-title, .widgettitle, .wp-block-site-title, .wp-block-post-title, .single-nav-item-title, .archive-title, .rs-pop-title, .rs-top-name) { font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; letter-spacing: -0.01em; } body :is(h1, .h1) { font-size: var(--rainoff-h1); line-height: var(--rainoff-h1-lh); } body :is(h2, .h2) { font-size: var(--rainoff-h2); line-height: var(--rainoff-h2-lh); } body :is(h3, .h3) { font-size: var(--rainoff-h3); line-height: var(--rainoff-h3-lh); } body :is(h4, .h4:not(h1, h2, h3, h4, h5, h6)) { font-size: var(--rainoff-h4); line-height: var(--rainoff-h4-lh); } body :is(h5, .h5:not(h1, h2, h3, h4, h5, h6)) { font-size: var(--rainoff-h5); line-height: var(--rainoff-h5-lh); } body :is(h6, .h6:not(h1, h2, h3, h4, h5, h6)) { font-size: var(--rainoff-h6); line-height: var(--rainoff-h6-lh); } body :is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: 400; } .menu-modal, .main-menu, .footer-menu, .social-menu { font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; } button, input, select, textarea, .button, .faux-button, .wp-block-button__link, .wpcf7 { font-family: var(--rainoff-body); } figcaption, .wp-caption-text, .wp-element-caption, .post-meta, .entry-meta, .preview-meta, .rainoff-story-details, .footer-copyright { font-family: var(--rainoff-body); font-weight: 400; } /* Pinned at their 1.5.19 computed sizes (must not follow the h1 scale): Home mission statement h1 (37.6px/23.4px phone, * lh 1.35) and the 404 title (/contact/ is on hold). Home hero/slide titles (.rh-hero-species) and h2s have their own sizes. */ body .rh-mission h1 { font-size: clamp(23.2px, 16.8px + 1.7vw, 37.6px); line-height: 1.35; } .error404-inner .archive-title { font-size: clamp(23.2px, 16.8px + 1.7vw, 37.6px); line-height: 1.35; } /* ---------- No green; one white button style (1.5.21, Branding/Adam 2026-10-03) ---------- * Buttons: transparent, 1px solid #fff, white Figtree 500 14px sentence case (1.5.22), .06em, 12px 28px, min 44px tall, square corners; hover/focus-visible: #fff * fill, #111 text. Excludes the header "Menu" toggle, icon-only search reset and the skip link (navigation controls). * Map markers: white dot with a thin #111 outline; hover/focus/open marker grows to a larger white dot. */ :root :is(button:not(.rainoff-nav-toggle):not(.rainoff-mode-toggle):not(.rainoff-totop):not(.rh-ctl):not(.rm-zoom-lb-close):not(.reset):not(.toggle), input[type="submit"], input[type="button"], input[type="reset"], .button, .faux-button:not(.skip-link), .wp-block-button__link, .wp-element-button, .wpcf7-submit, .rh-btn, .rs-read, .rs-load-more, .rs-cue, .rainoff-btn, #load-more), :root :is(button:not(.rainoff-nav-toggle):not(.rainoff-mode-toggle):not(.rainoff-totop):not(.rh-ctl):not(.rm-zoom-lb-close):not(.reset):not(.toggle), input[type="submit"], input[type="button"], input[type="reset"], .button, .faux-button:not(.skip-link), .wp-block-button__link, .wp-element-button, .wpcf7-submit, .rh-btn, .rs-read, .rs-load-more, .rs-cue, .rainoff-btn, #load-more):visited { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 12px 28px !important; background: var(--accent) !important; color: #1A1A1A !important; border: 1px solid var(--accent) !important; border-radius: var(--btn-radius) !important; font: 500 14px/1.2 var(--rainoff-body) !important; letter-spacing: .06em !important; text-transform: none !important; text-decoration: none !important; box-shadow: none; cursor: pointer; transition: background-color .2s ease, color .2s ease; } /* 1.6.44 (Adam/Branding): black button text in every state; keep gold fill (no transparent hover). */ :root :is(button:not(.rainoff-nav-toggle):not(.rainoff-mode-toggle):not(.rainoff-totop):not(.rh-ctl):not(.rm-zoom-lb-close):not(.reset):not(.toggle), input[type="submit"], input[type="button"], input[type="reset"], .button, .faux-button:not(.skip-link), .wp-block-button__link, .wp-element-button, .wpcf7-submit, .rh-btn, .rs-read, .rs-load-more, .rs-cue, .rainoff-btn, #load-more):is(:hover, :focus-visible) { background: var(--accent) !important; color: #1A1A1A !important; border-color: var(--accent) !important; text-decoration: none !important; filter: brightness(1.06); } :root :is(button:not(.rainoff-nav-toggle):not(.rainoff-mode-toggle):not(.rainoff-totop):not(.rh-ctl):not(.rm-zoom-lb-close):not(.reset):not(.toggle), input[type="submit"], input[type="button"], input[type="reset"], .button, .faux-button:not(.skip-link), .wp-block-button__link, .wp-element-button, .wpcf7-submit, .rh-btn, .rs-read, .rs-load-more, .rs-cue, .rainoff-btn, #load-more):focus:not(:focus-visible) { outline: none; } :root :is(.rh-btn, .rs-read, .rs-load-more, .rs-cue, .rainoff-btn, #load-more, button, .button, .wp-block-button__link)[hidden] { display: none !important; } /* Contact Form 7 status box (plugin default is green when a message is sent). */ .wpcf7 form.sent .wpcf7-response-output { border-color: var(--text); } /* Markers */ .rs-pin { background: transparent; border: 0; } .rs-pin:hover span, .rs-pin:focus span, .rs-pin.rs-pin-on span { transform: scale(1.36); } .rs-group:hover .rs-g-count, .rs-group:focus .rs-g-count { transform: scale(1.25); } #rs-map .marker-cluster:hover div, #rs-map .marker-cluster:focus div { transform: scale(1.15); } /* Species by family chart (1.5.23, Conservation page; [rainoff_family_chart]): white / neutral greys, Figtree. * Desktop: label column + bar; phone: label above its bar so nothing wraps. */ .rf-chart { margin: 24px 0 28px; font-family: var(--rainoff-body); } .rf-bars { list-style: none; margin: 0; padding: 0; } .rf-row { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: 4px 20px; margin: 0 0 10px; } .rf-label { font-size: 15px; font-weight: 400; line-height: 1.3; color: var(--text); text-align: right; } .rf-n { color: var(--muted); font-variant-numeric: tabular-nums; } .rf-track { display: block; height: 14px; background: var(--surface); } .rf-bar { display: block; height: 100%; background: var(--text); } .rf-other { display: block; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); } .rf-other .rf-label { display: block; text-align: left; } .rf-caption { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); } .entry-content .rf-chart, .rainoff-conservation .rf-chart { margin: 24px 0 0; } .rf-iucn, .entry-content .rf-iucn, .rainoff-conservation .rf-iucn { margin: 8px 0 28px; font-size: 14px; line-height: 1.5; color: var(--muted); } @media (max-width: 699.98px) { .rf-row { grid-template-columns: minmax(0, 1fr); margin-bottom: 14px; } .rf-label { text-align: left; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Population-trend bars (1.5.23, Conservation; [rainoff_trend_bars]). Same layout as the hand-made bars they replace, * neutral colours (no green): decreasing warm, stable grey, increasing white, no trend dark grey. */ .rt-bars { margin: 1.75rem 0 0; } .rt-row { margin: 0 0 16px; } .rt-row.rt-none { margin-bottom: 8px; } .rt-head { display: flex; justify-content: space-between; font-size: 15px; margin: 0 0 6px; } .rt-track { height: 10px; background: var(--line); } .rt-bar { height: 10px; } .rt-dec .rt-bar { background: #c65d3b; } .rt-sta .rt-bar { background: var(--muted); } .rt-inc .rt-bar { background: var(--text); } .rt-none .rt-bar { background: var(--line); } .rt-bars + .rt-source { margin-top: 0; margin-bottom: 2rem; } /* 1.5.23: seven menu items stay on one line from the phone-menu breakpoint (880px) up; same type, tighter tracking/gaps at mid widths. */ @media (min-width: 880px) { .rainoff-site-nav ul { flex-wrap: nowrap; } .rainoff-site-nav a { white-space: nowrap; } .rainoff-logo { min-width: 200px; } } @media (min-width: 880px) and (max-width: 1199.98px) { .rainoff-site-nav ul { column-gap: clamp(12px, calc(4.5vw - 28px), 25.6px); } .rainoff-site-nav a { font-size: 12px; letter-spacing: .09em; } } /* About page (1.5.24): one 320px headshot (natural aspect, never upscaled) in a left column, bio text (max 620px) * in the right column, 48px gap, tops aligned; under 768px the photo stacks at 240px, centred, text below. * The 800px featured image is not output on /about/ (functions.php); the subtitle line is gone from the content. */ .page-id-31 .entry-header.section-inner.mw-thin, .page-id-31 .post-inner.section-inner.mw-thin { max-width: 988px; } .page-id-31 .entry-content { font-size: 18px; line-height: 1.7; } .page-id-31 .entry-content p, .page-id-31 .entry-content li { font-size: 18px; line-height: 1.7; } .rainoff-about { display: grid; grid-template-columns: 320px minmax(0, 620px); column-gap: 48px; align-items: start; } .rainoff-about > figure.rainoff-portrait { margin: 0; width: 320px; } #site-content .entry-content img.rainoff-portrait { display: block; width: 320px !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; aspect-ratio: auto !important; margin: 0 !important; } .rainoff-about-text > :first-child { margin-top: 0 !important; } .page-id-31 .entry-content h2 { margin: 48px 0 16px; } .page-id-31 .entry-content .rainoff-about-text > h2:first-child { margin-top: 0; } .page-id-31 .entry-content ul { margin: 0 0 8px; padding-left: 1.2em; } .page-id-31 .entry-content li { margin: 0 0 6px; } .page-id-31 .entry-content ul.rainoff-places { columns: 2; column-gap: 32px; } .page-id-31 .entry-content ul.rainoff-places li { break-inside: avoid; } .page-id-31 .entry-content ul.rainoff-gear li { margin-bottom: 4px; line-height: 1.55; } .page-id-31 .entry-content ul.rainoff-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; } .page-id-31 .entry-content ul.rainoff-links li { margin: 0; } @media (max-width: 767.98px) { .rainoff-about { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } .rainoff-about > figure.rainoff-portrait { width: 240px; justify-self: center; } #site-content .entry-content img.rainoff-portrait { width: 240px !important; } .page-id-31 .entry-content, .page-id-31 .entry-content p, .page-id-31 .entry-content li { font-size: 17px; } .page-id-31 .entry-content ul.rainoff-places { columns: 1; } } /* Mission page (1.5.25, /mission/): wide page with a 680px reading column; photos whole, never cropped, never above * their natural size or 960px; charts inline (Figtree labels); white/grey only. Uses the theme header, footer and title. */ :is(.rainoff-mission-page, .rainoff-conservation-page) .post-inner.section-inner.mw-thin { max-width: 1200px; } :is(.rainoff-mission-page, .rainoff-conservation-page) .entry-header.section-inner.mw-thin { max-width: 680px; } .rainoff-mission { font-size: 18px; line-height: 1.7; color: var(--text); } .rainoff-mission p { margin: 0 0 18px; } .rainoff-mission .rm-text { max-width: 680px; margin-left: auto; margin-right: auto; } .rainoff-mission .rm-lede { font-size: clamp(21px, 2vw, 25px); line-height: 1.5; color: var(--text); margin: 0 0 8px; } .rainoff-mission .rm-block { padding: 0; margin-top: 0; border-top: 0; } /* 1.5.60: shared separator (themes.css) */ .rainoff-mission h2 { margin: 0 0 20px; } .rainoff-mission h3 { margin: 0 0 8px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; } .rainoff-mission .rm-photo { margin: 40px auto 0; text-align: center; } #site-content .rainoff-mission .rm-photo img, #site-content .rainoff-mission .rm-field img { display: block; margin: 0 auto !important; width: auto !important; height: auto !important; max-width: min(100%, 960px) !important; max-height: min(85vh, 960px) !important; object-fit: contain !important; } .rainoff-mission figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--muted); text-align: center; } .rainoff-mission .rm-sp { font-family: var(--rainoff-head); font-size: 20px; color: var(--text); } .rainoff-mission .rm-pl { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; } .rainoff-mission .rm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; align-items: start; } .rainoff-mission .rm-pair .rm-photo { margin: 0; } .rainoff-mission .rm-field { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; align-items: start; } .rainoff-mission .rm-field.rm-field-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rainoff-mission .rm-field figcaption { display: none; } /* 1.5.42: no captions under the In the field photos (also stripped in inc/mission.php) */ .rainoff-mission .rm-field figure { margin: 0; } .rainoff-mission .rm-chart { margin: 48px auto 0; max-width: 840px; } .rainoff-mission .rm-chart.rm-wide { max-width: 1200px; } .rainoff-mission .rm-chart p.rm-cap { color: var(--muted); font-size: 16px; margin: 0 0 16px; max-width: 760px; } .rainoff-mission .rm-svg { display: block; width: 100%; height: auto; max-width: 760px; } .rainoff-mission .rm-svg.bars, .rainoff-mission .rm-svg-c1 { max-width: 560px; } .rainoff-mission .rm-ch2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; } .rainoff-mission .rm-src { font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 760px; margin: 12px 0 0; } .rainoff-mission .rm-legend { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; } .rainoff-mission .rm-legend li { margin: 0; } .rainoff-mission .rm-sw { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; } .rainoff-mission .rm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .rainoff-mission .rm-stat { font-size: 15px; color: var(--text); margin: 6px 0 0; } .rainoff-mission .rm-timeline { list-style: none; margin: 28px 0 0; padding: 0 0 0 22px; border-left: 1px solid var(--dim); } .rainoff-mission .rm-timeline li { position: relative; padding: 0 0 24px 18px; margin: 0; } .rainoff-mission .rm-timeline li::before { content: ""; position: absolute; left: -28px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--text); } .rainoff-mission .rm-timeline time { font-size: 12.8px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .rainoff-mission .rm-tl-place { margin: 2px 0 0; color: var(--text); } .rainoff-mission .rm-tl-bird { margin: 0; font-size: 16px; } .rainoff-mission .rm-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; } .rainoff-mission .rm-closing p { font-size: 21px; color: var(--text); } @media (max-width: 879.98px) { .rainoff-mission .rm-pair, .rainoff-mission .rm-two, .rainoff-mission .rm-field { grid-template-columns: minmax(0, 1fr); } .rainoff-mission .rm-pair { gap: 40px; } .rainoff-mission .rm-field { gap: 32px; } .rainoff-mission .rm-block { padding-top: 0; margin-top: 0; } } @media (max-width: 699.98px) { .rainoff-mission { font-size: 17px; } } /* Single stories (1.5.33+): no lead-in under the title; "The Story" heads the body text under the image */ .single-post .entry-header .intro-text { display: none; } .single-post .entry-content > h2.rainoff-story-heading { margin-top: 0; } /* 1.5.36: tighter gap between bird name (title) and photo once the lead-in is gone */ .single-post .featured-media { margin-top: 1.6rem !important; } @media ( min-width: 700px ) { .single-post .featured-media { margin-top: 2.4rem !important; } } /* 1.5.36: hide residual Published line if a plugin/theme still prints it */ .single-post .entry-footer .post-meta .date { display: none !important; } /* 1.5.36: eBird / IUCN source lines under The bird & Conservation */ .single-post .entry-content .rainoff-ebird-source { margin-top: 0.6rem; font-size: 0.95em; } /* 1.5.36: More stories — tiny thumbs, compact side-by-side grid */ .rainoff-more-stories { margin: 3.2rem auto 1.2rem; font-size: 1.8rem; } .single-post .single-nav { margin-top: 0.8rem !important; } .single-post .single-nav-grid { display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; gap: 12px; align-items: flex-start; } .single-post .single-nav-grid.grid { display: flex !important; } .single-post .single-nav .col { width: auto !important; max-width: 120px; flex: 0 0 auto; padding: 0 !important; margin: 0 !important; } .single-post .single-nav .col + .col a { margin-top: 0 !important; } .single-post .single-nav-item { max-width: 120px; } .single-post .single-nav-item-media { width: 96px; height: 96px; overflow: hidden; margin: 0; } .single-post .single-nav-item-media img, #site-content .single-post .single-nav-item-media img { width: 96px !important; height: 96px !important; max-width: 96px !important; max-height: 96px !important; object-fit: cover !important; display: block; margin: 0 !important; } .single-post .single-nav-item .arrow { display: none !important; } .single-post .single-nav-item-header { margin-top: 0.5rem !important; } .single-post .single-nav-label { font-size: 1.1rem; margin: 0 0 0.15rem; } .single-post .single-nav-item-title { font-size: 1.3rem !important; line-height: 1.25 !important; margin: 0 !important; } /* Conservation page: reuse Mission chart styles after charts moved here (1.5.36) */ .rainoff-conservation .rm-chart { margin: 40px 0 0; } .rainoff-conservation .rm-cap, .rainoff-conservation .rm-src, .rainoff-conservation .rm-ch2, .rainoff-conservation .rm-stat { color: var(--muted); } .rainoff-conservation .rm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .rainoff-conservation .rm-legend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 12px 0 0; } .rainoff-conservation .rm-sw { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--dim); } @media (max-width: 879px) { .rainoff-conservation .rm-two { grid-template-columns: minmax(0, 1fr); } } /* Home: total published bird photos (replaces threatened-species rings, 1.5.36) */ .rainoff-home .rh-stat-num { margin: 8px 0 4px; font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--text); } .rainoff-home .rh-stat-label { margin: 0 0 20px; color: var(--muted); font-size: 1.05rem; } /* Conservation: small bird thumb beside each non-LC species (1.5.36) */ .rainoff-conservation .rf-species-row { display: flex; gap: 16px; align-items: flex-start; margin: 28px 0 0; } .rainoff-conservation .rf-species-row > a.rf-species-thumb { flex: 0 0 72px; width: 72px; height: 72px; display: block; overflow: hidden; border-radius: 4px; } .rainoff-conservation .rf-species-row > a.rf-species-thumb img { width: 72px; height: 72px; object-fit: cover; display: block; } .rainoff-conservation .rf-species-row .rf-species-text { flex: 1; min-width: 0; } .rainoff-conservation .rf-species-row h3 { margin-top: 0; } @media (max-width: 480px) { .rainoff-conservation .rf-species-row > a.rf-species-thumb { flex-basis: 56px; width: 56px; height: 56px; } .rainoff-conservation .rf-species-row > a.rf-species-thumb img { width: 56px; height: 56px; } } /* ---------- Conservation evidence layout (1.5.42) ---------- */ .rainoff-conservation .rm-svg { display: block; width: 100%; height: auto; max-width: 760px; } .rainoff-conservation .rm-svg.bars, .rainoff-conservation .rm-svg-c1, .rainoff-conservation .rm-svg-c2b { max-width: 560px; } .rainoff-conservation .rm-svg-family { max-width: 640px; } .rainoff-conservation .rm-field { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; align-items: start; } .rainoff-conservation .rm-field figure { margin: 0; } #site-content .rainoff-conservation .rm-field img { display: block; margin: 0 auto !important; width: auto !important; height: auto !important; max-width: min(100%, 960px) !important; max-height: min(85vh, 960px) !important; object-fit: contain !important; } .rainoff-conservation .rm-timeline { list-style: none; margin: 28px 0 0; padding: 0 0 0 22px; border-left: 1px solid var(--dim); } .rainoff-conservation .rm-timeline li { position: relative; padding: 0 0 24px 18px; margin: 0; } .rainoff-conservation .rm-timeline li::before { content: ""; position: absolute; left: -28px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--text); } .rainoff-conservation .rm-timeline time { font-size: 12.8px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .rainoff-conservation .rm-tl-place { margin: 2px 0 0; color: var(--text); } .rainoff-conservation .rm-tl-bird { margin: 0; font-size: 16px; } .rainoff-conservation .rm-chart h3 { margin: 0 0 8px; } @media (max-width: 879.98px) { .rainoff-conservation .rm-two, .rainoff-conservation .rm-field { grid-template-columns: minmax(0, 1fr); } } /* ---------- Conservation lead photo (1.5.42) ---------- */ .rainoff-conservation .rm-photo { margin: 40px auto 0; text-align: center; } .rainoff-conservation .rm-photo figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--muted); text-align: center; } .rainoff-conservation .rm-sp { font-family: var(--rainoff-head); font-size: 20px; color: var(--text); } .rainoff-conservation .rm-pl { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; } #site-content .rainoff-conservation .rm-photo img { display: block; margin: 0 auto !important; width: auto !important; height: auto !important; max-width: min(100%, 960px) !important; max-height: min(85vh, 960px) !important; object-fit: contain !important; } /* ---------- Mission flow (1.5.42): Adam's own photos only. Six solo shots: identical 3:2 landscape (960x640 files), same full-width size in the text column, one per section. People shots: one row at the close, full aspect. No captions. ---------- */ .rainoff-mission .rm-text { max-width: 760px; } #site-content .rainoff-mission figure.rm-solo { max-width: 760px; margin: 36px auto 0; padding: 0; } #site-content .rainoff-mission figure.rm-solo img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; max-width: 960px !important; max-height: none !important; object-fit: contain !important; margin: 0 !important; } .rainoff-mission .rm-people { display: flex; align-items: flex-start; gap: 24px; max-width: 960px; margin: 40px auto 0; } #site-content .rainoff-mission .rm-people figure { flex: 1 1 0; min-width: 0; margin: 0; } #site-content .rainoff-mission .rm-people img { display: block; width: 100% !important; height: auto !important; max-width: 960px !important; max-height: none !important; object-fit: contain !important; margin: 0 !important; } .rainoff-mission .rm-people figcaption, .rainoff-mission figure.rm-solo figcaption { display: none; } @media (max-width: 767.98px) { #site-content .rainoff-mission figure.rm-solo { margin-top: 28px; } .rainoff-mission .rm-people { flex-direction: column; gap: 24px; } #site-content .rainoff-mission .rm-people figure { flex: none; width: 100%; } } /* ---------- Mission spacing rhythm (1.5.43): one token for paragraphs, figures, graphics, chart and people row. Vertical margins collapse, so every gap between text and media is exactly --rm-gap. Scoped to the Mission page only. ---------- */ #site-content .rainoff-mission { --rm-gap: 2.4rem; --rm-section: 4.8rem; } /* root is 10px: 24px / 48px */ #site-content .rainoff-mission p, #site-content .rainoff-mission .rm-lede, #site-content .rainoff-mission .rm-chart p.rm-cap, #site-content .rainoff-mission .rm-src { margin: 0 0 var(--rm-gap); } #site-content .rainoff-mission .rm-btns { margin: var(--rm-gap) 0; } #site-content .rainoff-mission .rm-block { margin-top: var(--rm-section); padding-top: var(--rm-section); } #site-content .rainoff-mission h2 { margin: 0 0 var(--rm-gap); } #site-content .rainoff-mission .rm-chart h3 { margin: 0 0 calc(var(--rm-gap) / 2); } #site-content .rainoff-mission figure.rm-solo, #site-content .rainoff-mission figure.rm-graphic, #site-content .rainoff-mission figure.rm-chart, #site-content .rainoff-mission .rm-people { margin: var(--rm-gap) auto; padding: 0; } #site-content .rainoff-mission figure.rm-graphic { max-width: 760px; } #site-content .rainoff-mission figure.rm-graphic img { display: block; width: 100% !important; max-width: 960px !important; height: auto !important; margin: 0 !important; object-fit: contain; } #site-content .rainoff-mission .rm-chart .rm-svg { margin: 0 0 var(--rm-gap); } #site-content .rainoff-mission .rm-block > :last-child, #site-content .rainoff-mission .rm-block > .rm-text:last-child > :last-child { margin-bottom: 0; } @media (max-width: 767.98px) { #site-content .rainoff-mission { --rm-gap: 2rem; --rm-section: 4rem; } /* 20px / 40px */ #site-content .rainoff-mission figure.rm-solo { margin-top: var(--rm-gap); } } /* ---------- Mission Facebook views rings (1.5.44): same stroke animation as home species rings ---------- */ #site-content .rainoff-mission .rm-fb-wrap { margin: var(--rm-gap, 1.5rem) auto; max-width: 960px; } #site-content .rainoff-mission .rh-rings--fb { gap: 28px 36px; } #site-content .rainoff-mission .rh-rings--fb .rh-ring-label { text-transform: none; letter-spacing: 0.02em; font-size: 14px; font-weight: 500; color: var(--text); max-width: 11rem; } #site-content .rainoff-mission .rh-ring--hero { width: 100%; max-width: 280px; flex: 1 1 100%; } #site-content .rainoff-mission .rh-ring--hero .rh-ring-chart, #site-content .rainoff-mission .rh-ring--hero .rh-ring-chart svg { width: 220px; height: 220px; } #site-content .rainoff-mission .rh-ring--hero .rh-ring-num { font-size: 26px; letter-spacing: -0.02em; } #site-content .rainoff-mission .rh-rings--fb .rh-rings-note, #site-content .rainoff-mission .rm-fb-wrap .rh-rings-note { color: var(--muted); } @media (max-width: 767.98px) { #site-content .rainoff-mission .rh-ring--hero .rh-ring-chart, #site-content .rainoff-mission .rh-ring--hero .rh-ring-chart svg { width: 180px; height: 180px; } #site-content .rainoff-mission .rh-ring--hero .rh-ring-num { font-size: 22px; } } /* ---------- Home rings (1.5.45): three locked totals; sentence-case labels; wide-num for Facebook views ---------- */ .rainoff-home .rh-rings--home .rh-ring-label { text-transform: none; letter-spacing: 0.04em; font-size: 14px; font-weight: 500; } .rainoff-home .rh-ring--wide-num .rh-ring-num { font-size: 22px; letter-spacing: -0.02em; } .rainoff-home .rh-rings-wrap { margin-top: 12px; margin-bottom: 8px; } .rainoff-home .rh-rings-note { margin-bottom: 24px !important; } @media (max-width: 479.98px) { .rainoff-home .rh-ring--wide-num .rh-ring-num { font-size: 18px; } } /* 1.5.52: fine print under the home rings explaining the combined Views total (neutral, small, Figtree) */ .rainoff-home .rh-rings-note--views { font-family: var(--rainoff-body); font-weight: 400; font-size: 13px; line-height: 1.6; color: var(--muted); text-transform: none; letter-spacing: 0; max-width: 640px; padding: 0 16px; overflow-wrap: break-word; text-wrap: pretty; } /* ---------- Mission Facebook views timeline (1.5.49): L→R fill + count-up ---------- */ #site-content .rainoff-mission .rm-fb-timeline { margin: var(--rm-gap, 1.5rem) auto; max-width: 960px; color: var(--text); } #site-content .rainoff-mission .rm-fb-timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.85rem; margin: 0 0 1rem; } #site-content .rainoff-mission .rm-fb-count { font-family: var(--rainoff-head); font-size: clamp(2rem, 5vw, 3rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; } #site-content .rainoff-mission .rm-fb-count-label { font-size: 1rem; color: var(--muted); } #site-content .rainoff-mission .rm-fb-track { position: relative; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } #site-content .rainoff-mission .rm-fb-fill { display: block; height: 100%; width: 100%; background: var(--text); transform: scaleX(0); transform-origin: left center; will-change: transform; } #site-content .rainoff-mission .rm-fb-timeline.is-armed:not(.is-in) .rm-fb-fill { transform: scaleX(0); } #site-content .rainoff-mission .rm-fb-years { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; justify-content: space-between; gap: 0.5rem; position: relative; } #site-content .rainoff-mission .rm-fb-year { flex: 1 1 0; min-width: 0; text-align: left; opacity: 0.45; transition: opacity 0.35s ease; } #site-content .rainoff-mission .rm-fb-year.is-lit, #site-content .rainoff-mission .rm-fb-timeline.is-done .rm-fb-year { opacity: 1; } #site-content .rainoff-mission .rm-fb-year-name { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 0.2rem; } #site-content .rainoff-mission .rm-fb-year-val { display: block; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; } #site-content .rainoff-mission .rm-fb-today .rm-fb-year-name { color: var(--text); } #site-content .rainoff-mission .rm-fb-timeline-note { margin: 1rem 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); } @media (max-width: 767.98px) { #site-content .rainoff-mission .rm-fb-years { flex-direction: column; gap: 0.75rem; } #site-content .rainoff-mission .rm-fb-count { font-size: 2rem; } } @media (prefers-reduced-motion: reduce) { #site-content .rainoff-mission .rm-fb-fill { transform: scaleX(1) !important; transition: none !important; } } /* ---------- Graph enlarge (1.5.50 / 1.5.51 full-bleed mobile): compact phone preview; lightbox ≤960px ---------- */ .rm-zoom-frame { position: relative; display: block; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: zoom-in; width: 100%; text-align: left; } .rm-zoom-frame:focus { outline: 2px solid var(--text); outline-offset: 4px; } .rm-zoom-frame:focus:not(:focus-visible) { outline: none; } .rm-zoom-frame:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; } .rm-zoom-hint { display: none; margin: 0.55rem 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); text-align: center; letter-spacing: 0.02em; } html.rm-zoom-open { overflow: hidden; } .rm-zoom-lb { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgb(var(--bg-rgb) / 0.94); box-sizing: border-box; } .rm-zoom-lb[hidden] { display: none !important; } .rm-zoom-lb-dialog { position: relative; box-sizing: border-box; width: 100%; max-width: 960px; max-height: min(92vh, 960px); overflow: auto; background: var(--bg); color: var(--text); padding: 2.75rem 0.75rem 1rem; border: 1px solid var(--line); -webkit-overflow-scrolling: touch; } .rm-zoom-lb-close { position: absolute; top: 0.35rem; right: 0.35rem; z-index: 2; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 1.75rem; line-height: 1; cursor: pointer; } .rm-zoom-lb-close:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } .rm-zoom-lb-stage { width: 100%; } .rm-zoom-lb-stage > img { display: block !important; width: 100% !important; max-width: 960px !important; height: auto !important; margin: 0 auto !important; object-fit: contain !important; background: var(--bg); } .rm-zoom-lb-stage .rm-fb-timeline { margin: 0 auto; max-width: 960px; color: var(--text); } .rm-zoom-lb-stage .rm-fb-timeline-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.85rem; margin: 0 0 1rem; } .rm-zoom-lb-stage .rm-fb-count { font-family: var(--rainoff-head); font-size: clamp(2rem, 6vw, 3rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; } .rm-zoom-lb-stage .rm-fb-count-label { font-size: 1rem; color: var(--muted); } .rm-zoom-lb-stage .rm-fb-track { position: relative; height: 8px; border-radius: 3px; background: var(--line); overflow: hidden; } .rm-zoom-lb-stage .rm-fb-fill { display: block; height: 100%; width: 100%; background: var(--text); transform: scaleX(1); transform-origin: left center; } .rm-zoom-lb-stage .rm-fb-years { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-direction: row; justify-content: space-between; gap: 0.5rem; } .rm-zoom-lb-stage .rm-fb-year { flex: 1 1 0; min-width: 0; text-align: left; opacity: 1; } .rm-zoom-lb-stage .rm-fb-year-name { display: block; font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 0.25rem; } .rm-zoom-lb-stage .rm-fb-year-val { display: block; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; } .rm-zoom-lb-stage .rh-rings-wrap { margin: 0 auto; max-width: 960px; } .rm-zoom-lb-stage .rh-rings { gap: 20px 36px; } @media (max-width: 767.98px) { .rm-zoom-hint { display: block; } /* 1.5.51: Mission compact graphs full-bleed edge-to-edge (break out of section-inner ~32px gutters) */ #site-content .rainoff-mission figure.rm-graphic.rm-zoom, #site-content .rainoff-mission .rm-zoom-frame:has(.rm-fb-timeline) { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; } #site-content .rainoff-mission figure.rm-graphic.rm-zoom { max-width: 100vw; } /* Compact SVG charts: letterbox, never crop; no side padding */ #site-content .rainoff-mission figure.rm-graphic.rm-zoom .rm-zoom-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; max-width: 100%; padding: 0.5rem 0 0; background: var(--bg); border: 0; border-top: 1px solid var(--surface); border-bottom: 1px solid var(--surface); } #site-content .rainoff-mission figure.rm-graphic.rm-zoom img { display: block !important; width: 100% !important; max-width: 100% !important; max-height: 220px !important; height: auto !important; margin: 0 auto !important; object-fit: contain !important; } /* Compact timeline: full-bleed L→R graph, smaller type */ #site-content .rainoff-mission .rm-zoom-frame:has(.rm-fb-timeline) { padding: 0; background: var(--bg); border: 0; border-top: 1px solid var(--surface); border-bottom: 1px solid var(--surface); } #site-content .rainoff-mission .rm-zoom--timeline.rm-fb-timeline, #site-content .rainoff-mission .rm-zoom-frame .rm-fb-timeline { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; padding: 0.65rem 12px 0.35rem; border: 0; box-sizing: border-box; } #site-content .rainoff-mission .rm-zoom-frame .rm-fb-years, #site-content .rainoff-mission .rm-zoom--timeline .rm-fb-years { flex-direction: row !important; gap: 0.35rem !important; } #site-content .rainoff-mission .rm-zoom-frame .rm-fb-count, #site-content .rainoff-mission .rm-zoom--timeline .rm-fb-count { font-size: 1.35rem !important; } #site-content .rainoff-mission .rm-zoom-frame .rm-fb-count-label, #site-content .rainoff-mission .rm-zoom--timeline .rm-fb-count-label { font-size: 0.8rem; } #site-content .rainoff-mission .rm-zoom-frame .rm-fb-year-name, #site-content .rainoff-mission .rm-zoom--timeline .rm-fb-year-name { font-size: 11px; line-height: 1.25; } #site-content .rainoff-mission .rm-zoom-frame .rm-fb-year-val, #site-content .rainoff-mission .rm-zoom--timeline .rm-fb-year-val { font-size: 11px; line-height: 1.3; } #site-content .rainoff-mission .rm-zoom-frame .rm-fb-track, #site-content .rainoff-mission .rm-zoom--timeline .rm-fb-track { height: 4px; } .rainoff-home .rm-zoom--rings .rm-zoom-frame { border: 1px solid var(--surface); padding: 0.5rem 0.25rem 0; background: var(--bg); } } @media (prefers-reduced-motion: reduce) { .rm-zoom-lb { scroll-behavior: auto; } } /* ---------- 1.5.56: Branding home audit (2026-10-10) ---------- */ /* Secondary (outline) button, e.g. Contact under the portrait. */ /* 1.6.44: outline buttons also use black text (fill stays transparent). */ html:root #site-content .rh-btn.rh-btn-outline { background: transparent !important; color: #1A1A1A !important; border-color: #1A1A1A !important; } html:root #site-content .rh-btn.rh-btn-outline:hover, html:root #site-content .rh-btn.rh-btn-outline:focus-visible { background: transparent !important; color: #1A1A1A !important; border-color: var(--accent) !important; } /* Text links (hero "Read the story →"): token colours, underline thickens on hover. */ /* Rings: one number size for all three (1.5.57: 22px / 18px so 24,415,149 clears the ring with room to spare), same in the lightbox; larger, clearer footnote. */ .rh-rings--home .rh-ring-num, .rainoff-home .rh-rings--home .rh-ring--wide-num .rh-ring-num, .rm-zoom-lb-stage .rh-rings--home .rh-ring-num { font-size: 22px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; padding: 0 20px; text-align: center; white-space: nowrap; } @media (max-width: 479.98px) { .rh-rings--home .rh-ring-num, .rainoff-home .rh-rings--home .rh-ring--wide-num .rh-ring-num, .rm-zoom-lb-stage .rh-rings--home .rh-ring-num { font-size: 18px; padding: 0 14px; } } .rainoff-home .rh-rings-note--views, .rm-zoom-lb-stage .rh-rings-note--views { font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 720px; } /* Hero: a fixed frame (the tallest slide at this width, capped by the viewport), every photo letterboxed inside it, * never cropped or upscaled; the caption stays put below the frame. */ .rh-rotator { --rh-frame: min(76vh, 960px, calc(var(--rh-ratio, .667) * min(100vw - 40px, 960px))); } .rh-rotator .rh-slide-box { height: var(--rh-frame); align-items: center; } #site-content .rh-rotator .rh-slide-box img { max-height: 100% !important; max-width: min(100%, 960px) !important; width: auto !important; height: auto !important; } @media (min-width: 880px) { .rh-rotator { --rh-frame: min(76vh, 960px, calc(var(--rh-ratio, .667) * min(100vw - 80px, 960px))); } } /* Crossfade without ghost text: the outgoing caption fades out first, the incoming one after it. */ .rh-slide .rh-hero-caption { opacity: 0; transition: opacity .3s ease; } .rh-slide.is-active .rh-hero-caption { opacity: 1; transition: opacity .45s ease .75s; } @media (prefers-reduced-motion: reduce) { .rh-slide .rh-hero-caption, .rh-slide.is-active .rh-hero-caption { transition: none; } } html:not(.rainoff-js) .rh-slide .rh-hero-caption { opacity: 1; } /* Footer: all six social marks in the same round badge (500px and Canon wordmarks scaled to fit). */ #site-footer .social-menu a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0 !important; border: 1px solid var(--line); border-radius: 50%; box-sizing: border-box; } #site-footer .social-menu a:hover, #site-footer .social-menu a:focus-visible { border-color: var(--accent); color: var(--accent); } #site-footer .social-menu a .svg-icon { width: 18px; height: 18px; } #site-footer .social-menu a .svg-icon.icon-500px, #site-footer .social-menu a .svg-icon.icon-canon { width: 26px; height: 18px; } .rh-nowrap { white-space: nowrap; } /* 1.5.57: rings section label (text in functions.php, RAINOFF_RINGS_LABEL): sentence case, wraps in balanced lines. */ .rainoff-home .rh-rings-title, .rm-zoom-lb-stage .rh-rings-title { font-family: var(--rainoff-body); font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: .04em; text-transform: none; color: var(--muted); max-width: 30em; margin-left: auto !important; margin-right: auto !important; text-wrap: balance; } @media (max-width: 479.98px) { .rainoff-home .rh-rings-title { font-size: 14px; max-width: 22em; padding: 0 8px; } } /* ---------- 1.5.60 (Adam 2026-10-10) ---------- */ /* Home rings heading: ALL CAPS display (source text stays sentence case in RAINOFF_RINGS_LABEL) — exception for this heading only. */ .rainoff-home .rh-rings-title, .rm-zoom-lb-stage .rh-rings-title { text-transform: uppercase; letter-spacing: .14em; font-size: 13px; font-weight: 500; line-height: 1.6; } @media (max-width: 479.98px) { .rainoff-home .rh-rings-title { font-size: 12.5px; letter-spacing: .12em; max-width: 24em; } } /* Rings footnote: one short summary, small and muted. */ .rainoff-home .rh-rings-note--views, .rm-zoom-lb-stage .rh-rings-note--views { font-size: 13px; line-height: 1.55; max-width: 640px; } /* Header: light/dark toggle immediately right of the logo, before the menu (desktop) / before "Menu" (phones). */ .rainoff-header-inner { justify-content: flex-start; } .rainoff-logo { flex: 0 1 auto; min-width: 0; } .rainoff-header-tools { flex: 1 1 auto; justify-content: flex-start; flex-wrap: nowrap; } .rainoff-site-nav { margin-left: auto; } .rainoff-nav-toggle { margin-left: auto; } @media (max-width: 879.98px) { .rainoff-js .rainoff-header-inner { flex-wrap: nowrap; } } /* Hero: frame sized to the 3:2 landscape slides (the majority), capped by the viewport; portrait slides shrink to the * frame height and letterbox at the sides only (never cropped, never upscaled past 960px). Small even gaps around it. */ .rh-rotator { --rh-frame: min(76vh, 640px, calc(0.6667 * min(100vw - 40px, 960px))); } @media (min-width: 880px) { .rh-rotator { --rh-frame: min(76vh, 640px, calc(0.6667 * min(100vw - 80px, 960px))); } } .rainoff-home .rh-hero { padding: 16px 0 0; } .rh-hero-caption { margin-top: 12px; } .rh-hero-caption p:last-child { margin-top: 10px; } .rainoff-home .rh-hero + .rh-section { padding-top: 28px; } @media (max-width: 479.98px) { .rainoff-home .rh-hero { padding-top: 12px; } .rainoff-home .rh-hero + .rh-section { padding-top: 24px; } } /* Home pull quote (.rh-mission, the only quote on the home page) and every other section separator: the shared * separator in assets/themes.css (--sep-*, .rainoff-sep). */ .rainoff-home .rh-hero + .rh-mission { padding-top: 0; } /* Home sections: separator gaps are the rule's own margins, so content-to-rule is the same everywhere. */ .rainoff-home .rh-section + .rh-section { padding-top: 0; } .rainoff-home .rh-section:not(:last-child), .rainoff-home .rh-hero { padding-bottom: 0; } /* Prints column on the home page: the shared separator (themes.css). Stacked (< 1024px): the standard rule above * Prints. Side by side: the same line (colour, thickness, length) turned vertical, centred between the columns. */ .rh-closing-prints { position: relative; padding-top: 0; border-top: 0; } .rh-closing-prints::before { content: ""; display: block; width: var(--sep-width); max-width: 100%; height: 0; margin: 0 auto var(--sep-space); background: none; border-top: var(--sep-thick) solid var(--sep-color); } @media (min-width: 1024px) { .rh-closing-prints { padding: 0 0 0 40px; border-left: 0; } .rh-closing-prints::before { position: absolute; left: 0; top: 50%; width: 0; height: var(--sep-width); margin: 0; border-top: 0; border-left: var(--sep-thick) solid var(--sep-color); transform: translateY(-50%); } } @media (max-width: 1023.98px) { .rh-closing-grid { row-gap: var(--sep-space); } } /* Stories / Portfolio list: story-to-story breaks use the shared separator (themes.css) instead of the full-width line. */ .rs-item, .rs-item:first-child { padding: 0 0 var(--sep-space); border-top: 0; } .rs-item + .rs-item::before { content: ""; display: block; width: var(--sep-width); max-width: 100%; height: 0; margin: 0 auto var(--sep-space); background: none; border-top: var(--sep-thick) solid var(--sep-color); } /* 1.5.61 (Adam 2026-10-10): phones get a square hero frame (capped at 70vh) so portrait slides show much larger; * landscape slides letterbox top/bottom inside it. Still never cropped or upscaled; the caption stays put. Desktop unchanged. */ @media (max-width: 479.98px) { .rh-rotator { --rh-frame: min(70vh, calc(100vw - 40px), 960px); } } /* ---------- 1.5.62 (Branding review of 1.5.61, Adam 2026-10-10) ---------- */ /* 1. Carousel: slides are clipped to the frame and their boxes are opaque; the change fades out to the page colour and * the next slide fades in (no overlap), so no neighbour slide or watermark shows through. Same plain fill at every width. */ .rh-rotator { overflow: hidden; } .rh-rotator .rh-slide-box { overflow: hidden; background: var(--bg); } .rh-slide { transition: opacity .6s ease, visibility 0s linear .6s; } .rh-slide.is-active { transition: opacity .6s ease .6s, visibility 0s; } .rh-slide.is-active .rh-hero-caption { transition: opacity .45s ease .9s; } /* 6. Footer: copyright and icon row sit on the content column (same max width and side inset as .rh-wrap). */ #site-footer .footer-inner { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } @media (min-width: 880px) { #site-footer .footer-inner { padding-left: 40px; padding-right: 40px; } } #site-footer .footer-credits, #site-footer .footer-credits .footer-copyright { margin-left: 0; margin-right: 0; } #site-footer .social-menu { margin-left: auto; margin-right: 0; } /* 7. Phones/tablets (stacked): the text shares the column of its centred image. */ @media (max-width: 879.98px) { .rainoff-home .rh-band .rh-split { grid-template-columns: fit-content(100%); justify-content: center; } .rainoff-home .rh-band .rh-split > div { contain: inline-size; } } @media (max-width: 1023.98px) { .rh-closing-grid { grid-template-columns: minmax(0, 288px); justify-content: center; } } /* ---------- 1.5.63: home "Field Cards" (replace the stat rings; mockup /workspace/branding/stats-alternatives/5-field-cards) ---------- */ .rh-fieldcards .fc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1004px; margin: 28px auto 0; text-align: left; } .rh-fieldcards .fc-card { --c: var(--fc-teal); position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 30px 28px 26px; background: var(--surface); color: var(--text); text-decoration: none; border: 1px solid transparent; border-radius: 2px; transition: border-color .2s; } html[data-theme="b"] .rh-fieldcards .fc-card { border-color: var(--line); } .rh-fieldcards .fc-card:hover, .rh-fieldcards .fc-card:focus-visible { border-color: var(--accent); } .rh-fieldcards .fc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .rh-fieldcards .fc-c2 { --c: var(--fc-emerald); } .rh-fieldcards .fc-c3 { --c: var(--fc-amber); } .rh-fieldcards .fc-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--c); transform-origin: left; } .rh-fieldcards .fc-ico { display: block; width: 54px; height: 54px; margin-bottom: 18px; } .fc-ico .bird { fill: var(--c); } .fc-ico .wing { opacity: .65; } .fc-ico .small { opacity: .55; } .fc-ico .eye { fill: var(--surface); } .fc-ico .perch, .fc-ico .leg { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; } .rh-fieldcards .fc-num { display: block; font-family: var(--rainoff-head); font-weight: 300; font-size: 58px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; white-space: nowrap; } .rh-fieldcards .fc-num--sm { font-size: 42px; line-height: 1.38; } .rh-fieldcards .fc-lab { display: block; margin-top: 12px; font-family: var(--rainoff-body); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } /* 1.6.53: longer "Bird species published" stays one clean wrap at ~390px */ @media (max-width: 419.98px) { .rh-fieldcards .fc-lab { letter-spacing: .12em; font-size: 11px; line-height: 1.45; text-wrap: balance; } } .rh-fieldcards .fc-txt { display: block; margin-top: 12px; font-family: var(--rainoff-body); font-size: 13.5px; line-height: 1.55; color: var(--muted); } .rh-fieldcards .fc-split { display: block; margin-top: 18px; } .rh-fieldcards .fc-bar { position: relative; display: flex; height: 12px; background: var(--line); } .rh-fieldcards .fc-bar > span { display: block; height: 100%; width: var(--w); } .rh-fieldcards .fc-bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--text); } .fc-bar .d { background: var(--fc-flame); } .fc-bar .s { background: var(--fc-emerald); } .fc-bar .i { background: var(--fc-teal); } .fc-bar .u { background: var(--fc-grey); } .rh-fieldcards .fc-key { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin-top: 8px; font-family: var(--rainoff-body); font-size: 12px; line-height: 1.45; color: var(--muted); } .rh-fieldcards .fc-key b { color: var(--fc-flame); font-weight: 600; } .rh-fieldcards .fc-foot { margin-top: 28px !important; } /* Entrance (only when field-cards.js arms it: JS on, motion allowed, section not yet on screen). */ .rh-fieldcards.is-armed .fc-card::before { transform: scaleX(0); } .rh-fieldcards.is-armed .fc-ico { opacity: 0; transform: translateX(-12px); } .rh-fieldcards.is-armed .fc-bar > span { width: 0; } .rh-fieldcards.is-armed.is-in .fc-card::before { transform: none; transition: transform 1s cubic-bezier(.6,0,.2,1); } .rh-fieldcards.is-armed.is-in .fc-c2::before { transition-delay: .15s; } .rh-fieldcards.is-armed.is-in .fc-c3::before { transition-delay: .3s; } .rh-fieldcards.is-armed.is-in .fc-ico { opacity: 1; transform: none; transition: opacity .9s ease .3s, transform .9s ease .3s; } .rh-fieldcards.is-armed.is-in .fc-bar > span { width: var(--w); transition: width 1.4s cubic-bezier(.6,0,.2,1) .6s; } @media (prefers-reduced-motion: reduce) { .rh-fieldcards .fc-card::before, .rh-fieldcards .fc-ico, .rh-fieldcards .fc-bar > span { transition: none !important; transform: none !important; opacity: 1 !important; } } @media (max-width: 879.98px) and (min-width: 601px) { .rh-fieldcards .fc-cards { gap: 14px; } .rh-fieldcards .fc-card { padding: 26px 20px 22px; } .rh-fieldcards .fc-num { font-size: 44px; } .rh-fieldcards .fc-num--sm { font-size: 30px; line-height: 1.47; } } /* Phones: cards stack, horizontal, icon on the left. */ @media (max-width: 600px) { .rh-fieldcards .fc-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; } .rh-fieldcards .fc-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 24px 22px 22px; } .rh-fieldcards .fc-ico { grid-row: 1 / 5; margin: 4px 0 0; } .rh-fieldcards .fc-card > :not(.fc-ico) { grid-column: 2; } .rh-fieldcards .fc-num { font-size: 48px; } .rh-fieldcards .fc-num--sm { font-size: 36px; line-height: 1.33; } } @media (max-width: 359.98px) { .rh-fieldcards .fc-card { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 20px 16px; } .rh-fieldcards .fc-ico { width: 40px; height: 40px; } .rh-fieldcards .fc-num--sm { font-size: 30px; } } /* ---------- 1.5.63: back-to-top button (every page) ---------- */ .rainoff-totop { position: fixed; z-index: 90; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--totop-lift, 0px)); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent); color: #1A1A1A; box-shadow: 0 2px 10px rgb(0 0 0 / .18); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility 0s linear .25s; } .rainoff-totop.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s, visibility 0s; } .rainoff-totop:hover { background: #D8BA86; border-color: #D8BA86; } .rainoff-totop:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; } .rainoff-totop svg { display: block; width: 20px; height: 20px; } .showing-modal .rainoff-totop, .rainoff-menu-open .rainoff-totop { display: none; } @media (prefers-reduced-motion: reduce) { .rainoff-totop, .rainoff-totop.is-shown { transition: none; transform: none; } } @media print { .rainoff-totop { display: none !important; } } /* 1.5.63 fixes: the cards are links but read as cards (no link underline); the back-to-top button keeps its round shape * against RPhoto's / the site's global button styles. */ #site-content .rh-fieldcards a.fc-card, #site-content .rh-fieldcards a.fc-card * { text-decoration: none !important; } #site-content .rh-fieldcards a.fc-card { color: var(--text); } html body button.rainoff-totop { width: 44px; height: 44px; min-width: 0; min-height: 0; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; letter-spacing: 0; text-transform: none; background: var(--accent); border: 1px solid var(--accent); color: #1A1A1A; } html body button.rainoff-totop:hover { background: #D8BA86; border-color: #D8BA86; color: #1A1A1A; } html body button.rainoff-totop svg { display: block; width: 20px; height: 20px; flex: 0 0 auto; } html body button.rainoff-totop svg path { stroke: currentColor; } /* ---------- 1.5.64 / 1.6.41: paired home buttons (My mission | Conservation effect), both solid ---------- */ .rainoff-home .rh-btn-pair { display: flex; flex-wrap: nowrap; gap: 12px; } .rainoff-home .rh-center .rh-btn-pair { justify-content: center; } .rainoff-home .rh-btn-pair .rh-btn { white-space: nowrap; text-align: center; justify-content: center; } .rainoff-home .rh-textlinks { margin: 14px 0 0 !important; font-family: var(--rainoff-body); font-size: 14px; line-height: 1.5; } /* .rh-textlinks links use the unified text-link style (no override). */ /* Side by side on the narrow desktop column (1024-1199px) if it fits, else stack; phones: stacked, full width, same gap. */ @media (min-width: 1024px) and (max-width: 1199.98px) { .rainoff-home .rh-closing-about .rh-btn-pair { flex-wrap: wrap; } } @media (max-width: 600px) { .rainoff-home .rh-btn-pair { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 360px; } .rainoff-home .rh-center .rh-btn-pair { margin-left: auto; margin-right: auto; } .rainoff-home .rh-btn-pair .rh-btn { width: 100%; box-sizing: border-box; } } /* 1.5.64 (Adam, phones only <480px): the hero frame follows each slide's own ratio (no bands at all), portraits capped * at 70vh, never cropped or upscaled past 960. The height change animates ~350ms (hero.js; none under reduced motion, * which doesn't rotate). The caption sits right under the image and rides along; it reserves the tallest caption's * height (--rh-cap-h, set by hero.js) so the content below only moves by the image-height difference. Desktop unchanged. */ @media (max-width: 479.98px) { .rh-rotator .rh-slide-box { height: auto; } #site-content .rh-rotator .rh-slide-box img { max-height: min(70vh, 960px) !important; max-width: min(100%, 960px) !important; width: auto !important; height: auto !important; } .rh-rotator.is-sizing { transition: height .35s ease; } } @media (max-width: 479.98px) and (prefers-reduced-motion: reduce) { .rh-rotator.is-sizing { transition: none; } } /* 1.5.64: one caption template on every slide: same type, alignment and spacing; the tallest caption's height is * reserved at every width (--rh-cap-h from hero.js) so nothing below jumps between slides. */ .rh-rotator .rh-hero-caption { min-height: var(--rh-cap-h, 0px); box-sizing: border-box; text-align: center; } .rh-rotator .rh-hero-caption .rh-hero-species { font-family: var(--rainoff-head) !important; font-weight: 400 !important; font-size: clamp(24px, 17.6px + 1.6vw, 36.8px) !important; line-height: 1.2; margin: 0; } .rh-rotator .rh-hero-caption .rh-hero-place { font-family: var(--rainoff-body) !important; font-size: 12.8px !important; font-weight: 400; color: var(--muted) !important; margin: 5.6px 0 0 !important; } .rh-rotator .rh-hero-caption .rh-hero-link { font-family: var(--rainoff-body); font-size: 15px; margin: 10px 0 0 !important; } /* 1.5.64: theme fonts only. The Stories map's zoom buttons used Leaflet's monospace; page-content text with an inline * colour (e.g. the Conservation note in #bdbdbd, unreadable on light) takes the theme's muted colour. Content unchanged. */ #rs-map .leaflet-control-zoom a, #rs-map .leaflet-control-zoom a span { font-family: var(--rainoff-body) !important; font-weight: 400; } #site-content :is(p, span, div, li)[style*="color:"]:not(.rm-sw):not([style*="background"]) { color: var(--muted) !important; } /* ---------- 1.6.2: Branding front-page batch (Adam approved 2026-10-11; critique /workspace/branding/front-page-critique-20261011) ---------- */ /* 1. Phones: each slide keeps its own height (no fixed box, no bands); the height change eases over ~0.5 s. */ @media (max-width: 479.98px) { .rh-rotator.is-sizing { transition: height .5s ease; } } @media (max-width: 479.98px) and (prefers-reduced-motion: reduce) { .rh-rotator.is-sizing { transition: none; } } /* 2. Carousel controls: small and quiet, under the caption. Hit areas 36 px (>= 24 px), icons 18 px. */ .rh-rotator { touch-action: pan-y; } /* horizontal swipes belong to the carousel (no browser back-swipe); vertical scroll unchanged */ .rh-controls { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 6px auto 0; color: var(--muted); font-family: var(--rainoff-body); } .rh-controls[hidden] { display: none; } html body .rh-controls button.rh-ctl { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); box-shadow: none; cursor: pointer; font-size: 0; line-height: 0; letter-spacing: 0; transition: color .15s, background-color .15s; } html body .rh-controls button.rh-ctl:hover, html body .rh-controls button.rh-ctl:focus-visible { color: var(--text); background: var(--surface); } html body .rh-controls button.rh-ctl:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; } .rh-controls svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .rh-controls .i-play { fill: currentColor; stroke: none; } .rh-controls .i-play, .rh-ctl-play.is-paused .i-pause { display: none; } .rh-ctl-play.is-paused .i-play { display: block; } .rh-count { min-width: 4.2em; text-align: center; font-size: 13px; line-height: 1; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--muted); } .rainoff-home .rh-hero .rh-controls + * { margin-top: 0; } /* 3. Portrait links to Mission: no underline or box, image unchanged. */ .rh-portrait-link { display: block; line-height: 0; text-decoration: none !important; } .rh-portrait-link:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; } /* 6. Field Cards: "227 declining" as a secondary stat, deep red passing AA in both modes (light #A8432A 5.5:1 on the * card, dark #E0714A 5.6:1). The bar keeps its colours. */ :root, html[data-theme="b"] { --fc-dec-text: #E0714A; } html[data-theme="a"] { --fc-dec-text: #A8432A; } .rh-fieldcards .fc-key > span:first-child { flex: 1 0 100%; font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--fc-dec-text); margin-top: 2px; } .rh-fieldcards .fc-key > span:first-child b { color: inherit; font-weight: 600; } @media (max-width: 600px) { .rh-fieldcards .fc-key > span:first-child { font-size: 20px; } } /* 1.6.54: longer "Decreasing population trend" wraps cleanly at ~390px */ @media (max-width: 419.98px) { .rh-fieldcards .fc-key > span:first-child { font-size: 17px; line-height: 1.3; text-wrap: balance; } } /* 8. One date style site-wide ("March 2018"): no uppercase on lines that carry a date. */ .rh-rotator .rh-hero-caption .rh-hero-place, .rh-hero-place { text-transform: none; letter-spacing: .04em; } .rs-meta { text-transform: none; letter-spacing: .04em; } .rainoff-mission .rm-timeline time, .rainoff-conservation .rm-timeline time { text-transform: none; letter-spacing: .04em; } /* 9. One left edge: every home section uses the .rh-wrap container (same as header and footer) and its block content * starts on that container's left edge, desktop and phone. Centred one-line headings/buttons stay centred in it. */ .rh-fieldcards .fc-cards { max-width: none; } .rainoff-home .rh-band .rh-split > .rh-photo img { margin-left: 0; margin-right: auto; } @media (min-width: 880px) { .rainoff-home .rh-band .rh-split { grid-template-columns: auto minmax(320px, 1fr); } } @media (max-width: 879.98px) { .rainoff-home .rh-band .rh-split { grid-template-columns: minmax(0, 1fr); justify-content: stretch; } .rainoff-home .rh-band .rh-split > div { contain: none; } } @media (max-width: 1023.98px) { .rh-closing-grid { grid-template-columns: minmax(0, 1fr); justify-content: stretch; } .rh-closing-grid .rh-portrait { margin: 0; max-width: 288px; } } .rh-closing-grid .rh-portrait { margin-left: 0; } /* 12. Body text one step heavier (Source Sans 3 300 -> 400), same family; light-mode ink one step darker (#1A1A1A -> * #111111, assets/themes.css). Light 18.9:1, dark 16:1. */ body, .rainoff-home, .rs-excerpt, .rs-all-sub { font-weight: 400; } /* 10. Sun/moon toggle on phones/tablets: see assets/themes.css (44 x 44 px tap area, same visible circle and icon). */ /* ---------- 1.6.4 Mission page (Branding, Adam 2026-10-11). Scoped to :is(.rainoff-mission-page, .rainoff-conservation-page) / .rainoff-mission. ---------- * 1/3. Stat cards and the combined-views block in the Field Cards look, in the 760px text column, themed light/dark. * 4. One section gap (96px desktop / 64px phone), no gold dividers on this page (title rule + section rules). * 5. H1 on the text column's left edge; H1 56/36, H2 32/26 (desktop/phone). */ :is(.rainoff-mission-page, .rainoff-conservation-page) .entry-header hr.color-accent, :is(.rainoff-mission-page, .rainoff-conservation-page) .rm-block::before { display: none !important; content: none !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) .entry-header.section-inner.mw-thin { max-width: 760px; text-align: left; } :is(.rainoff-mission-page, .rainoff-conservation-page) .entry-header { padding-bottom: 0; } body:is(.rainoff-mission-page, .rainoff-conservation-page) .entry-header .entry-title { font-size: 56px; line-height: 1.1; text-align: left; margin: 0; } body:is(.rainoff-mission-page, .rainoff-conservation-page) .rainoff-mission h2 { font-size: 32px; line-height: 1.2; } #site-content .rainoff-mission { --rm-sec: 96px; } #site-content .rainoff-mission .rm-block { margin-top: 0; padding-top: var(--rm-sec); } #site-content .rainoff-mission > figure.rm-solo { margin-bottom: 0; } #site-content .rainoff-mission .rm-text.rm-cta-mid { margin-top: var(--rm-gap); } .rainoff-mission .rainoff-btn.rm-btn-sm { font-size: 15px; padding: 10px 20px; min-height: 44px; } .rainoff-mission .rm-btns .rainoff-btn { font-size: 16px; } /* Caption slot (place + year) on each photo of Adam: prepared, hidden until Branding sends verified text. */ .rainoff-mission figcaption.rm-cap-slot { display: none !important; } .rainoff-mission .rm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 760px; margin: var(--rm-gap) auto; text-align: left; } .rainoff-mission .rm-card { --c: var(--fc-teal); position: relative; overflow: hidden; padding: 30px 28px 26px; background: var(--surface); color: var(--text); border: 1px solid transparent; border-radius: 2px; } html[data-theme="b"] .rainoff-mission .rm-card { border-color: var(--line); } .rainoff-mission .rm-card.rm-c2 { --c: var(--fc-emerald); } .rainoff-mission .rm-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--c); } .rainoff-mission .rm-card-place { display: block; font-family: var(--rainoff-body); font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .rainoff-mission .rm-card-num { display: block; margin-top: 10px; font-family: var(--rainoff-head); font-weight: 300; font-size: 58px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--text); white-space: nowrap; } .rainoff-mission .rm-card-txt { display: block; margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--text); } .rainoff-mission .rm-cmp { list-style: none; margin: 18px 0 0; padding: 0; } .rainoff-mission .rm-cmp li { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: var(--muted); } .rainoff-mission .rm-cmp b { color: var(--text); font-weight: 600; } .rainoff-mission .rm-cmp .bar { display: block; height: 10px; margin-top: 4px; background: var(--line); } .rainoff-mission .rm-cmp .bar > span { display: block; height: 100%; width: var(--w); background: var(--c); } .rainoff-mission .rm-cmp .bar.base > span { background: var(--fc-grey); } #site-content .rainoff-mission p.rm-card-src { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); } .rainoff-mission .rm-views { max-width: 760px; margin: var(--rm-gap) auto; padding: 30px 28px 26px; background: var(--surface); position: relative; overflow: hidden; border: 1px solid transparent; border-radius: 2px; } html[data-theme="b"] .rainoff-mission .rm-views { border-color: var(--line); } .rainoff-mission .rm-views::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: var(--fc-amber); } .rainoff-mission .rm-views-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; } .rainoff-mission .rm-views-num { font-family: var(--rainoff-head); font-weight: 300; font-size: 52px; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; color: var(--text); } .rainoff-mission .rm-views-lab { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .rainoff-mission .rm-views-asof { flex: 1 0 100%; font-size: 14px; color: var(--muted); } .rainoff-mission .rm-views-list { list-style: none; margin: 22px 0 0; padding: 0; } .rainoff-mission .rm-views-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; margin: 0 0 18px; padding: 0; } .rainoff-mission .rm-views-row:last-child { margin-bottom: 0; } .rainoff-mission .rm-views-logo { display: flex; align-items: center; justify-content: center; width: 32px; height: 24px; color: var(--text); } .rainoff-mission .rm-views-ico { display: block; width: 24px; height: 24px; fill: currentColor; } .rainoff-mission .rm-views-row:nth-child(2) .rm-views-ico { width: 32px; height: 20px; } .rainoff-mission .rm-views-name { font-size: 17px; font-weight: 600; color: var(--text); } .rainoff-mission .rm-views-name a { color: inherit; } .rainoff-mission .rm-views-val { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--text); text-align: right; } .rainoff-mission .rm-views-val small { display: block; font-size: 14px; color: var(--muted); } .rainoff-mission .rm-views-bar { grid-column: 2 / 4; display: block; height: 10px; margin: 6px 0 4px; background: var(--line); } .rainoff-mission .rm-views-bar > span { display: block; height: 100%; width: var(--w); background: var(--fc-amber); } .rainoff-mission .rm-views-line { grid-column: 2 / 4; font-size: 15px; line-height: 1.45; color: var(--muted); } @media (max-width: 767.98px) { #site-content .rainoff-mission { --rm-sec: 64px; } body:is(.rainoff-mission-page, .rainoff-conservation-page) .entry-header .entry-title { font-size: 36px; } body:is(.rainoff-mission-page, .rainoff-conservation-page) .rainoff-mission h2 { font-size: 26px; } .rainoff-mission .rm-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; } .rainoff-mission .rm-card, .rainoff-mission .rm-views { padding: 24px 20px 22px; } .rainoff-mission .rm-card-num { font-size: 48px; } .rainoff-mission .rm-views-num { font-size: 40px; } } /* ---------- 1.6.6 Mission redesign (Branding mockup 2026-10-11, approved by Adam 22:32 PT). Page 6730 only (.rmx). * Home 1.6.5 tokens: Jost heads / Source Sans 3 body, --rainoff-h1/h2/h3, Field-Card surfaces, accent buttons. * Colours come from the site theme variables, so light/dark follow the sun/moon toggle (html[data-theme]). * One 760px text column on the content's left edge; the three model cards and the people row use the full width. * Section gap 64px phone / 96px desktop; no divider rules. Photos uncropped (object-fit: contain), 960px max. ---------- */ :is(.rainoff-mission-page, .rainoff-conservation-page) .entry-header { display: none !important; } #site-content .rmx { --rmx-gap: 64px; --rmx-edge: 0px; max-width: 1120px; margin: 0 auto; color: var(--text); font-family: var(--rainoff-body); font-size: 17px; line-height: 1.7; letter-spacing: -.01em; text-align: left; } #site-content .rmx .rmx-col { max-width: 760px; margin: 0; } #site-content .rmx p { margin: 0 0 16px; } #site-content .rmx .rmx-sec { padding-top: var(--rmx-gap); margin: 0; border: 0; } #site-content .rmx .rmx-sec::before { content: none; display: none; } #site-content .rmx .rmx-eyebrow { font: 500 12.8px/1.5 var(--rainoff-body); letter-spacing: 2.304px; text-transform: uppercase; color: var(--muted); margin: 0 0 9.6px; } #site-content .rmx h1, #site-content .rmx h2, #site-content .rmx h3 { font-family: var(--rainoff-head); font-weight: 400; letter-spacing: -.01em; color: var(--text); margin: 0 0 16px; text-align: left; } #site-content .rmx .rmx-h1 { font-size: var(--rainoff-h1); line-height: 1.15; margin-top: 8px; } #site-content .rmx h2 { font-size: var(--rainoff-h2); line-height: 1.2; } #site-content .rmx h3 { font-size: var(--rainoff-h3); line-height: 1.3; } #site-content .rmx .rmx-lede { font: 400 24px/1.2 var(--rainoff-head); color: var(--text); } #site-content .rmx a { color: inherit; } #site-content .rmx figure.rmx-photo { margin: 24px 0 0; padding: 0; max-width: 960px; } #site-content .rmx figure.rmx-photo img { display: block; width: 100% !important; max-width: 960px !important; height: auto !important; max-height: none !important; object-fit: contain !important; margin: 0 !important; } #site-content .rmx figcaption.rm-cap-slot { display: none !important; } #site-content .rmx .rmx-cards { display: grid; gap: 12px; margin: 20px 0 0; max-width: 760px; } #site-content .rmx .rmx-cards.rmx-c3 { max-width: none; } #site-content .rmx .rmx-card { background: var(--surface); color: var(--text); border: 1px solid transparent; border-radius: 2px; padding: 24px 22px 22px; margin: 0; } html[data-theme="b"] #site-content .rmx .rmx-card { border-color: var(--line); } #site-content .rmx .rmx-cards + p, #site-content .rmx .rmx-pyr + .rmx-cards { margin-top: 20px; } #site-content .rmx .rmx-cards + p { margin-top: 24px; } #site-content .rmx .rmx-num { font: 300 48px/1 var(--rainoff-head); letter-spacing: -.01em; color: var(--text); } #site-content .rmx .rmx-step .rmx-num { color: var(--accent); } #site-content .rmx .rmx-lab { font: 600 11.5px/1.7 var(--rainoff-body); letter-spacing: 2.3px; text-transform: uppercase; color: var(--muted); margin: 12px 0 0; } #site-content .rmx .rmx-lab0 { margin: 0; } #site-content .rmx .rmx-txt { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 12px; } #site-content .rmx .rmx-dec { color: var(--fc-dec-text); font-weight: 600; } #site-content .rmx .rmx-foot { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 16px 0 0; } #site-content .rmx .rmx-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 1.4; margin: 12px 0 4px; } #site-content .rmx .rmx-row b { font-weight: 600; white-space: nowrap; } #site-content .rmx .rmx-bar { height: 12px; border-radius: 2px; background: transparent; } #site-content .rmx .rmx-bar > span { display: block; height: 100%; border-radius: 2px; background: var(--accent); } #site-content .rmx .rmx-bar.g > span { background: var(--fc-grey); } #site-content .rmx .rmx-pyr { margin: 8px 0 0; } #site-content .rmx .rmx-pyr .rmx-row { font-size: 14px; } #site-content .rmx .rmx-sub { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0 0 12px; } #site-content .rmx .rmx-axis { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); margin: 0 0 10px; } #site-content .rmx .rmx-tiers { display: flex; flex-direction: column; align-items: center; gap: 4px; } #site-content .rmx .rmx-tier { text-align: center; font: 500 14px/1.3 var(--rainoff-body); padding: 10px 4px; border-radius: 2px; color: #ECEAE5; } #site-content .rmx .t1 { width: 34%; background: var(--accent); color: #1A1A1A; } #site-content .rmx .t2 { width: 50%; background: #6f6c66; } #site-content .rmx .t3 { width: 66%; background: #5b5955; } #site-content .rmx .t4 { width: 83%; background: #4A4B4A; } #site-content .rmx .t5 { width: 100%; background: #363737; } #site-content .rmx .rmx-callout { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } #site-content .rmx .rmx-callout-h { font: 500 20px/1.3 var(--rainoff-head); } #site-content .rmx .rmx-people { display: grid; gap: 12px; margin: 24px 0 0; } #site-content .rmx .rmx-people figure.rmx-photo { margin: 0; } #site-content .rmx .rmx-people + .rmx-col { margin-top: 24px; } #site-content .rmx .rmx-btns { margin: 16px 0 0; } #site-content .rmx a.rmx-btn { display: inline-flex; align-items: center; min-height: 44px; background: var(--accent) !important; border: 1px solid var(--accent) !important; color: #1A1A1A !important; font: 500 14px/1.2 var(--rainoff-body); letter-spacing: .84px; padding: 12px 28px; border-radius: 2px; text-decoration: none !important; } #site-content .rmx a.rmx-btn:hover, #site-content .rmx a.rmx-btn:focus-visible, #site-content .rmx a.rmx-btn:visited { background: var(--accent) !important; color: #1A1A1A !important; border-color: var(--accent) !important; filter: brightness(1.06); text-decoration: none !important; } @media (min-width: 900px) { #site-content .rmx { --rmx-gap: 96px; font-size: 18px; } #site-content .rmx .rmx-lede { font-size: 36.8px; } #site-content .rmx .rmx-card { padding: 30px 28px 26px; } #site-content .rmx .rmx-num { font-size: 58px; } #site-content .rmx .rmx-cards.rmx-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } #site-content .rmx .rmx-people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } #site-content .rmx .rmx-tier { font-size: 15px; } } /* Phone/tablet side margin = home's 20px (the page wrapper's own margin is 32px on other pages). */ @media (max-width: 699.98px) { :is(.rainoff-mission-page, .rainoff-conservation-page) .post-inner.section-inner.mw-thin { width: calc(100% - 40px); margin-left: 20px; margin-right: 20px; } } /* ---------- 1.6.7 (Adam 2026-10-11): Mission top photo + home-style pull quote; no empty band above. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content article.page { margin-top: 0 !important; padding-top: 0 !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .post-inner { margin-top: 0 !important; padding-top: 0 !important; } #site-content .rmx figure.rmx-photo.rmx-top { margin: 0 auto !important; width: 100%; max-width: 960px; } #site-content .rmx .rmx-top img { display: block; width: 100%; height: auto; max-width: 960px; } #site-content .rmx .rmx-quote { text-align: center; margin: 28px auto 0; max-width: 960px; } #site-content .rmx .rmx-quote .rh-eyebrow { margin: 0 0 9.6px !important; font: 500 12.8px/1.5 var(--rainoff-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } #site-content .rmx .rmx-quote-text { margin: 0 auto; max-width: 38ch; text-wrap: balance; hanging-punctuation: first last; font-family: var(--rainoff-head); font-weight: 400; font-synthesis: none; color: var(--text); letter-spacing: -0.01em; font-size: clamp(23.2px, 16.8px + 1.7vw, 37.6px); line-height: 1.35; } #site-content .rmx .rmx-quote + .rmx-col { margin-top: 20px; } #site-content .rmx .rmx-quote + .rmx-col .rmx-h1 { margin-top: 4px; } @media (max-width: 479.98px) { #site-content .rmx .rmx-quote { margin-top: 24px; } #site-content .rmx .rmx-quote + .rmx-col { margin-top: 16px; } } :is(.rainoff-mission-page, .rainoff-conservation-page) #rainoff-site-header { margin-bottom: 0 !important; } /* ---------- 1.6.8 (Adam 2026-10-11): Mission readability at <=600px. Desktop unchanged. */ @media (max-width: 600px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx { font-size: 18px; line-height: 1.6; font-weight: 400; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col p:not(.rmx-eyebrow):not(.rmx-lede):not(.rmx-btns), :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx li { font-size: 18px; line-height: 1.6; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-txt, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-tier, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-row span, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-row b, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-axis span, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote .rh-eyebrow { font-size: 16px; line-height: 1.5; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-lab, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-eyebrow, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-foot, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-foot a, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sub, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-btn { font-size: 15px; line-height: 1.5; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-txt a { font-size: inherit; } } /* ---------- 1.6.9 (Branding layout-fix spec 2026-10-11, Adam's standing OK 23:07 PT). Mission page only. Timeline removed. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx p { text-wrap: pretty; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > p:last-child, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-pyr > :last-child { margin-bottom: 0; } /* 3/15 section spacing: block end -> next eyebrow 57/81; after a photo 28/41 */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec { padding-top: 57px; margin: 0; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec:has(> .rmx-col:last-child > figure.rmx-photo:last-child) + .rmx-sec { padding-top: 28px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col:has(> .rmx-lede:last-child) + .rmx-sec { padding-top: 57px; } /* 14: photos */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col figure.rmx-photo { margin: 24px 0 0; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx figure.rmx-photo.rmx-top { margin: 0 !important; max-width: 960px; } /* 1/2: quotes and labels left, one eyebrow style */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote * { text-align: left; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote { max-width: 760px; margin: 28px 0 0; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote .rmx-quote-text { margin: 0; max-width: 760px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote .rh-eyebrow { font: 500 12.8px/1.5 var(--rainoff-body); letter-spacing: 2.304px; text-transform: uppercase; color: var(--muted); margin: 0 0 9.6px !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote + .rmx-col { margin-top: 28px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-quote { margin-top: 28px; } /* 8: headings */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx h2, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-h1 { margin-bottom: 12px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote + .rmx-col .rmx-h1 { margin-top: 0; } /* 7: cards equal height */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-cards { align-items: stretch; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-cards > .rmx-card { display: flex; flex-direction: column; min-height: 0; } /* 5/6: pyramid + Reach cards */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; font-size: 15px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-row b { text-align: right; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bar { background: var(--line); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-lab.rmx-lab0 { font: 600 11.5px/1.7 var(--rainoff-body); letter-spacing: 2.3px; text-transform: uppercase; color: var(--muted); margin: 0; } html[data-theme="b"] :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .t5 { background: #4A4B4A; outline: 1px solid #5b5955; outline-offset: -1px; } html[data-theme="b"] :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .t4 { background: #555654; outline: 1px solid #5b5955; outline-offset: -1px; } /* 11: inline link hit area */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > p:not(.rmx-btns) a { padding-block: 10px; margin-block: -10px; } /* 12: button like home .rh-btn */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-btns { margin: 20px 0 0; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx a.rmx-btn { font: 500 14px/1.2 var(--rainoff-body); letter-spacing: .84px; padding: 12px 28px; min-height: 44px; border-radius: 2px; box-sizing: border-box; color: #1A1A1A !important; background: var(--accent) !important; border-color: var(--accent) !important; } @media (max-width: 600px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote .rh-eyebrow, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-lab.rmx-lab0 { font-size: 15px; line-height: 1.5; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col p.rmx-foot, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col p.rmx-sub, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col p.rmx-lab { font-size: 15px; line-height: 1.5; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx a.rmx-btn { font-size: 15px; line-height: 18px; } } @media (min-width: 900px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec { padding-top: 81px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec:has(> .rmx-col:last-child > figure.rmx-photo:last-child) + .rmx-sec { padding-top: 41px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col:has(> .rmx-lede:last-child) + .rmx-sec { padding-top: 81px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote + .rmx-col, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-quote { margin-top: 41px; } /* 9: ~60 characters */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > p:not(.rmx-lede), :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > h2 { max-width: 560px; } /* 4: 2-card row spans the content width */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-cards:not(.rmx-c3) { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx p.rmx-btns { display: flex; margin: 20px 0 0 !important; } @media (max-width: 600px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col .rmx-card p.rmx-foot, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col .rmx-card p.rmx-sub, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col .rmx-card p.rmx-lab { font-size: 15px !important; line-height: 1.5 !important; } } /* 1.6.9b (Branding 23:26 PT): Mission layout copied from home. Content box = home .rh-wrap (1120 at x160 / 350 at x20). * Image column 960 centred (photo max 960); body paragraphs fill it, justified + hyphens. Headings, eyebrows, quotes, * photos and buttons centred like home .rh-center sections. Cards use home Field Cards (.rh-fieldcards .fc-cards/.fc-card, * contents left as on home); pyramid + Reach centred at the image width in Field Card style. Phone minimums kept. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote { max-width: 960px !important; margin-left: auto !important; margin-right: auto !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx figure.rmx-photo, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx figure.rmx-photo.rmx-top { max-width: 960px; margin-left: auto !important; margin-right: auto !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx :is(h1, h2, .rmx-eyebrow, .rh-eyebrow, .rmx-quote-text, .rmx-lede, .rmx-btns) { text-align: center !important; margin-left: auto; margin-right: auto; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > h2, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote-text { max-width: 857px !important; text-wrap: balance; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-lede { max-width: 857px; text-wrap: balance; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx p.rmx-btns { justify-content: center; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > p:not(.rmx-lede):not(.rmx-eyebrow):not(.rmx-btns) { max-width: none !important; text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* Field Cards: home component; 3-up row = home width 1004 centred; 2-up row at the image width. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .fc-cards { max-width: 1004px; margin: 28px auto 0; text-align: left; align-items: stretch; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col .rh-fieldcards .fc-cards { max-width: 960px; grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .fc-card { margin: 0; border-radius: 2px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .fc-num { color: var(--text); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .rmx-step .fc-num { color: var(--accent); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .fc-txt a { color: inherit; } /* Pyramid + Reach: Field Card surface, centred at image width, contents centred. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-card.rmx-pyr, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-card.rmx-bars { max-width: 960px; margin-left: auto; margin-right: auto; text-align: center; padding: 30px 28px 26px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx :is(.rmx-pyr, .rmx-bars) :is(h3, p, .rmx-callout-h) { text-align: center !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx :is(.rmx-pyr, .rmx-bars) .rmx-row { grid-template-columns: 1fr auto; text-align: left; } @media (max-width: 600px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .fc-cards, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col .rh-fieldcards .fc-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .fc-card { padding: 24px 22px 22px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .fc-num { font-size: 48px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .fc-lab { font-size: 15px !important; line-height: 1.5; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .fc-txt { font-size: 16px !important; line-height: 1.5; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-card.rmx-pyr, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-card.rmx-bars { padding: 24px 22px 22px; } } @media (min-width: 601px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .fc-txt { font-size: 15px; } } /* Home: prints shipping note (1.6.9) */ .rainoff-home .rh-closing-prints .rh-prints-note { margin: 16px 0 0 !important; font-size: 13px; line-height: 1.6; color: var(--muted); text-align: inherit; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote p.rmx-quote-text { margin-left: auto !important; margin-right: auto !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col p.rmx-btns { justify-content: center !important; max-width: none !important; } /* 1.6.11 (Adam 2026-10-11): Mission sections = home sections: no section padding; the shared separator (themes.css * --sep-*: 160x1 accent rule, 40px above and below; phones 120px, 28px) between sections, as .rh-section + .rh-section. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec:has(> .rmx-col:last-child > figure.rmx-photo:last-child) + .rmx-sec, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col:has(> p:last-child) + .rmx-sec { padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec::before { content: ""; display: block !important; box-sizing: content-box; width: var(--sep-width); max-width: 100%; height: 0; margin: var(--sep-space) auto; padding: 0; border: 0; border-top: var(--sep-thick) solid var(--sep-color); background: none; opacity: 1; } /* 1.6.12 (copy-v3): stat-card source line; components follow the paragraphs. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .fc-txt.rmx-src { margin-top: 12px; font-size: 13px; } @media (max-width: 600px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rh-fieldcards .fc-txt.rmx-src { font-size: 15px !important; } } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > p + .rmx-card, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > p + .rh-fieldcards { margin-top: 28px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > .rmx-pyr + .rh-fieldcards .fc-cards { margin-top: 20px; } /* 1.6.12 / 1.6.37: shared closing from footer.php on every page, with the shared separator above. */ .rainoff-closing-shared { display: block; width: 100%; background: transparent; } .rainoff-closing-shared > .rh-closing { padding-top: 0; } .rainoff-closing-shared > .rh-closing::before { content: ""; display: block; box-sizing: content-box; width: var(--sep-width); max-width: 100%; height: 0; margin: var(--sep-space) auto; border-top: var(--sep-thick) solid var(--sep-color); } /* 1.6.13 (Adam 2026-10-12): shared separator between the top quote and "My mission", same as between sections. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote + .rmx-col { margin-top: 0 !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-quote + .rmx-col::before { content: ""; display: block; box-sizing: content-box; width: var(--sep-width); max-width: 100%; height: 0; margin: var(--sep-space) auto; padding: 0; border: 0; border-top: var(--sep-thick) solid var(--sep-color); } /* 1.6.14 (Adam 2026-10-12): light/dark toggle moved to the far right of the header, sitewide. Desktop: after the * menu (after "Licensing"). Phones: far right, after the Menu button; 44 px tap area kept. */ .rainoff-header-inner .rainoff-header-tools { flex: 0 0 auto; order: 3; margin-left: 24px; } .rainoff-header-inner .rainoff-site-nav { order: 2; margin-left: auto; } .rainoff-header-tools .rainoff-nav-toggle { order: 1; margin-left: 0; } .rainoff-header-tools .rainoff-mode-toggle { order: 2; } @media (max-width: 879.98px) { .rainoff-header-inner .rainoff-header-tools { margin-left: auto; gap: 12px; } } @media (min-width: 880px) and (max-width: 1023.98px) { .rainoff-header-inner .rainoff-header-tools { margin-left: 16px; } } /* 1.6.15 (Branding, Adam's standing OK): Mangalajodi before/after bar chart in the Colombia chart's card style; * the remaining guides stat card spans the column on its own. Pure HTML/CSS. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-india { margin-top: 20px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-india .rmx-callout-h { display: block; margin-bottom: 4px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-india .rmx-row { align-items: end; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-india .rmx-big { font: 300 40px/1 var(--rainoff-head); color: var(--accent); letter-spacing: -.01em; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-india .rmx-bar { height: 14px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-india .rmx-india-line { margin: 18px 0 0; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col .rh-fieldcards .fc-cards.rmx-c1 { grid-template-columns: 1fr !important; } @media (max-width: 600px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-india .rmx-big { font-size: 34px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col .rmx-card.rmx-india p { font-size: 15px !important; line-height: 1.5 !important; } } /* 1.6.15: shared separator above the mid-page pull quote only (balanced: the rule's own --sep-space above and below). */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-quote { margin-top: 0 !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-quote::before { content: ""; display: block; box-sizing: content-box; width: var(--sep-width); max-width: 100%; height: 0; margin: var(--sep-space) auto; padding: 0; border: 0; border-top: var(--sep-thick) solid var(--sep-color); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-col:has(+ .rmx-quote) > p:last-child { margin-bottom: 0; } /* 1.6.16: Trained bird guides chart (same card as Colombia/Mangalajodi). Scale max = 1.68x: baseline 59.5%, * solid gold 86.9% (1.46x), lighter gold band 86.9-100% (to 1.68x). */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bar.rmx-range { position: relative; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bar.rmx-range > span { border-radius: 2px 0 0 2px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bar.rmx-range > i { position: absolute; top: 0; bottom: 0; display: block; background: var(--accent); opacity: .35; border-radius: 0 2px 2px 0; } /* 1.6.18: "Read the stories" now sits at the end of the prose column, before the separator + mid-page quote * (1.6.17 separator suppression removed). Paragraph -> button gap 20px. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > p:has(+ p.rmx-btns) { margin-bottom: 0 !important; } /* 1.6.19: quote directly under a section photo: no separator; 20px phone / 28px desktop gap. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-col:has(> figure.rmx-photo:last-child) + .rmx-quote::before { content: none !important; display: none !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-col:has(> figure.rmx-photo:last-child) + .rmx-quote { margin-top: 20px !important; } @media (min-width: 480px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-col:has(> figure.rmx-photo:last-child) + .rmx-quote { margin-top: 28px !important; } } /* 1.6.20: separator after the step cards (before the section photo), home margins. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-fc + .rmx-col { margin-top: 0 !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-fc + .rmx-col::before { content: ""; display: block; box-sizing: content-box; width: var(--sep-width); max-width: 100%; height: 0; margin: var(--sep-space) auto; padding: 0; border: 0; border-top: var(--sep-thick) solid var(--sep-color); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-fc:has(+ .rmx-col) { margin-bottom: 0 !important; } /* 1.6.21: Stories "From the field" anchor (#rs-field) clears the sticky header; Mission "See the birds" button 20px below the charts. */ #rs-field { scroll-margin-top: 80px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > .rmx-card:has(+ p.rmx-btns) { margin-bottom: 0 !important; } /* 1.6.22: Mission "44.6%" donut card (exact conic fill, --p = percent). */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-half { text-align: center; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-donut { --p: 0; position: relative; width: 220px; height: 220px; margin: 4px auto 18px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-donut::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: var(--surface); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-donut > .rmx-big { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-half p { text-align: center !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-half .rmx-half-text { font: 400 22px/1.35 var(--rainoff-head); color: var(--text); margin: 0 auto; max-width: 30ch; text-wrap: balance; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-half .rmx-half-count { margin: 12px 0 0; color: var(--accent); font-weight: 500; } @media (max-width: 479.98px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-donut { width: 180px; height: 180px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-donut::after { inset: 22px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col .rmx-card.rmx-half p.rmx-half-text { font-size: 19px !important; line-height: 1.35 !important; } } /* 1.6.23: Stories "Most threatened birds" (#rs-threatened): same grid as the curated top 12, plus a gold IUCN badge. */ .rs-threat { scroll-margin-top: 80px; } .rs-iucn-badge { display: inline-block; margin: 0 0 6px; padding: 2px 8px; border: 1px solid var(--accent); border-radius: 2px; color: var(--accent); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; } @media (max-width: 479.98px) { .rs-iucn-badge { font-size: 15px; letter-spacing: .02em; } } /* 1.6.24: merged four-country donut (Okabe-Ito-based, colorblind-safe; site gold = Colombia). */ :is(.rainoff-mission-page, .rainoff-conservation-page) { --d-co: #C9A66B; --d-id: #0072B2; --d-cn: #D55E00; --d-in: #009E73; --d-sh: #CC79A7; } html[data-theme="b"] :is(.rainoff-mission-page, .rainoff-conservation-page) { --d-id: #56B4E9; --d-cn: #E69F00; --d-in: #2BB58A; --d-sh: #D99BC0; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged .rmx-donut { width: 260px; height: 260px; margin: 4px auto 22px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged .rmx-donut::after { inset: 30px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-donut-c { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 44px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-donut-c .rmx-big { display: block; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-donut-sub { display: block; margin-top: 6px; font-size: 15px; line-height: 1.3; color: var(--text); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-legend { list-style: none; margin: 0 auto; padding: 0; display: inline-flex; flex-direction: column; gap: 6px; text-align: left; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-legend li { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; line-height: 1.4; color: var(--text); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; } @media (max-width: 479.98px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged .rmx-donut { width: 230px; height: 230px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged .rmx-donut::after { inset: 26px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-legend li { font-size: 15px; } } /* 1.6.40 / 1.6.42: merged donut — ring left + legend right on desktop (≥1024), pair centered as a unit * (flex, so spanning captions cannot stretch the columns); always stacked on narrower viewports. * Shared slice removed; legend shows country totals. Mobile legend ≥15px. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged { display: flex; flex-direction: column; align-items: center; row-gap: 0; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged .rmx-donut { margin: 4px auto 18px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged .rmx-legend { margin: 0 auto 4px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged .rmx-half-count, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged .rmx-foot { width: 100%; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-legend li { font-size: 16px; } @media (max-width: 1023.98px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-legend li { font-size: 15px; } } @media (min-width: 1024px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 36px; text-align: left; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged .rmx-donut { margin: 4px 0 8px; flex: 0 0 auto; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged .rmx-legend { margin: 0; flex: 0 0 auto; align-self: center; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged .rmx-half-count, :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-merged .rmx-foot { flex: 1 0 100%; width: 100%; text-align: center; } } /* 1.6.46: Reach card -- combined total; area-proportional bubbles, ~25% overlap; in-bubble million labels. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-reach .rmx-reach-total { font: 300 44px/1 var(--rainoff-head); color: var(--accent); letter-spacing: -.01em; margin: 6px 0 14px; text-align: center; font-variant-numeric: lining-nums tabular-nums; } @media (max-width: 479.98px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-reach .rmx-reach-total { font-size: 36px; } } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubbles { --bubble-max: 300px; --bubble-else-min: 168px; /* floor so "10.3 million" + ALL OTHERS stay readable on phones */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; margin: 16px 0 10px; position: relative; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubble { --br: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; width: calc(var(--bubble-max) * var(--br)); height: calc(var(--bubble-max) * var(--br)); border-radius: 50%; padding: 14px 12px; background: var(--accent); color: #1A1A1A; position: relative; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubble-fb { background: #8A6A2F; color: #1A1A1A; z-index: 1; } html[data-theme="b"] :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubble-fb { background: #C9A66B; color: #1A1A1A; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubble-else { background: #E8D9B8; color: #1A1A1A; border: 1px solid #C9A66B; z-index: 2; /* Prefer area scale; never smaller than the readable floor. */ width: max(calc(var(--bubble-max) * var(--br)), var(--bubble-else-min)); height: max(calc(var(--bubble-max) * var(--br)), var(--bubble-else-min)); /* Stacked: ~25% of (rendered) small diameter overlaps Facebook. */ margin-top: calc(-0.25 * max(calc(var(--bubble-max) * var(--br)), var(--bubble-else-min))); } html[data-theme="b"] :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubble-else { background: #3A3428; color: #ECEAE5; border-color: #C9A66B; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubble-num { font: 300 clamp(16px, 2.6vw + 9px, 28px)/1.1 var(--rainoff-head); letter-spacing: -.01em; display: block; max-width: 90%; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubble-fb .rmx-bubble-num { font-size: clamp(22px, 3.6vw + 10px, 32px); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubble-else .rmx-bubble-num { font-size: clamp(15px, 2.4vw + 8px, 20px); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubble-lab { display: block; margin-top: 6px; font: 600 12.8px/1.25 var(--rainoff-body); letter-spacing: .12em; text-transform: uppercase; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubble-else .rmx-bubble-lab { font-size: 12px; margin-top: 4px; letter-spacing: .08em; max-width: 92%; white-space: nowrap; } @media (max-width: 479.98px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubbles { --bubble-max: 260px; --bubble-else-min: 172px; } } @media (min-width: 1024px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubbles { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0; --bubble-max: 320px; --bubble-else-min: 180px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-bubble-else { margin-top: 0; margin-left: calc(-0.25 * max(calc(var(--bubble-max) * var(--br)), var(--bubble-else-min))); } } /* 1.6.25: Mission "Browse every story" button between the step cards and the photo (separator moves below it); * Stories anchors #rs-list / #rs-map-title clear the sticky header. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-fc + .rmx-col:has(> p.rmx-btns:only-child)::before { content: none !important; display: none !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-fc + .rmx-col:has(> p.rmx-btns:only-child) > p.rmx-btns { margin-top: 20px !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-col:has(> p.rmx-btns:only-child) + .rmx-col { margin-top: 0 !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-col:has(> p.rmx-btns:only-child) + .rmx-col::before { content: ""; display: block; box-sizing: content-box; width: var(--sep-width); max-width: 100%; height: 0; margin: var(--sep-space) auto; padding: 0; border: 0; border-top: var(--sep-thick) solid var(--sep-color); } #rs-list, #rs-map-title { scroll-margin-top: 80px; } /* 1.6.26: in-column pull quote under a photo (Why birds): same type as the section quotes, 20/28px photo gap, room before the prose. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > .rmx-quote-in { margin-top: 20px !important; margin-bottom: 28px !important; } @media (min-width: 480px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > .rmx-quote-in { margin-top: 28px !important; margin-bottom: 40px !important; } } @media (max-width: 479.98px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > .rmx-quote-in p.rh-eyebrow { font-size: 15px !important; line-height: 1.5 !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > .rmx-quote-in p.rmx-quote-text { font-size: clamp(23.2px, 16.8px + 1.7vw, 37.6px) !important; line-height: 1.35 !important; } } /* 1.6.27: gold separator between a button and the photo right after it (Reach "Explore the map", In the field "See the birds"), home margins. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > p.rmx-btns + figure.rmx-photo { margin-top: 0 !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-col > p.rmx-btns + figure.rmx-photo::before { content: ""; display: block; box-sizing: content-box; width: var(--sep-width); max-width: 100%; height: 0; margin: var(--sep-space) auto; padding: 0; border: 0; border-top: var(--sep-thick) solid var(--sep-color); } /* 1.6.28: a photo opening a section (Partner with me): section separator, photo, gold separator, heading. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-col:first-child:has(> figure.rmx-photo:only-child) > figure.rmx-photo { margin-top: 0 !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-col:first-child:has(> figure.rmx-photo:only-child) + .rmx-col { margin-top: 0 !important; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-col:first-child:has(> figure.rmx-photo:only-child) + .rmx-col::before { content: ""; display: block; box-sizing: content-box; width: var(--sep-width); max-width: 100%; height: 0; margin: var(--sep-space) auto; padding: 0; border: 0; border-top: var(--sep-thick) solid var(--sep-color); } /* 1.6.38 (Branding): shared closing from footer on every page. Restore pre-1.6.29 layout: * desktop (≥1024) = portrait (left, uncropped, ≤288px) | Meet the photographer | Fine art prints; * phones = stacked (portrait then text then prints), matching pre-1.6.29. Body ~18px; phone floor 15px * for eyebrows/buttons/footer. About + prints are flex columns so Contact / Shop prints share a baseline. */ .rainoff-closing-shared .rh-closing .rh-closing-grid { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 28px; row-gap: var(--sep-space); max-width: 1200px; margin-left: auto; margin-right: auto; text-align: left; align-items: center; justify-content: stretch; } .rainoff-closing-shared .rh-closing .rh-closing-grid .rh-portrait { grid-column: auto; margin: 0 !important; max-width: 288px; width: 100%; } .rainoff-closing-shared .rh-closing .rh-closing-grid .rh-portrait img { display: block; width: 100%; height: auto !important; max-width: 100%; object-fit: contain !important; aspect-ratio: auto !important; } .rainoff-closing-shared .rh-closing .rh-closing-about, .rainoff-closing-shared .rh-closing .rh-closing-prints { display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0 !important; border: 0 !important; max-width: none; min-width: 0; align-self: stretch; } .rainoff-closing-shared .rh-closing .rh-closing-prints::before { position: static !important; display: block; width: var(--sep-width) !important; max-width: 100%; height: 0 !important; margin: 0 auto var(--sep-space) !important; border: 0 !important; border-top: var(--sep-thick) solid var(--sep-color) !important; transform: none !important; } .rainoff-closing-shared .rh-closing h2 { text-align: inherit; margin: 0 0 12px; font-size: clamp(27.2px, 19.2px + 1.8vw, 40px); } .rainoff-closing-shared .rh-closing .rh-eyebrow { text-align: inherit; margin-left: 0; margin-right: 0; } .rainoff-closing-shared .rh-closing p:not(.rh-eyebrow):not(.rh-prints-note) { max-width: none !important; text-align: justify !important; hyphens: auto; -webkit-hyphens: auto; font-size: 18px !important; line-height: 1.6 !important; } .rainoff-closing-shared .rh-closing .rh-prints-note { text-align: inherit !important; } .rainoff-closing-shared .rh-closing .rh-btn-row { justify-content: flex-start !important; margin-top: auto !important; } @media (max-width: 479.98px) { .rainoff-closing-shared .rh-closing .rh-eyebrow, .rainoff-closing-shared .rh-closing .rh-btn, .rainoff-closing-shared .rh-closing .rh-prints-note { font-size: 15px !important; } #site-footer, #site-footer p, #site-footer a, #site-footer li, #site-footer span { font-size: 15px !important; } } @media (min-width: 1024px) { .rainoff-closing-shared .rh-closing .rh-wrap.rh-closing-grid { grid-template-columns: minmax(0, 288px) minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 0; align-items: stretch; padding-left: 40px !important; padding-right: 40px !important; box-sizing: border-box; } .rainoff-closing-shared .rh-closing .rh-closing-grid .rh-portrait { margin: 0 !important; align-self: center; } .rainoff-closing-shared .rh-closing .rh-closing-prints { position: relative; padding: 0 0 0 40px !important; } .rainoff-closing-shared .rh-closing .rh-closing-prints::before { position: absolute !important; left: 0 !important; top: 50% !important; width: 0 !important; height: var(--sep-width) !important; margin: 0 !important; border: 0 !important; border-left: var(--sep-thick) solid var(--sep-color) !important; transform: translateY(-50%) !important; } } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-dec { color: inherit !important; font-weight: 600; } html[data-theme="a"] :is(.rainoff-mission-page, .rainoff-conservation-page) { --sep-color: #8A6A2F; } html[data-theme="a"] :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx :is(.rmx-big, .rmx-half-count, .rmx-change) { color: #8A6A2F !important; } /* 1.6.30 (Branding conservation spec 2026-10-12, Adam's standing OK): Conservation (page 34) uses the Mission .rmx system. * Every Mission rule above is scoped :is(.rainoff-mission-page, .rainoff-conservation-page); the old .post-34 rules are retired. * Here: hide the theme title/featured image (the wren is the in-content 4:3 top photo), three-up stat card, * gold IUCN squares + legend, live bar cards, light-mode gold #8A6A2F. */ .rainoff-conservation-page #site-content .featured-media { display: none !important; } .rainoff-conservation-page .post-inner.section-inner.mw-thin { max-width: 1200px; } #site-content .rmx .rmx-stats .rmx-card { text-align: center; align-items: center; } #site-content .rmx .rmx-stats .rmx-num { color: var(--accent); font-variant-numeric: lining-nums tabular-nums; } #site-content .rmx .rmx-stats .rmx-num.rmx-neutral { color: var(--text) !important; } #site-content .rmx .rmx-stats .rmx-lab { margin-top: 8px; } #site-content .rmx .rmx-stats + .rmx-col { margin-top: 0 !important; } #site-content .rmx .rmx-col > p.rmx-foot.rmx-under { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; } #site-content .rmx .rmx-card.rmx-live { margin-top: 24px; } #site-content .rmx .rmx-card.rmx-live .rmx-row { margin-top: 12px; } #site-content .rmx .rmx-card.rmx-live .rmx-row:first-of-type { margin-top: 0; } #site-content .rmx .rmx-card.rmx-live .rmx-bar { margin-top: 6px; } #site-content .rmx .rmx-card.rmx-live .rmx-foot { margin-top: 16px; } #site-content .rmx .rmx-card.rmx-live .rmx-sub { margin: 0 0 14px; } #site-content .rmx .rmx-waffle svg { display: block; width: 100%; height: auto; max-width: 732px; margin: 0 auto; } #site-content .rmx .rmx-waffle rect[fill="#ffffff"] { fill: var(--accent); } #site-content .rmx .rmx-waffle rect[fill="#cfcfcf"] { fill: color-mix(in srgb, var(--accent) 65%, var(--surface)); } #site-content .rmx .rmx-waffle rect[fill="#8f8f8f"] { fill: color-mix(in srgb, var(--accent) 35%, var(--surface)); } #site-content .rmx .rmx-waffle rect[fill="#3d3d3d"] { fill: var(--line); } #site-content .rmx .rmx-waffle rect[fill="none"] { stroke: var(--muted); } #site-content .rmx .rmx-waffle .rm-legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 16px 0 0; padding: 0; } #site-content .rmx .rmx-waffle .rm-legend li { margin: 0; font-size: 16px; line-height: 1.4; color: var(--text); } #site-content .rmx .rmx-waffle .rm-sw { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; border-radius: 2px; } #site-content .rmx .rmx-waffle .rm-sw[style*="#ffffff"] { background: var(--accent) !important; } #site-content .rmx .rmx-waffle .rm-sw[style*="#cfcfcf"] { background: color-mix(in srgb, var(--accent) 65%, var(--surface)) !important; } #site-content .rmx .rmx-waffle .rm-sw[style*="#8f8f8f"] { background: color-mix(in srgb, var(--accent) 35%, var(--surface)) !important; } #site-content .rmx .rmx-waffle .rm-sw[style*="#3d3d3d"] { background: var(--line) !important; } #site-content .rmx .rmx-waffle .rm-sw[style*="none"] { border-color: var(--muted) !important; } #site-content .rmx .rmx-waffle .rf-iucn { margin: 14px 0 0; text-align: center; } html[data-theme="a"] .rainoff-conservation-page #site-content .rmx :is(.rmx-stats .rmx-num:not(.rmx-neutral)) { color: #8A6A2F !important; } html[data-theme="a"] .rainoff-conservation-page #site-content .rmx .rmx-waffle rect[fill="#ffffff"] { fill: #8A6A2F; } html[data-theme="a"] .rainoff-conservation-page #site-content .rmx .rmx-waffle .rm-sw[style*="#ffffff"] { background: #8A6A2F !important; } @media (max-width: 600px) { #site-content .rmx .rmx-waffle .rm-legend li, #site-content .rmx .rmx-col > p.rmx-foot.rmx-under, #site-content .rmx .rmx-waffle .rf-iucn { font-size: 15px; } #site-content .rmx .rmx-stats .rmx-num { font-size: 44px; } } /* 1.6.30: Conservation top photo is 855px wide (4:3 crop of the 960x641 original): shown at natural size, never upscaled. */ .rainoff-conservation-page #site-content .rmx figure.rmx-photo.rmx-top { max-width: 960px !important; margin-left: auto !important; margin-right: auto !important; } .rainoff-conservation-page #site-content .rmx .rh-fieldcards.rmx-stats .fc-num:not(.rmx-neutral) { color: var(--accent); } html[data-theme="a"] .rainoff-conservation-page #site-content .rmx .rh-fieldcards.rmx-stats .fc-num:not(.rmx-neutral) { color: #8A6A2F; } /* 1.6.34: Mission "Partners and publications" logo row (end of In the field). Official logos only, never cropped. * Each logo is an whose background is the theme text colour masked by the logo file, so it is monochrome in * var(--text) (dark in light mode, white in dark mode); the inside keeps the alt text and the size, invisible. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-partners { margin: 28px 0 0; padding: 0; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-partners .rmx-eyebrow { text-align: center; margin: 0 0 14px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 24px; margin: 0; padding: 0; list-style: none; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-logos li { margin: 0; padding: 0; line-height: 0; max-width: 100%; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx a.rmx-logo { display: inline-block; line-height: 0; max-width: 100%; text-decoration: none; border: 0; padding: 0; margin: 0; background-color: var(--text); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx a.rmx-logo img { display: block; height: 32px !important; width: auto !important; max-width: 100% !important; opacity: 0; margin: 0 !important; border: 0; box-shadow: none; aspect-ratio: auto; } /* 1.6.69 (Branding): partner logos visible in dark mode */ html[data-theme="b"] :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx a.rmx-logo img { filter: brightness(0) invert(1); } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx a.rmx-logo:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx a.rmx-logo:hover { opacity: .75; } @media (min-width: 700px) { :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-partners { margin-top: 40px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-logos { gap: 24px 36px; } :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx a.rmx-logo img { height: 40px !important; } } /* 1.6.55: long decreasing-stat label sitewide */ @media (max-width: 419.98px) { #site-content .rmx .rmx-lab { letter-spacing: .12em; font-size: 11px; line-height: 1.45; text-wrap: balance; } #site-content .rmx .rmx-row span { text-wrap: balance; } .rt-head span:first-child { text-wrap: balance; } } /* 1.6.56: Total combined views label length at phone width */ @media (max-width: 419.98px) { .rh-fieldcards .fc-lab { letter-spacing: .1em; font-size: 10.5px; line-height: 1.45; text-wrap: balance; } #site-content .rm-views-lab { letter-spacing: .1em; font-size: 11px; text-wrap: balance; } } /* 1.6.57: longer Fine art prints copy — keep Contact / Shop prints on one baseline at ≥1024 */ @media (min-width: 1024px) { .rainoff-closing-shared .rh-closing .rh-closing-about, .rainoff-closing-shared .rh-closing .rh-closing-prints { height: 100%; min-height: 100%; } .rainoff-closing-shared .rh-closing .rh-closing-about > .rh-btn-row, .rainoff-closing-shared .rh-closing .rh-closing-prints > .rh-btn-row { margin-top: auto !important; } } /* 1.6.68: section opening with a standalone quote (no photo above) — section::before already separates; don't double. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-quote:first-child::before { content: none !important; display: none !important; } /* 1.6.68: quote then a button-only column (Teaching CTA) — no extra gold rule. */ :is(.rainoff-mission-page, .rainoff-conservation-page) #site-content .rmx .rmx-sec > .rmx-quote + .rmx-col:has(> p.rmx-btns:only-child)::before { content: none !important; display: none !important; } /* 1.6.63: Mission platform cards — logo link (no name heading); Reach → gold sep → grid */ .rainoff-mission-page #site-content .rmx .rmx-plat-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px; margin: 0 0 8px; width: 100%; } .rainoff-mission-page #site-content .rmx .rmx-reach { margin-bottom: 0 !important; } .rainoff-mission-page #site-content .rmx hr.rainoff-sep { margin-top: var(--sep-space); margin-bottom: var(--sep-space); } .rainoff-mission-page #site-content .rmx .rmx-plat-card { display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; flex: 1 1 100%; max-width: 100%; min-width: 0; padding: 24px 22px 22px; margin: 0; text-align: left; overflow: hidden; } .rainoff-mission-page #site-content .rmx .rmx-plat-logo-box { display: flex; align-items: center; justify-content: center; box-sizing: border-box; height: 40px; max-width: 160px; width: 100%; margin: 0 auto 14px; padding: 0; background: none; border: 0; overflow: hidden; } .rainoff-mission-page #site-content .rmx .rmx-plat-logo-box img.rmx-plat-logo { /* beat global img height:auto !important (style.css ~line 13/311) */ height: 30px !important; max-height: 30px !important; max-width: 160px !important; width: auto !important; } .rainoff-mission-page #site-content .rmx .rmx-plat-logo-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; color: inherit; } .rainoff-mission-page #site-content .rmx .rmx-plat-logo-link:hover .rmx-plat-logo, .rainoff-mission-page #site-content .rmx .rmx-plat-logo-link:focus-visible .rmx-plat-logo { opacity: 0.88; } .rainoff-mission-page #site-content .rmx .rmx-plat-logo { display: block !important; height: 30px !important; width: auto !important; max-width: 160px !important; max-height: 30px !important; object-fit: contain !important; object-position: center !important; } html[data-theme="b"] .rainoff-mission-page #site-content .rmx .rmx-plat-logo--invert { filter: brightness(0) invert(1); } .rainoff-mission-page #site-content .rmx .rmx-plat-logo--dark { display: none !important; } html[data-theme="b"] .rainoff-mission-page #site-content .rmx .rmx-plat-logo--light { display: none !important; } html[data-theme="b"] .rainoff-mission-page #site-content .rmx .rmx-plat-logo--dark { display: block !important; } .rainoff-mission-page #site-content .rmx .rmx-plat-txt { margin: 0 !important; flex: 1 1 auto; max-width: none !important; text-align: justify !important; hyphens: auto; -webkit-hyphens: auto; font-size: 16px !important; line-height: 1.55 !important; } @media (min-width: 900px) { .rainoff-mission-page #site-content .rmx .rmx-plat-card { flex: 0 1 calc((100% - 32px) / 3); max-width: calc((100% - 32px) / 3); padding: 28px 24px 24px; } } @media (max-width: 479.98px) { .rainoff-mission-page #site-content .rmx .rmx-plat-txt { font-size: 16px !important; } } /* 1.6.70 (Branding): Conservation story/place cards — 3-up, Mission rhythm */ .rainoff-conservation-page #site-content .rmx .rmx-story-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 28px 0 0; padding: 0; align-items: stretch; } .rainoff-conservation-page #site-content .rmx .rmx-story-card { display: flex; flex-direction: column; margin: 0; padding: 0 0 22px; overflow: hidden; text-align: left; } .rainoff-conservation-page #site-content .rmx .rmx-story-card figure.rmx-photo { margin: 0 !important; max-width: none; } .rainoff-conservation-page #site-content .rmx .rmx-story-card figure.rmx-photo img { width: 100% !important; max-width: none !important; height: auto !important; display: block; } .rainoff-conservation-page #site-content .rmx .rmx-story-card h3 { margin: 16px 20px 6px !important; font-family: var(--rainoff-head); font-weight: 400; font-size: 22px; line-height: 1.25; text-align: left !important; max-width: none !important; } .rainoff-conservation-page #site-content .rmx .rmx-story-card .rmx-status { margin: 0 20px 10px !important; font-size: 14px; line-height: 1.45; color: var(--muted); text-align: left !important; } .rainoff-conservation-page #site-content .rmx .rmx-story-card > p:not(.rmx-status) { margin: 0 20px !important; flex: 1 1 auto; text-align: justify !important; font-size: 16px; line-height: 1.55; hyphens: auto; -webkit-hyphens: auto; } @media (max-width: 899.98px) { .rainoff-conservation-page #site-content .rmx .rmx-story-cards { grid-template-columns: 1fr; gap: 16px; } .rainoff-conservation-page #site-content .rmx .rmx-story-card > p:not(.rmx-status) { font-size: 18px !important; line-height: 1.6; } .rainoff-conservation-page #site-content .rmx .rmx-story-card .rmx-status { font-size: 15px; } } /* Closing photo+quote after last section: one separator, tight under image */ .rainoff-conservation-page #site-content .rmx > .rmx-col:has(> figure.rmx-photo):not(:has(h1)):not(:has(h2)) { margin-top: 0; } .rainoff-conservation-page #site-content .rmx > .rmx-sec + .rmx-col:has(> figure.rmx-photo)::before { content: ""; display: block; box-sizing: content-box; width: var(--sep-width); max-width: 100%; height: 0; margin: var(--sep-space) auto; padding: 0; border: 0; border-top: var(--sep-thick) solid var(--sep-color); } /* 1.6.71 (Branding): Conservation text-only partner cards (no photo) */ .rainoff-conservation-page #site-content .rmx .rmx-story-card--text { padding: 24px 0 22px; } .rainoff-conservation-page #site-content .rmx .rmx-story-card--text h3 { margin-top: 0 !important; } .rainoff-conservation-page #site-content .rmx .rmx-story-card--text h3 a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; } .rainoff-conservation-page #site-content .rmx .rmx-story-card--text h3 a:hover { opacity: 0.8; } /* 1.6.73 (Branding): Conservation photos uncropped — native aspect, 960 wide, contain never cover, no letterbox */ .rainoff-conservation-page #site-content .rmx .rmx-story-card figure.rmx-photo { margin: 0 !important; line-height: 0; background: none; aspect-ratio: auto; } .rainoff-conservation-page #site-content .rmx .rmx-story-card figure.rmx-photo img { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center top !important; aspect-ratio: auto !important; display: block; } .rainoff-conservation-page #site-content .rmx figure.rmx-photo img { object-fit: contain !important; object-position: center top !important; height: auto !important; max-height: none !important; aspect-ratio: auto !important; } /* 1.6.75: language switcher (flag + name). Desktop: in the header bar after the menu. Phone: last rows of the Menu drop-down. */ .rl-switch { display: flex; align-items: center; gap: 4px 14px; font-family: var(--rainoff-body, inherit); } .rl-switch .rl-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, var(--text)); text-decoration: none; white-space: nowrap; line-height: 1.2; padding: 4px 0; } .rl-switch .rl-lang:hover, .rl-switch .rl-lang:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .rl-switch .rl-lang.is-current { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .rl-switch .rl-flag { font-size: 16px; line-height: 1; letter-spacing: 0; text-transform: none; } .rl-switch-header { margin-left: 22px; flex: 0 0 auto; order: 2; } /* 1.6.83: after the menu items on desktop */ .rainoff-site-nav li.rl-lang-item { display: none; } @media (max-width: 879.98px) { .rl-switch-header { display: none; } .rainoff-site-nav li.rl-lang-item { display: block; } .rainoff-js .rainoff-site-nav .rl-switch-menu { display: flex; flex-wrap: wrap; gap: 0 22px; padding-top: 6px; } .rainoff-js .rainoff-site-nav .rl-switch-menu .rl-lang { display: inline-flex; padding: 12.8px 0; font-size: 15px; border-bottom: 0; } .rainoff-js .rainoff-site-nav .rl-switch-menu .rl-flag { font-size: 18px; } } html:not(.rainoff-js) .rl-switch-header { display: flex; } /* 1.6.84 (Adam via Branding): smaller buttons on /stories/ and /es/stories/ on phones only; black text >= 15px, * ~40px tall tap targets (less padding, same hit area). Desktop unchanged. */ @media (max-width: 600px) { :root body.category-stories:not(#rs-none) :is(.rs-read, .rs-load-more, .rs-cue, .rs-more button, .rs-more a.button) { /* :not(#id) outranks the global button rule */ min-height: 40px !important; max-width: 100%; white-space: normal; text-align: center; padding: 8px 18px !important; font-size: 15px !important; letter-spacing: .02em !important; color: #1A1A1A !important; } } /* 1.6.85 (Adam): smaller country/place bubbles on the Stories map on phones (stacked by stories.js, no overlap or clipping). */ @media (max-width: 600px) { #rs-map .rs-g { padding: 3px 8px 3px 3px; font-size: 12.5px; min-height: 0; gap: 5px; } #rs-map .rs-g.rs-g-l { padding: 3px 3px 3px 8px; } #rs-map .rs-g-count { min-width: 20px; height: 20px; padding: 0 4px; font-size: 11.5px; } } /* 1.6.86: the thin "equator" seam was the tile-edge fringe on 2x screens (scaled tiles blend their edge row with the * dark map background). Painting each tile's box in the OSM ocean colour (inverted by the same filter) closes it. */ #rs-map .rs-tiles img.leaflet-tile, .rainoff-minimap .rs-tiles img.leaflet-tile { background: #aad3df; } /* 1.6.86: compact map bubbles (count only) when full names cannot meet the placement rule; name stays in title/aria-label. */ #rs-map.rs-compact .rs-g-name { display: none; } #rs-map.rs-compact .rs-g { padding: 2px; gap: 0; } /* 1.6.87 (Branding): taller phone map (up to 4:5) so full-name bubbles fit; per-bubble count-only fallback. */ @media (max-width: 640px) { .rs-map { height: min(max(125vw, 470px), 560px); } } #rs-map .rs-cmp .rs-g-name { display: none; } #rs-map .rs-cmp .rs-g { padding: 2px; gap: 0; } @media (max-width: 640px) { #rs-map .leaflet-control-attribution { font-size: 11px; line-height: 1.35; padding: 0 5px; white-space: nowrap; } } /* 1.6.88: bubbles stay hidden until their layout (precomputed or from the Web Worker) is applied. */ #rs-map.rs-pending .rs-group { visibility: hidden; }