/* Capital Stonewall Democrats — shared styles. Generated from the approved design. */ body { margin: 0; background: #FFFFFF; color: #1A2233; } * { box-sizing: border-box; } a { color: #13285E; text-decoration: underline; text-underline-offset: 3px; } a:hover { color: #A81020; } :focus-visible { outline: 3px solid #13285E; outline-offset: 3px; box-shadow: 0 0 0 6px #FFD400; } @keyframes csd-lift { from { box-shadow: 0 0 0 0 rgba(13,28,66,0); } to { box-shadow: 0 10px 26px rgba(13,28,66,.34); } } @keyframes csd-spin { to { transform: rotate(360deg); } } @keyframes csd-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes csd-slide { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } } @keyframes csd-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; animation-timeline: auto !important; transition-duration: .001ms !important; } } .csd-skip { position: absolute; left: -9999px; } .csd-skip:focus { left: 16px; top: 16px; z-index: 99; background: #FFD400; color: #13285E; padding: 12px 18px; font-weight: 800; } /* [hidden] must beat inline display declarations on filtered rows */ [hidden] { display: none !important; } /* Hover states (were inline in the prototype) */ .csdh-1:hover { color: #FFD400 !important; } .csdh-2:hover { color: #FFD400 !important; box-shadow: inset 0 -2px 0 0 #FFD400 !important; } .csdh-3:hover { background: #A81020 !important; } .csdh-4:hover { background: #FFD400 !important; border-color: #FFD400 !important; } .csdh-5:hover { background: #13285E !important; color: #FFFFFF !important; } .csdh-6:hover { transform: translateY(-8px) !important; filter: brightness(1.1) !important; box-shadow: 0 20px 40px rgba(0,107,33,.28) !important; } .csdh-7:hover { border-bottom-color: #FFFFFF !important; letter-spacing: .14em !important; } .csdh-8:hover { transform: translateY(-8px) !important; filter: brightness(1.1) !important; box-shadow: 0 20px 40px rgba(27,58,143,.3) !important; } .csdh-9:hover { transform: translateY(-8px) !important; filter: brightness(1.1) !important; box-shadow: 0 20px 40px rgba(107,36,130,.3) !important; } .csdh-10:hover { background: #0D1C42 !important; } .csdh-11:hover { transform: translateY(-6px) !important; box-shadow: 0 16px 34px rgba(19,40,94,.18) !important; } .csdh-12:hover { transform: translateX(10px) !important; background: #0D1C42 !important; } .csdh-13:hover { background: #FFFFFF !important; } .csdh-14:hover { transform: translateX(10px) !important; background: #F4F6FA !important; } .csdh-15:hover { background: #004E18 !important; border-color: #004E18 !important; } .csdh-16:hover { background: #8FDFFF !important; border-color: #8FDFFF !important; } .csdh-17:hover { color: #A81020 !important; border-bottom-color: #A81020 !important; gap: 16px !important; } .csdh-18:hover { background: #FFFFFF !important; color: #13285E !important; padding: 0 18px !important; } .csdh-19:hover { transform: translateY(-4px) !important; } .csdh-20:hover { transform: translateY(-6px) !important; box-shadow: 0 16px 34px rgba(19,40,94,.16) !important; } .csdh-21:hover { color: #FFD400 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; } .csdh-22:hover { background: #A81020 !important; border-color: #A81020 !important; } .csdh-23:hover { background: #FFA733 !important; border-color: #FFA733 !important; } .csdh-24:hover { background: #142C6E !important; border-color: #142C6E !important; } .csdh-25:hover { color: #A81020 !important; } .csdh-26:hover { transform: translateY(-6px) !important; background: #E8EDF6 !important; } .csdh-27:hover { color: #A81020 !important; border-color: #A81020 !important; } .csdh-28:hover { background: #13285E !important; color: #FFFFFF !important; } .csdh-29:hover { background: #FFFFFF !important; } /* ---- Reflow (WCAG 2.2 AA 1.4.10) ---- Inline grid-template-columns needs !important to be overridden; every multi-column grid carries data-grid so one breakpoint collapses them all. */ @media (max-width: 900px) { /* minmax(0, 1fr), not 1fr. A bare 1fr is minmax(auto, 1fr), and `auto` will not shrink below the content's min-content width — so the calendar column, whose rows carry a 118px date tile beside text, held the grid at 471px inside a 390px phone and pushed the whole page sideways. The children need min-width: 0 for the same reason: it is the width twin of the min-height trap that let a tall photo grow the board row. */ [data-grid] { grid-template-columns: minmax(0, 1fr) !important; } [data-grid] > * { min-width: 0 !important; } header nav, header > div, header > div > div { flex-wrap: wrap !important; } /* The homepage hero and the join band are flex ROWS holding a fixed-width photo next to a column of text. Nothing above stacks them, so on a phone they simply ran off the edge — the 640px rule that sets those photos to width:100% only helped once they were stacked, which they never were. */ main section > div[style*="display: flex; align-items: center; gap: 56px"] { flex-direction: column !important; align-items: stretch !important; } } @media (max-width: 640px) { h1 { font-size: 2.5rem !important; } h2 { font-size: 1.875rem !important; } blockquote { font-size: 1.375rem !important; } [data-grid] > * > article, [data-grid] > article { padding: 22px !important; } main section > div { padding-left: 20px !important; padding-right: 20px !important; } footer > div:nth-child(2) { padding-left: 20px !important; padding-right: 20px !important; } } @media (max-width: 640px) { [style*="flex: none; width: 380px"], [style*="flex: none; width: 340px"], [style*="flex: none; width: 250px"] { width: 100% !important; } [style*="min-height: 420px"] { min-height: 240px !important; } } .csdh-30:hover { background: #13285E !important; border-color: #13285E !important; color: #FFFFFF !important; } /* Hue-matched hovers for the two date-tile colours that had none. Without them the RSVP button fell back to the red hover, which put navy text on #A81020 — about 1.8:1, well under AA, on a site that publishes an AA commitment. */ .csdh-31:hover { background: #E6BF00 !important; border-color: #E6BF00 !important; } .csdh-32:hover { background: #521B63 !important; border-color: #521B63 !important; } /* Outlined button on a navy ground — the amount levels inside a pop-up. The site's own amount buttons are navy-on-white, which disappears on navy. */ .csdh-33:hover { background: #FFFFFF !important; color: #13285E !important; border-color: #FFFFFF !important; } /* The mobile header. * * On a phone the header's own children wrap, so the wordmark and the nav stack: 55px of mark and * wordmark above 89px of nav links, plus padding, is a 208px header — and being sticky, it took a * quarter of every phone screen away on every page, permanently, forever. * * Below 900px it scrolls away instead. The nav is unchanged and still sits at the top of every page; * it just stops following the reader down. That hands back the full 248px of chrome the moment anyone * scrolls, which on a 390x800 phone is about a third of the screen returned to actual content. * * The scroll-driven shrink goes with it: csd-lift exists to compact a header that stays on screen, and * animating one that has already scrolled out of view only costs work. * * Padding tightens from 14px to 10px in the same breath — worth 8px, and the header no longer needs the * breathing room of something you look at constantly. */ @media (max-width: 900px) { [data-header] { position: static !important; animation: none !important; } [data-header] > div { padding-top: 10px !important; padding-bottom: 10px !important; } } /* The utility bar is a fixed 40px and sits OUTSIDE
, so the wrapping rules above never applied to it: on a phone the tagline wrapped to three lines and spilled out of the bar. It is decorative — the links are not. */ @media (max-width: 640px) { [data-util-tagline] { display: none !important; } } /* Calendar rows are a flex row: a 118px date tile, the text, then the RSVP button pinned right. On a phone there is no room for all three side by side and the button ran off the edge, taking the page's width with it. Let the row wrap and the button sit under the text. */ @media (max-width: 640px) { [data-ev-item], article.csdh-12, article.csdh-14 { flex-wrap: wrap !important; } [data-ev-item] > a[href="#rsvp"], article.csdh-12 > a, article.csdh-14 > a, [data-ev-item] > a[target="_blank"] { margin: 0 20px 20px !important; align-self: flex-start !important; } } /* TAP TARGETS — WCAG 2.2 AA, 2.5.8 Target Size (Minimum): 24x24 CSS px. * * These links are set at 14-20px tall with no padding, which is fine to read * and too small to hit reliably with a thumb. The padding grows the hit area; * the matching negative margin cancels its effect on layout, so nothing moves * — the footer columns keep their spacing and the header keeps its height. * Widths already clear 24px, so only the block axis needs it. */ .csdh-1 { padding-block: 5px; margin-block: -5px; } /* utility bar, footer social + legal */ .csdh-2 { padding-block: 5px; margin-block: -5px; } /* primary nav */ .csdh-7 { padding-block: 4px; margin-block: -4px; } /* links inside the colour cards */ .csdh-21 { padding-block: 3px; margin-block: -3px; } /* footer navigation */ .csdh-25 { padding-block: 3px; margin-block: -3px; } /* partner card links */ .csdh-27 { padding-block: 3px; margin-block: -3px; } /* the "who to email" directory */ /* The link for the page you are already on drops its hover class — that is how the current-page treatment is applied — and the padding lived on that class. So in both the header and the footer, the one link too small to hit was the one for the page you were standing on. */ header a[aria-current="page"] { padding-block: 5px; margin-block: -5px; } footer a[aria-current="page"] { padding-block: 3px; margin-block: -3px; }