/** * Header/nav — utility bar + main nav, exact spec ported from the * client-supplied reference build. Split out of hero-exact.css because * this half renders on every page (header.html) while the other half * (hero, impact bar) only exists on the front page — keeping them * together meant every non-homepage page downloaded hero-only CSS it * never used. */ .utility-bar { height: 31px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: rgba(24,24,24,.98); font-size: 12px; font-weight: 800; } .utility-bar .utility-left { display: flex; align-items: center; gap: 14px; } .utility-bar a { color: inherit; text-decoration: none; } .utility-bar a:hover { opacity: .72; } .utility-bar .dot { opacity: .85; } .utility-bar .utility-item { display: inline-flex; align-items: center; gap: 6px; } /* About / The YPS Agenda / Get in Touch + the social icons used to sit partly on a fixed 71%/29% gradient split of the whole bar — a percentage independent of where the content actually falls, so at some widths it sliced through a word instead of landing cleanly on yellow. This hugs the real content instead, so the whole cluster is yellow on every screen by construction rather than by percentage luck. */ .utility-bar .social-links { display: flex; align-items: center; gap: 14px; height: 100%; margin-right: -16px; padding: 0 16px; background: #FDA903; color: #282828; } .utility-bar .social-links a { color: #282828; } .utility-bar .utility-social { display: inline-flex; align-items: center; gap: 8px; } /* Real brand colors on each icon (not the generic white/currentColor badge before) — a near-solid white circle so each color reads clearly rather than washing out against the dark utility bar. */ .utility-bar .utility-social a { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: rgba(255,255,255,.92); opacity: 1; transition: transform .2s ease, box-shadow .2s ease; } .utility-bar .utility-social a:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.25); } .utility-bar .utility-social__icon--facebook { color: #1877F2; } .utility-bar .utility-social__icon--x { color: #000000; } .utility-bar .utility-social__icon--linkedin { color: #0A66C2; } /* Sticky lives on the outer
template-part wrapper, not on .main-nav itself — .main-nav's own parent (.site-shell-header) is barely taller than .main-nav, so position:sticky there has almost no room to travel before its tiny parent scrolls away with it.
's parent is .wp-site-blocks, which spans the whole page, giving the sticky effect somewhere to actually stay stuck. top is negative, equal to .utility-bar's own height (31px) — only .main-nav should stay pinned, not the info/social utility bar above it. Once scrolled, the header sticks with its top edge 31px above the viewport, which tucks the utility bar out of view above the top edge while .main-nav (starting 31px into the box) lands exactly at the viewport's top and stays there. */ header.wp-block-template-part { position: sticky; top: -31px; z-index: 50; } .main-nav { height: 72px; display: flex; align-items: center; background: #fff; border-bottom: 1px solid #ececed; box-shadow: 0 4px 16px rgba(40,40,40,.06); } .main-nav .brand { width: 262px; height: 72px; display: flex; align-items: center; gap: 13px; padding-left: 17px; color: #fff; background: #31A1FF; text-decoration: none; } .main-nav .brand--logo { width: auto; min-width: 200px; padding-left: 20px; background: none; } .main-nav .brand--logo figure { margin: 0; } .main-nav .brand--logo img { height: 60px; width: auto; display: block; } .main-nav .brand-mark { width: 32px; height: 31px; position: relative; display: block; } .main-nav .brand-mark i { position: absolute; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #fff; } .main-nav .brand-mark i:nth-child(1) { left: 1px; } .main-nav .brand-mark i:nth-child(2) { left: 12px; } .main-nav .brand-mark i:nth-child(3) { left: 23px; } .main-nav .brand-mark b { position: absolute; bottom: 1px; left: 2px; width: 27px; height: 19px; border: 7px solid #fff; border-top: 0; clip-path: polygon(0 0,50% 70%,100% 0,100% 100%,0 100%); } .main-nav .brand strong { display: block; font-size: 16px; letter-spacing: .4px; line-height: 1; } .main-nav .brand small { display: block; margin-top: 8px; font-size: 9px; letter-spacing: 2px; font-weight: 800; } .main-nav .primary-nav { flex: 1; display: flex; justify-content: center; gap: 34px; list-style: none; margin: 0; padding: 0; } .main-nav .primary-nav li { display: flex; align-items: center; } /* Donate + Call Us duplicated as plain
  • s at the end of the nav list so they can appear inside the mobile dropdown itself — on desktop the real .main-nav__cta bar already shows them, so these stay hidden until the ≤700px breakpoint below. */ .main-nav .primary-nav li.primary-nav__mobile-extra { display: none; } /* A visible hover chip (not just a color change) on every top-level link — Home/Blog/Contact included — so hovering anywhere in the bar reads unambiguously as "this is clickable", not just a subtle recolor easy to miss. */ .main-nav .primary-nav a { position: relative; display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; text-decoration: none; color: inherit; transition: color .2s ease, background .2s ease; } .main-nav .primary-nav a:hover { color: #31A1FF; background: rgba(49,161,255,.08); } /* Current page — filled active state plus a small dot beneath it, same visual language as .section-label's dot elsewhere on the site. When the open page is a dropdown's child (e.g. /agenda/ under About), the parent trigger gets marked active too, not just the child link inside the panel. */ .main-nav .primary-nav a.is-active { color: #31A1FF; background: rgba(49,161,255,.08); } .main-nav .primary-nav a.is-active::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; border-radius: 50%; background: #31A1FF; transform: translateX(-50%); } /* Dropdown submenus (Get Involved > Events; Resources > Agenda, Gallery). The caret is a real