/* kits-v42 */ /* Generated by kits-by-wugweb/tools/build-tokens.py from kits-v42.json. Do not edit. */ :root { --neutral-0: #FFFFFF; --neutral-1: #F4F4F4; --neutral-2: #DFDFDF; --neutral-3: #BABABA; --neutral-4: #A3A3A3; --neutral-5: #7D7D7D; --neutral-6: #636363; --neutral-7: #4A4A4A; --neutral-8: #2E2E2E; --neutral-9: #141414; --neutral-10: #000000; --color-peach: #E54F30; --color-green: #3ED219; --color-blue: #2368D7; --color-aqua: #09E2C0; --color-yellow: #FFBE1A; --color-grey: #C9C9C9; --color-ash: #191919; --s-0: 0px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --r-0: 0px; --radius-none: var(--r-0); --r-1: 4px; --radius-xs: var(--r-1); --r-2: 8px; --radius-sm: var(--r-2); --r-3: 12px; --radius-md: var(--r-3); --r-4: 16px; --radius-lg: var(--r-4); --r-6: 24px; --radius-2xl: var(--r-6); --r-full: 9999px; --radius-full: var(--r-full); --opacity-10: 10%; --opacity-20: 20%; --opacity-40: 40%; --opacity-60: 60%; --opacity-80: 80%; --opacity-100: 100%; --opacity-disabled: var(--opacity-40); --fluid-display: clamp(2.5rem, 1.3636rem + 4.8485vw, 5rem); --weight-display: 800; --fluid-h1: clamp(2rem, 1.5455rem + 1.9394vw, 3rem); --weight-h1: 700; --fluid-h2: clamp(1.5rem, 1.3864rem + 0.4848vw, 1.75rem); --weight-h2: 600; --fluid-h3: clamp(1.25rem, 1.1932rem + 0.2424vw, 1.375rem); --weight-h3: 600; --fluid-h4: clamp(1.0625rem, 1.0341rem + 0.1212vw, 1.125rem); --weight-h4: 600; --fluid-h5: 1rem; --weight-h5: 600; --fluid-body-lg: clamp(1rem, 0.9432rem + 0.2424vw, 1.125rem); --weight-body-lg: 400; --fluid-body-md: clamp(0.9375rem, 0.9091rem + 0.1212vw, 1rem); --weight-body-md: 400; --fluid-body-sm: clamp(0.8125rem, 0.7841rem + 0.1212vw, 0.875rem); --weight-body-sm: 400; --fluid-label: clamp(0.75rem, 0.6932rem + 0.2424vw, 0.875rem); --weight-label: 500; --fluid-caption: clamp(0.625rem, 0.5682rem + 0.2424vw, 0.75rem); --weight-caption: 400; --font-family: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; } /* kit-tokens */ /* Generated by kits-by-wugweb/tools/build-tokens.py from tokens.json. Do not edit. */ :root { /* Kits v4.2 primitives bound to theme.json presets (Styles > Typography / Layout) */ --fluid-caption: var(--wp--preset--font-size--caption, clamp(0.625rem, 0.5682rem + 0.2424vw, 0.75rem)); --fluid-label: var(--wp--preset--font-size--label, clamp(0.75rem, 0.6932rem + 0.2424vw, 0.875rem)); --fluid-body-sm: var(--wp--preset--font-size--small, clamp(0.8125rem, 0.7841rem + 0.1212vw, 0.875rem)); --fluid-body-md: var(--wp--preset--font-size--medium, clamp(0.9375rem, 0.9091rem + 0.1212vw, 1rem)); --fluid-body-lg: var(--wp--preset--font-size--large, clamp(1rem, 0.9432rem + 0.2424vw, 1.125rem)); --fluid-h5: var(--wp--preset--font-size--h-5, 1rem); --fluid-h4: var(--wp--preset--font-size--x-large, clamp(1.0625rem, 1.0341rem + 0.1212vw, 1.125rem)); --fluid-h3: var(--wp--preset--font-size--2-x-large, clamp(1.25rem, 1.1932rem + 0.2424vw, 1.375rem)); --fluid-h2: var(--wp--preset--font-size--3-x-large, clamp(1.5rem, 1.3864rem + 0.4848vw, 1.75rem)); --fluid-h1: var(--wp--preset--font-size--4-x-large, clamp(2rem, 1.5455rem + 1.9394vw, 3rem)); --fluid-display: var(--wp--preset--font-size--display, clamp(2.5rem, 1.3636rem + 4.8485vw, 5rem)); --s-0: var(--wp--preset--spacing--0, 0px); --s-1: var(--wp--preset--spacing--10, 4px); --s-2: var(--wp--preset--spacing--20, 8px); --s-3: var(--wp--preset--spacing--30, 12px); --s-4: var(--wp--preset--spacing--40, 16px); --s-6: var(--wp--preset--spacing--50, 24px); --s-8: var(--wp--preset--spacing--60, 32px); --s-10: var(--wp--preset--spacing--70, 40px); --s-12: var(--wp--preset--spacing--80, 48px); --kit-color-bg: var(--wp--preset--color--canvas, #F4F4F4); --kit-color-surface: var(--wp--preset--color--surface, #F4F4F4); --kit-color-surface-soft: var(--neutral-0); --kit-color-raised: var(--wp--preset--color--background, #FFFFFF); --kit-color-ink: var(--wp--preset--color--secondary, #191919); --kit-color-text: var(--wp--preset--color--foreground, #2E2E2E); --kit-color-muted: var(--wp--preset--color--text-muted, #636363); --kit-color-line: var(--wp--preset--color--border, #DFDFDF); --kit-color-accent: var(--wp--preset--color--primary, #FFBE1A); --kit-color-accent-ink: var(--wp--preset--color--primary-dark, #2368D7); --kit-color-on-accent: var(--color-ash); --kit-color-on-ink: var(--wp--preset--color--on-ink, #FFFFFF); --kit-color-danger: var(--wp--preset--color--error, #E54F30); --kit-color-danger-soft: #fef2f2; --kit-color-success: var(--wp--preset--color--success, #15803d); --kit-color-success-soft: #f0fdf4; --kit-color-focus: var(--wp--preset--color--focus, #2368D7); --kit-color-whatsapp: #15803d; --kit-font-display: var(--wp--preset--font-family--display); --kit-font-body: var(--wp--preset--font-family--base); --kit-type-xs: var(--fluid-label); --kit-type-2xs: 0.5rem; --kit-type-sm: var(--fluid-body-sm); --kit-type-base: var(--fluid-body-md); --kit-type-lead: var(--fluid-body-lg); --kit-type-h4: var(--fluid-h4); --kit-type-h3: var(--fluid-h3); --kit-type-h2: var(--fluid-h2); --kit-type-h1: var(--fluid-h1); --kit-type-headline: var(--fluid-h3); --kit-type-display: var(--fluid-display); --kit-type-stat: var(--fluid-h3); --kit-type-placard: var(--fluid-h5); --kit-leading-body: 1.6; --kit-leading-heading: 1.2; --kit-leading-display: 1.06; --kit-weight-regular: 400; --kit-weight-strong: 600; --kit-measure: 68ch; --kit-space-1: var(--s-1); --kit-space-2: var(--s-2); --kit-space-3: var(--s-3); --kit-space-4: var(--s-4); --kit-space-5: var(--s-6); --kit-space-6: var(--s-8); --kit-space-7: var(--s-12); --kit-space-8: 4rem; --kit-space-9: 6rem; --kit-space-section: 48px; --kit-space-gutter: 16px; --kit-space-grid: 16px; --kit-width-content: 720px; --kit-width-wide: 1200px; --kit-radius-control: var(--wp--preset--border-radius--control, 8px); --kit-radius-card: var(--wp--preset--border-radius--card, 12px); --kit-radius-media: var(--wp--preset--border-radius--media, 12px); --kit-radius-hero: var(--wp--preset--border-radius--media, 12px); --kit-radius-pill: var(--wp--preset--border-radius--pill, 9999px); --kit-elevation-1: var(--wp--preset--shadow--elevation-1, 0 1px 2px rgba(20,20,20,.06), 0 2px 8px rgba(20,20,20,.06)); --kit-elevation-2: var(--wp--preset--shadow--elevation-2, 0 4px 10px rgba(20,20,20,.08), 0 14px 32px rgba(20,20,20,.10)); --kit-elevation-3: var(--wp--preset--shadow--elevation-3, 0 20px 48px rgba(20,20,20,.18)); --kit-offset: 8px; --kit-elevation-offset: var(--wp--preset--shadow--offset, var(--kit-offset) var(--kit-offset) 0 var(--kit-color-accent)); --kit-motion-fast: 120ms; --kit-motion-base: 200ms; --kit-motion-slow: 320ms; --kit-motion-ease: cubic-bezier(.2,.7,.2,1); --kit-motion-lift: -3px; --kit-z-sticky: 50; --kit-z-header: 40; --kit-z-overlay: 100; --kit-size-target: 44px; --kit-size-control: 48px; --kit-size-control-lg: 52px; --kit-border-width: 1px; --kit-border-mark: 3px; --kit-border-accent: 4px; --kit-underline-offset: 4px; --kit-underline-offset-sm: 3px; --kit-underline-thickness: 1px; --kit-underline-thickness-strong: 2px; --kit-focus-offset-lg: 3px; --kit-focus-offset-xl: 4px; --kit-icon-sm: 16px; --kit-icon-md: 20px; --kit-icon-lg: 24px; --kit-icon-xl: 28px; --kit-icon-gap: 6px; --kit-meta-size: 12px; --kit-meta-weight: var(--kit-weight-medium); --kit-meta-icon: var(--kit-icon-sm); --kit-meta-icon-gap: var(--kit-icon-gap); --kit-meta-gap: var(--kit-space-4); --kit-meta-row-gap: var(--kit-space-1); --kit-radius-hair: 2px; --kit-radius-mark: 3px; --kit-radius-xs: 4px; --kit-thumb-sm: 56px; --kit-thumb-md: 72px; --kit-thumb-lg: 112px; --kit-card-min: 17rem; --kit-size-target-min: 24px; --kit-accent-bar: 6px; --kit-focus-outline: 2px; --kit-focus-ring-width: 4px; --kit-press-offset-sm: 4px; --kit-press-offset: 6px; --kit-table-min: 34rem; --kit-border-control: 1px; --kit-card-columns: 1; --kit-card-media-ratio: 4/3; --kit-placard-ratio: 16/7; --kit-carousel-item: 82%; --kit-weight-medium: 500; --kit-weight-bold: 700; --kit-tracking-display: -0.035em; --kit-tracking-heading: -0.02em; --kit-tracking-body: -0.006em; --kit-color-canvas: var(--wp--preset--color--canvas, #F4F4F4); --kit-focus-width: 3px; --kit-focus-offset: 2px; --kit-size-check: 1.5rem; --kit-color-warning: var(--wp--preset--color--warning, #8a5a00); --kit-color-warning-soft: #fff6e0; --kit-color-info: var(--color-blue); --kit-color-info-soft: #eaf1fc; --kit-color-link: var(--wp--preset--color--primary-dark, #2368D7); --kit-grid-gap: 16px; --kit-grid-columns: 4; --kit-width-nav: 1280px; --kit-header-height: 75px; --kit-announce-height: 25px; --kit-layer-nav: 10; --kit-duration-spring: 400ms; --kit-ease-spring: linear(0, 0.0544, 0.1785, 0.3258, 0.4733, 0.6066, 0.7181, 0.8053, 0.8689, 0.9123, 0.9403, 0.9576, 0.9681, 0.975, 0.9806, 0.9864, 0.9929, 1.0001, 1.0072, 1.0128, 1.015, 1.0146, 1.0119, 1.0085, 1.0052, 1.0026, 1.0008, 1); --kit-surface-page: var(--neutral-1); --kit-surface-section: var(--neutral-0); --kit-surface-section-alt: var(--neutral-2); --kit-surface-card: var(--neutral-0); --kit-overlay: color-mix(in srgb, var(--color-ash) 60%, transparent); --kit-btn-height: var(--kit-size-target); --kit-btn-height-sm: var(--kit-size-target); --kit-field-height: var(--kit-size-control); --kit-btn-pad: var(--s-4); --kit-btn-pad-sm: var(--s-4); --kit-btn-gap: var(--s-2); --kit-btn-ico-size: 1.125em; --kit-btn-ico-size-only: var(--kit-icon-md); --kit-btn-press: 1px; --kit-btn-nudge: 3px; --kit-btn-spinner-width: 2px; --kit-btn-primary-bg: var(--kit-color-ink); --kit-btn-primary-fg: var(--kit-color-on-ink); --kit-btn-primary-bg-hover: var(--neutral-8); --kit-btn-primary-fg-hover: var(--kit-color-on-ink); --kit-btn-secondary-bg: color-mix(in srgb, var(--kit-color-ink) 6%, transparent); --kit-btn-secondary-fg: var(--kit-color-ink); --kit-btn-secondary-line: var(--kit-color-line); --kit-btn-secondary-bg-hover: var(--kit-color-ink); --kit-btn-secondary-fg-hover: var(--kit-color-on-ink); --kit-btn-ghost-fg: var(--kit-color-ink); --kit-btn-ghost-line: var(--kit-color-ink); --kit-btn-ghost-bg-hover: var(--kit-color-ink); --kit-btn-ghost-fg-hover: var(--kit-color-on-ink); --kit-btn-brand-bg: var(--kit-color-accent); --kit-btn-brand-fg: var(--kit-color-on-accent); --kit-btn-hover-mix: 85%; } @media (min-width: 768px) { :root { --kit-space-section: 70px; --kit-space-gutter: 32px; --kit-space-grid: 24px; --kit-offset: 14px; --kit-meta-size: 13px; --kit-card-columns: 2; --kit-placard-ratio: 16/9; --kit-carousel-item: auto; --kit-grid-gap: 24px; --kit-grid-columns: 8; --kit-btn-height: var(--kit-size-control); --kit-btn-pad: var(--s-6); } } @media (min-width: 1200px) { :root { --kit-space-section: 96px; --kit-space-gutter: 48px; --kit-space-grid: 32px; --kit-meta-size: 14px; --kit-card-columns: 3; --kit-grid-gap: 32px; --kit-grid-columns: 12; --kit-btn-height: var(--kit-size-control-lg); } } /* kits */ /* Kits by Wugweb — styles theme.json cannot express. Use presets only; no raw values. */ /* Group "Card" and "Surface", button "Primary/Secondary/Ghost/Small", separator "Hairline": theme.json styles.blocks variations. */ .is-style-kits-label { /* = kit-eyebrow: small, sentence case, carries information */ display: block; margin: 0 0 var(--s-2); font-size: var(--fluid-label); font-weight: var(--weight-label); color: var(--wp--preset--color--text-muted); } .wp-block-button__link { transition: opacity 0.2s ease; } .wp-block-button__link:hover, .wp-block-button__link:focus-visible { opacity: 0.9; } :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; } .kits-ad-slot { min-height: 90px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--wp--preset--color--border); border-radius: var(--wp--preset--border-radius--control); color: var(--wp--preset--color--text-muted); } /* kit-components */ /* * Kits by Wugweb — components (generated from the Animal Writes promotion, 2026-10-07). * One name per component (kit-*); Animal Writes-only components live in the child theme (aw.css). * Values come from tokens (--kit-*), so a child theme restyles everything by overriding tokens only. * Sections: base, typography, layout, components (button, card, media, field, chip, section, icons, * section header, tile), chrome (header, footer, sticky bar), page components (nav dropdowns, carousel, * table, share bar, ads, details, pagination, search, empty state), motion, print, shared system pieces. */ /* 1. Base ------------------------------------------------------------------ */ html { scroll-behavior: smooth; } html, body { overflow-x: clip; } /* Page colours, body type, links, headings, buttons and captions come from theme.json (Appearance > Editor > Styles); the rules here add only what theme.json cannot express, so a change made in Styles is never overridden. */ body { -webkit-font-smoothing: antialiased; } ::selection { background: var(--kit-color-accent); color: var(--kit-color-on-accent); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset); border-radius: var(--kit-radius-xs); } a { text-underline-offset: 0.18em; text-decoration-thickness: var(--kit-underline-thickness); transition: color var(--kit-motion-fast) var(--kit-motion-ease); } a:hover { color: var(--kit-color-link); text-decoration-thickness: var(--kit-underline-thickness-strong); } /* Links inside running text are blue (yellow is for fills only) */ :is(.wp-block-post-content, .entry-content, .kit-ed-help-note, .kit-more, .kit-field-hint) :is(p, li, td, figcaption) > a:not([class]) { color: var(--kit-color-link); } /* On dark surfaces the focus ring and links switch to light colours */ :is(.kit-dark, .has-secondary-background-color, .wp-block-cover.is-dark, .kit-ed-help, .kit-ed-story, .kit-ed-hero, .kit-site-footer) { --kit-color-focus: var(--color-yellow); --kit-color-link: var(--neutral-0); } .wp-site-blocks > main { margin-block-start: 0; } .wp-site-blocks > main:has(> .wp-block-post-content > .alignfull:last-child) + * { margin-block-start: 0; } /* a page that ends with a full-width band meets the footer with no strip */ /* 2. Typography ------------------------------------------------------------- */ /* One family (Inter). Hierarchy = size + weight + tracking. Map: display .kit-display type-display / bold / leading-display / tracking-display h1 h1, .wp-block-query-title, single titles type-h1 / bold h2 h2, section titles type-h2 / bold h3 h3, card titles type-h3 / semibold h4 h4, small headings type-h4 / semibold lead .has-large-font-size, .kit-lead, section descriptions type-lead / regular / muted body p, li type-base / regular small .has-small-font-size, meta, captions type-sm caption .kit-caption, dates, counts type-xs / medium */ body { font-feature-settings: "cv11", "ss01"; } /* Heading family, weight, size, leading, tracking and colour: theme.json styles.elements (h1-h6) */ h1, h2, h3, h4, h5, h6, .wp-block-heading, .wp-block-post-title, .wp-block-query-title { text-wrap: balance; } .kit-display ,.kit-hero-title { font-size: var(--kit-type-display) !important; line-height: var(--kit-leading-display); letter-spacing: var(--kit-tracking-display); font-weight: var(--kit-weight-bold); } p, li { max-width: var(--kit-measure); text-wrap: pretty; } .has-text-align-center { margin-inline: auto; } .has-large-font-size ,.kit-lead { font-size: var(--kit-type-lead) !important; line-height: 1.5; color: var(--kit-color-muted); } .has-small-font-size { font-size: var(--kit-type-sm) !important; } .kit-caption ,.kit-note { color: var(--kit-color-muted); font-size: var(--kit-type-xs); font-weight: var(--kit-weight-medium); } /* 3. Layout ----------------------------------------------------------------- */ .wp-block-post-template.is-layout-grid ,.kit-cards .wp-block-post-template { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--kit-card-min), 100%), 1fr)); gap: var(--kit-space-6) var(--kit-space-grid); list-style: none; padding: 0; margin-block: var(--kit-space-5); } .wp-block-post-template > li { margin: 0; } /* 4. Shared components ------------------------------------------------------- */ /* 4.1 Button: the whole button system (core Button block, .kit-btn, form buttons) is in kit-primitives.css section 10. */ .is-style-kits-hairline { border-width: var(--kit-border-width) 0 0 !important; height: 0; opacity: 1; } /* 4.2 Card — one component for news, legal, research, guide, opportunity, listing, resource. Anatomy: media (flush top) / chips / title (h3 style) / excerpt / date. Surface: raised + border + elevation-1. States: hover & focus-within (lift + elevation-2 + media zoom), empty (query no-results). */ .kit-cards .wp-block-post-template > li ,.wp-block-post-template.is-layout-grid > li { position: relative; display: flex; flex-direction: column; background: var(--kit-color-raised) !important; border: var(--kit-border-width) solid var(--kit-color-line) !important; border-radius: var(--kit-radius-card); box-shadow: var(--kit-elevation-1) !important; padding: 0 0 var(--kit-space-5) !important; overflow: hidden; transition: transform var(--kit-motion-base) var(--kit-motion-ease), box-shadow var(--kit-motion-base) var(--kit-motion-ease); } .wp-block-post-template > li:has(> .is-style-kits-card) { padding: 0 !important; } .wp-block-post-template > li > .is-style-kits-card { margin: 0 !important; padding: var(--kit-space-5) !important; background: none !important; border: 0 !important; box-shadow: none !important; height: 100%; } .wp-block-post-template > li > *:not(.wp-block-post-featured-image):not(.kit-card-media):not(.is-style-kits-card) ,.wp-block-post-template > li > *:not(.wp-block-post-featured-image):not(.kit-card-media):not(.kit-card-media):not(.is-style-kits-card) { margin-inline: var(--kit-space-5); } .wp-block-post-template > li:hover, .wp-block-post-template > li:focus-within { transform: translateY(var(--kit-motion-lift)); box-shadow: var(--kit-elevation-2) !important; } .wp-block-post-template > li > :is(.wp-block-post-featured-image, .kit-card-media) { border-radius: 0; margin: 0 0 var(--kit-space-4); } .wp-block-post-template > li > :is(.wp-block-post-featured-image, .kit-card-media):last-child { margin-bottom: 0; } .wp-block-post-template > li > :first-child:not(.wp-block-post-featured-image):not(.kit-card-media) ,.wp-block-post-template > li > :first-child:not(.wp-block-post-featured-image):not(.kit-card-media):not(.kit-card-media) { margin-top: var(--kit-space-5); } .wp-block-post-template .wp-block-post-title { font-size: var(--kit-type-h3); font-weight: var(--kit-weight-strong); line-height: 1.3; letter-spacing: -0.015em; margin-block: var(--kit-space-2); } .wp-block-post-template .wp-block-post-title a { display: block; text-decoration: none; color: var(--kit-color-ink); } .wp-block-post-template .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; } /* whole card is the target */ .wp-block-post-template .wp-block-post-title a:focus-visible { outline: none; } .wp-block-post-template > li:has(.wp-block-post-title a:focus-visible) { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset-lg); } .wp-block-post-template .wp-block-post-terms { position: relative; z-index: 1; } .wp-block-post-template .wp-block-post-excerpt { color: var(--kit-color-muted); font-size: var(--kit-type-sm); line-height: 1.55; margin-block: 0 var(--kit-space-3); } .wp-block-post-template .wp-block-post-excerpt__excerpt { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .wp-block-post-template .wp-block-post-date { margin-top: auto; display: flex; align-items: center; gap: var(--kit-space-2); min-height: 36px; padding-right: var(--kit-space-7); } .wp-block-post-template .wp-block-post-date::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M16%202v4%22/%3E%3Cpath%20d%3D%22M8%202v4%22/%3E%3Cpath%20d%3D%22M3%2010h18%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M16%202v4%22/%3E%3Cpath%20d%3D%22M8%202v4%22/%3E%3Cpath%20d%3D%22M3%2010h18%22/%3E%3C/svg%3E") center / contain no-repeat; } .wp-block-post-template > li::after { content: ""; position: absolute; right: var(--kit-space-5); bottom: var(--kit-space-5); width: 36px; height: 36px; border-radius: var(--kit-radius-pill); background: var(--kit-color-canvas) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23141414%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22/%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22/%3E%3C/svg%3E") center / 16px no-repeat; transition: background-color var(--kit-motion-fast) var(--kit-motion-ease), transform var(--kit-motion-base) var(--kit-motion-ease); pointer-events: none; } .wp-block-post-template > li:hover::after, .wp-block-post-template > li:focus-within::after { background-color: var(--kit-color-accent); transform: translateX(2px); } .wp-block-post-template > li:has(> .is-style-kits-card)::after { display: none; } .wp-block-post-template .wp-block-post-terms { font-size: var(--kit-type-xs); } @media (min-width: 1200px) { .kit-cards-lead .wp-block-post-template { grid-template-columns: repeat(3, 1fr); } .kit-cards-lead .wp-block-post-template > li:first-child { grid-column: span 2; grid-row: span 2; } .kit-cards-lead .wp-block-post-template > li:first-child .wp-block-post-title { font-size: var(--kit-type-h3); font-weight: var(--kit-weight-bold); } .kit-cards-lead .wp-block-post-template > li:first-child .kit-placard { font-size: var(--kit-type-h3); } } /* Card grids: a fixed 1 / 2 / 3 columns (core's auto-fill left an empty fourth column) */ .kit-cards .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr !important; gap: var(--kit-space-grid); } @media (min-width: 768px) { .kit-cards .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1200px) { .kit-cards .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* 4.3 Media — remote image, placard fallback, logo, lead image. States: loading, loaded, failed (placard). */ .kit-card-media ,.wp-block-post-featured-image { margin: 0 0 var(--kit-space-3); aspect-ratio: var(--kit-card-media-ratio); overflow: hidden; border-radius: var(--kit-radius-media); background: var(--kit-color-surface); } /* Card pictures (owner, 16 Oct 2026): 4:3 (--kit-card-media-ratio), masked like WordPress's "scale: cover", centred; the full image is served and the frame hides its edges. A block's own aspectRatio (inline) still wins: item lead pictures keep 16:9. Logos (.kit-logo) stay whole. */ .kit-card-media img ,.wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform var(--kit-motion-slow) var(--kit-motion-ease), opacity var(--kit-motion-slow) var(--kit-motion-ease); } /* A block's own aspectRatio (core prints it on the ): the frame follows the picture, so item leads keep 16:9. */ .wp-block-post-featured-image:has(img[style*="aspect-ratio"]) { aspect-ratio: auto; } .wp-block-post-featured-image img[style*="aspect-ratio"] { height: auto; } .wp-block-post-template > li:hover :is(.kit-card-media, .wp-block-post-featured-image) img { transform: scale(1.04); } .kit-card-media a { display: block; height: 100%; color: inherit; text-decoration: none; } .kit-card-media.has-remote .kit-placard { display: none; } .kit-card-media.kit-img-failed img { display: none; } .kit-card-media.kit-img-failed .kit-placard { display: flex; } .kit-placard { display: flex; align-items: flex-start; height: 100%; padding: var(--kit-space-4) var(--kit-space-4) var(--kit-space-5); background: var(--kit-color-surface); background-image: linear-gradient(transparent 0 calc(100% - 6px), var(--kit-color-accent) calc(100% - 6px)); font-family: var(--kit-font-display); font-weight: var(--kit-weight-bold); letter-spacing: var(--kit-tracking-heading); font-size: var(--kit-type-placard); line-height: var(--kit-leading-heading); color: var(--kit-color-ink); } .kit-placard span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: var(--kit-space-1); } .kit-lead-media { margin-block: var(--kit-space-5); border-radius: var(--kit-radius-hero); } body.single-aw_research .kit-lead-media { display: none; } .kit-logo { margin: 0 0 var(--kit-space-3); aspect-ratio: 1; max-width: 8rem; display: flex; align-items: center; justify-content: center; overflow: hidden; border: var(--kit-border-width) solid var(--kit-color-line); border-radius: var(--kit-radius-card); background: var(--kit-color-raised); } .kit-logo img { width: 100%; height: 100%; object-fit: contain; padding: var(--kit-space-2); } .kit-logo-lg { max-width: 10rem; } /* 4.4 Field — shared by volunteer, receipt and claim forms. States: default, hover, focus, invalid (aria-invalid), valid, disabled; error text; summary. */ .kit-form { max-width: 560px; } .kit-form p ,.kit-field { margin: 0 0 var(--kit-space-4); } .kit-form label ,.kit-form legend { display: block; font-weight: var(--kit-weight-regular); margin-bottom: var(--kit-space-2); color: var(--kit-color-ink); } .kit-form :is(input:not([type=checkbox]):not([type=file]), select, textarea) ,.kit-finder select ,.kit-link-row :is(input, select) { width: 100%; box-sizing: border-box; min-height: var(--kit-size-control); padding: 0 var(--kit-space-3); font: inherit; color: var(--kit-color-ink); background: var(--kit-color-raised); border: var(--kit-border-control) solid var(--kit-color-ink); border-radius: var(--kit-radius-control); transition: border-color var(--kit-motion-fast) var(--kit-motion-ease), box-shadow var(--kit-motion-fast) var(--kit-motion-ease); } .kit-form textarea { padding-block: var(--kit-space-3); min-height: 7rem; } .kit-form :is(input, select, textarea):hover { box-shadow: 0 0 0 3px var(--kit-color-surface); } .kit-form :is(input, select, textarea):focus-visible { outline: none; box-shadow: 0 0 0 var(--kit-focus-ring-width) var(--kit-color-accent); } .kit-form :is(input, select, textarea)[aria-invalid=true] { border-color: var(--kit-color-danger); background: var(--kit-color-danger-soft); } .kit-form :is(input, select, textarea).is-valid { border-color: var(--kit-color-success); } .kit-field-error { display: block; color: var(--kit-color-danger); font-size: var(--kit-type-sm); font-weight: var(--kit-weight-strong); margin-top: var(--kit-space-1); } .kit-field-hint { display: block; color: var(--kit-color-muted); font-size: var(--kit-type-sm); margin: calc(-1 * var(--kit-space-1)) 0 var(--kit-space-2); } .kit-optional { font-weight: var(--kit-weight-regular); color: var(--kit-color-muted); } .kit-form fieldset > legend { font-family: var(--kit-font-display); font-weight: var(--kit-weight-strong); font-size: var(--kit-type-h4); margin-bottom: var(--kit-space-3); } .kit-claim summary::-webkit-details-marker { display: none; } .kit-claim summary::after { content: "+"; margin-left: auto; font-size: 1.4em; line-height: 1; transition: transform var(--kit-motion-base) var(--kit-motion-ease); } .kit-claim details[open] > summary::after { transform: rotate(45deg); } .kit-claim summary:focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-accent); outline-offset: var(--kit-focus-offset-xl); border-radius: var(--kit-radius-control); } .kit-form fieldset { border: 0; padding: 0; margin: 0 0 var(--kit-space-4); } .kit-check { display: flex !important; gap: var(--kit-space-3); align-items: flex-start; font-weight: var(--kit-weight-regular) !important; min-height: var(--kit-size-target); padding-block: var(--kit-space-2); cursor: pointer; } .kit-check input { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; flex: none; accent-color: var(--kit-color-ink); } .kit-form input[type=file] { padding: var(--kit-space-3); border-style: dashed; background: var(--kit-color-surface-soft); } .kit-hp { position: absolute !important; left: -9999px; } .kit-form-summary { border-left: var(--kit-border-accent) solid var(--kit-color-danger); background: var(--kit-color-danger-soft); padding: var(--kit-space-3) var(--kit-space-4); border-radius: var(--kit-radius-control); margin-bottom: var(--kit-space-4); } .kit-form-summary ul { margin: var(--kit-space-2) 0 0; padding-left: var(--kit-space-5); } .kit-form-done { border-left: var(--kit-border-accent) solid var(--kit-color-success); background: var(--kit-color-success-soft); padding: var(--kit-space-4) var(--kit-space-5); border-radius: var(--kit-radius-card); animation: kit-rise var(--kit-motion-slow) var(--kit-motion-ease) both; } /* 4.5 Category links (core post-terms) look like kit-chip (kit-primitives.css); cards show at most two, smaller. */ .wp-block-post-terms__separator { display: none; } .wp-block-post-terms { display: flex; flex-wrap: wrap; gap: var(--kit-space-1); } .wp-block-post-template .wp-block-post-terms a:nth-of-type(n+3) { display: none; } /* two chips per card at most */ .wp-block-post-template .wp-block-post-terms + .wp-block-post-terms { display: none; } /* 4.6 Section header (archives): full-width kraft band with title, description, count and a three-tile visual */ /* The band runs edge to edge at every width, flush under the header (no gap above or at the sides). It holds the breadcrumb, the heading and the page's search or filters, all on the same left edge as the content below. */ .kit-section-band { background: var(--kit-color-surface); width: auto; max-width: none !important; margin: 0 calc(50% - 50vw) var(--kit-space-6) !important; padding: var(--kit-space-4) var(--kit-space-gutter) var(--kit-space-6); } main > .kit-section-band:first-child, main > p:first-child + .kit-section-band { margin-top: 0 !important; } .kit-section-inner { max-width: var(--kit-width-wide); margin-inline: auto; } .kit-section-inner > .kit-crumbs { margin: 0 0 var(--kit-space-6); } .kit-section-filters { margin-top: var(--kit-space-5); } .kit-section-filters .kit-filter-active { margin-top: var(--kit-space-3); } .kit-section-filters .kit-filters, .kit-section-filters .kit-filter-active { margin-bottom: 0; } /* Phones: drop the picture strip */ @media (max-width: 767px) { .kit-section-band .kit-section-visual { display: none; } } html { overflow-x: clip; } .kit-section-head { display: grid; gap: var(--kit-space-5); align-items: end; max-width: var(--kit-width-wide); margin-inline: auto; } .kit-section-head :is(.wp-block-query-title, .wp-block-post-title) { margin: 0; } /* the band's H1, archive or Page */ .kit-section-desc { font-size: var(--kit-type-lead); color: var(--kit-color-muted); margin: var(--kit-space-3) 0 0; } .kit-section-count { font-weight: var(--kit-weight-strong); color: var(--kit-color-ink); font-size: var(--kit-type-sm); margin: var(--kit-space-2) 0 0; } /* ink: accent-ink on kraft is only 4.3:1 */ .kit-section-visual { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kit-space-2); min-width: 0; } .kit-section-visual > * { min-width: 0; } .kit-section-visual > :nth-child(2) { transform: translateY(var(--kit-space-5)); } .kit-section-visual img ,.kit-section-visual .kit-placard { display: block; width: 100%; max-width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--kit-radius-media); } .kit-section-visual img[style*="contain"] { border: var(--kit-border-width) solid var(--kit-color-line); } .kit-section-visual .kit-placard { font-size: var(--kit-type-h4); height: auto; overflow: hidden; background-color: var(--kit-color-raised); border: var(--kit-border-width) solid var(--kit-color-line); } /* Documents show the top of their first page (masthead) */ .kit-doc-cover img ,.kit-section-visual img[src*="cover-"] ,.kit-section-visual img[src*="-pdf"] ,.type-aw_research .wp-block-post-featured-image img ,.single-aw_research .wp-block-post-featured-image img { object-position: top; background: var(--kit-color-bg); } @media (min-width: 768px) { .kit-section-head { grid-template-columns: 1.3fr 1fr; } } /* Hub head: the same fixed height on every hub at each width (md 12rem, lg 15rem), title at the top; title and intro at most two lines each; the pictures fill the head's height and never set it. With the filter row the band stays under 60svh. */ /* Hub title and intro are shown in full (no line clamp). */ @media (min-width: 768px) { :root { --kit-hub-head-h: 12rem; } .kit-section-band .kit-section-head:has(.kit-section-visual) { align-items: stretch; } /* picture column stretches to the text; height follows content */ .kit-section-band .kit-section-head > :first-child { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; overflow: hidden; } /* title at the same place on every hub */ .kit-section-band .kit-section-visual { height: 100%; align-items: start; } .kit-section-band .kit-section-visual > * { height: calc(100% - var(--kit-space-5)); } .kit-section-band .kit-section-visual :is(img, .kit-placard, .kit-placard), .kit-section-band .kit-section-visual :is(img, .kit-placard) { height: 100%; aspect-ratio: auto; } } @media (min-width: 1200px) { :root { --kit-hub-head-h: 15rem; } } /* 4.7 Icons — Lucide-style line icons (ISC licence) as CSS masks: . Inherit currentColor; size 1.25em (override with --kit-ico-size). */ .kit-ico { display: inline-block; flex: none; width: var(--kit-ico-size, 1.25em); height: var(--kit-ico-size, 1.25em); background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -0.2em; } .kit-ico--arrow-right { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22/%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22/%3E%3C/svg%3E"); } .kit-ico--link { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22/%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22/%3E%3C/svg%3E"); } .kit-ico--star { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.525%202.295a.53.53%200%200%201%20.95%200l2.31%204.679a2.123%202.123%200%200%200%201.595%201.16l5.166.756a.53.53%200%200%201%20.294.904l-3.736%203.638a2.123%202.123%200%200%200-.611%201.878l.882%205.14a.53.53%200%200%201-.771.56l-4.618-2.428a2.122%202.122%200%200%200-1.973%200L6.396%2021.01a.53.53%200%200%201-.77-.56l.881-5.139a2.122%202.122%200%200%200-.611-1.879L2.16%209.795a.53.53%200%200%201%20.294-.906l5.165-.755a2.122%202.122%200%200%200%201.597-1.16z%22/%3E%3C/svg%3E"); } .kit-ico--heart { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%22/%3E%3C/svg%3E"); } .kit-ico--youtube { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.5%2017a24.12%2024.12%200%200%201%200-10%202%202%200%200%201%201.4-1.4%2049.56%2049.56%200%200%201%2016.2%200A2%202%200%200%201%2021.5%207a24.12%2024.12%200%200%201%200%2010%202%202%200%200%201-1.4%201.4%2049.55%2049.55%200%200%201-16.2%200A2%202%200%200%201%202.5%2017%22/%3E%3Cpath%20d%3D%22m10%2015%205-3-5-3z%22/%3E%3C/svg%3E"); } .kit-ico--home { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22/%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-5.999a2%202%200%200%201%202.582%200l7%205.999A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22/%3E%3C/svg%3E"); } .kit-ico--user { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22/%3E%3C/svg%3E"); } .kit-ico--file { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22/%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22/%3E%3C/svg%3E"); } .kit-ico--send { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.536%2021.686a.5.5%200%200%200%20.937-.024l6.5-19a.496.496%200%200%200-.635-.635l-19%206.5a.5.5%200%200%200-.024.937l7.93%203.18a2%202%200%200%201%201.112%201.11z%22/%3E%3Cpath%20d%3D%22m21.854%202.147-10.94%2010.939%22/%3E%3C/svg%3E"); } .kit-ico--arrow-left { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%2019-7-7%207-7%22/%3E%3Cpath%20d%3D%22M19%2012H5%22/%3E%3C/svg%3E"); } .kit-ico--download { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22/%3E%3Cpath%20d%3D%22m7%2010%205%205%205-5%22/%3E%3Cpath%20d%3D%22M12%2015V3%22/%3E%3C/svg%3E"); } .kit-ico--sliders { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%207h-9%22/%3E%3Cpath%20d%3D%22M14%2017H5%22/%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%223%22/%3E%3C/svg%3E"); } .kit-ico--clock { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpath%20d%3D%22M12%206v6l4%202%22/%3E%3C/svg%3E"); } .kit-ico--chevron-down { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22/%3E%3C/svg%3E"); } .kit-ico--arrow-up-right { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10v10%22/%3E%3Cpath%20d%3D%22M7%2017%2017%207%22/%3E%3C/svg%3E"); } .kit-ico--directory { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22/%3E%3C/svg%3E"); } .kit-ico--legal { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m16%2016%203-8%203%208c-.87.65-1.92%201-3%201s-2.13-.35-3-1Z%22/%3E%3Cpath%20d%3D%22m2%2016%203-8%203%208c-.87.65-1.92%201-3%201s-2.13-.35-3-1Z%22/%3E%3Cpath%20d%3D%22M7%2021h10%22/%3E%3Cpath%20d%3D%22M12%203v18%22/%3E%3Cpath%20d%3D%22M3%207h2c2%200%205-1%207-2%202%201%205%202%207%202h2%22/%3E%3C/svg%3E"); } .kit-ico--news { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2022h16a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2H8a2%202%200%200%200-2%202v16a2%202%200%200%201-2%202Zm0%200a2%202%200%200%201-2-2v-9c0-1.1.9-2%202-2h2%22/%3E%3Cpath%20d%3D%22M18%2014h-8%22/%3E%3Cpath%20d%3D%22M15%2018h-5%22/%3E%3Cpath%20d%3D%22M10%206h8v4h-8V6Z%22/%3E%3C/svg%3E"); } .kit-ico--knowledge { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%207v14%22/%3E%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22/%3E%3C/svg%3E"); } .kit-ico--research { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22/%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22/%3E%3Cpath%20d%3D%22M10%209H8%22/%3E%3Cpath%20d%3D%22M16%2013H8%22/%3E%3Cpath%20d%3D%22M16%2017H8%22/%3E%3C/svg%3E"); } .kit-ico--opportunities { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2014c1.49-1.46%203-3.21%203-5.5A5.5%205.5%200%200%200%2016.5%203c-1.76%200-3%20.5-4.5%202-1.5-1.5-2.74-2-4.5-2A5.5%205.5%200%200%200%202%208.5c0%202.3%201.5%204.05%203%205.5l7%207Z%22/%3E%3C/svg%3E"); } .kit-ico--campaign { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2011%2018-5v12L3%2014v-3z%22/%3E%3Cpath%20d%3D%22M11.6%2016.8a3%203%200%201%201-5.8-1.6%22/%3E%3C/svg%3E"); } .kit-ico--resources { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22/%3E%3C/svg%3E"); } .kit-ico--name { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22/%3E%3C/svg%3E"); } /* Lucide user */ .kit-ico--mail { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22/%3E%3C/svg%3E"); } .kit-ico--phone { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22/%3E%3C/svg%3E"); } .kit-ico--search { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22/%3E%3Cpath%20d%3D%22m21%2021-4.3-4.3%22/%3E%3C/svg%3E"); } .kit-ico--instagram { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20x%3D%222%22%20y%3D%222%22%20rx%3D%225%22%20ry%3D%225%22/%3E%3Cpath%20d%3D%22M16%2011.37A4%204%200%201%201%2012.63%208%204%204%200%200%201%2016%2011.37z%22/%3E%3Cpath%20d%3D%22M17.5%206.5h.01%22/%3E%3C/svg%3E"); } .kit-ico--facebook { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%202h-3a5%205%200%200%200-5%205v3H7v4h3v8h4v-8h3l1-4h-4V7a1%201%200%200%201%201-1h3z%22/%3E%3C/svg%3E"); } .kit-ico--x-brand { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M18.901%201.153h3.68l-8.04%209.19L24%2022.846h-7.406l-5.8-7.584-6.638%207.584H.474l8.6-9.83L0%201.154h7.594l5.243%206.932ZM17.61%2020.644h2.039L6.486%203.24H4.298Z%22/%3E%3C/svg%3E"); } /* X (Twitter) logo; kit-ico--x stays the close glyph */ .kit-ico--x { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204l16%2016%22/%3E%3Cpath%20d%3D%22M20%204%204%2020%22/%3E%3C/svg%3E"); } .kit-ico--helpline { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22m4.93%204.93%204.24%204.24%22/%3E%3Cpath%20d%3D%22m14.83%209.17%204.24-4.24%22/%3E%3Cpath%20d%3D%22m14.83%2014.83%204.24%204.24%22/%3E%3Cpath%20d%3D%22m9.17%2014.83-4.24%204.24%22/%3E%3C/svg%3E"); } .kit-ico--calendar { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M16%202v4%22/%3E%3Cpath%20d%3D%22M8%202v4%22/%3E%3Cpath%20d%3D%22M3%2010h18%22/%3E%3C/svg%3E"); } .kit-ico--injured { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%202a2%202%200%200%200-2%202v5H4a2%202%200%200%200-2%202v2c0%201.1.9%202%202%202h5v5c0%201.1.9%202%202%202h2a2%202%200%200%200%202-2v-5h5a2%202%200%200%200%202-2v-2a2%202%200%200%200-2-2h-5V4a2%202%200%200%200-2-2h-2z%22/%3E%3C/svg%3E"); } .kit-ico--alert { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22/%3E%3Cpath%20d%3D%22M12%209v4%22/%3E%3Cpath%20d%3D%22M12%2017h.01%22/%3E%3C/svg%3E"); } .kit-ico--check { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22/%3E%3C/svg%3E"); } /* 4.8 Section — background variants separate blocks; cards sit on them with elevation. .kit-section (vertical rhythm) + .kit-bg-canvas | .kit-bg-kraft | .kit-bg-ink */ .kit-section { padding-block: var(--kit-space-section) !important; } @media (max-width: 767px) { .kit-stack.is-layout-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* a grid of cards stacks one per row on phones */ .kit-bg-canvas { background: var(--kit-color-canvas); } .kit-bg-kraft { background: var(--kit-color-surface); } /* 4.9 Section header — title + description left, one CTA right. */ .kit-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--kit-space-3) var(--kit-space-6); margin-bottom: var(--kit-space-6); } .kit-sec-head h2 { margin: 0; } .kit-sec-head p { margin: var(--kit-space-2) 0 0; font-size: var(--kit-type-lead); color: var(--kit-color-muted); max-width: 60ch; } /* 4.10 Tile — icon + title + one line + arrow; elevated link card (section index, quick links). */ .kit-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kit-space-grid); grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { .kit-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .kit-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .kit-tiles li { max-width: none; display: flex; } .kit-tile { flex: 1; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ico title arrow" "ico desc arrow"; column-gap: var(--kit-space-4); row-gap: var(--kit-space-1); align-items: start; padding: var(--kit-space-5); background: var(--kit-color-raised); border: var(--kit-border-width) solid var(--kit-color-line); border-radius: var(--kit-radius-card); box-shadow: var(--kit-elevation-1); color: var(--kit-color-text); text-decoration: none; transition: transform var(--kit-motion-base) var(--kit-motion-ease), box-shadow var(--kit-motion-base) var(--kit-motion-ease), border-color var(--kit-motion-base) var(--kit-motion-ease); } .kit-tile > .kit-ico:first-child { grid-area: ico; --kit-ico-size: 1.5rem; padding: 0.625rem; box-sizing: content-box; border-radius: var(--kit-radius-control); background: var(--kit-surface-section-alt); color: var(--kit-color-ink); -webkit-mask: none; mask: none; position: relative; } .kit-tile > .kit-ico:first-child::after { content: ""; position: absolute; inset: 0.625rem; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .kit-tile strong { grid-area: title; font-size: var(--kit-type-h4); font-weight: var(--kit-weight-strong); color: var(--kit-color-ink); letter-spacing: -0.01em; } .kit-tile span.kit-tile-desc { grid-area: desc; font-size: var(--kit-type-sm); color: var(--kit-color-muted); line-height: 1.5; } .kit-tile > .kit-ico--arrow-right { grid-area: arrow; align-self: center; color: var(--kit-color-muted); transition: transform var(--kit-motion-base) var(--kit-motion-ease), color var(--kit-motion-fast) var(--kit-motion-ease); } .kit-tile:hover { transform: translateY(var(--kit-motion-lift)); box-shadow: var(--kit-elevation-2); border-color: transparent; } .kit-tile:hover > .kit-ico--arrow-right { transform: translateX(4px); color: var(--kit-color-ink); } .kit-tile:hover > .kit-ico:first-child { background-color: var(--kit-color-accent); } .kit-tile:focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset-lg); } @media (prefers-reduced-motion: reduce) { .kit-tile ,.kit-tile > .kit-ico ,.kit-link-cta .kit-ico { transition: none; } .kit-tile:hover { transform: none; } } /* 5. Site chrome ------------------------------------------------------------- */ .kit-announce { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--kit-announce-height); padding: 0 var(--kit-space-4); } /* 25px bar (token), 16px sides */ .kit-announce > p { margin-block: 0; line-height: var(--kit-leading-heading); } .kit-announce a { color: inherit; font-weight: var(--kit-weight-strong); } .kit-site-header { position: relative; z-index: var(--kit-z-header); } .kit-wordmark { display: inline-flex; line-height: 0; border-radius: var(--kit-radius-xs); } .kit-wordmark img { height: var(--kit-size-target); width: auto; } .kit-site-footer .kit-wordmark img { height: 52px; } .kit-dark a { color: inherit; } .kit-dark a:hover { color: var(--kit-color-on-ink); text-decoration-thickness: var(--kit-underline-thickness-strong); } .wp-block-navigation .wp-block-navigation-item__content { padding-block: var(--kit-space-2); position: relative; } .wp-block-navigation .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--kit-color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--kit-motion-base) var(--kit-motion-ease); } .wp-block-navigation .wp-block-navigation-item__content:hover::after, .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after, .wp-block-navigation [aria-current=page]::after { transform: scaleX(1); } .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: var(--kit-size-target); min-height: var(--kit-size-target); display: inline-flex; align-items: center; justify-content: center; } .wp-block-navigation__responsive-container.is-menu-open { animation: kit-fade var(--kit-motion-base) var(--kit-motion-ease); } .kit-visits:empty { display: none; } /* Sticky help bar (phones): hides on scroll down, returns on scroll up */ .kit-sticky-help { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--kit-z-sticky); display: flex; gap: var(--kit-space-2); padding: var(--kit-space-2) var(--kit-space-3) calc(var(--kit-space-2) + env(safe-area-inset-bottom)); background: var(--kit-color-ink); box-shadow: 0 -2px 0 var(--kit-color-accent); transition: transform var(--kit-motion-base) var(--kit-motion-ease); } .kit-sticky-help.is-hidden { transform: translateY(110%); } .kit-sticky-help a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--kit-size-target); border-radius: var(--kit-radius-control); font-weight: var(--kit-weight-strong); text-decoration: none; } .kit-sh-primary { background: var(--kit-color-accent); color: var(--kit-color-on-accent) !important; } .kit-sh-secondary { border: var(--kit-border-width) solid color-mix(in srgb, var(--neutral-0) 60%, transparent); color: var(--kit-color-on-ink) !important; } @media (min-width: 768px) { .kit-sticky-help { display: none !important; } } @media (max-width: 767px) { body:has(.kit-sticky-help) { padding-bottom: 64px; } } /* room for the sticky bar only when the page has one (else a blank strip under the footer) */ /* Header: grouped navigation + Find help button */ .kit-header-right { gap: var(--kit-space-5) !important; align-items: center; } .kit-site-header .wp-block-navigation__submenu-container { background: var(--kit-color-raised) !important; color: var(--kit-color-ink) !important; border: var(--kit-border-width) solid var(--kit-color-line) !important; border-radius: var(--kit-radius-card); box-shadow: var(--kit-elevation-2); padding: var(--kit-space-2) !important; min-width: 15rem !important; } .kit-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--kit-color-ink) !important; padding: var(--kit-space-2) var(--kit-space-3) !important; border-radius: var(--kit-radius-control); font-size: var(--kit-type-sm); } .kit-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--kit-color-canvas); } .kit-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; } @media (max-width: 767px) { .kit-header-cta:not(.kit-header-emergency) { display: none; } } /* Header utility: Search and Emergency, always visible */ .kit-header-utility { display: flex; align-items: center; gap: var(--kit-space-3); } .kit-header-search { display: inline-flex; align-items: center; gap: var(--kit-space-1); min-height: var(--kit-size-target); min-width: var(--kit-size-target); justify-content: center; color: var(--kit-color-on-ink); text-decoration: none; font-size: var(--kit-type-sm); } .kit-header-search:hover { text-decoration: underline; text-underline-offset: var(--kit-underline-offset); } .kit-header-search:focus-visible ,.kit-header-emergency:focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset); } @media (max-width: 767px) { .kit-header-search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } /* Secondary menu item ("For organisations"): set apart from the primary items */ .kit-menu-secondary > .wp-block-navigation-item__content { opacity: .8; } @media (min-width: 768px) { .kit-menu-secondary { margin-inline-start: var(--kit-space-3); padding-inline-start: var(--kit-space-4); border-inline-start: var(--kit-border-width) solid color-mix(in srgb, var(--neutral-0) 25%, transparent); } } /* Footer categories: two compact columns */ /* Carousel (card rows on small screens) — controls added by aw.js */ @media (max-width: 767px) { .kit-cards .wp-block-post-template { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--kit-space-4) !important; margin-inline: calc(-1 * var(--kit-space-gutter)); padding: 0 var(--kit-space-gutter) var(--kit-space-3); scrollbar-width: none; overscroll-behavior-x: contain; } .kit-cards .wp-block-post-template::-webkit-scrollbar { display: none; } .kit-cards .wp-block-post-template > li { flex: 0 0 var(--kit-carousel-item); scroll-snap-align: start; grid-column: auto !important; grid-row: auto !important; } .kit-cards .kit-card-media { aspect-ratio: var(--kit-card-media-ratio); } } .kit-carousel-dots { display: flex; justify-content: center; gap: var(--kit-space-2); margin-top: var(--kit-space-2); } .kit-carousel-dots button { width: var(--kit-size-target); height: var(--kit-size-target); padding: 0; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .kit-carousel-dots button::before { content: ""; width: 8px; height: 8px; border-radius: var(--kit-radius-pill); background: var(--kit-color-line); transition: width var(--kit-motion-base) var(--kit-motion-ease), background-color var(--kit-motion-base) var(--kit-motion-ease); } .kit-carousel-dots button[aria-current=true]::before { width: 22px; background: var(--kit-color-ink); } @media (min-width: 768px) { .kit-carousel-dots { display: none; } } .kit-more { font-weight: var(--kit-weight-medium); margin-top: var(--kit-space-6); color: var(--kit-color-muted); } .kit-more a { color: var(--kit-color-ink); font-weight: var(--kit-weight-strong); } /* Table */ .kit-table table { border-collapse: collapse; width: 100%; } .kit-table th ,.kit-table td { text-align: left; padding: var(--kit-space-3); border-bottom: var(--kit-border-width) solid var(--kit-color-line); vertical-align: top; } .kit-table th { border-bottom: var(--kit-border-width) solid var(--kit-color-line); } .kit-table tbody tr:nth-child(even) { background: var(--kit-color-surface-soft); } .kit-table tbody tr:hover { background: var(--kit-color-surface); } /* Share bar */ .kit-share-wrap { max-width: var(--kit-width-content); padding: 0 0 var(--kit-space-7); } /* on the page frame like the content above (see One page grid) */ .kit-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-2); border-top: var(--kit-border-width) solid var(--kit-color-line); padding-top: var(--kit-space-5); } .kit-share-label { font-weight: var(--kit-weight-regular); margin-right: var(--kit-space-2); } @media (max-width: 767px) { .kit-share-label { flex-basis: 100%; margin: 0 0 var(--kit-space-1); } } .kit-share a ,.kit-share button { display: inline-flex; align-items: center; min-height: var(--kit-size-target); padding: 0 var(--kit-space-4); border-radius: var(--kit-radius-pill); font: inherit; font-weight: var(--kit-weight-strong); text-decoration: none; cursor: pointer; border: var(--kit-border-width) solid var(--kit-color-line); background: var(--kit-color-raised); color: var(--kit-color-ink); transition: background-color var(--kit-motion-fast) var(--kit-motion-ease), color var(--kit-motion-fast) var(--kit-motion-ease), transform var(--kit-motion-fast) var(--kit-motion-ease); } .kit-share a::after { content: none !important; } .kit-share :is(a, button) { gap: var(--kit-space-2); font-weight: var(--kit-weight-medium); } .kit-share .kit-ico { --kit-ico-size: 1.125rem; } .kit-share .kit-share-icon { width: var(--kit-size-target); padding: 0; justify-content: center; } /* icon-only button */ .kit-share .kit-share-whatsapp { background: var(--kit-color-whatsapp); border-color: var(--kit-color-whatsapp); color: var(--kit-color-on-ink); } .kit-share a:hover ,.kit-share button:hover { background: var(--kit-color-ink); color: var(--kit-color-on-ink); } .kit-share a:active ,.kit-share button:active { transform: scale(0.97); } /* Ads */ .kit-ad { margin: var(--kit-space-7) auto; max-width: var(--kit-width-content); text-align: center; border-block: var(--kit-border-width) solid var(--kit-color-line); padding: var(--kit-space-3) 0; } .kit-ad-label { font-size: var(--kit-type-xs); color: var(--kit-color-muted); margin: 0 0 var(--kit-space-2); max-width: none; } .kit-ad-item { grid-column: 1 / -1; } /* Fixed space per ad size, kept from the first paint so nothing below jumps (phone 320×100, from 768px 728×90). Ads are never clipped (no max-height). The box gives its space back only when the network says no ad will come. */ .kit-ad-unit { min-height: 100px; display: flex; align-items: center; justify-content: center; } .kit-ad-unit > ins { flex: 1 1 100%; min-width: 0; } /* a flex item would shrink to 0 wide, and AdSense then has no width to size the ad for */ /* While the network decides, a slot is 0 tall (it keeps its width, which is all the network measures): no empty box that later collapses and moves the page. It takes its height when filled. */ html:not(.kits-preview) body:not(.kits-preview) .kit-ad ins.adsbygoogle:not([data-ad-status="filled"]) { height: 0 !important; min-height: 0 !important; overflow: hidden; } @media (min-width: 768px) { .kit-ad-unit { min-height: 90px; } } /* Every ad slot shows as one light tone, filled or not, so its place is visible (owner, 12 Oct 2026). */ .kit-ad-unit { background: color-mix(in srgb, var(--kit-color-ink) 9%, var(--kit-color-bg)); border-radius: var(--kit-radius-card, 12px); } /* Preview only (kits-core preview.php): an empty slot, an AdSense unit reporting "unfilled", and preview-only items take no space unless the page previews (html.kits-preview from the preview script, body.kits-preview for administrators). The page HTML is the same for everyone, so the public cache never varies by visitor. */ html:not(.kits-preview) body:not(.kits-preview) :is(.kit-ad--empty, .kit-ad-item--empty, .kits-preview-only) { display: none !important; } html:not(.kits-preview) body:not(.kits-preview) :is(.kit-ad, .kit-ad-item):has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important; } /* Until the network fills it (e.g. while the account awaits approval) a slot shows nothing: no grey box, "Ad" label or rules. It stays in the layout at full width because the network measures that width before it serves. */ html:not(.kits-preview) body:not(.kits-preview) .kit-ad:not([data-kit-lazy="wait"], [data-kit-lazy="pending"]):has(ins.adsbygoogle):not(:has(ins.adsbygoogle[data-ad-status="filled"])) { border: 0; padding: 0; margin-block: 0; } html:not(.kits-preview) body:not(.kits-preview) .kit-ad:not([data-kit-lazy="wait"], [data-kit-lazy="pending"]):has(ins.adsbygoogle):not(:has(ins.adsbygoogle[data-ad-status="filled"])) :is(.kit-ad-label) { display: none; } html:not(.kits-preview) body:not(.kits-preview) .kit-ad:not([data-kit-lazy="wait"], [data-kit-lazy="pending"]):has(ins.adsbygoogle):not(:has(ins.adsbygoogle[data-ad-status="filled"])) .kit-ad-unit { min-height: 0; background: none; } html:not(.kits-preview) body:not(.kits-preview) .kit-ad-item:not(:has(> .kit-ad:is([data-kit-lazy="wait"], [data-kit-lazy="pending"]))):has(ins.adsbygoogle):not(:has(ins.adsbygoogle[data-ad-status="filled"])) > .kit-ad { border: 0; padding: 0; background: none; } /* A list slot the network has not filled yet does not hold a grid cell (it left a card-sized hole beside the cards): it moves to the end of the list at full width and no height, where the network can still measure it. Once filled it takes its own cell again. */ html:not(.kits-preview) body:not(.kits-preview) .kit-ad-item:not(:has(> .kit-ad:is([data-kit-lazy="wait"], [data-kit-lazy="pending"]))):has(ins.adsbygoogle):not(:has(ins.adsbygoogle[data-ad-status="filled"])) { order: 99; grid-column: 1 / -1 !important; grid-row: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; min-height: 0; } html:not(.kits-preview) body:not(.kits-preview) .kit-ad ins.adsbygoogle[data-adsbygoogle-status="done"]:not([data-ad-status]) { max-height: 0 !important; overflow: hidden !important; } /* the request has gone with its size; until AdSense answers (filled or unfilled) the unit takes no height, so no blank box */ /* Lazy ads (kits-core ads.php, owner 18 Oct 2026): a slot keeps its space (phone 320×100, in a list 300×250, from 768px 728×90) and its "Ad" label while it waits to come near the screen and while the network answers; it gives the space back only when the network says unfilled or does not answer in 6 s (data-kit-lazy="done" returns the rules above). A slot that would start inside the first screen of a phone is never loaded and never shown (data-kit-lazy="fold"). */ .kit-ad[data-kit-lazy="fold"], .kit-ad-item:has(> .kit-ad[data-kit-lazy="fold"]) { display: none !important; } .kit-ad-unit[data-slot-label]::after { content: attr(data-slot-label); font-size: var(--kit-type-xs); color: var(--kit-color-muted); } /* Tables (core/table): header row, cell padding, line borders; scroll sideways on small screens instead of squeezing. "Stripes" (core block style) shades every other row. Tokens only. */ .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: var(--kit-space-5); } .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--kit-type-sm); line-height: var(--kit-leading-body); } @media (max-width: 767px) { .wp-block-table table { min-width: var(--kit-table-min); } } .wp-block-table table :is(th, td) { padding: var(--kit-space-3) var(--kit-space-4); border: 0; border-bottom: var(--kit-border-width) solid var(--kit-color-line); text-align: start; vertical-align: top; } .wp-block-table table thead { border-bottom: 0; } .wp-block-table table thead th { background: var(--kit-color-surface); color: var(--kit-color-ink); font-weight: var(--kit-weight-strong); border-bottom-color: var(--kit-color-ink); } .wp-block-table table tfoot { border-top: 0; } .wp-block-table.is-style-stripes { border-bottom: 0; } .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--kit-color-surface); } .wp-block-table figcaption, .wp-element-caption { font-size: var(--kit-type-xs); color: var(--kit-color-muted); margin-top: var(--kit-space-2); } /* Rank Math FAQ (keeps its FAQ schema): drawn like the Details FAQ below; kit.js makes each answer open and close. */ .rank-math-block { margin-block: var(--kit-space-6); } .rank-math-list-item { border-bottom: var(--kit-border-width) solid var(--kit-color-line); } .rank-math-question { margin: 0 !important; font-size: var(--kit-type-body); line-height: var(--kit-leading-heading); } .rank-math-question > button { all: unset; box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--kit-space-4); min-height: var(--kit-size-target); padding-block: var(--kit-space-3); cursor: pointer; font-weight: var(--kit-weight-strong); } .rank-math-question > button::after { content: "+"; font-size: 1.4em; line-height: 1; transition: transform var(--kit-motion-base) var(--kit-motion-ease); } .rank-math-question > button[aria-expanded="true"]::after { transform: rotate(45deg); } .rank-math-question > button:focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset); } .rank-math-answer { padding-bottom: var(--kit-space-4); } .rank-math-answer > :first-child { margin-top: 0; } .rank-math-answer[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .rank-math-question > button::after { transition: none; } } /* Note (block style "Note" on core/paragraph): a small, muted line set apart above it, e.g. "general information, not advice". */ .is-style-kits-note { margin-top: var(--kit-space-6); padding-top: var(--kit-space-4); border-top: var(--kit-border-width) solid var(--kit-color-line); font-size: var(--kit-type-sm); color: var(--kit-color-muted); } /* Sources list (block style "Sources" on core/list): small, muted, one source per line, links in ink. */ .wp-block-list.is-style-kits-sources { font-size: var(--kit-type-sm); color: var(--kit-color-muted); padding-inline-start: var(--kit-space-5); } .wp-block-list.is-style-kits-sources li + li { margin-top: var(--kit-space-2); } .wp-block-list.is-style-kits-sources a { color: var(--kit-color-ink); } /* Details (FAQ) */ .wp-block-details { border-bottom: var(--kit-border-width) solid var(--kit-color-line); } .wp-block-details summary { padding-block: var(--kit-space-3); min-height: var(--kit-size-target); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--kit-space-4); font-weight: var(--kit-weight-strong); } .wp-block-details summary::-webkit-details-marker { display: none; } .wp-block-details summary::after { content: "+"; font-size: 1.4em; line-height: 1; transition: transform var(--kit-motion-base) var(--kit-motion-ease); } .wp-block-details[open] summary::after { transform: rotate(45deg); } /* Pagination */ .wp-block-query-pagination a, .wp-block-query-pagination .page-numbers, .wp-block-post-navigation-link a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--kit-size-target); min-width: var(--kit-size-target); padding: 0 var(--kit-space-3); border-radius: var(--kit-radius-control); text-decoration: none; } .wp-block-query-pagination .page-numbers.current { background: var(--kit-color-ink); color: var(--kit-color-on-ink); } .wp-block-query-pagination a:hover { background: var(--kit-color-surface); } /* Search */ .wp-block-search__input { min-height: var(--kit-size-control); border: var(--kit-border-control) solid var(--kit-color-ink) !important; border-radius: var(--kit-radius-control); padding: 0 var(--kit-space-3); } /* Empty state */ .wp-block-query-no-results { padding: var(--kit-space-7) var(--kit-space-5); text-align: center; background: var(--kit-color-surface-soft); border-radius: var(--kit-radius-card); } /* 7. Motion ------------------------------------------------------------------ */ @keyframes kit-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes kit-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes kit-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } .wp-block-post-template > li:hover { transform: none; } } /* 8. Print ------------------------------------------------------------------- */ @media print { .kit-announce ,.kit-site-header ,.kit-site-footer ,.kit-print ,.kit-share-wrap ,.kit-sticky-help ,.kit-ad ,.wp-block-post-navigation-link ,.wp-block-post-terms ,.wp-block-post-date ,.wp-block-buttons ,.skip-link { display: none !important; } body { background: #fff; color: #000; padding: 0; } .wp-block-post-title { font-size: 16pt; } pre, .wp-block-preformatted { white-space: pre-wrap; font-family: Georgia, serif; font-size: 12pt; line-height: 1.5; border: 0; padding: 0; } a[href]::after { content: none !important; } @page { margin: 2cm; } } /* Header nav: one line at tablet widths */ @media (min-width: 768px) and (max-width: 1199px) { .kit-site-header .wp-block-navigation__container { gap: var(--kit-space-4) !important; flex-wrap: nowrap; } .kit-site-header .wp-block-navigation-item__content { font-size: var(--kit-type-sm); white-space: nowrap; } } /* Photo credit under a lead image (required by CC BY / BY-SA) */ .wp-block-post-featured-image:has(.kit-credit) { aspect-ratio: auto !important; overflow: visible; } .kit-credit { margin-top: var(--kit-space-2); font-size: var(--kit-type-xs); color: var(--kit-color-muted); } .kit-credit a { color: inherit; } /* Lead image on an item's own page: wide, capped height, rounded, elevated */ body.single main .wp-block-post-featured-image:not(.kit-logo) img ,body.single main .wp-block-post-featured-image:not(.kit-logo):not(.kit-logo) img { width: 100%; max-height: min(56vh, 480px); object-fit: cover; border-radius: var(--kit-radius-hero); box-shadow: var(--kit-elevation-2); } .kit-pager { display: flex; flex-wrap: wrap; gap: var(--kit-space-2); margin-top: var(--kit-space-7); } .kit-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--kit-size-target); min-height: var(--kit-size-target); padding: 0 var(--kit-space-3); border: var(--kit-border-width) solid var(--kit-color-line); border-radius: var(--kit-radius-control); background: var(--kit-color-raised); color: var(--kit-color-ink); text-decoration: none; font-weight: var(--kit-weight-medium); } .kit-pager .page-numbers.current { background: var(--kit-color-ink); color: var(--kit-color-on-ink); border-color: var(--kit-color-ink); } .kit-empty { padding: var(--kit-space-7); text-align: center; border: var(--kit-border-width) dashed var(--kit-color-line); border-radius: var(--kit-radius-card); color: var(--kit-color-muted); } .kit-empty p { margin-inline: auto; } /* TRUST panel on item pages */ .kit-trust { margin: var(--kit-space-4) 0 var(--kit-space-6); padding: var(--kit-space-4); border: var(--kit-border-width) solid var(--kit-color-line); border-radius: var(--kit-radius-card); background: var(--kit-color-raised); font-size: var(--kit-type-sm); line-height: 1.5; } .kit-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kit-space-3); } .kit-trust li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: var(--kit-space-3); align-items: start; max-width: none; margin: 0; } .kit-trust li > .kit-ico { --kit-ico-size: 1.25rem; margin-top: 0.05em; color: var(--kit-color-muted); } .kit-trust li > span:only-child { grid-column: 2; } /* a row without an icon (e.g. the dates) stays in the text column */ .kit-trust.is-verified li:first-child > .kit-ico { color: var(--kit-color-success); } .kit-trust.is-unverified li:first-child > .kit-ico { color: var(--kit-color-warning); } .kit-trust a { color: var(--kit-color-link); font-weight: var(--kit-weight-regular); } @media (prefers-reduced-motion: reduce) { .kit-task ,.kit-res-card ,.kit-story-media img ,.kit-case > .kit-ico { transition: none; } .kit-task:hover ,.kit-res-card:hover { transform: none; } } /* Editorial building blocks: section head, ghost button, "three big actions", lead + list, editorial queries */ .kit-ed-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--kit-space-4); margin-bottom: var(--kit-space-6); } .kit-ed-head h2 ,.kit-ed-act-copy h2 ,.kit-ed-find-head h2 ,.kit-ed-story-head h2 { font-size: var(--kit-type-h2); line-height: 1.15; letter-spacing: var(--kit-tracking-heading); margin: 0; } .kit-ed-desc { font-size: var(--kit-type-lead); color: var(--kit-color-muted); margin: var(--kit-space-3) 0 0; max-width: 52ch; } .kit-ed-more { display: inline-flex; align-items: center; gap: var(--kit-space-2); min-height: var(--kit-size-target); font-weight: var(--kit-weight-strong); font-size: var(--kit-type-sm); color: var(--kit-color-ink); text-decoration: none; border-bottom: var(--kit-border-width) solid currentColor; white-space: nowrap; } .kit-ed-more .kit-ico { transition: transform var(--kit-motion-base) var(--kit-motion-ease); } .kit-ed-more:hover .kit-ico { transform: translateX(3px); } /* Buttons used across the editorial page */ /* 02 Need help now: three enormous actions on ink */ .kit-ed-help { background: var(--kit-color-ink); color: var(--kit-color-on-ink); } .kit-ed-help-title { color: var(--kit-color-on-ink) !important; font-size: var(--kit-type-h2); margin: 0 0 var(--kit-space-6); } .kit-ed-acts { display: grid; gap: var(--kit-space-3); grid-template-columns: minmax(0, 1fr); } @media (min-width: 1200px) { .kit-ed-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .kit-ed-act { position: relative; display: flex; flex-direction: column; gap: var(--kit-space-3); padding: var(--kit-space-5); border-radius: var(--kit-radius-card); background: color-mix(in srgb, var(--neutral-8) 60%, var(--neutral-9)); border: var(--kit-border-width) solid color-mix(in srgb, var(--neutral-0) 12%, transparent); color: var(--kit-color-on-ink); text-decoration: none; transition: background-color var(--kit-motion-base) var(--kit-motion-ease), transform var(--kit-motion-base) var(--kit-motion-ease); } .kit-ed-act:first-child { background: var(--kit-color-accent); border-color: var(--kit-color-accent); color: var(--kit-color-on-accent); } .kit-ed-act > .kit-ico:first-child { --kit-ico-size: 1.75rem; } .kit-ed-act strong { font-size: var(--kit-type-h3); font-weight: var(--kit-weight-strong); letter-spacing: var(--kit-tracking-heading); line-height: 1.2; margin-top: var(--kit-space-2); } .kit-ed-act span:not(.kit-ico) ,.kit-ed-act span:not(.kit-ico):not(.kit-ico) { font-size: var(--kit-type-base); opacity: .85; max-width: 32ch; } .kit-ed-act > .kit-ico--arrow-right { position: absolute; top: var(--kit-space-5); right: var(--kit-space-5); --kit-ico-size: 1.25rem; transition: transform var(--kit-motion-base) var(--kit-motion-ease); } .kit-ed-act:not(:first-child):hover { background: var(--neutral-8); } .kit-ed-act:hover > .kit-ico--arrow-right { transform: translateX(3px); } .kit-ed-act:focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset-lg); } .kit-ed-help-note { margin: var(--kit-space-5) 0 0; color: color-mix(in srgb, var(--neutral-0) 75%, transparent); font-size: var(--kit-type-sm); } .kit-ed-help-note a { color: var(--kit-color-on-ink); } /* Editorial queries: undo the generic card chrome */ :is(.kit-ed-lead, .kit-ed-list, .kit-ed-rows, .kit-ed-titles) .wp-block-post-template > li { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0; padding: 0 !important; overflow: visible; transform: none !important; } :is(.kit-ed-lead, .kit-ed-list, .kit-ed-rows, .kit-ed-titles) .wp-block-post-template > li::after { display: none; } :is(.kit-ed-lead, .kit-ed-list, .kit-ed-rows, .kit-ed-titles) .wp-block-post-template > li > * { margin-inline: 0 !important; } :is(.kit-ed-lead, .kit-ed-list, .kit-ed-rows, .kit-ed-titles) .wp-block-post-template { list-style: none; margin: 0; padding: 0; } :is(.kit-ed-lead, .kit-ed-list, .kit-ed-rows, .kit-ed-titles) .wp-block-post-title a:hover { text-decoration: underline; text-decoration-thickness: var(--kit-underline-thickness-strong); text-underline-offset: var(--kit-underline-offset); } /* 03 What's happening: one lead + three secondary */ .kit-ed-news-grid { display: grid; gap: var(--kit-space-6); } @media (min-width: 1200px) { .kit-ed-news-grid { grid-template-columns: 1.6fr 1fr; gap: var(--kit-space-7); } } .kit-ed-lead .wp-block-post-featured-image { border-radius: var(--kit-radius-media) !important; margin: 0 0 var(--kit-space-4) !important; aspect-ratio: 3/2; } .kit-ed-lead .wp-block-post-title { font-size: var(--kit-type-h3) !important; line-height: 1.2 !important; letter-spacing: var(--kit-tracking-heading) !important; margin: var(--kit-space-3) 0 !important; } .kit-ed-lead .wp-block-post-excerpt { font-size: var(--kit-type-lead) !important; } .kit-ed-lead .wp-block-post-excerpt__excerpt { -webkit-line-clamp: 4 !important; } .kit-ed-list .wp-block-post-template > li { display: grid !important; grid-template-columns: 1fr 120px; grid-template-areas: "terms img" "title img" "date img"; column-gap: var(--kit-space-4); align-content: start; padding: var(--kit-space-4) 0 !important; border-top: var(--kit-border-width) solid var(--kit-color-ink) !important; } .kit-ed-list .wp-block-post-template > li:first-child { border-top: 0 !important; padding-top: 0 !important; } .kit-ed-list .wp-block-post-featured-image { grid-area: img; margin: 0 !important; border-radius: var(--kit-radius-media) !important; aspect-ratio: 4/3; } .kit-ed-list .wp-block-post-terms { grid-area: terms; } .kit-ed-list .wp-block-post-title { grid-area: title; font-size: var(--kit-type-h4) !important; line-height: 1.3 !important; margin: var(--kit-space-2) 0 !important; } .kit-ed-list .wp-block-post-date { grid-area: date; padding-right: 0 !important; min-height: 0 !important; } /* Breadcrumbs: a quiet trail above the page title. */ .kit-crumbs { margin: 0 0 var(--kit-space-2, .5rem); font-size: var(--kit-type-sm, .875rem); color: var(--kit-color-muted); } .kit-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 .4em; margin: 0; padding: 0; list-style: none; } .kit-crumbs li { display: inline-flex; align-items: center; min-width: 0; } .kit-crumbs li + li::before { content: "›"; margin-right: .4em; color: var(--kit-color-muted); } .kit-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: .15em; text-decoration-color: var(--kit-color-line); } .kit-crumbs a:hover { color: var(--kit-color-ink); text-decoration-color: currentColor; } .kit-crumbs a:focus-visible { outline: var(--kit-focus-outline) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset); border-radius: var(--kit-radius-hair); } .kit-crumbs [aria-current] { color: var(--kit-color-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; } /* Phones: wordmark, search, Emergency and the menu button all fit on one row */ @media (max-width: 767px) { .kit-header-right { gap: var(--kit-space-1) !important; } .kit-header-right > .wp-block-navigation { order: 2; } .kit-header-utility { gap: var(--kit-space-1); } .kit-site-header .kit-wordmark img { width: 112px; height: auto; } .kit-header-emergency { padding-inline: var(--kit-space-3); } } /* Forms: an empty paragraph left by auto-formatting never takes up space */ .kit-form > p:empty { display: 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; } /* Header search field (opens from the icon) */ .kit-hsearch { display: flex; } .kit-hsearch[hidden] { display: none; } .kit-hsearch input { min-height: var(--kit-size-target); width: min(16rem, 50vw); padding: 0 var(--kit-space-3); border-radius: var(--kit-radius-control); border: var(--kit-border-width) solid color-mix(in srgb, var(--neutral-0) 35%, transparent); background: var(--kit-color-surface); color: var(--kit-color-ink); } .kit-header-utility { position: relative; } /* Footer categories: one row of small tags under the columns */ /* ---------- Phones: header, menu, filters (8 Oct 2026) ---------- */ @media (max-width: 767px) { /* Header button stays on one line */ .kit-header-cta { white-space: nowrap; padding-inline: var(--kit-space-3); font-size: var(--kit-type-xs); } } /* Menu overlay on phones: big, left-aligned rows that are easy to tap */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: stretch !important; padding-top: var(--kit-space-7) !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; width: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; margin: 0 !important; padding: 0 !important; border-bottom: var(--kit-border-width) solid color-mix(in srgb, var(--neutral-0) 12%, transparent); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: flex !important; width: 100%; min-height: var(--kit-thumb-sm); align-items: center; justify-content: flex-start; font-size: var(--kit-type-h, 1.25rem) !important; font-weight: var(--kit-weight-medium); padding-inline: 0 !important; margin: 0 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none !important; } /* While the menu is open the sticky help bar steps aside */ html.has-modal-open .kit-sticky-help { display: none !important; } /* Megaphone icon (Lucide, ISC) */ .kit-ico--megaphone { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2011%2018-5v12L3%2014v-3z%22/%3E%3Cpath%20d%3D%22M11.6%2016.8a3%203%200%201%201-5.8-1.6%22/%3E%3C/svg%3E"); } .kit-header-contact { gap: var(--kit-space-2); } /* The menu's own Contact link is for phones; wider screens have the header button */ @media (min-width: 768px) { .kit-menu-phone-only { display: none !important; } } /* Phones: search, contact and menu are matching round icon buttons */ @media (max-width: 767px) { .kit-header-contact-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .kit-header-search ,.kit-header-contact ,.kit-site-header .wp-block-navigation__responsive-container-open { width: var(--kit-size-target); height: var(--kit-size-target); min-width: var(--kit-size-target); min-height: var(--kit-size-target); padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: var(--kit-border-width) solid color-mix(in srgb, var(--neutral-0) 30%, transparent); background: transparent; color: var(--kit-color-on-ink) !important; } .kit-header-contact { background: var(--kit-color-accent); border-color: var(--kit-color-accent); color: var(--kit-color-on-accent) !important; } .kit-header-search .kit-ico ,.kit-header-contact .kit-ico { --kit-ico-size: var(--kit-icon-md); } .kit-header-right { gap: var(--kit-space-2) !important; } .kit-header-utility { gap: var(--kit-space-2); } } /* Navigation: Kits shows the full menu from lg (1200px) and the menu button below it. */ @media (max-width: 1199px) { .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } /* Field icons (S5.3 dictionary): building, map pin, world, WhatsApp (Tabler outline, 24px, stroke 2) */ .kit-ico--building { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021l18%200%22%2F%3E%3Cpath%20d%3D%22M9%208l1%200%22%2F%3E%3Cpath%20d%3D%22M9%2012l1%200%22%2F%3E%3Cpath%20d%3D%22M9%2016l1%200%22%2F%3E%3Cpath%20d%3D%22M14%208l1%200%22%2F%3E%3Cpath%20d%3D%22M14%2012l1%200%22%2F%3E%3Cpath%20d%3D%22M14%2016l1%200%22%2F%3E%3Cpath%20d%3D%22M5%2021v-16a2%202%200%200%201%202%20-2h10a2%202%200%200%201%202%202v16%22%2F%3E%3C%2Fsvg%3E"); } .kit-ico--map-pin { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2011a3%203%200%201%200%206%200a3%203%200%200%200%20-6%200%22%2F%3E%3Cpath%20d%3D%22M17.657%2016.657l-4.243%204.243a2%202%200%200%201%20-2.827%200l-4.244%20-4.243a8%208%200%201%201%2011.314%200z%22%2F%3E%3C%2Fsvg%3E"); } .kit-ico--world { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%2018%200a9%209%200%200%200%20-18%200%22%2F%3E%3Cpath%20d%3D%22M3.6%209h16.8%22%2F%3E%3Cpath%20d%3D%22M3.6%2015h16.8%22%2F%3E%3Cpath%20d%3D%22M11.5%203a17%2017%200%200%200%200%2018%22%2F%3E%3Cpath%20d%3D%22M12.5%203a17%2017%200%200%201%200%2018%22%2F%3E%3C%2Fsvg%3E"); } .kit-ico--brand-whatsapp { --i: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021l1.65%20-3.8a9%209%200%201%201%203.4%202.9l-5.05%20.9%22%2F%3E%3Cpath%20d%3D%22M9%2010a.5%20.5%200%200%200%201%200v-1a.5%20.5%200%200%200%20-1%200v1a5%205%200%200%200%205%205h1a.5%20.5%200%200%200%200%20-1h-1a.5%20.5%200%200%200%200%201%22%2F%3E%3C%2Fsvg%3E"); } /* External links: a small arrow after the text (kit.js marks links to other sites; icon and image links are left alone). */ .kit-link-ext::after { content: ""; display: inline-block; width: .875em; height: .875em; margin-left: .25em; vertical-align: -.1em; background-color: currentColor; -webkit-mask: var(--kit-ext-ico) center / contain no-repeat; mask: var(--kit-ext-ico) center / contain no-repeat; --kit-ext-ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10v10%22/%3E%3Cpath%20d%3D%22M7%2017%2017%207%22/%3E%3C/svg%3E"); } /* ---------- Footer (owner, 9 Oct 2026 — final layout) ---------- Row 1: Brand · Explore · Animal Writes · Newsletter (stacked) — four equal columns from 1200, 2×2 from 768, stacked on phones. Row 2: Helplines in one row. Row 3: Categories as plain links, never folded. Row 4: © · policies · Powered by. Phones put Helplines first. Height = content (no screen-height cap; tools/ci/footer_check.py). Own surface and a top rule so the sticky header reads as separate; the same grid line as the header logo (nav container and padding). */ .kit-footer { --kit-footer-bg: color-mix(in srgb, var(--neutral-8) 45%, var(--neutral-9)); --kit-footer-muted: color-mix(in srgb, var(--kit-color-on-ink) 72%, transparent); --kit-footer-rule: color-mix(in srgb, var(--kit-color-on-ink) 14%, transparent); font-size: var(--kit-type-sm); } .kit-site-footer.kit-footer { display: flex; flex-direction: column; background: var(--kit-footer-bg) !important; border-top: var(--kit-border-width) solid color-mix(in srgb, var(--kit-color-on-ink) 22%, transparent); padding: var(--kit-space-7) var(--kit-space-4) var(--kit-space-4) !important; } @media (min-width: 768px) { .kit-site-footer.kit-footer { padding-inline: var(--kit-space-6) !important; } } @media (min-width: 1200px) { .kit-site-footer.kit-footer { padding-inline: 20px !important; } } .kit-site-footer.kit-footer > * { width: 100%; max-width: var(--kit-width-nav) !important; margin-inline: auto !important; margin-block: 0 !important; } /* Row 1 */ .kit-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kit-space-6); padding: 0 0 var(--kit-space-6); } @media (min-width: 768px) { .kit-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .kit-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .kit-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kit-space-3); min-width: 0; } .kit-footer-brand p { margin: 0; color: var(--kit-footer-muted); line-height: 1.55; max-width: 30ch; } .kit-footer-brand .kit-visits { font-size: var(--kit-type-xs); } .kit-footer-mail { display: inline-flex; align-items: center; gap: var(--kit-space-2); min-height: var(--kit-size-target); color: var(--kit-color-on-ink); text-decoration: none; overflow-wrap: anywhere; } .kit-socials { display: flex; gap: var(--kit-space-2); } .kit-social { display: inline-flex; align-items: center; justify-content: center; width: var(--kit-size-target); height: var(--kit-size-target); border-radius: var(--kit-radius-control); border: var(--kit-border-width) solid var(--kit-footer-rule); color: var(--kit-color-on-ink); transition: background-color var(--kit-motion-fast) var(--kit-motion-ease), color var(--kit-motion-fast) var(--kit-motion-ease), border-color var(--kit-motion-fast) var(--kit-motion-ease); } .kit-social:hover { background: var(--kit-color-accent); border-color: var(--kit-color-accent); color: var(--kit-color-on-accent); } .kit-footer-head { display: flex; align-items: center; gap: var(--kit-space-2); margin: 0 0 var(--kit-space-3); font-size: var(--kit-type-xs) !important; font-weight: var(--kit-weight-strong); letter-spacing: 0; line-height: 1.4 !important; color: var(--kit-footer-muted) !important; } .kit-footer-list, .kit-legal-links, .kit-footer-inline, .kit-footer-helplines { list-style: none; padding: 0; margin: 0; } .kit-footer-list li { margin: 0; } .kit-footer-list a { display: flex; align-items: center; min-height: 2.25rem; color: var(--kit-color-on-ink); text-decoration: none; } .kit-footer :is(.kit-footer-list, .kit-footer-inline, .kit-legal-links, .kit-footer-helplines) a:hover, .kit-footer-mail:hover { color: var(--kit-color-accent); text-decoration: underline; text-underline-offset: var(--kit-underline-offset-sm); } /* Newsletter: one stacked column — title, email, name, Subscribe (full width), consent */ .kit-footer-newsletter { display: block; min-width: 0; } .kit-footer-nl-head { margin: 0 0 var(--kit-space-3); font-size: var(--kit-type-xs) !important; font-weight: var(--kit-weight-strong); line-height: 1.4 !important; color: var(--kit-footer-muted) !important; } .kit-footer-newsletter .kit-form { display: flex !important; flex-direction: column; gap: var(--kit-space-3); max-width: none; margin: 0; } .kit-footer-newsletter .kit-captcha { order: 10; } .kit-footer-newsletter .kit-field { margin: 0; } .kit-footer-newsletter .kit-field--checkbox { order: 5; } .kit-footer-newsletter .kit-nl-submit { order: 4; padding: 0 !important; } .kit-footer-newsletter label, .kit-footer-newsletter .kit-optional { color: inherit; } .kit-footer-newsletter .kit-field-message { color: var(--kit-color-accent); } .kit-footer-newsletter .kit-field-error:empty { display: none; } .kit-footer-newsletter .kit-nl-submit .kit-btn { width: 100%; } .kit-footer-newsletter .kit-field--checkbox .kit-checkbox { min-height: 0; font-size: var(--kit-type-xs); } .kit-footer-newsletter .kit-form-done { background: transparent; border-left-color: var(--kit-color-accent); color: inherit; } /* Row 2: Helplines in one row */ .kit-footer-helprow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-2) var(--kit-space-6); padding: var(--kit-space-4) 0; border-top: var(--kit-border-width) solid var(--kit-footer-rule); } .kit-footer-helprow .kit-footer-head { margin: 0; } .kit-footer-helplines { display: flex; flex-wrap: wrap; gap: var(--kit-space-1) var(--kit-space-6); } .kit-footer-helplines a { display: inline-flex; align-items: center; gap: var(--kit-space-2); min-height: var(--kit-size-target); color: var(--kit-footer-muted); text-decoration: none; } .kit-footer-helplines strong { color: var(--kit-color-accent); font-weight: var(--kit-weight-strong); white-space: nowrap; } .kit-footer-helplines .kit-ico { color: var(--kit-color-accent); } @media (max-width: 767px) { .kit-footer-helprow, .kit-footer-helplines { flex-direction: column; align-items: flex-start; } .kit-footer-helprow { border-top: 0; padding-top: 0; order: -1; padding-bottom: var(--kit-space-5); } } /* Row 3: Categories, plain links at every width */ .kit-footer-cats { padding: var(--kit-space-4) 0; border-top: var(--kit-border-width) solid var(--kit-footer-rule); } .kit-footer-inline { display: flex; flex-wrap: wrap; gap: var(--kit-space-1) var(--kit-space-5); } .kit-footer-inline a { display: inline-flex; align-items: center; min-height: 2rem; color: var(--kit-footer-muted); text-decoration: none; font-size: var(--kit-type-xs); } /* Row 4: utility row */ .kit-footer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-1) var(--kit-space-5); padding: var(--kit-space-3) 0 0; border-top: var(--kit-border-width) solid var(--kit-footer-rule); font-size: var(--kit-type-xs); color: var(--kit-footer-muted); } .kit-footer-copy { margin: 0; } .kit-legal-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-1) var(--kit-space-4); } .kit-legal-links a { display: inline-flex; align-items: center; min-height: var(--kit-size-target); color: inherit; text-decoration: none; } .kit-powered { display: inline-flex; align-items: center; gap: var(--kit-space-1); min-height: var(--kit-size-target); color: var(--kit-footer-muted); text-decoration: none; margin-left: auto; } .kit-powered strong { color: var(--kit-color-on-ink); font-weight: var(--kit-weight-medium); } .kit-powered:hover strong { color: var(--kit-color-accent); text-decoration: underline; } @media (max-width: 767px) { .kit-powered { margin-left: 0; } } .kit-footer :is(a, summary):focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset); } /* Full-width bands follow each other with no gap (the page background showed through as a strip). */ :where(.wp-block-post-content, main) > .alignfull + .alignfull { margin-block-start: 0 !important; } html:not(.kits-preview) :where(.wp-block-post-content, main) > .alignfull + :is(.kit-ad--empty, .kit-ad:has(ins.adsbygoogle[data-ad-status="unfilled"])) + .alignfull { margin-block-start: 0 !important; } /* a hidden ad slot between two sections adds no gap */ /* Buttons on dark surfaces (primary takes the brand fill): kit-primitives.css section 10. */ /* Hub head height follows its content (no min-height: it left an empty band under short intros). */ @media (max-width: 767px) { .kit-section-band .kit-section-head { align-content: start; } } /* Hub band: from 768px the band is as tall as its content; no height cap (locked rule: no section height caps). Content sits top left. */ @media (min-width: 768px) { .kit-section-band { box-sizing: border-box; display: flex; flex-direction: column; } .kit-section-band > .kit-section-inner { width: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .kit-section-band .kit-section-head > :first-child { justify-content: flex-start; } .kit-section-band .kit-section-filters { flex: none; } } /* ====================================================================================================== Shell (owner's spec, 8 Oct 2026): the section owns the gutter, the content owns the max-width. small 375: section 48 16 · medium 768: 70 32 · large 1200: 96 48 · content max 1200 · grid 4/8/12, gap 16/24/32 · nav 100 tall, sticky top 0, inner max 1280 · nothing that is not full-bleed is wider than the nav. ====================================================================================================== */ :root { --kit-shell-gutter: var(--kit-space-gutter); --kit-section-y: var(--kit-space-section); } html { scroll-padding-top: calc(var(--kit-header-height) + var(--wp-admin--admin-bar--height, 0px)); } /* Sections: full width, isolated, anchors land below the sticky nav */ main section, main > .alignfull, .wp-block-post-content > .alignfull, main [id]:where(section, .alignfull) { scroll-margin-top: calc(var(--kit-header-height) + var(--wp-admin--admin-bar--height, 0px)); } main > .alignfull, .wp-block-post-content > .alignfull { isolation: isolate; } /* Content: 1200 max, centred, no padding of its own (WordPress constrained layout = the content box) */ :where(.is-layout-constrained) > :where(:not(.alignfull):not(.alignwide)) { max-width: var(--kit-width-wide); } :where(.is-layout-constrained) > .alignwide { max-width: var(--kit-width-wide); } /* Reading text keeps a readable line length inside the 1200 box, left aligned */ .wp-block-post-content > :is(p, ul, ol, blockquote, h2, h3, h4, .wp-block-list, .wp-block-quote) { max-width: min(72ch, var(--kit-width-wide)); margin-left: max(0px, calc((100% - var(--kit-width-wide)) / 2)) !important; margin-right: auto !important; } /* Single items and pages: vertical rhythm = section padding */ main.wp-block-group[style*="padding-top"] { padding-top: var(--kit-section-y) !important; padding-bottom: var(--kit-section-y) !important; } /* Layout grid utility: 4 / 8 / 12 columns, gap 16 / 24 / 32 */ .kit-grid { display: grid; grid-template-columns: repeat(var(--kit-grid-columns), minmax(0, 1fr)); gap: var(--kit-grid-gap); } /* ---------- Header / nav: 100 tall, sticky, inner max 1280; padding 16 · 20 32 · 20 ---------- */ header.wp-block-template-part:has(.kit-site-header) { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--kit-announce-h, 0px)); z-index: var(--kit-layer-nav); } .kit-site-header { min-height: var(--kit-header-height); display: flex; align-items: center; padding: var(--kit-space-4) !important; box-sizing: border-box; cursor: grab; } .kit-site-header :is(a, button, input, label) { cursor: pointer; } .kit-site-header input { cursor: text; } .kit-site-header > * { width: 100%; max-width: var(--kit-width-nav) !important; margin-inline: auto !important; } @media (min-width: 768px) { .kit-site-header { padding: var(--kit-space-3) var(--kit-space-6) !important; } } @media (min-width: 1200px) { .kit-site-header { padding: var(--kit-space-3) 20px !important; } } .kit-site-header :is(a, .wp-block-navigation-item__content) { transition: color var(--kit-duration-spring) var(--kit-ease-spring), background-color var(--kit-duration-spring) var(--kit-ease-spring); } /* ---------- Header search: the icon opens a field across the whole header row (every width) ---------- */ .kit-hsearch { align-items: center; gap: var(--kit-space-2); } .kit-hsearch input { flex: 1 1 auto; width: 100% !important; min-height: var(--kit-size-control); font-size: var(--kit-type-base); background: var(--kit-color-raised); color: var(--kit-color-ink); border: 0; } .kit-hsearch-close { display: inline-flex; align-items: center; justify-content: center; width: var(--kit-size-target); height: var(--kit-size-target); border: var(--kit-border-width) solid color-mix(in srgb, var(--neutral-0) 30%, transparent); border-radius: 999px; background: transparent; color: var(--kit-color-on-ink); } .kit-site-header.is-searching .kit-header-right { flex: 1 1 auto; justify-content: flex-end; } .kit-site-header.is-searching .kit-header-right > .wp-block-navigation, .kit-site-header.is-searching .kit-header-search, .kit-site-header.is-searching .kit-header-contact { display: none !important; } .kit-site-header.is-searching .kit-header-utility { flex: 1 1 auto; } .kit-site-header.is-searching .kit-hsearch { flex: 1 1 auto; animation: kit-search-in var(--kit-duration-spring) var(--kit-ease-spring); } @media (max-width: 767px) { .kit-site-header.is-searching .kit-wordmark { display: none; } } @keyframes kit-search-in { from { opacity: 0; transform: scaleX(.96); transform-origin: right; } to { opacity: 1; transform: none; } } /* ---------- Mobile menu: full screen, scrolls inside, links top, contact + legal pinned bottom ---------- */ .wp-block-navigation__responsive-container.is-menu-open { height: 100svh; height: 100dvh; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--kit-header-height) + env(safe-area-inset-top)) var(--kit-space-gutter) calc(var(--kit-space-5) + env(safe-area-inset-bottom)) !important; animation: kit-menu-in var(--kit-duration-spring) var(--kit-ease-spring); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0 !important; min-height: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex: 1 1 auto; } .wp-block-navigation__responsive-container.is-menu-open :not(.kit-menu-bottom) + .kit-menu-bottom { margin-top: auto !important; } .wp-block-navigation__responsive-container.is-menu-open .kit-menu-legal .wp-block-navigation-item__content { min-height: var(--kit-size-target); font-size: var(--kit-type-sm) !important; opacity: .8; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { animation: kit-menu-link-in var(--kit-duration-spring) var(--kit-ease-spring) both; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 40ms; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 80ms; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 120ms; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 160ms; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 200ms; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+7) { animation-delay: 240ms; } .wp-block-navigation__responsive-container-close { position: fixed; top: var(--kit-toggle-top, 28px); left: var(--kit-toggle-left, auto); right: auto; transition: transform var(--kit-duration-spring) var(--kit-ease-spring); } .wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { transition: transform var(--kit-duration-spring) var(--kit-ease-spring); } .wp-block-navigation__responsive-container-close svg { transform: rotate(90deg); } @media (min-width: 768px) { .kit-menu-legal { display: none !important; } } @keyframes kit-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes kit-menu-link-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } html.kit-scroll-locked body { position: fixed; left: 0; right: 0; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .wp-block-navigation__responsive-container.is-menu-open, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item, .kit-site-header.is-searching .kit-hsearch { animation: none !important; } .kit-site-header :is(a, .wp-block-navigation-item__content), .wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-close svg { transition: none; } } /* Breadcrumbs: Home as an icon; long trails fold the middle into "…" */ .kit-crumbs-home a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none !important; min-width: var(--kit-size-check); min-height: var(--kit-size-check); margin: calc((1rem - var(--kit-size-check)) / 2); } /* 24px hit area around the 16px icon; the negative margin keeps the icon where it was */ .kit-crumbs-home .kit-ico { --kit-ico-size: 1rem; } .kit-crumbs-more { color: var(--kit-color-muted); } /* Band head spans the content box (it is a flex child; auto margins would shrink and centre it) */ .kit-section-band .kit-section-head { width: 100%; margin-inline: 0; grid-template-columns: minmax(0, 1fr) !important; } /* …but a head with pictures keeps text beside them from md up; one column would give the title no height */ @media (min-width: 768px) { .kit-section-band .kit-section-head:has(.kit-section-visual) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important; } } /* ====================================================================================================== Components (owner, 8 Oct 2026) ====================================================================================================== */ :root { --kit-ico-calendar: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M16%202v4%22/%3E%3Cpath%20d%3D%22M8%202v4%22/%3E%3Cpath%20d%3D%22M3%2010h18%22/%3E%3C/svg%3E"); --kit-ico-user: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22/%3E%3C/svg%3E"); --kit-ico-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpath%20d%3D%22M12%206v6l4%202%22/%3E%3C/svg%3E"); --kit-ico-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2011a3%203%200%201%200%206%200a3%203%200%200%200%20-6%200%22%2F%3E%3Cpath%20d%3D%22M17.657%2016.657l-4.243%204.243a2%202%200%200%201%20-2.827%200l-4.244%20-4.243a8%208%200%201%201%2011.314%200z%22%2F%3E%3C%2Fsvg%3E"); --kit-ico-phone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72%2012.84%2012.84%200%200%200%20.7%202.81%202%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45%2012.84%2012.84%200%200%200%202.81.7A2%202%200%200%201%2022%2016.92z%22/%3E%3C/svg%3E"); --kit-ico-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22/%3E%3C/svg%3E"); --kit-ico-wa: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021l1.65%20-3.8a9%209%200%201%201%203.4%202.9l-5.05%20.9%22%2F%3E%3Cpath%20d%3D%22M9%2010a.5%20.5%200%200%200%201%200v-1a.5%20.5%200%200%200%20-1%200v1a5%205%200%200%200%205%205h1a.5%20.5%200%200%200%200%20-1h-1a.5%20.5%200%200%200%200%201%22%2F%3E%3C%2Fsvg%3E"); --kit-ico-link: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22/%3E%3Cpath%20d%3D%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22/%3E%3C/svg%3E"); --kit-ico-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22/%3E%3Cpath%20d%3D%22m21%2021-4.3-4.3%22/%3E%3C/svg%3E"); --kit-ico-send: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.536%2021.686a.5.5%200%200%200%20.937-.024l6.5-19a.496.496%200%200%200-.635-.635l-19%206.5a.5.5%200%200%200-.024.937l7.93%203.18a2%202%200%200%201%201.112%201.11z%22/%3E%3Cpath%20d%3D%22m21.854%202.147-10.94%2010.939%22/%3E%3C/svg%3E"); --kit-ico-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22/%3E%3C/svg%3E"); --kit-ico-alert: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22/%3E%3Cpath%20d%3D%22M12%209v4%22/%3E%3Cpath%20d%3D%22M12%2017h.01%22/%3E%3C/svg%3E"); --kit-ico-prev: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%2019-7-7%207-7%22/%3E%3Cpath%20d%3D%22M19%2012H5%22/%3E%3C/svg%3E"); --kit-ico-next: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22/%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22/%3E%3C/svg%3E"); --kit-ico-download: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22/%3E%3Cpath%20d%3D%22m7%2010%205%205%205-5%22/%3E%3Cpath%20d%3D%22M12%2015V3%22/%3E%3C/svg%3E"); --kit-ico-person: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22/%3E%3C/svg%3E"); --kit-ico-arrow-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22/%3E%3Cpath%20d%3D%22m12%205%207%207-7%207%22/%3E%3C/svg%3E"); --kit-ico-arrow-up-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%207h10v10%22/%3E%3Cpath%20d%3D%22M7%2017%2017%207%22/%3E%3C/svg%3E"); --kit-ico-file: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22/%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22/%3E%3C/svg%3E"); --kit-ico-map-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2011a3%203%200%201%200%206%200a3%203%200%200%200%20-6%200%22%2F%3E%3Cpath%20d%3D%22M17.657%2016.657l-4.243%204.243a2%202%200%200%201%20-2.827%200l-4.244%20-4.243a8%208%200%201%201%2011.314%200z%22%2F%3E%3C%2Fsvg%3E"); --kit-ico-megaphone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2011%2018-5v12L3%2014v-3z%22/%3E%3Cpath%20d%3D%22M11.6%2016.8a3%203%200%201%201-5.8-1.6%22/%3E%3C/svg%3E"); } /* Tags are nouns, each kind its own tint; one font, size, weight and height for all; links never underline */ .kit-tag, .kit-chip, .wp-block-post-terms a { display: inline-flex; align-items: center; gap: var(--kit-space-1); min-height: 1.75rem; padding: 0 var(--kit-space-2); border: 0; border-radius: var(--radius-sm); font-family: inherit; font-size: var(--fluid-label) !important; font-weight: var(--kit-weight-regular) !important; font-style: normal; letter-spacing: 0; line-height: 1.2; white-space: nowrap; text-decoration: none !important; } /* Doubled class: kit-primitives.css (loaded after this file) sets the base .kit-tag fill, which would otherwise win */ .kit-tag.kit-tag--category { background: color-mix(in srgb, var(--kit-color-info) 10%, transparent); color: color-mix(in srgb, var(--kit-color-info) 75%, var(--kit-color-ink)); } .kit-tag.kit-tag--type { background: color-mix(in srgb, var(--kit-color-ink) 7%, transparent); color: var(--kit-color-text); } .kit-tag.kit-tag--issuer { background: color-mix(in srgb, var(--kit-color-success) 11%, transparent); color: var(--kit-color-success); } .kit-tag.kit-tag--closed { background: var(--kit-color-danger-soft); color: var(--kit-color-danger); } .kit-tag.kit-tag--place { background: color-mix(in srgb, #6d4bc4 10%, transparent); color: #5a3aa8; } .kit-tag .kit-ico, .kit-chip .kit-ico { --kit-ico-size: 1em; } /* Logo in a tight tile: publishers, press, sources (AWBI, Google Maps, departments, the organisation) */ /* Meta row and meta item: one look for every date, time, place, author, reading time, source and handle line (owner, 18 Oct 2026). Size, weight, icon size and both gaps are tokens; the colour is the muted text colour of where it sits. A date inside a sentence keeps the sentence's own text. */ .kit-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-meta-row-gap) var(--kit-meta-gap); margin: 0; } .kit-meta-row, .kit-meta-item { font-size: var(--kit-meta-size); font-weight: var(--kit-meta-weight); line-height: 1.3; color: var(--kit-color-muted); } .kit-meta-item { display: inline-flex; align-items: center; gap: var(--kit-meta-icon-gap); min-width: 0; } :is(.kit-meta-row, .kit-meta-item) .kit-ico { --kit-ico-size: var(--kit-meta-icon); vertical-align: middle; } .kit-meta-row.kit-tags { gap: var(--kit-meta-row-gap) var(--kit-meta-gap); } /* a meta row that also holds tags keeps the meta gaps */ /* Meta always with an icon: date, author / posted by, reading time, place */ .wp-block-post-date, .kit-meta { display: inline-flex !important; align-items: center; gap: var(--kit-meta-icon-gap); } .wp-block-post-date::before, .kit-meta::before { content: "" !important; display: inline-block !important; flex: none; width: var(--kit-meta-icon); height: var(--kit-meta-icon); background: currentColor; -webkit-mask: var(--kit-ico-calendar) center / contain no-repeat; mask: var(--kit-ico-calendar) center / contain no-repeat; } /* Previous / Next: one pager everywhere — outlined pill buttons with arrows, numbers as 44px squares */ .wp-block-query-pagination, .kit-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--kit-space-2); } :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next, .wp-block-post-navigation-link a, .kit-pager .prev, .kit-pager .next) { display: inline-flex !important; align-items: center; gap: var(--kit-space-2); min-height: var(--kit-size-target); padding: 0 var(--kit-space-4) !important; border: var(--kit-border-width) solid var(--kit-color-line); border-radius: var(--kit-radius-pill) !important; background: transparent; color: var(--kit-color-ink); font-weight: var(--kit-weight-medium); text-decoration: none !important; } :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next, .wp-block-post-navigation-link a, .kit-pager .prev, .kit-pager .next):hover { background: var(--kit-color-ink); color: var(--kit-color-on-ink); border-color: var(--kit-color-ink); } .wp-block-query-pagination-previous::before, .wp-block-post-navigation-link.post-navigation-link-previous a::before, .kit-pager .prev::before, .wp-block-query-pagination-next::after, .wp-block-post-navigation-link.post-navigation-link-next a::after, .kit-pager .next::after { content: ""; width: 1em; height: 1em; flex: none; background: currentColor; -webkit-mask: var(--kit-ico-prev) center / contain no-repeat; mask: var(--kit-ico-prev) center / contain no-repeat; } .wp-block-query-pagination-next::after, .wp-block-post-navigation-link.post-navigation-link-next a::after, .kit-pager .next::after { -webkit-mask-image: var(--kit-ico-next); mask-image: var(--kit-ico-next); } .wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow { display: none; } .wp-block-query-pagination-numbers .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--kit-size-target); min-height: var(--kit-size-target); border-radius: var(--radius-sm); text-decoration: none; } .wp-block-query-pagination-numbers .page-numbers.current { background: var(--kit-color-ink); color: var(--kit-color-on-ink); } /* Button icons by function: kit-primitives.css section 10 */ .kit-disclosure > summary { gap: var(--kit-space-2); } .kit-disclosure[open] > summary::before { display: none; } /* Surfaces: white, grey and its shades — page grey, sections white or darker grey, cards white on grey */ body { background: var(--kit-surface-page); } .kit-surface-section { background: var(--kit-surface-section); } .kit-surface-alt { background: var(--kit-surface-section-alt); } .kit-overlay { position: relative; isolation: isolate; } .kit-overlay::after { content: ""; position: absolute; inset: 0; background: var(--kit-overlay); z-index: 0; pointer-events: none; } .kit-overlay > * { position: relative; z-index: 1; } /* Share (Scriptless Social Sharing plugin): Kits buttons — outlined pills with the network icon; WhatsApp filled */ .scriptlesssocialsharing { margin: var(--kit-space-6) 0 0; padding-top: var(--kit-space-5); border-top: var(--kit-border-width) solid var(--kit-color-line); max-width: var(--kit-width-wide); } .scriptlesssocialsharing__heading { margin: 0 0 var(--kit-space-3) !important; font-size: var(--kit-type-sm) !important; font-weight: var(--kit-weight-regular) !important; color: var(--kit-color-muted); } .scriptlesssocialsharing__buttons { display: flex !important; flex-wrap: wrap; gap: var(--kit-space-2); width: auto !important; } .scriptlesssocialsharing__buttons a.button { display: inline-flex !important; align-items: center; gap: var(--kit-space-2); min-height: var(--kit-size-target); padding: 0 var(--kit-space-4) !important; margin: 0 !important; border: var(--kit-border-width) solid var(--kit-color-line) !important; border-radius: var(--kit-radius-pill) !important; background: transparent !important; color: var(--kit-color-ink) !important; font-size: var(--kit-type-sm); font-weight: var(--kit-weight-medium); text-decoration: none !important; box-shadow: none !important; transition: background-color var(--kit-duration-spring) var(--kit-ease-spring), color var(--kit-duration-spring) var(--kit-ease-spring); } .scriptlesssocialsharing__buttons a.button:hover { background: var(--kit-color-ink) !important; color: var(--kit-color-on-ink) !important; border-color: var(--kit-color-ink) !important; } .scriptlesssocialsharing__buttons a.button.whatsapp { background: var(--kit-color-whatsapp) !important; border-color: var(--kit-color-whatsapp) !important; color: var(--kit-color-on-ink) !important; } .scriptlesssocialsharing__buttons svg, .scriptlesssocialsharing__icon { width: 1.125em !important; height: 1.125em !important; fill: currentColor; } .scriptlesssocialsharing__buttons a.button::after { content: none !important; } /* Mobile menu: the list fills the screen so contact and legal sit at the bottom */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: flex !important; flex-direction: column; min-height: calc(100dvh - var(--kit-header-height) - var(--kit-space-5) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: flex !important; flex-direction: column; flex: 1 1 auto; } /* Mobile menu sizing: below the admin bar when signed in; the links start under the toggle row (logo + close) */ .wp-block-navigation__responsive-container.is-menu-open { height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); padding-top: calc(var(--kit-toggle-top, 28px) - var(--wp-admin--admin-bar--height, 0px) + 44px + var(--kit-space-5)) !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { min-height: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { height: 100%; } /* Mobile menu: fixed from under the admin bar (when signed in) to the bottom of the screen */ .wp-block-navigation__responsive-container.is-menu-open { top: var(--wp-admin--admin-bar--height, 0px) !important; bottom: 0 !important; height: auto !important; } .wp-block-navigation__responsive-container.is-menu-open { padding-top: calc(var(--kit-toggle-top, 28px) - var(--wp-admin--admin-bar--height, 0px) + 44px) !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: var(--kit-space-3) !important; margin-top: 0 !important; } /* Header icons (owner, 9 Oct): the menu button always at the far right; search, contact and menu are plain line icons (24px, no circles), each with a 44px tap area; phone nav bar 64px tall. */ @media (max-width: 1199px) { .kit-site-header .kit-header-right > .wp-block-navigation { order: 9; margin-left: 0; } .kit-site-header .kit-header-right { gap: var(--kit-space-1) !important; } } .kit-site-header .wp-block-navigation__responsive-container-open, .kit-site-header .wp-block-navigation__responsive-container-close { width: var(--kit-size-target); height: var(--kit-size-target); align-items: center; justify-content: center; border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; color: var(--kit-color-on-ink) !important; } .kit-site-header .wp-block-navigation__responsive-container-open svg, .kit-site-header .wp-block-navigation__responsive-container-close svg { display: none; } .kit-site-header .wp-block-navigation__responsive-container-open::before, .kit-site-header .wp-block-navigation__responsive-container-close::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22/%3E%3Cpath%20d%3D%22M4%2012h16%22/%3E%3Cpath%20d%3D%22M4%2018h16%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%206h16%22/%3E%3Cpath%20d%3D%22M4%2012h16%22/%3E%3Cpath%20d%3D%22M4%2018h16%22/%3E%3C/svg%3E") center / contain no-repeat; } .kit-site-header .wp-block-navigation__responsive-container-close::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22/%3E%3Cpath%20d%3D%22m6%206%2012%2012%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22/%3E%3Cpath%20d%3D%22m6%206%2012%2012%22/%3E%3C/svg%3E"); } @media (max-width: 767px) { .kit-site-header { padding: var(--kit-space-2) var(--kit-space-4) !important; } .kit-site-header .kit-header-search, .kit-site-header .kit-header-contact { width: var(--kit-size-target); height: var(--kit-size-target); min-width: var(--kit-size-target); border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--kit-color-on-ink) !important; } .kit-site-header .kit-header-search .kit-ico, .kit-site-header .kit-header-contact .kit-ico { --kit-ico-size: var(--kit-icon-lg); } .kit-site-header .kit-wordmark img { width: 100px; } } /* Filters menu (more than two filters): one button; inside, each filter type folds open; Apply sends */ .kit-dd-panel--menu { min-width: 18rem; padding: var(--kit-space-2) var(--kit-space-2) 0; } .kit-dd-section { border-bottom: var(--kit-border-width) solid var(--kit-color-line); } .kit-dd-section > summary { display: flex; align-items: center; gap: var(--kit-space-2); min-height: var(--kit-size-target); padding: 0 var(--kit-space-3); list-style: none; cursor: pointer; font-weight: var(--kit-weight-medium); font-size: var(--fluid-body-sm); } .kit-dd-section > summary::-webkit-details-marker { display: none; } .kit-dd-section > summary .kit-ico { margin-left: auto; --kit-ico-size: 1rem; transition: transform var(--kit-duration-spring) var(--kit-ease-spring); } .kit-dd-section[open] > summary .kit-ico { transform: rotate(180deg); } .kit-dd-section fieldset { border: 0; margin: 0; padding: 0 0 var(--kit-space-2); max-height: 16rem; overflow: auto; } .kit-dd-menu-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: var(--kit-space-2); background: var(--kit-color-raised); } .kit-dd--menu .kit-dd-btn > .kit-ico--sliders { --kit-ico-size: 1rem; } /* End of an article: tags bottom left, share bottom right */ .kit-endbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kit-space-3); margin-top: var(--kit-space-6); padding-top: var(--kit-space-4); border-top: var(--kit-border-width) solid var(--kit-color-line); } .kit-endbar-tags { display: flex; flex-wrap: wrap; gap: var(--kit-space-1); } .kit-endbar-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-2); margin-left: auto; } .kit-endbar-share > p:empty, .kit-endbar-share br { display: none; } /* autop leftovers */ @media (max-width: 767px) { .kit-endbar-share { margin-left: 0; } .kit-endbar-label { flex-basis: 100%; } } /* label on its own line; buttons wrap from the left */ .kit-endbar-label { font-size: var(--kit-type-sm); color: var(--kit-color-muted); } .kit-endbar .scriptlesssocialsharing { margin: 0; padding: 0; border: 0; } /* List count: centred above the pagination */ .kit-list-count { text-align: center; margin: var(--kit-space-6) 0 var(--kit-space-3); font-size: var(--kit-type-sm); color: var(--kit-color-muted); } /* Error and empty pages (404, no results) */ .kit-error-page > * { max-width: 40rem; } .kit-error-code { margin: 0; font-size: var(--kit-type-display) !important; font-weight: var(--kit-weight-bold); line-height: 1; color: var(--kit-color-muted); } .kit-error-lead { font-size: var(--kit-type-lead); color: var(--kit-color-text); } .kit-error-search { display: flex; gap: var(--kit-space-2); margin: var(--kit-space-5) 0; max-width: 100%; } .kit-error-search .kit-btn { flex: 0 0 auto; } .kit-error-search input { flex: 1 1 auto; min-width: 0; min-height: var(--kit-size-control); padding: 0 var(--kit-space-4); border: var(--kit-border-width) solid var(--kit-color-line); border-radius: var(--kit-radius-pill); font: inherit; background: var(--kit-color-raised); } .kit-error-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--kit-space-2); } .kit-error-links a { display: inline-flex; align-items: center; min-height: var(--kit-size-target); padding: 0 var(--kit-space-4); border: var(--kit-border-width) solid var(--kit-color-line); border-radius: var(--kit-radius-pill); text-decoration: none; color: var(--kit-color-ink); } .kit-error-links a:hover { background: var(--kit-color-ink); color: var(--kit-color-on-ink); } /* The menu button only below 1200px (from 1200px the full menu shows on one row). */ @media (max-width: 1199px) { .kit-site-header .wp-block-navigation__responsive-container-open { display: inline-flex !important; } } @media (min-width: 1200px) { .kit-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none !important; } } .kit-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none !important; } .kit-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: inline-flex !important; } /* Pagination: every block 1:1 (44 × 44). Previous / Next are arrow-only squares; their words stay for screen readers. */ .kit-pager .page-numbers, .wp-block-query-pagination-numbers .page-numbers { width: var(--kit-size-target); min-width: var(--kit-size-target); height: var(--kit-size-target); padding: 0 !important; aspect-ratio: 1; } .kit-pager .page-numbers.dots { border: 0; width: auto; aspect-ratio: auto; } :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next, .kit-pager .prev, .kit-pager .next) { width: var(--kit-size-target); height: var(--kit-size-target); padding: 0 !important; justify-content: center; gap: 0 !important; font-size: 0 !important; border-radius: var(--kit-radius-control) !important; aspect-ratio: 1; } :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next, .kit-pager .prev, .kit-pager .next)::before, :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next, .kit-pager .prev, .kit-pager .next)::after { width: 20px !important; height: 20px !important; } /* CTA buttons (owner, 9 Oct 2026): every link button carries an icon, which nudges on hover and focus: kit-primitives.css section 10. */ /* Sideways scroll row (phones): a list of cards scrolls across instead of stacking down the screen. Add kit-scroll-row to a Query Loop; from 768px the list lays out as the section decides. */ @media (max-width: 767px) { .kit-scroll-row .wp-block-post-template { display: flex !important; flex-direction: row !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--kit-space-4); margin: 0 calc(-1 * var(--kit-space-gutter)) !important; padding: 0 var(--kit-space-gutter) var(--kit-space-3) !important; scroll-padding-inline: var(--kit-space-gutter); max-width: none !important; width: auto !important; scrollbar-width: none; overscroll-behavior-x: contain; } .kit-scroll-row .wp-block-post-template::-webkit-scrollbar { display: none; } .kit-scroll-row .wp-block-post-template > li { flex: 0 0 min(82%, 22rem); scroll-snap-align: start; margin: 0 !important; } } /* Header hides on scroll down, returns on scroll up (kit.js adds .kit-header-hidden). */ header.wp-block-template-part:has(.kit-site-header) { transition: transform var(--kit-duration-spring) var(--kit-ease-spring); } /* No will-change/transform while the menu is open: either one makes the header the containing block of the fixed menu overlay, which then shrinks to the header's height (phone menu cut off behind the logo). */ header.wp-block-template-part:has(.is-menu-open) { transform: none !important; } header.wp-block-template-part.kit-header-hidden { transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px))); } @media (prefers-reduced-motion: reduce) { header.wp-block-template-part:has(.kit-site-header) { transition: none; } } /* Ads in lists sit in a card of their own ("Ad" label); phones reserve 300×250 for it. A full row of space keeps every ad clear of buttons, contact actions and form fields. */ .kit-ad-item > .kit-ad { margin: 0; height: 100%; border: var(--kit-border-width) solid var(--kit-color-line); border-radius: var(--kit-radius-card, 12px); padding: var(--kit-space-3); background: var(--kit-surface-card, var(--kit-color-raised)); } @media (max-width: 767px) { .kit-ad-item .kit-ad-unit { min-height: 250px; } } .kit-ad { margin-block: var(--kit-space-7); } /* One card (owner, 9 Oct 2026): News, Resources, Library and Opportunities cards share one behaviour — the whole card is the link, the title underlines on hover, keyboard focus outlines the card, and the arrow (where shown) nudges. */ .kit-card { position: relative; } .kit-card :is(.wp-block-post-title, h2, h3) a { text-decoration: none; } .kit-card:hover :is(.wp-block-post-title, h2, h3) a { text-decoration: underline; text-underline-offset: var(--kit-underline-offset); text-decoration-thickness: var(--kit-underline-thickness); } .kit-card:has(a:focus-visible) { outline: var(--kit-focus-width, 2px) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset-xl); border-radius: var(--kit-radius-card, 12px); } .kit-card :is(.wp-block-post-title, h2, h3) a:focus-visible { outline: 0; } .kit-card > .kit-ico--arrow-right { transition: transform var(--kit-duration-spring) var(--kit-ease-spring); } .kit-card:hover > .kit-ico--arrow-right { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .kit-card > .kit-ico--arrow-right { transition: none; transform: none !important; } } /* Step progress header for multi-step forms (kit.js adds it to .kit-steps; 12 Oct 2026). */ .kit-steps-progress { list-style: none; margin: 0 0 var(--kit-space-5); padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--kit-space-2); counter-reset: none; } .kit-steps-progress li { display: flex; align-items: center; gap: var(--kit-space-2); padding-top: var(--kit-space-3); border-top: var(--kit-border-mark) solid var(--kit-color-line); color: var(--kit-color-muted); font-size: var(--kit-type-sm); } .kit-steps-progress .kit-steps-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: var(--kit-border-width) solid var(--kit-color-line); font-weight: var(--kit-weight-strong); flex: none; } .kit-steps-progress li.is-current { border-top-color: var(--kit-color-ink); color: var(--kit-color-text); font-weight: var(--kit-weight-strong); } .kit-steps-progress li.is-current .kit-steps-num { background: var(--kit-color-ink); border-color: var(--kit-color-ink); color: var(--kit-color-on-ink); } .kit-steps-progress li.is-done { border-top-color: var(--kit-color-ink); } .kit-steps.is-stepped .kit-step-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* The page band holds the filter dropdowns: keep it above the list below so an open panel is never covered by cards. */ .kit-section-band { position: relative; z-index: 3; } /* Form fields are at least 16px on phones: iOS Safari zooms the whole page into any smaller field on focus. */ @media (max-width: 767px) { :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea) { font-size: max(1rem, 16px) !important; } } /* Item page with a sidebar (owner, 16 Oct 2026): .kit-with-sidebar > .kit-main + .kit-sidebar (the "sidebar" template part). The text column is the reading width (--kit-width-content). Below lg the sidebar follows the text, at most the same width; at lg it is a second column beside it. A sidebar with nothing to show (no blocks, or only an ad slot that is empty, waiting or unfilled) takes no space, and the text stays centred. */ .kit-with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; } .kit-with-sidebar > :is(.kit-main, .kit-sidebar) { width: 100%; max-width: var(--kit-width-content); margin-block: 0; } .kit-with-sidebar > .kit-sidebar:is(:has(> :not(.kit-ad)), :has(ins.adsbygoogle[data-ad-status="filled"])) { margin-top: var(--kit-space-7); } @media (min-width: 1200px) { .kit-with-sidebar:is(:has(> .kit-sidebar > :not(.kit-ad)), :has(> .kit-sidebar ins.adsbygoogle[data-ad-status="filled"])) { grid-template-columns: minmax(0, var(--kit-width-content)) minmax(0, 1fr); column-gap: var(--kit-space-7); justify-items: stretch; align-items: start; } /* :has() cannot be nested */ .kit-with-sidebar > .kit-sidebar:is(:has(> :not(.kit-ad)), :has(ins.adsbygoogle[data-ad-status="filled"])) { margin-top: 0; max-width: none; } .kit-with-sidebar > .kit-sidebar.is-sticky { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--kit-header-height) + var(--kit-space-5)); } /* only when shorter than the screen (kit.js) */ } /* Block versions of Kits components (owner, 18 Oct 2026). Built from core blocks: a Group with the class, a Heading with a link (the link covers the block) and a Paragraph. The icon comes from a kit-ico--{name} class on the Group, which sets --i. Stacking on phones: add kit-stack to the grid Group around them. */ /* Tile: icon square, title, one line, arrow (the .kit-tile look) */ .wp-block-group.kit-tile { position: relative; margin: 0; align-content: start; grid-template-rows: auto 1fr; } .wp-block-group.kit-tile > * { margin: 0 !important; min-width: 0; } .wp-block-group.kit-tile::before { content: ""; grid-area: ico; width: 1.5rem; height: 1.5rem; padding: 0.625rem; box-sizing: content-box; border-radius: var(--kit-radius-control); background: var(--i) center / 1.5rem no-repeat, var(--kit-surface-section-alt); } .wp-block-group.kit-tile:is(.is-urgent, :hover)::before { background-color: var(--kit-color-accent); } /* grey square; brand on hover, as the .kit-tile icon */ .wp-block-group.kit-tile::after { content: ""; grid-area: arrow; align-self: center; width: 1.25rem; height: 1.25rem; background: var(--kit-color-muted); -webkit-mask: var(--kit-ico-arrow-right) center / contain no-repeat; mask: var(--kit-ico-arrow-right) center / contain no-repeat; transition: transform var(--kit-motion-base) var(--kit-motion-ease); } .wp-block-group.kit-tile:hover::after { transform: translateX(4px); background: var(--kit-color-ink); } .wp-block-group.kit-tile > h3.wp-block-heading { grid-area: title; font-size: var(--kit-type-h4) !important; line-height: 1.3 !important; } .wp-block-group.kit-tile > h3.wp-block-heading a { color: var(--kit-color-ink) !important; text-decoration: none; } .wp-block-group.kit-tile > h3.wp-block-heading a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .wp-block-group.kit-tile > p { grid-area: desc; font-size: var(--kit-type-sm); line-height: 1.5; color: var(--kit-color-muted); } .wp-block-group.kit-tile:focus-within { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset-lg); } .wp-block-group.kit-tile a:focus-visible { outline: none; } /* Promo: a tinted block with an icon, title, one or two lines and one button at the bottom */ .wp-block-group.kit-promo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kit-space-3); height: 100%; box-sizing: border-box; padding: var(--kit-space-6); border-radius: var(--kit-radius-card); background: var(--kit-color-surface); color: var(--kit-color-ink); } .wp-block-group.kit-promo.is-tint-success { background: color-mix(in srgb, var(--kit-color-success) 10%, var(--kit-color-raised)); } .wp-block-group.kit-promo > * { margin: 0 !important; } .wp-block-group.kit-promo::before { content: ""; width: 2rem; height: 2rem; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .wp-block-group.kit-promo > h3.wp-block-heading { font-size: var(--kit-type-h3) !important; } .wp-block-group.kit-promo > p { max-width: 44ch; } .wp-block-group.kit-promo > .wp-block-buttons { margin-top: auto !important; padding-top: var(--kit-space-3); } /* Rows: a Query Loop as ruled rows (meta, title, arrow), no card box */ .wp-block-post-template.kit-rows { list-style: none; margin: 0; padding: 0; } .wp-block-post-template.kit-rows > li { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--kit-space-4); align-items: center; padding: var(--kit-space-4) 0 !important; background: none !important; border: 0 !important; border-top: var(--kit-border-width) solid var(--kit-color-line) !important; border-radius: 0; box-shadow: none !important; transform: none !important; overflow: visible; } .wp-block-post-template.kit-rows > li:last-child { border-bottom: var(--kit-border-width) solid var(--kit-color-line) !important; } .wp-block-post-template.kit-rows > li > * { grid-column: 1; margin: 0 !important; } .wp-block-post-template.kit-rows > li::after { position: static; grid-column: 2; grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; border-radius: 0; background: var(--kit-color-muted); -webkit-mask: var(--kit-ico-arrow-right) center / contain no-repeat; mask: var(--kit-ico-arrow-right) center / contain no-repeat; } .wp-block-post-template.kit-rows > li:hover::after, .wp-block-post-template.kit-rows > li:focus-within::after { background: var(--kit-color-ink); transform: translateX(4px); } .wp-block-post-template.kit-rows .wp-block-post-title { font-size: var(--kit-type-h4) !important; line-height: 1.35 !important; margin-top: var(--kit-space-2) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Link list: a core List of links as rows with an arrow */ .wp-block-list.kit-links { list-style: none; margin: var(--kit-space-5) 0 0; padding: 0; } .wp-block-list.kit-links > li { max-width: none; margin: 0; border-top: var(--kit-border-width) solid var(--kit-color-line); } .wp-block-list.kit-links > li:last-child { border-bottom: var(--kit-border-width) solid var(--kit-color-line); } .wp-block-list.kit-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--kit-space-3); min-height: 3.25rem; color: var(--kit-color-ink); font-weight: var(--kit-weight-strong); text-decoration: none; } .wp-block-list.kit-links a::after { content: ""; flex: none; width: 1.25rem; height: 1.25rem; background: currentColor; -webkit-mask: var(--kit-ico-arrow-right) center / contain no-repeat; mask: var(--kit-ico-arrow-right) center / contain no-repeat; transition: transform var(--kit-motion-base) var(--kit-motion-ease); } .wp-block-list.kit-links a:hover::after { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .wp-block-group.kit-tile::after, .wp-block-list.kit-links a::after { transition: none; } } /* "See all" link without an icon span (a link typed in a core Paragraph): the same arrow, drawn after it */ .kit-ed-more:not(:has(.kit-ico))::after { content: ""; flex: none; width: 1.25em; height: 1.25em; background: currentColor; -webkit-mask: var(--kit-ico-arrow-right) center / contain no-repeat; mask: var(--kit-ico-arrow-right) center / contain no-repeat; transition: transform var(--kit-motion-base) var(--kit-motion-ease); } .kit-ed-more:not(:has(.kit-ico)):hover::after { transform: translateX(3px); } .kit-sec-head > p:has(> .kit-ed-more) { margin: 0; } /* Photo blocks (core Cover with the card radius) in a grid: the text sits at the bottom, the button last */ .wp-block-cover.kit-photo-card { border-radius: var(--kit-radius-card); overflow: hidden; } .wp-block-cover.kit-photo-card .wp-block-cover__inner-container > * { margin-block: 0 var(--kit-space-3); } .wp-block-cover.kit-photo-card .wp-block-cover__inner-container > p { max-width: 40ch; } .wp-block-cover.kit-photo-card .wp-block-buttons { margin: var(--kit-space-4) 0 0 !important; } @media (prefers-reduced-motion: reduce) { .kit-ed-more::after { transition: none; } } /* kit-primitives */ /* Kits primitives (Phase 11 B.2): one component per role. Values come from tokens only: v4.2 (--s-*, --r-*/--radius-*, --fluid-*, --opacity-*) and the semantic --kit-* tokens a child theme overrides. Rules for every interactive primitive: visible focus ring (--kit-focus-width), hover only where hover exists, disabled = --opacity-disabled + aria-disabled, targets at least --kit-size-target, reduced motion = opacity only. */ /* ---------- text for screen readers only ---------- */ .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { clip-path: none; height: auto; width: auto; margin: 0; padding: var(--s-2) var(--s-3); z-index: var(--kit-z-overlay); background: var(--kit-color-raised); color: var(--kit-color-ink); } /* ---------- shared focus ---------- */ :is(.kit-chip, .wp-block-post-terms a, .kit-filter-pill, .kit-btn, .kit-segment button, .kit-filter-active button, .kit-field :is(input, select, textarea), .kit-checkbox input, .kit-filter-sheet > summary):focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset); } /* ---------- 1. Tag: static metadata, not interactive ---------- */ .kit-tag { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 1.75rem; padding: 0 var(--s-2); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--kit-color-ink) 6%, transparent); color: var(--kit-color-text); font-size: var(--fluid-label); font-weight: var(--kit-weight-regular); line-height: 1.2; cursor: default; } .kit-tag--accent { background: var(--kit-color-accent); color: var(--kit-color-on-accent); box-shadow: none; } .kit-tag--ink { background: var(--kit-color-ink); color: var(--kit-color-on-ink); box-shadow: none; } .kit-tag--success { background: var(--kit-color-success-soft); color: var(--kit-color-success); } .kit-tag--warning { background: var(--kit-color-warning-soft); color: var(--kit-color-warning); } .kit-tag--danger { background: var(--kit-color-danger-soft); color: var(--kit-color-danger); } .kit-tag--info { background: var(--kit-color-info-soft); color: var(--kit-color-info); } .kit-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; } /* ---------- 2. Link chip: a tag that navigates (also category links from the core post-terms block) ---------- */ .kit-chip, .wp-block-post-terms a { position: relative; display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 var(--s-2); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--kit-color-ink) 6%, transparent); color: var(--kit-color-ink); border: 0; font-size: var(--fluid-label); font-weight: var(--kit-weight-regular); text-decoration: none; transition: background-color var(--kit-motion-fast) var(--kit-motion-ease), border-color var(--kit-motion-fast) var(--kit-motion-ease); } .kit-chip::after, .wp-block-post-terms a::after { content: ""; position: absolute; inset: calc((var(--s-8) - var(--kit-size-target)) / 2) 0; } /* 44px hit area */ .kit-chip:visited, .wp-block-post-terms a:visited { color: var(--kit-color-ink); } .kit-chip:active { background: color-mix(in srgb, var(--kit-color-ink) 16%, transparent); } @media (hover: hover) { :is(.kit-chip, .wp-block-post-terms a):hover { background: color-mix(in srgb, var(--kit-color-ink) 12%, transparent); text-decoration: underline; text-underline-offset: 2px; } } .kit-chip--on-ink { background: color-mix(in srgb, var(--kit-color-on-ink) 12%, transparent); color: var(--kit-color-on-ink); } .kit-chip--on-ink:visited { color: var(--kit-color-on-ink); } @media (hover: hover) { .kit-chip--on-ink:hover { background: color-mix(in srgb, var(--kit-color-on-ink) 12%, transparent); border-color: var(--kit-color-on-ink); } } /* ---------- 3. Filter pill: toggles a filter value ---------- */ .kit-filter-pill { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--kit-size-target); padding: 0 var(--s-4); border-radius: var(--radius-full); border: 1px solid var(--kit-color-line); background: var(--kit-color-raised); color: var(--kit-color-ink); font: inherit; font-size: var(--fluid-body-sm); font-weight: var(--kit-weight-medium); text-decoration: none; cursor: pointer; transition: background-color var(--kit-motion-fast) var(--kit-motion-ease), border-color var(--kit-motion-fast) var(--kit-motion-ease); } .kit-filter-pill::before { content: none; } .kit-filter-pill:visited { color: var(--kit-color-ink); } .kit-filter-pill[aria-pressed=true], .kit-filter-pill[aria-checked=true], .kit-filter-pill[aria-current], .kit-filter-pill[aria-current]:visited { background: var(--kit-color-ink); border-color: var(--kit-color-ink); color: var(--kit-color-on-ink); font-weight: var(--kit-weight-bold); } .kit-filter-pill:is([aria-pressed=true], [aria-checked=true], [aria-current])::before { /* selected is not colour only: a check mark */ content: ""; width: 0.9em; height: 0.9em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } @media (hover: hover) { .kit-filter-pill:hover { border-color: var(--kit-color-ink); } .kit-filter-pill:is([aria-pressed=true], [aria-checked=true], [aria-current]):hover { background: var(--kit-color-text); } } .kit-filter-pill[aria-disabled=true] { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; } .kit-filter-pill.is-loading { opacity: var(--opacity-60); cursor: progress; } .kit-filter-pill .kit-count { color: inherit; opacity: var(--opacity-80); } /* ---------- 4. Filter group + phone sheet ---------- */ .kit-filters { display: grid; gap: var(--s-4); margin: 0 0 var(--s-8); } .kit-filter-group { border: 0; margin: 0; padding: 0; min-width: 0; } .kit-filter-group > legend, .kit-filter-group > .kit-filter-label { padding: 0; margin: 0 0 var(--s-2); font-size: var(--fluid-label); font-weight: var(--weight-label); color: var(--kit-color-muted); } .kit-filter-options { display: flex; flex-wrap: wrap; gap: var(--s-2); } .kit-filter-group:not(.is-expanded) .kit-filter-options > .kit-filter-pill:nth-child(n+9) { display: none; } .kit-filter-more { background: none; border: 0; padding: 0 var(--s-2); min-height: var(--kit-size-target); font: inherit; font-size: var(--fluid-body-sm); color: var(--kit-color-link); text-decoration: underline; cursor: pointer; } .kit-filter-sheet > summary { display: none; } .kit-filter-sheet-actions { display: none; } /* Phones (kit.js adds .is-sheet below 768px; without JavaScript the groups stay inline) */ .kit-filter-sheet.is-sheet { margin: 0 0 var(--s-6); } .kit-filter-sheet.is-sheet > summary { display: inline-flex; align-items: center; gap: var(--s-2); list-style: none; min-height: var(--kit-size-target); padding: 0 var(--s-4); border: 1px solid var(--kit-color-ink); border-radius: var(--radius-full); background: var(--kit-color-raised); color: var(--kit-color-ink); font-weight: var(--kit-weight-medium); cursor: pointer; } .kit-filter-sheet.is-sheet > summary::-webkit-details-marker { display: none; } .kit-filter-sheet.is-sheet[open] > .kit-filters { position: fixed; inset: auto 0 0 0; z-index: var(--kit-z-overlay); max-height: 85vh; overflow: auto; margin: 0; padding: var(--s-6) var(--s-4) var(--s-4); background: var(--kit-color-raised); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--kit-elevation-3); } .kit-filter-sheet.is-sheet[open]::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--kit-z-overlay) - 1); background: color-mix(in srgb, var(--kit-color-ink) 45%, transparent); } .kit-filter-sheet.is-sheet[open] .kit-filter-sheet-actions { display: flex; gap: var(--s-2); position: sticky; bottom: calc(-1 * var(--s-4)); padding: var(--s-3) 0; background: var(--kit-color-raised); } .kit-filter-sheet.is-sheet[open] .kit-filter-sheet-actions .kit-btn { flex: 1; } /* 4b. Filter bar in one row: a dropdown per filter (checkbox list with counts), Sort on the right. Phones: a "Filters" button opening the sheet above, with Sort beside it. */ .kit-filterbar { display: flex; align-items: center; gap: var(--s-2); min-width: 0; } .kit-filterbar > .kit-filter-sheet { flex: 0 1 auto; min-width: 0; } .kit-filterbar .kit-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; } .kit-dd { position: relative; } .kit-dd-btn { display: inline-flex; align-items: center; gap: var(--s-2); list-style: none; min-height: var(--kit-size-target); padding: 0 var(--s-3) 0 var(--s-4); border: 1px solid var(--kit-color-ink); border-radius: var(--radius-full); background: var(--kit-color-raised); color: var(--kit-color-ink); font-size: var(--fluid-body-sm); font-weight: var(--kit-weight-medium); white-space: nowrap; cursor: pointer; user-select: none; } .kit-dd-btn::-webkit-details-marker { display: none; } .kit-dd-btn .kit-ico { --kit-ico-size: 1rem; transition: transform var(--kit-motion-fast) var(--kit-motion-ease); } .kit-dd.is-open > .kit-dd-btn .kit-ico { transform: rotate(180deg); } .kit-dd-panel[hidden] { display: none !important; } button.kit-dd-btn { font: inherit; font-size: var(--fluid-body-sm); } .kit-dd-btn.is-chosen { background: var(--kit-color-ink); color: var(--kit-color-on-ink); } .kit-dd-btn .kit-count { color: inherit; opacity: var(--opacity-80); } .kit-dd-btn:focus-visible, .kit-dd-opt:focus-visible, .kit-dd-opt:has(input:focus-visible) { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset); } @media (hover: hover) { .kit-dd-btn:hover { box-shadow: inset 0 0 0 1px var(--kit-color-ink); } } .kit-dd-panel { position: absolute; top: calc(100% + var(--s-1)); left: 0; z-index: var(--kit-z-overlay); min-width: 16rem; max-width: min(22rem, 90vw); max-height: 22rem; overflow: auto; margin: 0; padding: var(--s-2); border: 0; border-radius: var(--kit-radius-card); background: var(--kit-color-raised); box-shadow: var(--kit-elevation-2); } .kit-dd--sort { flex: none; } /* next to Filters, not pushed to the far edge */ .kit-dd--sort .kit-dd-panel { left: auto; right: 0; min-width: 12rem; } .kit-dd-list { list-style: none; margin: 0; padding: 0; } .kit-dd-list li { margin: 0; } .kit-dd-opt { display: flex; align-items: center; gap: var(--s-2); min-height: var(--kit-size-target); padding: 0 var(--s-3); border-radius: var(--radius-sm); color: var(--kit-color-ink); text-decoration: none; font-size: var(--fluid-body-sm); cursor: pointer; } @media (hover: hover) { .kit-dd-opt:hover { background: var(--kit-color-surface-soft); } } .kit-dd-opt .kit-count { margin-left: auto; padding-left: var(--s-3); } .kit-dd-opt[aria-current] { font-weight: var(--kit-weight-bold); } .kit-dd-opt[aria-current]::after { --kit-ico-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22/%3E%3C/svg%3E"); content: ""; width: 1rem; height: 1rem; margin-left: auto; background: currentColor; -webkit-mask: var(--kit-ico-check) center / contain no-repeat; mask: var(--kit-ico-check) center / contain no-repeat; } .kit-dd-check { flex: none; width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--kit-color-ink); } .kit-dd-current { font-weight: var(--kit-weight-regular); } .kit-filterbar .kit-filter-sheet.is-sheet { margin: 0; } .kit-filter-sheet.is-sheet .kit-filters { display: grid; gap: var(--s-3); } .kit-filter-sheet.is-sheet .kit-dd-btn { width: 100%; justify-content: space-between; } .kit-filter-sheet.is-sheet .kit-dd-panel { position: static; box-shadow: none; max-height: none; min-width: 0; max-width: none; padding: var(--s-2) 0 0; } @media (max-width: 767px) { .kit-dd--sort .kit-dd-current { display: none; } } @media (prefers-reduced-motion: reduce) { .kit-dd-btn .kit-ico { transition: none; } } /* ---------- 5. Active filters bar ---------- */ .kit-filter-active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: calc(-1 * var(--s-4)) 0 var(--s-6); } .kit-filter-active .kit-removable { display: inline-flex; align-items: center; gap: var(--s-1); padding-left: var(--s-3); border-radius: var(--radius-full); background: var(--kit-color-surface-soft); box-shadow: inset 0 0 0 1px var(--kit-color-line); font-size: var(--fluid-body-sm); } .kit-filter-active .kit-removable a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--kit-size-target); min-height: var(--kit-size-target); border-radius: var(--radius-full); color: var(--kit-color-ink); text-decoration: none; font-size: var(--fluid-body-lg); line-height: 1; } @media (hover: hover) { .kit-filter-active .kit-removable a:hover { background: var(--kit-color-surface); } } .kit-filter-active .kit-removable a:focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: calc(-1 * var(--kit-focus-width)); } .kit-filter-clear { font-size: var(--fluid-body-sm); color: var(--kit-color-link); min-height: var(--kit-size-target); display: inline-flex; align-items: center; } /* ---------- 6. Badge: state of the item ---------- */ .kit-badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--radius-xs); font-size: var(--fluid-label); font-weight: var(--kit-weight-bold); line-height: 1.2; background: var(--kit-color-surface); color: var(--kit-color-ink); } .kit-badge--verified { background: var(--kit-color-success-soft); color: var(--kit-color-success); } .kit-badge--unconfirmed { background: var(--kit-color-warning-soft); color: var(--kit-color-warning); } .kit-badge--featured { background: var(--kit-color-accent); color: var(--kit-color-on-accent); } .kit-badge--sponsored, .kit-badge--ad { background: var(--kit-color-ink); color: var(--kit-color-on-ink); } .kit-badge--closed { background: var(--kit-color-danger-soft); color: var(--kit-color-danger); } .kit-badge--new { background: var(--kit-color-info-soft); color: var(--kit-color-info); } /* Beta: a very small tag at the top right of a menu label (block style kits-beta on a Navigation Link, or the same span in a footer list). Regular weight, small corner, info blue with white text (readable on dark and light surfaces). Raised with relative positioning, so the link keeps its height and target. */ .kit-badge--beta { position: relative; top: -0.8em; margin-inline-start: var(--s-1); padding: var(--s-0) var(--s-1); border-radius: var(--kit-radius-xs); font-size: var(--kit-type-2xs); font-weight: var(--kit-weight-regular); line-height: 1.4; letter-spacing: 0.02em; white-space: nowrap; vertical-align: baseline; background: var(--kit-color-info); color: var(--kit-color-on-ink); } /* ---------- 7. Eyebrow / 8. Count ---------- */ .kit-eyebrow { display: block; margin: 0 0 var(--s-2); font-size: var(--fluid-label); font-weight: var(--weight-label); color: var(--kit-color-muted); } .kit-count { font-variant-numeric: tabular-nums; color: var(--kit-color-muted); font-weight: var(--kit-weight-regular); } /* ---------- 9. Segmented control ---------- */ .kit-segment { display: inline-flex; padding: var(--s-1); gap: var(--s-1); border-radius: var(--radius-full); background: var(--kit-color-surface); } .kit-segment button, .kit-segment a { min-height: calc(var(--kit-size-target) - 2 * var(--s-1)); padding: 0 var(--s-4); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--kit-color-ink); font: inherit; font-size: var(--fluid-body-sm); font-weight: var(--kit-weight-medium); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; } .kit-segment :is(button, a):is([aria-pressed=true], [aria-current]) { background: var(--kit-color-raised); box-shadow: var(--kit-elevation-1); font-weight: var(--kit-weight-bold); } /* ---------- 10. Button: one system for .kit-btn and the core Button block (spec: docs/buttons.md; registry "Button") ---------- Variants primary (default: ink fill) · secondary (soft grey fill, light outline) · ghost (dark outline) · brand (the primary shape in the brand colour). Each variant reads --kit-btn--* tokens; a dark surface swaps those tokens, so every variant works on light and on dark surfaces. States default · hover · focus-visible · active (pressed) · disabled · loading. Content icon + label (the default) · label only (no icon) · icon only (square; needs an accessible name). Sizes default (--kit-btn-height) · small (--kit-btn-height-sm). Markup Core Button block: block style Default (= primary), Secondary, Ghost or Brand; size and content as extra CSS classes on the block: kit-btn--sm, kit-btn--icon, kit-btn--label, kit-btn--ico-. Old names keep working: is-style-kits-primary = brand, is-style-outline = secondary, is-style-kits-small = primary small, kit-btn--primary and kit-btn--ink = primary, kit-btn--outline = secondary. Rules variant rules only set the private --_* values, so a component may restyle a button with one plain class rule. */ /* Primary (default) values; :where() keeps them at zero specificity so any variant class wins */ :where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button) { --_bg: var(--kit-btn-primary-bg); --_fg: var(--kit-btn-primary-fg); --_line: var(--kit-btn-primary-bg); --_bg-h: var(--kit-btn-primary-bg-hover); --_fg-h: var(--kit-btn-primary-fg-hover); --_line-h: var(--kit-btn-primary-bg-hover); --_nudge: translateX(var(--kit-btn-nudge)); } :where(.kit-btn--secondary, .kit-btn--outline, .is-style-kits-secondary > .wp-block-button__link, .is-style-outline > .wp-block-button__link) { --_bg: var(--kit-btn-secondary-bg); --_fg: var(--kit-btn-secondary-fg); --_line: var(--kit-btn-secondary-line); --_bg-h: var(--kit-btn-secondary-bg-hover); --_fg-h: var(--kit-btn-secondary-fg-hover); --_line-h: var(--kit-btn-secondary-bg-hover); } :where(.kit-btn--ghost, .is-style-kits-ghost > .wp-block-button__link) { --_bg: transparent; --_fg: var(--kit-btn-ghost-fg); --_line: var(--kit-btn-ghost-line); --_bg-h: var(--kit-btn-ghost-bg-hover); --_fg-h: var(--kit-btn-ghost-fg-hover); --_line-h: var(--kit-btn-ghost-bg-hover); } :where(.kit-btn--brand, .is-style-kits-brand > .wp-block-button__link, .is-style-kits-primary > .wp-block-button__link) { --_bg: var(--kit-btn-brand-bg); --_fg: var(--kit-btn-brand-fg); --_line: var(--kit-btn-brand-bg); --_bg-h: color-mix(in srgb, var(--kit-btn-brand-bg) var(--kit-btn-hover-mix), var(--kit-color-ink)); --_fg-h: var(--kit-btn-brand-fg); --_line-h: var(--_bg-h); } /* Brand is the site's brand colour, or a campaign's own colour inside a campaign palette (campaign.css sets --kit-btn-brand-bg/-fg); every state derives from that one pair. */ /* Dark surfaces: ink would vanish, so primary takes the brand fill (and its hover); outlines and text turn light. */ :is(.kit-dark, .has-secondary-background-color, .wp-block-cover.is-dark, .kit-site-header, .kit-site-footer, .kit-ed-hero, .kit-ed-help, .kit-ed-story, .kit-form--on-dark) { --kit-btn-primary-bg: var(--kit-btn-brand-bg); --kit-btn-primary-fg: var(--kit-btn-brand-fg); --kit-btn-primary-bg-hover: color-mix(in srgb, var(--kit-btn-brand-bg) var(--kit-btn-hover-mix), var(--kit-color-ink)); --kit-btn-primary-fg-hover: var(--kit-btn-brand-fg); --kit-btn-secondary-bg: color-mix(in srgb, var(--kit-color-on-ink) 12%, transparent); --kit-btn-secondary-fg: var(--kit-color-on-ink); --kit-btn-secondary-line: color-mix(in srgb, var(--kit-color-on-ink) 60%, transparent); --kit-btn-secondary-bg-hover: var(--kit-color-on-ink); --kit-btn-secondary-fg-hover: var(--kit-color-ink); --kit-btn-ghost-fg: var(--kit-color-on-ink); --kit-btn-ghost-line: var(--kit-color-on-ink); --kit-btn-ghost-bg-hover: var(--kit-color-on-ink); --kit-btn-ghost-fg-hover: var(--kit-color-ink); } /* Headings and lead text on a dark surface take its light text colour (theme.json gives headings the ink colour and large text the muted colour, which vanish on ink); a card inside keeps its own colour. */ :is(.kit-dark, .has-secondary-background-color, .wp-block-cover.is-dark) :is(h1, h2, h3, h4, h5, h6, .has-large-font-size, .kit-lead) { color: inherit; } /* Shape, type and motion (the same for every variant) */ .kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button { display: inline-flex; align-items: center; justify-content: center; gap: var(--kit-btn-gap); box-sizing: border-box; min-height: var(--kit-btn-height); padding: 0 var(--kit-btn-pad); border: var(--kit-border-control) solid var(--_line); border-radius: var(--kit-radius-pill); background: var(--_bg); color: var(--_fg); font: inherit; font-size: var(--fluid-body-md); font-weight: var(--kit-weight-medium); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--kit-motion-fast) var(--kit-motion-ease), color var(--kit-motion-fast) var(--kit-motion-ease), border-color var(--kit-motion-fast) var(--kit-motion-ease), transform var(--kit-motion-fast) var(--kit-motion-ease); } a:is(.kit-btn, .wp-block-button__link, .wp-element-button) { color: var(--_fg); } /* outranks "links in this area are light" rules */ .kit-btn .kit-ico { --kit-ico-size: var(--kit-btn-ico-size); } /* Hover: the fill changes colour (secondary and brand fill with ink, or with white on dark) */ @media (hover: hover) { :where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button):hover:not([disabled], [aria-disabled=true], .is-loading, [aria-busy=true]), a:where(.kit-btn, .wp-block-button__link, .wp-element-button):hover:not([aria-disabled=true], .is-loading, [aria-busy=true]) { background: var(--_bg-h); border-color: var(--_line-h); color: var(--_fg-h); } } /* Focus: the site's focus ring, colours unchanged */ :where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button):focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset); } /* Active: a 1px press */ :where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button):active:not([disabled], [aria-disabled=true]) { transform: translateY(var(--kit-btn-press)); } /* Disabled: faded, no hover, no press; a disabled link does not navigate */ :where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-finder button, .kit-print button):is([disabled], [aria-disabled=true]) { opacity: var(--opacity-disabled); cursor: not-allowed; transform: none; } a:where(.kit-btn, .wp-block-button__link, .wp-element-button)[aria-disabled=true] { pointer-events: none; } /* Loading (class is-loading or aria-busy="true"): a spinner in place of the icon, the label stays, no clicks */ :where(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]):is(.is-loading, [aria-busy=true]) { position: relative; pointer-events: none; } :is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]):is(.is-loading, [aria-busy=true])::before { content: ""; flex: none; width: var(--kit-btn-ico-size); height: var(--kit-btn-ico-size); box-sizing: border-box; border-radius: var(--radius-full); border: var(--kit-btn-spinner-width) solid currentColor; border-right-color: transparent; background: none; -webkit-mask: none; mask: none; transform: none !important; animation: kit-spin 700ms linear infinite; } :is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]):is(.is-loading, [aria-busy=true])::after { display: none; } :is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]):is(.is-loading, [aria-busy=true]) > .kit-ico { display: none; } /* Sizes: small */ .kit-btn.kit-btn--sm, .wp-block-button.kit-btn--sm > .wp-block-button__link, .is-style-kits-small > .wp-block-button__link { min-height: var(--kit-btn-height-sm); padding-inline: var(--kit-btn-pad-sm); font-size: var(--fluid-body-sm); } /* Icon only: square, the icon in the middle.