/* ============================================================ VT Seva — SHARED TYPOGRAPHY STANDARD (single source of truth) ------------------------------------------------------------ This file is linked LAST in on every page, so the rules here are authoritative across the whole site. To change type size / weight / colour everywhere, edit THIS file only. Relies on the design-system CSS variables already defined in each page's :root (--slate-700, --blue, --orange-cta, etc.). ============================================================ */ /* --blue-900 was referenced on 7 pages but never defined, so dark contact boxes / quotes fell back to transparent (unreadable light text on white). Define it here for the whole site. */ :root{--blue-900:#0a1f45} /* --- Reading text: medium-weight floor + stronger contrast --- */ .icard p, .pcol p, .vbc .sum, .pvc p, .effort p{color:var(--slate-700);font-weight:500} .hero p.lead, .sectionhead p, .intro p, .youth p, .rise p, .muted{font-weight:500} /* --- Prominent small labels: darker + semibold --- */ .statcard .l, .pstat .l, .evlist .ev .eb .loc, .bev .dt{color:var(--slate-700);font-weight:600} /* --- Other supporting labels: darker + medium --- */ .lcard .lb .dt, .flyer .fb .meta span, .loccard .body .dir{color:var(--slate-700);font-weight:500} /* --- Inline link cues --- */ .icard a, .pcol .more{font-size:15px} /* --- Uppercase micro-labels: tracking so caps don't crowd --- */ .lcard .lb .cat{letter-spacing:.07em} .lcard .lb .new{letter-spacing:.06em} /* --- Mobile (<=560px): comfortable reading sizes --- */ @media(max-width:560px){ .icard p, .pcol p, .vbc .sum, .pvc p, .effort p{font-size:16px;line-height:1.6} .statcard .l, .pstat .l, .evlist .ev .eb .loc, .bev .dt{font-size:14px} .spills .spill{font-size:15px} footer a{font-size:15px} footer .bottom, footer .bottom a{font-size:14px} } /* ============================================================ HEADER POLISH (loads last — normalizes the shared nav everywhere) Goal: whole header on ONE row; brand tagline on ONE line; tighter, more balanced spacing. Hamburger still takes over <=880px. ============================================================ */ .nav .container{gap:14px} .brand{gap:10px} .brand .bn{font-size:19px} .brand .bt{white-space:nowrap;font-size:11px} .links{gap:15px;flex-wrap:nowrap;align-items:center} .links > a,.links .ddtoggle{font-size:14px;white-space:nowrap} .nav .region{font-size:12.5px;margin-left:2px} .nav .region a{padding:5px 7px} /* Region is a shown-only indicator now — not switchable. The current region is emphasized; the other is a plain muted label with no link (prevents accidental US->Canada donation hops). */ .nav .region .rlabel{padding:5px 7px;color:var(--slate-500,#667085);cursor:default;user-select:none} .nav .region .rlabel.active{color:var(--blue,#1D4C9E);font-weight:700} .nav .donate{margin-left:2px;white-space:nowrap} /* ============================================================ FLOATING PILL HEADER — single row: brand + menu + region + Donate, all in one white rounded pill. Sits at the top on load and stays pinned/floating as you scroll (whole pill is sticky). ============================================================ */ #site-header{display:contents} /* let the sticky header stick to the whole page, not the short wrapper div */ .nav{position:sticky;top:12px;margin-top:12px;background:transparent;border-bottom:none;backdrop-filter:none;box-shadow:none;z-index:60} .nav .container{height:auto;min-height:58px;max-width:1200px;background:#fff;border:1px solid var(--blue-100);border-radius:999px;box-shadow:0 12px 34px rgba(14,42,94,.16);padding:8px 12px 8px 22px} .nav .links > a,.nav .links .ddtoggle{color:var(--blue)} .nav .links .ddtoggle{background:none;border:none;font-family:inherit;cursor:pointer} .nav .links > a:hover,.nav .links .ddtoggle:hover{color:var(--orange-cta)} /* "Ways to Give" — orange to stand out from the blue nav (outline pill on desktop) */ .nav .links .dd.give > .ddtoggle{color:var(--orange-cta,#ED8129);font-weight:600} @media(min-width:881px){ .nav .links .dd.give > .ddtoggle{border:1px solid var(--orange-cta,#ED8129);border-radius:999px;padding:6px 13px} .nav .links .dd.give > .ddtoggle:hover{background:var(--orange-cta,#ED8129);color:#fff} } @media(max-width:880px){.nav.navopen .links > .dd.give > .ddtoggle{color:var(--orange-cta,#ED8129)}} @media(min-width:881px) and (max-width:1160px){ .brand .bt{display:none} .nav .links{gap:12px} .nav .links > a,.nav .links .ddtoggle{font-size:13.5px} .nav .container{padding:8px 10px 8px 16px} } @media(max-width:880px){ .nav{top:8px;margin-top:8px} .nav .container{border-radius:22px;min-height:52px;padding:8px 14px} } /* ============================================================ CANADA REGION CUES — so a Canadian donor always knows they're on the CAD / tax-receipted VT Seva Canada site (gifts made on the US site can't be receipted in Canada). Injected by layout.js: + a .rbadge next to the brand. ============================================================ */ html.vts-ca::before{content:"";position:fixed;top:0;left:0;right:0;height:4px;background:#d52b1e;z-index:300} /* mobile-only tagline above the hero on every page (injected by layout.js) */ .mobile-tagline{display:none} @media(max-width:880px){.mobile-tagline{display:block;text-align:center;font-family:Poppins,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.05em;color:var(--slate-500,#5a6b85);padding:10px 16px 2px}} .rbadge{display:inline-flex;align-items:center;gap:5px;font-family:Poppins,sans-serif;font-weight:700;font-size:12px;color:#b3261e;background:#fdeceb;border:1px solid #f3c7c4;padding:4px 11px;border-radius:999px;white-space:nowrap;line-height:1;flex-shrink:0} @media(max-width:560px){.rbadge{font-size:11px;padding:3px 9px}} /* ============================================================ MOBILE NAV — single source of truth (<=880px). Loaded last, so this overrides the fragmented rules in index.html / chrome.css. Collapsed bar = brand + Donate + hamburger on one row; tapping the hamburger drops a clean full-width panel with the links, the (accordion) dropdowns, and the USA|Canada toggle at the end. ============================================================ */ @media(max-width:880px){ .nav .container{flex-wrap:wrap!important;row-gap:0;column-gap:10px;align-items:center} .brand{flex:1 1 auto;min-width:0} .brand .bt{display:none!important} .brand .bn{font-size:17px;white-space:nowrap} .nav .donate{order:2;margin:0 0 0 auto!important;font-size:12.5px;padding:8px 14px;white-space:nowrap;flex-shrink:0} .navtoggle{order:3;display:flex} .nav .region{display:none!important} .nav .links{order:10;flex:0 0 100%;width:100%;margin-left:0} .nav:not(.navopen) .links{display:none!important} .nav.navopen .links{display:flex!important;flex-direction:column;align-items:stretch;gap:0;width:100%;margin-top:10px;padding-top:4px;border-top:1px solid rgba(20,42,94,.12)} .nav.navopen .links>a{display:block;width:100%;padding:14px 2px;font-size:16px;text-align:left;color:var(--navy);border-bottom:1px solid rgba(20,42,94,.06)} .nav.navopen .links>.dd{display:block;width:100%;align-items:stretch;border-bottom:1px solid rgba(20,42,94,.06)} .nav.navopen .links>.dd>.ddtoggle{display:flex;width:100%;padding:14px 2px;font-size:16px;color:var(--navy);justify-content:flex-start} .nav.navopen .links .dd .ddmenu{position:static;display:flex;flex-direction:column;box-shadow:none;border:none;padding:0 0 8px 14px;min-width:0} .nav.navopen .links .dd .ddmenu a{padding:9px 2px;font-size:14.5px;border:none} .nav.navopen .region{display:flex!important;order:11;flex:0 0 100%;width:100%;justify-content:center;padding:12px 0 2px;margin:0;border-top:1px solid rgba(20,42,94,.12)} }