/** * Site chrome. * * Loaded on EVERY front-end page, because the footer it styles is on every page. * That makes the scoping rule here absolute rather than advisory: * * EVERY SELECTOR MUST BEGIN WITH .pcf-footer (or a future chrome class), * INCLUDING INSIDE MEDIA QUERIES. Those classes exist only in this theme's own * chrome markup, so a rule anchored to one cannot reach a page's content no * matter which page it loads on. A bare element selector -- `p {}`, `footer {}`, * `a {}` -- would land on 103 published Elementor pages and 285 default-template * posts and pages. There is a live example of exactly that failure documented at * the !important rule below; do not add a second one. * * This file is chrome only. Anything that styles a PAGE's content belongs in * style.css under .pcf-canvas / .pcf-upgraded, which stay gated per page while * the migration runs. See inc/chrome.php. * * Values come from theme.json via --wp--preset--* custom properties, which core * emits into global-styles-inline-css on every page. Add a token there rather * than a literal here. * * WHY THE FONT FAMILIES ARE NAMESPACED * * This site already serves Merriweather and Nunito Sans: Elementor's global kit * sets h1-h6 to Merriweather and loads both families through its "local Google * Fonts" feature (elementor-gf-local-merriweather-css). Declaring @font-face for * the bare names 'Merriweather' or 'Nunito Sans' would put two competing * definitions of one family on the same document, and which file the browser * fetches then depends on load order and unicode-range overlap. * * So our subsets are declared as 'PCF Merriweather' and 'PCF Nunito Sans', with * the bare names left further down the stack in theme.json as a fallback. Ours * cannot be shadowed and cannot shadow Elementor's. This also means the fonts * survive Elementor being removed, which is the point of the rebuild. * * The @font-face declarations themselves now live in assets/css/fonts.css, so * that the editor can load the same file; this stylesheet depends on it. */ /* ----------------------------------------------------------------------------- * The page ground * * Rebuilt pages sit on the same cream the footer does, so the footer stops * reading as a tinted panel bolted to the bottom of a white page and starts * reading as where the page already was. It also gives the white cards in the * card grid something to be raised off; on white they were outlines around * nothing. * * SCOPED TO .pcf-upgraded, which is on for rebuilt pages only. This * stylesheet loads everywhere, and a bare `body` rule here would repaint 103 * published Elementor pages that were designed on white. * * The value is the token, not a copy of it: change --cream in theme.json and * the page and the footer move together, which is the whole point of them * matching. * -------------------------------------------------------------------------- */ .pcf-upgraded { background-color: var(--wp--preset--color--cream); } /* ----------------------------------------------------------------------------- * Footer * * Demo A's footer: cream ground continuing the page, a hairline rule instead of * a box, and no heavy divider between the brand and the links. Demo B's social * links row is folded in as its own tier rather than as a third link column. * * Every declaration is explicit rather than inherited. Maisha and the Elementor * global kit both set element-level typography on this document (the kit styles * h1-h6 sitewide), so anything left to inherit is inheriting from them. * -------------------------------------------------------------------------- */ /* * THE GUTTER GOES INSIDE THE CAP, which is the whole reason this looks the way * it does now. * * The footer and the page content are capped at the same 1154px wide-size, but * they used to put the page gutter in different places. A content block is * `max-width: 1154px` with `padding: 60px 15px` INSIDE it, so what a reader * sees runs 1124px. The footer had its gutter on the band OUTSIDE the cap -- * and on any screen wide enough for the cap to bind, that padding does nothing * at all, so the footer's text ran the full 1154px. * * Same number, two arrangements, and the result was a 15px step on each side: * on a 1440 screen the cards sat at 158-1282 and the footer's columns at * 143-1297, close enough to look like a mistake rather than a decision. * * So the horizontal padding moves to __inner, where it is inside the cap, and * becomes the same flat 15px every content block and the header bar use. The * band still spans the viewport -- the background is on this element and only * the vertical padding stays here. */ .pcf-footer { --pcf-footer-pad: 15px; --pcf-footer-pad-top: 52px; box-sizing: border-box; padding: var(--pcf-footer-pad-top) 0 40px; background-color: var(--wp--preset--color--cream); color: var(--wp--preset--color--contrast-warm); font-family: var(--wp--preset--font-family--body); font-size: 15px; line-height: 1.6; } .pcf-footer *, .pcf-footer *::before, .pcf-footer *::after { box-sizing: inherit; } /* * The one !important in this file, and it is defensive rather than lazy. * * Someone once pasted `p { font-family: 'Merriweather', sans-serif !important; }` * into the Custom CSS box of a text widget inside an Elementor popup. Elementor * emits widget Custom CSS UNSCOPED -- it does not prefix it with the widget's * own selector -- so that rule escaped the widget and became a global rule on * every page of the site. It now sits in 11 generated stylesheets under * uploads/elementor/css/ (the EOY story popups, which are copies of each other) * and they are enqueued everywhere because popups load sitewide. * * !important on a bare element selector beats any specificity a class can * reach, so every

in this footer -- mission, column headings, address, * legal, copyright -- renders in Elementor's Merriweather without this. * * Verified with a headless computed-style probe, not by reading CSS. * * The real fix is to rewrite those popups' custom CSS as `selector p { ... }`, * which scopes it to the widget. That is deliberately NOT done here: it would * change how legacy pages render, and legacy pages are frozen until their turn. * Drop this rule when Elementor goes, or when those popups are cleaned up. * * It is currently the ONLY !important declaration in all of Elementor's * generated CSS, so this single counter-rule closes the whole collision surface. */ .pcf-footer p { font-family: var(--wp--preset--font-family--body) !important; } .pcf-footer__inner { max-width: var(--wp--style--global--wide-size); margin: 0 auto; /* Inside the cap, so this lands on the same edges as the page content. */ padding-inline: var(--pcf-footer-pad); } /* * Visually hidden, still announced. * * Carries the "(opens in a new tab)" note on the links that leave the site. * display:none or visibility:hidden would remove it from the accessibility tree * along with the pixels, which is the opposite of the point; the clip technique * keeps it in the tree while taking it out of the layout. * * white-space:nowrap matters -- without it the clipped text can still wrap and * force a scrollbar on the ancestor. * * Named __sr-only rather than a bare .pcf-sr-only because this file's rule is * that every selector is anchored to a chrome class. When header-pcf.php lands * and there is a shared chrome layer, promote this to one utility for both. */ .pcf-footer__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* -- brand and link columns ------------------------------------------------ */ .pcf-footer__top { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 36px; padding-bottom: 32px; border-bottom: 1px solid var(--wp--preset--color--rule); } .pcf-footer__brand { max-width: 320px; } .pcf-footer__logo-link { display: inline-block; border: 0; } /* * The wordmark carries four lines of type inside a 3.5:1 lockup, so it needs * real height before the smallest line ("Palestinian and Israeli Bereaved * Families for Peace") is legible at all. The width/height attributes on the * are the file's true intrinsic size, which is what reserves the right * box before the image loads; this rule sets the displayed size. */ .pcf-footer__logo { display: block; height: 90px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 10px; } .pcf-footer__mission { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--contrast-warm); } /* * The seal opens the top row, left of the brand. It is a flex item of * .pcf-footer__top directly -- there is no wrapper grouping it with the link * columns any more. * * max-width keeps it inside its column once .pcf-footer__top stacks -- a fixed * width wider than the content box on a small phone would push the whole * document sideways. */ /* * The seals sit as one group against the brand, so the wrapper is what the row * spaces -- the gap between badges is this rule's business, not the row's. */ .pcf-footer__seals { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 16px; max-width: 100%; } .pcf-footer__seal { flex: 0 0 auto; max-width: 100%; } /* * Sized by HEIGHT, not width, which is the change two seals forced. * * One seal could be a flat 180px wide. These two are different shapes -- Candid * is a square and Charity Navigator is very slightly taller than it is wide -- * and matching their widths would have left the two badges visibly different * heights, reading as a layout mistake rather than a pair. Matching height is * what makes them a set; the widths then fall where the artwork says. * * aspect-ratio holds the box before the image arrives. Both files are close * enough to square that one ratio serves, and it only has to be right enough to * stop the footer reflowing on load. */ .pcf-footer__seal img { display: block; width: auto; height: 96px; max-width: 100%; aspect-ratio: 1 / 1; object-fit: contain; transition: opacity 0.18s ease; } /* * The seal is an image link, and the footer's text links carry a standing * transparent bottom border that turns maroon on hover -- on this one it would * draw a rule under the artwork. Suppress it and give the hover affordance with * opacity instead. The focus ring is deliberately NOT suppressed: it is * inherited from .pcf-footer a:focus-visible and is the only indication a * keyboard user gets that the seal is focusable at all. */ .pcf-footer__seal a { display: block; border-bottom: 0; } .pcf-footer__seal a:hover img, .pcf-footer__seal a:focus-visible img { opacity: 0.82; } /* * The seal and the brand read as one lockup, so they stay adjacent at the head * of the row; only the columns are pushed to the far edge. A space-between on * the row would have spread all three evenly and floated the brand into the * middle, away from the seal. */ .pcf-footer__cols { display: flex; flex-wrap: wrap; gap: 48px; margin-left: auto; } .pcf-footer__col-head { margin: 0 0 12px; font-family: var(--wp--preset--font-family--body); font-size: 14px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--wp--preset--color--ink-warm); } .pcf-footer__list, .pcf-footer__social-list { list-style: none; margin: 0; padding: 0; } .pcf-footer__list li { margin: 0 0 8px; } .pcf-footer__list li:last-child { margin-bottom: 0; } /* * A 24px minimum box on the column links, so each is a comfortable pointer and * touch target rather than exactly the height of its own text. * * inline-flex rather than inline-block: min-height does nothing to an inline * box, and centring keeps the label in the middle if the box ends up taller * than the line. It still shrink-wraps the text, so the hover underline hugs * the label instead of running the full width of the column, and a long label * ("Annual Reports & 990s") still wraps inside the box at narrow widths rather * than overflowing it. * * The padding is what opens the gap between the word and its underline: the * bar is a background painted at the bottom of the PADDING box, so padding * lowers it without moving the text or disturbing the line box. */ .pcf-footer__list a, .pcf-footer__social-list a { display: inline-flex; align-items: center; padding-bottom: 3px; } .pcf-footer__list a { min-height: 24px; } /* -- social row ------------------------------------------------------------ */ .pcf-footer__social { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; padding: 24px 0; border-bottom: 1px solid var(--wp--preset--color--rule); } .pcf-footer__social .pcf-footer__col-head { margin: 0; } .pcf-footer__social-list { display: flex; flex-wrap: wrap; gap: 8px 24px; } /* -- links ----------------------------------------------------------------- */ /* * Baseline for every link in the chrome. Deliberately minimal: it strips what * Maisha and the Elementor kit put on links and nothing else. * * It used to also set colour, border and the hover wipe for every `a` in the * footer, which meant anything that was not a text link -- the logo, the seal, * a button -- had to opt back out one property at a time. That blanket rule is * (0,1,1) and a component's own `.pcf-thing` class is (0,1,0), so each opt-out * silently lost until it was written with matching specificity. It cost a * missing field line and a yellow bar under the logo, both invisible in the * source and only found by probing computed styles. The treatment now applies * to the three places that actually want it, and components brought in from * elsewhere -- the CTA band's buttons among them -- are simply left alone. */ /* * border-bottom is here to beat Maisha, not for tidiness. Its style.css:696 * sets `a:hover, a:active { border-bottom: 2px solid currentColor }`, which is * (0,1,1) -- so a rule like `.pcf-footer__logo-link` at (0,1,0) loses and the * logo grows a grey line under it the moment a pointer touches it. This * selector is (0,2,1) and covers every chrome link in every state, which is * what the old blanket `.pcf-footer a` rule was quietly doing before it was * narrowed to the three text-link groups. */ .pcf-footer a:not(.pcf-btn) { border-bottom: 0; text-decoration: none; box-shadow: none; } .pcf-footer a:not(.pcf-btn):focus-visible { outline: 2px solid var(--wp--preset--color--maroon); outline-offset: 3px; } /* * THE :not(.pcf-btn) IS LOAD-BEARING. * * A component that ships its own states has to be able to keep them here. * `.pcf-footer a:focus-visible` is (0,2,1) and .pcf-btn:focus-visible is * (0,2,0), so without this the chrome quietly won and every button in the * footer drew the chrome's maroon ring instead of its own -- a maroon ring * around a maroon button, which reads as part of the button rather than as a * focus indicator. The component's rule was dead code and nothing said so. * * Same story for the two resets above: `box-shadow: none` and * `text-decoration: none` would strip any shadow or underline a component uses * as a hover cue. * * The rule this encodes: chrome styles chrome's own links; anything with a * component class styles itself. Add the class here when a new component * lands in the footer. */ /* * The underline wipes in from the left, in the site's accent yellow. * * Drawn as an animated background rather than a border or a positioned * ::after. A border cannot animate directionally -- border-color only * cross-fades -- and an absolutely positioned pseudo-element misbehaves on an * inline element that wraps across lines, which "Annual Reports & 990s" does at * the narrow end. A background-size transition wipes left to right and follows * the text wherever it breaks. * * Colour is not the only hover signal: the text also moves to maroon, so the * state survives for anyone who cannot pick the yellow out against cream. */ .pcf-footer__list a, .pcf-footer__social-list a, .pcf-footer__legal a { color: var(--wp--preset--color--contrast-warm); border-bottom: 0; background-image: linear-gradient( var(--wp--preset--color--accent), var(--wp--preset--color--accent) ); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; transition: color 0.18s ease, background-size 0.24s ease; } .pcf-footer__list a:hover, .pcf-footer__list a:focus-visible, .pcf-footer__social-list a:hover, .pcf-footer__social-list a:focus-visible, .pcf-footer__legal a:hover, .pcf-footer__legal a:focus-visible { color: var(--wp--preset--color--maroon); background-size: 100% 2px; } /* * Respect a reduced-motion preference by removing the wipe, not the underline: * the hover state still needs to be visible, it just arrives at once. */ @media (prefers-reduced-motion: reduce) { .pcf-footer__list a, .pcf-footer__social-list a, .pcf-footer__legal a { transition: color 0.18s ease; } } /* -- legal ----------------------------------------------------------------- */ .pcf-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; padding-top: 24px; font-size: 14px; color: var(--wp--preset--color--contrast-warm-muted); } .pcf-footer__legal a { color: var(--wp--preset--color--contrast-warm-muted); } /* * The address block is prose, so a link inside it has no surrounding cue that * it is clickable -- unlike the nav columns, where position does that work. * It gets a standing underline and the link colour rather than the muted grey * of the text around it. Underline offset keeps it clear of the descenders in * the address that sits directly above. */ .pcf-footer__legal a.pcf-footer__email { color: var(--wp--preset--color--maroon); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; border-bottom: 0; /* * Opted out of the yellow wipe. This link already carries a standing * underline, and the wipe would land a second rule directly beneath it -- * two lines under one address. The standing underline is the affordance * that matters here, so it keeps its own hover: maroon to ink, 1px to 2px. */ background-image: none; } .pcf-footer__legal a.pcf-footer__email:hover, .pcf-footer__legal a.pcf-footer__email:focus-visible { color: var(--wp--preset--color--ink-warm); text-decoration-thickness: 2px; } .pcf-footer__address, .pcf-footer__meta, .pcf-footer__copy { margin: 0; font-size: 14px; line-height: 1.55; } .pcf-footer__meta { margin-top: 6px; } /* * The middot separators are drawn rather than typed, so the address block never * ends with a dangling divider when a field is left empty on the options screen. */ .pcf-footer__meta span + span::before { content: '·'; margin: 0 8px; color: var(--wp--preset--color--rule); } /* ----------------------------------------------------------------------------- * Responsive * * Breakpoints carried over from the comp. The .pcf-footer prefix is still * required in here -- see the warning at the top of this file. * -------------------------------------------------------------------------- */ @media (max-width: 1023px) { .pcf-footer__cols { gap: 28px 32px; } } /* * Its own range, not the max-width block above: below 768px the row turns to a * column, where the brand's flex-basis would become a 320px height. */ @media (min-width: 768px) and (max-width: 1023px) { /* * Seals, brand and columns stay one row down to the phone breakpoint. At a * fixed 320px the brand pushed the row past its container below ~930px and * the whole column group wrapped under it, so here the brand is the item * that gives: it shrinks, the logo scales with it (max-width: 100%), and the * seals and gaps come down a step to leave it enough room at 768px. */ .pcf-footer__top { flex-wrap: nowrap; gap: 28px; } .pcf-footer__brand { flex: 1 1 320px; min-width: 0; } .pcf-footer__seals { gap: 12px; } .pcf-footer__seal img { height: 72px; } .pcf-footer__cols { flex: 0 0 auto; flex-wrap: nowrap; } } @media (max-width: 767px) { .pcf-footer { --pcf-footer-pad-top: 40px; } .pcf-footer__top { flex-direction: column; gap: 28px; } .pcf-footer__brand { max-width: none; } /* * Two columns side by side rather than a single stacked list: eight links in * one column pushes the legal block a full screen down on a phone. */ .pcf-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; /* No free space to absorb it once stacked, but be explicit. */ margin-left: 0; } .pcf-footer__legal { flex-direction: column; align-items: flex-start; } /* * At this width the EIN / email / tax line wraps, and a separator that was * sitting between two items ends up first on the next line, reading as a * stray bullet. Stack the items instead and drop the separators entirely -- * it matches the address block directly above, which is already one item * per line. */ .pcf-footer__meta span { display: block; } .pcf-footer__meta span + span::before { content: none; } } /* ----------------------------------------------------------------------------- * Header * * Demo A's two-tier header: a utility bar carrying the transactional links, and * a main bar carrying the logo and the sections. The comp's own note explains * the split -- "the main nav carries the sections someone browses, the utility * bar carries the things they came to do" -- which is why Contact, Get Updates, * Search and Donate sit above the nav rather than inside it. * * The dropdown and drawer behaviour is ported from the Goshen (goshen.in.gov) * child theme; see assets/js/header.js. The markup contract matters here: the * script toggles nothing but aria-expanded, so these rules key off that * attribute rather than off a state class. There is one source of truth for * whether a dropdown is open, and assistive technology reads the same one the * stylesheet does. * * FULL WIDTH, unlike the footer. Both bars run edge to edge on a flat 15px * gutter; see the note on --pcf-header-pad below. The footer * and the block canvas still sit inside wide-size, so the two ends of the page * are deliberately not symmetrical. * * NOT STICKY. The parent header sat in a .fixed wrapper. This does not, because * a sticky two-tier header eats 130px of a phone screen. To bring it back, give * .pcf-header position:sticky and top:0 -- but collapse the utility bar at the * same time, or it will follow the reader down the page. * -------------------------------------------------------------------------- */ /* * Same baseline, same reason, as the footer's: Maisha's * `a:hover { border-bottom: 2px solid currentColor }` (style.css:696) is * (0,1,1) and takes any link whose own rule is weaker. Buttons are excluded so * the component keeps its own states. */ .pcf-header a:not(.pcf-btn) { border-bottom: 0; text-decoration: none; box-shadow: none; } .pcf-header a:not(.pcf-btn):focus-visible, .pcf-header button:focus-visible, .pcf-modal a:not(.pcf-btn):focus-visible, .pcf-modal button:not(.pcf-btn):focus-visible { outline: 2px solid var(--wp--preset--color--maroon); outline-offset: 3px; } /* * THE DRAWER AND THE PANELS RING IN GOLD, NOT MAROON. * * Same indicator, different ground. Maroon on #150f11 measures 1.5:1, well * under the 3:1 that WCAG 1.4.11 asks of a focus indicator -- on the dark * surfaces the ring would be there and unseeable. The accent measures 10.5:1 * on the same ground. */ .pcf-mobile-drawer a:not(.pcf-btn):focus-visible, .pcf-mobile-drawer button:not(.pcf-btn):focus-visible, .pcf-header .pcf-dropdown a:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; } /* * A FOCUS THAT IS NOT A FOCUS-VISIBLE STILL GETS AN OUTLINE FROM THE PARENT. * * Maisha's `a:focus { outline: thin dotted }` (style.css:685) is (0,1,1) and * matches every focus; the ring above only matches :focus-visible. So anything * focused by a pointer or by script wore a dotted hairline that is not this * theme's focus indicator at all. * * It shows up wherever the scripts move focus for you: opening a dropdown or a * mega panel focuses its first link so a keyboard user lands inside, and after * a mouse click that focus is not focus-visible -- so the first item in every * panel opened with a mouse came up ringed. Same cause as the drawer's Donate * button, which the button component now handles for itself. * * Suppressing only the not-focus-visible case keeps the real ring intact: tab * to the same link and the maroon outline above still draws. * * The footer is included because the parent rule is: a clicked footer link took * the same dotted outline, it was just never reported. */ .pcf-header a:focus:not(:focus-visible), .pcf-header button:focus:not(:focus-visible), .pcf-footer a:focus:not(:focus-visible), .pcf-footer button:focus:not(:focus-visible), .pcf-mobile-drawer a:focus:not(:focus-visible), .pcf-mobile-drawer button:focus:not(:focus-visible), .pcf-modal a:focus:not(:focus-visible), .pcf-modal button:focus:not(:focus-visible) { outline: none; } /* * THE SAME KIND OF BASELINE FOR BUTTONS, AND FOR A NASTIER REASON. * * Maisha styles every bare