/* ======================================== SHARED STYLES: NCRA Mental Health + Domestic Violence Resources pages Attached to both pages with a Sitefinity stylesheet widget (loads after the global stylesheet). The CTA band (.ncra-cta-band) lives in the global stylesheet. ======================================== */ /* ---------------------------------------- SECTION HEADING UNDERLINE (.borderbottom) Teal underline under section headings (e.g. "Find resources and support"). Add the class to the H2. ---------------------------------------- */ .borderbottom { border-bottom: 4px solid #1fa396; margin: 0 0 1em; line-height: 1.6em; } /* ---------------------------------------- NOTES (these pages only) - Note text at body size and bold, so safety messages read at least as prominently as surrounding content (global notes are smaller) - Bold lead label (e.g. "Browse safely:") shown in uppercase with slight letter spacing, so it reads as a warning heading - !important: overrides the global note text styles ---------------------------------------- */ .ncra-note p { font-size: 1.14rem !important; font-weight: 700 !important; line-height: 1.6; } .ncra-note p > strong:first-child { text-transform: uppercase; letter-spacing: 0.05em; } /* ---------------------------------------- DARK BANNER DIVIDER Thin semi-transparent white line for use inside .ncra-page-banner (e.g. separating webinar info from sponsor logos). ---------------------------------------- */ .ncra-page-banner hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.4); margin: 1.5rem 0; } /* ---------------------------------------- SUPPORT CARD (.support-card) Standalone highlighted block, e.g. "Get help now." - Background: light cool gray (#f8f9fb) with a light gray border - Top accent: navy (#243E73) - Main H2 and lead line are centered; H3s and body stay left-aligned - H3s: slightly smaller than global, tighter line height - Links: bold navy, underline on hover/focus PARTS - .support-card-lead = emphasized line under the H2 (e.g. "call 911") - Works with the Sitefinity inline grid inside it. The H2 and lead line must be direct children of .support-card to be centered. ---------------------------------------- */ .support-card { margin: 2rem 0; padding: 2.5rem 3rem 1.85rem; background: #f8f9fb; border: 1px solid #e2e2e2; border-top: 6px solid #243E73; } .support-card h2 { margin-top: 0; } .support-card > h2, .support-card-lead { text-align: center; } .support-card h3 { font-size: 1.6rem; line-height: 1.25; margin: 1.75rem 0 0.5rem; } .support-card li { padding-bottom: 6px; } .support-card a { color: #0D2E72; font-weight: 700; } .support-card a:hover, .support-card a:focus { text-decoration: underline; } .support-card-lead { font-size: 1.25rem; font-weight: 800; color: #243E73; } /* Removes extra bottom space from grid columns inside the card. !important: overrides the global grid spacing */ .support-card .grid, .support-card .grid__unit, .support-card .grid__unit > :last-child, .support-card li:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } @media screen and (max-width: 768px) { .support-card { padding: 1.75rem 1.25rem; } } /* ---------------------------------------- CARD OVERRIDES (these pages only) Adjusts the global .card-wrapper on these pages; the global stylesheet is unchanged. - Links: navy, underline on hover/focus (matches the support card) instead of the site's default teal link and gold hover - Restores list bullets (global removes them) - Tighter list spacing - Keeps the link directly under the list instead of pinned to the bottom of the card - Mobile: left-aligns all card content (global centers it). !important: overrides the global mobile centering ---------------------------------------- */ .card-wrapper a:not(.custom-card-btn) { color: #0D2E72; } .card-wrapper a:not(.custom-card-btn):hover, .card-wrapper a:not(.custom-card-btn):focus { color: #0D2E72; text-decoration: underline; } .card-wrapper ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 12px; flex-grow: 0; } .card-wrapper li { margin-bottom: 6px; } @media screen and (max-width: 768px) { .card-wrapper, .card-wrapper h3, .card-wrapper p { text-align: left !important; } } /* ---------------------------------------- QUICK EXIT BUTTON (DV page only) Round red button with an X and visible "Exit" text, stacked above the accessibility button (bottom right). Same approximate size and shape as the accessibility button. - Background: red (#C8102E), distinct from the blue accessibility button; white text - Mobile: matches the accessibility button's size, sits higher to prevent accidental taps, and stays fully on screen on phones with rounded corners, notches or a home bar - Click and Esc-twice behavior: the page's JavaScript widget PARTS - span = the X icon (hidden from screen readers; the link's aria-label describes the action) ---------------------------------------- */ a.dv-quick-exit { position: fixed; right: 18px; bottom: 90px; z-index: 9999; width: 56px; height: 56px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #C8102E; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; text-transform: uppercase; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } a.dv-quick-exit span { font-size: 1.3rem; margin-bottom: 2px; } a.dv-quick-exit:hover, a.dv-quick-exit:focus { background: #9E0C24; color: #fff; text-decoration: none; } a.dv-quick-exit:focus-visible { outline: 3px solid #F2A81D; outline-offset: 3px; } @media screen and (max-width: 768px) { a.dv-quick-exit { width: 46px; height: 46px; right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(72px + env(safe-area-inset-bottom, 0px)); font-size: 0.6rem; } a.dv-quick-exit span { font-size: 1.1rem; margin-bottom: 1px; } }