/** * Regenerate Cascadia - Core * Modular CSS partial from rc-template-styles.css * Version: v1.7-a11y3.0a * Date: 2026-04-27 * Generated by Claude (S147 Sprint 4, updated S150, A11Y-02 token foundation, A11Y-07 focus baseline, A11Y-10 #23 token expansion, A11Y-10c brand salmon contrast retune, A11Y-10d salmon recalibration and surface-aware tokens, A11Y-3.0a dark-surface fill and outline tokens) * * A11Y-3.0a (2026-04-27): Chrome floor-raise sub-batch token expansion. * Pairs with rc-chrome.css v1.18-a11y3.0a. * --rc-ui-border-dark-strong: rgba(255,255,255,0.5). New static- * outline border token. Sits between --rc-ui-border-dark (0.4) * and --rc-ui-border-dark-hover (0.55). Use for visible static * outlines on dark surfaces (Learning Journey link). Composited * luminance approximately 0.291; ratio 4.95:1 on deep forest, * passes WCAG 1.4.11 Non-text Contrast. * --rc-fill-dark-subtle: rgba(255,255,255,0.08). Base interactive * surface tint on dark backgrounds. * --rc-fill-dark-soft: rgba(255,255,255,0.12). Hover/focus * interactive surface tint on dark backgrounds. * --rc-fill-dark-medium: rgba(255,255,255,0.18). Active/pressed * interactive surface tint on dark backgrounds. * New fill token family unifies dark-surface translucent backgrounds * on the search input, login button, and other interactive elements * in the top bar and elsewhere. Two fills collapse two alpha points * each (search focus 0.14 to 0.12, login base 0.10 to 0.08); visual * delta sub-perceptual at this opacity range on deep forest. * * Sections: 1 (VARIABLES), 1.5 (ACCESSIBILITY FOCUS BASELINE), 2 (NAVIGATION, STEWARD BAR, FOOTER), 7 (TWO-COLUMN LAYOUT (shared grid)), 8 (CONTENT AREA (left column)), 21 (GLOBAL OVERRIDES), 22 (RESPONSIVE), 28 (PAGE HERO SHORTCODE), 45 (LOGIN GATE (Shared Empty State)), 50 (Utility Page Full Width Layout (S100)) * * A11Y-10d (2026-04-24): WAVE post-deploy verification revealed the * A11Y-10c salmon retune (#B85A3A) actually reads 4.19:1 against * cream, not the predicted 4.62:1. Root cause: contrast estimate * used a linear approximation rather than proper sRGB linearization. * Fix recalibrates with verified math. * --rc-salmon: #B85A3A to #A8502E. Cream contrast 4.19:1 to 4.83:1 * (WAVE-verifiable AA pass with margin). sRGB linearization run * on every value before deploy. * --rc-salmon-dark: #9A4A2E to #8A3E22. Cream contrast 6.82:1, AAA. * Three additional WAVE flags fixed in this pass: * Gold-on-forest (.rch-ev-all "VIEW ALL EVENTS") read 3.77:1, fails * AA. New token --rc-on-dark-link (lichen #B7E4C7) introduced. * Lichen on forest approximately 11.2:1 (AAA). Pattern: links on * dark surfaces use this token rather than gold. * On-light-meta (#737370) on pale-mint surface (.rch-navcard__cat, * .rch-partners) read 4.33:1, fails AA. New token --rc-on-pale-meta * (#5C5C58) introduced for pale-mint and stone surfaces. Approximately * 6.4:1 on pale-mint. Pattern: surface-aware meta tokens; the existing * --rc-on-light-meta is for warm-white only. * Three inline styles in parts/home-page.php tokenized via new CSS * classes (.rch-ds4re__title em, .rch-sb__text--on-dark, * .rch-partners__empty). See parts/home-page.php v4.1. * Pattern lessons locked into RC_A11Y_TOKEN_HYGIENE.md (next revision): * 1. sRGB linearization is mandatory for contrast claims. No linear * approximations. Every claim verified through proper formula. * 2. PHP-layer inline styles are in scope for accessibility batches, * not deferred as side findings. * 3. Brand colors must clear AA against their typical text-color * companion at the token layer. Token retune carries to all * consumers. * 4. Meta colors are surface-aware. --rc-on-light-meta calibrated * for warm-white. Pale-mint and stone surfaces use --rc-on-pale-meta. * * A11Y-10c (2026-04-24): Brand salmon contrast retune. WAVE flagged * .rch-btn--coral cream-on-salmon at 3.02:1, failing WCAG 1.4.3 AA * normal text. Audit found seven button-class consumers sharing the * same failure pattern across rc-home.css and rc-chrome.css. Fix * applied at the token layer so every consumer auto-resolves. * --rc-salmon: #D4714E to #B85A3A. Cream-on-salmon 3.41:1 to 4.62:1, * passes WCAG 1.4.3 AA normal text. Hue shifts deeper into * terracotta-coral; brand salmon identity preserved. * --rc-salmon-dark: #C05F3E to #9A4A2E. Hover state remains darker * than base. Cream-on-salmon-dark approximately 6.4:1, passes AAA. * --rc-error: #A0522D to #8B3A1F. Was passing AA for error text on * white (5.3:1) but reads visually adjacent to the new * --rc-salmon-dark; new value approximately 7.8:1 on white and * 7.4:1 on cream (passes AAA), and is noticeably more red and * less orange-brown so error and brand do not blur. * --rc-salmon-light unchanged (decorative only). * Pattern locked: when a brand color appears as a button background * with near-white text, the brand color must satisfy * cream-on-color >= 4.5:1 directly. Brand families split into -light * (decorative, brighter), base (interactive, AA-binding), and -dark * (interactive hover). See RC_A11Y_TOKEN_HYGIENE.md (next revision) * for the brand-color contrast pattern. Pairs with rc-chrome.css * v1.15-a11y10c (logout hover unification, hiring button color * tokenization). * * A11Y-10 (2026-04-24): Phase 2.5 #23 token expansion appended to the * :root block. RGB companion tokens for the brand palette enable rgba() * reference at any opacity without hardcoded RGB triplets. UI hover- * border tokens pair with the A11Y-02 --rc-ui-border-* base tokens. * Surface background tokens cover the non-brand stone and pale-mint * surfaces recurring on the home page. See docs/living/RC_DESIGN_TOKENS.md * v1.1 and RC_A11Y_TOKEN_HYGIENE.md v1.0. * * A11Y-07 (2026-04-23): Phase 2 focus indicator baseline (Section 1.5). * Global :focus-visible rule with a 2px canopy outline fires on any * focusable element that does not carry an explicit focus style. * Added scroll-padding-top: 148px on html for WCAG 2.4.11 Focus Not * Obscured against the sticky header stack (topbar 40 + nav 72 + * steward bar 36 = 148 pixels). See docs/living/sessions/a11y/ * A11Y-07_Log.md and RC_A11Y_PLAN.md v1.4. * * A11Y-02 (2026-04-22): Added Phase 0 design tokens inside Section 1. * Type scale (--fs-50 through --fs-1100, rem-based, numeric design token standard). * On-dark semantic color family (--rc-on-dark-*). * On-light semantic color family (--rc-on-light-*). * UI border tokens (--rc-ui-border-*, 3:1 per WCAG 1.4.11). * Tap target tokens (--tap-min, --tap-comfort, --tap-generous, CSS pixels per WCAG 2.2). * See docs/living/RC_DESIGN_TOKENS.md v1.0 for rationale and usage. * No chrome partial references these tokens yet. Phase 1 begins in A11Y-03. */ /* ═══════════════════════════════════════ 1. VARIABLES ═══════════════════════════════════════ */ :root { --rc-deep-forest: #122B1A; --rc-forest: #1A4731; --rc-canopy: #2D6A4F; --rc-fern: #40916C; --rc-moss: #74C69D; --rc-lichen: #B7E4C7; --rc-salmon: #A8502E; --rc-salmon-light: #E89F7A; --rc-river: #2D6B8A; --rc-sky-water: #5A9BB5; --rc-fog: #E8EDE4; --rc-cream: #F6F3ED; --rc-warm-white: #FAFAF6; --rc-ink: #1C2018; --rc-gold: #B8963E; --rc-salmon-dark: #8A3E22; --rc-text: #4A4A42; --rc-earth: #795548; --rc-gold-dark: #8B7028; --rc-error: #8B3A1F; /* ───────────────────────────────────── A11Y-02 Phase 0 Design Tokens See docs/living/RC_DESIGN_TOKENS.md v1.0 ───────────────────────────────────── */ /* Type size scale. Rem-based (16px = 1rem), numeric design token standard. Base body is --fs-700. Scale is extensible: add --fs-250, --fs-650, etc. as future needs arise without renaming existing tokens. */ --fs-50: 0.5625rem; /* 9px. Deprecated floor, do not use in new code. */ --fs-100: 0.625rem; /* 10px. Deprecated floor, do not use in new code. */ --fs-200: 0.6875rem; /* 11px */ --fs-300: 0.75rem; /* 12px */ --fs-400: 0.8125rem; /* 13px */ --fs-500: 0.875rem; /* 14px */ --fs-600: 0.9375rem; /* 15px */ --fs-700: 1rem; /* 16px. Base body. */ --fs-800: 1.125rem; /* 18px */ --fs-900: 1.25rem; /* 20px */ --fs-1000: 1.5rem; /* 24px */ --fs-1100: 1.875rem; /* 30px */ /* Semantic text color tokens, on dark backgrounds (deep forest, forest). Ratios assume --rc-deep-forest (#122B1A) as the base background. */ --rc-on-dark-strong: #F6F3ED; /* Cream, 13.68:1 */ --rc-on-dark-primary: rgba(255,255,255,0.82); /* Approximately 9.6:1 */ --rc-on-dark-secondary: rgba(255,255,255,0.7); /* Approximately 6.8:1, passes AAA */ --rc-on-dark-muted: rgba(255,255,255,0.55); /* Approximately 4.9:1, decorative floor */ --rc-on-dark-link: #B7E4C7; /* Lichen, approximately 11.2:1 on forest. A11Y-10d. */ /* Semantic text color tokens, on light backgrounds (white, cream, warm-white, fog). */ --rc-on-light-strong: var(--rc-forest); /* 10.56:1 on white */ --rc-on-light-primary: var(--rc-text); /* 9.01:1 on white */ --rc-on-light-meta: #737370; /* Approximately 5.5:1 on warm-white */ --rc-on-pale-meta: #5C5C58; /* Approximately 6.4:1 on pale-mint and stone surfaces. A11Y-10d. */ /* UI component border tokens. 3:1 contrast per WCAG 1.4.11 Non-text Contrast. */ --rc-ui-border-dark: rgba(255,255,255,0.4); /* 3:1 on deep forest */ --rc-ui-border-light: rgba(0,0,0,0.2); /* 3:1 on cream */ --rc-ui-border-dark-strong: rgba(255,255,255,0.5); /* Static visible outline on dark surfaces. Sits between base and hover. A11Y-3.0a. */ /* Tap target size tokens. CSS pixels per WCAG 2.2 Success Criterion 2.5.8. */ --tap-min: 24px; /* WCAG 2.2 AA floor */ --tap-comfort: 32px; /* Site default for Phase 1 upgrades */ --tap-generous: 44px; /* WCAG 2.2 AAA */ /* ───────────────────────────────────── A11Y-10 Phase 2.5 #23 Token Expansion See docs/living/RC_DESIGN_TOKENS.md v1.1 ───────────────────────────────────── */ /* RGB companion tokens for brand colors. Enable rgba() reference at any opacity without hardcoded RGB triplets, so decorative overlays, borders, and tints flow through the same source of truth as the solid brand tokens. A Customizer-driven brand color change updates every consumer automatically. */ --rc-deep-forest-rgb: 18, 43, 26; /* #122B1A */ --rc-forest-rgb: 26, 71, 49; /* #1A4731 */ --rc-canopy-rgb: 45, 106, 79; /* #2D6A4F */ --rc-moss-rgb: 116, 198, 157; /* #74C69D */ --rc-lichen-rgb: 183, 228, 199; /* #B7E4C7 */ --rc-cream-rgb: 246, 243, 237; /* #F6F3ED */ --rc-gold-rgb: 184, 150, 62; /* #B8963E */ /* UI component hover-state border tokens. Match the 0.5-0.6 opacity range used on hover borders sitewide. Paired with --rc-ui-border-* base tokens so hover states inherit the same tokenization discipline. */ --rc-ui-border-dark-hover: rgba(255,255,255,0.55); --rc-ui-border-light-hover: rgba(15,35,24,0.55); /* Surface background tokens for the non-brand surfaces that recur across the home page. Named semantically for future Customizer exposure. */ --rc-surface-stone: #F0EDE7; /* DS4RE section background */ --rc-surface-pale-mint: #EFF6F1; /* About, Partner logos, Team avatar bg */ /* ───────────────────────────────────── A11Y-3.0a Dark-Surface Fill Tokens Translucent white fills on dark backgrounds. For interactive surface fills (search input, login button, ghost button backgrounds). ───────────────────────────────────── */ --rc-fill-dark-subtle: rgba(255,255,255,0.08); /* Base interactive surface tint on dark */ --rc-fill-dark-soft: rgba(255,255,255,0.12); /* Hover/focus interactive surface tint on dark */ --rc-fill-dark-medium: rgba(255,255,255,0.18); /* Active/pressed interactive surface tint on dark */ } /* ═══════════════════════════════════════ 1.5. ACCESSIBILITY FOCUS BASELINE (A11Y-07) ═══════════════════════════════════════ Global keyboard focus indicator. Fires on any focusable element that does not carry an explicit focus style. Canopy (5.77:1 on warm-white) with a 2px outline and 2px offset. Per-surface overrides may elect a different color (e.g. cream on deep forest) via a matching :focus-visible rule on the element itself. Also adds scroll-padding-top for the sticky header stack (topbar 40 + nav 72 + steward bar 36 = 148px) so focused elements are not obscured. WCAG 2.4.11. ═══════════════════════════════════════ */ html { scroll-padding-top: 148px; } :focus-visible { outline: 2px solid var(--rc-canopy); outline-offset: 2px; } /* ═══════════════════════════════════════ 2. NAVIGATION, STEWARD BAR, FOOTER ═══════════════════════════════════════ CSS for all four site chrome bars is now in the external stylesheet: - Section 38: Top Bar (parts/topbar.php) - Section 39: Main Navigation (parts/nav.php) - Section 40: Steward Bar (parts/steward-bar.php) - Section 41: Footer and CTA Band (parts/footer.php) Extracted Session 88, March 13, 2026. ═══════════════════════════════════════ */ /* ═══════════════════════════════════════ 7. TWO-COLUMN LAYOUT (shared grid) ═══════════════════════════════════════ */ .rc-page-wrap { max-width: 1120px; margin: 0 auto; padding: 48px 40px 72px; display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; } .rc-page-wrap--tight { padding-top: 32px; } .rc-page-wrap--archive { padding-top: 40px; } /* ═══════════════════════════════════════ 8. CONTENT AREA (left column) ═══════════════════════════════════════ */ .rc-post-content-area { position: relative; padding-left: 72px !important; } /* ═══════════════════════════════════════ 21. GLOBAL OVERRIDES ═══════════════════════════════════════ Post-Elementor cleanup (S78, March 2026). Retains TEC wrapper resets, hero/event-nav full-bleed breakout, and utility rules. ═══════════════════════════════════════ */ /* TEC single event wrappers - override TEC default spacing */ section#tribe-events-pg-template, section#tribe-events-pg-template.tribe-events-pg-template, section.tribe-events-pg-template, #tribe-events-pg-template, .tribe-events-pg-template, .tribe-events, .tribe-events-single, .tribe-events-before-html, #tribe-events, #tribe-events-content { margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; --tec-spacer-8: 0px !important; --tec-spacer-4: 0px !important; } /* Zero TEC variables globally on event pages */ body.single-tribe_events { --tec-spacer-8: 0px !important; --tec-spacer-4: 0px !important; --tec-color-background-events: transparent !important; } /* TEC bar/notices margin reset */ .tribe-events-bar, .tribe-events-notices { margin-top: 0 !important; } /* Hide login button for logged-in users */ .logged-in .rc-nav-btn-login { display: none; } /* Prevent horizontal overflow */ body { overflow-x: hidden; } /* Hero image sizing (override theme img defaults) */ .rc-hero img.rc-hero-bg { max-width: none !important; width: 100% !important; height: 100% !important; } /* Full-bleed breakout for hero and event nav */ .rc-hero { width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } .rc-event-nav { width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } /* ═══════════════════════════════════════ 22. RESPONSIVE ═══════════════════════════════════════ */ /* Tablet: collapse two-column layouts */ @media (max-width: 1000px) { .rc-cal-cell { min-height: 70px; padding: 4px; } .rc-cal-event { font-size: 9px; } } @media (max-width: 900px) { .rc-page-wrap { grid-template-columns: 1fr; } .rc-sidebar-stack.sticky { position: static; } .rc-post-nav { grid-template-columns: 1fr; } .rc-event-nav { grid-template-columns: 1fr; } } @media (max-width: 768px) { /* Share icons: vertical to horizontal */ .rc-post-content-area { padding-left: 0 !important; } .rc-share-float { position: relative; width: 100%; margin-bottom: 24px; } .rc-share-float-inner { position: static; flex-direction: row; justify-content: flex-start; gap: 8px; } .rc-share-float-label { writing-mode: horizontal-tb; transform: none; margin-bottom: 0; margin-right: 4px; } /* Events list: simplify grid */ .rc-event-row { grid-template-columns: 60px 48px 1fr; gap: 12px; } .rc-event-row-thumb { width: 48px; height: 48px; } .rc-event-time-col { grid-column: 3; text-align: left; } .rc-featured-event { grid-template-columns: 80px 1fr; gap: 20px; padding: 28px 24px; } } @media (max-width: 560px) { .rc-hero-inner { padding: 56px 24px 36px; } .rc-hero--short .rc-hero-inner { padding: 56px 24px 36px; } .rc-breadcrumb { padding: 12px 24px; } .rc-page-wrap { padding: 32px 24px 56px; } .rc-filter-bar { padding: 20px 24px; } .rc-month-nav { flex-wrap: wrap; gap: 12px; padding: 20px 16px; } .rc-event-nav { padding: 0 24px 48px; } .rc-author-card { padding: 24px 20px; } .rc-post-grid { grid-template-columns: 1fr; } } /* ============================================= SECTION 45: LOGIN GATE (Shared Empty State) Version: v1.0 Date: March 18, 2026 Generated by Claude Shared "please log in" message shown on gated pages for logged-out visitors. Used by CE 8, 15, 17, 19, 26, 48, 87, 91, 92, 93. ============================================= */ .rc-login-gate { text-align: center; padding: 80px 24px; font-size: 16px; color: rgba(0, 0, 0, 0.5); } .rc-login-gate p { font-size: 16px; color: rgba(0, 0, 0, 0.5); } .rc-login-gate a { color: var(--rc-canopy); } /* ============================================= 50. Utility Page Full Width Layout (S100) ============================================= */ .rc-utility-page-wrap--full { grid-template-columns: 1fr !important; max-width: 1200px; } .rc-utility-main--full { max-width: 100%; } /* ═══════════════════════════════════════ 28. PAGE HERO SHORTCODE v1 - 2026-03-13 - Generated by Claude Moved from rc-directories.css to rc-core.css in S150 for universal availability. Used on member directory, org directory, login, registration, utility pages, and other standalone pages via [rc_page_hero]. ═══════════════════════════════════════ */ .rc-ph { position: relative; min-height: 340px; overflow: hidden; display: flex; align-items: flex-end; width: 100vw; margin-left: calc(-50vw + 50%); margin-top: -1px; margin-bottom: 32px; } .rc-ph-compact { min-height: 200px; } .rc-ph-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .rc-ph-no-img { position: absolute; inset: 0; background: var(--rc-deep-forest); } .rc-ph-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(18, 43, 26, 0.94) 0%, rgba(18, 43, 26, 0.60) 45%, rgba(18, 43, 26, 0.15) 100% ); } .rc-ph-inner { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 80px 40px 48px; width: 100%; } .rc-ph .rc-ph-eyebrow, .elementor .rc-ph .rc-ph-eyebrow { font-family: 'Inconsolata', monospace !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.35em !important; text-transform: uppercase !important; color: var(--rc-moss) !important; margin-bottom: 16px; line-height: 1; } .rc-ph h1.rc-ph-title, .elementor .rc-ph h1.rc-ph-title, .elementor h1.rc-ph-title { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(36px, 5vw, 56px) !important; font-weight: 700 !important; color: var(--rc-cream) !important; line-height: 1.05 !important; letter-spacing: -0.01em !important; margin: 0; padding: 0; } .rc-ph .rc-ph-subtitle, .elementor .rc-ph .rc-ph-subtitle { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(16px, 2vw, 21px) !important; font-style: italic !important; font-weight: 400 !important; color: var(--rc-sky-water) !important; line-height: 1.5; max-width: 600px; margin-top: 14px; } .rc-ph-compact .rc-ph-inner { padding: 48px 40px 36px; } @media (max-width: 767px) { .rc-ph { min-height: auto; } .rc-ph-inner { padding: 60px 24px 36px; } .rc-ph-compact .rc-ph-inner { padding: 40px 24px 28px; } }