/* Arkansas Rural Health Partnership — mini-CMS stylesheet. Values measured from the original rendered site; structure and names are ours. Montserrat 20/28 · container 1012px · purple #5F4777 · gold #F7D475 · cream #F4F3E9 */ :root{ --ink:#000;--paper:#fff;--purple:#5f4777;--gold:#f7d475;--cream:#f4f3e9;--muted:#666; --wrap:1500px;--gap:5.5%;--font:"Montserrat",Helvetica,Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font);font-size:20px;line-height:28px;color:#000;background:var(--paper)} img,svg,video{max-width:100%;height:auto} figure{margin:0 0 1em} h1,h2,h3,h4,h5,h6{font-family:var(--font);font-weight:600;margin:0 0 .5em;line-height:1.1} /* measured from the original: headings are purple, body copy is black */ h1{font-size:33px;color:var(--purple)}h2{font-size:28px;color:var(--purple)} h3{font-size:20px;color:var(--purple)}h4{font-size:19px;font-weight:400;color:var(--purple)} p{margin:0 0 1em} a{color:var(--purple);text-decoration:none} a:hover,a:focus-visible{text-decoration:underline;text-underline-offset:3px} :focus-visible{outline:3px solid var(--purple);outline-offset:2px} [hidden]{display:none!important} /* ── layout ─────────────────────────────────────────────────────── */ .ahrp-section{padding:40px 0} .ahrp-row{width:min(80%,var(--wrap));margin-inline:auto;display:flex;flex-wrap:wrap;gap:var(--gap)} .ahrp-col{flex:1 1 100%;min-width:0} /* The original's grid, not an approximation of it: a 5.5% gutter with these exact column percentages. Each set sums to 100% with its gutters, which is why nothing wraps to a second line. */ .ahrp-col--half{flex-basis:47.25%} .ahrp-col--third{flex-basis:29.6667%} .ahrp-col--twothirds{flex-basis:64.833%} .ahrp-col--quarter{flex-basis:20.875%} .ahrp-col--threequarters{flex-basis:73.625%} .ahrp-col--fifth{flex-basis:15.6%} .ahrp-col--twofifths{flex-basis:36.7%} .ahrp-col--threefifths{flex-basis:57.8%} .ahrp-col--sixth{flex-basis:12.0833%} .ahrp-section--purple{background:var(--purple);color:var(--paper)} .ahrp-section--purple h1,.ahrp-section--purple h2,.ahrp-section--purple h3, .ahrp-section--purple h4,.ahrp-section--purple p,.ahrp-section--purple li{color:var(--paper)} .ahrp-section--purple a{color:var(--gold)} .ahrp-section--cream{background:var(--cream)} .ahrp-section--hero{ background:var(--purple);color:var(--paper);border-radius:38px; width:min(94%,1400px);margin:22px auto;padding:72px 0 88px; } .ahrp-section--hero h1,.ahrp-section--hero h2{color:var(--paper);font-size:52px} /* ── buttons ────────────────────────────────────────────────────── */ .ahrp-btn,a.ahrp-btn{ display:inline-block;background:var(--gold);color:var(--ink);font-size:18px;font-weight:500; padding:12px 48px;border-radius:29px;border:0;text-decoration:none;cursor:pointer; } .ahrp-btn:hover{filter:brightness(.95);text-decoration:none} .ahrp-section--purple .ahrp-btn{color:var(--ink)} /* ── header ─────────────────────────────────────────────────────── */ header{position:sticky;top:0;z-index:900;background:var(--paper);box-shadow:0 1px 0 rgba(0,0,0,.07)} header>figure{margin:0} /* 60px, not 52: max-height constrains the USED height, so it silently clamped the header rule's `height:60px!important` and squashed the logo box to 128x52. */ header img{max-height:60px;width:auto} header>*{vertical-align:middle} .ahrp-nav{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0} .ahrp-nav>li{position:relative} .ahrp-nav a{font-size:15px;font-weight:500;color:var(--ink)} .ahrp-nav .is-current>a{color:var(--purple);font-weight:600} .ahrp-subnav{list-style:none;margin:0;padding:10px 0;position:absolute;left:0;top:100%; min-width:240px;background:var(--paper);box-shadow:0 10px 30px rgba(0,0,0,.14); border-radius:8px;display:none;z-index:950} .ahrp-subnav a{display:block;padding:8px 18px} .has-children:hover>.ahrp-subnav,.has-children:focus-within>.ahrp-subnav, .has-children.is-open>.ahrp-subnav{display:block} .ahrp-mobile-nav{display:none} .ahrp-mobile-toggle{display:block;width:30px;height:20px;position:relative;cursor:pointer} .ahrp-mobile-toggle::before,.ahrp-mobile-toggle::after{content:"";position:absolute;left:0;right:0;height:3px;background:var(--purple)} .ahrp-mobile-toggle::before{top:0}.ahrp-mobile-toggle::after{bottom:0} /* The MIDDLE bar. The rule below at the phone breakpoint styles a `.ahrp-mobile-toggle > span` that the markup never contains, so only the two pseudo-element bars ever rendered and the hamburger showed 2 bars, not 3. Drawn on the element itself so no page markup has to change. */ .ahrp-mobile-toggle{background-image:linear-gradient(var(--purple),var(--purple));background-size:100% 3px;background-position:center;background-repeat:no-repeat} /* ── footer ─────────────────────────────────────────────────────── */ footer{background:var(--purple);color:var(--paper);padding:56px 0 30px} footer a{color:var(--paper)} footer h2,footer h3,footer h4{color:var(--paper)} footer img{max-height:60px;width:auto} footer ul{list-style:none;padding:0;display:flex;gap:16px;flex-wrap:wrap} /* ── cards ──────────────────────────────────────────────────────── */ .ahrp-card-title{font-size:19px;line-height:1.35;margin-bottom:8px} .ahrp-card-meta{font-size:13px;color:var(--muted);margin-bottom:12px} .ahrp-date{color:var(--muted)} .ahrp-more{display:inline-block;margin-top:14px;font-weight:600} .ahrp-card-media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block} /* ── pricing tiers ──────────────────────────────────────────────── */ /* Three tiers across, flush, as the original: white cards with a 36px radius and 30px of bottom padding. Every value below is measured from it — the invented scale read a size larger throughout and in the wrong colours. */ .ahrp-tiers{display:flex;flex-wrap:wrap;gap:0;align-items:stretch} .ahrp-tier{flex:1 1 33.333%;min-width:0;background:#fff;border:0;border-radius:36px; padding:0 0 30px;margin:30px -1px 0 0} .ahrp-tier-head{padding:10px 0;text-align:center} .ahrp-tier h2{font-size:36px;font-weight:600;color:var(--purple);text-align:center;margin:0} .ahrp-tier-head span,.ahrp-tier-head p{font-size:17px;font-weight:400;color:#000; text-align:center;display:block} .ahrp-price{padding:17px 0 30px;text-align:center} .ahrp-price-currency{font-size:18px;font-weight:400;color:var(--purple);vertical-align:top} .ahrp-price-amount{font-size:32px;font-weight:600;color:var(--purple);line-height:1.1} .ahrp-price-frequency{font-size:17px;color:var(--purple)} .ahrp-tier-body{padding:30px;font-size:20px;color:#000;text-align:left} .ahrp-tier-body ul{list-style:none;padding:0;margin:0} .ahrp-tier li{font-size:18px;font-weight:400;color:#000;text-align:left; padding:0 0 28.8px 14px} .ahrp-tier .ahrp-btn{font-size:18px;font-weight:500;padding:5.4px 18px} @media (max-width:980px){.ahrp-tier{flex:1 1 100%}} /* superseded by the measured pricing block above — this invented scale sat later in the file and quietly outranked it */ /* ── bios ───────────────────────────────────────────────────────── */ .ahrp-bio-store{display:none} .ahrp-bio-overlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(32,25,45,.72); padding:4vh 16px;overflow-y:auto;align-items:flex-start;justify-content:center} .ahrp-bio-overlay.is-open{display:flex} .ahrp-bio-overlay .ahrp-bio-panel{display:block!important;background:#fff;max-width:760px;width:100%; margin:auto;padding:34px;border-radius:8px;border:7px solid var(--purple);box-shadow:0 24px 60px rgba(0,0,0,.3)} .ahrp-bio-photo{max-width:170px;border-radius:50%;margin:0 auto 18px;display:block} .ahrp-bio-title{font-size:32px;text-align:center;color:var(--purple)} .ahrp-bio-body{font-size:17px;line-height:1.6} .ahrp-bio-lock{overflow:hidden} .ahrp-bio-close{position:fixed;top:16px;right:20px;width:44px;height:44px;font-size:30px;line-height:1; color:#fff;background:rgba(0,0,0,.35);border:0;border-radius:50%;cursor:pointer} .ahrp-bio-close:hover,.ahrp-bio-close:focus-visible{background:rgba(0,0,0,.6);outline:2px solid #fff} /* ── responsive ─────────────────────────────────────────────────── */ @media (max-width:980px){ body{font-size:18px;line-height:26px} h1{font-size:34px}h2{font-size:30px}h3{font-size:24px} .ahrp-section--hero h1,.ahrp-section--hero h2{font-size:34px} .ahrp-col--half,.ahrp-col--third,.ahrp-col--twothirds, .ahrp-col--quarter,.ahrp-col--threequarters,.ahrp-col--fifth,.ahrp-col--sixth{flex-basis:calc(50% - var(--gap)/2)} .ahrp-mobile-nav{display:block} .ahrp-nav{display:none;width:100%;flex-direction:column;gap:0} .ahrp-nav.is-open{display:flex} .ahrp-subnav{position:static;display:none;box-shadow:none;padding-left:14px} } @media (max-width:640px){ .ahrp-col,.ahrp-col--half,.ahrp-col--third,.ahrp-col--twothirds, .ahrp-col--quarter,.ahrp-col--threequarters,.ahrp-col--fifth,.ahrp-col--sixth{flex-basis:100%} .ahrp-section--hero{border-radius:22px;padding:44px 0 52px} } /* ── header layout ────────────────────────────────────────────────────────── The header is a section > row > columns like the rest of the page, so it is laid out by the shared row rules and sized further down by its own row width. The flat `header > figure / nav / a` set that used to live here dated from before that restructure: it matched nothing, but its 1320px cap on
still applied and held the whole bar 368px narrower than the original. */ header{display:block;padding:0} /* ── even cards ───────────────────────────────────────────────────────────── Columns in a row are equal height, so a card's button sits on one baseline across the row instead of wherever its text happens to end. */ .ahrp-row{align-items:stretch} .ahrp-col{display:flex;flex-direction:column} /* Scoped to the content region 2026-09-16: this is a CARD rule, but the header and footer logos are also `.ahrp-col > figure:first-child img`, and at (0,2,2) it outranked the header rule at (0,1,2) — forcing object-fit:cover and a 3/2 ratio onto a 2.128 mark and cropping it top and bottom. Measured: it matched ZERO cards on any template (cards use .ahrp-card-media img) and only the two logos, so scoping costs nothing. */ main#content .ahrp-col>figure:first-child img{width:100%;aspect-ratio:3/2;object-fit:cover} .ahrp-col .ahrp-btn{margin-top:auto;align-self:flex-start} .ahrp-col h3,.ahrp-col h4{margin-top:.6em} /* ── section rhythm ─────────────────────────────────────────────────────────*/ .ahrp-section+.ahrp-section{padding-top:48px} .ahrp-section--purple+.ahrp-section--purple{padding-top:0} .ahrp-section>.ahrp-row+.ahrp-row{margin-top:34px} .ahrp-section h2{margin-bottom:.6em} /* Content images inside a prose column should not be forced to a card ratio. */ .ahrp-col p img,.ahrp-col figure img{aspect-ratio:auto;height:auto} /* ── listings ───────────────────────────────────────────────────────────────*/ article{margin-bottom:34px} .ahrp-card-media img{border-radius:6px} /* ── forms ──────────────────────────────────────────────────────────────────*/ input[type=text],input[type=email],input[type=tel],textarea,select{ width:100%;font:inherit;font-size:17px;padding:13px 16px; border:1px solid #cfcad6;border-radius:8px;background:#fff;color:var(--ink); } textarea{min-height:150px;resize:vertical} label{display:block;font-size:15px;font-weight:600;margin-bottom:6px} form p{margin-bottom:18px} button[type=submit]{ background:var(--gold);color:var(--ink);border:0;border-radius:29px; font:inherit;font-size:18px;font-weight:500;padding:12px 48px;cursor:pointer; } button[type=submit]:hover{filter:brightness(.95)} /* ── staff / person cards ─────────────────────────────────────────────────── Three faults showed up together here and they compound: · portraits arrive at mixed native ratios (500x500, 426x492), and with no box they render at different heights, so names and buttons in one row sit at different baselines; · the source nests a SECTION inside each card to hold the BIO button, which inherited the 40px section padding and opened a gap mid-card; · one person has no BIO button, so that column has to hold its own shape. One photo box, no padding on nested sections, buttons on a common baseline. */ /* superseded by the image-fit block below, which keeps every image's own shape */ /* a nested section is a layout container here, not a page section */ .ahrp-col .ahrp-section, .ahrp-col section.ahrp-section{padding:0;background:none;margin:0} /* Fallbacks only. A module that carried its own type writes it inline, and inline wins; these sizes are the original's own defaults for anything that carried nothing, so nothing is invented and nothing is shrunk. */ .ahrp-col > h3,.ahrp-col > h4{margin:14px 0 4px;font-size:24px;line-height:1.25} .ahrp-col > p{margin:0 0 12px;font-size:20px;line-height:1.4} .ahrp-col .ahrp-btn{margin-top:auto} .ahrp-section--purple .ahrp-col > p{color:rgba(255,255,255,.85)} /* ── button wrappers are not buttons ──────────────────────────────────────── The source wraps each button in its own container, and mapping both to the same class turned the wrapper into a second, full-width pill stacked against the real one. Only the interactive element gets the pill. */ div.ahrp-btn{ display:block;background:none;padding:0;border-radius:0; margin-top:16px;width:auto;color:inherit;font:inherit; } a.ahrp-btn,button.ahrp-btn{ display:inline-block;background:var(--gold);color:var(--ink); /* The original's own button padding: 48px on the right, 35px on the left. Symmetric 48px made every unmeasured button 13px too wide. */ font-size:18px;font-weight:500;padding:12px 48px 12px 35px;border-radius:29px;width:auto; } /* `margin-top:auto` pins a button to the bottom of its column. With columns stretched to a common height that drops it far below its own text — the taller the row, the bigger the hole. Sit it under the text instead. */ .ahrp-col .ahrp-btn{margin-top:16px} .ahrp-col div.ahrp-btn+div.ahrp-btn, .ahrp-col a.ahrp-btn+a.ahrp-btn{margin-top:10px} /* person cards: text block grows, button follows immediately after it */ .ahrp-col > p:last-of-type{margin-bottom:6px} /* ── nav dropdowns, matched to the original's behaviour ───────────────────── The original fades its submenu in (visibility+opacity) rather than toggling display, and flies the THIRD level out to the right. Toggling display also breaks the hover bridge — the menu vanishes as the pointer crosses the gap between the item and the panel. */ .ahrp-nav > li{padding:0 11px} .ahrp-subnav{ display:block;visibility:hidden;opacity:0; transition:opacity .2s ease,visibility .2s ease; top:100%;left:0; } .has-children:hover > .ahrp-subnav, .has-children:focus-within > .ahrp-subnav, .has-children.is-open > .ahrp-subnav{visibility:visible;opacity:1} /* keep the pointer inside the item while it travels to the panel */ .ahrp-nav > li.has-children::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px} /* third level opens beside its parent, not on top of it */ .ahrp-subnav .ahrp-subnav{left:100%;top:-10px} .ahrp-subnav li{position:relative} @media (max-width:980px){ .ahrp-subnav{visibility:visible;opacity:1;display:none;position:static} .has-children.is-open > .ahrp-subnav{display:block} .ahrp-subnav .ahrp-subnav{left:auto;top:auto} .ahrp-nav > li.has-children::after{display:none} } /* ── footer layout ────────────────────────────────────────────────────────── The footer has the same row/column structure as the page body; treating it as plain content collapsed it into one stacked, full-bleed column. */ footer .ahrp-row{width:min(90%,var(--wrap));margin-inline:auto;gap:var(--gap);align-items:flex-start} footer .ahrp-col{display:block} footer h2{font-size:26px;margin:26px 0 14px} footer h3{font-size:19px;margin:0 0 14px;color:var(--paper)} footer h4{font-size:17px;margin:0 0 6px;font-weight:500} footer p{font-size:16px;line-height:1.6;margin:0 0 12px} footer a:hover{text-decoration:underline} footer > .ahrp-section{padding:0} footer .ahrp-section:last-child p{ font-size:13px;line-height:1.6;opacity:.82;text-align:center; width:min(90%,var(--wrap));margin:26px auto 0; } /* social buttons — the source used an icon font that no longer exists */ footer ul{display:flex;gap:12px;list-style:none;padding:0;margin:14px 0 0} /* Measured from the original: a 46px circle, a solid WHITE hairline border and a white glyph. Ours were 42px with a faded border and gold icons — the gold came from the purple section's link colour, which these are not. */ .ahrp-social{ display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:50%; border:1px solid #fff;color:#fff; } .ahrp-social svg{width:20px;height:20px;fill:currentColor} /* superseded: the hover is gold-filled with a purple glyph, set below */ .ahrp-social:hover{text-decoration:none} @media (max-width:980px){ footer .ahrp-row{gap:26px} footer .ahrp-col{flex-basis:100%} } /* Sized columns must not grow past their basis — with flex-grow:1 a half and a quarter expand to fill the row and push the third column onto its own line, which is what collapsed the footer's three columns into a stack. */ .ahrp-col--half,.ahrp-col--third,.ahrp-col--twothirds, .ahrp-col--quarter,.ahrp-col--threequarters, .ahrp-col--fifth,.ahrp-col--twofifths,.ahrp-col--threefifths, .ahrp-col--sixth{flex-grow:0} .ahrp-col--full{flex:1 1 100%} @media (max-width:980px){ .ahrp-col--half,.ahrp-col--third,.ahrp-col--twothirds, .ahrp-col--quarter,.ahrp-col--threequarters, .ahrp-col--fifth,.ahrp-col--twofifths,.ahrp-col--threefifths, .ahrp-col--sixth{flex-grow:1} } /* ── the fraction set must be COMPLETE ────────────────────────────────────── Two fractions the source actually uses had no basis defined, so they fell back to 100% and forced every sibling onto its own line. That is what broke the header: logo / nav / CTA are a fifth + three-fifths + a fifth. Both now live with the rest of the set, on the original's own percentages. */ /* ── header, addressed through its real structure ─────────────────────────── The header is a section > row > columns like any other content, so rules written against `header > figure` matched nothing once it was restructured. */ header{display:block;padding:0} header > .ahrp-section{padding:10px 0} header .ahrp-row{align-items:center;flex-wrap:nowrap;gap:20px} header .ahrp-col{display:flex;align-items:center;margin:0} header .ahrp-col--fifth:first-child{justify-content:flex-start} header .ahrp-col--threefifths{justify-content:center} header .ahrp-col--fifth:last-child{justify-content:flex-end} header figure{margin:0} header .ahrp-nav{justify-content:center;flex-wrap:wrap} header a.ahrp-btn{padding:12px 26px;font-size:15px;font-weight:600;white-space:nowrap} @media (max-width:980px){ header .ahrp-row{flex-wrap:wrap;gap:12px} header .ahrp-col--threefifths{order:5;flex-basis:100%;justify-content:flex-start} header .ahrp-col--fifth:first-child{flex-basis:auto;flex-grow:1} header .ahrp-col--fifth:last-child{flex-basis:auto} } /* A row that carries artwork is a picture, not a text container: it needs no inner padding and its own inline height/radius/border come from the source. */ .ahrp-row--art{display:block;padding:0} .ahrp-row--art > .ahrp-col{display:none} @media (max-width:980px){ .ahrp-row--art{height:auto!important;min-height:280px;margin-top:-140px!important;max-width:86%!important} } @media (max-width:640px){ .ahrp-row--art{min-height:200px;margin-top:-90px!important;max-width:92%!important;border-radius:28px!important} } /* Alignment carried from the original, in our vocabulary. */ .ahrp-center{text-align:center} .ahrp-right{text-align:right} .ahrp-left{text-align:left} .ahrp-justify{text-align:justify} .ahrp-center > .ahrp-btn,.ahrp-center .ahrp-btn{margin-left:auto;margin-right:auto} .ahrp-center .ahrp-nav{justify-content:center} /* A carried module keeps the original's own text presentation; it is a plain wrapper otherwise, so it must not introduce spacing of its own. */ .ahrp-mod{margin:0;padding:0} .ahrp-mod > h1:last-child,.ahrp-mod > h2:last-child, .ahrp-mod > h3:last-child,.ahrp-mod > p:last-child{margin-bottom:0} .ahrp-mod[style*="center"] .ahrp-btn{margin-left:auto;margin-right:auto} /* The footer's columns read left in the original; only the legal line centres. */ footer .ahrp-col .ahrp-mod,footer .ahrp-col p,footer .ahrp-col h2, footer .ahrp-col h3,footer .ahrp-col h4{text-align:left} footer .ahrp-section:last-child .ahrp-mod, footer .ahrp-section:last-child p{text-align:center} footer ul{justify-content:flex-start} footer figure img{max-height:64px;width:auto} /* The footer logo is an SVG with no intrinsic ratio; a width rule and a max-height rule together stretched it into bars. Fix one dimension only. */ footer figure{margin:0 0 16px} footer figure img,footer img[src$=".svg"]{ height:58px!important;width:auto!important;max-width:260px;object-fit:contain;object-position:left center; } /* columns read left; only the closing legal line is centred */ footer .ahrp-row .ahrp-col, footer .ahrp-row .ahrp-col *{text-align:left} footer .ahrp-row .ahrp-col ul{justify-content:flex-start} /* the copyright strip is the footer's LAST ROW, not its only section — `:last-of-type` matched the whole footer and centred all of it */ footer .ahrp-row:last-child *{text-align:center} /* Carried alignment is an inline style, so a class rule cannot override it. In the footer the column text reads left in the original. */ footer .ahrp-row .ahrp-col, footer .ahrp-row .ahrp-col .ahrp-mod, footer .ahrp-row .ahrp-col p, footer .ahrp-row .ahrp-col h2, footer .ahrp-row .ahrp-col h3, footer .ahrp-row .ahrp-col h4{text-align:left!important} footer > .ahrp-section:last-of-type .ahrp-mod, footer .ahrp-row:last-child p{text-align:center!important} /* ── post listings ────────────────────────────────────────────────────────── News, blog and category pages list posts as sibling
elements. The original lays them out as a card grid; without that they stack full-width and read as a wall of text. */ /* ── listing cards, to the original's own measurements ────────────────────── Three 360px cards with a 30px gutter; white, 30px radius, 24px of padding. The type here had been invented (13/15/18px, grey) and read as a different component entirely next to the original's 16/20px purple. */ /* The grid is the run of cards, never the column: a column also holds the section heading above them, and that heading is not a card. Pages whose listing the original lays out explicitly get those exact tracks inline; this fallback has to survive a narrow container too — a hard three columns turned a post's 267px sidebar into three 69px slivers. */ .ahrp-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:30px;align-items:start;width:100%} .ahrp-card-grid > article{ background:#fff;border:0;border-radius:30px; padding:24px;margin:0;display:flex;flex-direction:column; } .ahrp-card-grid > article .ahrp-card-title{font-size:20px;line-height:28px;font-weight:400;margin:0 0 8px} .ahrp-card-grid > article .ahrp-card-title a{color:var(--purple);font-weight:700} .ahrp-card-grid > article .ahrp-card-meta{font-size:16px;line-height:28.8px;color:var(--purple);margin:0 0 12px} .ahrp-card-grid > article .ahrp-card-meta a{font-size:16px;font-weight:700;color:var(--purple)} .ahrp-card-grid > article .ahrp-date{color:var(--purple)} .ahrp-card-grid > article .ahrp-card-body{flex:1 1 auto;font-size:16px;line-height:28.8px; font-weight:500;color:#666} .ahrp-card-grid > article .ahrp-card-media img{ width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px;margin-bottom:14px; } .ahrp-card-grid > article .ahrp-more{margin-top:14px;font-size:16px;font-weight:700; color:var(--purple);align-self:flex-start} @media (max-width:980px){ .ahrp-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important} } @media (max-width:640px){ .ahrp-card-grid{grid-template-columns:1fr!important} } @media (max-width:640px){ .ahrp-col:has(> article + article){grid-template-columns:1fr} } /* ── history timeline ─────────────────────────────────────────────────────── Was a builder plugin drawn by its own JavaScript. The content is a year, a heading and a paragraph, so it is an ordered list; the line and dots are CSS. */ .ahrp-timeline{ list-style:none;margin:36px 0;padding:0;position:relative; width:100%; } /* Each entry is a year column, the axis, then the story — 379 / 96 / 805 of a 1280 row on the original. Mine had been one narrow column with a year pill, which is a different component, not a different size. */ .ahrp-tl-item{ display:grid;grid-template-columns:29.6% 7.5% 62.9%; align-items:start;position:relative;padding:0 0 30px; } .ahrp-timeline::before{ content:"";position:absolute;left:33.35%;top:10px;bottom:10px;width:3px; background:var(--gold);border-radius:2px;transform:translateX(-50%); } .ahrp-tl-item::before{ content:"";position:absolute;left:33.35%;top:8px;width:18px;height:18px; border-radius:50%;background:var(--purple);border:3px solid var(--gold); transform:translateX(-50%); } .ahrp-tl-year{ grid-column:1;text-align:right;font-size:24px;font-weight:700; color:var(--purple);background:none;padding:0;border-radius:0;margin:0; } .ahrp-tl-title{ grid-column:3;grid-row:1;font-size:20px;font-weight:700;color:var(--purple); background:#fff;margin:0;padding:15px 20px 5px;line-height:1.3; } .ahrp-tl-body{ grid-column:3;grid-row:2;font-size:16px;line-height:1.4;color:#000; background:#fff;padding:0 20px 15px; } .ahrp-tl-body p{margin:0 0 .6em} .ahrp-tl-body p:last-child{margin:0} .ahrp-tl-body .header{margin:0} @media (max-width:780px){ .ahrp-tl-item{grid-template-columns:1fr;padding-left:30px} .ahrp-timeline::before,.ahrp-tl-item::before{left:8px} .ahrp-tl-year{grid-column:1;text-align:left;font-size:20px} .ahrp-tl-title,.ahrp-tl-body{grid-column:1;grid-row:auto} } /* ── person cards, matched to the original ────────────────────────────────── Portrait corners are generously rounded (30px), and BOTH the name and the role are brand purple — the role is not muted grey. */ /* superseded by the image-fit block below */ /* Superseded: person-card type is scoped to .ahrp-person further down, and every other column now carries the original's own type inline. */ /* listing cards keep their own smaller meta styling */ /* superseded: card meta follows the original's 16px purple, above */ /* ── header width and nav spacing, measured from the original ─────────────── The original's header row is 1688px wide and its five nav items total exactly 768px, spaced by each item's own padding. My container was 1320px AND added a 22px flex gap on top of that padding, so the row needed ~856px in ~780px and "Community Resources" wrapped to a second line. Match the width, and let the item padding do the spacing as the original does. */ header > .ahrp-section{padding:10px 0} header .ahrp-row{width:min(96%,1688px);flex-wrap:nowrap;gap:16px} header .ahrp-nav{gap:0;flex-wrap:nowrap;white-space:nowrap} header .ahrp-nav > li{padding:0 11px} header .ahrp-col--threefifths{flex-basis:auto;flex-grow:1} header .ahrp-col--fifth{flex-basis:auto;flex-grow:0} @media (max-width:1200px){ header .ahrp-nav{white-space:normal;flex-wrap:wrap;justify-content:center} } @media (max-width:980px){ header .ahrp-row{width:94%;flex-wrap:wrap;gap:12px} header .ahrp-nav{white-space:normal} } /* ── nav dropdowns, measured from the original ────────────────────────────── Two things I had wrong: the panel is PURPLE with white links (I had it inverted, white with purple links), and items with children carry a caret — a CSS triangle on the link, with padding-right making room for it. */ header .ahrp-nav > li > a{color:var(--purple);font-size:16px;font-weight:600;position:relative} header .ahrp-nav > li.has-children > a{padding-right:20px} header .ahrp-nav > li.has-children > a::after{ content:"";position:absolute;right:0;top:11px;width:0;height:0;margin-top:-2px; border-left:4px solid transparent;border-right:4px solid transparent; border-top:5px solid var(--purple); } header .ahrp-nav > li.has-children:hover > a::after, header .ahrp-nav > li.has-children:focus-within > a::after{border-top-color:var(--purple)} .ahrp-subnav{ background:#5b3e77;border-radius:15px;padding:20px 0;width:300px;min-width:300px; box-shadow:0 2px 5px rgba(0,0,0,.1); } .ahrp-subnav a{color:#fff;font-size:16px;font-weight:600;padding:6px 20px;display:block} .ahrp-subnav a:hover{color:var(--gold);text-decoration:none} /* a third level carries the same panel treatment, opening beside its parent */ .ahrp-subnav .ahrp-subnav{left:100%;top:-20px} .ahrp-subnav li.has-children > a{position:relative;padding-right:28px} .ahrp-subnav li.has-children > a::after{ content:"";position:absolute;right:14px;top:50%;width:0;height:0;margin-top:-4px; border-top:4px solid transparent;border-bottom:4px solid transparent; border-left:5px solid #fff; } @media (max-width:980px){ .ahrp-subnav{width:auto;min-width:0;background:transparent;box-shadow:none;padding:0 0 0 14px} .ahrp-subnav a{color:var(--ink)} header .ahrp-nav > li.has-children > a::after{top:50%;margin-top:-2px} } /* Buttons that sit together in the source read as one set of choices, so they share a line. The column they live in is a flex COLUMN, which stacks its children — hence the row wrapper. */ .ahrp-btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:6px} .ahrp-btn-row .ahrp-btn{margin:0} .ahrp-center .ahrp-btn-row,.ahrp-mod[style*="center"] .ahrp-btn-row{justify-content:center} @media (max-width:520px){ .ahrp-btn-row{flex-direction:column;align-items:stretch} .ahrp-btn-row .ahrp-btn{text-align:center} } /* ── image fit ────────────────────────────────────────────────────────────── Only PERSON portraits get the square crop. Applying it to every column image cut the wide members map down to a square and chopped both sides off. */ .ahrp-col > img,.ahrp-col > .ahrp-mod > img, .ahrp-col > figure > img,.ahrp-col > a > img{ aspect-ratio:auto;object-fit:contain;border-radius:0;width:100%;height:auto;max-width:100%; } /* Superseded: every image now carries its own measured radius, fit and size. The blanket 30px here was invented, and it was landing on whatever my person-card detector happened to tag — including the blog hero's badge. */ /* wide artwork should never exceed its column or the page */ .ahrp-col img,.ahrp-mod img,figure img{max-width:100%;height:auto} .ahrp-row{max-width:100%} img{max-width:100%} /* ── content width, measured from the original ────────────────────────────── The original's content rows are 1500px (the footer's are 1680, the header's 1688). I had built everything at 1012px — the width of ONE row I happened to measure early — so every page was substantially narrower than live. Rows that carry their own max-width in the source still override this. */ .ahrp-row{width:min(80%,var(--wrap))} footer .ahrp-row{width:min(92%,1680px)} header .ahrp-row{width:min(96%,1688px)} /* superseded: the timeline fills its column, as the original's does */ /* ── colour belongs to the carried module, not to my card styling ─────────── The person-card rules set a purple colour on every column heading and paragraph. In a purple section that beat the colour carried from the source (#FFFFFF / #F7D475) and rendered the text purple-on-purple — the whole "What We Do" copy was present, styled, and invisible. Card colours now apply ONLY to actual person cards; everywhere else the carried colour inherits, exactly as the original does. */ .ahrp-col > h3,.ahrp-col > h4, .ahrp-col > .ahrp-mod > h3,.ahrp-col > .ahrp-mod > h4, .ahrp-col > p,.ahrp-col > .ahrp-mod > p{color:inherit} .ahrp-person > h3,.ahrp-person > h4, .ahrp-person > .ahrp-mod > h3,.ahrp-person > .ahrp-mod > h4{ font-size:20px;font-weight:600;color:var(--purple);margin:16px 0 4px;line-height:1.25; } .ahrp-person > p,.ahrp-person > .ahrp-mod > p{ font-size:18px;line-height:1.4;color:var(--purple);margin:0 0 14px; } .ahrp-section--purple .ahrp-person > h3,.ahrp-section--purple .ahrp-person > h4, .ahrp-section--purple .ahrp-person > p{color:var(--paper)} /* headings keep their own colour unless a module carried one */ .ahrp-mod[style*="color"] h1,.ahrp-mod[style*="color"] h2, .ahrp-mod[style*="color"] h3,.ahrp-mod[style*="color"] h4, .ahrp-mod[style*="color"] p,.ahrp-mod[style*="color"] li, .ahrp-mod[style*="color"] span,.ahrp-mod[style*="color"] strong{color:inherit} /* ── purple sections ──────────────────────────────────────────────────────── Every module now carries the original's own colour and type inline, so this block no longer dictates either. An earlier version forced 36px and white with `!important` to rescue a broken colour-carry; left in place it overrode the real values and shrank the hero headings that sit on purple. What remains is only what the original sets and no module carries: the two link colours, and the fallback for text that carried nothing at all. */ .ahrp-section--purple{color:#fff} .ahrp-section--purple .ahrp-btn{color:var(--ink)} .ahrp-section--purple a:not(.ahrp-btn){color:var(--gold)} /* A lead paragraph sharing a single full-width column with a centred heading is centred with it, as in the original. Multi-column body copy stays left. */ .ahrp-section--purple .ahrp-col--full .ahrp-mod p, .ahrp-section--purple .ahrp-col--full > p{text-align:center} .ahrp-section--purple .ahrp-col--half p, .ahrp-section--purple .ahrp-col--third p, .ahrp-section--purple .ahrp-col--half h4, .ahrp-section--purple .ahrp-col--third h4{text-align:left} /* ── blog / category archives ─────────────────────────────────────────────── These pages are the theme's own archive, not a builder layout: a 1080px container holding a floated 79.125% article column and a 20.875% sidebar. Without it the articles ran the full width of the viewport and their images blew up to 1600px wide. Measured from the original. */ .ahrp-container{width:80%;max-width:1080px;margin-inline:auto;padding-top:58px} #content-area{display:flow-root} #left-area{float:left;width:79.125%;padding-right:5.5%;padding-bottom:23px} #sidebar{float:left;width:20.875%;padding-left:30px;padding-bottom:28px} #left-area > article{margin-bottom:56px} #left-area .ahrp-card-media img{width:100%;height:auto;aspect-ratio:auto} #left-area .ahrp-card-title{font-size:28px;font-weight:400;line-height:1.2;margin:14px 0 10px} #left-area .ahrp-card-title a{color:var(--purple);font-weight:400} #left-area .ahrp-card-meta{font-size:14px;font-weight:400;color:#000;margin:0 0 12px} #left-area .ahrp-card-meta a{color:#523e67;font-weight:700} #left-area .ahrp-date{color:#000} @media (max-width:980px){ #left-area,#sidebar{float:none;width:100%;padding-right:0;padding-left:0} } /* The original's bold is 700; ours resolved to 900 because Montserrat ships a black weight and `bolder` climbed to it. */ strong,b{font-weight:700} /* ── single post header ───────────────────────────────────────────────────── The post title carries the same class as a listing card's title, so the card rule shrank every article headline to 19px. A post's own H1 is 33px. */ h1.ahrp-card-title{font-size:33px;font-weight:600;line-height:1.2; color:var(--purple);margin:0 0 10px} /* The post's meta line, measured: 20px/600 grey, its links the same. */ h1.ahrp-card-title + p, h1.ahrp-card-title + p a, h1.ahrp-card-title + p .ahrp-date{font-size:20px;font-weight:600;color:#666} h1.ahrp-card-title + p{margin:0 0 24px} main#content h1.ahrp-card-title + p a{color:#666} /* An in-content link the original never styled is its theme's default blue. Ours defaulted to brand purple, which recoloured hundreds of body links. `:where()` was wrong here: at zero specificity the bare `a{}` rule above still won, so nothing changed. This has to outrank that one rule while staying below the components' own. */ main#content a:not(.ahrp-btn){color:#2ea3f2} main#content .ahrp-card-title a,main#content .ahrp-card-meta a, main#content .ahrp-more,main#content .ahrp-nav a, main#content .ahrp-timeline a{color:var(--purple)} /* The original ships these blocks but never paints them — popup bodies and their headings sit behind `display:none`. Declassing removed what hid them, so a dozen stray "BIO" headings and whole biographies appeared in the page. */ .ahrp-source-hidden{display:none} /* ── cards that embed a whole page layout ─────────────────────────────────── A member card holds that member's own section/row/column tree. Those nested rows must not take the page row's 80% width — that shrank every member's text from the original's 506px to 461px and its photo with it. The 20px + 42px inset is the original's own: card 630 → content 506. */ .ahrp-card-grid > article:has(.ahrp-section){background:none;padding:20px;border-radius:0} .ahrp-card-grid > article .ahrp-row{ width:100%!important;max-width:none!important;padding-inline:20px!important; margin-inline:0!important; } /* The original insets the text a further 22px inside the photo's box: card 630 → photo 550 → text 506. One inset for both made the photo text-width. */ .ahrp-card-grid > article .ahrp-mod > h2, .ahrp-card-grid > article .ahrp-mod > h3, .ahrp-card-grid > article .ahrp-mod > h4, .ahrp-card-grid > article .ahrp-mod > p, .ahrp-card-grid > article .ahrp-mod > ul, .ahrp-card-grid > article .ahrp-mod > div > p, .ahrp-card-grid > article .ahrp-mod > div > ul{ /* margin, not padding: the original insets the text BOX to 506px inside a 550px container, and padding would have kept the box at 550. */ margin-inline:22px;padding-inline:0; } .ahrp-card-grid > article .ahrp-section{padding:0;background:none} /* ── archive sidebar, measured from the original ──────────────────────────── 225px rail: 19px purple widget titles, 20px body, grey links, no bullets. */ #sidebar{font-size:20px;line-height:28px;color:#000} #sidebar h3,#sidebar h4,#sidebar .ahrp-widget-title{ font-size:19px;font-weight:400;line-height:19px;color:var(--purple);margin:0 0 14px} #sidebar ul{list-style:none;padding-left:0;margin:0 0 28px} #sidebar li{font-size:20px;line-height:28px;margin:0 0 6px} main#content #sidebar a{color:#666;font-weight:400} /* ── featured-post slider ─────────────────────────────────────────────────── The blog index leads with one featured post: a 532px image and a 532px column of text, 62px apart, inside a 1126px box. Flattened it rendered as a full-bleed image with the headline underneath. */ .ahrp-slider{list-style:none;margin:0;padding:0} .ahrp-slide{display:grid;grid-template-columns:1fr 1fr;gap:4.85%; align-items:start;padding-inline:6.02%;width:100%;margin-inline:auto} /* proportions, not the pixels I read off a 1600px window: the original's slide is 6.02% padding and a 4.85% gutter, so it keeps pace with the page instead of freezing its image at 532px on every screen size */ .ahrp-slide + .ahrp-slide{display:none} .ahrp-slide-media img{width:100%;height:auto;display:block} .ahrp-slide-body{padding:29px 0} .ahrp-slide-title,.ahrp-slide-body h2{font-size:40px;font-weight:600; color:var(--purple);line-height:1.15;margin:0 0 10px} .ahrp-slide-title a,.ahrp-slide-body h2 a{color:var(--purple)} @media (max-width:860px){ .ahrp-slide{grid-template-columns:1fr;gap:20px;padding:0} .ahrp-slide-title,.ahrp-slide-body h2{font-size:28px} } /* Each card photo is sized from its own measurement, so it bleeds past the card's padding only where the original does. Forcing every one of them to bleed was right for the blog index and wrong everywhere else. */ .ahrp-card-grid > article{overflow:hidden} .ahrp-card-grid > article > .ahrp-card-media, .ahrp-card-grid > article > a.ahrp-card-media{ display:block;margin:0 auto 14px; } /* Pagination keeps the page's own link styling — the news index styles it 18px bold purple but every other archive leaves it as a default link, and one rule for all of them was wrong on far more pages than it was right. */ .ahrp-pagination{display:flex;justify-content:space-between;margin:40px 0 0} /* An image the original renders WIDER than its column keeps that width — the staff portraits deliberately overhang theirs. Below the desktop breakpoint they come back inside it. */ @media (max-width:980px){ main#content img[style*="width:"]{width:auto!important;max-width:100%!important} } /* Popup panels: present, hidden, and opened by the same overlay as the bios. */ .ahrp-panel{display:none} /* A board member's popup is the original's own hidden section, so it arrives with none of the card styling the injected staff bios get — it opened as bare text over the page behind it. Same panel treatment for both. */ .ahrp-bio-overlay .ahrp-panel{ display:block!important;background:#fff;max-width:760px;width:100%; margin:auto;padding:34px;border-radius:8px;border:7px solid var(--purple); box-shadow:0 24px 60px rgba(0,0,0,.3); } /* its inner section/row/column scaffolding must not re-impose page layout */ .ahrp-bio-overlay .ahrp-panel .ahrp-section, .ahrp-bio-overlay .ahrp-panel .ahrp-row, .ahrp-bio-overlay .ahrp-panel .ahrp-col, .ahrp-bio-overlay .ahrp-panel .ahrp-mod{ width:100%!important;max-width:100%!important;display:block!important; padding:0!important;margin:0 0 14px!important;background:none!important; height:auto!important;min-height:0!important;border-radius:0!important; } .ahrp-bio-overlay .ahrp-panel img{ width:170px!important;max-width:170px!important;height:170px!important; display:block;margin:0 auto 18px;border-radius:50%!important; object-fit:cover;aspect-ratio:1/1!important; } .ahrp-bio-overlay .ahrp-panel .ahrp-bio-title{ font-size:32px!important;text-align:center!important;color:var(--purple)!important; margin:0 0 14px!important; } .ahrp-bio-overlay .ahrp-panel h1,.ahrp-bio-overlay .ahrp-panel h2, .ahrp-bio-overlay .ahrp-panel h3{ font-size:26px!important;color:var(--purple)!important;text-align:center!important; margin:0 0 12px!important; } .ahrp-bio-overlay .ahrp-panel h4{font-size:19px!important;color:var(--purple)!important; text-align:left!important;margin:18px 0 6px!important} .ahrp-bio-overlay .ahrp-panel p,.ahrp-bio-overlay .ahrp-panel li{ font-size:17px!important;line-height:1.6!important;color:#000!important; text-align:left!important; } /* the panel's own "BIO" heading is the trigger's label, not a title */ .ahrp-bio-overlay .ahrp-panel .ahrp-mod:has(> h2:only-child), .ahrp-bio-overlay .ahrp-panel h2:only-child{font-size:0!important;margin:0!important} /* Buttons inside a listing card: the original pads these 48px right and 35px left. They can't take their own measurement — one instance name covers every embedded page in the list — so they take the shape the original gives them. */ .ahrp-card-grid a.ahrp-btn,.ahrp-card-grid button.ahrp-btn{padding:12px 48px 12px 35px} /* The BIO buttons are the exception: the original pads those evenly. */ a.ahrp-bio-trigger{padding:12px 48px} /* The listing card's "read more" is a filled pill in the original, not a text link — measured: white on #523e67, 16px, 10px padding, 23px radius, uppercase. Ours had been rendering it as faint text on the cream card. */ .ahrp-card-grid .ahrp-more, #left-area .ahrp-more{ display:inline-block;background:#523e67;color:#fff;font-size:16px;font-weight:400; text-transform:uppercase;padding:10px;border-radius:23px;line-height:1.2; align-self:flex-start; } main#content .ahrp-card-grid .ahrp-more, main#content #left-area .ahrp-more{color:#fff} /* ── header, measured from the original ───────────────────────────────────── Logo 128x60 starting at the 1688px row's left edge, and nav links in BLACK. Ours was rendering the mark at 78x52 flush to a 32px gutter, and the links in brand purple — both wrong on all 145 pages. */ header figure,header .ax-figure{margin:0} header figure img,header .ax-figure img,header .ahrp-col--fifth img{ /* !important: an earlier rule in this sheet still sized the mark at 78x52 */ width:128px!important;height:60px!important;max-width:128px!important; object-fit:contain;object-position:left center; } header .ahrp-nav > li > a{color:#000} header .ahrp-nav .is-current > a{color:#000} /* ── spacing between modules ──────────────────────────────────────────────── The original separates the blocks inside a column by 2.75% of the row width (35px in a 1280px row) and drops it on the last one. Mine had none, so every heading butted straight into the paragraph under it, on every page. The percentage is the original's own unit — it scales with the row, as there. */ main#content .ahrp-mod{margin-bottom:2.75%} main#content .ahrp-mod:last-child{margin-bottom:0} main#content .ahrp-col > .ahrp-mod:only-child{margin-bottom:0} /* The header row is 80% of the viewport capped at 1688px — the same rule as every content row, measured at 1280px in a 1600px window. Mine ran to 96%, which is why the nav fitted on one line where the original wraps it. */ header .ahrp-row{width:min(80%,1688px)!important} /* A card's "read more" pill takes the card's line-height otherwise — 60.8px, which made the pill twice the original's 39px. */ .ahrp-card-grid .ahrp-more,#left-area .ahrp-more{line-height:1.2!important} /* ── cards sit on a common height ─────────────────────────────────────────── Each card was sizing to its own text, so a row of three ended at three different depths and the read-more sat at three different heights. Stretch them to the tallest in the row, let the body take up the slack, and pin the action to the bottom so it lands on one line across the row. */ .ahrp-card-grid{align-items:stretch} .ahrp-card-grid > article{display:flex;flex-direction:column;height:100%} .ahrp-card-grid > article .ahrp-card-body{flex:1 1 auto} .ahrp-card-grid > article .ahrp-more{margin-top:auto;align-self:flex-start} /* The featured tier: cream, softly shadowed, and raised level with the top of the row while the others start 30px lower. The class was already on the Gold column — it simply had no rule, so all three read as the same plan. */ .ahrp-tier.is-featured{background:var(--cream);box-shadow:0 0 12px rgba(0,0,0,.1);margin-top:0} /* ── footer, measured from the original ───────────────────────────────────── Same 80% row as everything else (1280px in a 1600px window, not 92%), and a 151x71 logo sitting at the column's left edge rather than centred at 87px. */ footer .ahrp-row{width:min(80%,1690px)!important} footer figure,footer .ax-figure{margin:0;text-align:left} footer figure img,footer .ax-figure img{ width:151px!important;height:71px!important;max-width:151px!important; object-fit:contain;object-position:left center;margin-inline:0; } /* ── contact form, measured from the original ─────────────────────────────── Pill fields (26px, 50px tall), Email and Phone sharing a row, and a compact right-aligned Submit. The labels stay in the markup for screen readers but are taken out of the visual flow — the original is placeholder-only, and losing the label with it would be an accessibility regression, not parity. */ form p[data-id]{margin:0} form:has(p[data-id]){display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:540px} form p[data-id="name"],form p[data-id="message"], form p[data-id="send"],form > div[aria-hidden]{grid-column:1 / -1} form p[data-id="email"]{grid-column:1} form p[data-id="phone"]{grid-column:2} form p[data-id] label{ position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); white-space:nowrap;margin:0; } form p[data-id] input,form p[data-id] textarea{ width:100%;border-radius:26px;padding:13px 22px;font-size:17px; } form p[data-id] input{height:50px} form p[data-id] textarea{height:150px;border-radius:26px} form button[type=submit],form .ahrp-btn[type=submit]{ justify-self:end;width:auto;font-size:18px;font-weight:500; padding:6px 20px;border-radius:25px; } /* A column is a flex column, so a module shrank to its content and sat hard left — the blog hero's BLOG EDITION badge among them. The original centres these with auto side margins; stretching the module to the column lets its own carried text-align do the same job. */ .ahrp-col > .ahrp-mod{align-self:stretch} /* A module the original capped narrower than its column is centred in it with auto side margins. Without that the blog hero's badge sat hard left. */ .ahrp-mod[style*="max-width"]{margin-inline:auto} /* The footer is left-aligned on the original, top to bottom. A carried text-align:center from the source's footer modules was overriding the column rules and centring the mission copy, the link list and the address. */ footer .ahrp-col,footer .ahrp-col *, footer .ahrp-mod,footer .ahrp-mod *{text-align:left!important} /* the ROW of icons aligns left; the icon itself keeps its glyph centred — naming `.ahrp-social` here pushed every glyph to the circle's left edge */ footer .ahrp-socials{justify-content:flex-start} footer .ahrp-social,main#content .ahrp-social{justify-content:center!important} /* Submit sits at the right edge of the form, as the original has it. */ form > div:has(> button[type=submit]){grid-column:1 / -1;text-align:right} /* ── below the desktop breakpoint ─────────────────────────────────────────── Every geometric value carried from the original is an INLINE style read at desktop width, and an inline style has no breakpoint — so a row written `width:55%` stayed 55% on a phone (275px of a 500px screen) and the heading inside it collapsed to a 75px box with the text spilling out of the panel. The original re-lays all of this out under 980px; these overrides are what let ours do the same, and they have to be !important to outrank the inline. Measured on the original at 500px: a 93% row with a 20px gutter. */ @media (max-width:980px){ /* the SECTION carries a carried `width:55%` too — leaving it out of this list left the whole hero a 275px column on a 500px screen */ main#content .ahrp-section,main#content section.ahrp-section{ width:100%!important;max-width:100%!important; height:auto!important;min-height:0!important;margin-top:0!important; padding-left:0!important;padding-right:0!important; } main#content .ahrp-row,header .ahrp-row,footer .ahrp-row{ width:93%!important;max-width:100%!important; padding-left:20px!important;padding-right:20px!important; margin-top:0!important;height:auto!important;min-height:0!important; } main#content .ahrp-col,main#content .ahrp-col--full,main#content .ahrp-col--half, main#content .ahrp-col--third,main#content .ahrp-col--twothirds, main#content .ahrp-col--quarter,main#content .ahrp-col--threequarters, main#content .ahrp-col--fifth,main#content .ahrp-col--twofifths, main#content .ahrp-col--threefifths,main#content .ahrp-col--sixth{ flex-basis:100%!important;max-width:100%!important;width:100%!important; } main#content .ahrp-mod{max-width:100%!important;margin-inline:0!important} /* An image keeps the size the ORIGINAL gives it on a phone, carried as --wm; `width:auto` here blew fixed-size art up to its natural size — the 82px blog badge rendered nearly 500px wide. */ main#content img,main#content .ahrp-card-media img{ max-width:100%!important;height:auto!important; } main#content img[style*="--wm"]{width:var(--wm)!important} .ahrp-card-grid{grid-template-columns:1fr!important;gap:24px!important} .ahrp-slide{grid-template-columns:1fr!important;padding-inline:0!important;gap:20px!important} .ahrp-card-grid > article .ahrp-row{padding-inline:20px!important} } /* ── mobile menu, to the original's own spec ──────────────────────────────── Read from its stylesheet, not guessed: the panel is absolutely positioned under the header at full width on a #5F4777 ground with 5% padding; links are white 14px blocks padded 10px 5% with a hairline rule; an item with children is bold on a faint tint and its submenu is always expanded and indented. Ours was a 229px black list floating inside the header. */ @media (max-width:980px){ header{position:relative} header .ahrp-nav{ position:absolute;left:0;top:100%;width:100%;z-index:900; background:#5f4777;padding:5%;margin:0;gap:0; flex-direction:column;align-items:stretch;display:none; } header .ahrp-nav.is-open{display:flex} header .ahrp-nav li{width:100%;padding:0;position:static} header .ahrp-nav a,header .ahrp-nav > li > a,header .ahrp-subnav a{ display:block;color:#fff!important;font-size:14px!important;font-weight:500; padding:10px 5%;border-bottom:1px solid rgba(0,0,0,.03); } header .ahrp-nav .has-children > a{font-weight:700;background:rgba(0,0,0,.03)} /* the original leaves submenus open on a phone rather than hiding them */ header .ahrp-subnav{ position:static!important;display:block!important;opacity:1!important; visibility:visible!important;background:none!important;box-shadow:none!important; border-radius:0!important;padding:0 0 0 10px!important;width:auto!important; min-width:0!important;transform:none!important; } header .ahrp-subnav li{padding-left:5%} header .ahrp-nav > li > a::after{display:none} /* the hamburger: the original's is a 71px purple glyph from an icon font we cannot ship, so ours is drawn in CSS at the same weight and colour */ .ahrp-mobile-toggle{width:34px;height:24px} .ahrp-mobile-toggle::before,.ahrp-mobile-toggle::after, .ahrp-mobile-toggle > span{background:var(--purple);height:3px} } /* A few pixels of sideways scroll on a phone come from the negative-margin artwork rows; clip rather than let the page slide. */ @media (max-width:980px){ html,body{overflow-x:clip} } /* The featured slider's photo is 25px-rounded on the original. A slide is not one of the builder module types I measure, so this image fell through the per-image radius carry entirely. */ .ahrp-slide-media img,.ahrp-slide img{border-radius:25px} /* ── mobile header, measured from the original ────────────────────────────── It stacks into three centred rows — a 256x120 logo, the hamburger, then the gold Contact Us pill — and stands 346px tall. Ours stayed a single cramped bar because the desktop row never reflowed. */ @media (max-width:980px){ header .ahrp-row{flex-direction:column!important;align-items:center!important; flex-wrap:wrap!important;gap:16px!important;padding-top:20px!important; padding-bottom:20px!important;} header .ahrp-col{display:flex!important;justify-content:center!important; align-items:center!important;order:2} header .ahrp-col--fifth:first-child{order:1} header figure img,header .ax-figure img{ width:256px!important;height:120px!important;max-width:256px!important; /* an older 52px max-height was capping the mark, and `cover` cropped the tagline off the bottom of it */ max-height:none!important;object-fit:contain!important; object-position:center!important; } header .ahrp-mobile-toggle{width:52px;height:36px;margin-inline:auto} header a.ahrp-btn{order:3;font-size:18px;padding:12px 48px} /* Artwork rows are sized deliberately; the generic height reset above would collapse the hero photo to a letterbox strip. */ main#content .ahrp-row--art{ height:auto!important;min-height:280px!important; max-width:80%!important;width:80%!important; } } /* The pull that tucks an artwork row up into the panel above it is a different number on a phone than on a desktop, so it travels with the element. */ @media (max-width:980px){ main#content .ahrp-row[style*="--mtm"]{margin-top:var(--mtm)!important} } /* The logo's anchor is inline, so its clickable box was shorter than the mark it wraps (128x24 around a 128x52 logo). Make the whole thing the target. */ header figure a,header .ax-figure a,footer figure a{display:inline-block;line-height:0} /* ── staff cards sit on a common baseline ─────────────────────────────────── The BIO buttons are ours — the original hides them here — so nothing in the source aligns them, and a one-line role versus a two-line role left them at different heights across a row. Stretch the cards to the tallest in the row and pin the button to the bottom so they land on one line. */ .ahrp-row:has(> .ahrp-person){align-items:stretch} .ahrp-col.ahrp-person{display:flex;flex-direction:column} .ahrp-col.ahrp-person > .ahrp-btn, .ahrp-col.ahrp-person > .ahrp-center, .ahrp-col.ahrp-person > .ahrp-left, .ahrp-col.ahrp-person > .ahrp-right{margin-top:auto!important} .ahrp-col.ahrp-person > .ahrp-center .ahrp-bio-trigger{margin-top:0} .ahrp-col.ahrp-person > .ahrp-mod:last-of-type{margin-bottom:14px} /* The auto margin computed to 0 because the free space was already spoken for, so the text block takes it instead and the button lands at the bottom. */ .ahrp-col.ahrp-person > .ahrp-mod{flex:1 1 auto!important} .ahrp-col.ahrp-person > .ahrp-center, .ahrp-col.ahrp-person > .ahrp-left, .ahrp-col.ahrp-person > .ahrp-right{flex:0 0 auto!important} /* ── member cards, rounded to match the rest of the site ──────────────────── The original leaves these square; every other card on the site is rounded (news 30px, blog 25px, tiers 36px), so these follow at 30px. A deliberate departure from the original, at the client's request. */ .ahrp-card-grid > article:has(.ahrp-section){ border-radius:30px;overflow:hidden;background:var(--cream); } /* ── staff cards: align on the button, not on a detector ──────────────────── `.ahrp-person` is set by a heuristic that tags the cards WITHOUT a BIO button and misses the ones with it, so every rule scoped to it was dead here. Select on the thing that actually defines these cards — the bio trigger. */ .ahrp-row:has(.ahrp-bio-trigger){align-items:stretch} .ahrp-col:has(.ahrp-bio-trigger){display:flex;flex-direction:column} .ahrp-col:has(.ahrp-bio-trigger) > .ahrp-mod{flex:1 1 auto} .ahrp-col:has(.ahrp-bio-trigger) > .ahrp-center, .ahrp-col:has(.ahrp-bio-trigger) > .ahrp-left, .ahrp-col:has(.ahrp-bio-trigger) > .ahrp-right{flex:0 0 auto;margin-top:auto} /* ── the members map on a purple ground ───────────────────────────────────── It is a transparent PNG with dark labels, unreadable straight on the purple, so it gets the white ground it was drawn for. Named by its own file: the earlier blanket rule for "images in a purple section" also caught the WHITE footer logo and turned it into a white slab on every page. */ main#content img[src*="Members_Rural_Designations"]{ background:#fff;border-radius:12px;padding:16px; width:100%!important;max-width:100%!important; } main#content a:has(> img[src*="Members_Rural_Designations"]){display:block;width:100%} /* Gold circles with a purple fill on hover — the client's choice, not the original's white. Pinned so the purple section's link colour can't repaint them, and the glyph follows the text colour so the hover works. */ footer .ahrp-social,main#content .ahrp-social, .ahrp-section--purple a.ahrp-social{ color:var(--gold)!important;border-color:var(--gold)!important;background:transparent; transition:background .15s ease,color .15s ease; } footer .ahrp-social:hover,footer .ahrp-social:focus-visible, main#content .ahrp-social:hover,main#content .ahrp-social:focus-visible, .ahrp-section--purple a.ahrp-social:hover, .ahrp-section--purple a.ahrp-social:focus-visible{ color:var(--purple)!important;background:var(--gold)!important; } footer .ahrp-social svg,main#content .ahrp-social svg{fill:currentColor!important} /* ── header fits between the phone breakpoint and full desktop ────────────── The three header columns are PERCENTAGE flex items (`flex:0 1 auto`), so they shrink below their own contents: measured at 1280px the 128px logo sat in a 117px column and the 181px Contact button in a 164px one. Neither of those can shrink, so both spilled over the nav — the logo landing on "About Us" and the Community Resources arrow on the Contact Us button. Pin the two fixed-size columns to their content, let the NAV absorb the slack, and clamp the menu type/gap so the links scale down instead of colliding. */ @media (min-width:981px){ header .ahrp-row{flex-wrap:nowrap;align-items:center} header .ahrp-col--fifth{flex:0 0 auto;min-width:max-content} header .ahrp-col--threefifths{flex:1 1 auto;min-width:0} /* The nav UL is centred in its column and sized to its content, so it still bled ~9px over the logo and the button. Constrain it to the column so overflow is structurally impossible: if it cannot fit it WRAPS to a second line, which is the correct degradation — it can never overlap again. */ header .ahrp-col--threefifths > *, header .ahrp-col--threefifths nav{min-width:0;max-width:100%} header .ahrp-nav{gap:6px clamp(7px,0.8vw,22px);max-width:100%;flex-wrap:wrap;justify-content:center} header .ahrp-nav > li > a{font-size:clamp(12px,0.95vw,15px);white-space:nowrap} /* The Contact button carries `margin-top:16px` from the original Divi module. Inside a centre-aligned flex column that offsets it 8px below the logo and nav centre line — measured centres were logo 51 / nav 54 / button 62. */ /* `.ahrp-col .ahrp-btn` is (0,2,0) and outranks `header a.ahrp-btn` at (0,1,2), so the margin has to be reset at (0,2,1) or higher to actually win. */ header .ahrp-col .ahrp-btn{margin:0} header .ahrp-col--fifth:last-child{align-items:center;justify-content:flex-end} /* The logo figure is a few px taller than the mark, which floated it above the shared centre line; centre its contents rather than letting them sit top. */ header .ahrp-col--fifth:first-child{align-items:center} header figure,header .ax-figure{display:flex;align-items:center} /* Dropdown entries track the top-level links, which are clamped — they were pinned at 16px and so grew larger than the menu they hang off. */ header .ahrp-subnav a{font-size:clamp(12px,0.95vw,15px)} }