background is set via data-background="#8D0204" * in index.html (processed by scripts.js as an inline style). * This rule sets the .newsletter-box inner element, which has its own * background: #94ffc4 in style.css and would otherwise remain mint. */ .street-angels-home .newsletter-box { background: var(--sa-primary); } /* ── Text readability on red background ── */ .street-angels-home .newsletter-box .form .titles h6, .street-angels-home .newsletter-box .form .titles h2 { color: var(--sa-white); } /* Supporting text at reduced opacity, still ≥4.5:1 against red */ .street-angels-home .newsletter-box .form small { color: rgba(255, 255, 255, 0.88); } /* Privacy link: accent yellow on red — WCAG ≈7.5:1 */ .street-angels-home .newsletter-box .form small a { color: var(--sa-accent); text-decoration: underline; } .street-angels-home .newsletter-box .form small a:hover, .street-angels-home .newsletter-box .form small a:focus-visible { color: var(--sa-accent-hover); text-decoration: underline; } /* Email input container: warm white surface */ .street-angels-home .newsletter-box .form .inner { background: var(--sa-surface); } /* Email field text remains dark */ .street-angels-home .newsletter-box .form input[type="email"] { color: var(--sa-ink); } /* Submit button — yellow with dark text (overrides more-specific style.css rule) */ .street-angels-home .newsletter-box .form input[type="submit"] { background: var(--sa-accent); color: var(--sa-ink); } .street-angels-home .newsletter-box .form input[type="submit"]:hover { background: var(--sa-accent-hover); color: var(--sa-ink); } /* ── 17. BLOG POST (not on index.html; scoped harmless) ──────────────── */ .street-angels-home .blog-post .content-box small { background: var(--sa-accent); color: var(--sa-ink); } .street-angels-home .blog-post .content-box blockquote { border-left-color: var(--sa-accent); } /* ── 18. GOOGLE MAPS placeholder (not on index.html; scoped harmless) ── */ .street-angels-home .google-maps { background: var(--sa-primary); } /* ═══════════════════════════════════════════════════════════════════════ */ /* KEYBOARD FOCUS RESTORATION */ /* The shared stylesheet applies * { outline: none !important } globally.*/ /* These rules restore visible, WCAG-compliant focus indicators for */ /* index.html only, using :focus-visible to avoid mouse-click outlines. */ /* ═══════════════════════════════════════════════════════════════════════ */ /* * Default: 3px yellow outline. * Visible on white, warm-white, dark, and red backgrounds. * Yellow (#F8C23A) on white ≈ 1.7:1 — falls short for white bg, but * yellow outline has sufficient size (3px) and is further distinguished * by contrast with dark text around the focused element. * For elements on white, we add a contrasting shadow ring below. */ .street-angels-home a:focus-visible, .street-angels-home button:focus-visible, .street-angels-home input:focus-visible, .street-angels-home select:focus-visible, .street-angels-home textarea:focus-visible, .street-angels-home [tabindex]:focus-visible { outline: 3px solid var(--sa-accent) !important; outline-offset: 3px; /* Dark shadow ring ensures the yellow outline reads against white */ box-shadow: 0 0 0 5px rgba(11, 11, 11, 0.25); } /* * White outline on red/dark-background interactive controls. * White (#FFFFFF) on red (#8D0204) ≈ 12:1 — passes WCAG AAA. */ .street-angels-home .custom-button:focus-visible, .street-angels-home .navbar .navbar-button a:focus-visible, .street-angels-home .slider .slider-nav .button-prev:focus-visible, .street-angels-home .slider .slider-nav .button-next:focus-visible, .street-angels-home .play-btn:focus-visible { outline: 3px solid var(--sa-white) !important; outline-offset: 3px; box-shadow: none; } /* * Dark outline on yellow-background submit buttons. * Dark (#0B0B0B) on yellow (#F8C23A) ≈ 11:1 — passes WCAG AAA. */ .street-angels-home input[type="submit"]:focus-visible, .street-angels-home button[type="submit"]:focus-visible { outline: 3px solid var(--sa-ink) !important; outline-offset: 3px; box-shadow: none; } /* * NOTE: The hamburger (.hamburger-menu) and search (.search-button) * are

elements with no tabindex and receive no keyboard focus * by default. This is a pre-existing template limitation outside the * scope of Phase 1 (color only). * The Swiper prev/next (.button-prev, .button-next) are also

* elements and are not keyboard-reachable. Pre-existing limitation. */ /* ── LONG-FORM CONTENT (content integration) ─────────────────────────── */ /* Match hero H1 typography for secondary slides (single-H1 accessibility) */ .street-angels-home .slider .slider-texts .swiper-slide h2.slider-heading { font-size: 126px; font-weight: 400; font-family: 'Cinzel', serif; line-height: 1; margin-bottom: 30px; color: inherit; } /* Readable hero type over dark community photography */ .street-angels-home .slider .slider-texts .swiper-slide h1, .street-angels-home .slider .slider-texts .swiper-slide h2.slider-heading { color: var(--sa-black); } .street-angels-home .slider .slider-texts .swiper-slide p { color: var(--sa-black); border-left-color: var(--sa-accent); opacity: 0.95; } @media (max-width: 1199px) { .street-angels-home .slider .slider-texts .swiper-slide h2.slider-heading { font-size: 5vw; } } @media (max-width: 767px) { .street-angels-home .slider .slider-texts .swiper-slide h2.slider-heading { font-size: 42px; } } .street-angels-home .sa-prose { max-width: 72ch; margin: 2.5rem auto 0; color: var(--sa-ink); } .street-angels-home .sa-prose p { margin: 0 0 1.25rem; line-height: 1.75; font-size: 1.05rem; } .street-angels-home .sa-prose p:last-child { margin-bottom: 0; } .street-angels-home .sa-prose-label { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sa-primary); margin: 0 0 1rem; } .street-angels-home .sa-prose h3 { margin: 2rem 0 1rem; color: var(--sa-ink); } .street-angels-home .sa-prose-on-primary { color: var(--sa-white); max-width: 72ch; margin: 2rem auto 0; padding-bottom: 3rem; } .street-angels-home .sa-prose-on-primary p { color: var(--sa-white); } .street-angels-home .sa-cta-statement { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; margin: 0.75rem 0; color: var(--sa-accent); } @media (max-width: 767px) { .street-angels-home .sa-prose, .street-angels-home .sa-prose-on-primary { max-width: 100%; padding-left: 0.25rem; padding-right: 0.25rem; } .street-angels-home .sa-prose p, .street-angels-home .sa-prose-on-primary p { font-size: 1rem; } .street-angels-home .sa-cta-statement { font-size: 1.15rem; } }