/* ============================================= VYSAC — Valley Youth Substance Abuse Coalition. Loaded by /vysac and the 12 sector pages, on top of css/styles.css and css/usef-tokens.css. ⛔ var() ONLY. Not one raw hex lives here: her five colours are declared once in the .vysac block of css/usef-tokens.css, which with css/usef-ui.css is the only place design:check permits a raw hex. Her editorial direction (docs/vysac-brief.md section 5): prestigious through restraint. Clear hierarchy, generous spacing, high-quality imagery, and disciplined use of colour, not clutter or animation. ⛔ TWO OF HER FIVE COLOURS CANNOT CARRY TEXT and this sheet never asks them to: --vy-teal is 4.01:1 on white and --vy-gold is 3.11:1, so they appear only as rules, borders, dividers and small marks. Where a teal-coloured or gold-coloured word is wanted, --vy-teal-ink and --vy-gold-on-deep exist and were measured. ============================================= */ body.vysac { background: var(--vy-paper); } /* css/styles.css paints every bare h1..h6 with ITS navy (--green-dark) and every bare

with a neutral grey, so the coalition's own palette has to be asserted back. ⛔⛔ TWO RULES ABOUT HOW, AND THE BROWSER DRIVE PAID FOR THE FIRST ONE. 1. SCOPE, never `.vysac `. The .vysac class sits on , so `.vysac a { ... }` matches EVERY anchor on the page, including the SHARED HEADER that js/main.js injects. It did: the nav Donate button rendered this area's body-blue on its own navy fill and measured 1.5:1, on all 13 pages, while every check inside the area passed. Only measuring the RENDERED nav found it. So each rule is scoped to this area's own regions. 2. :where(), so they add NO specificity. Every .vy-* rule further down beats them without having to restate .vysac, which is what keeps the hero's white heading and the navy band's light text from being clawed back. */ .vysac :where(.vy-hero, .vy-section, .vy-cta, .vy-modal) :where(h1, h2, h3, h4, h5, h6) { color: var(--vy-ink); } .vysac :where(.vy-hero, .vy-section, .vy-cta, .vy-modal) :where(p, dd) { color: var(--vy-body); } .vysac :where(.vy-hero, .vy-section, .vy-cta, .vy-modal) :where(a) { color: var(--vy-blue-ink); } .vysac :where(.vy-hero, .vy-section, .vy-cta, .vy-modal) :where(a):hover { color: var(--vy-navy); } /* The shared .section-subtitle uses a token measured at 4.31:1 on white, under the 4.5 rule. Reclaim it for this area. */ .vysac .section-subtitle { color: var(--vy-body); } .vysac .section-label { color: var(--vy-teal-ink); } /* A visible keyboard focus on everything operable. Her accessibility line. Scoped the same way, so the shared header keeps its own focus styling. */ .vysac :where(.vy-hero, .vy-section, .vy-cta, .vy-modal, .vy-overlay) :where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--vy-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---------- Hero ---------- */ .vy-hero { position: relative; background: var(--vy-navy); color: var(--vy-on-deep); padding: 7rem 0 3.5rem; overflow: hidden; } /* A calm community image sits behind a navy overlay when one is supplied as --vy-hero-image. With no image the band is simply the flat navy, so text legibility never depends on the picture. */ .vy-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--vy-hero-image, none); background-size: cover; background-position: center; opacity: 0.22; } .vy-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--vy-gold), var(--vy-teal)); } .vy-hero > .container { position: relative; } .vy-hero h1 { color: var(--vy-on-deep); max-width: 24ch; } .vy-crumb { font-size: 0.82rem; color: var(--vy-on-deep-soft); margin-bottom: 1.1rem; } .vysac .vy-crumb a { color: var(--vy-on-deep-soft); text-decoration: underline; } .vysac .vy-crumb a:hover { color: var(--vy-on-deep); } .vy-crumb-sep { padding: 0 0.45rem; opacity: 0.6; } .vy-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vy-gold-on-deep); border: 1px solid var(--vy-gold); border-radius: 999px; padding: 0.3rem 0.9rem; margin-bottom: 1.1rem; } .vy-hero .vy-lede { max-width: 62ch; font-size: 1.14rem; color: var(--vy-on-deep-soft); margin-top: 1.1rem; } .vy-hero .vy-lede:last-child { margin-bottom: 0; } /* ---------- Sections ---------- */ .vy-section { padding: 4.5rem 0; } .vy-section--mist { background: var(--vy-mist); } .vy-prose { max-width: 68ch; margin: 0 auto; } .vy-prose p { font-size: 1.04rem; } .vy-prose--wide { max-width: 80ch; } .vy-rule { width: 64px; height: 3px; border: 0; background: var(--vy-gold); margin: 0 auto 1.5rem; } /* ---------- The 12-sector directory ---------- Her spec is exact: 4 across desktop, 2 across tablet, 1 across mobile. Written as explicit breakpoints rather than auto-fit, because auto-fit lands 3 across at some widths and leaves the twelfth stranded. */ .vy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; /* Left at the default `stretch` on purpose: EQUAL is the harder half of "twelve equal square cards", and stretch is what guarantees it. The square is a FLOOR on the card instead, see .vy-card below. */ } @media (max-width: 1040px) { /* Two across. NOT forced square: at this width a 1:1 card is 350 to 490px tall, which is mostly empty space. Her spec fixes the COLUMN COUNT per breakpoint (4 / 2 / 1) and describes the square shape of the grid; equal cards with a sensible floor are the honest reading of it here. */ .vy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .vy-grid { grid-template-columns: minmax(0, 1fr); } } .vy-card { display: flex; flex-direction: column; min-width: 0; /* ⛔ HER SPEC IS TWELVE EQUAL SQUARE CARDS, AND THIS IS A FLOOR, NOT A RATIO. `aspect-ratio: 1/1` was the obvious way and it is wrong twice over: a grid item is stretched to its row height by default, which makes a stretched item's aspect-ratio silently ignored (twelve equal OBLONGS, every check green); and with `align-items: start` to fix that, sector 12's long title overflowed the square and left ONE card 31px taller than its row. The browser drive measured both. So the square is a MINIMUM HEIGHT, computed from the column width the .container and the gap actually produce, and `stretch` keeps every card in a row equal. A card whose content needs more room grows, and takes its row with it, which is what will happen the day Nida supplies four names. */ min-height: calc((min(100vw, var(--max-width)) - 3rem - 3.3rem) / 4); background: var(--vy-surface); border: 1px solid var(--vy-border); border-top: 3px solid var(--vy-gold); border-radius: var(--radius-md); padding: 1.15rem 1.2rem; box-shadow: var(--vy-shadow); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } @media (max-width: 1040px) { .vy-card { min-height: 230px; } } @media (max-width: 560px) { .vy-card { min-height: 0; } } .vy-card:hover, .vy-card:focus-visible { transform: translateY(-3px); box-shadow: var(--vy-shadow-lift); border-color: var(--vy-border-strong); border-top-color: var(--vy-teal); } .vy-card-top { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.35rem; } .vy-num { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; color: var(--vy-teal-ink); font-variant-numeric: tabular-nums; } .vy-card h3 { font-size: 1.02rem; line-height: 1.3; margin: 0 0 0.35rem; } .vy-purpose { font-size: 0.86rem; line-height: 1.5; color: var(--vy-body); margin: 0; } .vy-card-members { margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--vy-border); min-width: 0; } .vy-names { font-size: 0.87rem; line-height: 1.45; color: var(--vy-ink); font-weight: 600; margin: 0; list-style: none; padding: 0; } .vy-names li { color: var(--vy-ink); margin-bottom: 0.1rem; overflow-wrap: anywhere; } .vy-more { font-size: 0.8rem; color: var(--vy-body); margin: 0.35rem 0 0; } .vy-forming { font-size: 0.83rem; line-height: 1.5; color: var(--vy-body); margin: 0; } .vy-card-go { display: block; margin-top: 0.6rem; font-size: 0.8rem; font-weight: 700; color: var(--vy-blue-ink); } .vy-card:hover .vy-card-go { color: var(--vy-navy); } /* The one live line on the hub. Hidden until it has a real number to say. */ .vy-tally { text-align: center; font-size: 0.95rem; color: var(--vy-body); margin: -1.25rem 0 2rem; } .vy-tally[hidden] { display: none; } /* ---------- Meeting band ---------- */ .vy-band { background: var(--vy-surface); border: 1px solid var(--vy-border); border-left: 4px solid var(--vy-gold); border-radius: var(--radius-md); box-shadow: var(--vy-shadow); padding: 2rem; max-width: 760px; margin: 0 auto; min-width: 0; } .vy-band h2 { font-size: 1.5rem; margin-bottom: 0.75rem; } .vy-band p { font-size: 1.02rem; } .vy-band[hidden] { display: none; } .vy-band-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin-top: 1.35rem; } .vy-fineprint { font-size: 0.86rem; color: var(--vy-body); margin: 0.9rem 0 0; } .vy-fallback { font-size: 0.86rem; color: var(--vy-body); margin: 0.75rem 0 0; } @media (max-width: 560px) { .vy-band { padding: 1.4rem 1.15rem; } } /* ---------- Buttons ---------- The area carries no red, because her palette carries none. */ .vy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-weight: 700; font-size: 0.95rem; line-height: 1.2; text-align: center; padding: 0.8rem 1.5rem; border-radius: var(--radius-sm); border: 2px solid var(--vy-navy); background: var(--vy-navy); color: var(--vy-on-deep); cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; max-width: 100%; } .vy-btn:hover { background: var(--vy-blue); border-color: var(--vy-blue); color: var(--vy-on-deep); } .vy-btn[disabled] { opacity: 0.6; cursor: default; } .vy-btn--ghost { background: transparent; color: var(--vy-navy); } .vy-btn--ghost:hover { background: var(--vy-navy); color: var(--vy-on-deep); } .vy-btn--on-deep { background: var(--vy-surface); border-color: var(--vy-surface); color: var(--vy-navy); } .vy-btn--on-deep:hover { background: var(--vy-on-deep-soft); border-color: var(--vy-on-deep-soft); color: var(--vy-navy); } /* ---------- Sector page: return link ---------- */ .vy-back { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 700; } .vysac .vy-back { color: var(--vy-blue-ink); } .vysac .vy-back:hover { color: var(--vy-navy); } /* ---------- People ---------- */ .vy-people { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .vy-person { display: flex; align-items: center; gap: 0.85rem; text-align: left; min-width: 0; flex: 1 1 260px; max-width: 360px; background: var(--vy-surface); border: 1px solid var(--vy-border); border-radius: var(--radius-md); box-shadow: var(--vy-shadow); padding: 0.9rem 1.1rem 0.9rem 0.9rem; } .vy-person.is-clickable { cursor: pointer; } .vy-person.is-clickable:hover { box-shadow: var(--vy-shadow-lift); border-color: var(--vy-border-strong); } .vy-person-text { min-width: 0; } .vy-avatar { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--vy-navy); border: 2px solid var(--vy-border); display: flex; align-items: center; justify-content: center; } .vy-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; } .vy-avatar span { font-family: var(--font-heading); font-weight: 900; font-size: 1rem; color: var(--vy-on-deep); } .vy-avatar--lg { width: 84px; height: 84px; } .vy-avatar--lg span { font-size: 1.6rem; } .vy-person-name { font-family: var(--font-heading); font-weight: 700; color: var(--vy-ink); line-height: 1.3; overflow-wrap: anywhere; } .vy-person-org { font-size: 0.86rem; color: var(--vy-body); line-height: 1.35; overflow-wrap: anywhere; } .vy-person-role { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vy-teal-ink); line-height: 1.35; margin-top: 0.15rem; } .vy-person-open { font-size: 0.78rem; color: var(--vy-blue-ink); margin-top: 0.2rem; } .vy-quiet { text-align: center; font-size: 0.98rem; color: var(--vy-body); max-width: 62ch; margin: 0 auto; } .vy-centre { display: flex; justify-content: center; margin-top: 1.5rem; } /* ---------- Popups (profile + request form) ---------- ⛔ Escape and the explicit close button close these. A click outside does NOT (standing rule, 2026-08). Both paths restore body overflow. */ .vy-overlay { position: fixed; inset: 0; background: var(--vy-scrim); display: none; align-items: center; justify-content: center; padding: 1.25rem; z-index: 3000; } .vy-overlay.is-open { display: flex; } .vy-modal { position: relative; width: 100%; max-width: 600px; max-height: 88vh; overflow-y: auto; background: var(--vy-surface); border-radius: var(--radius-lg); border-top: 4px solid var(--vy-gold); box-shadow: var(--vy-shadow-pop); padding: 1.85rem; min-width: 0; } .vy-modal h2 { font-size: 1.4rem; margin: 0 2.25rem 0.45rem 0; } .vy-modal-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.1rem; padding-right: 2.25rem; min-width: 0; } .vy-modal-head h2 { margin: 0; } .vy-modal-body p { font-size: 0.97rem; margin-bottom: 0.9rem; } .vy-modal-close { position: absolute; top: 0.85rem; right: 0.85rem; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--vy-border); background: var(--vy-surface); color: var(--vy-ink); font-size: 1.2rem; line-height: 1; } .vy-modal-close:hover { background: var(--vy-mist); } .vy-modal-intro { font-size: 0.96rem; margin-bottom: 1.15rem; } @media (max-width: 560px) { .vy-modal { padding: 1.5rem 1.1rem; } .vy-modal-head { flex-direction: column; text-align: center; padding-right: 0; } } /* ---------- The Request Meeting Access form ---------- */ .vy-field { margin-bottom: 0.95rem; min-width: 0; } .vy-field label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--vy-ink); margin-bottom: 0.3rem; } .vy-hint { display: block; font-size: 0.79rem; font-weight: 400; color: var(--vy-body); margin-top: 0.15rem; } .vy-input { width: 100%; max-width: 100%; padding: 0.7rem 0.8rem; font: inherit; color: var(--vy-ink); background: var(--vy-surface); border: 1px solid var(--vy-border-strong); border-radius: var(--radius-sm); } .vy-input:focus { outline: none; border-color: var(--vy-focus); box-shadow: 0 0 0 3px var(--vy-mist); } textarea.vy-input { resize: vertical; min-height: 110px; } .vy-check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--vy-body); margin-bottom: 0.95rem; } .vy-check input { margin-top: 0.25rem; flex-shrink: 0; width: 18px; height: 18px; } .vy-err { background: var(--vy-mist); border-left: 3px solid var(--vy-gold); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; font-size: 0.9rem; color: var(--vy-ink); margin-bottom: 0.9rem; } .vy-err[hidden], .vy-done[hidden], .vy-form[hidden] { display: none; } .vy-acts { display: flex; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; } .vy-done h3 { margin-bottom: 0.5rem; } .vy-done p { margin-bottom: 1.1rem; } /* ---------- Sector page blocks ---------- */ .vy-facts { border: 1px solid var(--vy-border); border-radius: var(--radius-md); background: var(--vy-surface); box-shadow: var(--vy-shadow); overflow: hidden; max-width: 760px; margin: 0 auto; } .vy-fact { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 1rem; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--vy-border); font-size: 0.96rem; min-width: 0; } .vy-fact:last-child { border-bottom: 0; } .vy-fact dt { font-weight: 700; color: var(--vy-ink); } .vy-fact dd { color: var(--vy-body); min-width: 0; overflow-wrap: anywhere; } @media (max-width: 620px) { .vy-fact { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } } .vy-cta { background: var(--vy-navy); color: var(--vy-on-deep); padding: 3.5rem 0; text-align: center; position: relative; } .vy-cta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--vy-teal), var(--vy-gold)); } .vy-cta h2 { color: var(--vy-on-deep); } .vy-cta p { color: var(--vy-on-deep-soft); max-width: 62ch; margin: 0 auto 1.5rem; } .vy-cta-acts { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* A plain link on the navy band. :not(.vy-btn) so the buttons keep their own navy-on-white pair: the body-text blue measures 1.51:1 against this navy. */ .vysac .vy-cta a:not(.vy-btn) { color: var(--vy-on-deep); text-decoration: underline; } .vysac .vy-cta a:not(.vy-btn):hover { color: var(--vy-on-deep-soft); } .vy-cta .vy-fallback { color: var(--vy-on-deep-soft); margin-top: 1.25rem; } @media (prefers-reduced-motion: reduce) { .vy-card, .vy-btn { transition: none; } .vy-card:hover, .vy-card:focus-visible { transform: none; } }