/* Hallmark · genre: editorial · design-system: design.md · designed-as-app * macrostructure families: Split Studio (pages) · Ecosystem Index (news) · * Index-First (registers) · Long Document (legal) * theme: custom — "Cotton & Slate" * vibe: Victorian civic Manchester, police heritage, warm stock / cool ink * paper oklch(97.4% 0.007 84) · warm cotton * accent oklch(74% 0.130 76) · brass * display Newsreader · body IBM Plex Sans · outlier IBM Plex Mono * axes: light paper · roman-serif display · warm accent * nav: N6 masthead · footer: Ft4 dense colophon · enrichment: E-none (typographic + CSS-art chequer/bee) * pre-emit critique: P5 H5 E4 S5 R4 V5 * ------------------------------------------------------------------------ * Manchester & District NARPO — design tokens. * Every block reads from here. Change a brand value once, the whole site moves. * ====================================================================== */ /* ========================================================================== 1 · Typefaces (self-hosted — no third-party font CDN, no consent question) ========================================================================== */ /* Display — Newsreader, a roman reading serif with real weight. Chosen over a grotesque because the branch is an institution with a century of history behind it, and because the previous build was Helvetica. */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/newsreader-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Body — IBM Plex Sans. Engineering-grade legibility; the membership skews older and reads a lot of small print (pension notes, funeral details). */ @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Outlier — IBM Plex Mono. Two roles only: record labels (DIED / FUNERAL / CATEGORY) and dates. It gives the registers the texture of a service record, which is what they actually are. */ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } html { overflow-x: clip; } body { overflow-x: clip; } /* ========================================================================== 2 · Tokens ========================================================================== */ :root { /* --- Paper: warm cotton stock ------------------------------------- */ --mn-paper: oklch(97.4% 0.007 84); /* #f9f6f1 */ --mn-paper-2: oklch(94.8% 0.010 82); --mn-paper-3: oklch(91.0% 0.013 80); --mn-rule: oklch(85.5% 0.014 78); --mn-rule-strong: oklch(78.0% 0.018 76); /* --- Slate: Mancunian ink ----------------------------------------- */ --mn-slate-deep: oklch(19.0% 0.034 258); /* #0a1423 */ --mn-slate: oklch(24.0% 0.036 258); /* #142030 */ --mn-slate-soft: oklch(31.0% 0.036 257); /* #253143 */ --mn-slate-line: oklch(38.0% 0.032 256); /* #374353 */ /* --- Text ---------------------------------------------------------- */ --mn-ink: oklch(25.0% 0.028 258); /* #19222f — 14.9:1 on paper */ --mn-ink-muted: oklch(45.0% 0.020 256); --mn-ink-faint: oklch(58.0% 0.016 255); /* large text / decoration only */ --mn-on-slate: oklch(95.0% 0.008 84); --mn-on-slate-mute: oklch(78.0% 0.012 84); /* --- Brass: the single accent (kept under ~3% of any viewport) ----- */ --mn-brass: oklch(74.0% 0.130 76); /* #d99e3f — 7.8:1 on slate-deep */ --mn-brass-bright: oklch(82.0% 0.115 82); --mn-brass-ink: oklch(48.0% 0.125 62); /* #8e4900 — accent as text on paper, 6.3:1 */ --mn-brass-line: oklch(74.0% 0.130 76 / 0.40); /* --- Heraldic red. Artwork and heraldry only — never a UI signal. -- */ /* The plate third-party logos are drawn for. Not a UI surface: its only job is to stop supplied artwork with a baked-in white ground reading as a white patch on warm stock. */ --mn-plate: #ffffff; --mn-rose: oklch(47.0% 0.170 26); /* #a51e21 */ /* --- Chequer (Sillitoe) -------------------------------------------- */ --mn-chequer-a: var(--mn-slate-deep); --mn-chequer-b: var(--mn-paper); --mn-chequer-unit: 8px; /* one square */ --mn-chequer-band: 16px; /* two rows of squares */ /* ================================================================== Legacy bridge — every block CSS in this codebase already reads the --narpo-* names. They are re-pointed at the Manchester palette so a single file moves the whole site, and so a future palette change has exactly one place to happen. ================================================================== */ --narpo-navy: var(--mn-slate); --narpo-navy-deep: var(--mn-slate-deep); --narpo-navy-soft: var(--mn-slate-soft); --narpo-blue: var(--mn-brass-ink); /* inline link colour */ --narpo-accent: var(--mn-brass); --narpo-band: var(--mn-brass); --narpo-cream: var(--mn-paper-2); --narpo-paper: var(--mn-paper); --narpo-ink: var(--mn-ink); --narpo-ink-soft: var(--mn-ink-muted); --narpo-line: var(--mn-rule); /* --- Type ---------------------------------------------------------- */ --narpo-font-sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --narpo-font-display: "Newsreader", Georgia, "Times New Roman", serif; --narpo-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; /* Major-third scale, capped well under the 5.5rem display ceiling. */ --narpo-fs-hero: clamp( 2.35rem, 3.6vw + 1.1rem, 4.4rem ); --narpo-fs-h1: clamp( 2rem, 2.4vw + 0.95rem, 3.05rem ); --narpo-fs-h2: clamp( 1.6rem, 1.7vw + 0.85rem, 2.35rem ); --narpo-fs-h3: clamp( 1.18rem, 0.7vw + 0.95rem, 1.5rem ); --narpo-fs-body: clamp( 1.0625rem, 0.22vw + 1rem, 1.1875rem ); --narpo-fs-small: 0.875rem; --narpo-fs-label: 0.7rem; /* mono record labels */ --narpo-lh-display: 1.12; --narpo-lh-body: 1.62; --narpo-tracking-display: -0.014em; --narpo-tracking-label: 0.15em; /* --- Spacing ------------------------------------------------------- */ --narpo-space-section: clamp( 3.25rem, 6.5vw, 6.5rem ); --narpo-space-block: clamp( 1.5rem, 3vw, 3rem ); --narpo-content-width: 1320px; --narpo-section-gutter: clamp( 1.25rem, 4vw, 3rem ); --narpo-container: min( calc( var(--narpo-content-width) - (2 * var(--narpo-section-gutter)) ), calc( 100% - (2 * var(--narpo-section-gutter)) ) ); --narpo-measure: 68ch; /* Printed, not app-shaped: a 3px radius reads engraved, 12px reads SaaS. */ --narpo-radius: 3px; --narpo-radius-sm: 2px; --narpo-radius-pill: 999px; /* --- Motion -------------------------------------------------------- */ --narpo-ease: cubic-bezier( 0.16, 1, 0.3, 1 ); --narpo-ease-out: cubic-bezier( 0.16, 1, 0.3, 1 ); --narpo-ease-in: cubic-bezier( 0.7, 0, 0.84, 0 ); /* State changes — hover, focus, open/close. The entering ease has a long tail that reads as lag on a colour swap under the cursor, so states get a symmetric curve and a shorter duration. */ --narpo-ease-state: cubic-bezier( 0.4, 0, 0.2, 1 ); --narpo-dur-state: 0.16s; --narpo-dur-fast: 0.12s; --narpo-dur: 0.22s; --narpo-dur-long: 0.42s; /* --- Depth. Weight and rule, not drop shadow. ---------------------- */ --narpo-shadow-sm: 0 0 0 1px oklch(25% 0.028 258 / 0.07); --narpo-shadow-md: 0 1px 2px oklch(20% 0.03 258 / 0.06), 0 8px 20px -14px oklch(20% 0.03 258 / 0.35); --narpo-shadow-lg: 0 2px 4px oklch(20% 0.03 258 / 0.06), 0 24px 48px -28px oklch(20% 0.03 258 / 0.42); /* --- z-index scale ------------------------------------------------- */ --narpo-z-base: 1; --narpo-z-raised: 10; --narpo-z-dropdown: 100; --narpo-z-sticky: 200; --narpo-z-modal: 400; } /* ========================================================================== 3 · Decorative primitives The two motifs the whole identity rests on, defined once. ========================================================================== */ /* --- The Sillitoe chequer ------------------------------------------------- The black-and-white cap band every British force wears, and the border of NARPO's own crest. Used as heavy furniture only: the foot of a hero, the head of the footer, the edges of the membership band. Quiet transitions get a brass hairline instead. */ .narpo-chequer, [data-narpo-chequer] { background-image: repeating-conic-gradient( var(--mn-chequer-a) 0% 25%, var(--mn-chequer-b) 0% 50% ); background-size: calc(var(--mn-chequer-unit) * 2) calc(var(--mn-chequer-unit) * 2); background-position: 0 0; } /* Brass variant — used where a paper-white chequer would be too loud. */ .narpo-chequer--brass { --mn-chequer-b: var(--mn-brass); } /* --- The Manchester worker bee ------------------------------------------- Official symbol of the city since 1842; one pair of wings, not two, after the simplified Town Hall carving. Inlined as a data URI so it can be scaled and dropped behind a heading without another HTTP request. The abdomen is drawn as separate bands inside a clip path, so the stripes stay real gaps at any opacity. White here; it only ever appears over slate, tinted down at the use site. */ :root { --mn-bee: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340'%3E%3Cdefs%3E%3CclipPath id='ab'%3E%3Cpath d='M170.0 135.2 C199.9 135.2 218.3 158.2 217.2 185.8 C216.0 231.8 199.9 273.2 170.0 298.5 C140.1 273.2 124.0 231.8 122.8 185.8 C121.7 158.2 140.1 135.2 170.0 135.2 Z'/%3E%3C/clipPath%3E%3C/defs%3E %3Cg fill='%23fff'%3E %3Cpath d='M147.0 114.5 C98.7 59.3 38.9 43.2 20.5 70.8 C4.4 96.1 48.1 135.2 98.7 142.1 C124.0 145.6 142.4 135.2 147.0 114.5 Z' opacity='.34'/%3E%3Cpath d='M147.0 114.5 C98.7 59.3 38.9 43.2 20.5 70.8 C4.4 96.1 48.1 135.2 98.7 142.1 C124.0 145.6 142.4 135.2 147.0 114.5 Z' fill='none' stroke='%23fff' stroke-width='5.5'/%3E %3Cpath d='M193.0 114.5 C241.3 59.3 301.1 43.2 319.5 70.8 C335.6 96.1 291.9 135.2 241.3 142.1 C216.0 145.6 197.6 135.2 193.0 114.5 Z' opacity='.34'/%3E%3Cpath d='M193.0 114.5 C241.3 59.3 301.1 43.2 319.5 70.8 C335.6 96.1 291.9 135.2 241.3 142.1 C216.0 145.6 197.6 135.2 193.0 114.5 Z' fill='none' stroke='%23fff' stroke-width='5.5'/%3E %3Cpath d='M153.9 59.3 C137.8 31.7 119.4 20.2 103.3 24.8' fill='none' stroke='%23fff' stroke-width='8.7' stroke-linecap='round'/%3E %3Cpath d='M186.1 59.3 C202.2 31.7 220.6 20.2 236.7 24.8' fill='none' stroke='%23fff' stroke-width='8.7' stroke-linecap='round'/%3E %3Ccircle cx='170.0' cy='77.7' r='29.9'/%3E %3Cellipse cx='170.0' cy='123.7' rx='39.1' ry='28.7'/%3E %3Cg clip-path='url(%23ab)'%3E%3Crect x='114.8' y='135.2' width='110.4' height='36.8'/%3E%3Crect x='114.8' y='185.8' width='110.4' height='16.1'/%3E%3Crect x='114.8' y='215.7' width='110.4' height='16.1'/%3E%3Crect x='114.8' y='245.6' width='110.4' height='13.8'/%3E%3Crect x='114.8' y='273.2' width='110.4' height='18.4'/%3E%3C/g%3E %3C/g%3E%3C/svg%3E"); } /* ========================================================================== 4 · Base typography ========================================================================== */ body, .editor-styles-wrapper, .wp-site-blocks, button, input, select, textarea { font-family: var(--narpo-font-sans) !important; } p, li, figcaption, blockquote, label, td, th, dd, dt { font-family: var(--narpo-font-sans) !important; } h1, h2, h3, h4, h5, h6, .wp-block-heading, .site-title, .site-tagline { font-family: var(--narpo-font-display) !important; font-weight: 600; letter-spacing: var(--narpo-tracking-display); line-height: var(--narpo-lh-display); font-style: normal; } body { background: var(--mn-paper); color: var(--mn-ink); font-size: var(--narpo-fs-body); line-height: var(--narpo-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Dates, counts and money always align. */ time, .narpo-obituary-list__date, .narpo-obituary-list__funeral, .narpo-obituary-list__count, .narpo-newsletter-list__year-count, .narpo-obituary-list__year-count { font-variant-numeric: tabular-nums; } /* The mono outlier, role 1 of 2: record labels. */ .narpo-label, .narpo-obituary-list__field-label, .narpo-news-cards__select-label, .narpo-obituary-list__filter-label, .narpo-gallery__select-label { font-family: var(--narpo-font-mono) !important; font-size: var(--narpo-fs-label); font-weight: 500; letter-spacing: var(--narpo-tracking-label); text-transform: uppercase; color: var(--mn-ink-muted); } /* ========================================================================== 5 · Motion — reveal machinery (unchanged behaviour, quieter values) ========================================================================== */ @media (prefers-reduced-motion: no-preference) { [data-narpo-anim]:not([data-narpo-anim-done]) { opacity: 0; } [data-narpo-anim="stagger"]:not([data-narpo-anim-done]) > * { opacity: 0; } @keyframes narpoAnimFailsafe { to { opacity: 1; } } [data-narpo-anim]:not([data-narpo-anim-done]) { animation: narpoAnimFailsafe 0.5s 2s forwards; } [data-narpo-anim="stagger"]:not([data-narpo-anim-done]) > * { animation: narpoAnimFailsafe 0.5s 2s forwards; } } /* ========================================================================== 6 · Structural resets carried over from the original build ========================================================================== */ .entry-content > [class*="narpo-"], .wp-block-post-content > [class*="narpo-"], .entry-content > .wp-block-cover, .wp-block-post-content > .wp-block-cover { margin-block: 0 !important; } .narpo-legal-page .wp-block-group.alignwide.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained { max-width: 100% !important; padding-top: 50px !important; padding-bottom: 50px !important; } .narpo-legal-page .wp-block-group.alignwide.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained > * { max-width: 100% !important; } /* Long Document family: legal and prose pages read at a proper measure. */ .narpo-legal-page .wp-block-post-content p, .narpo-legal-page .wp-block-post-content li { max-width: var(--narpo-measure); } /* --- Bold has to be told what it weighs ---------------------------------- The parent theme's global styles set `body { font-weight: 300 }`. The browser's default for and is `bolder`, which is RELATIVE: from an inherited 300 it resolves to 400, not 700. So every bold word in body copy on this site was rendering one step above light — near enough invisible, and it took a prize list and a newsletter to notice. Stated outright, and at zero specificity so any component can still choose its own weight. */ :where( b, strong ) { font-weight: 600; } /* ========================================================================== 7 · Focus, skip link, inline links ========================================================================== */ :where( a[href], button, input:not([type="hidden"]), select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"]) ):focus-visible { outline: 3px solid var(--mn-brass); outline-offset: 3px; /* Never animate the ring — it must appear instantly. */ transition: none; } :where( a[href], button, input:not([type="hidden"]), select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"]) ):focus:not(:focus-visible) { outline: none; } .skip-link:focus, #wp-skip-link:focus { clip: auto !important; clip-path: none !important; width: auto !important; height: auto !important; top: 1rem !important; left: 1rem !important; padding: 0.85rem 1rem !important; border-radius: var(--narpo-radius-sm); background: var(--mn-paper) !important; color: var(--mn-slate-deep) !important; box-shadow: var(--narpo-shadow-md); text-decoration: none !important; } body.admin-bar .skip-link:focus, body.admin-bar #wp-skip-link:focus { top: calc(1rem + 32px) !important; } /* Inline prose links: a rule that draws itself in from the left. */ .entry-content :is( p, li, figcaption, blockquote, dd, dt, h1, h2, h3, h4, h5, h6 ) a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):not(.narpo-link-directory__link), .wp-block-post-content :is( p, li, figcaption, blockquote, dd, dt, h1, h2, h3, h4, h5, h6 ) a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):not(.narpo-link-directory__link), .narpo-auth-panel :is( p, .forminator-description, .forminator-error-message, .forminator-response-message, .forminator-notice, .narpo-auth-panel__switch, .narpo-auth-panel__alert ) a[href], .narpo-coming-soon :is( p, li, h1, h2, h3, h4 ) a[href], .narpo-site-footer__copyright a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):not(.narpo-link-directory__link) { color: var(--mn-brass-ink); background-image: linear-gradient(currentColor, currentColor); background-position: 0 calc(100% - 0.08em); background-repeat: no-repeat; background-size: 100% 1px; text-decoration: none; transition: color var(--narpo-dur-state) var(--narpo-ease-state), background-size var(--narpo-dur) var(--narpo-ease); } .entry-content :is( p, li, figcaption, blockquote, dd, dt, h1, h2, h3, h4, h5, h6 ) a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):not(.narpo-link-directory__link):hover, .entry-content :is( p, li, figcaption, blockquote, dd, dt, h1, h2, h3, h4, h5, h6 ) a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):not(.narpo-link-directory__link):focus-visible, .wp-block-post-content :is( p, li, figcaption, blockquote, dd, dt, h1, h2, h3, h4, h5, h6 ) a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):not(.narpo-link-directory__link):hover, .wp-block-post-content :is( p, li, figcaption, blockquote, dd, dt, h1, h2, h3, h4, h5, h6 ) a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):not(.narpo-link-directory__link):focus-visible, .narpo-auth-panel :is( p, .forminator-description, .forminator-error-message, .forminator-response-message, .forminator-notice, .narpo-auth-panel__switch, .narpo-auth-panel__alert ) a[href]:hover, .narpo-auth-panel :is( p, .forminator-description, .forminator-error-message, .forminator-response-message, .forminator-notice, .narpo-auth-panel__switch, .narpo-auth-panel__alert ) a[href]:focus-visible, .narpo-coming-soon :is( p, li, h1, h2, h3, h4 ) a[href]:hover, .narpo-coming-soon :is( p, li, h1, h2, h3, h4 ) a[href]:focus-visible, .narpo-site-footer__copyright a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):not(.narpo-link-directory__link):hover, .narpo-site-footer__copyright a[href]:not(.narpo-btn):not(.wp-element-button):not(.wp-block-button__link):not(.narpo-link-directory__link):focus-visible { background-size: 100% 2px; } @media screen and (max-width: 782px) { body.admin-bar .skip-link:focus, body.admin-bar #wp-skip-link:focus { top: calc(1rem + 46px) !important; } } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-narpo-anim], [data-narpo-anim] > * { opacity: 1 !important; transform: none !important; } } /* ========================================================================== 8 · Third-party chrome Two plugins render UI on every page and neither knows about the design system: CookieYes (`.cky-*`) draws the consent bar, and the privacy strip sits under the masthead. Both are pulled onto the palette here rather than in a block stylesheet, because neither belongs to a block. ========================================================================== */ .narpo-privacy-banner { background: var(--mn-slate, #142030); color: var(--mn-on-slate-mute, #bbb7af); border-bottom: 1px solid var(--mn-slate-line, #374353); font-size: 0.8rem; } .narpo-privacy-banner__link { color: var(--mn-brass, #d99e3f); } .narpo-privacy-banner__link:hover, .narpo-privacy-banner__link:focus-visible { color: var(--mn-brass-bright, #e9bd68); } .cky-consent-container .cky-consent-bar, .cky-modal { background: var(--mn-paper, #f9f6f1) !important; border: 1px solid var(--mn-rule, #d4cec5) !important; border-top: 2px solid var(--mn-brass, #d99e3f) !important; border-radius: var(--narpo-radius, 3px) !important; box-shadow: var(--narpo-shadow-lg) !important; font-family: var(--narpo-font-sans, system-ui, sans-serif) !important; color: var(--mn-ink, #19222f) !important; } .cky-title { font-family: var(--narpo-font-display, Georgia, serif) !important; font-weight: 600 !important; color: var(--mn-slate-deep, #0a1423) !important; } .cky-notice-des, .cky-notice-des * , .cky-preference-body-wrapper, .cky-accordion-header-des { color: var(--mn-ink-muted, #4e5661) !important; font-family: var(--narpo-font-sans, system-ui, sans-serif) !important; } .cky-btn { border-radius: var(--narpo-radius, 3px) !important; font-family: var(--narpo-font-sans, system-ui, sans-serif) !important; font-weight: 600 !important; min-height: 44px; transition: background var(--narpo-dur-state) var(--narpo-ease-state), color var(--narpo-dur-state) var(--narpo-ease-state), border-color var(--narpo-dur-state) var(--narpo-ease-state); } .cky-btn-accept { background: var(--mn-slate-deep, #0a1423) !important; border-color: var(--mn-slate-deep, #0a1423) !important; color: var(--mn-on-slate, #f1eee9) !important; } .cky-btn-accept:hover, .cky-btn-accept:focus-visible { background: var(--mn-brass, #d99e3f) !important; border-color: var(--mn-brass, #d99e3f) !important; color: var(--mn-slate-deep, #0a1423) !important; } .cky-btn-reject, .cky-btn-customize, .cky-btn-preferences { background: transparent !important; border-color: var(--mn-rule-strong, #beb6ab) !important; color: var(--mn-slate-deep, #0a1423) !important; } .cky-btn-reject:hover, .cky-btn-customize:hover, .cky-btn-preferences:hover, .cky-btn-reject:focus-visible, .cky-btn-customize:focus-visible, .cky-btn-preferences:focus-visible { border-color: var(--mn-brass, #d99e3f) !important; color: var(--mn-brass-ink, #8e4900) !important; } .cky-btn:focus-visible { outline: 3px solid var(--mn-brass, #d99e3f) !important; outline-offset: 2px; } .cky-btn-revisit-wrapper { background: var(--mn-slate-deep, #0a1423) !important; } /* The privacy strip's link is a control, not prose: give it a real target. */ .narpo-privacy-banner__link { display: inline-flex; align-items: center; min-height: 40px; padding-block: 0.5rem; } /* The parent theme paints the block canvas white; the site's stock is warm. */ body, .wp-site-blocks, .entry-content, .wp-block-post-content { background-color: var(--mn-paper); } /* ========================================================================== 8 · Registers set as tables -------------------------------------------------------------------------- The branch directory and the 200 Club draws are ledgers, not layout. They get the register treatment the obituary and newsletter lists already use: a mono, tracked head rule; hairlines instead of a box; tabular figures so money and dates align down the column. Wide tables scroll inside their own container so the page body never does. ========================================================================== */ .entry-content .wp-block-table, .wp-block-post-content .wp-block-table { margin-block: var(--narpo-space-block); } .entry-content .wp-block-table > table, .wp-block-post-content .wp-block-table > table { width: 100%; border-collapse: collapse; background: transparent; font-size: 0.95rem; font-variant-numeric: tabular-nums; } .entry-content .wp-block-table :is(th, td), .wp-block-post-content .wp-block-table :is(th, td) { padding: 0.72rem 1rem 0.72rem 0; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--mn-rule); line-height: var(--narpo-lh-body); } .entry-content .wp-block-table :is(th, td):last-child, .wp-block-post-content .wp-block-table :is(th, td):last-child { padding-right: 0; } /* The column head is a record label — the mono outlier, role 1 of 2. */ .entry-content .wp-block-table thead th, .wp-block-post-content .wp-block-table thead th { font-family: var(--narpo-font-mono); font-size: var(--narpo-fs-label); font-weight: 500; letter-spacing: var(--narpo-tracking-label); text-transform: uppercase; color: var(--mn-brass-ink); border-bottom: 2px solid var(--mn-brass); padding-bottom: 0.6rem; white-space: nowrap; } .entry-content .wp-block-table tbody tr:last-child :is(th, td), .wp-block-post-content .wp-block-table tbody tr:last-child :is(th, td) { border-bottom: 0; } /* First column carries the record's identity. */ .entry-content .wp-block-table tbody tr > :first-child, .wp-block-post-content .wp-block-table tbody tr > :first-child { font-weight: 600; color: var(--mn-slate-deep); } /* Wide tables scroll themselves rather than the page. */ .entry-content .wp-block-table, .wp-block-post-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .entry-content .wp-block-table > table, .wp-block-post-content .wp-block-table > table { min-width: 34rem; } .entry-content .wp-block-table figcaption, .wp-block-post-content .wp-block-table figcaption { margin-top: 0.85rem; font-size: 0.85rem; color: var(--mn-ink-muted); } /* A "Long Document" prose page holds its measure; a register does not. */ .narpo-prose-page .wp-block-group.alignwide > :is(h2, h3, p, ul, ol) { max-width: var(--narpo-measure); } .narpo-prose-page .wp-block-group.alignwide > .wp-block-table { max-width: 100%; } /* --- Prose groups -------------------------------------------------------- A core/group carrying body copy holds the 68ch measure; the registers and figures inside it do not, so a table still spans the band. */ .entry-content .wp-block-group.alignwide > :is(p, ul, ol, h2, h3, h4, blockquote), .wp-block-post-content .wp-block-group.alignwide > :is(p, ul, ol, h2, h3, h4, blockquote) { max-width: var(--narpo-measure); } .entry-content .wp-block-group.alignwide > :is(figure, .wp-block-table), .wp-block-post-content .wp-block-group.alignwide > :is(figure, .wp-block-table) { max-width: 100%; } /* Prize and money figures in a register line: mono, tracked, tabular. */ .narpo-prize { margin-left: 0.5rem; font-family: var(--narpo-font-mono); font-size: 0.86em; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--mn-brass-ink); white-space: nowrap; } /* ========================================================================== 9 · The button system -------------------------------------------------------------------------- .narpo-btn is used by nine blocks, the auth panels and the single-post templates, which makes it the most load-bearing component on the site. It lives here, in the globally-loaded token sheet, rather than inside one block's stylesheet — where it previously sat, and where it was only reaching other pages because the cache plugin happened to combine every registered block style into one bundle. Three voices, per design.md: primary (slate plate), accent (brass), ghost (hairline). 3px radius, 44px minimum height, 1px border, no gradient, and a press rather than a lift. ========================================================================== */ .narpo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; /* WCAG 2.2 target size */ padding: 0.7rem 1.35rem; font-family: var(--narpo-font-sans); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.015em; line-height: 1.2; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: var(--narpo-radius); cursor: pointer; transition: background-color var(--narpo-dur-state) var(--narpo-ease-state), color var(--narpo-dur-state) var(--narpo-ease-state), border-color var(--narpo-dur-state) var(--narpo-ease-state), transform var(--narpo-dur-fast) var(--narpo-ease-state); } /* Buttons press; they never lift. */ .narpo-btn:active { transform: translateY(1px); } /* --- Primary: the slate plate -------------------------------------------- */ .narpo-btn--dark-blue, .narpo-btn--primary, .narpo-btn--secondary { background-color: var(--mn-slate-deep); color: var(--mn-on-slate); border-color: var(--mn-slate-deep); } .narpo-btn--dark-blue:hover, .narpo-btn--primary:hover, .narpo-btn--secondary:hover, .narpo-btn--dark-blue:focus-visible, .narpo-btn--primary:focus-visible, .narpo-btn--secondary:focus-visible { background-color: var(--mn-brass); color: var(--mn-slate-deep); border-color: var(--mn-brass); } /* --- Core File block (AGM papers etc.) ----------------------------------- WordPress ships a black pill for the Download button. Give it the slate plate so an uploaded document looks like the rest of the site. */ .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-block: 0 0.75rem; } .wp-block-file a.wp-block-file__button { display: inline-flex; box-sizing: border-box; /* min-height is the whole target, not the text box */ line-height: 1.2; align-items: center; min-height: 44px; margin: 0; padding: 0.6rem 1.2rem; font-family: var(--narpo-font-sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.015em; text-decoration: none; border: 1px solid var(--mn-slate-deep); border-radius: var(--narpo-radius); background-color: var(--mn-slate-deep); color: var(--mn-on-slate); transition: background-color var(--narpo-dur-state) var(--narpo-ease-state), color var(--narpo-dur-state) var(--narpo-ease-state), border-color var(--narpo-dur-state) var(--narpo-ease-state); } .wp-block-file a.wp-block-file__button:hover, .wp-block-file a.wp-block-file__button:focus-visible { background-color: var(--mn-brass); border-color: var(--mn-brass); color: var(--mn-slate-deep); } .wp-block-file a:not(.wp-block-file__button) { line-height: 1.4; } /* A year heading introducing a list of papers needs air above it. */ h3.wp-block-heading:has(+ .wp-block-file) { margin-top: 2rem; margin-bottom: 0.75rem; } /* --- Accent: brass, always with slate ink on it (7.8:1) ------------------ */ .narpo-btn--light-blue, .narpo-btn--accent { background-color: var(--mn-brass); color: var(--mn-slate-deep); border-color: var(--mn-brass); } .narpo-btn--light-blue:hover, .narpo-btn--accent:hover, .narpo-btn--light-blue:focus-visible, .narpo-btn--accent:focus-visible { background-color: var(--mn-brass-bright); color: var(--mn-slate-deep); border-color: var(--mn-brass-bright); } /* --- Ghost: a hairline plate. Defaults to its form on slate. ------------- */ .narpo-btn--white, .narpo-btn--ghost { background-color: transparent; color: var(--mn-on-slate); border-color: var(--mn-slate-line); } .narpo-btn--white:hover, .narpo-btn--ghost:hover, .narpo-btn--white:focus-visible, .narpo-btn--ghost:focus-visible { background-color: transparent; color: var(--mn-brass); border-color: var(--mn-brass); } /* On paper the ghost inverts: slate ink on a warm hairline. */ :is( .narpo-text-media, .narpo-info-card, .narpo-holiday-list, .narpo-obituary-list, .narpo-branch-directory, .narpo-single-obituary, .narpo-single-news, .narpo-newsletter, .entry-content, .wp-block-post-content ) :is( .narpo-btn--white, .narpo-btn--ghost ) { color: var(--mn-slate-deep); border-color: var(--mn-rule-strong); } :is( .narpo-text-media, .narpo-info-card, .narpo-holiday-list, .narpo-obituary-list, .narpo-branch-directory, .narpo-single-obituary, .narpo-single-news, .narpo-newsletter, .entry-content, .wp-block-post-content ) :is( .narpo-btn--white, .narpo-btn--ghost ):is( :hover, :focus-visible ) { color: var(--mn-brass-ink); border-color: var(--mn-brass); } /* A dark band inside a paper page still wants the on-slate ghost. */ :is( .narpo-member-cta, .narpo-hero-cover, .narpo-site-footer ) :is( .narpo-btn--white, .narpo-btn--ghost ) { color: var(--mn-on-slate); border-color: var(--mn-slate-line); } :is( .narpo-member-cta, .narpo-hero-cover, .narpo-site-footer ) :is( .narpo-btn--white, .narpo-btn--ghost ):is( :hover, :focus-visible ) { color: var(--mn-brass); border-color: var(--mn-brass); } @media (prefers-reduced-motion: reduce) { .narpo-btn { transition: none; } .narpo-btn:active { transform: none; } } /* ========================================================================== 10 · Band rhythm -------------------------------------------------------------------------- Every band pads itself top and bottom, which is right when bands sit against each other. It is wrong directly after a prose group, whose own bottom padding has already opened the gap — the two stack and leave a hole between the words and whatever they were introducing. ========================================================================== */ :is( .entry-content, .wp-block-post-content ) > .wp-block-group + :is( .narpo-branch-directory, .narpo-newsletter-list, .narpo-link-directory, .narpo-obituary-list, .narpo-news-cards ) { padding-top: 0; } /* And the mirror: a prose group that follows a band does not need to reopen the gap the band has already closed. */ :is( .entry-content, .wp-block-post-content ) > :is( .narpo-branch-directory, .narpo-newsletter-list, .narpo-link-directory ) + .wp-block-group { padding-top: 0 !important; } /* ========================================================================== 11 · One column edge for every band -------------------------------------------------------------------------- design.md: "What every page must share — the section-head rhythm, left-flush over left-flush content." That only holds if every band starts at the same left edge, and three of them did not. The `alignfull` bands (hero, text-media, member CTA, info card, footer) pull out of `.entry-content`'s global padding and then inset themselves by `--narpo-section-gutter`. The `alignwide` bands (news, the three directories, the two registers, the committee, the contact form) never pulled out, so the global padding and their own gutter stacked. On a 375px phone that put three different left edges on one page — 20px for the full bands, 30px for the registers, 50px for the news cards and the committee — and every band's heading and brass rule started somewhere different down the page. Bleeding the wide bands makes `100%` mean the viewport again, so the shared `--narpo-container` resolves to the same measure everywhere. Each band still owns its inner width; this only removes the doubled gutter. ========================================================================== */ :is( .entry-content, .wp-block-post-content ).has-global-padding > :is( .narpo-news-cards, .narpo-obituary-list, .narpo-newsletter-list, .narpo-link-directory, .narpo-branch-directory, .narpo-holiday-list, .narpo-contact-form, .narpo-gallery, .narpo-meet-team ).alignwide { max-width: none; width: auto; /* WordPress's constrained-layout support emits `margin-left/right: auto` for `.alignwide` with `!important`, so the breakout has to match it. */ margin-left: calc( -1 * var( --wp--style--root--padding-left ) ) !important; margin-right: calc( -1 * var( --wp--style--root--padding-right ) ) !important; } /* The obituary register measured itself at `100%` of the inset it used to sit in. Now that the band bleeds, it needs the shared container like every other inner. (The newsletter register and the contact form set the same measure in their own sheets, which load after this one.) */ .narpo-obituary-list__inner { width: var(--narpo-container); max-width: var(--narpo-container) !important; margin-inline: auto; } /* ========================================================================== 12 · One state curve, everywhere -------------------------------------------------------------------------- design.md: "State changes share one curve and one duration. Every hover, focus and open/close transition runs at --narpo-dur-state on --narpo-ease-state." That was true of the components that remembered to say so and of nothing else, so roughly half the site's hovers were instant colour swaps: the footer's outbound links, the directory chips' counts, the form fields' focus borders, the gallery's load-more, the auth panels. This is the floor, not an override. It is wrapped in `:where()`, so it has zero specificity — any component that declares its own `transition` (the button system, the news media zoom, the committee panel) replaces this wholesale rather than fighting it. `transform` is deliberately absent. Buttons press rather than lift, and the components that do move something declare that movement themselves. The outline focus ring is absent for the same reason: it must appear instantly. ========================================================================== */ :where( a, button, summary, label, input:not([type="hidden"]), select, textarea, [role="button"], [tabindex]:not([tabindex="-1"]), [class*="narpo-"][class*="__card"], [class*="narpo-"][class*="__cell"], [class*="narpo-"][class*="__item"], [class*="narpo-"][class*="__tile"], [class*="narpo-"][class*="__chip"], [class*="narpo-"][class*="__row"], [class*="narpo-"][class*="__link"], [class*="narpo-"][class*="__count"], [class*="narpo-"][class*="__icon"], [class*="narpo-"][class*="__caption"] ) { transition: color var(--narpo-dur-state) var(--narpo-ease-state), background-color var(--narpo-dur-state) var(--narpo-ease-state), border-color var(--narpo-dur-state) var(--narpo-ease-state), box-shadow var(--narpo-dur-state) var(--narpo-ease-state), fill var(--narpo-dur-state) var(--narpo-ease-state), stroke var(--narpo-dur-state) var(--narpo-ease-state), text-decoration-color var(--narpo-dur-state) var(--narpo-ease-state); } /* Inline prose links get the same swap. They are underlined already, so the colour is the only thing that moves. */ :where( .entry-content, .wp-block-post-content ) :where( p, li, dd, td ) > a { transition: color var(--narpo-dur-state) var(--narpo-ease-state), text-decoration-color var(--narpo-dur-state) var(--narpo-ease-state); } /* Forms: a 39px field misses the 44px target by a pixel, which is exactly the kind of miss an audit catches and a person feels. */ .narpo-contact-form .forminator-input, .narpo-contact-form .forminator-select, .narpo-auth-panel .forminator-input, .forminator-ui input[type="text"], .forminator-ui input[type="email"], .forminator-ui input[type="tel"], .forminator-ui select { min-height: 44px; } /* ========================================================================== 13 · The 404 -------------------------------------------------------------------------- The one page on the site that never got a design, because it comes from the parent theme rather than from a block. It shipped Twenty Twenty-Five's stock photograph — a totara tree on a ridge above Long Point, in New Zealand — and a search field with a 999px radius and a pill button, neither of which this design system has anywhere else. The originating build serves the identical photograph from the identical path, which makes it the purest copy-and-paste artefact on either site, on exactly the page a member reaches when a link they were sent has gone stale. Replaced with the branch's own device, in CSS only: the bee on slate, held at watermark strength, in a plate the same shape as every other plate. No template override, no new asset, and it reverts by deleting this block. ========================================================================== */ .error404 .wp-block-image { position: relative; margin: 0; background: var(--mn-slate-deep, #0a1423); border-radius: var(--narpo-radius, 3px); overflow: hidden; aspect-ratio: 4 / 3; } .error404 .wp-block-image::after { content: ""; position: absolute; inset: 0; /* Bleeding off the right edge, per the motif's rule — it is a watermark and a grid-break, never an illustration centred in a box. */ background: var(--mn-bee) 128% 54% / 72% auto no-repeat; opacity: 0.085; } /* The photograph itself, hidden rather than removed: the template still owns the markup, so this stays correct if the theme updates around it. */ .error404 .wp-block-image img { display: none; } .error404 .wp-block-heading { font-family: var(--narpo-font-display, Georgia, serif); font-weight: 600; letter-spacing: var(--narpo-tracking-display, -0.014em); color: var(--mn-slate-deep, #0a1423); } /* --- The search field: the site's field, not the theme's pill ------------- */ .error404 .wp-block-search__inside-wrapper { gap: 0.6rem; border: 0; padding: 0; } .error404 .wp-block-search__input { box-sizing: border-box; min-height: 46px; padding: 0.7rem 1rem; background: var(--mn-paper, #f9f6f1); border: 1px solid var(--mn-rule-strong, #beb6ab); border-radius: var(--narpo-radius, 3px); color: var(--mn-ink, #19222f); font-family: var(--narpo-font-sans, system-ui, sans-serif); font-size: 1rem; transition: border-color var(--narpo-dur-state) var(--narpo-ease-state), background-color var(--narpo-dur-state) var(--narpo-ease-state); } .error404 .wp-block-search__input:hover { border-color: var(--mn-ink-faint, #747b84); background: var(--mn-paper-2, #f1ede6); } .error404 .wp-block-search__input:focus { border-color: var(--mn-brass, #d99e3f); } .error404 .wp-block-search__button { min-height: 46px; padding: 0.7rem 1.35rem; background: var(--mn-slate-deep, #0a1423); border: 1px solid var(--mn-slate-deep, #0a1423); border-radius: var(--narpo-radius, 3px); color: var(--mn-on-slate, #f1eee9); font-family: var(--narpo-font-sans, system-ui, sans-serif); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.015em; transition: background-color var(--narpo-dur-state) var(--narpo-ease-state), border-color var(--narpo-dur-state) var(--narpo-ease-state), color var(--narpo-dur-state) var(--narpo-ease-state), transform var(--narpo-dur-fast) var(--narpo-ease-state); } .error404 .wp-block-search__button:hover, .error404 .wp-block-search__button:focus-visible { background: var(--mn-brass, #d99e3f); border-color: var(--mn-brass, #d99e3f); color: var(--mn-slate-deep, #0a1423); } /* Buttons press; they never lift. */ .error404 .wp-block-search__button:active { transform: translateY(1px); }