/* Theme Name: MSN Globalisation Theme URI: https://msn-globalisation.org.my Author: Trendsta Technology Author URI: https://trendstatech.com Description: Custom block theme for Monitoring Sustainability of Globalisation (MSN). Built on Twenty Twenty-Five. Version: 1.0.0 Requires at least: 6.5 Tested up to: 6.7 Requires PHP: 8.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: msn-theme Tags: block-theme, full-site-editing, ngo, news, advocacy */ /* ============================================================================= * TABLE OF CONTENTS * ============================================================================= * * To jump to a section in your editor, search for the heading line including * the leading marker — e.g. "1.1 Header navigation". Sections are grouped by * the part of the site they affect, then ordered roughly head → toe. * * 1. HEADER * 1.1 Header navigation (item alignment, nowrap labels) * 1.2 Header nav hover (pill background highlight) * 1.3 Active page indicator (green dot + colour shift) * 1.4 Focus Areas dropdown panel (soft floating card, desktop) * * 2. SEARCH * 2.1 Slide-down search drawer (toggle, panel, input, close) * * 3. FOOTER * 3.1 Sticky footer (pin to viewport bottom) * 3.2 Director Bio photo (force 200×200 circle) * 3.3 Footer link hover (no underline by default) * 3.4 Inline icons (location/envelope) (CSS mask-image) * 3.5 Footer "Follow" row alignment (margin-top:auto trick) * 3.6 Footer social icons (36×36 rounded squares) * * 4. ACCESSIBILITY * 4.1 Focus rings — header + footer (suppress mouse focus, keep kbd) * * 5. MOBILE (≤ 600px) * 5.1 Mobile menu — dark takeover (overlay, hamburger, submenu rail) * 5.2 Mobile responsive (stack bio, centre footer, icons) * * 6. HOME PAGE * 6.1 Hero pill (tight uppercase badge, brand-primary) * 6.2 Section heading + gold bar (3px gold accent before section H2s) * 6.3 Card visual (pub + press) (border, shadow, flex column, equal heights) * 6.4 Publication type tag (gold uppercase, letter-spaced) * 6.5 Card title (pub + press) (16px serif, hover colour shift) * 6.6 CTA pill (pub PDF + press Read More) (brand-primary outline → filled hover) * 6.7 Press meta "Outlet · Date" (flex row, CSS-injected separator) * 6.8 Campaigns row (badge | info | CTA, thin separators) * 6.9 Campaigns date badge (green pill with day/month/year split) * 6.10 Campaigns View Details link (text-link style with hover) * 6.11 Home page mobile responsive (≤600px tweaks per section) * * 7. SINGLE PUBLICATION * 7.1 Layout wrapper (780px constrained, body rhythm) * 7.2 Cover banner (full-column, 280px, soft shadow) * 7.3 Type label (uppercase letter-spaced gold) * 7.4 Title + subtitle + date (left-aligned navy/serif, calendar icon) * 7.5 Plain rule (1px grey hairline, not gold) * 7.6 Download CTA (full-width green 52px with arrow icon) * 7.7 Drop cap in post content (serif 72px navy, scoped to post body) * 7.8 Blockquote / pull-quote (gold left border + base-alt bg, italic) * 7.9 Focus row + focus pills (top divider, green pill tags) * 7.10 Single publication mobile (≤600px h1/cover/drop-cap shrink) * 7.11 Justified paragraph block style (is-style-justified, editor opt-in) * * 8. PUBLICATIONS ARCHIVE * 8.1 Archive intro (H1 + gold rule + lede paragraph) * 8.2 Publication row layout (flex: 100px cover + 1fr content) * 8.3 Row cover thumbnail (100×140 portrait, rounded, shadow) * 8.4 Row content (type label, title, 2-line desc clamp) * 8.5 Row footer (PDF link + date) (flex row, gap, alignment) * 8.6 Pagination (36px rounded buttons, green current) * 8.7 Archive mobile responsive (≤600px: cover 80×112, tighter gaps) * * 9. SINGLE EVENT (CAMPAIGN) * 9.1 Layout wrapper (780px constrained, body rhythm) * 9.2 Pill row (focus / status / type pills) * 9.3 Title + gold accent rule (left-aligned navy serif H1) * 9.4 Meta card (base-alt card: date/location/website) * 9.5 Highlight band (gold left border, italic pull-quote) * 9.6 About heading + post body (serif H2, gold rule, prose) * 9.7 Downloads (filled + outline PDF buttons) * 9.8 Single event mobile responsive (≤600px h1/meta/button shrink) * * 10. CAMPAIGN ARCHIVE * 10.1 Campaign list + row (vertical list, beige row divider) * 10.2 Row external-URL line (small muted link, reused weblink) * 10.3 Row title (serif navy H3, hover green) * 10.4 Row date + location meta (icon rows, location hides if empty) * 10.5 Row summary (muted excerpt, max-width) * 10.6 Row download buttons (compact green outline, hide if empty) * 10.7 Campaign archive mobile (≤600px tightening) * * 11. SINGLE MEDIA (NEWS) * 11.1 Layout wrapper (780px constrained, body rhythm) * 11.2 Type badge (filled green/gold rounded rect) * 11.3 Title + gold accent rule (left-aligned navy serif H1) * 11.4 Meta row (date · author/outlet · focus, CSS dots) * 11.5 MSN Release — featured image (full-column hero, soft shadow) * 11.6 Drop cap (native .has-drop-cap toggle, matches §7.7) * 11.6b Body blockquote / pull-quote (gold left border, italic serif) * 11.7 Press Clipping — excerpt box (gold left border, italic serif) * 11.8 Press Clipping — read-original CTA (full-width green, external icon) * 11.9 External-hosting disclaimer (italic muted note — clip/video/podcast) * 11.10 Single media mobile responsive (≤600px h1/hero/drop-cap shrink) * * 12. MEDIA ARCHIVE * 12.1 Page header (gold eyebrow + 48px H1 + gold rule + lede) * 12.2 Card grid (3-col grid, responsive collapse) * 12.3 Card shell (bordered card, shadow, hover lift) * 12.4 Card thumbnail + type badge (160px thumb, absolute badge) * 12.5 Card body (outlet, title, 3-line excerpt) * 12.6 Card footer (date + Read More, top border) * 12.7 Media archive responsive (3→2→1 columns, h1 shrink) * * 13. FOCUS AREA & WORK CARD PATTERNS * 13.1 Card shell (border, shadow, gold top bar) * 13.2 Card body (shared body: padding, gap, title, CTA) * 13.3 Card responsive (≤600px title shrink) * * 14. CONNECT BLOCK & DIRECTOR CARD PATTERNS * 14.1 Social icon tiles (boxed uniform-size logos) * 14.2 Connect block — mobile centred (≤600px centred layout) * * 15. 404 PAGE * 15.1 Hero + graticule motif (faint SVG grid background) * 15.2 Oversized "404" (fluid display number) * 15.3 Heading, message, links (readable widths, dotted links) * 15.4 404 page responsive (≤600px number shrink) * * 16. SEARCH PAGE * 16.1 Page header (eyebrow, H1, count, gold rule) * 16.2 Results list (vertical rows, hairline rule) * 16.3 Result row (meta line, title, clamped excerpt) * 16.4 No-results state (message, tip, section links) * * 17. FOCUS AREA HUB PAGES (Level 1 and Level 2) * 17.1 Level 1 — Focus Areas cards grid (3-col, gap, responsive) * 17.2 Level 2 — Focus Area work cards grid (3-col, gap, responsive) * 17.3 Equal-height cards (align-stretch, height:auto) * 17.4 Crosslink strip (white outline button) * * 18. FOCUS AREA PAGES (Level 3 — page-focus-area template) * 18.1 Alternating section backgrounds (nth-of-type(even) → base-alt) * 18.2 Intro section (focus pill, H1 gold rule) * 18.3 Section headings (locked H2 + gold rule ::after) * 18.4 Tweets section (content-col heading + wide 3-col grid) * 18.5 Statements section (gold left-border cards, vertical stack) * 18.6 Write-ups section (wide 2-col card grid, mobile collapse) * 18.7 Video Responses section (wide 3-col grid, 16:9 thumb, meta) * 18.8 Podcasts section (vertical stack, embed player) * * ========================================================================== */ /* ============================================================================= * 1. HEADER * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1.1 Header navigation * Keep multi-word top-level nav labels (e.g. "Focus Areas") on a single line. * The default flex layout allows the label text to wrap when space is tight; * forcing `nowrap` matches the design reference and avoids the chevron being * orphaned beneath the label. * -------------------------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation-item__content { white-space: nowrap; } /* ----------------------------------------------------------------------------- * 1.2 Header nav hover — pill background highlight * Hovered or keyboard-focused top-level nav items get a soft rounded pill in * brand-primary at 8% opacity. Padding is set on the link itself so the pill * sits flush with the label. Transition is short (150ms) to feel responsive * without drawing attention away from the page content. * -------------------------------------------------------------------------- */ header .wp-block-navigation .wp-block-navigation-item__content { padding: 8px 14px; border-radius: 999px; text-decoration: none; transition: background-color 0.15s ease-out; } header .wp-block-navigation .wp-block-navigation-item__content:hover, header .wp-block-navigation .wp-block-navigation-item__content:focus-visible { background-color: rgba(14, 127, 92, 0.08); text-decoration: none; } /* Remove the browser/WP default focus ring; the pill already conveys focus. */ header .wp-block-navigation .wp-block-navigation-item__content:focus { outline: none; box-shadow: none; } /* ----------------------------------------------------------------------------- * 1.3 Active page indicator * WordPress adds `.current-menu-item` to the
  • wrapping whichever nav link * matches the current page URL. Show a small green dot under that item plus * shift the label colour to brand-primary so the active page is unmistakable. * -------------------------------------------------------------------------- */ header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"], header .wp-block-navigation .wp-block-navigation-item__content[data-msn-active="true"], header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content, header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content, header .wp-block-navigation .current-menu-parent > .wp-block-navigation-item__content, header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content { color: var(--wp--preset--color--brand-primary); position: relative; } header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]::after, header .wp-block-navigation .wp-block-navigation-item__content[data-msn-active="true"]::after, header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after, header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content::after, header .wp-block-navigation .current-menu-parent > .wp-block-navigation-item__content::after, header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; border-radius: 50%; background-color: var(--wp--preset--color--brand-primary); transform: translateX(-50%); } /* ----------------------------------------------------------------------------- * 2.1 Slide-down search drawer * A magnifier button in the header triggers a full-width drawer that slides * down from beneath the header bar, containing a large search input. Closes * on Esc, click outside, or the explicit close button. The header element is * given position:relative so the drawer can be absolutely positioned to its * bottom edge. * -------------------------------------------------------------------------- */ header.wp-block-group { position: relative; } .msn-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background-color: var(--wp--preset--color--brand-primary); border: none; border-radius: 999px; color: #ffffff; cursor: pointer; transition: background-color 0.15s ease-out, transform 0.15s ease-out; } .msn-search-toggle:hover, .msn-search-toggle:focus-visible { background-color: var(--wp--preset--color--brand-secondary); } .msn-search-toggle:focus:not(:focus-visible) { outline: none; box-shadow: none; } .msn-search-drawer { position: absolute; top: 100%; left: 0; right: 0; background-color: #ffffff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); border-top: 1px solid rgba(0, 0, 0, 0.06); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--70); opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 100; } .msn-search-drawer[aria-hidden="false"] { opacity: 1; transform: translateY(0); } .msn-search-form { display: flex; align-items: center; gap: 12px; max-width: 1240px; margin: 0 auto; border-bottom: 2px solid rgba(0, 0, 0, 0.1); transition: border-color 0.15s ease; } .msn-search-form:focus-within { border-bottom-color: var(--wp--preset--color--brand-primary); } .msn-search-form__icon { color: rgba(0, 0, 0, 0.5); flex: 0 0 auto; } .msn-search-input { flex: 1; border: none; background-color: transparent; padding: 14px 0; font-size: 18px; color: inherit; outline: none; } .msn-search-input::placeholder { color: rgba(0, 0, 0, 0.4); } .msn-search-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background-color: transparent; border: none; border-radius: 999px; color: inherit; cursor: pointer; transition: background-color 0.15s ease-out; } .msn-search-close:hover, .msn-search-close:focus-visible { background-color: rgba(0, 0, 0, 0.05); } .msn-search-close:focus:not(:focus-visible) { outline: none; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------------- * 4.1 Focus rings — site-wide * Suppress the default theme.json focus outline (the "gold border" from * brand-accent) on every interactive element across the site for MOUSE clicks. * Keyboard users still get a visible focus indicator via :focus-visible, * styled separately to use the brand-primary green. Accessibility-critical: * NEVER remove :focus-visible entirely (gotcha #5 in wp-block-theme-gotchas.md). * * Scoped to header / main / footer / search-drawer so we don't accidentally * suppress focus rings inside WP-admin embedded contexts (e.g. block editor * iframe), but covers all front-end interactive elements. * -------------------------------------------------------------------------- */ header *:focus:not(:focus-visible), main *:focus:not(:focus-visible), footer.wp-block-group *:focus:not(:focus-visible), .msn-search-drawer *:focus:not(:focus-visible) { outline: none; box-shadow: none; } header *:focus-visible, main *:focus-visible, footer.wp-block-group *:focus-visible, .msn-search-drawer *:focus-visible { outline: 2px solid var(--wp--preset--color--brand-primary); outline-offset: 2px; } /* The search input has its own underline focus indicator — no outline ring. */ .msn-search-input:focus-visible { outline: none; } /* ----------------------------------------------------------------------------- * 1.4 Focus Areas dropdown panel * Soft floating card: rounded corners, no border, gentle shadow. Replaces the * default square-bordered submenu chrome that WP applies. Inner items reuse * the same brand-primary pill hover as the top-level nav for consistency. * -------------------------------------------------------------------------- */ header .wp-block-navigation__submenu-container { background-color: #ffffff; border: none; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); padding: 8px; min-width: 220px; margin-top: 6px; } /* Invisible bridge across the 6px gap so the dropdown stays open while the * mouse travels from the trigger label down to the panel. Without this, the * hover state is lost mid-transit and the panel closes. */ header .wp-block-navigation__submenu-container::before { content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px; } header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; border-radius: 6px; padding: 8px 12px; white-space: nowrap; } /* ----------------------------------------------------------------------------- * 3.1 Sticky footer * Make the footer hug the bottom of the viewport on short pages (e.g. 404, * empty archives). Uses flex layout on the body / site wrapper so the main * content area grows to fill, pushing the footer down. * -------------------------------------------------------------------------- */ body.wp-singular, body { min-height: 100vh; display: flex; flex-direction: column; } .wp-site-blocks { display: flex; flex-direction: column; flex: 1 0 auto; } .wp-site-blocks > .wp-block-template-part:last-child, .wp-site-blocks > footer:last-child { margin-top: auto; } /* ----------------------------------------------------------------------------- * 3.2 Director Bio photo * The source photo is portrait-oriented; force a square crop inside the 200x200 * circular frame using object-fit so it doesn't stretch into an oval. * -------------------------------------------------------------------------- */ .wp-image-37 { width: 200px !important; height: 200px !important; object-fit: cover; object-position: center top; border-radius: 50%; } /* The parent
    also needs its width pinned so it doesn't stretch the img. */ figure.wp-block-image:has(> .wp-image-37) { width: 200px; height: 200px; flex: 0 0 200px; } /* ----------------------------------------------------------------------------- * 5.1 Mobile menu — full-screen dark takeover (≤ 600px) * Override WordPress's default responsive nav overlay so that the hamburger * opens a full-viewport surface-dark panel with large, left-aligned items * and an inline (not floating-card) submenu for Focus Areas. The active page * indicator dot shifts to inline-right of the label so it reads naturally in * a vertical list. Close (X) sits top-right. * -------------------------------------------------------------------------- */ @media (max-width: 600px) { /* Hamburger trigger button — custom 3-bar icon overrides WP's default SVG * (which renders as 2 lines in this version). The middle bar is the * ::before pseudo-element; the top and bottom bars are box-shadow clones * offset by ±7px. Clean and consistent across WP versions. */ header .wp-block-navigation__responsive-container-open { position: relative; width: 44px; height: 44px; padding: 0; border-radius: 999px; color: inherit; background-color: transparent; transition: background-color 0.15s ease-out; } header .wp-block-navigation__responsive-container-open:hover { background-color: rgba(14, 127, 92, 0.08); } header .wp-block-navigation__responsive-container-open svg { display: none; } header .wp-block-navigation__responsive-container-open::before { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; background-color: currentColor; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; transform: translate(-50%, -50%); } /* Full-screen overlay surface */ .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--surface-dark) !important; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) !important; } /* Close (X) button — top right */ .wp-block-navigation__responsive-container-close { color: #ffffff; padding: 8px; border-radius: 999px; transition: background-color 0.15s ease-out; } .wp-block-navigation__responsive-container-close:hover { background-color: rgba(255, 255, 255, 0.08); } .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; } /* Item list — stack from the top, left-aligned. Override WP's navigation * layout-align CSS variable directly because `align-items` alone can't * win against it. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { --navigation-layout-align: flex-start !important; --navigation-layout-justify: flex-start !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 4px; padding-top: var(--wp--preset--spacing--40); width: 100% !important; text-align: left !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > li, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100% !important; display: block !important; text-align: left !important; } /* Top-level nav links — large, white, left-aligned, pill hover */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #ffffff; font-size: 22px; font-weight: 500; padding: 12px 16px; border-radius: 8px; text-decoration: none; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible { background-color: rgba(255, 255, 255, 0.08); } /* Active-page styling inside the overlay: green colour, inline dot */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[data-msn-active="true"] { color: var(--wp--preset--color--brand-primary); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[data-msn-active="true"]::after { position: static; display: inline-block; transform: none; margin-left: 8px; vertical-align: middle; } /* Submenu — always visible inside the overlay, rendered inline with a 2px * brand-green vertical rail on the left tying it to the parent label. * Forced position:static and display:block to override WP's overlay rules * that otherwise render this as an absolutely-positioned floating card. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background-color: transparent !important; box-shadow: none !important; border: none !important; border-left: 2px solid var(--wp--preset--color--brand-primary) !important; border-radius: 0 !important; padding: 4px 0 !important; margin: 4px 0 4px 20px !important; position: static !important; display: block !important; width: auto !important; height: auto !important; min-width: 0 !important; max-height: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before { display: none; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > li { width: 100% !important; display: block !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: rgba(255, 255, 255, 0.7); font-size: 18px; font-weight: 400; padding: 10px 16px; display: block !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { color: #ffffff; background-color: rgba(255, 255, 255, 0.06); } /* Hide the desktop chevron icon — submenu is always visible, no toggle */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none !important; } } /* ----------------------------------------------------------------------------- * 5.2 Mobile responsive (≤ 600px) * - Stack the director bio's photo above the text column so the text isn't * squeezed into ~120px next to a 200px photo on narrow viewports. * - Centre the bio content and the social icons row. * - Release the "push Follow MSN to the bottom" rule because columns stack * on mobile and there's nothing to align against. * -------------------------------------------------------------------------- */ @media (max-width: 600px) { .msn-director-bio { flex-direction: column !important; align-items: center !important; text-align: center !important; } /* Make the bio's inner text column span full width so text-align: center * actually centres each child block; otherwise it shrink-wraps the text * and the centring is invisible. */ .msn-director-bio > .wp-block-group { width: 100%; text-align: center; align-items: center; } /* Shrink the 200px portrait to 140px to suit narrow viewports. */ .msn-director-bio .wp-image-37 { width: 140px !important; height: 140px !important; } .msn-director-bio figure.wp-block-image:has(> .wp-image-37) { width: 140px; height: 140px; flex: 0 0 140px; } /* Centre the Connect with Us column and its social icons. */ footer.wp-block-group .wp-block-columns > .wp-block-column { text-align: center; } footer.wp-block-group .wp-block-columns > .wp-block-column .wp-block-social-links { justify-content: center; } .msn-director-bio .wp-block-social-links { justify-content: center; } /* Reintroduce a top margin on mobile so "Follow MSN" doesn't sit flush * against the email line above it once columns stack. !important is * required because the desktop rule below in source order (3.5) applies * `margin-top: auto` with the same selector specificity and would * otherwise win the cascade. */ .wp-block-columns > .wp-block-column .msn-follow-label { margin-top: var(--wp--preset--spacing--40) !important; } /* Stack the location/email icons ABOVE their text on mobile. * The shared inline-block ::before would otherwise sit beside the text. * Making the paragraph itself a flex column turns the pseudo-element and * the text into stacked flex items that both centre via align-items. */ .msn-icon { display: flex; flex-direction: column; align-items: center; } .msn-icon::before { width: 18px; height: 18px; margin: 0 0 6px 0; } /* Break the copyright line so the year sits above the company name. */ .msn-copyright__year, .msn-copyright__name { display: block; } /* Centre the bottom bar: stack the copyright over the Terms / Cookie links * (instead of the desktop space-between row) and centre-align both. */ footer.wp-block-group .wp-block-group:has(.msn-copyright) { flex-direction: column; align-items: center; text-align: center; } footer.wp-block-group .wp-block-group:has(.msn-copyright) > .wp-block-group { justify-content: center; } } /* ----------------------------------------------------------------------------- * 3.3 Footer link hover * Footer text and inline links should look like plain text by default, with * the underline appearing only on hover/focus for affordance. Applies to * the email link in Connect with Us and the Terms of Use / Cookie Policy * links in the copyright bar. * -------------------------------------------------------------------------- */ .wp-block-template-part footer a, footer.wp-block-group a { color: inherit; text-decoration: none; } .wp-block-template-part footer a:hover, .wp-block-template-part footer a:focus-visible, footer.wp-block-group a:hover, footer.wp-block-group a:focus-visible { text-decoration: underline; } /* ----------------------------------------------------------------------------- * 3.4 Inline icons (location pin, envelope) for the footer Connect with Us block. * Implemented as CSS mask pseudo-elements so the icon survives WordPress * content sanitization (which strips inline from paragraph blocks) and * inherits the parent text colour via `currentColor` on the mask background. * -------------------------------------------------------------------------- */ .msn-icon::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; background-color: currentColor; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .msn-icon--location::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* ----------------------------------------------------------------------------- * 3.5 Footer "Follow" row alignment * Push the "Follow MSN" label + social-links block to the bottom of the right * column so it baselines with "Follow Charles" + social-links in the director * bio (which sits at the bottom of the left column naturally). Works because * wp:columns gives both columns equal height by default. * -------------------------------------------------------------------------- */ .wp-block-columns > .wp-block-column { display: flex; flex-direction: column; } .wp-block-columns > .wp-block-column .msn-follow-label { margin-top: auto; } /* ----------------------------------------------------------------------------- * 3.6 Footer social icons * Render each social link as a 36×36 rounded square with a subtle translucent * background and a white logo. Normalises the visual weight of icons whose * SVG paths render at different optical sizes (e.g. TikTok wider than X), and * matches the reference design's grey-tile pattern. * -------------------------------------------------------------------------- */ footer.wp-block-group .wp-block-social-links { gap: 6px; } footer.wp-block-group .wp-block-social-links .wp-social-link { width: 36px; height: 36px; background-color: rgba(255, 255, 255, 0.08); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0; transition: background-color 0.2s ease; } footer.wp-block-group .wp-block-social-links .wp-social-link:hover, footer.wp-block-group .wp-block-social-links .wp-social-link:focus-visible { background-color: rgba(255, 255, 255, 0.18); } footer.wp-block-group .wp-block-social-links .wp-social-link svg { width: 18px; height: 18px; fill: #ffffff; } .msn-icon--email::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* ============================================================================= * 6. HOME PAGE * ========================================================================== */ /* ----------------------------------------------------------------------------- * 6.1 Hero pill * The "Advocacy · Research · Policy" pill at the top of the home-page hero * (templates/front-page.html). Without this rule it renders as a full-width * brand-primary band — the block markup declares the className and brand * colours, but the tight-badge geometry (inline-block, small uppercase text * with letter-spacing, rounded corners, compact padding) is purely visual * polish and lives here so the markup stays clean. * * Sizes follow the client-approved mockup * (references/wp_realistic_mockup/msn-wp-home.html line 191–202). * -------------------------------------------------------------------------- */ /* Selectors use the `p.` element prefix + the `has-background` hook to outrank WordPress core's `.has-small-font-size` and per-block style attributes. The `!important` on width/display defeats flex-blockification in wp:column. */ p.msn-hero-pill, p.msn-hero-pill.has-background { align-self: flex-start !important; display: inline-block !important; width: fit-content !important; max-width: 100%; padding: 6px 14px !important; border-radius: 4px !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1px !important; text-transform: uppercase !important; line-height: 1.4 !important; /* Reset bottom margin — the next-sibling rule below controls the gap to the H1. */ margin-bottom: 0 !important; } /* ----------------------------------------------------------------------------- * 6.1.1 Pill → heading gap * Theme blockGap is set to spacing|40 (~16–24px) for general rhythm. For the * hero we want the pill and headline to read as one unit, so override the gap * for any heading that follows the pill. * -------------------------------------------------------------------------- */ .msn-hero-pill + .wp-block-heading { margin-top: var(--wp--preset--spacing--20) !important; } /* ----------------------------------------------------------------------------- * 6.2 Section heading + gold bar * Every home-page section H2 (Publications, Featured On, Campaigns) carries the * className "msn-section-heading". A 3px gold vertical bar sits to the left of * the text via ::before — matches mockup `.section-heading-wrap` lines 104–123. * Padding on the heading itself reserves the space so the bar overlays cleanly. * -------------------------------------------------------------------------- */ .msn-section-heading { position: relative; padding-left: 18px; font-size: 26px; line-height: 1.2; margin-bottom: 40px; } .msn-section-heading::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; background-color: var(--wp--preset--color--brand-accent); border-radius: 2px; } /* ----------------------------------------------------------------------------- * 6.3 Card visual (Publications + Featured On) * Both card types share the same shell: border + shadow + radius + hover lift * + flex-column layout that lets cards in a row share the height of the * tallest. The body section grows to fill remaining space and the CTA pill is * anchored to the bottom via margin-top:auto in 6.6 — so the three cards in a * row align at both the top AND bottom regardless of content length. * * The card border uses a neutral rgba (mockup's #E0D9D0 isn't in theme tokens; * documented exception, same pattern as the footer-bar separator in #06). * -------------------------------------------------------------------------- */ .msn-pub-card, .msn-press-card { display: flex; flex-direction: column; border: 1px solid rgba(0, 0, 0, 0.10); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10); overflow: hidden; transition: box-shadow 0.18s ease-out, transform 0.18s ease-out; } .msn-pub-card:hover, .msn-press-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } /* Body fills remaining card height so the bottom CTA aligns across cards. */ .msn-pub-card .msn-pub-card__body, .msn-press-card .msn-press-card__body { display: flex; flex-direction: column; flex: 1 1 auto; text-align: left; align-items: flex-start; } /* Equal-height across columns requires the post-template grid items not to * inherit any min-height auto behaviours that prevent stretching. */ .wp-block-post-template.is-layout-grid { align-items: stretch; } .wp-block-post-template.is-layout-grid > li { display: flex; } .wp-block-post-template.is-layout-grid > li > .msn-pub-card, .wp-block-post-template.is-layout-grid > li > .msn-press-card { flex: 1 1 auto; width: 100%; } /* Force 16:9 on the press-card featured image regardless of upload dimensions. * The wp:post-featured-image block carries aspectRatio:"16/9" but newer WP * drops that inline style on
    (see wp-block-theme-gotchas #28 + the * mirrored fix on .msn-card__image), so portrait uploads stretch the card. */ .msn-press-card .msn-press-logo { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; } .msn-press-card .msn-press-logo img { width: 100%; height: 100%; object-fit: cover; } /* ----------------------------------------------------------------------------- * 6.4 Publication type tag * The "POLICY PAPER" / "BOOK" / "BRIEF" eyebrow above each card title. Output * by wp:post-terms on the publication_type taxonomy. Sized/spaced per mockup * `.pub-type` lines 241–249. Gold colour comes from the block's textColor. * -------------------------------------------------------------------------- */ .msn-pub-card .msn-pub-type { font-size: 11px !important; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1; margin: 0 0 4px 0; /* Force flush-left even when wp:post-terms emits has-text-align-* classes or core stylesheets centre tag-like elements. */ text-align: left !important; align-self: flex-start !important; width: auto !important; } .msn-pub-card .msn-pub-type a { color: inherit; text-decoration: none; } /* ----------------------------------------------------------------------------- * 6.5 Card title (Publications + Featured On) * Sized smaller than the default H3 preset so each card reads as a teaser, not * a section subheading. Link `color: inherit` so the title picks up whatever * textColor the block JSON declared (brand-secondary navy for pub cards, * contrast near-black for press cards — press is third-party editorial, not * MSN-branded content). Hover shifts both to brand-primary green for a clean * state change without underline noise. * -------------------------------------------------------------------------- */ .msn-pub-card .wp-block-post-title, .msn-press-card .wp-block-post-title { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 0; } /* Clamp press-card titles to exactly two lines (truncate with ellipsis past * that) so the meta row aligns across every card in the row regardless of * title length. Press clippings carry the outlet's own headline — full text * lives on the outlet's site behind Read More, so truncation is acceptable. * Combines -webkit-line-clamp (ellipsis) with a hard max-height (cap) and * min-height (floor) so the title box is exactly 2 lines tall in every case. */ .msn-press-card .wp-block-post-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 16px * 1.35); max-height: calc(2 * 16px * 1.35); } .msn-pub-card .wp-block-post-title a, .msn-press-card .wp-block-post-title a { color: inherit; text-decoration: none; transition: color 0.18s ease-out; } .msn-pub-card .wp-block-post-title a:hover, .msn-pub-card .wp-block-post-title a:focus-visible, .msn-press-card .wp-block-post-title a:hover, .msn-press-card .wp-block-post-title a:focus-visible { color: var(--wp--preset--color--brand-primary); text-decoration: none; } /* ----------------------------------------------------------------------------- * 6.6 Download PDF link * The block markup uses wp:button so we can bind the `url` attribute to the * pub_pdf ACF field. Visually we strip every trace of "button" — transparent * background, no padding, brand-primary text colour, underline on hover. The * margin-top:auto sticks the link to the bottom of the card so equal-height * rows look balanced. * -------------------------------------------------------------------------- */ .msn-pub-card .msn-pdf-link-wrap, .msn-press-card .msn-press-read-more-wrap { margin-top: auto; padding-top: var(--wp--preset--spacing--30); /* Specificity escalations — wp:buttons flex layout can re-centre via .is-content-justification-* classes or inline justify-content. */ justify-content: flex-start !important; align-self: flex-start !important; width: auto !important; } .msn-pub-card .msn-pdf-link-wrap .wp-block-button, .msn-press-card .msn-press-read-more-wrap .wp-block-button { margin: 0 !important; } /* Outline pill: transparent fill, brand-primary border + text. Fills with * brand-primary + white text on hover for a clear interaction state. * Unscoped so the same pill ships on: home Publications cards, home Featured * On cards, and the Publications archive rows (Section 8). The card-specific * wrap behaviour (margin-top:auto) remains scoped above; only the button * visual is shared. */ .msn-pdf-link .wp-block-button__link, .msn-press-read-more .wp-block-button__link { background: transparent !important; color: var(--wp--preset--color--brand-primary) !important; border: 1.5px solid var(--wp--preset--color--brand-primary); padding: 6px 14px !important; border-radius: 999px; /* full pill */ font-size: 13px; font-weight: 600; letter-spacing: 0.2px; text-decoration: none; transition: background-color 0.18s ease-out, color 0.18s ease-out; } .msn-pdf-link .wp-block-button__link:hover, .msn-pdf-link .wp-block-button__link:focus-visible, .msn-press-read-more .wp-block-button__link:hover, .msn-press-read-more .wp-block-button__link:focus-visible { background: var(--wp--preset--color--brand-primary) !important; color: var(--wp--preset--color--base) !important; text-decoration: none; } /* ----------------------------------------------------------------------------- * 6.7 Press meta "Outlet · Date" * Flex row of two children: the outlet name (bound to ACF news_outlet) and the * post date (wp:post-date). A "·" separator is injected before the date via * ::before so the markup stays clean — no literal-text separator block needed. * Aligns items to baseline so the typography looks balanced when the two * children render at slightly different baselines (paragraph vs
  • ; targeting the last li's child row removes the trailing line. */ .wp-block-post-template > li:last-child .msn-event-row { border-bottom: none; } /* Column proportions — badge fixed-width, info fills, CTA hugs right. */ .msn-event-row > .msn-event-badge { flex: 0 0 88px; } .msn-event-row > .msn-event-info { flex: 1 1 auto; min-width: 0; /* allow text to wrap inside the flex item */ } .msn-event-row > .msn-event-cta { flex: 0 0 auto; margin-left: auto; } /* Tighten typography inside the info column — title is a teaser, location is * secondary. Default H3 size + theme blockGap would be too generous. */ .msn-event-info .wp-block-post-title { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0; } .msn-event-info .wp-block-post-title a { color: inherit; text-decoration: none; transition: color 0.18s ease-out; } .msn-event-info .wp-block-post-title a:hover, .msn-event-info .wp-block-post-title a:focus-visible { color: var(--wp--preset--color--brand-primary); } .msn-event-info > p { margin: 0; } /* ----------------------------------------------------------------------------- * 6.9 Campaigns date badge * Green pill containing three bound paragraphs (day / month / year), each * binding the same event_start ACF field with a different `format` arg — * see inc/block-bindings.php for the format contract. Typography matches * mockup `.event-date-badge` lines 323–334: big day, small uppercase month, * small dimmed year. * -------------------------------------------------------------------------- */ .msn-event-badge { min-width: 70px; text-align: center; font-family: var(--wp--preset--font-family--sans); line-height: 1.2; } .msn-event-badge > p { margin: 0 !important; } .msn-event-badge__day { font-size: 24px; font-weight: 700; line-height: 1; } .msn-event-badge__mon { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 2px !important; } .msn-event-badge__year { font-size: 10px; opacity: 0.75; margin-top: 2px !important; } /* ----------------------------------------------------------------------------- * 6.10 Campaigns View Details link * wp:read-more renders as ``. * Style as a plain text link in brand-primary; underline appears on hover. * -------------------------------------------------------------------------- */ a.wp-block-read-more.msn-event-cta { color: var(--wp--preset--color--brand-primary) !important; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; /* keep the arrow on the same line as the text */ transition: color 0.18s ease-out; } /* Hover state: darken to brand-secondary navy. No underline — keeps the link * feeling like part of the editorial flow rather than a generic hyperlink. */ a.wp-block-read-more.msn-event-cta:hover, a.wp-block-read-more.msn-event-cta:focus-visible { color: var(--wp--preset--color--brand-secondary) !important; text-decoration: none; } /* ----------------------------------------------------------------------------- * 6.11 Home page mobile responsive (≤ 600px) * Co-located mobile rules for the home page sections. Per mockup behaviour: * - Campaigns: hide "View Details →" (the title is the click target), shrink * the date badge so the info column gets more space and titles stop * hyphenating at narrow widths (e.g. "Roundtabl-e"). * * The hero, Publications, and Featured On sections rely on their wp:columns * `isStackedOnMobile` and post-template grid auto-stacking for responsive * behaviour — no extra rules needed here. * -------------------------------------------------------------------------- */ @media (max-width: 600px) { /* Campaigns row: badge | info layout only. CTA hidden — title still links. */ a.wp-block-read-more.msn-event-cta { display: none; } .msn-event-row > .msn-event-badge { flex: 0 0 64px; min-width: 64px; } /* Trim badge typography a touch so the smaller badge doesn't feel cramped. */ .msn-event-badge__day { font-size: 20px; } /* Tighter row gap on mobile so badge + info don't feel disconnected. */ .msn-event-row { gap: var(--wp--preset--spacing--30) !important; } } /* ============================================================================= * 7. SINGLE PUBLICATION * Front-end styling for templates/single-publication.html. Implements the * reference design at references/wp_realistic_mockup/msn-wp-publication-single.html. * Classes prefixed `.msn-pub-single__*` are scoped to the single template only; * `.msn-pub-focus` is shared with the archive (#08 Part 2). * ========================================================================== */ /* ----------------------------------------------------------------------------- * 7.1 Layout wrapper * The inner content group inherits contentSize 780px from theme.json, matching * the mockup's max-width: 780px. blockGap on the wrapper handles vertical * rhythm between cover / label / title / etc. — section-specific margins are * tuned below. * -------------------------------------------------------------------------- */ .msn-pub-single { max-width: 780px; margin: 0 auto; } /* ----------------------------------------------------------------------------- * 7.2 Cover banner * Mockup: 280px tall, fills the 780px column, soft drop shadow, 4px radius. * WP forces height:auto on images (gotcha #8) — so both width and height * carry !important. object-fit:cover crops portrait or landscape source to * the banner shape without distortion. * -------------------------------------------------------------------------- */ .msn-pub-single__cover { margin: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10); } .msn-pub-single__cover img { width: 100% !important; height: 280px !important; object-fit: cover; object-position: center center; display: block; } /* ----------------------------------------------------------------------------- * 7.3 Type label * Uppercase letter-spaced gold tag identifying the Publication Type * (Policy Paper / Book / Brief). The block renders as * .wp-block-post-terms with an inner ; we colour the anchor by inheritance. * -------------------------------------------------------------------------- */ .msn-pub-single__type-label { text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; font-size: 12px !important; color: var(--wp--preset--color--brand-accent); margin-top: var(--wp--preset--spacing--40); margin-bottom: 0; } .msn-pub-single__type-label a { color: inherit; text-decoration: none; } .msn-pub-single__type-label a:hover { text-decoration: underline; } /* ----------------------------------------------------------------------------- * 7.4 Title + subtitle + date * H1 left-aligned, navy serif, 32px (mockup) — overrides theme.json's * xx-large preset since this view wants tighter typography than the * fluid clamp default. * * The date row uses a CSS mask-image calendar icon (gotcha #2 — inline * inside wp:paragraph is stripped by wp_kses_post). currentColor * lets the icon inherit the muted paragraph colour automatically. * -------------------------------------------------------------------------- */ .msn-pub-single__title { font-size: 32px !important; letter-spacing: -0.3px; line-height: 1.2; margin-top: var(--wp--preset--spacing--20); margin-bottom: var(--wp--preset--spacing--20); text-align: left; } .msn-pub-single__subtitle { font-size: 17px !important; line-height: 1.6; margin-top: 0; margin-bottom: var(--wp--preset--spacing--30); } .msn-pub-single__date { display: flex; align-items: center; gap: 7px; font-size: 13px !important; line-height: 1.4; margin-top: 0; margin-bottom: 0; } .msn-pub-single__date::before { content: ""; display: inline-block; width: 14px; height: 14px; flex-shrink: 0; background-color: currentColor; opacity: 0.6; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } /* ----------------------------------------------------------------------------- * 7.5 Plain rule * 1px hairline matching the rgba(0,0,0,0.1) used in header bottom-border and * footer copyright-bar top-border. NOT gold — the gold accent on this page * is reserved for the blockquote left border (7.8). Reset WP separator * defaults (background-color, height) so only the top border is drawn. * -------------------------------------------------------------------------- */ .msn-pub-single__rule { border: none !important; /* 1px warm-beige hairline matching the mockup's --border (#E0D9D0). * Reserved for thin divider lines; NOT gold (gold accent is reserved * for the small rule under the H1 and the blockquote left border). */ border-top: 1px solid #E0D9D0 !important; background: transparent !important; height: 0 !important; width: auto !important; } /* ----------------------------------------------------------------------------- * 7.6 Download CTA * Full-column-width primary button at 52px tall with a download-arrow icon * prepended via CSS mask. Inherits brand-primary background + white text * from theme.json's elements.button styles; only sizing, font-weight, and * the icon are added here. * -------------------------------------------------------------------------- */ .msn-pub-single__download-wrap { margin-top: var(--wp--preset--spacing--30) !important; margin-bottom: var(--wp--preset--spacing--50) !important; } .msn-pub-single__download .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; font-size: 15px !important; font-weight: 600 !important; border-radius: 4px; } .msn-pub-single__download .wp-block-button__link::before { content: ""; display: inline-block; width: 14px; height: 14px; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } /* ----------------------------------------------------------------------------- * 7.7 Drop cap in post content * Native Paragraph block "drop cap" toggle adds .has-drop-cap. WordPress * core's default drop cap is sans and undersized for the mockup design; * override to match: serif, 72px, navy, floated left of the first line. * Scoped under .msn-pub-single .wp-block-post-content so it never leaks * to other templates (front-page paragraphs, archives, etc.). * -------------------------------------------------------------------------- */ .msn-pub-single .wp-block-post-content .has-drop-cap:not(:focus)::first-letter { font-family: var(--wp--preset--font-family--serif); font-size: 60px; font-weight: 700; line-height: 0.85; color: var(--wp--preset--color--brand-secondary); float: left; margin-right: 4px; margin-top: 4px; padding-top: 2px; } /* ----------------------------------------------------------------------------- * 7.8 Blockquote / pull-quote * Mockup design: gold left border, cream (base-alt) background, italic serif * inner text in navy. Applied to all three quote-flavour blocks an editor * might reach for: classic
    , core/quote, core/pullquote. * Pull-quote = optional — staff create publications without it routinely. * -------------------------------------------------------------------------- */ .msn-pub-single .wp-block-post-content blockquote, .msn-pub-single .wp-block-post-content .wp-block-quote, .msn-pub-single .wp-block-post-content .wp-block-pullquote { border-left: 4px solid var(--wp--preset--color--brand-accent); background: var(--wp--preset--color--base-alt); padding: 16px 20px !important; margin: 24px 0 !important; border-radius: 0 4px 4px 0; } .msn-pub-single .wp-block-post-content blockquote p, .msn-pub-single .wp-block-post-content .wp-block-quote p, .msn-pub-single .wp-block-post-content .wp-block-pullquote p { font-family: var(--wp--preset--font-family--serif); font-size: 16px !important; font-style: italic; color: var(--wp--preset--color--brand-secondary); line-height: 1.7; margin-bottom: 0; } .msn-pub-single .wp-block-post-content blockquote cite, .msn-pub-single .wp-block-post-content .wp-block-quote cite, .msn-pub-single .wp-block-post-content .wp-block-pullquote cite { display: block; margin-top: 12px; font-style: normal; font-size: 13px; color: var(--wp--preset--color--contrast-muted); } /* ----------------------------------------------------------------------------- * 7.9 Focus row + focus pills * The .msn-pub-focus pill visual styles are now unscoped so the archive row * variant (Section 8) inherits the same pill design without duplication. * Layout-specific styles (flex container, gap) stay scoped to the parent * that hosts the focus row in each template. * * Pill colour values match the mockup verbatim — kept as rgba literals * because the mockup uses brand-primary at 8%/22% opacities which aren't * pre-defined theme.json colours. * -------------------------------------------------------------------------- */ .msn-pub-single__focus-row { gap: var(--wp--preset--spacing--20); } .msn-pub-single__focus-label { margin: 0; font-size: 13px !important; font-weight: 600; } .msn-pub-single__focus-row .msn-pub-focus { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; } /* Unscoped pill container — also unscoped now so removing the separator text node (via `separator:""` block attribute) doesn't collapse the pills together. inline-flex + gap gives visual spacing without needing a literal separator character. */ .msn-pub-focus { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; } /* Unscoped pill visual — shared by single-publication (Section 7) + archive row (Section 8). Targets the inner that wp:post-terms emits. */ .msn-pub-focus a { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--wp--preset--color--brand-primary); background: rgba(14, 127, 92, 0.08); border: 1px solid rgba(14, 127, 92, 0.22); padding: 3px 10px; border-radius: 20px; text-decoration: none; line-height: 1.4; } .msn-pub-focus a:hover { background: rgba(14, 127, 92, 0.15); } /* ----------------------------------------------------------------------------- * 7.10 Single publication mobile responsive (≤ 600px) * Title shrinks (32 → 26 mockup spec), cover banner trims to 200px so it * doesn't dominate a narrow viewport, drop cap shrinks (72 → 56 mockup). * Everything else either reflows naturally (focus row wraps) or uses * fluid sizes already. * -------------------------------------------------------------------------- */ @media (max-width: 600px) { .msn-pub-single__title { font-size: 26px !important; } .msn-pub-single__cover img { height: 200px !important; } .msn-pub-single .wp-block-post-content .has-drop-cap:not(:focus)::first-letter { font-size: 48px; } } /* ----------------------------------------------------------------------------- * 7.11 Justified paragraph block style * Registered in inc/block-styles.php via register_block_style() so it appears * as "Justified" in the editor's Block → Styles panel. Applied to any * paragraph the editor opts in by clicking the style chip — not site-wide. * * Selector note: the editor wraps each paragraph block in a * `.wp-block-paragraph` container, but the front-end render is just a bare * `

    `. Targeting `.is-style-justified` alone * matches both. Currently only registered on core/paragraph; if extended to * other blocks later, tighten the selector then. * * Hyphenation softens the ragged spacing that justified prose can produce * in narrow columns; supported in all modern browsers. * -------------------------------------------------------------------------- */ .is-style-justified { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* ============================================================================= * 8. PUBLICATIONS ARCHIVE * Front-end styling for templates/archive-publication.html. Implements the * reference design at references/wp_realistic_mockup/msn-wp-publications.html. * Publications appear as horizontal rows (100px cover + content body). * Pill styling and outline-pill PDF button styling are shared with the * single-publication template via the refactored unscoped rules in * Section 6.6 and Section 7.9. * ========================================================================== */ /* ----------------------------------------------------------------------------- * 8.1 Archive intro * Title section above the publication list. The gold accent rule is rendered * as an `::after` pseudo-element on the H1 so it's positionally locked to * the title — no separate wp:separator block that could drift out of * alignment under different layouts. * * H1 size override: theme.json sets H1 to fluid xx-large (40–56px). We * push to 48px solidly so it reads as a strong page anchor regardless of * viewport size. !important is needed to beat theme.json element styles. * -------------------------------------------------------------------------- */ .msn-archive-intro__h1 { font-size: 48px !important; font-weight: 700; line-height: 1.15; margin: 0 0 var(--wp--preset--spacing--30) 0; } .msn-archive-intro__h1::after { content: ""; display: block; width: 40px; height: 3px; background: var(--wp--preset--color--brand-accent); border-radius: 2px; margin-top: 16px; } .msn-archive-intro__lede { font-size: 16px; line-height: 1.7; /* Fill the full constrained column so the paragraph's left edge aligns * with the H1. Previously had max-width:640px which, combined with the * parent's constrained-layout `margin-inline:auto > *` rule (specificity * 0,2,0 — beats a single class selector), centred the paragraph and * shifted it ~70px to the right of the heading. Removing the cap lets * the paragraph fill the 780px column and the left edges line up. */ margin: 0; } /* ----------------------------------------------------------------------------- * 8.1b Meta row — "Showing X of Y publications" + sort dropdown * Sits between the page intro and the publication list. Flex justify-between * puts the count on the left, the dropdown on the right; wraps on mobile. * * The submit button on the form is hidden when JS is present (the .msn-js * class on is added by assets/js/publication-sort.js, which then * auto-submits the form on