/* 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-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-border-control: 1px; --kit-card-columns: 1; --kit-card-media-ratio: 16/9; --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.25rem; --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: 56px; --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); } @media (min-width: 768px) { :root { --kit-space-section: 70px; --kit-space-gutter: 32px; --kit-space-grid: 24px; --kit-offset: 14px; --kit-card-columns: 2; --kit-placard-ratio: 16/9; --kit-carousel-item: auto; --kit-grid-gap: 24px; --kit-grid-columns: 8; --kit-header-height: 72px; } } @media (min-width: 1200px) { :root { --kit-space-section: 96px; --kit-space-gutter: 48px; --kit-space-grid: 32px; --kit-card-columns: 3; --kit-grid-gap: 32px; --kit-grid-columns: 12; } } /* 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: 3px solid var(--kit-color-focus); outline-offset: 2px; border-radius: 4px; } a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--kit-motion-fast) var(--kit-motion-ease); } a:hover { color: var(--kit-color-link); text-decoration-thickness: 2px; } /* 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, .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; } /* 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(17rem, 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 — variants: primary (default), outline, ink; states: hover, active, focus, disabled, loading. Core buttons (.wp-element-button) take colour, border, radius, padding and type from theme.json styles.elements.button and the block style variations (Primary, Secondary, Ghost, Small); the form buttons below repeat the same tokens. */ .wp-element-button ,.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--kit-space-2); min-height: var(--kit-size-control); cursor: pointer; font-variant: inherit; font-stretch: inherit; font-kerning: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-feature-settings: inherit; font-variation-settings: inherit; word-spacing: inherit; 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), box-shadow var(--kit-motion-base) var(--kit-motion-ease); } .kit-form button[type=submit] ,.kit-finder button ,.kit-print button { display: inline-flex; align-items: center; justify-content: center; gap: var(--kit-space-2); min-height: var(--kit-size-control); padding: 0 var(--kit-space-5); border: var(--kit-border-control) solid transparent; border-radius: var(--kit-radius-pill); background: var(--kit-color-ink); color: var(--kit-color-on-ink); font: inherit; font-weight: var(--kit-weight-medium); 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), transform var(--kit-motion-fast) var(--kit-motion-ease), box-shadow var(--kit-motion-base) var(--kit-motion-ease); } .wp-element-button:hover ,.wp-block-button__link:hover ,.kit-form button[type=submit]:hover ,.kit-finder button:hover ,.kit-print button:hover { background: var(--neutral-8); color: var(--kit-color-on-ink); } .wp-element-button:active ,.wp-block-button__link:active ,.kit-form button[type=submit]:active ,.kit-finder button:active { transform: translateY(1px) scale(0.99); box-shadow: none; } .is-style-outline > .wp-block-button__link { background: transparent; color: inherit; border-color: var(--kit-color-line); } .is-style-outline > .wp-block-button__link:hover { background: var(--kit-color-ink); color: var(--kit-color-on-ink); border-color: var(--kit-color-ink); } /* Block styles (theme.json holds their colours, border, padding and size; here: height and hover) */ .wp-block-button.is-style-kits-primary .wp-block-button__link:hover { background: var(--kit-color-ink); border-color: var(--kit-color-ink); color: var(--kit-color-on-ink); } :is(.kit-dark, .kit-site-header, .kit-ed-hero, .kit-ed-help, .kit-ed-story, .kit-site-footer) .wp-block-buttons > .wp-block-button.is-style-kits-primary > .wp-block-button__link.wp-element-button:hover { /* outranks the dark-surface fill below */ background: var(--kit-color-on-ink); border-color: var(--kit-color-on-ink); color: var(--kit-color-ink); } .is-style-kits-secondary .wp-block-button__link:hover { background: var(--kit-color-ink); border-color: var(--kit-color-ink); color: var(--kit-color-on-ink); } .is-style-kits-ghost .wp-block-button__link:hover { background: var(--kit-color-on-ink); border-color: var(--kit-color-on-ink); color: var(--kit-color-ink); } .is-style-kits-small .wp-block-button__link { min-height: var(--kit-size-target); } .is-style-kits-hairline { border-width: 1px 0 0 !important; height: 0; opacity: 1; } .kit-finder button { background: var(--kit-color-ink); color: var(--kit-color-on-ink); } .kit-finder button:hover { background: var(--kit-color-accent); color: var(--kit-color-on-accent); } :is(.wp-element-button, button)[disabled] ,:is(.wp-element-button, button)[aria-disabled=true] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } :is(.wp-element-button, button):not(.kit-btn).is-loading { position: relative; color: transparent !important; pointer-events: none; } :is(.wp-element-button, button):not(.kit-btn).is-loading::after { content: ""; position: absolute; width: 1.1em; height: 1.1em; border-radius: 50%; border: 1px solid var(--kit-color-on-accent); border-right-color: transparent; animation: kit-spin 700ms linear infinite; } /* 4.1b Button sizes and outline (moved with the button component) */ /* 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: 1px 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: 3px solid var(--kit-color-focus); outline-offset: 3px; } .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: 48px; } .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); } .kit-card-media img ,.wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--kit-motion-slow) var(--kit-motion-ease), opacity var(--kit-motion-slow) var(--kit-motion-ease); } .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: 1px 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 4px 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: 3px solid var(--kit-color-accent); outline-offset: 4px; 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: 4px 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: 4px 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 Topic 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(--s-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(--s-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 .wp-block-query-title { margin: 0; } .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: 1px 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: 1px 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. */ .kit-section-head .wp-block-query-title ,.kit-section-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (min-width: 768px) { :root { --kit-hub-head-h: 12rem; } .kit-section-band .kit-section-head:has(.kit-section-visual) { height: var(--kit-hub-head-h); align-items: stretch; } /* fixed only where there are pictures */ .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 { --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; } .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: 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: 1px 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-color-surface); 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: 3px solid var(--kit-color-focus); outline-offset: 3px; } @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 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: 4px; } .kit-wordmark img { height: 44px; 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: 2px; } .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: 1px 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 { padding-bottom: 64px; } } /* 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: 1px 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: 4px; } .kit-header-search:focus-visible ,.kit-header-emergency:focus-visible { outline: 3px solid var(--kit-color-focus); outline-offset: 2px; } @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: 1px solid color-mix(in srgb, var(--neutral-0) 25%, transparent); } } /* Footer topics: 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-placard-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: 1px solid var(--kit-color-line); vertical-align: top; } .kit-table th { border-bottom: 1px 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: 1px 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); } .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: 1px 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: 1px 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; } @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; } .kit-ad-unit[data-slot-label]::after { content: attr(data-slot-label); font-size: var(--kit-type-xs); color: var(--kit-color-muted); } /* Details (FAQ) */ .wp-block-details { border-bottom: 1px 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: 1px 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: 1px 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: 1px 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.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); } /* Shared button size used in rows */ .kit-btn .kit-ico { --kit-ico-size: 1.1em; } @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; } } /* Filled yellow buttons always use ink text, even inside dark areas that set light link colours */ /* (filled-button text colour on dark areas: kit-primitives.css) */ /* 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); padding-top: var(--kit-space-4); border-top: 1px solid var(--kit-color-line); 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: 1px 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: 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: 1px 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: 3px solid var(--kit-color-focus); outline-offset: 3px; } .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: 2px; text-underline-offset: 4px; } /* 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: 1px 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: 2px solid var(--kit-color-focus); outline-offset: 2px; border-radius: 2px; } .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: 1px 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 topics: 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: 1px 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: 56px; 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: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px 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: 20px; } .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: 1px solid color-mix(in srgb, var(--kit-color-on-ink) 22%, transparent); padding: var(--kit-space-7) 16px var(--kit-space-4) !important; } @media (min-width: 768px) { .kit-site-footer.kit-footer { padding-inline: 32px !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: 1px 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: 3px; } /* 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%; min-height: var(--kit-size-target); } .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: 1px 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: 1px 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: 1px 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; } /* Buttons: ink is the main button; yellow only on dark surfaces (header, hero, help band, footer), where ink would vanish. */ :is(.kit-dark, .kit-site-header, .kit-ed-hero, .kit-ed-help, .kit-ed-story, .kit-site-footer) :is(.kit-btn:not(.kit-btn--secondary):not(.kit-btn--outline):not(.kit-btn--ghost):not(.kit-btn--ink), .wp-element-button:not(:is(.is-style-outline, .is-style-kits-secondary, .is-style-kits-ghost) *), .kit-form button[type=submit]) { background: var(--kit-color-accent); border-color: var(--kit-color-accent); color: var(--kit-color-on-accent); } :is(.kit-dark, .kit-site-header, .kit-ed-hero, .kit-ed-help, .kit-ed-story, .kit-site-footer) :is(.kit-btn:not(.kit-btn--secondary):not(.kit-btn--outline):not(.kit-btn--ghost):not(.kit-btn--ink), .kit-form button[type=submit]):hover { background: var(--kit-color-on-ink); border-color: var(--kit-color-on-ink); color: var(--kit-color-ink); } /* Phones: every hub head the same height (no pictures on phones; intro clamped to two lines) */ @media (max-width: 767px) { .kit-section-band .kit-section-head { min-height: 8.5rem; align-content: start; } } /* Hub band (owner, 9 Oct 2026): from 768px the band is as tall as its content, capped so it ends at most 550px down the page when it holds filters or a search, 450px when it doesn't (cap = end point minus the announcement bar and the nav). It is never padded out to reach the cap. Content sits top left. */ @media (min-width: 768px) { .kit-section-band { box-sizing: border-box; max-height: calc(550px - var(--kit-header-height) - var(--kit-announce-h, 34px)); display: flex; flex-direction: column; } .kit-section-band:not(:has(.kit-filterbar, .kit-section-search)) { max-height: calc(450px - var(--kit-header-height) - var(--kit-announce-h, 34px)); } .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: 16px !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: 12px 32px !important; } } @media (min-width: 1200px) { .kit-site-header { padding: 12px 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: 1px 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: 44px; 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; text-decoration: none !important; } .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; } /* ====================================================================================================== 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(--s-1); min-height: 1.75rem; padding: 0 var(--s-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; } .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--type { background: color-mix(in srgb, var(--kit-color-ink) 7%, transparent); color: var(--kit-color-text); } .kit-tag--issuer { background: color-mix(in srgb, var(--kit-color-success) 11%, transparent); color: var(--kit-color-success); } .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 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(--s-1); } .wp-block-post-date::before, .kit-meta::before { content: "" !important; display: inline-block !important; flex: none; width: 1em; height: 1em; 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(--s-2); min-height: var(--kit-size-target); padding: 0 var(--kit-space-4) !important; border: 1px 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); } /* Buttons carry an icon by what they do (only when the button has no icon of its own) */ :is(.kit-btn, .wp-block-button__link, .kit-form button[type=submit], .kit-disclosure > summary):not(:has(.kit-ico)):is([href^="tel:"], [href^="mailto:"], [href*="wa.me"], [type=submit], [data-ico])::before, .kit-disclosure[data-ico] > summary::before { content: ""; flex: none; width: 1.125em; height: 1.125em; background: currentColor; -webkit-mask: var(--kit-btn-ico, var(--kit-ico-send)) center / contain no-repeat; mask: var(--kit-btn-ico, var(--kit-ico-send)) center / contain no-repeat; } [href^="tel:"]:is(.kit-btn, .wp-block-button__link) { --kit-btn-ico: var(--kit-ico-phone); } [href^="mailto:"]:is(.kit-btn, .wp-block-button__link) { --kit-btn-ico: var(--kit-ico-mail); } [href*="wa.me"]:is(.kit-btn, .wp-block-button__link) { --kit-btn-ico: var(--kit-ico-wa); } .kit-disclosure > summary { gap: var(--s-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: 1px 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: 1px 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; } /* AI-answer summary, key takeaways and FAQs (SEO box fields) */ .kit-ai-summary { max-width: 72ch; margin: var(--kit-space-3) 0 var(--kit-space-4); font-size: var(--kit-type-lead); color: var(--kit-color-text); } .kit-takeaways { max-width: 72ch; margin: 0 0 var(--kit-space-5); padding: var(--kit-space-4); border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card); background: var(--kit-surface-card); } .kit-takeaways-title { font-size: var(--kit-type-h4) !important; margin: 0 0 var(--kit-space-2) !important; } .kit-takeaways ul { margin: 0; padding-left: 1.2em; } .kit-faqs { max-width: 72ch; margin-top: var(--kit-space-6); } .kit-faq { border-top: 1px solid var(--kit-color-line); padding: var(--kit-space-3) 0; } .kit-faq summary { cursor: pointer; font-weight: var(--kit-weight-medium); min-height: var(--kit-size-target); display: flex; align-items: center; } /* 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(--s-1) !important; } } .kit-site-header .wp-block-navigation__responsive-container-open, .kit-site-header .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; 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: 8px 16px !important; } .kit-site-header .kit-header-search, .kit-site-header .kit-header-contact { width: 44px; height: 44px; min-width: 44px; 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: 24px; } .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(--s-2) var(--s-2) 0; } .kit-dd-section { border-bottom: 1px solid var(--kit-color-line); } .kit-dd-section > summary { display: flex; align-items: center; gap: var(--s-2); min-height: var(--kit-size-target); padding: 0 var(--s-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(--s-2); max-height: 16rem; overflow: auto; } .kit-dd-menu-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: var(--s-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: 1px solid var(--kit-color-line); } .kit-endbar-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); } .kit-endbar-share { display: flex; align-items: center; gap: var(--kit-space-2); margin-left: auto; } .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; } .kit-error-search input { flex: 1 1 auto; min-height: var(--kit-size-control); padding: 0 var(--kit-space-4); border: 1px 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: 1px 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 button carries an icon by what it does, and it moves when you point at it. Function icons (call, email, WhatsApp, send, search, download, claim, report, volunteer) sit before the label; a link button with no function icon gets an arrow after its label — → inside the site, ↗ when it leaves the site. The icon nudges 3px on hover and focus (spring motion); nothing moves under reduced motion. */ :is(a.kit-btn, a.wp-block-button__link, a.wp-element-button):not(:has(.kit-ico)):not([href^="tel:"]):not([href^="mailto:"]):not([href*="wa.me"]):not([download]):not([href$=".pdf"]):not([data-ico]):not(.kit-btn--icon):not(.kit-dd-btn):not([aria-haspopup])::after { content: ""; flex: none; width: 1.125em; height: 1.125em; margin-left: .45em; background: currentColor; -webkit-mask: var(--kit-cta-arrow, var(--kit-ico-arrow-right)) center / contain no-repeat; mask: var(--kit-cta-arrow, var(--kit-ico-arrow-right)) center / contain no-repeat; transition: transform var(--kit-duration-spring) var(--kit-ease-spring); } :is(a.kit-btn, a.wp-block-button__link, a.wp-element-button)[href^="http"]:not([href*="animalwrites.in"]) { --kit-cta-arrow: var(--kit-ico-arrow-up-right); } :is(a.kit-btn, a.wp-block-button__link, a.wp-element-button):is([download], [href$=".pdf"])::before { content: ""; flex: none; width: 1.125em; height: 1.125em; margin-right: .45em; background: currentColor; -webkit-mask: var(--kit-ico-download) center / contain no-repeat; mask: var(--kit-ico-download) center / contain no-repeat; transition: transform var(--kit-duration-spring) var(--kit-ease-spring); } :is(.kit-btn, .wp-block-button__link, .wp-element-button) { display: inline-flex; align-items: center; justify-content: center; } :is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]) > .kit-ico, :is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-disclosure > summary)::before { transition: transform var(--kit-duration-spring) var(--kit-ease-spring); } :is(.kit-btn, .wp-block-button__link, .wp-element-button):is(:hover, :focus-visible)::after { transform: translateX(3px); } :is(.kit-btn, .wp-block-button__link, .wp-element-button)[href^="http"]:not([href*="animalwrites.in"]):is(:hover, :focus-visible)::after { transform: translate(2px, -2px); } :is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-disclosure > summary):is(:hover, :focus-visible)::before, :is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit]):is(:hover, :focus-visible) > .kit-ico { transform: translateX(2px) scale(1.06); } .kit-btn.is-loading::before { transform: none !important; } @media (prefers-reduced-motion: reduce) { :is(.kit-btn, .wp-block-button__link, .wp-element-button, .kit-form button[type=submit], .kit-disclosure > summary)::before, :is(.kit-btn, .wp-block-button__link, .wp-element-button)::after, :is(.kit-btn, .wp-block-button__link, .wp-element-button) > .kit-ico { transition: none; transform: none !important; } } /* 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; 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); will-change: transform; } 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: 1px 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: 4px; text-decoration-thickness: 1px; } .kit-card:has(a:focus-visible) { outline: var(--kit-focus-width, 2px) solid var(--kit-color-focus); outline-offset: 4px; 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(--s-6); padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s-2); counter-reset: none; } .kit-steps-progress li { display: flex; align-items: center; gap: var(--s-2); padding-top: var(--s-3); border-top: 3px 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: 1px 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; } /* 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 topic 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: 1 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 { margin-left: auto; flex: none; } .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); } /* ---------- 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 ---------- */ .kit-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--kit-size-control); padding: 0 var(--s-6); border: var(--kit-border-control) solid var(--kit-color-accent); border-radius: var(--kit-radius-pill); background: var(--kit-color-accent); color: var(--kit-color-on-accent); font: inherit; font-size: var(--fluid-body-md); font-weight: var(--kit-weight-medium); 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); } .kit-btn--secondary, .kit-btn--outline { background: transparent; border-color: var(--kit-color-line); color: var(--kit-color-ink); } .kit-btn--ghost { background: transparent; border-color: currentColor; color: inherit; } /* Filled buttons keep their own text colour inside dark areas that recolour links */ a.kit-btn:not(.kit-btn--secondary):not(.kit-btn--outline):not(.kit-btn--ghost):not(.kit-btn--ink) { color: var(--kit-color-on-ink); } a.kit-btn--ink { color: var(--kit-color-on-ink); } .kit-btn--ink { background: var(--kit-color-ink); border-color: var(--kit-color-ink); color: var(--kit-color-on-ink); } .kit-btn--sm { min-height: var(--kit-size-target); padding: 0 var(--s-4); font-size: var(--fluid-body-sm); } /* Icon only: square, the icon in the middle; needs an aria-label (or screen-reader text) naming the action. */ .kit-btn--icon { width: var(--kit-size-control); padding: 0; gap: 0; } .kit-btn--icon.kit-btn--sm { width: var(--kit-size-target); } .kit-btn .kit-ico { --kit-ico-size: 1.125em; } @media (hover: hover) { .kit-btn:hover { background: var(--neutral-8); border-color: var(--neutral-8); color: var(--kit-color-on-ink); } .kit-btn--ink:hover { background: var(--kit-color-accent); border-color: var(--kit-color-accent); color: var(--kit-color-on-accent); } .kit-btn--ghost:hover { background: var(--kit-color-on-ink); border-color: var(--kit-color-on-ink); color: var(--kit-color-ink); } a.kit-btn:not(.kit-btn--secondary):not(.kit-btn--outline):not(.kit-btn--ghost):not(.kit-btn--ink):hover { color: var(--kit-color-on-ink); } } .kit-btn:active { transform: translateY(1px); } .kit-btn:is([disabled], [aria-disabled=true]) { opacity: var(--opacity-disabled); cursor: not-allowed; transform: none; } .kit-btn.is-loading, .kit-btn[aria-busy=true] { position: relative; pointer-events: none; } .kit-btn.is-loading::before, .kit-btn[aria-busy=true]::before { content: ""; width: 1em; height: 1em; border-radius: var(--radius-full); border: var(--kit-border-control) solid currentColor; border-right-color: transparent; animation: kit-spin 700ms linear infinite; } /* ---------- 11. Form field ---------- */ .kit-field { margin: 0 0 var(--s-4); } /* Auto-paragraphs around shortcode output must not add space inside a field */ .kit-field > p:empty { display: none; } .kit-field > p { margin: 0; } .kit-field > label, .kit-field > .kit-field-label { display: block; margin: 0 0 var(--s-2); font-weight: var(--kit-weight-regular); color: var(--kit-color-ink); } .kit-field .kit-optional { font-weight: var(--kit-weight-regular); color: var(--kit-color-muted); } .kit-field-control { position: relative; } .kit-field-control > .kit-field-icon { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--kit-color-muted); pointer-events: none; } .kit-field .kit-field-control:has(> .kit-field-icon) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select) { padding-left: calc(var(--s-3) + 1.25rem + var(--s-2)); } .kit-field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) { width: 100%; box-sizing: border-box; min-height: var(--kit-size-target); padding: 0 var(--s-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-field textarea { padding-block: var(--s-3); min-height: 7rem; } /* Selects: same height and look as text fields in every browser (Safari draws native selects shorter) */ .kit-field select, :where(select:not([multiple]):not([size])) { /* every single select, in or out of a field */ -webkit-appearance: none; appearance: none; height: var(--kit-size-target); padding-right: calc(var(--s-3) + 1.25rem); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-3) center; background-size: 1rem; } .kit-field input:not([type=checkbox]):not([type=radio]):not([type=file]) { height: var(--kit-size-target); } @media (hover: hover) { .kit-field :is(input, select, textarea):hover:not([disabled]):not([readonly]) { box-shadow: 0 0 0 var(--kit-focus-width) var(--kit-color-surface); } } .kit-field :is(input, select, textarea):focus-visible { outline: var(--kit-focus-width) solid var(--kit-color-focus); outline-offset: var(--kit-focus-offset); } .kit-field :is(input, select, textarea)[aria-invalid=true] { border-color: var(--color-peach); } .kit-field :is(input, select, textarea).is-valid { border-color: var(--color-green); } .kit-field :is(input, select, textarea)[disabled] { opacity: var(--opacity-disabled); cursor: not-allowed; } .kit-field :is(input, textarea)[readonly] { background: var(--kit-color-surface-soft); border-style: dashed; } .kit-field-message { display: block; min-height: 1.4em; margin-top: var(--s-1); font-size: var(--fluid-body-sm); color: var(--kit-color-danger); } /* reserved line: no jump */ .kit-field-message:not(:empty)::before { content: "⚠ "; } .kit-field-hint { display: block; margin: 0 0 var(--s-2); font-size: var(--fluid-body-sm); color: var(--kit-color-muted); } /* Forms: empty paragraphs and line breaks left by auto-formatting around shortcodes never take a place in the layout */ :is(.kit-form, .kit-form) > :is(p:empty, br, p:has(> input[type=hidden]):not(:has(> :not(input[type=hidden])))) { display: none; } /* hidden fields still submit */ /* ALTCHA in automatic mode: present (it must run) but not shown */ .kit-captcha--invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* ---------- 12. Checkbox ---------- */ .kit-checkbox { display: flex; gap: var(--s-3); align-items: flex-start; min-height: var(--kit-size-target); padding-block: var(--s-2); cursor: pointer; font-weight: var(--kit-weight-regular); } .kit-checkbox input { width: var(--kit-size-check); height: var(--kit-size-check); margin: 0.1em 0 0; flex: none; accent-color: var(--kit-color-ink); } .kit-checkbox input[aria-invalid=true] { outline: var(--kit-border-control) solid var(--color-peach); outline-offset: var(--kit-focus-offset); } /* ---------- 13. Form status ---------- */ .kit-form-status:empty { display: none; } .kit-form-status { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--kit-radius-control); border-left: var(--s-1) solid var(--kit-color-danger); background: var(--kit-color-danger-soft); color: var(--kit-color-ink); } .kit-form-status.is-success { border-left-color: var(--kit-color-success); background: var(--kit-color-success-soft); } /* ---------- 14. Banner (pattern kits-by-wugweb/banner): 16:5 wide, 4:3 on phones ---------- */ .wp-block-cover.kit-banner { min-height: 0 !important; aspect-ratio: 16 / 5; border-radius: var(--kit-radius-hero); overflow: hidden; margin-block: 0 var(--s-8); } @media (max-width: 767px) { .wp-block-cover.kit-banner { aspect-ratio: 4 / 3; } } /* ---------- 15. Breadcrumb (same as .kit-crumbs) ---------- */ .kit-breadcrumb { margin: 0 0 var(--s-2); font-size: var(--fluid-body-sm); color: var(--kit-color-muted); } @media (prefers-reduced-motion: reduce) { :is(.kit-chip, .wp-block-post-terms a, .kit-filter-pill, .kit-btn, .kit-field :is(input, select, textarea)) { transition: opacity var(--kit-motion-fast) linear; } .kit-btn:active { transform: none; } .kit-btn.is-loading::before, .kit-btn[aria-busy=true]::before { animation: none; opacity: var(--opacity-60); } } /* ---------- 16. Form standard (S5.2): one look for every form, from tokens ---------- */ .kit-field > label, .kit-field > .kit-field-label, .kit-check-group > legend { font-size: var(--fluid-body-sm); font-weight: var(--kit-weight-regular); color: var(--neutral-9); } .kit-field .kit-optional { font-weight: 400; color: var(--neutral-5); } .kit-field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) { min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-2); background-color: var(--neutral-0); border: 1px solid var(--neutral-3); color: var(--neutral-10); } .kit-field input:not([type=checkbox]):not([type=radio]):not([type=file]), .kit-field select { height: 44px; } .kit-field textarea { padding-block: var(--s-3); min-height: calc(5 * 1.5em + 2 * var(--s-3)); } .kit-field :is(input, textarea)::placeholder { color: var(--neutral-4); opacity: 1; } .kit-field-control > .kit-field-icon { --kit-ico-size: 18px; width: 18px; height: 18px; color: var(--neutral-5); } @media (hover: hover) { .kit-field :is(input, select, textarea):hover:not([disabled]):not([readonly]) { border-color: var(--neutral-5); box-shadow: none; } } .kit-field :is(input, select, textarea):focus, .kit-field :is(input, select, textarea):focus-visible { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 2px var(--color-blue); } /* the ring is never removed */ .kit-field :is(input, select, textarea)[aria-invalid=true] { border-color: var(--color-peach); padding-right: calc(var(--s-3) + 18px + var(--s-2)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-3) center; background-size: 18px; } .kit-field select[aria-invalid=true] { background-position: right calc(var(--s-3) + 1.25rem) center, right var(--s-3) center; } .kit-field :is(input, select, textarea).is-valid { border-color: var(--color-green); } .kit-field :is(input, select, textarea)[disabled] { opacity: var(--opacity-disabled); } .kit-field-hint { font-size: var(--fluid-caption); color: var(--neutral-5); } .kit-field-message:not(:empty)::before { content: none; } /* the alert icon sits in the field */ .kit-check-group { border: 0; padding: 0; margin: 0 0 var(--s-4); min-width: 0; } .kit-check-group > legend { padding: 0; margin: 0 0 var(--s-2); } .kit-check-group.is-invalid .kit-checkbox input { outline: 2px solid var(--color-peach); outline-offset: 2px; } /* Button: primary yellow, dark text, 44px, radius --r-2; loading = spinner + label */ :is(.kit-form, .kit-form) .kit-btn, .kit-disclosure > summary.kit-btn { min-height: 44px; } .kit-btn:not(.kit-btn--secondary):not(.kit-btn--outline):not(.kit-btn--ghost):not(.kit-btn--ink) { background: var(--kit-color-ink); border-color: var(--kit-color-ink); color: var(--kit-color-on-ink); } /* Layout: one column under 768px, at most two; the button bottom-left */ .kit-form-grid { display: grid; gap: 0 var(--s-4); grid-template-columns: 1fr; } @media (min-width: 768px) { .kit-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kit-form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: flex-start; margin-top: var(--s-2); } /* On a dark band (newsletter) */ .kit-form--on-dark .kit-field > label, .kit-form--on-dark .kit-checkbox, .kit-form--on-dark .kit-check-group > legend { color: var(--neutral-0); } .kit-form--on-dark .kit-field .kit-optional, .kit-form--on-dark .kit-field-hint { color: var(--neutral-3); } .kit-form--on-dark .kit-field-message { color: var(--color-peach); } /* Expandable form (S5.6) */ .kit-disclosure { margin: 0; } .kit-disclosure > summary { list-style: none; display: inline-flex; width: auto; cursor: pointer; } .kit-disclosure > summary::-webkit-details-marker { display: none; } .kit-disclosure .kit-disclosure-close, .kit-disclosure[open] .kit-disclosure-open { display: none; } .kit-disclosure[open] .kit-disclosure-close { display: inline; } .kit-disclosure-body { margin-top: var(--s-4); } /* Multi-step form (S5.7): with JavaScript one step shows at a time; without, all steps show */ .kit-step { border: 0; padding: 0; margin: 0 0 var(--s-4); min-width: 0; } .kit-step > legend { padding: 0; margin: 0 0 var(--s-3); font-size: var(--fluid-body-md); font-weight: 600; color: var(--neutral-10); } .kit-step-count { display: block; font-size: var(--fluid-caption); font-weight: 500; color: var(--neutral-5); } .kit-step-nav { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); } .kit-steps:not(.is-stepped) .kit-step-nav [data-step-next], .kit-steps:not(.is-stepped) .kit-step-nav [data-step-back] { display: none; } .kit-counter { margin-top: var(--s-1); } /* The dropdown arrow on every single select (fix 12 Oct 2026): the field rule above sets the whole `background` with a * stronger selector, which removed the arrow. */ .kit-field select:not([multiple]):not([size]), :where(select:not([multiple]):not([size])) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right var(--s-3) center !important; background-size: 1rem !important; padding-right: calc(var(--s-3) + 1.25rem) !important; }