/* ===================================================================== GBPI 2.0 — Full-fidelity design system Layered on top of Bootscore's Bootstrap 5 (main.css) + child style.css. Colors and type match the client-approved designs (Sep 2026); tokens below are the 9 approved brand colors plus black/white, aliased to the roles they're actually used for across Home/Get Involved/Resources/ Issue Areas/Issue Detail. See CGBPI_ColorCodes.pdf for the source swatch — that file has no role labels, so these aliases are inferred from usage, not given. ===================================================================== */ @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Variable.woff2') format('woff2-variations'), url('../fonts/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Lexend'; src: url('../fonts/Lexend-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ---- Design tokens (also declared here so the block-editor iframe resolves them even if the theme style.css is not loaded) -------- */ :root { /* Approved brand colors (CGBPI_ColorCodes.pdf), aliased by role */ --gbpi-ink: #004b4b; /* darkest teal — nav, footer, dark UI chrome */ --gbpi-primary: #0b7561; /* mid teal — hero/band backgrounds, primary fills */ --gbpi-green: #72bf44; /* Health Justice + general accent/link-on-dark */ --gbpi-lime: #b7d87d; /* light section backgrounds, heading-on-dark */ /* WCAG AA text colours (ADA pass, Oct 2026). Lime text is fine on ink (6.2:1) but not on teal (3.5:1), so text uses --gbpi-lime-text, which teal surfaces swap for a lime tint (4.7:1). Text on the green, blue and pink fills uses a deeper ink (4.7-5.4:1). */ --gbpi-lime-text: var(--gbpi-lime); --gbpi-lime-on-teal: #e2efcb; --gbpi-ink-deep: #003c3c; --gbpi-blue: #51a4ff; /* Education */ --gbpi-sky: #90dffb; /* Federal Policy */ --gbpi-plum: #7d4c63; /* Economic Justice */ --gbpi-pink: #cf8dc5; /* Inclusive Economy for Immigrants */ --gbpi-paper: #fffdf7; /* cream page background */ --gbpi-white: #ffffff; /* card/form surfaces */ --gbpi-black: #000000; /* publications + some page-hero backgrounds */ /* Derived UI tones — not in the swatch file, computed from the above so every neutral still traces back to an approved brand color */ /* 4.94:1 on paper — signed off by Lola, 17 Sep 2026. Was a lighter color-mix of ink+white that measured 2.96:1 and failed WCAG AA. */ --gbpi-muted: #407878; --gbpi-line: color-mix(in srgb, var(--gbpi-ink) 18%, var(--gbpi-white) 82%); /* Link/CTA text colour. The brand green (#72bf44) measures 2.23:1 on paper and fails AA as text, so text links use the brand teal — 5.53:1, and already what the Staff components use. Green is unaffected as a fill: pills, badges, buttons and the Health Justice tag all keep it. Lola's alternative, if a distinct link green is ever wanted, is #2b8452 (4.56:1). */ --gbpi-link: var(--gbpi-primary); /* Typography */ --gbpi-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --gbpi-font-heading: 'Lexend', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } /* ---- Core Button block -> GBPI pill (token-driven) ----------------- */ .wp-block-button.gbpi-btn-dark > .wp-block-button__link, .wp-block-button.gbpi-btn-light > .wp-block-button__link, .wp-block-button.gbpi-btn-outline > .wp-block-button__link, .wp-block-button.gbpi-btn-white > .wp-block-button__link { border-radius: 50rem; padding: .6rem 1.4rem; font-weight: 700; font-size: .92rem; border: 1px solid transparent; } .wp-block-button.gbpi-btn-dark > .wp-block-button__link { background: var(--gbpi-ink); color: #fff; } .wp-block-button.gbpi-btn-light > .wp-block-button__link { background: var(--gbpi-paper); color: var(--gbpi-ink); } .wp-block-button.gbpi-btn-outline > .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } /* On paper / white bands the outline pill needs a dark stroke and dark text instead of the default light-on-dark treatment (e.g. Resources' Load more). */ .gbpi-paper .wp-block-button.gbpi-btn-outline > .wp-block-button__link, .gbpi-band.gbpi-paper .wp-block-button.gbpi-btn-outline > .wp-block-button__link { color: var(--gbpi-primary); border-color: var(--gbpi-primary); } .wp-block-button.gbpi-btn-white > .wp-block-button__link { background: #fff; color: var(--gbpi-ink); } /* ---- Foundations --------------------------------------------------- */ body { background-color: var(--gbpi-paper); color: var(--gbpi-ink); font-family: var(--gbpi-font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .gbpi-display { font-family: var(--gbpi-font-heading); font-weight: 700; letter-spacing: -0.01em; color: var(--gbpi-ink); } .gbpi-display { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; } a { color: var(--gbpi-primary); } a:hover { color: var(--gbpi-ink); } .gbpi-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: var(--gbpi-muted); margin-bottom: 0.5rem; display: block; } /* On a dark (ink/primary/black) background, the eyebrow reads in lime rather than the ink-derived muted tone, matching the approved designs. */ .gbpi-ink-bg .gbpi-eyebrow, .gbpi-black-bg .gbpi-eyebrow, .gbpi-primary-bg .gbpi-eyebrow { color: var(--gbpi-lime-text); } .gbpi-annotation { color: var(--gbpi-primary); font-style: italic; font-size: 0.82rem; line-height: 1.35; } /* Section rhythm + alternating backgrounds */ .gbpi-section { padding: 3.5rem 0; } .gbpi-section--tight { padding: 2.25rem 0; } .gbpi-paper { background-color: var(--gbpi-paper); } .gbpi-white { background-color: var(--gbpi-white); } .gbpi-ink-bg { background-color: var(--gbpi-ink); color: #fff; } .gbpi-ink-bg h1,.gbpi-ink-bg h2,.gbpi-ink-bg h3 { color:#fff; } /* Full-bleed section background utilities, one per approved brand color */ .gbpi-primary-bg { background-color: var(--gbpi-primary); color: #fff; } .gbpi-primary-bg h1,.gbpi-primary-bg h2,.gbpi-primary-bg h3 { color:#fff; } .gbpi-black-bg { background-color: var(--gbpi-black); color: var(--gbpi-paper); } .gbpi-black-bg h1,.gbpi-black-bg h2,.gbpi-black-bg h3 { color: var(--gbpi-lime-text); } .gbpi-lime-bg { background-color: var(--gbpi-lime); color: var(--gbpi-ink); } .gbpi-green-bg { background-color: var(--gbpi-green); color: var(--gbpi-ink-deep); } .gbpi-blue-bg { background-color: var(--gbpi-blue); color: var(--gbpi-ink-deep); } .gbpi-sky-bg { background-color: var(--gbpi-sky); color: var(--gbpi-ink); } .gbpi-plum-bg { background-color: var(--gbpi-plum); color: #fff; } .gbpi-pink-bg { background-color: var(--gbpi-pink); color: var(--gbpi-ink-deep); } /* ---- Skeleton "copy" bars (as in the wireframes) ------------------- */ .sk { display:block; height:0.62rem; border-radius:0.35rem; background:#d9d6cd; margin:0.5rem 0; } .sk.on-dark { background: rgba(255,255,255,0.28); } .sk.w-90{width:90%}.sk.w-80{width:80%}.sk.w-70{width:70%}.sk.w-60{width:60%} .sk.w-50{width:50%}.sk.w-40{width:40%}.sk.w-30{width:30%}.sk.tall{height:0.8rem} /* ---- Image placeholder (crossed box) ------------------------------- */ .gbpi-ph { position: relative; background: #e7e4dc; border-radius: 0.5rem; overflow: hidden; } .gbpi-ph::before, .gbpi-ph::after { content:""; position:absolute; inset:0; background:linear-gradient(to top right, transparent calc(50% - 0.5px), #c8c4b8 50%, transparent calc(50% + 0.5px)); } .gbpi-ph::after { background:linear-gradient(to bottom right, transparent calc(50% - 0.5px), #c8c4b8 50%, transparent calc(50% + 0.5px)); } .gbpi-ratio-16x9 { aspect-ratio: 16/9; } .gbpi-ratio-4x3 { aspect-ratio: 4/3; } .gbpi-ratio-1x1 { aspect-ratio: 1/1; } /* ---- Buttons / pills ----------------------------------------------- */ .gbpi-pill { display:inline-flex; align-items:center; gap:.4rem; border-radius:50rem; padding:.6rem 1.25rem; font-weight:700; font-size:.92rem; text-decoration:none; border:1px solid transparent; transition:all .15s ease; } .gbpi-pill--dark { background:var(--gbpi-ink); color:#fff; } .gbpi-pill--dark:hover { background:#000; color:#fff; } .gbpi-pill--light { background:var(--gbpi-paper); color:var(--gbpi-ink); } .gbpi-pill--light:hover { background:#fff; color:#000; } .gbpi-pill--outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); } .gbpi-pill--outline:hover { background:#fff; color:var(--gbpi-ink); } .gbpi-pill--white { background:#fff; color:var(--gbpi-ink); } /* One pill color per issue area, matching the approved category coding */ .gbpi-pill--primary{ background:var(--gbpi-primary); color:#fff; } .gbpi-pill--green { background:var(--gbpi-green); color:var(--gbpi-ink-deep); } .gbpi-pill--blue { background:var(--gbpi-blue); color:var(--gbpi-ink-deep); } .gbpi-pill--sky { background:var(--gbpi-sky); color:var(--gbpi-ink); } .gbpi-pill--plum { background:var(--gbpi-plum); color:#fff; } .gbpi-pill--pink { background:var(--gbpi-pink); color:var(--gbpi-ink-deep); } /* Plain arrow-link: mixed case in the design (e.g. "View all Issue Areas →"). The small-caps variant used on card footers ("+ FULL ARTICLE") lives in .gbpi-card__foot a below, so it stays uppercase only inside cards. */ .gbpi-link-arrow { font-weight:700; text-decoration:none; color:var(--gbpi-ink); } .gbpi-link-arrow:hover { text-decoration:underline; } /* ---- Badges (type tags + eyebrow chips) ---------------------------- */ .gbpi-badge { display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.28rem .6rem; border-radius:50rem; background:var(--gbpi-ink); color:#fff; } .gbpi-badge--light { background:var(--gbpi-line); color:var(--gbpi-ink); } .gbpi-badge--overlay { position:absolute; top:.6rem; left:.6rem; z-index:2; } /* Category tag pills under publication cards (Budget & Taxes, Education, etc.) */ .gbpi-badge--primary{ background:var(--gbpi-primary); color:#fff; } .gbpi-badge--green { background:var(--gbpi-green); color:var(--gbpi-ink-deep); } .gbpi-badge--blue { background:var(--gbpi-blue); color:var(--gbpi-ink-deep); } .gbpi-badge--sky { background:var(--gbpi-sky); color:var(--gbpi-ink); } .gbpi-badge--plum { background:var(--gbpi-plum); color:#fff; } .gbpi-badge--pink { background:var(--gbpi-pink); color:var(--gbpi-ink-deep); } /* ---- Card image blocks (replaceable placeholders) ------------------ */ .gbpi-img { margin: 0; } .gbpi-img img { width: 100%; height: auto; object-fit: cover; display: block; border-radius: .5rem; } .gbpi-card .gbpi-img img { border-radius: 0; } .gbpi-img-16x9 img { aspect-ratio: 16/9; } .gbpi-img-4x3 img { aspect-ratio: 4/3; } .gbpi-img-1x1 img { aspect-ratio: 1/1; } .gbpi-img-strip img { height: 76px; border-radius: 0; } .gbpi-icon-img { width: 56px; } .gbpi-icon-img img { width: 56px; height: 56px; object-fit: contain; border-radius: 0; aspect-ratio: 1/1; } .gbpi-feature-card { padding: 1.5rem 0; } .gbpi-media { position: relative; } /* ---- Cards --------------------------------------------------------- */ .gbpi-card { background:#fff; border:1px solid var(--gbpi-line); border-radius:.65rem; overflow:hidden; height:100%; display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .15s ease; } .gbpi-card:hover { box-shadow:0 10px 24px rgba(0,0,0,.08); transform:translateY(-2px); } .gbpi-card__body { padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; flex:1; } .gbpi-card__title { font-family:var(--gbpi-font-heading); font-size:1.12rem; font-weight:700; margin:1.35rem 0 .6rem; } .gbpi-card__foot { margin-top:auto; padding-top:.75rem; } /* The "+ Full Article" line is a core read-more block now, so the link IS the .gbpi-card__foot element rather than a child of it. Query-loop cards used to hard-code href="#" here, which sent every card's read-more link nowhere; the core block resolves each post's own permalink. Both shapes are styled so any card markup still in the editor keeps working. */ .gbpi-card__foot a, a.gbpi-card__foot { color:var(--gbpi-link); font-weight:700; text-decoration:none; text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; display:inline-block; } .gbpi-card__foot a:hover, a.gbpi-card__foot:hover { text-decoration:underline; } .gbpi-card__tags { flex-wrap:wrap; gap:.4rem !important; margin-bottom:.35rem; } /* Dark variant used on black-background sections (Publications, etc.) */ .gbpi-card--dark { background:transparent; border:1px solid var(--gbpi-green); color:rgba(255,255,255,.85); } .gbpi-card--dark .gbpi-card__title { color:var(--gbpi-lime-text); } .gbpi-card--dark:hover { box-shadow:0 0 0 1px var(--gbpi-green); transform:none; } .gbpi-heading-row { margin-bottom:1.75rem; align-items:flex-end !important; } .gbpi-heading-row > .wp-block-group:first-child { margin-bottom:0; } /* ---- About page: Mission / Vision two-column row -------------------- Two equal columns separated by a thin vertical rule. Stacks on tablet and mobile. Uses eyebrow + H3 + body copy per section. ------------- */ .gbpi-mission-cols { display:grid; grid-template-columns:1fr 1fr; gap:3rem; position:relative; } .gbpi-mission-cols > * { min-width:0; } .gbpi-mission-cols > *:first-child { padding-right:1rem; } .gbpi-mission-cols > *:last-child { padding-left:2rem; border-left:1px solid var(--gbpi-line); } .gbpi-mission-cols h3 { font-family:var(--gbpi-font-heading); color:var(--gbpi-primary); font-size:1.6rem; margin:.25rem 0 .85rem; } .gbpi-mission-cols p { color:var(--gbpi-ink); margin:0; line-height:1.55; } /* GG Phase 3: the statements themselves are the headline now — no "What we do" / "Where we're headed" subheads — so the label is a small heading and the statement carries display-size type. On the lime band the divider needs the ink tone to stay visible. */ .gbpi-mission-cols__label { font-family:var(--gbpi-font-heading); font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--gbpi-ink); margin:0 0 1rem; padding-left:.75rem; border-left:5px solid var(--gbpi-primary); } .gbpi-mission-cols p.gbpi-mission-cols__statement { font-family:var(--gbpi-font-heading); font-weight:600; font-size:clamp(1.35rem, 2.4vw, 1.85rem); line-height:1.35; color:var(--gbpi-ink); } .gbpi-lime-bg .gbpi-mission-cols > *:last-child { border-color:rgba(0,75,75,.3); } @media (max-width: 767.98px) { .gbpi-mission-cols { grid-template-columns:1fr; gap:2rem; } .gbpi-mission-cols > *:first-child { padding-right:0; } .gbpi-mission-cols > *:last-child { padding-left:0; border-left:0; border-top:1px solid var(--gbpi-line); padding-top:2rem; } } /* ---- About page: Impact stats band --------------------------------- Centred stats on the dark ink band, one column per stat. Big lime number, muted white label underneath. Fine-print footnote below. ---------------- */ .gbpi-stats-row { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2rem; margin:.5rem 0 1.25rem; } .gbpi-stat { text-align:center; } .gbpi-stat__num { display:block; font-family:var(--gbpi-font-heading); font-weight:800; font-size:clamp(2.4rem, 4.5vw, 3.25rem); line-height:1; color:var(--gbpi-lime-text); margin-bottom:.6rem; } .gbpi-stat__label { color:rgba(255,255,255,.85); font-size:.95rem; } .gbpi-stats-note { text-align:center; color:#c3d6d6; /* 6.6:1 on ink */ font-style:italic; font-size:.8rem; margin:0; } @media (max-width: 575.98px) { .gbpi-stats-row { grid-auto-flow:row; gap:1.5rem; } } /* ---- About page: "More about GBPI" explore grid -------------------- Six cards as two rows of three on desktop (GG Phase 3), 2 cols on tablet, 1 col on mobile. Each card: teal outlined SVG icon + title + short body + "READ MORE →" link pinned to the bottom. -------------- */ .gbpi-explore-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem; margin-top:1.5rem; } @media (max-width: 991.98px) { .gbpi-explore-grid { grid-template-columns:repeat(2, 1fr); } } @media (max-width: 575.98px) { .gbpi-explore-grid { grid-template-columns:1fr; } } .gbpi-explore-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--gbpi-line); border-radius:.7rem; padding:1.4rem 1.25rem 1.25rem; text-decoration:none; color:var(--gbpi-ink); transition:box-shadow .15s ease, transform .15s ease; } .gbpi-explore-card:hover { box-shadow:0 10px 24px rgba(0,0,0,.08); transform:translateY(-2px); color:var(--gbpi-ink); } .gbpi-explore-card__icon { width:34px; height:34px; margin-bottom:1rem; color:var(--gbpi-primary); display:block; } .gbpi-explore-card__icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; } .gbpi-explore-card__title { font-family:var(--gbpi-font-heading); font-weight:700; font-size:1.05rem; color:var(--gbpi-primary); margin:0 0 .5rem; } .gbpi-explore-card__body { color:var(--gbpi-ink); font-size:.88rem; line-height:1.5; margin:0 0 1rem; } .gbpi-explore-card__foot { margin-top:auto; color:var(--gbpi-primary); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; } .gbpi-explore-card:hover .gbpi-explore-card__foot { text-decoration:underline; } /* Compact "chip" card used in issue-area grids (icon box + label) */ .gbpi-chip-card { display:flex; align-items:center; gap:.75rem; background:#fff; border:1px solid var(--gbpi-line); border-radius:.6rem; padding:.85rem 1rem; font-weight:700; height:100%; text-decoration:none; color:var(--gbpi-ink); } .gbpi-chip-card:hover { box-shadow:0 6px 16px rgba(0,0,0,.07); } .gbpi-chip-card .gbpi-chip-ico { width:34px; height:34px; border-radius:.4rem; background:#e7e4dc; flex:0 0 auto; } /* Solid-color issue pill (Home "Where we focus" grid) — fully rounded per design */ .gbpi-issue-pill { border-radius:50rem; min-height:96px; width:100%; padding:1.25rem 1.5rem; text-align:center; font-size:1.05rem; position:relative; } /* The six Home pills are navigation, not decoration. Each name used to be a bare , which reads to a screen reader as a heading that isn't one and led nowhere; it is now a link to that issue area's archive. The ::after overlay makes the whole pill the target, and `inherit` keeps each background's approved text colour rather than introducing a link colour that would fail contrast on half of them. */ .gbpi-issue-pill a { color:inherit; text-decoration:none; font-weight:700; } .gbpi-issue-pill a::after { content:""; position:absolute; inset:0; border-radius:50rem; } .gbpi-issue-pill a:hover { text-decoration:underline; } .gbpi-issue-pill a:focus-visible::after { outline:3px solid currentColor; outline-offset:3px; } /* Decorative brand graphics that replaced the crossed-box placeholder images on Home. They carry no information, so they are inline SVG with aria-hidden rather than with empty alt — nothing for a screen reader to skip past, and nothing for an editor to mistake for content awaiting a real photo. */ .gbpi-figure { margin:0; } .gbpi-figure svg { width:100%; height:auto; display:block; border-radius:.5rem; } .gbpi-figure-16x9 svg { aspect-ratio:16/9; } /* ---- Hero (solid mid-teal band, per approved design) --------------- */ /* Horizontal padding matches the .gbpi-container inset (max-width 1120px + Bootstrap 12px gutter) so hero content's left edge lines up with the header/footer container, not the raw viewport edge. */ .gbpi-hero { background: var(--gbpi-primary); padding: 4.5rem max(12px, calc((100vw - 1120px) / 2 + 12px)); min-height: 440px; display:flex; flex-direction:column; justify-content:center; } .gbpi-hero, .gbpi-hero h1, .gbpi-hero h2, .gbpi-hero h3, .gbpi-hero p, .gbpi-hero .gbpi-display { color:#fff; } /* Core's .is-layout-constrained forces margin-left/right:auto !important on children, which centers them — the approved design has this content left-aligned in a contained column, not centered, so it has to be overridden at equal specificity. */ .gbpi-hero.is-layout-constrained > *, .gbpi-hero > * { max-width: 640px; margin-left: 0 !important; margin-right: auto !important; } /* Higher specificity than `.gbpi-hero p { color:#fff }` above, which otherwise wins the cascade tie against a single-class selector. */ .gbpi-hero p.gbpi-hero__eyebrow { color:var(--gbpi-lime-text); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; } /* Hero with a photo (Home, per the client's Oct 2026 graphics reference): the photo fills the right 37% edge to edge, top to bottom; the copy keeps its container-aligned left edge and stops short of the photo. Below 992px the photo drops under the copy and bleeds to the screen edges. Three classes deep to beat the constrained-layout override above. */ .gbpi-hero.gbpi-hero--media { position:relative; overflow:hidden; } .gbpi-hero.gbpi-hero--media > :not(.gbpi-hero__media) { max-width:min(640px, calc(63vw - var(--gbpi-inset) - 2.5rem)); } .gbpi-hero.gbpi-hero--media > .gbpi-hero__media { position:absolute; top:0; right:0; bottom:0; width:37%; max-width:none; margin:0 !important; } .gbpi-hero__media img { display:block; width:100%; height:100%; object-fit:cover; object-position:60% 50%; } @media (max-width: 991.98px) { .gbpi-hero.gbpi-hero--media > :not(.gbpi-hero__media) { max-width:640px; } .gbpi-hero.gbpi-hero--media > .gbpi-hero__media { position:static; width:auto; aspect-ratio:16/9; margin:2.5rem calc(-1 * var(--gbpi-inset)) calc(-1 * var(--gbpi-section-y)) !important; } } /* Core-block section band padding. Horizontal inset matches .gbpi-container (max-width 1120 + 12px gutter) so band content stays inside the same column as the header/footer container — including on viewports narrower than 1120 where a plain constrained-layout would otherwise bleed to the viewport edge. The band's background still fills full width (padding, not width). */ .gbpi-band { padding:3.5rem max(12px, calc((100vw - 1120px) / 2 + 12px)); } .gbpi-band--tight { padding:2.25rem max(12px, calc((100vw - 1120px) / 2 + 12px)); } /* ---- Page intro / breadcrumb --------------------------------------- */ .gbpi-breadcrumb { font-size:.8rem; color:var(--gbpi-muted); padding:1rem 0; } .gbpi-breadcrumb a { color:var(--gbpi-muted); text-decoration:none; } .gbpi-breadcrumb a:hover { text-decoration:underline; } .gbpi-breadcrumb .sep { margin:0 .4rem; opacity:.6; } .gbpi-title-bar { border-left:6px solid var(--gbpi-ink); padding-left:.9rem; } /* On a teal hero (Issue Detail) the pipe accent reads in lime, not ink. */ .gbpi-primary-bg .gbpi-title-bar, .gbpi-ink-bg .gbpi-title-bar { border-left-color:var(--gbpi-lime); } /* Hero paragraph left-alignment: WordPress's is-layout-constrained rule applies `margin-left:auto !important` to non-aligned children, which visually centers a paragraph the moment it gets a `max-width` (e.g. `max-width:60ch` to cap line length). Beat the WP !important with our own to keep intro paragraphs aligned with the title above them. */ .gbpi-band.gbpi-primary-bg > .wp-block-group > p, .gbpi-band.gbpi-ink-bg > .wp-block-group > p { margin-left:0 !important; } /* Bottom CTA band on Issue Detail — teal band with a title and dark pill. */ .gbpi-cta-band--teal { background:var(--gbpi-primary); color:#fff; padding:2.75rem 0; } .gbpi-cta-band--teal h2 { color:#fff; } /* Thin teal breadcrumb band that sits between the nav and a page's intro. Two approved variants across the designs: - default (primary teal + lime text): Get Involved - --ink (deepest teal + lime text, matches the top social bar so the two dark bars read as one frame around the paper nav in between): Resources Each page opts into the variant its own design uses. */ /* Horizontal padding mirrors .gbpi-band so the breadcrumb text lines up with section headings and body copy in the paper bands below. */ .gbpi-breadcrumb-band { background:var(--gbpi-primary); padding:.65rem max(12px, calc((100vw - 1120px) / 2 + 12px)); font-size:.85rem; color:var(--gbpi-lime-text); } .gbpi-breadcrumb-band--ink { background:var(--gbpi-ink); } .gbpi-breadcrumb-band a { color:var(--gbpi-lime-text); text-decoration:none; font-weight:600; } .gbpi-breadcrumb-band a:hover { color:#fff; text-decoration:underline; } .gbpi-breadcrumb-band .sep { margin:0 .35rem; opacity:.85; } /* The band already carries the outer inset. Any inner .container keeps its 12px gutter — same as the paper bands below, which have band padding on the outside and a 12px .container gutter on the inside — so the two readings of the text (breadcrumb and section heading) align exactly. The max-width and centering are dropped, though, because the band inset has already placed us where we need to be. */ .gbpi-breadcrumb-band > .container, .gbpi-breadcrumb-band > .gbpi-container, .gbpi-breadcrumb-band > .wp-block-group > .container, .gbpi-breadcrumb-band > .wp-block-group > .gbpi-container { max-width:none; margin-left:0; margin-right:0; } /* ---- Action-card grid (Get Involved 3x2 of icon-topped cards) ------ */ .gbpi-action-card { position:relative; background:#fff; border-radius:.9rem; overflow:hidden; display:flex; flex-direction:column; height:100%; transition:box-shadow .15s ease, transform .15s ease; } .gbpi-action-card:hover { box-shadow:0 12px 28px rgba(0,0,0,.15); transform:translateY(-2px); } /* Icon well: each card's icon SVG (extracted from the source AI) has the colored background baked in, so this is just a full-bleed image slot. */ .gbpi-action-card__icon { display:block; padding:0; } .gbpi-action-card__icon img, .gbpi-action-card__icon svg { display:block; width:100%; height:auto; } /* GBPI's illustrated SVG icons (Oct 2026) are transparent, unlike the old PNG tiles that carried their own coloured panel: give them a fixed 4:3 cream panel so every card's top is the same height, and contain the artwork inside it. */ .gbpi-action-card__icon:has(img[src$=".svg"]) { position:relative; aspect-ratio:4 / 3; background:var(--gbpi-paper); } .gbpi-action-card__icon:has(img[src$=".svg"]) > .wp-block-image { position:absolute; inset:12% 14%; } .gbpi-action-card__icon img[src$=".svg"] { width:100%; height:100%; object-fit:contain; } .gbpi-action-card__body { background:#fff; padding:1rem 1.15rem 1.15rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; } /* Two-class selector so `.gbpi-primary-bg h3 { color:#fff }` (the band rule that sits above every action-card grid) doesn't repaint titles white. */ .gbpi-action-card .gbpi-action-card__title { font-family:var(--gbpi-font-heading); font-weight:700; font-size:1.08rem; color:var(--gbpi-ink); margin:0; line-height:1.15; } /* The arrow used to be the card's only link, and it pointed at "#" — a control a keyboard user could reach that went nowhere, announced as the single word "right arrow". The card title carries the link now and the arrow is decoration; the ::after overlay keeps the whole card clickable. */ .gbpi-action-card__arrow { color:var(--gbpi-ink); font-weight:700; font-size:1.25rem; text-decoration:none; } .gbpi-action-card:hover .gbpi-action-card__arrow { color:var(--gbpi-primary); } .gbpi-action-card__title a { color:inherit; text-decoration:none; } .gbpi-action-card__title a::after { content:""; position:absolute; inset:0; border-radius:inherit; } .gbpi-action-card:hover .gbpi-action-card__title a { text-decoration:underline; } .gbpi-action-card__title a:focus-visible::after { outline:3px solid var(--gbpi-ink); outline-offset:3px; } /* ---- Featured card (Resources: split teal-media + white-body) ----- */ .gbpi-featured-card { background:#fff; border-radius:1rem; overflow:hidden; display:flex; align-items:stretch; } .gbpi-featured-card__media { flex:0 0 38%; background:var(--gbpi-primary); } .gbpi-featured-card__media img { display:block; width:100%; height:auto; } .gbpi-featured-card__body { flex:1 1 62%; padding:2.5rem 2.75rem; display:flex; flex-direction:column; justify-content:center; } .gbpi-featured-card__body h3 { color:var(--gbpi-ink); margin:.5rem 0 .75rem; font-size:1.65rem; } .gbpi-featured-card__body p { color:var(--gbpi-ink); margin-bottom:1.25rem; } .gbpi-featured-card__eyebrow, .gbpi-featured-card__body p.gbpi-featured-card__eyebrow { /* align-self so the chip doesn't stretch across the flex column card body */ align-self:flex-start; background:var(--gbpi-primary); color:var(--gbpi-lime-text); padding:.4rem .9rem; border-radius:50rem; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.75rem; } @media (max-width: 767.98px) { .gbpi-featured-card { flex-direction:column; } .gbpi-featured-card__media, .gbpi-featured-card__body { flex-basis:auto; } } /* Type-badge overlay on Resources newest-publications cards (Report / Analysis / Blog). Positioned inside .gbpi-media which is position:relative. */ .gbpi-badge--type { position:absolute; top:.75rem; left:.75rem; z-index:2; background:var(--gbpi-primary); color:var(--gbpi-lime-text); padding:.35rem .9rem; border-radius:50rem; font-size:.78rem; font-weight:700; letter-spacing:0; text-transform:none; } /* Center a single button (Load more) inside its own row. */ .gbpi-btn-center { display:flex; justify-content:center; margin-top:1.5rem; } /* Query Loop pagination (Press page, and any future paginated Query Loop). WordPress core outputs .wp-block-query-pagination as a flex row of and prev/next links. Style them as pills. */ .wp-block-query-pagination { display:flex; justify-content:center; gap:.5rem; margin:3.5rem 0 3rem; flex-wrap:wrap; } /* Gutenberg's .is-layout-flow > * rule zeroes margin-block-start with higher specificity than a single-class selector — boost so the breathing room above the Press pagination actually renders. */ .wp-block-query.is-layout-flow > .wp-block-query-pagination { margin-top:3.5rem; margin-bottom:3rem; } .wp-block-query-pagination .page-numbers, .wp-block-query-pagination .wp-block-query-pagination-previous, .wp-block-query-pagination .wp-block-query-pagination-next { display:inline-flex; align-items:center; justify-content:center; min-width:2.25rem; height:2.25rem; padding:0 .85rem; border-radius:50rem; border:1px solid var(--gbpi-line); background:#fff; color:var(--gbpi-ink); font-weight:700; font-size:.9rem; text-decoration:none; } .wp-block-query-pagination a:hover { background:var(--gbpi-paper); border-color:var(--gbpi-primary); color:var(--gbpi-primary); } .wp-block-query-pagination .current, .wp-block-query-pagination .page-numbers.current { background:var(--gbpi-ink); color:#fff; border-color:var(--gbpi-ink); } .wp-block-query-pagination .dots { border:0; background:transparent; } /* ---- Issue-Area tiles (Issue Areas landing) ----------------------- Photo card with a coloured pill overlay near the bottom. One class per issue area supplies the pill's background — matches the design's per-area palette. Photo is a placeholder until real imagery is licensed. */ .gbpi-issue-tile { position:relative; display:block; overflow:hidden; border-radius:1rem; aspect-ratio:4/3; text-decoration:none; color:inherit; background:var(--gbpi-line); /* fallback tone if the photo is missing */ } .gbpi-issue-tile > img { display:block; width:100%; height:100%; object-fit:cover; } .gbpi-issue-tile__label { position:absolute; left:50%; bottom:32%; transform:translateX(-50%); padding:.55rem 1.5rem; border-radius:50rem; font-weight:700; font-size:1.05rem; line-height:1.15; text-align:center; max-width:82%; } .gbpi-issue-tile:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.4); transition:all .15s ease; } /* Support band variant used on the Issue Areas landing — teal instead of paper. Two-class selectors so `.gbpi-support` rules further down the sheet don't overwrite the variant colours by later-source-order. */ .gbpi-support.gbpi-support--teal { background:var(--gbpi-primary); } .gbpi-support.gbpi-support--teal h2 { color:#fff; } .gbpi-support.gbpi-support--teal p { color:rgba(255,255,255,.85); } /* Green variant used on the Staff & Board landing and elsewhere per design. Ink-on-green for AA contrast with the lime button. */ .gbpi-support.gbpi-support--green { background:var(--gbpi-green); } .gbpi-support.gbpi-support--green h2 { color:var(--gbpi-ink); } .gbpi-support.gbpi-support--green p { color:rgba(0,45,45,.85); } .gbpi-support.gbpi-support--green .wp-block-button.gbpi-btn-dark .wp-block-button__link { background:var(--gbpi-ink); color:#fff; border-color:var(--gbpi-ink); } .gbpi-support.gbpi-support--green .wp-block-button.gbpi-btn-dark .wp-block-button__link:hover { background:#003535; border-color:#003535; } /* ---- Colour publication_type + issue_area terms as pills --------- The core/post-terms block outputs each term as a plain . Style those links as pills, then colour by URL slug so the badge matches the term. */ .gbpi-post-terms { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 .35rem; } .gbpi-post-terms a { display:inline-block; padding:.28rem .65rem; border-radius:50rem; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; background:var(--gbpi-ink); color:#fff; } .gbpi-post-terms a:hover { opacity:.9; } .gbpi-post-terms a[href*="/issue-area/budget-taxes"] { background:var(--gbpi-primary); color:#fff; } .gbpi-post-terms a[href*="/issue-area/education"] { background:var(--gbpi-blue); color:var(--gbpi-ink-deep); } .gbpi-post-terms a[href*="/issue-area/economic-justice"] { background:var(--gbpi-plum); color:#fff; } .gbpi-post-terms a[href*="/issue-area/federal-policy"] { background:var(--gbpi-sky); color:var(--gbpi-ink); } .gbpi-post-terms a[href*="/issue-area/health-justice"] { background:var(--gbpi-green); color:var(--gbpi-ink-deep); } .gbpi-post-terms a[href*="/issue-area/inclusive-economy-for-immigrants"] { background:var(--gbpi-pink); color:var(--gbpi-ink-deep); } /* Publication-type variant: rendered as a green pill overlaid on top-left of the post's featured image (Report / Analysis / Blog badge). Sits inside .gbpi-media which is position:relative. */ .gbpi-post-terms--type { position:absolute; top:.75rem; left:.75rem; z-index:2; margin:0; } .gbpi-post-terms--type a { background:var(--gbpi-green); color:var(--gbpi-ink-deep); padding:.35rem .9rem; font-size:.78rem; letter-spacing:0; text-transform:none; } /* ---- Partners band (lime) ----------------------------------------- */ .gbpi-partners { background:var(--gbpi-lime); padding:3.5rem 0; color:var(--gbpi-ink); } .gbpi-partners h2 { text-align:center; color:var(--gbpi-primary); text-transform:uppercase; letter-spacing:.14em; font-size:1.35rem; font-weight:700; margin-bottom:.6rem; } .gbpi-partners__lead { text-align:center; max-width:640px; margin:0 auto 2rem; color:var(--gbpi-ink); } .gbpi-partner-logo { background:var(--gbpi-green); border-radius:.5rem; min-height:52px; width:100%; } /* Donate page — intro column sticks to top while the Mightycause form (fixed at ~1955px tall) scrolls alongside it, avoiding a big empty patch on the left half of the section. Only kicks in on >=768px where the two columns are actually side-by-side. */ @media (min-width: 768px) { .gbpi-donate-intro-col { position: sticky; top: 90px; align-self: flex-start; } } /* ---- Donate page --------------------------------------------------- Donation card sits alongside intro copy in a paper 2-col: preset amount pills, monthly toggle, primary "Donate now" pill. UI shell only — the button posts to whichever third-party donation platform the client is on (Every.org / Stripe / GiveLively). */ .gbpi-donate-card { background:#fff; border:1px solid var(--gbpi-line); border-radius:1rem; padding:1.75rem; box-shadow:0 10px 24px rgba(0,0,0,.06); } .gbpi-donate-card__eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; color:var(--gbpi-primary); margin-bottom:.35rem; } .gbpi-donate-card__title { font-family:var(--gbpi-font-heading); font-size:1.35rem; color:var(--gbpi-ink); margin:0 0 1.25rem; font-weight:700; } .gbpi-donate-amounts { display:grid; grid-template-columns:repeat(3, 1fr); gap:.5rem; margin-bottom:1rem; } .gbpi-donate-amounts label { display:flex; align-items:center; justify-content:center; padding:.75rem .5rem; border:1.5px solid var(--gbpi-line); border-radius:50rem; font-weight:700; color:var(--gbpi-ink); cursor:pointer; user-select:none; background:#fff; } .gbpi-donate-amounts input[type="radio"] { position:absolute; opacity:0; pointer-events:none; } .gbpi-donate-amounts input[type="radio"]:checked + span, .gbpi-donate-amounts label:has(input:checked) { background:var(--gbpi-primary); color:#fff; border-color:var(--gbpi-primary); } .gbpi-donate-other { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; padding:.5rem .85rem; border:1.5px solid var(--gbpi-line); border-radius:50rem; } .gbpi-donate-other input { border:0; outline:0; flex:1; font-weight:600; font-size:1rem; color:var(--gbpi-ink); background:transparent; padding:.35rem 0; } .gbpi-donate-other span { color:var(--gbpi-muted); font-weight:700; } .gbpi-donate-freq { display:flex; gap:.35rem; margin-bottom:1.25rem; padding:.25rem; background:var(--gbpi-paper); border-radius:50rem; } .gbpi-donate-freq label { flex:1; text-align:center; padding:.55rem; border-radius:50rem; font-weight:700; font-size:.9rem; color:var(--gbpi-muted); cursor:pointer; } .gbpi-donate-freq input { position:absolute; opacity:0; pointer-events:none; } .gbpi-donate-freq label:has(input:checked) { background:#fff; color:var(--gbpi-ink); box-shadow:0 1px 3px rgba(0,0,0,.08); } .gbpi-donate-submit { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; background:var(--gbpi-ink); color:#fff; border:0; border-radius:50rem; padding:.95rem 1.25rem; font-weight:700; font-size:1rem; text-decoration:none; } .gbpi-donate-submit:hover { background:#000; color:#fff; } .gbpi-donate-note { color:var(--gbpi-muted); font-size:.82rem; text-align:center; margin:.75rem 0 0; } /* Ways-to-give grid — 4 cards on paper, one-per-column layout */ .gbpi-give-card { background:#fff; border:1px solid var(--gbpi-line); border-radius:.85rem; padding:1.35rem; height:100%; display:flex; flex-direction:column; gap:.5rem; transition:box-shadow .15s ease, transform .15s ease; } .gbpi-give-card:hover { box-shadow:0 12px 24px rgba(0,0,0,.08); transform:translateY(-2px); } .gbpi-give-card__icon { width:44px; height:44px; border-radius:.5rem; background:var(--gbpi-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; } .gbpi-give-card h3, .gbpi-give-card h4 { font-family:var(--gbpi-font-heading); font-size:1.05rem; color:var(--gbpi-ink); margin:.35rem 0 .15rem; } .gbpi-give-card p { color:var(--gbpi-muted); font-size:.9rem; margin:0 0 .5rem; } .gbpi-give-card a { color:var(--gbpi-primary); font-weight:700; font-size:.85rem; text-decoration:none; margin-top:auto; } .gbpi-give-card a:hover { text-decoration:underline; } /* Donate: the ways-to-give cards and trust details live in the sticky left column beside the ~1955px Mightycause form (GG Phase 3: the left side was mostly empty). 501(c)(3) sits with the EIN rather than as a headline stat. */ .gbpi-donate-aside { margin-top:2rem; display:flex; flex-direction:column; gap:1rem; } .gbpi-donate-aside__title { font-size:1.25rem; margin:0; } .gbpi-donate-aside .gbpi-give-card { height:auto; } .gbpi-donate-trust { list-style:none; margin:.5rem 0 0; padding:1.25rem 0 0; border-top:1px solid var(--gbpi-line); display:flex; flex-direction:column; gap:.75rem; } .gbpi-donate-trust li { display:flex; align-items:flex-start; gap:.75rem; color:var(--gbpi-ink); font-size:.92rem; } .gbpi-donate-trust i { color:var(--gbpi-primary); width:1.1rem; margin-top:.2rem; text-align:center; } .gbpi-donate-trust a { color:var(--gbpi-primary); font-weight:700; } /* Trust signals strip */ .gbpi-trust-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.5rem 0; } .gbpi-trust-row__item { display:flex; align-items:center; gap:.75rem; color:var(--gbpi-ink); font-size:.9rem; } .gbpi-trust-row__item i { color:var(--gbpi-primary); font-size:1.35rem; } /* ---- Person card (Staff & Board) ---------------------------------- Paper context: ink name, muted role. Ink/dark context: lime name, translucent-white role. Same markup, colour flips by parent bg class. */ .gbpi-person { display:flex; flex-direction:column; gap:.35rem; transition:transform .15s ease; } a.gbpi-person:hover { transform:translateY(-3px); } a.gbpi-person:hover .gbpi-person__name { color:var(--gbpi-primary); } .gbpi-person__name { margin:.9rem 0 .1rem; font-size:1.05rem; font-weight:700; font-family:var(--gbpi-font-heading); color:var(--gbpi-ink); } .gbpi-person__role { margin:0; font-size:.85rem; color:var(--gbpi-muted); } .gbpi-ink-bg .gbpi-person__name, .gbpi-primary-bg .gbpi-person__name { color:var(--gbpi-lime-text); } .gbpi-ink-bg .gbpi-person__role, .gbpi-primary-bg .gbpi-person__role { color:rgba(255,255,255,.75); } /* ---- Post Detail (single.php) -------------------------------------- Two-column layout: prose column left, sticky sidebar (search + TOC + recent) right. On mobile the sidebar's children re-flow so the TOC sits above the prose and search/recent-posts drop below (client ask). */ .gbpi-post-header { padding:2rem 0 1.25rem; } .gbpi-post-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1rem; } .gbpi-post-tags .gbpi-badge { font-size:.68rem; } .gbpi-post-title { font-family:var(--gbpi-font-heading); font-size:clamp(1.75rem,3.5vw,2.5rem); line-height:1.15; color:var(--gbpi-ink); margin:0 0 1.25rem; font-weight:700; } .gbpi-post-byline { display:flex; align-items:center; gap:.75rem; color:var(--gbpi-muted); font-size:.9rem; } .gbpi-post-byline__avatar { width:44px; height:44px; border-radius:50%; background:var(--gbpi-line); flex:0 0 auto; overflow:hidden; } .gbpi-post-byline__avatar img { width:100%; height:100%; object-fit:cover; } .gbpi-post-byline strong { color:var(--gbpi-ink); font-weight:700; } .gbpi-post-layout { display:flex; flex-direction:column; gap:2rem; padding-bottom:3rem; border-top:1px solid var(--gbpi-line); padding-top:2.5rem; } @media (min-width: 992px) { .gbpi-post-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:3rem; } .gbpi-post-sidebar { position:sticky; top:100px; align-self:start; display:flex; flex-direction:column; gap:1.25rem; } } /* Mobile: promote sidebar's children to the layout flow so the TOC can sit above the prose and search/recent-posts land below it — per the client note that older mobile readers want TOC first. */ @media (max-width: 991.98px) { .gbpi-post-sidebar { display:contents; } .gbpi-post-toc { order:0; } .gbpi-post-content { order:1; } .gbpi-post-search { order:2; } .gbpi-post-recent { order:3; } } /* Prose column — WordPress the_content() output */ .gbpi-post-content h2 { font-family:var(--gbpi-font-heading); font-size:1.5rem; color:var(--gbpi-ink); margin:2rem 0 1rem; scroll-margin-top:100px; } .gbpi-post-content h3 { font-family:var(--gbpi-font-heading); font-size:1.2rem; color:var(--gbpi-ink); margin:1.5rem 0 .75rem; scroll-margin-top:100px; } .gbpi-post-content p, .gbpi-post-content li { color:var(--gbpi-ink); font-size:1.02rem; line-height:1.65; } .gbpi-post-content ul, .gbpi-post-content ol { padding-left:1.35rem; margin:1rem 0 1.5rem; } .gbpi-post-content li { margin-bottom:.5rem; } .gbpi-post-content figure { margin:1.75rem 0; } .gbpi-post-content figure img { display:block; width:100%; height:auto; border-radius:.5rem; } .gbpi-post-content figcaption { color:var(--gbpi-muted); font-size:.85rem; margin-top:.5rem; } .gbpi-post-content blockquote { border-left:4px solid var(--gbpi-primary); background:var(--gbpi-paper); padding:1.25rem 1.5rem; margin:1.5rem 0; border-radius:.35rem; } .gbpi-post-content blockquote p { font-family:var(--gbpi-font-heading); font-size:1.15rem; color:var(--gbpi-ink); margin:0; } /* Download-PDF card — client asked for this at the TOP of the scroll for older users. Displayed as a light card with file icon + link text. */ .gbpi-download-card { display:flex; align-items:center; gap:.85rem; background:#fff; border:1px solid var(--gbpi-line); border-radius:.6rem; padding:.85rem 1.15rem; margin:0 0 2rem; text-decoration:none; color:var(--gbpi-ink); transition:box-shadow .15s ease; } .gbpi-download-card:hover { box-shadow:0 6px 16px rgba(0,0,0,.08); color:var(--gbpi-primary); } .gbpi-download-card__icon { width:36px; height:44px; flex:0 0 auto; background:var(--gbpi-paper); border:1px solid var(--gbpi-line); border-radius:.25rem; position:relative; } .gbpi-download-card__icon::after { content:"PDF"; position:absolute; inset:auto 0 4px 0; text-align:center; font-size:.55rem; font-weight:700; color:var(--gbpi-primary); letter-spacing:.05em; } .gbpi-download-card__label { font-weight:700; } /* Share row */ .gbpi-share { display:flex; align-items:center; gap:.75rem; margin:2rem 0; padding:1rem 0; border-top:1px solid var(--gbpi-line); border-bottom:1px solid var(--gbpi-line); } .gbpi-share__label { text-transform:uppercase; letter-spacing:.06em; font-size:.7rem; font-weight:700; color:var(--gbpi-muted); } .gbpi-share__icons { display:inline-flex; gap:.4rem; } .gbpi-share__icons a { width:34px; height:34px; border-radius:.35rem; background:var(--gbpi-ink); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; text-decoration:none; } .gbpi-share__icons a:hover { background:var(--gbpi-primary); } /* Author bio card at the end of the article */ .gbpi-author-card { display:flex; gap:1.25rem; background:#fff; border:1px solid var(--gbpi-line); border-radius:.6rem; padding:1.25rem; margin:1.5rem 0; } .gbpi-author-card__avatar { width:96px; height:96px; border-radius:50%; background:var(--gbpi-line); flex:0 0 auto; overflow:hidden; } .gbpi-author-card__avatar img { width:100%; height:100%; object-fit:cover; } .gbpi-author-card__body { flex:1; } .gbpi-author-card__body .gbpi-eyebrow { margin-bottom:.35rem; } /* The author name is an

now — the post's outline runs h1 > h2, so an h3 here skipped a level. Size is unchanged. */ .gbpi-author-card__body h3, .gbpi-author-card__body h2 { font-size:1.1rem; margin:0 0 .1rem; color:var(--gbpi-ink); } .gbpi-author-card__body .role { color:var(--gbpi-muted); font-size:.9rem; margin:0 0 .5rem; } .gbpi-author-card__body p { font-size:.95rem; margin:0 0 .5rem; color:var(--gbpi-ink); } /* Sidebar cards (Search + TOC + Recent Posts) */ .gbpi-sidebar-card { background:#fff; border:1px solid var(--gbpi-line); border-radius:.6rem; padding:1.25rem; } .gbpi-sidebar-card .gbpi-eyebrow { margin-bottom:.75rem; } .gbpi-post-search .btn-new-search { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; background:var(--gbpi-ink); color:#fff; border-radius:50rem; padding:.75rem 1.25rem; font-weight:700; text-decoration:none; } .gbpi-post-search .btn-new-search:hover { background:#000; } .gbpi-toc-list { list-style:none; padding:0; margin:0; counter-reset:toc; } .gbpi-toc-list li { counter-increment:toc; display:flex; gap:.75rem; padding:.5rem 0; border-top:1px dashed var(--gbpi-line); } .gbpi-toc-list li:first-child { border-top:none; } .gbpi-toc-list li::before { content:counter(toc, decimal-leading-zero); color:var(--gbpi-muted); font-weight:700; font-size:.78rem; letter-spacing:.05em; flex:0 0 22px; } .gbpi-toc-list a { color:var(--gbpi-ink); font-weight:600; font-size:.92rem; text-decoration:none; } .gbpi-toc-list a:hover { color:var(--gbpi-primary); text-decoration:underline; } .gbpi-recent-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:1rem; } .gbpi-recent-list a { display:flex; gap:.75rem; text-decoration:none; color:inherit; } .gbpi-recent-list a:hover .t { color:var(--gbpi-primary); } .gbpi-recent-list .thumb { flex:0 0 68px; width:68px; height:52px; border-radius:.35rem; background:var(--gbpi-line); overflow:hidden; } .gbpi-recent-list .thumb img { width:100%; height:100%; object-fit:cover; } .gbpi-recent-list .t { font-weight:600; font-size:.9rem; color:var(--gbpi-ink); line-height:1.25; margin:0 0 .15rem; } .gbpi-recent-list .d { color:var(--gbpi-muted); font-size:.78rem; margin:0; } /* Related Posts block */ .gbpi-related-heading-row { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:1.25rem; } .gbpi-related-heading-row h2 { margin:0; } /* Dark newsletter variant used on single.php per the wireframe */ .gbpi-newsletter.gbpi-newsletter--ink { background:var(--gbpi-ink); } .gbpi-newsletter.gbpi-newsletter--ink h2 { color:#fff; } .gbpi-newsletter.gbpi-newsletter--ink .btn-subscribe { background:#fff; color:var(--gbpi-ink); } /* ---- Print stylesheet — powers the "Download PDF" button. The button calls window.print(); the browser then offers "Save as PDF" as one of its destinations. We strip site chrome (nav, sidebar, share, author-bio actions, related posts, newsletter, support, footer) and render just the article header + prose. This is the same path older users already use when they save any web page as PDF. */ @media print { .gbpi-topbar, .gbpi-navbar, .gbpi-breadcrumb-band, .gbpi-post-sidebar, .gbpi-download-card, .gbpi-share, .gbpi-author-card a, .gbpi-related-heading-row a, .gbpi-newsletter, .gbpi-support, .gbpi-footer { display:none !important; } body { background:#fff !important; color:#000; font-size:11pt; } .gbpi-post-layout { display:block !important; padding:0 !important; border:0 !important; } .gbpi-post-header { padding:0 0 1rem; } .gbpi-post-title { font-size:22pt; page-break-after:avoid; } .gbpi-post-content h2 { font-size:14pt; page-break-after:avoid; } .gbpi-post-content h3 { font-size:12pt; page-break-after:avoid; } .gbpi-post-content img, .gbpi-post-content figure { page-break-inside:avoid; } .gbpi-post-content a { color:#000; text-decoration:underline; } .gbpi-post-content a[href]::after { content:" (" attr(href) ")"; font-size:.85em; color:#555; } .gbpi-post-content a[href^="#"]::after { content:""; } /* skip in-page anchors */ .gbpi-author-card { border:1px solid #999; padding:1rem; } .gbpi-related-heading-row h2 { font-size:14pt; } .container, .gbpi-container { max-width:100% !important; padding:0 !important; } .gbpi-band { padding:0 !important; } @page { margin:1.5cm 1.5cm 2cm; } } /* ---- Top social bar ------------------------------------------------- The approved PDFs disagree on this bar's color (pink on Home, dark teal on the other 4). Client (Nick, 2026-09-11) confirmed the pink Home variant was intentional but explicitly agreed to unify site-wide if it saves dev effort — so kept as dark teal everywhere. */ .gbpi-topbar { background:var(--gbpi-ink); border-bottom:none; } .gbpi-social { display:inline-flex; gap:.4rem; } .gbpi-social a { width:28px; height:28px; border-radius:.35rem; background:rgba(255,255,255,.14); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; text-decoration:none; } .gbpi-social a:hover { background:rgba(255,255,255,.28); color:#fff; } /* ---- Navbar -------------------------------------------------------- */ .gbpi-navbar { background:#fff; border-bottom:1px solid var(--gbpi-line); } .gbpi-brand { font-weight:800; font-size:1.4rem; letter-spacing:-.02em; color:var(--gbpi-ink); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; } .gbpi-brand .arrow { display:inline-block; transform:rotate(45deg); font-weight:900; } .gbpi-navbar .nav-link { color:var(--gbpi-ink); font-weight:600; font-size:.95rem; } .gbpi-navbar .nav-link:hover { color:#000; } .gbpi-navbar .dropdown-toggle::after { vertical-align:.15em; } /* Logo: inline SVG (see gbpi_logo() in functions.php). The wordmark path is fill="currentColor", so `color` here drives it and one file serves both placements; the Georgia outline keeps its brand lime either way. Heights match the top social bar so header/footer wordmarks read at a consistent brand size. The .gbpi-logo-img rules stay for the PNG fallback path. */ .gbpi-logo { display:block; color:var(--gbpi-primary); } .gbpi-logo .gbpi-logo-svg { height:30px; width:auto; display:block; } .gbpi-footer .gbpi-logo { color:#fff; } .gbpi-footer .gbpi-logo .gbpi-logo-svg { height:36px; } .gbpi-logo-img { height:30px; width:auto; display:block; } .gbpi-footer .gbpi-logo-img { height:36px; } /* ---- Shared bands ----------------------------------------------------- Newsletter background is teal by default (Home, Get Involved, Resources). Client (Nick, 2026-09-11) confirmed Issue Detail was intentionally lime and Issue Areas was intentionally missing this section, but explicitly asked to add it there for consistency and accepted teal-everywhere as a fallback. When building Issue Detail, add `.gbpi-newsletter--lime` (or equivalent) to opt into the lime variant per the original design. */ .gbpi-newsletter { background:var(--gbpi-primary); color:#fff; padding:2.75rem 0; } .gbpi-newsletter--lime { background:var(--gbpi-lime); color:var(--gbpi-ink); } .gbpi-newsletter--lime h2 { color:var(--gbpi-ink); } .gbpi-newsletter--lime .btn-subscribe { background:var(--gbpi-primary); color:#fff; } .gbpi-newsletter h2 { color:#fff; text-align:center; margin-bottom:1.25rem; } .gbpi-newsletter .form-control { background:#fff; border:1px solid #fff; color:var(--gbpi-ink); } .gbpi-newsletter .form-control::placeholder { color:var(--gbpi-muted); } .gbpi-newsletter .btn-subscribe { background:var(--gbpi-green); color:var(--gbpi-ink-deep); font-weight:700; border-radius:.375rem; border:none; } .gbpi-newsletter .btn-subscribe:hover { background:var(--gbpi-lime); } /* MC4WP integration (inc/newsletter.php). The plugin wraps the form fields in .mc4wp-form-fields and appends a .mc4wp-alert response after them, so both need to sit inside the band's container and read against the band's background rather than the plugin's default black-on-white. */ .gbpi-newsletter__lede { color:rgba(255,255,255,.9); max-width:62ch; margin:0 auto 1.5rem; } .gbpi-newsletter--lime .gbpi-newsletter__lede { color:var(--gbpi-ink); } .gbpi-newsletter .mc4wp-form { margin:0; } .gbpi-newsletter .mc4wp-alert { margin:1rem auto 0; max-width:62ch; text-align:center; background:#fff; color:var(--gbpi-ink); border-radius:.5rem; padding:.75rem 1rem; } .gbpi-newsletter .mc4wp-alert p { margin:0; } .gbpi-newsletter .mc4wp-error { border-left:4px solid #b3261e; } .gbpi-newsletter .mc4wp-success { border-left:4px solid var(--gbpi-primary); } /* The band moves focus here after a submission so the result is announced; keep the ring visible rather than hiding it. */ .gbpi-newsletter .mc4wp-alert:focus { outline:3px solid var(--gbpi-ink); outline-offset:3px; } .gbpi-newsletter--lime .mc4wp-alert:focus { outline-color:var(--gbpi-primary); } .gbpi-support { background:var(--gbpi-paper); padding:2rem 0; } .gbpi-support h2 { color: var(--gbpi-primary); } /* ---- Support GBPI band — responsive layout ------------------------ Desktop shows the heading + copy as a text column with the Donate button on the same row (space-between, vertically centred). Tablet and mobile stack the button under the text and gain generous horizontal padding so the copy doesn't hit the viewport edges. --- */ .gbpi-support > .wp-block-group { padding-left:1.25rem; padding-right:1.25rem; } .gbpi-support h2 { margin-top:0; } .gbpi-support p { margin-bottom:0; } /* Inner flex row: force the text column to take the available space and the button column to hug its content so they sit side-by-side. */ @media (min-width: 992px) { .gbpi-support > .wp-block-group > .wp-block-group.is-content-justification-space-between, .gbpi-support > .wp-block-group > .wp-block-group.is-layout-flex { flex-wrap:nowrap; gap:2rem; } .gbpi-support > .wp-block-group > .wp-block-group.is-layout-flex > .wp-block-group { flex:1 1 auto; min-width:0; max-width:820px; } .gbpi-support > .wp-block-group > .wp-block-group.is-layout-flex > .wp-block-buttons { flex:0 0 auto; } .gbpi-support > .wp-block-group { padding-left:2rem; padding-right:2rem; } } /* Tablet + mobile: generous side padding, tighter vertical rhythm, and let the flex row stack (the inline layout already wraps below lg). */ @media (max-width: 991.98px) { .gbpi-support { padding:2.5rem 0; } .gbpi-support > .wp-block-group { padding-left:1.5rem; padding-right:1.5rem; } .gbpi-support > .wp-block-group > .wp-block-group.is-layout-flex { gap:1.25rem; } .gbpi-support .wp-block-buttons { margin-top:.25rem; } } @media (max-width: 575.98px) { .gbpi-support > .wp-block-group { padding-left:1.15rem; padding-right:1.15rem; } } .gbpi-cta-band { background:var(--gbpi-paper); padding:2.25rem 0; } /* Teal variant must win over the base rule when both classes are present. */ .gbpi-cta-band.gbpi-cta-band--teal { background:var(--gbpi-primary); color:#fff; } .gbpi-cta-band.gbpi-cta-band--teal h2 { color:#fff; } /* ---- Faceted search / form panels ---------------------------------- */ .gbpi-searchpanel { background:var(--gbpi-paper); border-top:1px solid var(--gbpi-line); border-bottom:1px solid var(--gbpi-line); } .gbpi-field-label { text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; font-weight:700; color:var(--gbpi-muted); margin-bottom:.35rem; } /* ---- Events list --------------------------------------------------- */ .gbpi-event { display:flex; gap:1rem; align-items:center; background:#fff; border:1px solid var(--gbpi-line); border-radius:.6rem; padding:1rem; margin-bottom:.75rem; } @media (max-width: 575.98px) { .gbpi-event { flex-wrap: wrap !important; } } .gbpi-datechip { flex:0 0 auto; width:64px; text-align:center; background:#efece5; border-radius:.5rem; padding:.5rem 0; align-self:flex-start; } .gbpi-datechip .m { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gbpi-muted); } .gbpi-datechip .d { font-size:1.35rem; font-weight:800; line-height:1; } .gbpi-viewtoggle .btn { border-radius:50rem; } .gbpi-tabs .nav-link { color:var(--gbpi-muted); font-weight:700; border:none; padding:.25rem 0; margin-right:1.25rem; } .gbpi-tabs .nav-link.active { color:var(--gbpi-ink); border-bottom:2px solid var(--gbpi-ink); background:transparent; } /* ---- Footer -------------------------------------------------------- */ /* The footer's content sits in the same 1120px column as the header and page bands (the background still runs full width). */ .gbpi-footer { background:var(--gbpi-ink); color:rgba(255,255,255,.75); padding:3rem 0 1.25rem; } .gbpi-footer > .container, .gbpi-footer > .gbpi-container { max-width:1120px; margin-left:auto; margin-right:auto; } .gbpi-footer a { color:rgba(255,255,255,.75); text-decoration:none; } .gbpi-footer a:hover { color:#fff; text-decoration:underline; } /* Footer column headings are

: the page's outline runs h1 > h2 > h3, so level 5 here skipped two levels. The look is unchanged. */ .gbpi-footer h5, .gbpi-footer .h5 { color:var(--gbpi-lime-text); text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; font-weight:700; margin-bottom:.9rem; } .gbpi-footer .gbpi-brand { color:#fff; } .gbpi-footer .footer-links li { margin-bottom:.4rem; list-style:none; } .gbpi-footer .footer-links { padding-left:0; } .gbpi-footer-info { border-top:1px solid rgba(255,255,255,.12); margin-top:2rem; padding-top:1rem; font-size:.8rem; color:rgba(255,255,255,.55); } /* ---- Utilities ----------------------------------------------------- */ .gbpi-container { max-width:1120px; } .text-muted-2 { color:var(--gbpi-muted) !important; } /* ---- Staff & Board grid + bio page --------------------------------- Extends the .gbpi-person card above. The grid is a plain
    so the count is announced to screen readers; the whole card is one link, with the "Read bio" affordance hidden from the accessibility tree since the name already names the destination. ------------------------------- */ .gbpi-staff-grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1.75rem; } @media (max-width: 1199.98px) { .gbpi-staff-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .gbpi-staff-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.25rem; } } a.gbpi-person { text-decoration:none; color:inherit; display:flex; flex-direction:column; } a.gbpi-person:focus-visible { outline:3px solid var(--gbpi-primary); outline-offset:4px; border-radius:.5rem; } .gbpi-person__photo { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:.5rem; background:var(--gbpi-line); } .gbpi-person__cta { margin-top:.5rem; color:var(--gbpi-link); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; } a.gbpi-person:hover .gbpi-person__cta { text-decoration:underline; } .gbpi-staff-lead { font-size:1.12rem; line-height:1.6; color:var(--gbpi-ink); max-width:52ch; margin:0 0 1.5rem; } .gbpi-staff-contact { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin-bottom:1.75rem; } .gbpi-staff-social { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--gbpi-line); color:var(--gbpi-ink); text-decoration:none; transition:background .15s ease, color .15s ease; } .gbpi-staff-social:hover { background:var(--gbpi-primary); color:#fff; } .gbpi-staff-social:focus-visible { outline:3px solid var(--gbpi-primary); outline-offset:3px; } .gbpi-staff-portrait { margin:0; } .gbpi-staff-portrait img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:.65rem; background:var(--gbpi-line); } .gbpi-staff-subscribe { display:flex; gap:.5rem; align-items:stretch; } /* min-width:0 lets the input actually shrink inside the flex row; without it its intrinsic width wins and the button gets squeezed to its padding. */ .gbpi-staff-subscribe .form-control { flex:1 1 auto; min-width:0; width:auto; border-radius:50rem; border:1px solid var(--gbpi-line); padding:.5rem .95rem; } .gbpi-staff-subscribe button { flex:0 0 auto; white-space:nowrap; border:0; cursor:pointer; padding:.6rem 1.15rem; justify-content:center; } /* The bio's own

    Biography

    is the only heading in the prose column, so it keeps single.php's prose scale without the TOC scroll offset. */ .single-staff .gbpi-post-content h2:first-child { margin-top:0; } /* ---- Staff bio pages (gbpi-profile-*) ------------------------------- The bio pages carry hand-authored block markup — profile hero, contact row, bio band — that shipped without styles, so they rendered as a full-bleed headshot above unstyled prose. These rules bring them onto the Staff & Board design: portrait beside the name, contacts as pills, bio in the standard prose column. Portrait sits first in the markup (col-md-5) but right of the copy in the approved design, so the row reverses from md up. Order in the DOM is unchanged, so the reading order stays name-then-bio. ---------- */ .gbpi-profile-hero { background:var(--gbpi-paper); padding:3rem 0; } @media (min-width: 768px) { .gbpi-profile-hero .row { flex-direction:row-reverse; } } .gbpi-profile-hero__media { margin:0; } .gbpi-profile-hero__media img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:.65rem; background:var(--gbpi-line); } .gbpi-profile-hero__eyebrow { text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:700; color:var(--gbpi-muted); margin:0 0 .5rem; } .gbpi-profile-hero__name { font-family:var(--gbpi-font-heading); font-weight:700; font-size:clamp(2rem, 4vw, 3rem); line-height:1.08; color:var(--gbpi-ink); margin:0 0 1.25rem; } .gbpi-profile-hero__contact { display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; } .gbpi-profile-hero__contact a { display:inline-flex; align-items:center; gap:.45rem; background:var(--gbpi-ink); color:#fff; text-decoration:none; font-weight:700; font-size:.9rem; padding:.6rem 1.25rem; border-radius:50rem; transition:background .15s ease; } .gbpi-profile-hero__contact a:hover { background:#000; color:#fff; } .gbpi-profile-hero__contact a:focus-visible { outline:3px solid var(--gbpi-primary); outline-offset:3px; } /* Secondary links (social) read as quieter chips than the email CTA. */ .gbpi-profile-hero__contact a + a { background:var(--gbpi-line); color:var(--gbpi-ink); } .gbpi-profile-hero__contact a + a:hover { background:var(--gbpi-primary); color:#fff; } .gbpi-profile-hero__contact .dashicons { font-size:1rem; width:1rem; height:1rem; } .gbpi-profile-bio { padding:3rem 0; } .gbpi-profile-bio p { color:var(--gbpi-ink); font-size:1.02rem; line-height:1.65; max-width:68ch; margin:0 0 1.15rem; } .gbpi-profile-bio h2 { font-family:var(--gbpi-font-heading); font-size:1.5rem; margin:2rem 0 1rem; } /* Headshots are tall portraits; a centred square crop cuts through faces. Bias the crop upward so the subject stays in frame. */ .gbpi-person__photo, .gbpi-profile-hero__media img { object-position: 50% 18%; } /* Below the lg breakpoint the portrait column stacks full-width, where a 4:5 crop becomes a screen-filling slab. Flatten it to a banner instead. */ @media (max-width: 991.98px) { .gbpi-staff-portrait img, .gbpi-profile-hero__media img { aspect-ratio: 3/2; } } /* ---- Accessibility: text contrast ---------------------------------- Measured against the paper background (#fffdf7), two palette tones failed WCAG AA as text: brand green #72bf44 2.23:1 muted teal #739c9c 2.96:1 Resolved 17 Sep 2026 with GBPI's designer: --gbpi-muted is now #407878 (4.94:1) and text links use --gbpi-link, the brand teal (5.53:1). Both are applied site-wide above rather than patched per component, so this block only keeps the alias the Staff components were written against. --------------------------------------------------------------------- */ :root { --gbpi-muted-aa: var(--gbpi-muted); } /* ---- Board of Directors -------------------------------------------- Officers read as cards (they carry a role); plain members read as a lighter ruled list. Values match the approved Staff & Board design, except the affiliation colour, which uses the AA-compliant muted tone for the same reason the staff roles do. ------------------------- */ .gbpi-board__heading { font-size:1.75rem; margin:0 0 .4rem; } .gbpi-board__lead { font-size:.97rem; line-height:1.6; color:var(--gbpi-muted-aa); max-width:42.5rem; margin:0 0 2rem; } .gbpi-board__subheading { font-size:1.06rem; margin:0 0 1rem; } .gbpi-board-officers, .gbpi-board-members { list-style:none; padding:0; margin:0; display:grid; gap:1rem; } .gbpi-board-officers { grid-template-columns:repeat(3, minmax(0, 1fr)); margin-bottom:2.5rem; } .gbpi-board-members { grid-template-columns:repeat(4, minmax(0, 1fr)); } @media (max-width: 1199.98px) { .gbpi-board-members { grid-template-columns:repeat(3, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .gbpi-board-officers { grid-template-columns:repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .gbpi-board-members { grid-template-columns:repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .gbpi-board-officers, .gbpi-board-members { grid-template-columns:minmax(0, 1fr); } } .gbpi-board-person { display:flex; align-items:flex-start; } .gbpi-board-officers .gbpi-board-person { gap:.875rem; background:#fff; border:1px solid var(--gbpi-line); border-radius:.65rem; padding:1rem 1.125rem; } .gbpi-board-members .gbpi-board-person { gap:.75rem; padding:.875rem 0; border-top:1px solid var(--gbpi-line); } .gbpi-board-person__avatar { flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:50%; font-family:var(--gbpi-font-heading); font-weight:700; color:var(--gbpi-ink); } .gbpi-board-officers .gbpi-board-person__avatar { width:44px; height:44px; font-size:.875rem; background:var(--gbpi-lime); } .gbpi-board-members .gbpi-board-person__avatar { width:38px; height:38px; font-size:.78rem; background:var(--gbpi-line); } .gbpi-board-person__title { margin:0 0 .25rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gbpi-primary); } .gbpi-board-person__name { margin:0; font-family:var(--gbpi-font-heading); font-weight:700; color:var(--gbpi-ink); } .gbpi-board-officers .gbpi-board-person__name { font-size:.97rem; } .gbpi-board-members .gbpi-board-person__name { font-size:.91rem; } .gbpi-board-person__affil { margin:.125rem 0 0; color:var(--gbpi-muted-aa); line-height:1.4; } .gbpi-board-officers .gbpi-board-person__affil { font-size:.81rem; } .gbpi-board-members .gbpi-board-person__affil { font-size:.78rem; } /* ---- Staff & Board landing — team heading with member count ------- Right-aligned count next to the "GBPI Team" H2, per the approved design. Wraps gracefully on narrow screens. --------------------- */ .gbpi-team-header { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; } .gbpi-team-header h2 { margin:0; } /* The eyebrow inside the header's left column keeps its default bottom margin, which pushes the H2 down further than the visual baseline asks for. Zero it so the eyebrow sits tight above the heading. */ .gbpi-team-header > .wp-block-group > .gbpi-eyebrow { margin-bottom:.25rem; } .gbpi-team-count { color:var(--gbpi-muted-aa); font-size:.85rem; white-space:nowrap; margin:0; } /* ---- Board section sits inside the same paper band as the staff grid. Give it a top margin equal to the officers → members h3 rhythm below, so the two section transitions read at the same pace: the space above "Board of Directors" matches the space above "Board Members". !important beats Bootscore's `.is-layout-flow > * { margin-block-start:0 }` which zeros every layout-flow child at (0,3,0) specificity. */ .gbpi-board, .gbpi-staff-grid + .gbpi-board { margin-top:2.5rem !important; } /* ---- About page: "Meet our team" grid ---------------------------- 4-column responsive grid of leadership headshots. Each card is a square (1:1) image on top with bold name + role text below. Used only on About Us — the Staff & Board landing has its own dynamic grid (.gbpi-staff-grid) driven by inc/staff.php. ------------------ */ .gbpi-team-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:1.5rem; } @media (max-width: 991.98px) { .gbpi-team-grid { grid-template-columns:repeat(2, 1fr); } } @media (max-width: 480px) { .gbpi-team-grid { grid-template-columns:1fr; } } .gbpi-team-card { display:flex; flex-direction:column; text-decoration:none; color:var(--gbpi-ink); } .gbpi-team-card__media { margin:0; overflow:hidden; border-radius:.4rem; } .gbpi-team-card__media img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .3s ease; } .gbpi-team-card:hover .gbpi-team-card__media img { transform:scale(1.03); } .gbpi-team-card__body { padding:.85rem 0 0; } .gbpi-team-card__name { display:block; font-family:var(--gbpi-font-heading); font-weight:700; color:var(--gbpi-ink); font-size:1rem; margin-bottom:.15rem; } .gbpi-team-card__role { display:block; color:var(--gbpi-muted-aa); font-size:.85rem; line-height:1.4; } /* ---- Staff detail — mobile refinements --------------------------- Design shows the portrait above the name+role+contact block on mobile, and a square (1:1) crop for that mobile portrait — a 3:2 banner leaves too much dead space. Below the lg breakpoint the header row reverses so the col-lg-5 portrait renders first, and the crop tightens to 1:1. ---------------------------------------- */ @media (max-width: 991.98px) { .single-staff > main > .gbpi-band.gbpi-paper .row { flex-direction: column-reverse; } .gbpi-staff-portrait img { aspect-ratio: 1/1; } } /* ===================================================================== Events — listing + detail (design canvas "GBPI Events") ===================================================================== */ /* ---- Filter chip row ----------------------------------------------- */ .gbpi-events-filter { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:1.25rem 0 0.5rem; margin-bottom:1.25rem; border-bottom:1px solid var(--gbpi-line); } .gbpi-events-filter__label { margin-bottom:0; letter-spacing:.16em; } .gbpi-events-filter__chips { display:flex; flex-wrap:wrap; gap:.5rem; padding-bottom:.75rem; } .gbpi-event-chip-pill { display:inline-flex; align-items:center; padding:.42rem 1rem; border-radius:50rem; font-size:.86rem; font-weight:600; color:var(--gbpi-ink); background:var(--gbpi-white); border:1px solid var(--gbpi-line); text-decoration:none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .gbpi-event-chip-pill:hover { background:var(--gbpi-paper); color:var(--gbpi-ink); border-color:var(--gbpi-muted); } .gbpi-event-chip-pill.is-current { background:var(--gbpi-ink); color:#fff; border-color:var(--gbpi-ink); } .gbpi-event-chip-pill:focus-visible { outline:2px solid var(--gbpi-primary); outline-offset:2px; } /* ---- Section rhythm ------------------------------------------------ */ .gbpi-events-listing { display:flex; flex-direction:column; gap:2.5rem; } .gbpi-events-heading-row { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; } .gbpi-events-heading-row h2 { margin:0; font-size:1.75rem; } .gbpi-events-count { color:var(--gbpi-muted); font-size:.9rem; } .gbpi-events-hero-band .gbpi-eyebrow, .gbpi-events-past .gbpi-eyebrow { margin-bottom:.75rem; letter-spacing:.16em; } /* ---- NEXT UP hero card -------------------------------------------- */ .gbpi-event-hero { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:2rem; background:var(--gbpi-white); border:1px solid var(--gbpi-line); border-radius:.85rem; overflow:hidden; align-items:stretch; } .gbpi-event-hero__media { position:relative; overflow:hidden; min-height:280px; } .gbpi-event-hero__media img { width:100%; height:100%; object-fit:cover; display:block; } .gbpi-event-hero__body { padding:2rem 2rem 2rem 0; display:flex; flex-direction:column; gap:.9rem; justify-content:center; } .gbpi-event-hero__body .gbpi-post-terms { margin:0; } .gbpi-event-hero__meta { color:var(--gbpi-muted); font-size:.9rem; margin:0; } .gbpi-event-hero__title { font-family:var(--gbpi-font-heading); font-size:1.7rem; line-height:1.2; color:var(--gbpi-ink); margin:0; } .gbpi-event-hero__title a { color:inherit; text-decoration:none; } .gbpi-event-hero__title a:hover { text-decoration:underline; } .gbpi-event-hero__lead { color:var(--gbpi-ink); margin:0; line-height:1.55; font-size:1rem; } .gbpi-event-hero__ctas { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-top:.35rem; } @media (max-width: 767.98px) { .gbpi-event-hero { grid-template-columns:1fr; } .gbpi-event-hero__media { min-height:180px; } .gbpi-event-hero__body { padding:1.5rem; } .gbpi-event-hero__title { font-size:1.35rem; } } /* ---- Empty state (no upcoming) ------------------------------------ */ .gbpi-events-empty { background:var(--gbpi-paper); border:1px dashed var(--gbpi-line); border-radius:.75rem; padding:2rem; } .gbpi-events-empty p { color:var(--gbpi-muted); margin:.35rem 0 0; } /* ---- Row list (upcoming + past share the layout) ------------------ */ .gbpi-event-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; } .gbpi-event-row { display:grid; grid-template-columns: auto minmax(0, 1fr) auto; gap:1.5rem; align-items:center; padding:1.1rem 1.25rem; background:var(--gbpi-white); border:1px solid var(--gbpi-line); border-radius:.65rem; transition:box-shadow .15s ease, transform .15s ease; } .gbpi-event-row:hover { box-shadow:0 8px 20px rgba(0,0,0,.06); transform:translateY(-1px); } /* Two-line date chip — big cream tile with month over day */ .gbpi-event-chip { display:flex; flex-direction:column; align-items:center; justify-content:center; width:64px; height:64px; background:var(--gbpi-paper); color:var(--gbpi-ink); border-radius:.55rem; border:1px solid var(--gbpi-line); font-family:var(--gbpi-font-heading); } .gbpi-event-chip__mo { font-size:.7rem; font-weight:700; letter-spacing:.08em; color:var(--gbpi-muted); text-transform:uppercase; margin-bottom:.1rem; } .gbpi-event-chip__day { font-size:1.5rem; font-weight:700; line-height:1; } .gbpi-event-row__body { min-width:0; } .gbpi-event-row__title { margin:0 0 .25rem; font-size:1.05rem; font-family:var(--gbpi-font-heading); font-weight:700; color:var(--gbpi-ink); line-height:1.3; } .gbpi-event-row__title a { color:inherit; text-decoration:none; } .gbpi-event-row__title a:hover { text-decoration:underline; } .gbpi-event-row__meta { margin:0; color:var(--gbpi-muted); font-size:.9rem; } .gbpi-event-row__tail { display:flex; align-items:center; gap:1rem; flex-shrink:0; } .gbpi-event-row__tail .gbpi-post-terms { margin:0; } .gbpi-event-row__cta { color:var(--gbpi-primary); font-weight:700; text-decoration:none; white-space:nowrap; font-size:.9rem; } /* The arrow was CSS generated content, which screen readers read out as a word. It is markup now (gbpi_arrow(), aria-hidden), so it stays visual-only. */ .gbpi-event-row__cta:hover { text-decoration:underline; } .gbpi-event-row__cta.is-disabled { color:var(--gbpi-muted); } .gbpi-event-row--past .gbpi-event-chip { background:var(--gbpi-white); opacity:.85; } @media (max-width: 767.98px) { .gbpi-event-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "chip body" "tail tail"; gap:1rem; } .gbpi-event-chip { grid-area:chip; width:56px; height:56px; } .gbpi-event-chip__day { font-size:1.3rem; } .gbpi-event-row__body { grid-area:body; } .gbpi-event-row__tail { grid-area:tail; justify-content:space-between; width:100%; padding-top:.75rem; border-top:1px solid var(--gbpi-line); } } /* ---- Pagination ---------------------------------------------------- */ .gbpi-events-pagination { display:flex; justify-content:center; align-items:center; gap:.5rem; margin-top:2rem; padding-top:1rem; } .gbpi-events-pagination__num, .gbpi-events-pagination__next, .gbpi-events-pagination__ellipsis { min-width:2.25rem; height:2.25rem; padding:0 .75rem; display:inline-flex; align-items:center; justify-content:center; border-radius:.4rem; text-decoration:none; color:var(--gbpi-ink); font-weight:600; font-size:.9rem; } .gbpi-events-pagination__num { border:1px solid var(--gbpi-line); background:var(--gbpi-white); } .gbpi-events-pagination__num:hover { background:var(--gbpi-paper); color:var(--gbpi-ink); } .gbpi-events-pagination__num.is-current { background:var(--gbpi-ink); color:#fff; border-color:var(--gbpi-ink); } .gbpi-events-pagination__ellipsis { color:var(--gbpi-muted); } .gbpi-events-pagination__next { color:var(--gbpi-primary); font-weight:700; } .gbpi-events-pagination__next:hover { text-decoration:underline; } .gbpi-event-chip-pill:focus-visible, .gbpi-event-row__cta:focus-visible, .gbpi-events-pagination a:focus-visible { outline:2px solid var(--gbpi-primary); outline-offset:2px; } /* ===================================================================== Event detail — sticky facts panel + speakers rail ===================================================================== */ .gbpi-event-detail__tags { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; } .gbpi-event-detail__tags .gbpi-post-terms { margin:0; } .gbpi-event-detail__title { margin:0 0 1rem; } .gbpi-event-detail__lead { font-size:1.1rem; line-height:1.6; color:var(--gbpi-ink); max-width:56ch; } .gbpi-event-facts { background:var(--gbpi-white); border:1px solid var(--gbpi-line); border-radius:.75rem; padding:1.5rem; position:sticky; top:1rem; display:flex; flex-direction:column; gap:1rem; } .gbpi-event-facts__row { margin:0; } .gbpi-event-facts__row .gbpi-eyebrow { margin-bottom:.35rem; letter-spacing:.14em; } .gbpi-event-facts__row p:last-child { margin:0; font-weight:600; color:var(--gbpi-ink); line-height:1.4; } .gbpi-event-facts__ctas { display:flex; flex-direction:column; gap:.75rem; padding-top:.5rem; border-top:1px solid var(--gbpi-line); align-items:flex-start; } .gbpi-event-facts__ics { color:var(--gbpi-primary); } .gbpi-event-facts__note { margin:0; font-size:.82rem; color:var(--gbpi-muted); line-height:1.5; } @media (max-width: 991.98px) { .gbpi-event-facts { position:static; } .single-event .gbpi-event-detail .row { --bs-gutter-y: 2rem; } } /* Speaker rail */ .gbpi-event-speakers { list-style:none; margin:0 0 .75rem; padding:0; display:flex; flex-direction:column; gap:.9rem; } .gbpi-event-speaker { display:flex; align-items:center; gap:.85rem; } .gbpi-event-speaker img { width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--gbpi-paper); } .gbpi-event-speaker__name { display:block; font-family:var(--gbpi-font-heading); font-weight:700; color:var(--gbpi-ink); text-decoration:none; font-size:.98rem; line-height:1.3; } .gbpi-event-speaker__name:hover { text-decoration:underline; color:var(--gbpi-primary); } .gbpi-event-speaker__role { display:block; color:var(--gbpi-muted); font-size:.82rem; line-height:1.35; } .gbpi-event-speakers__note { margin:0; font-size:.78rem; color:var(--gbpi-muted); line-height:1.4; } /* ===================================================================== Campaigns & Coalitions — listing + detail (design canvas "GBPI Campaigns & Coalitions" and "Campaign detail") ===================================================================== */ .gbpi-campaigns-listing { display:flex; flex-direction:column; gap:3.5rem; padding:1rem 0; } .gbpi-campaigns-section { display:flex; flex-direction:column; } .gbpi-campaigns-section .gbpi-eyebrow { margin-bottom:.75rem; letter-spacing:.16em; } .gbpi-campaigns-heading-row { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.5rem; } .gbpi-campaigns-heading-row h2 { margin:0; font-size:1.75rem; } .gbpi-campaigns-intro { color:var(--gbpi-ink); max-width:66ch; margin:0 0 1.5rem; line-height:1.55; } /* Active campaigns — 3-up card grid */ .gbpi-campaigns-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.75rem; } .gbpi-campaign-card { background:var(--gbpi-white); border:1px solid var(--gbpi-line); border-radius:.75rem; padding:1.75rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap:1rem; transition:box-shadow .15s ease, transform .15s ease; } .gbpi-campaign-card:hover { box-shadow:0 10px 24px rgba(0,0,0,.08); transform:translateY(-2px); } .gbpi-campaign-card__body { display:flex; flex-direction:column; gap:.75rem; flex:1; } .gbpi-campaign-card__tag { margin:0; } .gbpi-campaign-card__title { margin:0; font-family:var(--gbpi-font-heading); font-size:1.25rem; font-weight:700; color:var(--gbpi-ink); line-height:1.25; } .gbpi-campaign-card__title a { color:inherit; text-decoration:none; } .gbpi-campaign-card__title a:hover { text-decoration:underline; } .gbpi-campaign-card__lead { color:var(--gbpi-ink); margin:0; line-height:1.55; font-size:.95rem; } .gbpi-campaign-card__foot { display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; padding-top:.25rem; } .gbpi-campaign-card__foot .gbpi-pill { justify-content:center; } .gbpi-campaign-card__caption { margin:0; font-size:.7rem; font-weight:700; color:var(--gbpi-muted); letter-spacing:.1em; text-transform:uppercase; line-height:1.4; } @media (max-width: 991.98px) { .gbpi-campaigns-grid { grid-template-columns:repeat(2, 1fr); gap:1.25rem; } } @media (max-width: 575.98px) { .gbpi-campaigns-grid { grid-template-columns:1fr; } } /* Coalitions grid — 2-up plainer treatment, no CTAs */ .gbpi-coalitions-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.25rem; } .gbpi-coalition-card { background:var(--gbpi-paper); border:1px solid var(--gbpi-line); border-radius:.6rem; padding:1.5rem 1.5rem 1.35rem; } .gbpi-coalition-card__title { margin:0 0 .5rem; font-family:var(--gbpi-font-heading); font-size:1.15rem; font-weight:700; color:var(--gbpi-ink); } .gbpi-coalition-card__lead { color:var(--gbpi-ink); margin:0; font-size:.95rem; line-height:1.5; } @media (max-width: 767.98px) { .gbpi-coalitions-grid { grid-template-columns:1fr; } } /* Past campaigns — inline list */ .gbpi-campaigns-past-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; max-width:70ch; } .gbpi-campaigns-past-list li { padding:.85rem 1rem; background:var(--gbpi-white); border:1px solid var(--gbpi-line); border-radius:.5rem; } .gbpi-campaigns-past-list a { color:var(--gbpi-ink); text-decoration:none; font-weight:700; } .gbpi-campaigns-past-list a:hover { text-decoration:underline; } .gbpi-campaigns-past-list span { color:var(--gbpi-muted); font-weight:500; } .gbpi-campaigns-empty { background:var(--gbpi-paper); border:1px dashed var(--gbpi-line); border-radius:.5rem; padding:1.5rem; color:var(--gbpi-muted); } /* ---- Campaign detail ---------------------------------------------- */ .gbpi-campaign-detail-head__title { margin:0 0 1rem; } .gbpi-campaign-detail-head__lead { font-size:1.15rem; line-height:1.55; color:var(--gbpi-ink); max-width:60ch; margin:0 0 1.75rem; } .gbpi-campaign-detail-head__ctas { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; } /* Numbered "How to take part" rail */ .gbpi-campaign-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; } .gbpi-campaign-step { display:flex; gap:.9rem; align-items:flex-start; } .gbpi-campaign-step__num { display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; background:var(--gbpi-primary); color:#fff; font-family:var(--gbpi-font-heading); font-weight:700; font-size:.95rem; flex-shrink:0; } .gbpi-campaign-step__title { margin:0 0 .15rem; font-family:var(--gbpi-font-heading); font-weight:700; color:var(--gbpi-ink); font-size:1rem; line-height:1.3; } .gbpi-campaign-step__desc { margin:0; color:var(--gbpi-muted); font-size:.9rem; line-height:1.45; } /* Coalition contact card */ .gbpi-campaign-contact__row { display:flex; align-items:center; gap:.85rem; margin-top:.35rem; } .gbpi-campaign-contact__row img { width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--gbpi-paper); } .gbpi-campaign-contact__name { display:block; font-family:var(--gbpi-font-heading); font-weight:700; color:var(--gbpi-ink); text-decoration:none; font-size:1rem; line-height:1.3; } .gbpi-campaign-contact__name:hover { text-decoration:underline; color:var(--gbpi-primary); } .gbpi-campaign-contact__role { display:block; color:var(--gbpi-muted); font-size:.82rem; line-height:1.35; } .gbpi-campaign-contact__note { margin:.85rem 0 0; font-size:.78rem; color:var(--gbpi-muted); line-height:1.4; } /* ===================================================================== Responsive refinements — Events + Campaigns ===================================================================== */ /* Filter chips: bump touch target to ~44px on mobile, breathe the row. */ @media (max-width: 767.98px) { .gbpi-events-filter { padding-top:1rem; margin-bottom:1rem; gap:.75rem; } .gbpi-events-filter__chips { gap:.5rem 0.5rem; padding-bottom:.5rem; } .gbpi-event-chip-pill { padding:.65rem 1rem; font-size:.9rem; } } /* Section heading row: the eyebrow-style "count / note" on the right hand side crowds a two-word H2 in the phone width — stack them vertically. */ @media (max-width: 575.98px) { .gbpi-events-heading-row, .gbpi-campaigns-heading-row { flex-direction:column; align-items:flex-start; gap:.25rem; } .gbpi-events-heading-row h2, .gbpi-campaigns-heading-row h2 { font-size:1.4rem; } .gbpi-events-count { font-size:.85rem; } } /* Event hero card: tighten body padding + title on very narrow phones. */ @media (max-width: 575.98px) { .gbpi-event-hero__media { min-height:150px; } .gbpi-event-hero__body { padding:1.25rem; gap:.75rem; } .gbpi-event-hero__title { font-size:1.2rem; } .gbpi-event-hero__lead { font-size:.95rem; } .gbpi-event-hero__ctas { gap:.85rem; } } /* Event row: on very narrow phones, drop the row padding and align the tail's pill + register CTA on the same line without wrap. */ @media (max-width: 575.98px) { .gbpi-event-row { padding:.95rem 1rem; gap:.85rem; } .gbpi-event-row__title { font-size:1rem; } .gbpi-event-row__meta { font-size:.85rem; } .gbpi-event-row__cta { font-size:.9rem; } } /* Pagination: enlarge touch targets on mobile. */ @media (max-width: 767.98px) { .gbpi-events-pagination__num, .gbpi-events-pagination__next, .gbpi-events-pagination__ellipsis { min-width:2.5rem; height:2.5rem; } } /* CTA band: reduce vertical padding + tighten the two-column layout into a stack on phones so text and CTA breathe. */ @media (max-width: 767.98px) { .gbpi-cta-band { padding:1.75rem 0; } .gbpi-cta-band--teal { padding:1.75rem 0; } .gbpi-cta-band .container, .gbpi-cta-band .gbpi-container { flex-direction:column; align-items:flex-start !important; gap:1rem !important; } .gbpi-cta-band h2 { font-size:1.2rem !important; } .gbpi-cta-band .wp-block-buttons { width:auto; } } /* ---- Campaigns listing --------------------------------------------- */ /* Cards get a bit tighter and single-column at phone widths (already handled by the 575.98 breakpoint) — but tune padding + typography. */ @media (max-width: 575.98px) { .gbpi-campaigns-listing { gap:2.5rem; } .gbpi-campaign-card { padding:1.5rem 1.25rem 1.35rem; } .gbpi-campaign-card__title { font-size:1.15rem; } .gbpi-coalition-card { padding:1.25rem 1.25rem 1.1rem; } .gbpi-campaigns-past-list li { padding:.85rem .95rem; } } /* ---- Campaign detail — mobile order ------------------------------- */ /* The shared .gbpi-post-layout mobile rule reorders sidebar children for blog TOCs (TOC → content → search → recent). Campaign detail has no TOC; the aside cards should sit AFTER the article body on phones. The modifier keeps the desktop grid untouched and only re-orders in the flex-column stack. */ @media (max-width: 991.98px) { .gbpi-post-layout--rail .gbpi-post-content { order:1; } .gbpi-post-layout--rail .gbpi-post-sidebar > * { order:2; } } /* Campaign detail head: primary/secondary CTAs should stack on very narrow phones so the primary button doesn't get cropped by the pill underline of the secondary. */ @media (max-width: 575.98px) { .gbpi-campaign-detail-head__ctas { gap:.75rem; } .gbpi-campaign-detail-head__lead { font-size:1.05rem; margin-bottom:1.25rem; } } /* Campaign steps + contact card polish for phone screens. */ @media (max-width: 575.98px) { .gbpi-campaign-step__title { font-size:.98rem; } .gbpi-campaign-step__desc { font-size:.88rem; } .gbpi-campaign-contact__row img { width:56px; height:56px; } } /* ---- Event detail --------------------------------------------------- Facts panel already drops position:static below lg. Tighten padding + tag row wrap on phones. */ @media (max-width: 767.98px) { .gbpi-event-detail__lead { font-size:1rem; } .gbpi-event-facts { padding:1.25rem; } .gbpi-event-facts__ctas { padding-top:.75rem; } } /* Speakers rail — allow name text to break onto two lines cleanly. */ @media (max-width: 575.98px) { .gbpi-event-speaker img { width:52px; height:52px; } .gbpi-event-speaker__name { font-size:.94rem; } } /* Breadcrumb: allow to wrap without touching viewport edges. */ @media (max-width: 575.98px) { .gbpi-breadcrumb-band .container, .gbpi-breadcrumb-band .gbpi-container { padding-left:1rem; padding-right:1rem; } } /* ===================================================================== Get Involved forms — Request a Speaker + Share Your Story ===================================================================== */ /* Ghost pill on light backgrounds — used inside success cards. */ .gbpi-pill--ghost { background:transparent; color:var(--gbpi-ink); border:1.5px solid var(--gbpi-ink); } .gbpi-pill--ghost:hover { background:var(--gbpi-ink); color:#fff; } /* Two-column shell — form left, sidebar right */ .gbpi-form-shell { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:2.5rem; padding:2.5rem 0 3rem; } @media (max-width: 991.98px) { .gbpi-form-shell { grid-template-columns:1fr; gap:2rem; padding:2rem 0; } } .gbpi-form-main { background:#fff; border:1px solid var(--gbpi-line); border-radius:.9rem; padding:2rem 2.25rem; } @media (max-width: 575.98px) { .gbpi-form-main { padding:1.5rem 1.25rem; border-radius:.75rem; } } .gbpi-form-side { display:flex; flex-direction:column; gap:1.25rem; position:sticky; top:100px; align-self:start; } @media (max-width: 991.98px) { .gbpi-form-side { position:static; } } /* Numbered section eyebrow */ .gbpi-form-section { margin:0 0 2.25rem; } .gbpi-form-section:last-of-type { margin-bottom:1.5rem; } .gbpi-form-section__head { display:flex; align-items:center; gap:.85rem; margin:0 0 1.25rem; padding-bottom:.85rem; border-bottom:1px solid var(--gbpi-line); } .gbpi-form-eyebrow-num { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; flex:0 0 2rem; border-radius:50%; background:var(--gbpi-primary); color:#fff; font-family:var(--gbpi-font-heading); font-weight:700; font-size:1rem; } .gbpi-form-section__title { margin:0; font-family:var(--gbpi-font-heading); font-size:1.35rem; font-weight:700; color:var(--gbpi-ink); } .gbpi-form-section__lead { margin:.5rem 0 1rem; color:var(--gbpi-muted); font-size:.95rem; line-height:1.55; } /* Story form section is card-shaped (one section, no numbers). */ .gbpi-form-section--card .gbpi-form-section__head { flex-direction:column; align-items:flex-start; gap:.35rem; padding-bottom:1rem; border-bottom:1px solid var(--gbpi-line); margin-bottom:1.5rem; } .gbpi-form-section--card .gbpi-form-section__head .gbpi-eyebrow { letter-spacing:.16em; margin-bottom:0; } /* Field row */ .gbpi-form-field { margin:0 0 1.25rem; display:flex; flex-direction:column; gap:.4rem; } .gbpi-form-field:last-child { margin-bottom:0; } .gbpi-form-label, .gbpi-form-field--radios > legend.gbpi-form-label { display:block; margin:0; font-family:var(--gbpi-font-body); font-weight:600; color:var(--gbpi-ink); font-size:.95rem; line-height:1.35; } .gbpi-form-req { color:var(--gbpi-primary); font-weight:600; } .gbpi-form-opt { color:var(--gbpi-muted); font-weight:500; font-size:.88em; } .gbpi-form-field input[type="text"], .gbpi-form-field input[type="email"], .gbpi-form-field input[type="tel"], .gbpi-form-field input[type="url"], .gbpi-form-field input[type="date"], .gbpi-form-field input[type="time"], .gbpi-form-field input[type="number"], .gbpi-form-field textarea, .gbpi-form-field select { width:100%; padding:.7rem .9rem; background:#fff; border:1.5px solid var(--gbpi-line); border-radius:.5rem; font-family:var(--gbpi-font-body); font-size:1rem; color:var(--gbpi-ink); line-height:1.4; transition: border-color .12s ease, box-shadow .12s ease; } .gbpi-form-field textarea { resize:vertical; min-height:8rem; } .gbpi-form-field input:focus, .gbpi-form-field textarea:focus, .gbpi-form-field select:focus { outline:none; border-color:var(--gbpi-primary); box-shadow:0 0 0 3px rgba(46, 105, 87, .18); } .gbpi-form-field input::placeholder, .gbpi-form-field textarea::placeholder { color:var(--gbpi-muted); opacity:.85; } .gbpi-form-selectwrap { position:relative; } .gbpi-form-selectwrap::after { content:""; position:absolute; right:1rem; top:50%; width:.55rem; height:.55rem; border-right:2px solid var(--gbpi-ink); border-bottom:2px solid var(--gbpi-ink); transform:translateY(-70%) rotate(45deg); pointer-events:none; } .gbpi-form-selectwrap select { appearance:none; -webkit-appearance:none; padding-right:2.5rem; background-image:none; } /* Grid rows */ .gbpi-form-grid { display:grid; gap:1rem; margin-bottom:1.25rem; } .gbpi-form-grid--2 { grid-template-columns:repeat(2, minmax(0, 1fr)); } .gbpi-form-grid--3 { grid-template-columns:repeat(3, minmax(0, 1fr)); } .gbpi-form-grid .gbpi-form-field { margin-bottom:0; } @media (max-width: 767.98px) { .gbpi-form-grid--2, .gbpi-form-grid--3 { grid-template-columns:1fr; } } /* Radio row (Format · Honorarium) */ .gbpi-form-field--radios { border:0; padding:0; margin:0 0 1.25rem; } .gbpi-form-field--radios .gbpi-form-label { margin-bottom:.5rem; } .gbpi-form-radiorow { display:flex; flex-wrap:wrap; gap:.65rem; } .gbpi-form-radio { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; background:#fff; border:1.5px solid var(--gbpi-line); border-radius:50rem; font-size:.95rem; color:var(--gbpi-ink); cursor:pointer; transition: background .12s ease, border-color .12s ease; } .gbpi-form-radio:hover { background:var(--gbpi-paper); } .gbpi-form-radio input { accent-color: var(--gbpi-primary); } .gbpi-form-radio:has(input:checked) { background:var(--gbpi-primary); color:#fff; border-color:var(--gbpi-primary); } .gbpi-form-radio:has(input:focus-visible) { box-shadow:0 0 0 3px rgba(46, 105, 87, .18); } /* File upload */ .gbpi-form-field--file input[type=file] { padding:.6rem; background:var(--gbpi-paper); border:1.5px dashed var(--gbpi-line); border-radius:.5rem; font-size:.95rem; } /* Help + inline error text */ .gbpi-form-help { margin:.15rem 0 0; color:var(--gbpi-muted); font-size:.85rem; line-height:1.4; } .gbpi-form-fielderr { margin:.15rem 0 0; color:#a11a2b; font-size:.9rem; font-weight:600; line-height:1.35; display:flex; align-items:flex-start; gap:.4rem; } .gbpi-form-fielderr__icon { display:inline-flex; align-items:center; justify-content:center; width:1.15rem; height:1.15rem; flex-shrink:0; background:#a11a2b; color:#fff; border-radius:50%; font-size:.75rem; font-weight:900; line-height:1; } .gbpi-form-field.is-error input, .gbpi-form-field.is-error textarea, .gbpi-form-field.is-error select { border-color:#a11a2b; box-shadow:0 0 0 3px rgba(161, 26, 43, .12); } /* Conditional (progressive-disclosure) block */ .gbpi-form-conditional { background:var(--gbpi-paper); border:1px solid var(--gbpi-line); border-radius:.6rem; padding:1.25rem 1.25rem .35rem; margin:0 0 1.25rem; } .gbpi-form-conditional[hidden] { display:none !important; } .gbpi-form-conditional__eyebrow { margin:0 0 .85rem; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gbpi-muted); } /* Honeypot — off-screen; never visible to real users */ .gbpi-form-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* Validation summary — focusable, always at the top of the form */ .gbpi-form-summary { background:#fdecef; border:1.5px solid #a11a2b; border-radius:.6rem; padding:1rem 1.25rem; margin:0 0 1.75rem; outline:none; } .gbpi-form-summary:focus { box-shadow:0 0 0 3px rgba(161, 26, 43, .2); } .gbpi-form-summary__title { display:flex; align-items:center; gap:.5rem; margin:0 0 .5rem; font-family:var(--gbpi-font-heading); font-weight:700; color:#a11a2b; font-size:1.05rem; } .gbpi-form-summary__icon { display:inline-flex; align-items:center; justify-content:center; width:1.35rem; height:1.35rem; flex-shrink:0; background:#a11a2b; color:#fff; border-radius:50%; font-weight:900; } .gbpi-form-summary__list { margin:0; padding:0 0 0 1.5rem; color:#a11a2b; font-size:.95rem; line-height:1.5; } .gbpi-form-summary__list a { color:#a11a2b; font-weight:700; } .gbpi-form-summary__reason { color:#7a1522; font-weight:500; } /* Consent cards */ .gbpi-form-consent { margin:2rem 0 1.5rem; padding:1.5rem 0 0; border-top:1px solid var(--gbpi-line); } .gbpi-form-consent__head { margin:0 0 .35rem; font-family:var(--gbpi-font-heading); font-weight:700; font-size:1.15rem; color:var(--gbpi-ink); } .gbpi-form-consent__lead { margin:0 0 1rem; color:var(--gbpi-muted); font-size:.95rem; line-height:1.5; } .gbpi-consent-card { display:flex; align-items:flex-start; gap:.9rem; background:#fff; border:1.5px solid var(--gbpi-line); border-radius:.6rem; padding:1rem 1.15rem; margin:0 0 .75rem; cursor:pointer; transition: border-color .12s ease, background .12s ease; } .gbpi-consent-card:hover { border-color:var(--gbpi-muted); } .gbpi-consent-card input[type="checkbox"] { width:1.25rem; height:1.25rem; flex-shrink:0; margin-top:.15rem; accent-color: var(--gbpi-primary); } .gbpi-consent-card:has(input:checked) { border-color:var(--gbpi-primary); background:rgba(46, 105, 87, .05); } .gbpi-consent-card__body { display:flex; flex-direction:column; gap:.15rem; } .gbpi-consent-card__title { font-family:var(--gbpi-font-body); font-weight:700; color:var(--gbpi-ink); font-size:.98rem; line-height:1.35; } .gbpi-consent-card__desc { color:var(--gbpi-muted); font-size:.9rem; line-height:1.5; } .gbpi-form-privacy { margin:1.5rem 0 1rem; color:var(--gbpi-muted); font-size:.9rem; line-height:1.55; } .gbpi-form-privacy a { color:var(--gbpi-primary); } /* Submit row */ .gbpi-form-submitrow { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--gbpi-line); } .gbpi-form-section--card .gbpi-form-submitrow { border-top:0; padding-top:0; } .gbpi-form-submit[disabled] { opacity:.7; cursor:progress; } .gbpi-form-submitnote { margin:0; color:var(--gbpi-muted); font-size:.9rem; } /* Success card */ .gbpi-form-success { background:#fff; border:1px solid var(--gbpi-line); border-radius:.9rem; padding:2.5rem 2.25rem; max-width:640px; margin:2rem auto; outline:none; } .gbpi-form-success:focus { box-shadow:0 0 0 3px rgba(46, 105, 87, .2); } .gbpi-form-success__icon { display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; background:var(--gbpi-primary); color:#fff; border-radius:50%; font-size:1.35rem; font-weight:900; margin-bottom:1rem; } .gbpi-form-success__title { margin:0 0 1rem; font-family:var(--gbpi-font-heading); font-size:1.75rem; color:var(--gbpi-ink); } .gbpi-form-success p { margin:0 0 .85rem; color:var(--gbpi-ink); font-size:1.02rem; line-height:1.55; } .gbpi-form-success__echo { background:var(--gbpi-paper); border-left:4px solid var(--gbpi-primary); padding:.85rem 1.15rem; border-radius:.35rem; margin:1rem 0 !important; color:var(--gbpi-ink) !important; font-size:.98rem !important; } .gbpi-form-success__ctas { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; } /* Sidebar cards inside the form shell — reuse existing .gbpi-sidebar-card */ .gbpi-form-side .gbpi-sidebar-card { background:#fff; border:1px solid var(--gbpi-line); border-radius:.75rem; padding:1.5rem 1.35rem; } .gbpi-form-side .gbpi-sidebar-card--muted { background:var(--gbpi-white); } .gbpi-form-side .gbpi-sidebar-card p { margin:0 0 .65rem; color:var(--gbpi-ink); font-size:.95rem; line-height:1.55; } .gbpi-form-side .gbpi-sidebar-card p:last-child { margin-bottom:0; } .gbpi-form-side .gbpi-sidebar-card .gbpi-eyebrow { margin-bottom:.85rem; letter-spacing:.16em; } .gbpi-form-bullets { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.55rem; } .gbpi-form-bullets li { position:relative; padding-left:1.25rem; color:var(--gbpi-ink); font-size:.94rem; line-height:1.5; } .gbpi-form-bullets li::before { content:""; position:absolute; left:0; top:.55rem; width:.5rem; height:.5rem; border-radius:50%; background:var(--gbpi-primary); } .gbpi-form-sidebar-note { margin-top:.5rem !important; color:var(--gbpi-muted) !important; font-size:.82rem !important; font-style:italic; } .gbpi-form-sidebar-link { display:inline-block; margin-top:.5rem; color:var(--gbpi-primary); font-weight:700; text-decoration:none; } .gbpi-form-sidebar-link:hover { text-decoration:underline; color:var(--gbpi-primary); } /* Numbered "What happens next" steps */ .gbpi-form-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.85rem; } .gbpi-form-steps li { display:flex; align-items:flex-start; gap:.75rem; } .gbpi-form-steps p { margin:0; font-size:.94rem; line-height:1.5; } .gbpi-form-steps__num { display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; flex-shrink:0; background:var(--gbpi-primary); color:#fff; border-radius:50%; font-family:var(--gbpi-font-heading); font-weight:700; font-size:.9rem; } @media (max-width: 575.98px) { .gbpi-form-section__head { flex-direction:row; align-items:center; } .gbpi-form-section__title { font-size:1.2rem; } .gbpi-form-section--card .gbpi-form-section__head { flex-direction:column; } .gbpi-form-success { padding:2rem 1.5rem; } .gbpi-form-success__title { font-size:1.4rem; } .gbpi-form-submitrow { gap:1rem; padding-top:1.25rem; margin-top:1.25rem; } .gbpi-form-radio { padding:.65rem 1rem; } } /* ---- Adjacent band contrast ----------------------------------------- On Events the band order is: paper "Upcoming events" -> teal "Request a speaker" CTA -> newsletter -> green "Support GBPI". The CTA and newsletter were both mid teal and read as one tall slab. Dropping the newsletter to ink was not enough: teal (#0b7561) against ink (#004b4b) is only 1.77:1, so two dark teals still merge. Measured separation for the CTA|newsletter boundary: teal -> ink 1.77:1 (what it was — indistinguishable) teal -> lime 3.52:1 (but lime -> green below is only 1.42:1) teal -> paper 5.63:1 (chosen) Paper also keeps the boundary below honest: cream against the green support band separates clearly on lightness. The newsletter's default teal is untouched everywhere it does not follow a teal CTA band, so About Us and the rest are unaffected. Colour treatment mirrors the existing --lime variant, which already solves "newsletter on a light background". ------------------------ */ .gbpi-cta-band--teal + .gbpi-newsletter, .gbpi-cta-band--teal + .wp-block-group.gbpi-newsletter { background: var(--gbpi-paper); color: var(--gbpi-ink); border-top: 1px solid var(--gbpi-line); border-bottom: 1px solid var(--gbpi-line); } .gbpi-cta-band--teal + .gbpi-newsletter h2, .gbpi-cta-band--teal + .wp-block-group.gbpi-newsletter h2 { color: var(--gbpi-ink); } .gbpi-cta-band--teal + .gbpi-newsletter p, .gbpi-cta-band--teal + .wp-block-group.gbpi-newsletter p { color: var(--gbpi-ink); } /* Inputs are white-on-teal by default; on cream they need a visible edge. */ .gbpi-cta-band--teal + .gbpi-newsletter .form-control, .gbpi-cta-band--teal + .wp-block-group.gbpi-newsletter .form-control { border: 1px solid var(--gbpi-line); } .gbpi-cta-band--teal + .gbpi-newsletter .btn-subscribe, .gbpi-cta-band--teal + .wp-block-group.gbpi-newsletter .btn-subscribe { background: var(--gbpi-primary); color: #fff; } .gbpi-cta-band--teal + .gbpi-newsletter .btn-subscribe:hover, .gbpi-cta-band--teal + .wp-block-group.gbpi-newsletter .btn-subscribe:hover { background: var(--gbpi-ink); color: #fff; } /* ---- Home: recent publications -------------------------------------- Three-up grid rendered by gbpi_publications_inject() in place of the marker. Cards reuse .gbpi-card, so only the grid itself needs declaring. -------------------------------------- */ .gbpi-cards-3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.75rem; } @media (max-width: 991.98px) { .gbpi-cards-3 { grid-template-columns:repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .gbpi-cards-3 { grid-template-columns:1fr; } } /* Publication card featured image — sit flush with card top, keep 16:9 crop so cards line up regardless of source aspect ratio. */ .gbpi-card__imglink { display:block; overflow:hidden; } .gbpi-card__img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:0; transition:transform .3s ease; } .gbpi-card:hover .gbpi-card__img { transform:scale(1.03); } /* With a real image above, the title no longer needs the placeholder breathing gap that .gbpi-card__title carries by default. */ .gbpi-card__imglink + .gbpi-card__body .gbpi-card__title { margin-top:.35rem; } /* ---- Budget Primer page ---------------------------------------------- Rebuilt as a hub for the annual primer, the way the current gbpi.org page works: hero with the pie chart, chapter tiles linking to each chapter post, the introductory letter, a print-copy request band, then every post in the Budget Primer category. -------------------------- */ .gbpi-primer-hero { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:3rem; align-items:center; } .gbpi-primer-hero__lede { color:rgba(255,255,255,.92); font-size:1.1rem; max-width:52ch; margin:1rem 0 1.75rem; } .gbpi-primer-hero__actions { display:flex; flex-wrap:wrap; gap:.75rem; } .gbpi-primer-hero__media { margin:0; border-radius:1rem; overflow:hidden; } .gbpi-primer-hero__media img { display:block; width:100%; height:auto; } @media (max-width: 991.98px) { .gbpi-primer-hero { grid-template-columns:1fr; gap:2rem; } .gbpi-primer-hero__media { max-width:420px; } } .gbpi-primer-chapters { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:1.25rem; } .gbpi-primer-chapter { display:flex; flex-direction:column; align-items:center; gap:1rem; height:100%; padding:1.75rem 1rem 1.5rem; border-radius:.8rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#fff; text-decoration:none; text-align:center; font-family:var(--gbpi-font-heading); font-weight:700; font-size:1.05rem; transition:background .15s ease, transform .15s ease; } .gbpi-primer-chapter img { width:96px; height:96px; object-fit:contain; } .gbpi-primer-chapter:hover, .gbpi-primer-chapter:focus-visible { background:rgba(255,255,255,.12); color:var(--gbpi-lime-text); transform:translateY(-2px); } @media (max-width: 991.98px) { .gbpi-primer-chapters { grid-template-columns:repeat(3, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .gbpi-primer-chapters { grid-template-columns:repeat(2, minmax(0, 1fr)); } } .gbpi-primer-letter { max-width:72ch; margin:0 auto; } .gbpi-primer-letter h2 { margin:.25rem 0 1.5rem; } .gbpi-primer-letter p { margin:0 0 1.15rem; line-height:1.7; } .gbpi-primer-letter__lead { font-size:1.2rem; font-weight:600; line-height:1.55 !important; } .gbpi-primer-callout { margin:2rem 0; padding:1.5rem 1.75rem; border-radius:.8rem; background:var(--gbpi-ink); border-left:6px solid var(--gbpi-lime); } .gbpi-primer-callout p { margin:0 !important; color:#fff; font-family:var(--gbpi-font-heading); font-size:1.15rem; line-height:1.5 !important; } .gbpi-primer-request { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem; } /* ---- CTA consistency (GG Phase 3) ------------------------------------ Two kinds of call to action, each styled one way everywhere: - Buttons (pills, core Button blocks): never underlined. - Arrow links ("View all research →", "Read more →", "+ Full Article"): small caps, no underline at rest, underline on hover. GG found these mixed — "Load more" and "View all" underlined, "Read more" not, buttons not — so the rules sit last and win. ------------- */ .gbpi-pill, .gbpi-pill:hover, .wp-block-button__link, .wp-block-button__link:hover, a.wp-block-button__link:focus { text-decoration:none !important; } .gbpi-link-arrow, .gbpi-explore-card__foot, .gbpi-card__foot a, a.gbpi-card__foot, .gbpi-give-card a { font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; text-decoration:none; } .gbpi-link-arrow:hover, .gbpi-link-arrow:focus-visible, .gbpi-explore-card:hover .gbpi-explore-card__foot, .gbpi-card__foot a:hover, a.gbpi-card__foot:hover, .gbpi-give-card a:hover { text-decoration:underline; } /* ---- 404 ---------------------------------------------------------- */ .gbpi-404-search { display:flex; gap:.75rem; max-width:560px; margin-top:1.75rem; } .gbpi-404-search .form-control { border-radius:50rem; padding:.65rem 1.25rem; } .gbpi-404-search .gbpi-pill { border:0; cursor:pointer; } @media (min-width: 992px) { .gbpi-explore-grid--4 { grid-template-columns:repeat(4, 1fr); } } /* ---- Post Detail: updated layout preview (?layout=new) ---------------- GG's "GBPI Individual Post Page-Updated.pdf". Scoped to .gbpi-post--v2, which single.php adds only when the URL carries ?layout=new, so the current layout is untouched until the new one is approved. - Download PDF: sidebar between the TOC and Recent posts on desktop; below the article, above the share links, on mobile. - The TOC (not the whole sidebar) follows the reader down the page, with a dark left rule and the section being read in bold. - Square author photo. ------------------------------------------- */ .gbpi-post--v2 .gbpi-download-card--side { margin:0; } .gbpi-post--v2 .gbpi-download-card--inline { margin:2rem 0 0; } .gbpi-post--v2 .gbpi-post-toc { border-left:4px solid var(--gbpi-ink); } .gbpi-post--v2 .gbpi-toc-list a { color:var(--gbpi-muted); font-weight:600; } .gbpi-post--v2 .gbpi-toc-list a.is-active { color:var(--gbpi-ink); font-weight:800; } .gbpi-post--v2 .gbpi-toc-list li:has(a.is-active)::before { color:var(--gbpi-ink); font-weight:800; } .gbpi-post--v2 .gbpi-author-card__avatar { border-radius:.5rem; width:112px; height:112px; } @media (min-width: 992px) { /* The whole column follows the reader. Making only the TOC sticky let the Download and Recent posts cards scroll up underneath it (GG: "part of the column gets covered"). A column taller than the window scrolls on its own instead of being cut off. */ .gbpi-post--v2 .gbpi-post-sidebar { position:sticky; top:100px; align-self:start; max-height:calc(100vh - 120px); overflow-y:auto; scrollbar-width:thin; padding-right:2px; } .gbpi-post--v2 .gbpi-download-card--inline { display:none; } } @media (max-width: 991.98px) { .gbpi-post--v2 .gbpi-download-card--side { display:none; } } /* ---- TikTok feed (Get Involved › Connect with us) ------------------ */ .gbpi-tiktok { max-width:780px; } .gbpi-tiktok .tiktok-embed { margin:0; } .gbpi-tiktok__follow { margin:1rem 0 0; } /* ---- Issue area sub-area links (Education › K-12, Higher Ed, …) ---- */ .gbpi-subareas { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1.25rem; } .gbpi-subareas__label { color:var(--gbpi-lime-text); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-right:.25rem; } .gbpi-subareas .gbpi-pill { padding:.4rem 1rem; font-size:.85rem; } /* ---- Events: past events from the old site (until real `event` posts) -- */ .gbpi-event-legacy-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--gbpi-line); } .gbpi-event-legacy-list li { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.25rem 1.5rem; padding:1rem 0; border-bottom:1px solid var(--gbpi-line); } .gbpi-event-legacy-list a { font-family:var(--gbpi-font-heading); font-weight:700; color:var(--gbpi-ink); text-decoration:none; } .gbpi-event-legacy-list a:hover { color:var(--gbpi-primary); text-decoration:underline; } .gbpi-event-legacy-list__date { color:var(--gbpi-muted); font-size:.88rem; white-space:nowrap; } /* Press › In the news cards show the coverage date. */ .gbpi-card__date { color:var(--gbpi-muted); font-size:.8rem; margin:0 0 .35rem; } /* ---- Long-form statement pages (Equity & Inclusion, Careers) -------- */ .gbpi-prose { max-width:72ch; } .gbpi-prose p { line-height:1.7; margin:0 0 1.15rem; } .gbpi-definition-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; } .gbpi-definition { background:#fff; border-radius:.8rem; padding:1.5rem; } .gbpi-definition h3 { font-size:1.2rem; color:var(--gbpi-primary); margin:0 0 .75rem; } .gbpi-definition p { font-size:.95rem; line-height:1.6; margin:0 0 .75rem; } .gbpi-definition__source { color:var(--gbpi-muted); font-size:.82rem !important; font-style:italic; } @media (max-width: 991.98px) { .gbpi-definition-grid { grid-template-columns:1fr; } } /* ====================================================================== R5 mockups — header, current section, page colour themes, card styles ====================================================================== */ /* Header sits on the cream page colour in every mockup. */ .gbpi-navbar { background:var(--gbpi-paper); } /* Current section: underlined in the main nav. */ .gbpi-navbar .nav-link.is-current { color:var(--gbpi-primary); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:.45rem; } /* Search band — shared field styling, then the two variants. */ .gbpi-research-search .gbpi-field-label { text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; font-weight:700; color:var(--gbpi-primary); } .gbpi-research-search .form-control, .gbpi-research-search .form-select { border:1.5px solid var(--gbpi-primary); border-radius:.5rem; padding:.6rem .9rem; } .gbpi-search-filter { background:var(--gbpi-primary); color:#fff; border-radius:.5rem; padding:.6rem 1rem; font-weight:700; border:0; } .gbpi-search-filter:hover { background:var(--gbpi-ink); color:#fff; } .gbpi-search-reset { background:#fff; color:var(--gbpi-ink); border:1.5px solid var(--gbpi-primary); border-radius:.5rem; padding:.6rem; font-weight:700; } .gbpi-research-search--ink .gbpi-field-label { color:var(--gbpi-lime-text); } .gbpi-research-search--ink .form-control, .gbpi-research-search--ink .form-select { border-color:#fff; } .gbpi-research-search--ink .gbpi-search-filter { background:var(--gbpi-green); color:var(--gbpi-ink-deep); } .gbpi-research-search--ink .gbpi-search-filter:hover { background:var(--gbpi-lime); color:var(--gbpi-ink); } .gbpi-research-search--ink .gbpi-search-reset { border-color:#fff; } /* Newsletter variants used by the themes below. */ .gbpi-newsletter--sky { background:var(--gbpi-sky); } .gbpi-newsletter--sky h2, .gbpi-newsletter--sky .gbpi-newsletter__lede { color:var(--gbpi-ink); } .gbpi-newsletter--sky .btn-subscribe { background:var(--gbpi-primary); color:#fff; } .gbpi-newsletter--sky .btn-subscribe:hover { background:var(--gbpi-ink); color:#fff; } /* ---- Page colour themes (body.gbpi-theme--*, set in functions.php) ---- */ /* Pink top bar: Home, Resources, Get Involved. Issue pages keep ink. */ .gbpi-theme--home .gbpi-topbar, .gbpi-theme--resources .gbpi-topbar, .gbpi-theme--get-involved .gbpi-topbar { background:var(--gbpi-pink); } .gbpi-theme--home .gbpi-topbar .gbpi-social a, .gbpi-theme--resources .gbpi-topbar .gbpi-social a, .gbpi-theme--get-involved .gbpi-topbar .gbpi-social a { background:var(--gbpi-ink); } /* Breadcrumbs */ .gbpi-theme--resources .gbpi-breadcrumb-band { background:var(--gbpi-plum); } .gbpi-theme--issue-detail .gbpi-breadcrumb-band { background:var(--gbpi-ink); } /* Newsletter band: ink + green button on Home, plum + pink button on Resources and Get Involved (Issue Detail passes the sky variant). */ .gbpi-theme--home .gbpi-newsletter { background:var(--gbpi-ink); } .gbpi-theme--home .gbpi-newsletter .btn-subscribe { background:var(--gbpi-green); color:var(--gbpi-ink-deep); } .gbpi-theme--resources .gbpi-newsletter, .gbpi-theme--get-involved .gbpi-newsletter { background:var(--gbpi-plum); } .gbpi-theme--resources .gbpi-newsletter .btn-subscribe, .gbpi-theme--get-involved .gbpi-newsletter .btn-subscribe { background:var(--gbpi-pink); color:var(--gbpi-ink-deep); } .gbpi-theme--resources .gbpi-newsletter .btn-subscribe:hover, .gbpi-theme--get-involved .gbpi-newsletter .btn-subscribe:hover { background:#fff; color:var(--gbpi-plum); } /* Support band: pink on Resources and Get Involved. */ .gbpi-theme--resources .gbpi-support, .gbpi-theme--get-involved .gbpi-support { background:var(--gbpi-pink); } .gbpi-theme--resources .gbpi-support h2, .gbpi-theme--resources .gbpi-support p, .gbpi-theme--get-involved .gbpi-support h2, .gbpi-theme--get-involved .gbpi-support p { color:var(--gbpi-ink); } .gbpi-theme--resources .gbpi-support .wp-block-button.gbpi-btn-dark .wp-block-button__link, .gbpi-theme--get-involved .gbpi-support .wp-block-button.gbpi-btn-dark .wp-block-button__link { background:var(--gbpi-ink); color:#fff; } /* ---- Card styles ------------------------------------------------------ Resources and Issue Detail: open cards — rounded image with the type badge on it, text below, no box. Home and Issue Areas: boxed cards with a teal outline. */ .gbpi-theme--resources .gbpi-card, .gbpi-theme--issue-detail .gbpi-card { background:transparent; border:0; border-radius:0; overflow:visible; } .gbpi-theme--resources .gbpi-card:hover, .gbpi-theme--issue-detail .gbpi-card:hover { box-shadow:none; transform:none; } .gbpi-theme--resources .gbpi-card .gbpi-media img, .gbpi-theme--issue-detail .gbpi-card .gbpi-media img { border-radius:1rem; } .gbpi-theme--resources .gbpi-card__body, .gbpi-theme--issue-detail .gbpi-card__body { padding:.85rem 0 0; } .gbpi-theme--resources .gbpi-card__title, .gbpi-theme--issue-detail .gbpi-card__title { margin-top:.6rem; } .gbpi-theme--home .gbpi-card, .gbpi-theme--issue-areas .gbpi-card { border:1.5px solid var(--gbpi-primary); border-radius:1rem; } /* Resources hero is white with a teal title (R5), not the teal band. */ .gbpi-theme--resources .gbpi-hero-plain h1 { color:var(--gbpi-primary); } /* "Load more" on query loops (Resources): the next-page link as an outline pill. */ .gbpi-load-more { margin-top:2rem; } .gbpi-load-more .wp-block-query-pagination-next { display:inline-block; padding:.6rem 1.6rem; border:1.5px solid var(--gbpi-ink); border-radius:50rem; color:var(--gbpi-ink); font-weight:700; text-decoration:none; } .gbpi-load-more .wp-block-query-pagination-next:hover { background:var(--gbpi-ink); color:#fff; } /* Type badge on card images is ink with white text in the R5 mockups (Resources, Issue Detail), not the earlier green pill. */ .gbpi-post-terms--type a, .gbpi-badge.gbpi-badge--type { background:var(--gbpi-ink); color:#fff; } /* Issue-area pills and tile labels in Lexend Regular, as in the R5 mockups. Pills go to 24px so regular-weight text still counts as large text under WCAG (3:1); at the old 16.8px bold, three pill colours failed AA. */ .gbpi-issue-pill { font-family:var(--gbpi-font-heading); font-size:1.5rem; line-height:1.2; } .gbpi-issue-pill a { font-weight:400; } .gbpi-issue-tile__label { font-family:var(--gbpi-font-heading); font-weight:400; font-size:1.2rem; } /* Education (blue) pill: dark teal text, not white. White on #51a4ff is 2.59:1 and fails even as large text; ink is 3.84:1, which passes at the pills' 24px. The Issue Areas tile label carries an inline white, hence !important there. */ .gbpi-issue-pill.gbpi-blue-bg, .gbpi-issue-pill.gbpi-blue-bg a { color:var(--gbpi-ink); } .gbpi-issue-tile__label.gbpi-blue-bg { color:var(--gbpi-ink) !important; } /* Issue Areas tile labels at 24px so regular-weight text counts as large text (3:1) — the Education, Health Justice and Inclusive Economy labels fall between 3:1 and 4.5:1. Wider max so the long names wrap less. */ /* A centred absolute label only gets the right half of the tile to lay out in (left:50%), so it wrapped early; width:max-content sizes it to its own text (the
    in "Inclusive Economy / for Immigrants" still splits it), and max-width keeps it inside narrow tiles. */ .gbpi-issue-tile__label { font-size:1.5rem; line-height:1.2; width:max-content; max-width:90%; padding:.6rem 1.4rem; } /* Donate on phones: the donation form comes first, then the intro, ways to give and trust details (GG: the form was pushed to the bottom). Core columns stack below 782px. */ @media (max-width: 781.98px) { .gbpi-donate-intro-col { order:2; } } /* Issue Areas dropdown: sub-areas indented under their parent. */ .dropdown-item--sub { padding-left:2rem; font-size:.9em; color:var(--gbpi-muted); } .dropdown-item--sub::before { content:"\2013\00a0"; } /* ---- Breadcrumb colour, consistent site-wide --------------------------- The R5 rule: the breadcrumb contrasts with the band below it. Most pages open on a teal hero, so the default is ink (as on Issue Detail); a page that opens on an ink band (About) gets teal; the mockup pages keep their own (teal on Get Involved and Issue Areas, plum on Resources). */ .gbpi-breadcrumb-band { background:var(--gbpi-ink); } .gbpi-breadcrumb-band:has(+ .gbpi-ink-bg), .wp-block-group.gbpi-breadcrumb-band:has(+ .wp-block-group.gbpi-ink-bg) { background:var(--gbpi-primary); } .gbpi-theme--get-involved .gbpi-breadcrumb-band, .gbpi-theme--issue-areas .gbpi-breadcrumb-band { background:var(--gbpi-primary); } /* 404 search: same size and button as the site's other search bands. */ .gbpi-404-search { align-items:stretch; } .gbpi-404-search .form-control { border-radius:.5rem; padding:.6rem 1rem; border:1.5px solid #fff; height:auto; } .gbpi-404-search .gbpi-pill { border-radius:.5rem; padding:.6rem 1.4rem; background:var(--gbpi-green); color:var(--gbpi-ink-deep); flex:0 0 auto; white-space:nowrap; justify-content:center; } .gbpi-404-search .gbpi-pill:hover { background:var(--gbpi-lime); color:var(--gbpi-ink); } /* ====================================================================== GG design review (Lola, Oct 2026) — general comments Sits last so it wins over the per-component rules above. ====================================================================== */ :root { /* One vertical rhythm for every band: same air at the top and bottom of each section, site-wide. 72px on desktop, easing down on phones. */ --gbpi-section-y: clamp(3rem, 5vw, 4.5rem); --gbpi-section-y-tight: clamp(2.25rem, 3.5vw, 3rem); /* The main layout box: 1120px container less its 12px gutters. Band content, header, footer and the Support band all sit inside it. */ --gbpi-inset: max(12px, calc((100vw - 1120px) / 2 + 12px)); } /* ---- Layout: air between sections ---------------------------------- */ .gbpi-band, .gbpi-section, .gbpi-hero, .gbpi-newsletter, .gbpi-support, .gbpi-cta-band, .gbpi-cta-band.gbpi-cta-band--teal, .gbpi-cta-band--teal, .gbpi-partners, .gbpi-profile-hero, .gbpi-profile-bio { padding-top:var(--gbpi-section-y); padding-bottom:var(--gbpi-section-y); } .gbpi-band--tight, .gbpi-section--tight { padding-top:var(--gbpi-section-y-tight); padding-bottom:var(--gbpi-section-y-tight); } /* Bootscore puts .mb-3 (!important) on every Buttons block and paragraphs keep their bottom margin, so a band ending in a button row or a link had 16px more air below than above. */ :is(.gbpi-band, .gbpi-hero, .gbpi-support, .gbpi-newsletter, .gbpi-cta-band, .gbpi-section) .wp-block-buttons:last-child { margin-bottom:0 !important; } :is(.gbpi-band, .gbpi-hero, .gbpi-support, .gbpi-newsletter, .gbpi-cta-band, .gbpi-section) > p:last-child, :is(.gbpi-band, .gbpi-hero, .gbpi-support, .gbpi-newsletter, .gbpi-cta-band, .gbpi-section) > :last-child > p:last-child { margin-bottom:0; } /* Card tags: the pills used to get their spacing from paragraph margins, which made a row of two stretch unevenly. */ .gbpi-card__tags > p { margin:0; } .gbpi-card__tags { margin-bottom:1.35rem; } /* Air under each pill so tags that wrap onto a second line don't touch. The second selector covers Query Loop cards, whose pills are post-terms links. */ .gbpi-card__tags > .gbpi-badge, .gbpi-card .gbpi-post-terms:not(.gbpi-post-terms--type) a { margin-bottom:5px; } /* ---- Layout: alignment --------------------------------------------- The Support, Partners and block-built CTA bands wrap their content in a 1120px constrained group, 12px wider on each side than every other band's content, so "Donate Today" stuck out past the column. They now take the same inset as .gbpi-band. */ :is(.gbpi-support, .gbpi-partners, .wp-block-group.gbpi-cta-band) { padding-left:var(--gbpi-inset); padding-right:var(--gbpi-inset); } :is(.gbpi-support, .gbpi-partners, .wp-block-group.gbpi-cta-band) > .wp-block-group { padding-left:0 !important; padding-right:0 !important; } :is(.gbpi-support, .gbpi-partners, .wp-block-group.gbpi-cta-band) > .wp-block-group > * { max-width:none !important; } .gbpi-partners > .wp-block-group > .gbpi-partners__lead, .gbpi-partners .gbpi-partners__lead { max-width:640px !important; margin-left:auto !important; margin-right:auto !important; } /* Templates that put a Bootstrap .container inside a band (About, Staff, Contact, …) got the 12px gutter twice — the band's inset plus the container's own — so their content sat 12px inside Home's. The band inset is the gutter; the container inside it adds none. */ :is(.gbpi-band, .gbpi-breadcrumb-band) > :is(.container, .gbpi-container), :is(.gbpi-band, .gbpi-breadcrumb-band) > .wp-block-group > :is(.container, .gbpi-container) { max-width:none; margin-left:0; margin-right:0; padding-left:0; padding-right:0; } /* ---- Headers: more air in the top bar and the menu bar -------------- */ .gbpi-topbar__inner { height:50px; } .gbpi-topbar .gbpi-social a { width:32px; height:32px; font-size:.9rem; } .gbpi-navbar .navbar { padding-top:1.25rem; padding-bottom:1.25rem; } @media (max-width: 767.98px) { .gbpi-topbar__inner { height:44px; } } /* The full menu needs ~850px; below the lg breakpoint it collapses to the hamburger (at 768-991px "Donate" was wrapping onto two lines). */ @media (max-width: 991.98px) { .gbpi-navbar .navbar { padding-top:.75rem; padding-bottom:.75rem; } } .gbpi-navbar .gbpi-pill { white-space:nowrap; flex-shrink:0; } /* ---- Footer: Green Gate layout -------------------------------------- Same layout box as the bands above it, more air, a short brand line, white links and white social tiles, and a lime rule above the legal line. */ .gbpi-footer { padding:var(--gbpi-section-y) 0 2rem; color:#fff; } .gbpi-footer a { color:#fff; } .gbpi-footer a:hover { color:var(--gbpi-lime-text); } .gbpi-footer .col-lg-4 > p { max-width:30ch; font-size:.92rem; line-height:1.5; } .gbpi-footer .footer-links li { margin-bottom:.5rem; } .gbpi-footer .gbpi-social a { background:#fff; color:var(--gbpi-ink); } .gbpi-footer .gbpi-social a:hover { background:var(--gbpi-lime); color:var(--gbpi-ink); } .gbpi-footer-info { margin-top:3rem; padding-top:1.5rem; font-size:.85rem; color:#fff; border-top-color:color-mix(in srgb, var(--gbpi-lime) 55%, transparent); } /* ---- Boxes: outline buttons 1pt thicker ----------------------------- */ .wp-block-button.gbpi-btn-outline > .wp-block-button__link, .gbpi-pill--outline { border-width:2px; padding-top:calc(.6rem - 1px); padding-bottom:calc(.6rem - 1px); } .gbpi-load-more .wp-block-query-pagination-next { border-width:2.5px; } /* ---- Typography: small captions 1-2pt bigger ------------------------ */ .gbpi-eyebrow, .gbpi-hero p.gbpi-hero__eyebrow, .gbpi-featured-card__eyebrow, .gbpi-featured-card__body p.gbpi-featured-card__eyebrow, .gbpi-donate-card__eyebrow, .gbpi-profile-hero__eyebrow, .gbpi-subareas__label, .gbpi-footer h5, .gbpi-footer .h5 { font-size:.85rem; } .gbpi-badge, .gbpi-post-terms a, .gbpi-post-tags .gbpi-badge { font-size:.78rem; } .gbpi-badge--type, .gbpi-post-terms--type a { font-size:.88rem; } .gbpi-field-label, .gbpi-share__label, .gbpi-board-person__title, .gbpi-campaign-card__caption, .gbpi-form-conditional__eyebrow, .gbpi-datechip .m, .gbpi-event-chip__mo { font-size:.8rem; } .gbpi-research-search .gbpi-field-label { font-size:.85rem; } .gbpi-explore-card__foot, .gbpi-card__foot a, a.gbpi-card__foot, .gbpi-person__cta, .gbpi-link-arrow { font-size:.88rem; } /* ---- Box & typography: Home "Where we focus" pills ------------------ Shorter pills with tighter gaps, closer to the Green Gate grid, and the area names a step bigger. */ .gbpi-issue-pill { min-height:76px; padding:.75rem 1.5rem; font-size:1.65rem; line-height:1.1; } .wp-block-columns:has(> .wp-block-column > .gbpi-issue-pill) { gap:1.25rem; } .wp-block-columns:has(> .wp-block-column > .gbpi-issue-pill) + .wp-block-columns:has(> .wp-block-column > .gbpi-issue-pill) { margin-top:1.25rem; } /* ---- Colour --------------------------------------------------------- Small captions on light colour bands read in the darkest green, not the muted teal ("Join the work" on lime). Education badges take ink text, same as the Education pill, since white on blue fails contrast. */ :is(.gbpi-lime-bg, .gbpi-green-bg, .gbpi-sky-bg, .gbpi-pink-bg, .gbpi-newsletter--lime, .gbpi-newsletter--sky) .gbpi-eyebrow { color:var(--gbpi-ink); } .gbpi-badge--blue { color:var(--gbpi-ink-deep); } /* ====================================================================== GG design review (Lola, Oct 2026) — section comments ====================================================================== */ /* ---- Closing-band colour sets (body.gbpi-close--*, functions.php) ----- Each section closes with one of the newsletter / Support pairings from Green Gate's Final designs, so neighbouring bands never share a colour. These replace the R5 per-page colours (plum newsletter, pink Support) and the green Support band the page content carries. Selectors are body-class + band so they beat both the theme rules and the .gbpi-support--* / .gbpi-newsletter--* modifiers above. */ /* Newsletter: teal (Home, Issue Areas, Resources, Primer) */ :is(.gbpi-close--home, .gbpi-close--resources) .gbpi-newsletter { background:var(--gbpi-primary); color:#fff; border:0; } :is(.gbpi-close--home, .gbpi-close--resources) .gbpi-newsletter h2 { color:#fff; } :is(.gbpi-close--home, .gbpi-close--resources) .gbpi-newsletter .gbpi-newsletter__lede { color:rgba(255,255,255,.9); } .gbpi-close--home .gbpi-newsletter .btn-subscribe { background:var(--gbpi-green); color:var(--gbpi-ink-deep); } .gbpi-close--home .gbpi-newsletter .btn-subscribe:hover { background:var(--gbpi-lime); color:var(--gbpi-ink); } .gbpi-close--resources .gbpi-newsletter .btn-subscribe { background:var(--gbpi-lime); color:var(--gbpi-ink); } .gbpi-close--resources .gbpi-newsletter .btn-subscribe:hover { background:#fff; color:var(--gbpi-ink); } /* Newsletter: ink with the green button (Get Involved section, Press) */ .gbpi-close--involved .gbpi-newsletter { background:var(--gbpi-ink); color:#fff; border:0; } .gbpi-close--involved .gbpi-newsletter h2 { color:#fff; } .gbpi-close--involved .gbpi-newsletter .gbpi-newsletter__lede { color:rgba(255,255,255,.9); } .gbpi-close--involved .gbpi-newsletter .form-control { border-color:#fff; } .gbpi-close--involved .gbpi-newsletter .btn-subscribe { background:var(--gbpi-green); color:var(--gbpi-ink-deep); } .gbpi-close--involved .gbpi-newsletter .btn-subscribe:hover { background:var(--gbpi-lime); color:var(--gbpi-ink); } /* Newsletter: lime with teal heading and button (Issue Detail, research types, About section). The old --lime rules lost to the later .gbpi-newsletter h2 / .btn-subscribe rules, so the heading rendered white and the button green on lime. */ :is(.gbpi-close--detail, .gbpi-close--about) .gbpi-newsletter, .gbpi-newsletter.gbpi-newsletter--lime { background:var(--gbpi-lime); color:var(--gbpi-ink); border:0; } :is(.gbpi-close--detail, .gbpi-close--about) .gbpi-newsletter h2, .gbpi-newsletter.gbpi-newsletter--lime h2 { color:var(--gbpi-primary); } :is(.gbpi-close--detail, .gbpi-close--about) .gbpi-newsletter .gbpi-newsletter__lede, .gbpi-newsletter.gbpi-newsletter--lime .gbpi-newsletter__lede { color:var(--gbpi-ink); } :is(.gbpi-close--detail, .gbpi-close--about) .gbpi-newsletter .btn-subscribe, .gbpi-newsletter.gbpi-newsletter--lime .btn-subscribe { background:var(--gbpi-primary); color:#fff; } :is(.gbpi-close--detail, .gbpi-close--about) .gbpi-newsletter .btn-subscribe:hover, .gbpi-newsletter.gbpi-newsletter--lime .btn-subscribe:hover { background:var(--gbpi-ink); color:#fff; } /* Support: cream with teal heading (everywhere except the About section) */ :is(.gbpi-close--home, .gbpi-close--resources, .gbpi-close--involved) .gbpi-support { background:var(--gbpi-paper); } :is(.gbpi-close--home, .gbpi-close--resources, .gbpi-close--involved) .gbpi-support h2 { color:var(--gbpi-primary); } :is(.gbpi-close--home, .gbpi-close--resources, .gbpi-close--involved) .gbpi-support p { color:var(--gbpi-ink); } /* Support: teal straight onto the footer (About section) */ .gbpi-close--about .gbpi-support { background:var(--gbpi-primary); } .gbpi-close--about .gbpi-support h2 { color:#fff; } .gbpi-close--about .gbpi-support p { color:rgba(255,255,255,.9); } /* Donate Today stays the ink pill on every Support background. */ :is(.gbpi-close--home, .gbpi-close--resources, .gbpi-close--involved, .gbpi-close--about) .gbpi-support .wp-block-button.gbpi-btn-dark .wp-block-button__link { background:var(--gbpi-ink); color:#fff; border-color:var(--gbpi-ink); } :is(.gbpi-close--home, .gbpi-close--resources, .gbpi-close--involved, .gbpi-close--about) .gbpi-support .wp-block-button.gbpi-btn-dark .wp-block-button__link:hover { background:#000; color:#fff; } /* ---- Top bar and breadcrumbs --------------------------------------- Green Gate's Resources and Get Involved designs use the ink top bar; only Home keeps the pink one. Resources' breadcrumb is ink, not plum. */ :is(.gbpi-theme--resources, .gbpi-theme--get-involved) .gbpi-topbar { background:var(--gbpi-ink); } :is(.gbpi-theme--resources, .gbpi-theme--get-involved) .gbpi-topbar .gbpi-social a { background:rgba(255,255,255,.14); color:#fff; } .gbpi-theme--resources .gbpi-breadcrumb-band { background:var(--gbpi-ink); } /* The current page in the trail reads in the same lime as the links (Staff and Board was a muted teal on teal — unreadable). Pages that still carry .gbpi-breadcrumb inside the band lose its paper-page padding and colour. */ .gbpi-breadcrumb-band .gbpi-breadcrumb { padding:0; margin:0; font-size:inherit; color:var(--gbpi-lime-text); } .gbpi-breadcrumb-band span:not(.sep), .gbpi-breadcrumb-band .gbpi-breadcrumb a { color:var(--gbpi-lime-text); } .gbpi-breadcrumb-band [aria-current] { font-weight:600; } /* ---- Page heroes: air between the title and the copy ---------------- */ h1.gbpi-title-bar, .gbpi-breadcrumb-band + .gbpi-band h1, .gbpi-band > :is(.container, .wp-block-group) > h1.gbpi-display { margin-bottom:1.25rem; } /* ---- Staff and Board: the Board reads as its own section ------------ */ .gbpi-board, .gbpi-staff-grid + .gbpi-board { margin-top:var(--gbpi-section-y) !important; padding-top:var(--gbpi-section-y); border-top:1px solid var(--gbpi-line); } /* ---- Issue Areas: every tile label the same size, centred on the photo */ .gbpi-issue-tile__label { top:50%; bottom:auto; left:50%; transform:translate(-50%, -50%); width:82%; max-width:none; min-height:4.6rem; display:flex; align-items:center; justify-content:center; padding:.5rem 1rem; line-height:1.1; } /* ---- Cream page heroes (Get Involved, Newsletter Signup): teal title, per Green Gate's Get Involved design ------------------------------- */ .gbpi-breadcrumb-band + .gbpi-band:is(.gbpi-paper, .gbpi-white) h1 { color:var(--gbpi-primary); } /* ---- Resources -------------------------------------------------------- "Load more" text sat low: the pagination pill's fixed 2.25rem height fought the Load-more padding. Size it from its padding instead. */ .gbpi-load-more .wp-block-query-pagination-next { display:inline-flex; align-items:center; justify-content:center; height:auto; min-height:2.75rem; line-height:1.2; padding:.6rem 1.75rem; } .gbpi-pill--ghost { border-width:2.5px; } /* The dark Resources search hides its heading, but the empty heading row kept Bootstrap's mb-4, so the band had 24px more air on top. */ .gbpi-research-search--ink > .container > .d-flex:first-child:not(:has(> :not(.visually-hidden))) { margin-bottom:0 !important; } /* Two bands of the same colour read as one section (Primer: the chapter tiles now share the hero's teal), so the seam gets one gap, not two. */ .gbpi-band.gbpi-primary-bg + .gbpi-band.gbpi-primary-bg, .gbpi-band.gbpi-ink-bg + .gbpi-band.gbpi-ink-bg, .gbpi-band.gbpi-lime-bg + .gbpi-band.gbpi-lime-bg { padding-top:0; } /* Unlinked team cards (bios hidden) don't zoom on hover — nothing to click. */ .gbpi-team-card:not(a):hover .gbpi-team-card__media img { transform:none; } /* About-section pages whose content already ends on a lime band (Equity & Inclusion, Careers) would run lime straight into the lime newsletter. There the newsletter takes Green Gate's ink set instead. */ .gbpi-close--about .gbpi-lime-bg + .gbpi-newsletter { background:var(--gbpi-ink); } .gbpi-close--about .gbpi-lime-bg + .gbpi-newsletter h2 { color:#fff; } .gbpi-close--about .gbpi-lime-bg + .gbpi-newsletter .gbpi-newsletter__lede { color:rgba(255,255,255,.9); } .gbpi-close--about .gbpi-lime-bg + .gbpi-newsletter .form-control { border-color:#fff; } .gbpi-close--about .gbpi-lime-bg + .gbpi-newsletter .btn-subscribe { background:var(--gbpi-green); color:var(--gbpi-ink-deep); } .gbpi-close--about .gbpi-lime-bg + .gbpi-newsletter .btn-subscribe:hover { background:var(--gbpi-lime); color:var(--gbpi-ink); } /* Share Your Story scrolled sideways on phones: grid items default to min-width:auto, so the form column sized itself to its widest content (390px on a 351px screen). Let the columns shrink to the container. */ .gbpi-form-shell > * { min-width:0; } @media (max-width: 991.98px) { .gbpi-form-shell { grid-template-columns:minmax(0, 1fr); } } /* Touch targets: standalone text links reach the 24px WCAG 2.2 minimum. */ .gbpi-footer-info a, .gbpi-link-arrow, .gbpi-related-heading-row a { display:inline-block; min-height:24px; line-height:24px; } /* ====================================================================== KB round 3 (Oct 2026) ====================================================================== */ /* Pink top bar on the About and Get Involved sections (Home keeps it too). Outranks the ink override in "Top bar and breadcrumbs". */ .gbpi-topbar.gbpi-topbar--accent { background:var(--gbpi-pink); } .gbpi-topbar.gbpi-topbar--accent .gbpi-social a { background:var(--gbpi-ink); color:#fff; } /* Publication date on cards. */ .gbpi-card__date { margin:0 0 .6rem; font-size:.85rem; line-height:1.4; color:var(--gbpi-muted); } /* Campaign logo slot: always rendered so card titles line up across the row. */ .gbpi-campaign-card__logo { display:flex; align-items:center; justify-content:flex-start; min-height:4.25rem; margin-bottom:.9rem; } .gbpi-campaign-card__logo img { display:block; max-height:4.25rem; max-width:70%; width:auto; height:auto; object-fit:contain; } /* ---- Automatic sections (editor only) ------------------------------ Placeholder boxes for lists and forms the theme renders (see inc/auto-sections.php). The live page swaps the box out, so this only shows in the block editor. */ .gbpi-auto { border:2px dashed var(--gbpi-primary); border-radius:.5rem; background:color-mix(in srgb, var(--gbpi-lime) 18%, #fff); padding:1.25rem 1.5rem !important; margin-block:1.5rem; } .gbpi-auto p { margin:0; color:var(--gbpi-ink); font-weight:600; } /* ====================================================================== Native-block pages (Oct 2026) Page content is rebuilt from core blocks only, so editors can change it without code. These rules give the core blocks the same look the hand-written HTML had. Per page below; shared pieces first. ====================================================================== */ /* Breadcrumb: a plain paragraph of links separated by "›". */ .gbpi-breadcrumb-band > p, .gbpi-breadcrumb-band > .wp-block-group > p { margin:0; } /* ---- Budget Primer --------------------------------------------------- */ .wp-block-columns.gbpi-primer-hero { gap:3rem; } /* Bootscore resets flow-layout margins with (0,3,0)+ selectors, so the designed spacing below needs !important to apply. */ .gbpi-primer-hero p.gbpi-primer-hero__lede { margin:1rem 0 1.75rem !important; } /* Chapter tiles: an Image block each, its caption the link. The link is stretched over the whole tile so the tile stays one click target. */ .gbpi-primer-chapters > .gbpi-primer-chapter { margin:0 !important; position:relative; justify-content:flex-start; } .wp-block-image.gbpi-primer-chapter img { width:96px; height:96px; object-fit:contain; } .gbpi-primer-chapter figcaption { margin:0; font-size:inherit; color:inherit; text-align:center; } .gbpi-primer-chapter figcaption a { color:#fff; text-decoration:none; } .gbpi-primer-chapter figcaption a::after { content:""; position:absolute; inset:0; border-radius:inherit; } .gbpi-primer-chapter:hover, .gbpi-primer-chapter:focus-within { background:rgba(255,255,255,.12); transform:translateY(-2px); } .gbpi-primer-chapter:hover figcaption a, .gbpi-primer-chapter:focus-within figcaption a { color:var(--gbpi-lime-text); } .gbpi-primer-chapter:focus-within { outline:3px solid var(--gbpi-lime); outline-offset:2px; } .gbpi-primer-chapter figcaption a:focus-visible { outline:none; } .gbpi-band .gbpi-primer-letter { max-width:72ch; } .gbpi-primer-letter > h2 { margin:.25rem 0 1.5rem !important; } .gbpi-primer-letter > p { margin:0 0 1.15rem !important; } .wp-block-quote.gbpi-primer-callout { margin:2rem 0 !important; padding:1.5rem 1.75rem; border-radius:.8rem; background:var(--gbpi-ink); border-left:6px solid var(--gbpi-lime); } .gbpi-primer-request h2 { margin:0 0 .4rem; } .gbpi-primer-request p { margin:0; max-width:60ch; } .gbpi-primer-request p a { color:inherit; text-decoration:underline; } /* ---- Home -------------------------------------------------------------- */ /* Budget Primer and "Let your voice be heard" graphics: Image blocks showing the theme's SVGs (editors can Replace them). */ .wp-block-image.gbpi-figure { margin:0; } .wp-block-image.gbpi-figure img { display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:.5rem; } /* Recent publications: a Query Loop with the Home card design. */ .gbpi-home-publications .wp-block-post-template { gap:1.75rem; } .gbpi-home-publications .gbpi-card__img { margin:0; overflow:hidden; } .gbpi-home-publications .gbpi-card__img img { aspect-ratio:16/9; object-fit:cover; transition:transform .3s ease; } .gbpi-home-publications .gbpi-card:hover .gbpi-card__img img { transform:scale(1.03); } .gbpi-home-publications .gbpi-card__tags { gap:.4rem; } .gbpi-home-publications .gbpi-card__tags .gbpi-post-terms { margin:0; } .gbpi-home-publications .gbpi-card__title { margin-top:.35rem !important; } .gbpi-home-publications .wp-block-post-excerpt, .gbpi-home-publications .gbpi-card__foot { margin-bottom:1rem !important; } @media (max-width: 991.98px) { .gbpi-home-publications .wp-block-post-template { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 575.98px) { .gbpi-home-publications .wp-block-post-template { grid-template-columns:1fr !important; } } /* Equal-height cards with "+ Full article" pinned to the bottom, as before. */ .gbpi-home-publications .wp-block-post-template > li { display:flex; } .gbpi-home-publications .gbpi-card { width:100%; } .gbpi-home-publications .gbpi-card__body { display:flex; flex-direction:column; flex:1; } .gbpi-home-publications .gbpi-card__foot { margin-top:auto !important; } /* ---- Issue Areas: tiles (automatic section, from the issue areas) ------- */ .gbpi-issue-tiles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; } @media (max-width: 781.98px) { .gbpi-issue-tiles { grid-template-columns:1fr; } } /* ---- Shared helpers for native pages ---------------------------------- */ /* Comfortable reading widths for intro paragraphs (Additional CSS class), kept from the hand-written pages' inline max-widths. */ .gbpi-measure-60 { max-width:60ch; } .gbpi-measure-62 { max-width:62ch; } .gbpi-measure-65 { max-width:65ch; } .gbpi-measure-66 { max-width:66ch; } .gbpi-measure-70 { max-width:70ch; } .is-layout-constrained > [class*="gbpi-measure-"] { margin-left:0 !important; } /* Stretched link: the first link in a card covers the whole card, so the card stays one click target while its text stays editable. */ :is(.gbpi-explore-card) { position:relative; } :is(.gbpi-explore-card) :is(h2, h3) a { color:inherit; text-decoration:none; } :is(.gbpi-explore-card) :is(h2, h3) a::after { content:""; position:absolute; inset:0; border-radius:inherit; } :is(.gbpi-explore-card):focus-within { outline:3px solid var(--gbpi-primary); outline-offset:2px; } :is(.gbpi-explore-card) :is(h2, h3) a:focus-visible { outline:none; } /* ---- About Us --------------------------------------------------------- */ .gbpi-stats-row { margin:.5rem 0 1.25rem !important; } .gbpi-stat p.gbpi-stat__num { margin:0 0 .6rem !important; } .gbpi-stat p.gbpi-stat__label { margin:0 !important; } .gbpi-explore-grid { margin-top:1.5rem !important; } .wp-block-image.gbpi-explore-card__icon { width:34px; height:34px; margin:0 0 1rem !important; } .wp-block-image.gbpi-explore-card__icon img { display:block; width:34px; height:34px; } .gbpi-explore-card h3.gbpi-explore-card__title { margin:0 0 .5rem !important; } .gbpi-explore-card p.gbpi-explore-card__body { margin:0 0 1rem !important; } .gbpi-explore-card p.gbpi-explore-card__foot { margin:auto 0 0 !important; } .gbpi-team-grid { margin-top:1.75rem !important; } .gbpi-team-header:has(+ .gbpi-team-grid) { margin-bottom:0 !important; } /* Staff and Board: header, then the staff list a line below it. */ .gbpi-team-header + .gbpi-staff-grid { margin-top:1rem !important; } .wp-block-image.gbpi-team-card__media img { aspect-ratio:1/1; object-fit:cover; height:auto; } .gbpi-team-card__body > p.gbpi-team-card__name { margin:0 0 .15rem !important; } .gbpi-team-card__body > p.gbpi-team-card__role { margin:0 !important; } /* ====================================================================== Lola's final design notes (Green Gate, 13 Oct 2026) ====================================================================== */ /* Dark green buttons stay dark green when hovered, focused or pressed; some went black. The underline-free pill shape is the only cue. */ .gbpi-pill--dark:is(:hover, :focus-visible, :active), .wp-block-button.gbpi-btn-dark > .wp-block-button__link:is(:hover, :focus-visible, :active), .gbpi-support .wp-block-button.gbpi-btn-dark .wp-block-button__link:is(:hover, :focus-visible, :active), .gbpi-donate-submit:is(:hover, :active), .gbpi-profile-hero__contact a:hover, .gbpi-post-search .btn-new-search:hover { background:var(--gbpi-ink) !important; border-color:var(--gbpi-ink) !important; color:#fff !important; } /* Main menu: hover, focus and open states stay in the brand greens instead of turning black. The current section keeps its underline. */ .gbpi-navbar .nav-link:is(:hover, :focus, :focus-visible, .show) { color:var(--gbpi-primary); } .gbpi-navbar .dropdown-item:is(:hover, :focus) { color:var(--gbpi-primary); background:color-mix(in srgb, var(--gbpi-lime) 22%, #fff); } .gbpi-navbar .dropdown-item:active { color:#fff; background:var(--gbpi-primary); } /* Air between a heading and the text under it, site-wide (e.g. Support GBPI, Donate). Margins collapse in normal flow, so headings that already carry a larger bottom margin keep it. Component parts (BEM classes like __arrow) keep their own spacing. */ .wp-block-heading + p:not([class*="__"]), .gbpi-support h2 + p { margin-top:.75rem !important; } /* Issue-area pills (Home, Resources) and Issue Areas tile labels in Inter Regular, not Lexend. Size unchanged, so they still count as large text for contrast. */ .gbpi-issue-pill, .gbpi-issue-pill a, .gbpi-issue-tile__label { font-family:var(--gbpi-font-body) !important; font-weight:400 !important; } /* Budget Primer chapter tiles: white tiles with dark green text, so they stand apart from the green band. */ .gbpi-primer-chapter { background:#fff !important; border-color:#fff !important; } .gbpi-primer-chapter figcaption a { color:var(--gbpi-ink) !important; } .gbpi-primer-chapter:is(:hover, :focus-within) { background:color-mix(in srgb, var(--gbpi-lime) 30%, #fff) !important; } .gbpi-primer-chapter:is(:hover, :focus-within) figcaption a { color:var(--gbpi-primary) !important; } .gbpi-primer-chapter:focus-within { outline-color:var(--gbpi-lime); } /* ---- Give cards (Donate, Budget 101) as native blocks ------------------- Icon and link are now paragraphs; keep the card's original rhythm over Bootscore's flow-layout margins. */ .gbpi-give-card > * { margin:0 !important; } .gbpi-give-card > :is(h3, h4) { margin:.35rem 0 .15rem !important; } .gbpi-give-card > p:not(.gbpi-give-card__icon):not(:last-child) { margin:0 0 .5rem !important; } .gbpi-give-card > p:last-child:has(> a:only-child) { margin-top:auto !important; } .gbpi-give-card > p:last-child > a:only-child { color:var(--gbpi-primary); font-weight:700; font-size:.85rem; text-decoration:none; } .gbpi-give-card > p:last-child > a:only-child:hover { text-decoration:underline; } .gbpi-give-card > p.gbpi-give-card__icon { display:inline-flex; color:#fff; } .gbpi-sidebar-card, .gbpi-give-card:not(.gbpi-donate-aside *) { height:100%; } .wp-block-details.gbpi-faq { background:#fff; border:1px solid var(--gbpi-line); border-radius:.6rem; padding:1rem 1.25rem; } .wp-block-details.gbpi-faq summary { font-weight:700; color:var(--gbpi-ink); cursor:pointer; } .wp-block-details.gbpi-faq > p { margin:.75rem 0 0 !important; color:var(--gbpi-ink); } /* ---- Get Involved action cards as native blocks ----------------------- */ .gbpi-action-card > *, .gbpi-action-card__icon > .wp-block-image, .gbpi-action-card__body > * { margin:0 !important; } /* Prose blocks (Equity & Inclusion, Careers, Privacy): keep the reading rhythm over Bootscore's flow-layout margins. */ .gbpi-prose > p { margin:0 0 1.15rem !important; } .gbpi-prose > :is(h2, h3) { margin-top:2rem !important; } .gbpi-prose > :is(ol, ul) { margin:0 0 1.15rem !important; padding-left:1.5rem; } .gbpi-prose > :is(ol, ul) > li { margin-bottom:.6rem; } .gbpi-prose > :is(h2, h3):first-child { margin-top:0 !important; } /* Primary (mid-teal) pill button, e.g. Resources' featured Budget Primer. */ .wp-block-button.gbpi-btn-primary > .wp-block-button__link { background:var(--gbpi-primary); color:#fff; border-radius:50rem; padding:.6rem 1.4rem; font-weight:700; font-size:.92rem; border:1px solid transparent; } .wp-block-button.gbpi-btn-primary > .wp-block-button__link:is(:hover, :focus-visible, :active) { background:var(--gbpi-primary); color:#fff; } /* ===================================================================== ADA / WCAG 2.1 AA contrast (Oct 2026) Lime text on teal surfaces reads in a lime tint; ink surfaces keep the brand lime. Content colour classes follow the same rule. ===================================================================== */ .gbpi-primary-bg, .has-gbpi-primary-background-color, .gbpi-hero, .gbpi-featured-card__eyebrow, .gbpi-badge--type, .gbpi-cta-band--teal, /* Breadcrumb bands are ink by default (lime passes there) and teal on these pages; see "Breadcrumb colour, consistent site-wide" above. */ .gbpi-breadcrumb-band:has(+ .gbpi-ink-bg), .wp-block-group.gbpi-breadcrumb-band:has(+ .wp-block-group.gbpi-ink-bg), .gbpi-theme--get-involved .gbpi-breadcrumb-band, .gbpi-theme--issue-areas .gbpi-breadcrumb-band { --gbpi-lime-text: var(--gbpi-lime-on-teal); } .gbpi-ink-bg, .has-gbpi-ink-background-color, .gbpi-black-bg, .gbpi-footer { --gbpi-lime-text: var(--gbpi-lime); } body .has-gbpi-lime-color { color: var(--gbpi-lime-text) !important; } /* ===================================================================== Round 1 (GBPI Ziflow review, 20 Oct 2026) ===================================================================== */ /* Tag pills sit in a flex row with a gap; the ", " core prints between terms showed up as stray commas between the pills. */ .gbpi-post-terms .wp-block-post-terms__separator { display:none; } /* Education (blue) labels: deeper ink, 4.73:1 instead of ink's 3.84:1, so they pass at any size, not just as large text. */ .gbpi-issue-pill.gbpi-blue-bg, .gbpi-issue-pill.gbpi-blue-bg a { color:var(--gbpi-ink-deep); } .gbpi-issue-tile__label.gbpi-blue-bg { color:var(--gbpi-ink-deep) !important; } /* Archive pagination (author pages and other Bootscore archives) uses Bootstrap's .pagination, which defaulted to Bootstrap blue. Same pills as the Query Loop pagination above. */ .pagination { --bs-pagination-color: var(--gbpi-ink); --bs-pagination-bg: var(--gbpi-white); --bs-pagination-border-color: var(--gbpi-line); --bs-pagination-hover-color: var(--gbpi-primary); --bs-pagination-hover-bg: var(--gbpi-paper); --bs-pagination-hover-border-color: var(--gbpi-primary); --bs-pagination-focus-color: var(--gbpi-ink); --bs-pagination-focus-bg: var(--gbpi-paper); --bs-pagination-focus-box-shadow: 0 0 0 3px var(--gbpi-lime); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--gbpi-ink); --bs-pagination-active-border-color: var(--gbpi-ink); --bs-pagination-disabled-color: var(--gbpi-muted); } /* In-page anchors (e.g. Get Involved's Newsletter Signup card) landed with the target heading under the sticky header. */ [id] { scroll-margin-top:110px; } /* "If you need help now" on Share Your Story: GBPI's plum, so it stands out (white 6.8:1 on plum). */ .gbpi-form-side .gbpi-sidebar-card--alert { background:var(--gbpi-plum); border-color:var(--gbpi-plum); } .gbpi-form-side .gbpi-sidebar-card--alert p, .gbpi-form-side .gbpi-sidebar-card--alert .gbpi-eyebrow, .gbpi-form-side .gbpi-sidebar-card--alert a { color:#fff; } .gbpi-form-side .gbpi-sidebar-card--alert a { text-decoration:underline; } /* Card images link to the post on every listing (PHP-built cards). */ .gbpi-media__link { display:block; } /* Careers: space between an opening's card and the note below it. */ .gbpi-prose > .gbpi-sidebar-card { margin-bottom:1.15rem; } /* ===================================================================== Round 2 (Green Gate Ziflow review, 26 Oct 2026) ===================================================================== */ /* Labels on teal read white: the lime tint was too close to white to register as a colour (#1 Home hero, #3 Start Here). Ink bands keep lime. */ .gbpi-hero p.gbpi-hero__eyebrow, .gbpi-primary-bg .gbpi-eyebrow { color:#fff; } /* Breadcrumbs read white on every band, for the most contrast (#8). */ .gbpi-breadcrumb-band, .gbpi-breadcrumb-band a, .gbpi-breadcrumb-band span:not(.sep), .gbpi-breadcrumb-band .gbpi-breadcrumb, .gbpi-breadcrumb-band .gbpi-breadcrumb a { color:#fff; } /* Issue Areas closes on a lime Support band instead of cream (#9). */ .gbpi-theme--issue-areas .gbpi-support { background:var(--gbpi-lime); } .gbpi-theme--issue-areas .gbpi-support h2, .gbpi-theme--issue-areas .gbpi-support p { color:var(--gbpi-ink); } /* Home "Where we focus": more air under the "View all" link (#2). */ .home .gbpi-band.gbpi-ink-bg:has(.gbpi-issue-pill) { padding-bottom:calc(var(--gbpi-section-y) + 1.5rem); } /* ===================================================================== Green Gate icon set (29 Oct 2026) ===================================================================== */ /* About "More about GBPI": the new icons aren't square, so size them by height and let the width follow. */ .wp-block-image.gbpi-explore-card__icon { width:auto; height:36px; } .wp-block-image.gbpi-explore-card__icon img { width:auto; height:36px; } /* Get Involved: each icon now carries its own dark green 4:3 panel, so it fills the card top instead of sitting inset on cream. */ .gbpi-action-card__icon:has(img[src$=".svg"]) { background:var(--gbpi-ink); } .gbpi-action-card__icon:has(img[src$=".svg"]) > .wp-block-image { inset:0; } .gbpi-action-card__icon img[src$=".svg"] { object-fit:cover; } /* Budget Primer chapters: the plum icon panel is the top of the tile and the white caption sits below it. */ .gbpi-primer-chapters > .gbpi-primer-chapter { padding:0; gap:0; overflow:hidden; border-radius:0 0 .8rem .8rem; } .wp-block-image.gbpi-primer-chapter img { display:block; width:100%; height:auto; aspect-ratio:996 / 746; object-fit:cover; } .gbpi-primer-chapter figcaption { padding:1rem .75rem 1.25rem; }