/* ============================================================
Red Shed 2026 — brand zone system
One theme, three visual systems. Semantic tokens default to
Red Shed; .zone-rsx and .zone-easy-oar re-map them.
Apply a zone class to any Group block via "Additional CSS class".
============================================================ */
:root {
--zone-bg: var(--wp--preset--color--rs-beige);
--zone-bg-strong: var(--wp--preset--color--rs-teal);
--zone-ink: var(--wp--preset--color--rs-teal);
--zone-ink-on-strong: var(--wp--preset--color--rs-beige);
--zone-accent: var(--wp--preset--color--rs-red);
--zone-heading-font: var(--wp--preset--font-family--heading);
--zone-body-font: var(--wp--preset--font-family--body);
}
/* --- RSX Strength Club zone ------------------------------- */
.zone-rsx {
--zone-bg: var(--wp--preset--color--rsx-navy);
--zone-bg-strong: var(--wp--preset--color--rsx-navy);
--zone-ink: var(--wp--preset--color--rsx-cream);
--zone-ink-on-strong: var(--wp--preset--color--rsx-cream);
--zone-accent: var(--wp--preset--color--rsx-red);
--zone-heading-font: var(--wp--preset--font-family--dwight);
}
/* --- Easy Oar zone (blue-primary per Monique, 19 Jul) ------- */
.zone-easy-oar {
--zone-bg: var(--wp--preset--color--eo-water);
--zone-bg-strong: var(--wp--preset--color--eo-deepwater);
--zone-ink: var(--wp--preset--color--eo-milk);
--zone-ink-on-strong: var(--wp--preset--color--eo-milk);
--zone-accent: var(--wp--preset--color--eo-deepwater);
--zone-heading-font: var(--wp--preset--font-family--pressura);
--zone-body-font: var(--wp--preset--font-family--pressura);
}
/* Easy Oar supporting type: Art Company Mono for captions and
small details, GT Pressura Mono available via .easy-oar-mono
(per Easy Oar style guide 4238). */
.zone-easy-oar figcaption,
.zone-easy-oar cite,
.easy-oar-caption {
font-family: var(--wp--preset--font-family--artmono);
font-weight: 300;
}
.easy-oar-mono {
font-family: var(--wp--preset--font-family--pressura-mono);
font-weight: 300;
}
/* Header: show the wordmark logo when set, fall back to text
site title when no logo has been uploaded. */
.wp-block-site-logo + .wp-block-site-title.header-title-fallback {
display: none;
}
/* --- Zone plumbing ----------------------------------------- */
.zone-rsx,
.zone-easy-oar,
.zone-panel {
background-color: var(--zone-bg);
color: var(--zone-ink);
font-family: var(--zone-body-font);
}
.zone-rsx h1, .zone-rsx h2, .zone-rsx h3, .zone-rsx h4,
.zone-easy-oar h1, .zone-easy-oar h2, .zone-easy-oar h3, .zone-easy-oar h4 {
font-family: var(--zone-heading-font);
color: var(--zone-ink);
}
.zone-rsx a, .zone-easy-oar a {
color: var(--zone-ink);
}
.zone-rsx a:hover, .zone-easy-oar a:hover {
color: var(--zone-accent);
}
.zone-rsx .wp-block-button__link,
.zone-easy-oar .wp-block-button__link {
background-color: var(--zone-accent);
color: #fff;
}
/* --- Campaign device: double pennant arrows -----------------
Geometry extracted from the brand artwork (Golden Oar snapshot
sign-off, vector paths): each arrow is an elongated
right-pointing triangle, 24.785 x 6.797 units (ratio 3.646:1),
arrows butted at 24.945-unit spacing. Two-arrow device here;
assets/img/pennant-arrows*.svg carry the four-arrow sign-off. */
.pennant::before {
content: "";
display: inline-block;
width: 2.6em;
aspect-ratio: 49.73 / 6.797;
margin-right: 0.45em;
background-color: var(--zone-accent, #EF4343);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
vertical-align: middle;
transform: translateY(-0.08em);
}
/* Four-arrow sign-off device (campaign lockup, sits above a heading) */
.pennant-signoff {
display: block;
width: min(220px, 40vw);
aspect-ratio: 99.62 / 6.797;
margin: 0 auto 0.75em;
background-color: var(--zone-accent, #EF4343);
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
.pennant-signoff--white { background-color: #FFFFFF; }
/* --- Stencilled display type over photography --------------- */
.display-over-photo {
text-transform: uppercase;
letter-spacing: 0.04em;
color: #fff;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* --- Legibility over photography ---------------------------- */
.wp-block-cover .pennant,
.wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3,
.wp-block-cover p {
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}
.wp-block-cover a:not(.wp-block-button__link) {
color: #fff;
text-decoration-color: rgba(255, 255, 255, 0.6);
text-shadow: inherit;
}
.wp-block-cover a:not(.wp-block-button__link):hover {
color: #fff;
text-decoration-color: #fff;
}
/* Red Shed Events lockup (no standalone logo; wordmark + EVENTS) */
.events-lockup {
display: block;
margin: 0 auto;
width: min(340px, 70vw);
height: auto;
}
.events-sub {
display: block;
width: min(340px, 70vw);
margin: 0.1em auto 0.9em;
font-family: var(--wp--preset--font-family--pressura);
font-weight: 500;
letter-spacing: 0.58em;
text-indent: 0.58em;
text-transform: uppercase;
text-align: center;
color: #fff;
font-size: 1.35rem;
line-height: 1;
}
/* Mission statement: keep the full mission on a single line,
scaling down before it wraps (wraps only on small phones). */
.mission-line {
white-space: nowrap;
font-size: clamp(0.95rem, 2.1vw, 1.5rem);
letter-spacing: 0.01em;
}
@media (max-width: 600px) {
.mission-line { white-space: normal; font-size: 1.1rem; }
}
/* --- Four doors: editorial cards (full-colour photos, no washes) */
.door .door-heading {
font-size: var(--wp--preset--font-size--large);
margin-bottom: 0.5em;
}
/* All four doors share the Red Shed treatment (Monique, 20 Jul):
Carplates heading, teal ink, red arrows — same as Row. */
.door .door-heading, .door .door-link a { color: var(--wp--preset--color--rs-teal); }
.door-photo { display: block; }
.door-photo img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.door-copy { margin-top: 0.75em; }
.door-link a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Hero subline: quiet, sentence case, two lines max on desktop */
.hero-subline {
color: #fff;
max-width: 42ch;
margin-left: auto;
margin-right: auto;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
/* Thin editorial arrow link (live-site register) */
.thin-link a {
color: var(--wp--preset--color--rs-red);
text-decoration: none;
letter-spacing: 0.02em;
}
.thin-link a:hover { text-decoration: underline; }
/* Navigation dropdowns: beige panel, teal items, red hover */
.wp-block-navigation .wp-block-navigation__submenu-container {
background-color: var(--wp--preset--color--rs-beige) !important;
border: none;
padding: 0.25rem 0;
min-width: 240px;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
color: var(--wp--preset--color--rs-teal) !important;
padding: 0.5rem 1rem;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--rs-red) !important;
}
/* Links inside dark teal bands (pass strip small print, etc.):
white and underlined so they read on the teal. */
.has-rs-teal-background-color a:not(.wp-block-button__link) {
color: #fff;
text-decoration: underline;
}
.has-rs-teal-background-color a:not(.wp-block-button__link):hover {
color: var(--wp--preset--color--rs-red);
}
/* Header nav: tighter so seven items + pass button hold one line */
.wp-block-navigation .wp-block-navigation__container {
gap: 1.1rem;
}
/* --- Persistent pass button in the header ------------------- */
.pass-button .wp-block-button__link {
background-color: var(--wp--preset--color--rs-red);
color: #fff;
white-space: nowrap;
}