/* * Animal Writes — what is specific to Animal Writes. Generic components live in Kits (kits-by-wugweb/assets/css/kit.css) * and load first; this file adds the domain components and brand-specific layouts. */ /* 6. Page components --------------------------------------------------------- */ /* Hero — copy + actions + quick help on the left, photo on the right, live counts below */ .aw-hero { padding-block: var(--kit-space-6) var(--kit-space-6) !important; background: linear-gradient(180deg, var(--kit-color-bg) 0%, var(--kit-color-canvas) 100%); } .aw-hero-grid { display: grid; gap: var(--kit-space-6); align-items: center; } @media (min-width: 1200px) { .aw-hero-grid { grid-template-columns: 1.25fr 0.75fr; gap: var(--kit-space-8); } } .kit-hero-title { margin: 0 0 var(--kit-space-4); } .aw-hero-lead { font-size: var(--kit-type-lead); line-height: 1.5; color: var(--kit-color-muted); margin: 0 0 var(--kit-space-6); max-width: 46ch; } .aw-hero-actions { display: flex; flex-wrap: wrap; gap: var(--kit-space-3); margin-bottom: var(--kit-space-6); } .aw-hero-media { margin: 0; position: relative; } .aw-hero-media img { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: min(68vh, 540px); object-fit: cover; object-position: 50% 15%; border-radius: var(--kit-radius-hero); box-shadow: var(--kit-elevation-3); } .aw-hero-media figcaption { position: absolute; left: var(--kit-space-4); right: var(--kit-space-4); bottom: var(--kit-space-4); padding: var(--kit-space-3) var(--kit-space-4); border-radius: var(--kit-radius-card); background: color-mix(in srgb, var(--neutral-9) 78%, transparent); backdrop-filter: blur(6px); color: var(--kit-color-on-ink); font-size: var(--kit-type-xs); line-height: 1.45; } .aw-stats { list-style: none; margin: var(--kit-space-7) 0 0; padding: var(--kit-space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kit-space-4); background: var(--kit-color-raised); border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card); box-shadow: var(--kit-elevation-1); } @media (min-width: 768px) { .aw-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .aw-stats li { max-width: none; display: flex; flex-direction: column; gap: 2px; padding-left: var(--kit-space-4); border-left: 3px solid var(--kit-color-accent); } .aw-stats a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; } .aw-stats strong { font-size: var(--kit-type-stat); font-weight: var(--kit-weight-bold); letter-spacing: var(--kit-tracking-heading); color: var(--kit-color-ink); line-height: 1.1; } .aw-stats span { font-size: var(--kit-type-xs); font-weight: var(--kit-weight-medium); color: var(--kit-color-muted); } @media (max-width: 1199px) { .aw-hero-media img { aspect-ratio: 4 / 3; } .aw-hero { padding-top: var(--kit-space-5) !important; } } /* Finder */ .kit-finder { display: flex; flex-wrap: wrap; gap: var(--kit-space-3); align-items: center; margin: var(--kit-space-5) 0 var(--kit-space-4); padding: var(--kit-space-3); background: var(--kit-color-raised); border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card); box-shadow: var(--kit-elevation-2); } .aw-finder-band { padding-block: var(--kit-space-section) !important; } .aw-finder-band h2 { margin-bottom: var(--kit-space-2); } .kit-finder label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .kit-finder select { flex: 1 1 16rem; min-width: 0; font-size: var(--kit-type-lead); } .aw-emergency { border-left: 4px solid var(--kit-color-danger); padding-left: var(--kit-space-3); } /* Campaign photo band */ .aw-band .wp-block-heading { color: var(--kit-color-on-ink); } .aw-band p { color: color-mix(in srgb, var(--neutral-0) 85%, transparent); } .aw-mosaic img { aspect-ratio: 3/4; object-fit: cover; border-radius: var(--kit-radius-media); transition: transform var(--kit-motion-slow) var(--kit-motion-ease); } .aw-mosaic figure:hover img { transform: scale(1.03) rotate(-0.5deg); } /* Helplines */ .aw-helplines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: var(--kit-space-4); margin: var(--kit-space-4) 0 var(--kit-space-7); } .aw-helpline { border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card); padding: var(--kit-space-4) var(--kit-space-5); background: var(--kit-color-raised); transition: box-shadow var(--kit-motion-base) var(--kit-motion-ease), transform var(--kit-motion-base) var(--kit-motion-ease); } .aw-helpline:hover { box-shadow: var(--kit-elevation-2); transform: translateY(var(--kit-motion-lift)); } .aw-helpline h3 { font-size: var(--kit-type-h4); margin: var(--kit-space-1) 0 var(--kit-space-2); } .aw-helpline p { margin: 0 0 var(--kit-space-2); } .aw-helpline-num { font-family: var(--kit-font-display); font-weight: var(--kit-weight-bold); letter-spacing: var(--kit-tracking-heading); font-size: var(--kit-type-stat); line-height: 1; text-decoration: none; color: var(--kit-color-ink); display: inline-block; min-height: var(--kit-size-target); } .aw-helpline:first-child { border-color: var(--kit-color-danger); box-shadow: inset 6px 0 0 var(--kit-color-danger); } .aw-helpline-src { font-size: var(--kit-type-xs); color: var(--kit-color-muted); } /* PDF viewer */ .aw-pdf { margin-block: var(--kit-space-6); } .aw-pdf .wp-block-file__embed { width: 100%; height: min(80vh, 900px); border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card); background: var(--kit-color-raised); } .aw-pdf-actions { display: flex; flex-wrap: wrap; gap: var(--kit-space-4); align-items: center; margin-top: var(--kit-space-4); } .aw-doc-preview { display: flex; flex-wrap: wrap; gap: var(--kit-space-6); align-items: center; margin-block: var(--kit-space-6); } .aw-doc-preview img { display: block; width: 240px; max-width: 100%; height: auto; border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card); } .aw-doc-preview-text { flex: 1 1 240px; } @media (max-width: 767px) { .aw-pdf .wp-block-file__embed { height: 60vh; } } /* Letters: print */ .kit-print { display: flex; flex-wrap: wrap; gap: var(--kit-space-4); align-items: center; margin: 0 0 var(--kit-space-5); } .kit-print span { color: var(--kit-color-muted); } /* Campaign: countdown, counts, steps */ .aw-countdown { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kit-space-2) var(--kit-space-4); margin: 0 0 var(--kit-space-4); } .aw-cd-num { font-family: var(--kit-font-display); font-weight: var(--kit-weight-bold); letter-spacing: var(--kit-tracking-heading); font-size: var(--kit-type-display); line-height: 1; color: var(--kit-color-ink); } .aw-cd-unit { font-weight: var(--kit-weight-strong); font-size: var(--kit-type-lead); } .aw-cd-when { color: var(--kit-color-muted); flex-basis: 100%; } .aw-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--kit-space-5); } .aw-count { display: flex; flex-direction: column; } .aw-count strong { font-family: var(--kit-font-display); font-weight: var(--kit-weight-bold); letter-spacing: var(--kit-tracking-heading); font-size: var(--kit-type-stat); line-height: 1; color: var(--kit-color-accent); } .aw-steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: var(--kit-space-4); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); } .aw-steps li { counter-increment: s; border-top: 3px solid var(--kit-color-ink); padding-top: var(--kit-space-3); max-width: none; } .aw-steps li::before { content: counter(s); display: block; font-family: var(--kit-font-display); font-size: var(--kit-type-h2); line-height: 1; color: var(--kit-color-accent-ink); margin-bottom: var(--kit-space-1); } /* Testimonials */ .aw-testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--kit-space-5); margin: var(--kit-space-5) 0; } .aw-testimonial { margin: 0; padding: var(--kit-space-5); background: var(--kit-color-surface); border-radius: var(--kit-radius-card); } .aw-testimonial blockquote { margin: 0 0 var(--kit-space-4); font-family: var(--kit-font-display); font-weight: var(--kit-weight-medium); font-size: var(--kit-type-h4); line-height: 1.4; border: 0; padding: 0; } .aw-testimonial figcaption { display: flex; flex-direction: column; font-size: var(--kit-type-sm); } .aw-testimonial figcaption span { color: var(--kit-color-muted); } .aw-t-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: var(--kit-space-3); } /* Claim box on listings */ .kit-claim { margin-block: var(--kit-space-7); padding: var(--kit-space-5); border-radius: var(--kit-radius-card); background: var(--kit-color-surface-soft); border: 1px solid var(--kit-color-line); } .kit-claim summary { cursor: pointer; font-weight: var(--kit-weight-strong); min-height: var(--kit-size-target); display: flex; align-items: center; } .kit-claim details[open] > summary { margin-bottom: var(--kit-space-4); } /* Motion: the one orchestrated moment (homepage hero on first view). Keyframes come from Kits. */ .aw-motion .aw-hero :is(.kit-hero-title, .aw-hero-lead, .aw-hero-actions, .aw-quick, .aw-hero-media, .aw-stats), .aw-motion .kit-ed-hero :is(.aw-ed-hero-title, .aw-ed-hero-sub, .aw-ed-hero-actions) { animation: kit-rise var(--kit-motion-slow) var(--kit-motion-ease) both; } .aw-motion .kit-ed-hero .aw-ed-hero-sub { animation-delay: 90ms; } .aw-motion .kit-ed-hero .aw-ed-hero-actions { animation-delay: 180ms; } .aw-motion .aw-hero .aw-hero-lead { animation-delay: 80ms; } .aw-motion .aw-hero .aw-hero-actions { animation-delay: 160ms; } .aw-motion .aw-hero .aw-hero-media { animation-delay: 100ms; animation-duration: 520ms; } .aw-motion .aw-hero .aw-stats { animation-delay: 280ms; } @media (prefers-reduced-motion: reduce) { .aw-helpline:hover { transform: none; } } /* Listing card: compact row on small screens */ @media (max-width: 767px) { .aw-listing-card { display: grid; grid-template-columns: 72px 1fr; column-gap: var(--kit-space-4); align-items: center; } .aw-listing-card > * { grid-column: 2; } .aw-listing-card > .kit-logo { grid-column: 1; grid-row: 1 / span 4; max-width: 72px; margin: 0; } .wp-block-post-template.is-layout-grid { gap: var(--kit-space-4); } } .kit-share-copy { cursor: pointer; } /* Directory search bar (Phase 11 E2): the main element of /directory/. One row from 1024px; Name on its own row from 768px; stacked below 768px. Fields come from kit-field (44px, label above). */ .aw-dir-search { display: grid; gap: var(--s-3) var(--s-4); grid-template-columns: 1fr; align-items: end; margin: 0; max-width: var(--kit-width-wide); padding: var(--s-6); background: var(--kit-color-raised); border-radius: var(--kit-radius-card); box-shadow: var(--kit-elevation-1); } .aw-dir-search .kit-field { margin: 0; min-width: 0; } .aw-dir-search > p:empty, .aw-dir-search > br { display: none; } /* left by auto-paragraphs around the shortcode */ .kit-section-band--compact { padding-bottom: var(--s-8) !important; } /* Directory: height = content (E1) */ .aw-dir-search select { text-overflow: ellipsis; } .aw-dir-search select:disabled { opacity: var(--opacity-60); cursor: not-allowed; } .aw-dir-submit .kit-btn { width: 100%; min-height: var(--kit-size-target); } .aw-dir-check { grid-column: 1 / -1; } @media (min-width: 768px) { .aw-dir-search { grid-template-columns: repeat(4, minmax(0, 1fr)); } .aw-dir-q { grid-column: 1 / -1; } } .aw-dir-search select { font-size: var(--fluid-body-sm); } @media (min-width: 1200px) { .aw-dir-search { grid-template-columns: minmax(9rem, 2fr) repeat(3, minmax(11.5rem, 1fr)) auto; } .aw-dir-q { grid-column: auto; } .aw-dir-submit .kit-btn { width: auto; } } /* "Choose a state first" fits whole */ /* Directory results: count line and sort */ .aw-dir-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-4); } .aw-dir-results-head p { margin: 0; font-weight: var(--kit-weight-strong); color: var(--kit-color-ink); } .aw-org-contact { display: inline-flex; gap: var(--s-2); color: var(--kit-color-muted); } /* Browse by state (Directory hub and home): every state/UT with listings, A–Z, with counts */ .aw-browse-states { margin: var(--s-12) 0 0; } .aw-browse-states ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--s-6); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1200px) { .aw-browse-states ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .aw-browse-states a { display: flex; justify-content: space-between; gap: var(--s-2); align-items: center; min-height: var(--kit-size-target); border-bottom: 1px solid var(--kit-color-line); color: var(--kit-color-ink); text-decoration: none; } @media (hover: hover) { .aw-browse-states a:hover { color: var(--kit-color-link); } } /* =========================================================================== 9. Editorial homepage — HELP → KNOW → ACT → FOLLOW Warm off-white page, black type, one accent (Wugweb yellow #ffbe1a, fills only; links and text accents in blue #0062b8), thin rules, large numbers, full-bleed documentary photography, minimal rounding. Classes: .aw-ed-* =========================================================================== */ body { background: var(--kit-color-canvas); } .kit-ed-hero, .kit-ed-help, .aw-ed-news, .aw-ed-law, .aw-ed-find, .aw-ed-learn, .aw-ed-act-band, .kit-ed-story { padding-block: var(--kit-space-section); } /* 01 Hero: full-bleed photograph, type on a dark gradient */ .kit-ed-hero { position: relative; padding: 0 !important; min-height: min(88vh, 760px); display: grid; align-items: end; overflow: hidden; background: var(--kit-color-ink); color: var(--kit-color-on-ink); } .kit-ed-hero > * { max-width: none !important; } .aw-ed-hero-media { position: absolute; inset: 0; margin: 0; } .aw-ed-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } .aw-ed-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-9) 15%, transparent) 0%, color-mix(in srgb, var(--neutral-9) 35%, transparent) 45%, color-mix(in srgb, var(--neutral-9) 88%, transparent) 100%); } .aw-ed-hero-media figcaption { position: absolute; right: var(--kit-space-gutter); top: var(--kit-space-5); z-index: 1; font-size: var(--kit-type-xs); font-weight: var(--kit-weight-medium); color: color-mix(in srgb, var(--neutral-0) 85%, transparent); } .aw-ed-hero-copy { position: relative; z-index: 1; width: 100%; max-width: var(--kit-width-wide) !important; margin: 0 auto; padding: var(--kit-space-9) var(--kit-space-gutter) var(--kit-space-8); } .aw-ed-hero-title { font-size: var(--kit-type-h1) !important; line-height: 1.05; letter-spacing: -0.025em; color: var(--kit-color-on-ink) !important; margin: 0 0 var(--kit-space-5); } .aw-ed-hero-sub { font-size: var(--kit-type-lead); color: color-mix(in srgb, var(--neutral-0) 90%, transparent); max-width: 40ch; margin: 0 0 var(--kit-space-6); } .aw-ed-hero-actions { display: flex; flex-wrap: wrap; gap: var(--kit-space-3); } /* 04 Law: big type, typographic rows */ .aw-ed-law { background: var(--kit-color-raised); } .aw-ed-law-title { font-size: var(--kit-type-h2) !important; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 var(--kit-space-7); padding-top: var(--kit-space-4); border-top: 1px solid var(--kit-color-line); } .aw-ed-law-grid { display: grid; gap: var(--kit-space-6); } @media (min-width: 1200px) { .aw-ed-law-grid { grid-template-columns: 1fr 2fr; gap: var(--kit-space-8); } } .aw-ed-law-side p { font-size: var(--kit-type-lead); color: var(--kit-color-muted); margin-top: 0; } .aw-ed-links { list-style: none; margin: var(--kit-space-5) 0 0; padding: 0; } .aw-ed-links li { border-top: 1px solid var(--kit-color-line); max-width: none; } .aw-ed-links a { display: flex; justify-content: space-between; align-items: center; gap: var(--kit-space-3); min-height: 3.25rem; color: var(--kit-color-ink); font-weight: var(--kit-weight-strong); text-decoration: none; } .aw-ed-links a:hover { color: var(--kit-color-accent-ink); } .kit-ed-rows .wp-block-post-template > li { display: grid !important; grid-template-columns: 7.5rem 1fr; grid-template-areas: "date terms" "date title"; column-gap: var(--kit-space-5); padding: var(--kit-space-5) 0 !important; border-top: 1px solid var(--kit-color-ink) !important; } .kit-ed-rows .wp-block-post-template > li:last-child { border-bottom: 1px solid var(--kit-color-ink) !important; } .kit-ed-rows :is(.wp-block-post-date, .aw-law-date) { grid-area: date; align-items: flex-start !important; font-size: var(--kit-type-sm) !important; font-weight: var(--kit-weight-strong) !important; color: var(--kit-color-ink) !important; padding-right: 0 !important; margin: 0 !important; } .kit-ed-rows :is(.wp-block-post-date, .aw-law-date)::before { display: none; } .kit-ed-rows .wp-block-post-terms { grid-area: terms; } .kit-ed-rows .wp-block-post-title { grid-area: title; font-size: var(--kit-type-h3) !important; line-height: 1.25 !important; margin: var(--kit-space-2) 0 0 !important; } @media (max-width: 767px) { .kit-ed-rows .wp-block-post-template > li { grid-template-columns: 1fr; grid-template-areas: "date" "terms" "title"; } } /* 05 Find help: total, search, every state as type */ .aw-ed-find { background: var(--kit-color-surface); } .kit-ed-find-head { padding-top: var(--kit-space-4); border-top: 1px solid var(--kit-color-line); } .aw-ed-big { font-size: var(--kit-type-h3); margin: var(--kit-space-3) 0 var(--kit-space-6); max-width: none; } .aw-ed-big strong { font-weight: var(--kit-weight-bold); } .aw-ed-search { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-2); padding: var(--kit-space-2) var(--kit-space-2) var(--kit-space-2) var(--kit-space-4); background: var(--kit-color-raised); border-radius: var(--kit-radius-card); box-shadow: var(--kit-elevation-2); margin-bottom: var(--kit-space-7); } .aw-ed-search > .kit-ico { color: var(--kit-color-muted); } .aw-ed-search input[type=search] { flex: 1 1 14rem; min-width: 0; min-height: var(--kit-size-control); border: 0; background: transparent; font: inherit; font-size: var(--kit-type-lead); color: var(--kit-color-ink); } .aw-ed-search input[type=search]:focus-visible, .aw-ed-search select:focus-visible { outline: 3px solid var(--kit-color-focus); outline-offset: 2px; border-radius: var(--kit-radius-control); } .aw-ed-search select { flex: 0 1 15rem; height: var(--kit-size-control); min-height: var(--kit-size-control); border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-control); background-color: var(--kit-color-canvas); font: inherit; padding: 0 calc(var(--kit-space-3) + 1.25rem) 0 var(--kit-space-3); color: var(--kit-color-ink); } /* 06 Learn: three columns, one system */ .aw-ed-cols { display: grid; gap: var(--kit-space-6); } .aw-ed-cols > * { margin-block: 0 !important; } /* grid gap does the spacing; WordPress's block gap would push cards 2 and 3 down */ @media (min-width: 1200px) { .aw-ed-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .aw-ed-col { display: flex; flex-direction: column; background: var(--kit-color-raised); border-radius: var(--kit-radius-card); padding: var(--kit-space-6); box-shadow: var(--kit-elevation-1); } .aw-ed-col-title { font-size: var(--kit-type-h3); margin: 0 0 var(--kit-space-4); padding-bottom: var(--kit-space-3); border-bottom: 1px solid var(--kit-color-accent); } .kit-ed-titles .wp-block-post-template > li { padding: var(--kit-space-3) 0 !important; border-top: 1px solid var(--kit-color-line) !important; } .kit-ed-titles .wp-block-post-template > li:first-child { border-top: 0 !important; } .kit-ed-titles .wp-block-post-title { font-size: var(--kit-type-base) !important; font-weight: var(--kit-weight-strong) !important; line-height: 1.4 !important; margin: 0 !important; letter-spacing: -0.01em !important; } .aw-ed-col .kit-ed-more { margin-top: auto; align-self: flex-start; padding-top: var(--kit-space-4); } /* 07 Take action: photo + actions */ .aw-ed-act-grid { display: grid; gap: var(--kit-space-7); align-items: stretch; } @media (min-width: 1200px) { .aw-ed-act-grid { grid-template-columns: 1fr 1.1fr; } } .aw-ed-act-media { margin: 0; } .aw-ed-act-media img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; border-radius: var(--kit-radius-hero); } .kit-ed-act-copy h2 { padding-top: var(--kit-space-4); border-top: 1px solid var(--kit-color-line); } .aw-ed-steps { list-style: none; margin: var(--kit-space-6) 0; padding: 0; } .aw-ed-steps li { max-width: none; border-top: 1px solid var(--kit-color-ink); } .aw-ed-steps li:last-child { border-bottom: 1px solid var(--kit-color-ink); } .aw-ed-steps a { position: relative; display: grid; gap: var(--kit-space-1); padding: var(--kit-space-5) var(--kit-space-8) var(--kit-space-5) 0; color: var(--kit-color-ink); text-decoration: none; } .aw-ed-steps strong { font-size: var(--kit-type-h3); font-weight: var(--kit-weight-bold); letter-spacing: -0.02em; } .aw-ed-steps span:not(.kit-ico) { color: var(--kit-color-muted); } .aw-ed-steps .kit-ico { position: absolute; right: 0; top: 50%; translate: 0 -50%; --kit-ico-size: 1.5rem; transition: transform var(--kit-motion-base) var(--kit-motion-ease); } .aw-ed-steps a:hover .kit-ico { transform: translateX(4px); } .aw-ed-steps a:hover strong { text-decoration: underline; text-underline-offset: 4px; } .aw-ed-opps .wp-block-post-template > li { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kit-space-2); } /* 08 Animal Writes 1.0: documentary */ .kit-ed-story { background: var(--kit-color-ink); color: var(--kit-color-on-ink); } .kit-ed-story h2 { color: var(--kit-color-on-ink) !important; padding-top: var(--kit-space-4); border-top: 1px solid var(--kit-color-accent); } .kit-ed-story-head p { font-size: var(--kit-type-lead); color: color-mix(in srgb, var(--neutral-0) 85%, transparent); max-width: 58ch; margin: var(--kit-space-4) 0 var(--kit-space-7); } .kit-ed-story > .wp-block-buttons { padding-top: var(--kit-space-5); } /* the button block's top margin merges with the timeline's; keep the gap it had as a link */ .aw-ed-mosaic { display: grid; gap: var(--kit-space-2); grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; margin-bottom: var(--kit-space-7); } .aw-ed-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--kit-radius-media); } .aw-ed-mosaic .m1 { grid-column: 1 / -1; grid-row: span 2; } .aw-ed-mosaic .m2, .aw-ed-mosaic .m3, .aw-ed-mosaic .m4, .aw-ed-mosaic .m5 { grid-row: span 2; } @media (min-width: 1200px) { .aw-ed-mosaic { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 8.5rem; } .aw-ed-mosaic .m1 { grid-column: 1 / span 4; grid-row: 1 / span 3; } .aw-ed-mosaic .m2 { grid-column: 5 / span 2; grid-row: 1 / span 3; } .aw-ed-mosaic .m3 { grid-column: 1 / span 2; grid-row: 4 / span 3; } .aw-ed-mosaic .m4 { grid-column: 3 / span 2; grid-row: 4 / span 3; } .aw-ed-mosaic .m5 { grid-column: 5 / span 2; grid-row: 4 / span 3; } } .aw-ed-numbers { list-style: none; margin: 0 0 var(--kit-space-7); padding: 0; display: grid; gap: var(--kit-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1200px) { .aw-ed-numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .aw-ed-numbers li { max-width: none; padding-top: var(--kit-space-3); border-top: 1px solid color-mix(in srgb, var(--neutral-0) 30%, transparent); } .aw-ed-numbers strong { display: block; font-size: var(--kit-type-stat); font-weight: var(--kit-weight-bold); letter-spacing: -0.04em; line-height: 1; color: var(--kit-color-accent); } .aw-ed-numbers span { display: block; margin-top: var(--kit-space-2); font-size: var(--kit-type-sm); color: color-mix(in srgb, var(--neutral-0) 80%, transparent); } .aw-ed-timeline { list-style: none; margin: 0 0 var(--kit-space-7); padding: 0; display: grid; gap: var(--kit-space-4); } @media (min-width: 1200px) { .aw-ed-timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } } .aw-ed-timeline li { position: relative; max-width: none; padding: var(--kit-space-5) var(--kit-space-4) 0 0; border-top: 1px solid color-mix(in srgb, var(--neutral-0) 25%, transparent); } .aw-ed-timeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--kit-color-accent); } .aw-ed-timeline time { display: block; font-weight: var(--kit-weight-bold); color: var(--kit-color-on-ink); } .aw-ed-timeline span { display: block; margin-top: var(--kit-space-1); font-size: var(--kit-type-sm); color: color-mix(in srgb, var(--neutral-0) 75%, transparent); } @media (prefers-reduced-motion: reduce) { .kit-ed-act, .kit-ed-act > .kit-ico, .kit-ed-more .kit-ico, .aw-ed-steps .kit-ico { transition: none; } .kit-ed-act:hover { transform: none; } } @media (max-width: 767px) { .kit-ed-hero { min-height: 0; } .aw-ed-hero-copy { padding: var(--kit-space-9) var(--kit-space-gutter) var(--kit-space-7); } .aw-ed-hero-media img { object-position: 60% 50%; } .aw-ed-hero-actions .aw-btn { flex: 1 1 100%; } .kit-ed-act { min-height: 11rem; padding: var(--kit-space-5); } } .aw-ed-hero-copy { box-sizing: border-box; } @media (max-width: 767px) { .aw-ed-hero-media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-9) 35%, transparent) 0%, color-mix(in srgb, var(--neutral-9) 70%, transparent) 40%, color-mix(in srgb, var(--neutral-9) 92%, transparent) 100%); } } /* =========================================================================== 10. Product systems — HELP · INTELLIGENCE · ACTION · ARCHIVE, plus TRUST Each content type gets its own view; all share tokens, rules and states. =========================================================================== */ .aw-system { margin-bottom: var(--kit-space-section); } /* INTELLIGENCE — Legal Watch register */ .aw-cases { border-top: 1px solid var(--kit-color-line); } .kit-case { position: relative; display: grid; grid-template-columns: 5rem 1fr auto; gap: var(--kit-space-5); align-items: start; padding: var(--kit-space-6) 0; border-bottom: 1px solid var(--kit-color-line); } .kit-case:hover { background: linear-gradient(90deg, transparent, var(--kit-color-raised) 20%, var(--kit-color-raised) 80%, transparent); } .aw-case-date { display: flex; flex-direction: column; gap: var(--kit-space-2); line-height: 1; } .aw-case-cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: var(--radius-xs); border: 1px solid var(--kit-color-line); background: var(--kit-color-raised); } .aw-case-date .d { font-size: var(--kit-type-xs); font-weight: var(--kit-weight-medium); color: var(--kit-color-muted); } .aw-case-date .m { margin-top: var(--kit-space-1); font-size: var(--kit-type-xs); font-weight: var(--kit-weight-strong); color: var(--kit-color-muted); } .aw-case-tags { display: flex; flex-wrap: wrap; gap: var(--kit-space-2); align-items: center; margin-bottom: var(--kit-space-2); } .aw-case-title { font-size: var(--kit-type-h3) !important; line-height: 1.25 !important; margin: 0 0 var(--kit-space-2); max-width: 46ch; } .aw-case-title a { color: var(--kit-color-ink); text-decoration: none; } .aw-case-title a::after { content: ""; position: absolute; inset: 0; } .aw-case-title a:hover { text-decoration: underline; text-underline-offset: 4px; } .aw-case-sum { color: var(--kit-color-muted); margin: 0 0 var(--kit-space-2); } .aw-case-src { font-size: var(--kit-type-xs); font-weight: var(--kit-weight-medium); color: var(--kit-color-muted); margin: 0; display: flex; flex-wrap: wrap; gap: var(--kit-space-3); } .aw-doc { display: inline-flex; align-items: center; gap: 4px; color: var(--kit-color-ink); } .kit-case > .kit-ico--arrow-right { align-self: center; --kit-ico-size: 1.5rem; transition: transform var(--kit-motion-base) var(--kit-motion-ease); } .kit-case:hover > .kit-ico--arrow-right { transform: translateX(4px); } @media (max-width: 767px) { .kit-case { grid-template-columns: 1fr; gap: var(--kit-space-2); } .kit-case > .kit-ico--arrow-right { display: none; } .aw-case-date { flex-direction: row; gap: var(--kit-space-2); align-items: baseline; } .aw-case-date .d { font-size: var(--kit-type-h3); } } /* INTELLIGENCE — News with hierarchy */ .aw-news-top { display: grid; gap: var(--kit-space-6); padding-bottom: var(--kit-space-7); margin-bottom: var(--kit-space-7); border-bottom: 1px solid var(--kit-color-line); } @media (min-width: 1200px) { .aw-news-top { grid-template-columns: 1.7fr 1fr; gap: var(--kit-space-7); } } .aw-story { position: relative; } .kit-story-media { position: relative; overflow: hidden; border-radius: var(--kit-radius-media); background: var(--kit-color-surface); aspect-ratio: 16/10; } .kit-story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--kit-motion-slow) var(--kit-motion-ease); } .aw-story:hover .kit-story-media img { transform: scale(1.03); } .aw-story-ph { display: none; position: absolute; inset: 0; align-items: flex-end; padding: var(--kit-space-4); font-weight: var(--kit-weight-bold); font-size: var(--kit-type-h4); background: var(--kit-color-surface); border-bottom: 6px solid var(--kit-color-accent); } .kit-story-media.is-failed img { display: none; } .kit-story-media.is-failed .aw-story-ph { display: flex; } .aw-story-kicker { margin: var(--kit-space-4) 0 var(--kit-space-1); font-size: var(--kit-type-xs); font-weight: var(--kit-weight-bold); color: var(--kit-color-link); } .aw-story-title { font-size: var(--kit-type-h4) !important; line-height: 1.3 !important; margin: 0 0 var(--kit-space-2); } .aw-story-title a { color: var(--kit-color-ink); text-decoration: none; } .aw-story-title a::after { content: ""; position: absolute; inset: 0; } .aw-story:hover .aw-story-title a { text-decoration: underline; text-underline-offset: 4px; } .aw-story-sum { color: var(--kit-color-muted); font-size: var(--kit-type-lead); margin: 0 0 var(--kit-space-3); } .aw-story-meta { font-size: var(--kit-type-xs); font-weight: var(--kit-weight-medium); color: var(--kit-color-muted); margin: 0; } .aw-story--lead .kit-story-media { aspect-ratio: 16/9; } .aw-story--lead .aw-story-title { font-size: var(--kit-type-headline, var(--kit-type-h1)) !important; line-height: 1.1 !important; letter-spacing: var(--kit-tracking-display) !important; } .aw-news-side { display: grid; align-content: start; } .aw-story--row { display: grid; grid-template-columns: 1fr 112px; gap: var(--kit-space-4); padding: var(--kit-space-4) 0; border-top: 1px solid var(--kit-color-line); } .aw-story--row:first-child { border-top: 0; padding-top: 0; } .aw-story--row .kit-story-media { order: 2; aspect-ratio: 1; } .aw-story--row .aw-story-kicker { margin-top: 0; } .aw-news-grid { display: grid; gap: var(--kit-space-7) var(--kit-space-grid); grid-template-columns: 1fr; } @media (min-width: 768px) { .aw-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .aw-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* INTELLIGENCE — Research library */ .aw-docs { border-top: 1px solid var(--kit-color-line); } .aw-doc-row { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--kit-space-5); align-items: center; padding: var(--kit-space-5) 0; border-bottom: 1px solid var(--kit-color-line); } .kit-doc-cover { width: 72px; aspect-ratio: 3/4; border-radius: 4px; overflow: hidden; background: var(--kit-color-raised); box-shadow: var(--kit-elevation-1); display: flex; align-items: center; justify-content: center; color: var(--kit-color-muted); } .kit-doc-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .aw-doc-title { font-size: var(--kit-type-h4) !important; line-height: 1.3 !important; margin: 0 0 var(--kit-space-1); } .aw-doc-title a { color: var(--kit-color-ink); text-decoration: none; } .aw-doc-title a:hover { text-decoration: underline; text-underline-offset: 3px; } .aw-doc-sum { margin: 0; font-size: var(--kit-type-sm); color: var(--kit-color-muted); } .aw-doc-actions { display: flex; gap: var(--kit-space-2); } @media (max-width: 767px) { .aw-doc-row { grid-template-columns: 56px 1fr; } .kit-doc-cover { width: 56px; } .aw-doc-actions { grid-column: 1 / -1; } } /* HELP — Knowledge as tasks */ .aw-tasks { display: grid; gap: var(--kit-space-grid); grid-template-columns: 1fr; margin-bottom: var(--kit-space-8); } @media (min-width: 768px) { .aw-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .aw-tasks { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .kit-task { display: grid; grid-template-columns: 1fr; overflow: hidden; 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-ink); text-decoration: none; transition: transform var(--kit-motion-base) var(--kit-motion-ease), box-shadow var(--kit-motion-base) var(--kit-motion-ease); } .kit-task:hover { transform: translateY(var(--kit-motion-lift)); box-shadow: var(--kit-elevation-2); } .aw-task-media { display: block; aspect-ratio: 16/9; } .aw-task-media img { width: 100%; height: 100%; object-fit: cover; } .aw-task-body { display: flex; flex-direction: column; gap: var(--kit-space-2); padding: var(--kit-space-6); } .aw-task-body > .kit-ico:first-child { --kit-ico-size: 1.75rem; color: var(--kit-color-ink); padding: 0.5rem; box-sizing: content-box; border-radius: var(--kit-radius-control); background: var(--kit-color-accent); -webkit-mask: none; mask: none; position: relative; align-self: flex-start; } .aw-task-body > .kit-ico:first-child::after { content: ""; position: absolute; inset: 0.5rem; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .kit-task strong { font-size: var(--kit-type-h3); font-weight: var(--kit-weight-bold); letter-spacing: -0.02em; line-height: 1.2; } .aw-task-sum { color: var(--kit-color-muted); } .aw-task-meta span { display: inline-flex; align-items: center; gap: var(--kit-space-1); } .aw-task-meta .kit-ico { --kit-ico-size: 1em; } .aw-task-cta { display: inline-flex; align-items: center; gap: var(--kit-space-1); margin: var(--kit-space-2) 0 0 !important; font-weight: var(--kit-weight-medium); color: var(--kit-color-link); } .aw-task-cta .kit-ico { --kit-ico-size: 1em; transition: transform var(--kit-motion-fast) var(--kit-motion-ease); } .kit-task:hover .aw-task-cta .kit-ico { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .kit-task:hover .aw-task-cta .kit-ico { transform: none; } } .aw-task-meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-1) var(--kit-space-4); font-size: var(--kit-type-xs); font-weight: var(--kit-weight-medium); color: var(--kit-color-muted); } .aw-also h2 { font-size: var(--kit-type-h3); padding-top: var(--kit-space-4); border-top: 1px solid var(--kit-color-line); margin-bottom: var(--kit-space-5); } /* HELP — Resources */ .aw-res { display: grid; gap: var(--kit-space-grid); grid-template-columns: 1fr; } @media (min-width: 768px) { .aw-res { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .aw-res { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .kit-res-card { display: flex; flex-direction: column; overflow: hidden; 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-ink); text-decoration: none; transition: transform var(--kit-motion-base) var(--kit-motion-ease), box-shadow var(--kit-motion-base) var(--kit-motion-ease); } .kit-res-card:hover { transform: translateY(var(--kit-motion-lift)); box-shadow: var(--kit-elevation-2); } .aw-res-media { aspect-ratio: 16/9; display: block; } .aw-res-media img { width: 100%; height: 100%; object-fit: cover; } .aw-res-body { display: flex; flex-direction: column; gap: var(--kit-space-2); padding: var(--kit-space-5); flex: 1; } .aw-res-body strong { font-size: var(--kit-type-h4); line-height: 1.3; } .aw-res-sum { color: var(--kit-color-muted); font-size: var(--kit-type-sm); } .aw-res-cta { margin-top: auto; display: inline-flex; align-items: center; gap: var(--kit-space-2); font-weight: var(--kit-weight-strong); font-size: var(--kit-type-sm); } /* HELP — Directory rows */ .aw-orgs { border-top: 1px solid var(--kit-color-line); } .aw-org { position: relative; display: grid; grid-template-columns: 56px 1fr auto; gap: var(--kit-space-4); align-items: center; padding: var(--kit-space-4) 0; border-bottom: 1px solid var(--kit-color-line); } .aw-org.is-featured { background: linear-gradient(90deg, color-mix(in srgb, var(--color-yellow) 14%, transparent), transparent 60%); } .aw-org-mark { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--kit-color-surface); border: 1px solid var(--kit-color-line); font-weight: var(--kit-weight-bold); color: var(--kit-color-ink); } .aw-org-mark img { width: 100%; height: 100%; object-fit: contain; background: var(--kit-color-raised); padding: var(--s-1); } .aw-org-name { font-size: var(--kit-type-h4) !important; line-height: 1.3 !important; margin: 0; } .aw-org-name a { color: var(--kit-color-ink); text-decoration: none; } .aw-org-name a::after { content: ""; position: absolute; inset: 0; } .aw-org:hover .aw-org-name a { text-decoration: underline; text-underline-offset: 3px; } .aw-org-meta { display: flex; align-items: center; gap: var(--kit-space-1); margin: var(--kit-space-1) 0; font-size: var(--kit-type-sm); color: var(--kit-color-muted); } .aw-org-meta .kit-ico { --kit-ico-size: 1em; } .aw-org-tags { display: flex; flex-wrap: wrap; gap: var(--kit-space-2); margin: 0; } .aw-org-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--kit-space-2); } .aw-org-go { display: inline-flex; align-items: center; justify-content: center; width: var(--kit-size-target); height: var(--kit-size-target); border-radius: 50%; background: var(--kit-color-canvas); color: var(--kit-color-ink); transition: background-color var(--kit-motion-fast) var(--kit-motion-ease); } .aw-org:hover .aw-org-go { background: var(--kit-color-accent); } @media (max-width: 767px) { .aw-org { grid-template-columns: 44px 1fr; } .aw-org-mark { width: 44px; height: 44px; } .aw-org-actions { grid-column: 2; } .aw-org-go { display: none; } } /* ACTION — Opportunities */ .aw-opps { display: grid; gap: var(--kit-space-grid); grid-template-columns: 1fr; } @media (min-width: 768px) { .aw-opps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .aw-opp { display: grid; grid-template-columns: 1fr; overflow: hidden; background: var(--kit-color-raised); border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card); box-shadow: var(--kit-elevation-1); } @media (min-width: 1200px) { .aw-opp { grid-template-columns: 2fr 3fr; } } .aw-opp-media { aspect-ratio: 16/9; } @media (min-width: 1200px) { .aw-opp-media { aspect-ratio: auto; } } .aw-opp-media img { width: 100%; height: 100%; object-fit: cover; } .aw-opp-body { display: flex; flex-direction: column; gap: var(--kit-space-2); padding: var(--kit-space-5); } .aw-opp-tags { display: flex; flex-wrap: wrap; gap: var(--kit-space-3); align-items: center; margin: 0; font-size: var(--kit-type-xs); font-weight: var(--kit-weight-medium); color: var(--kit-color-muted); } .aw-opp-tags .kit-ico { --kit-ico-size: 1em; } .aw-opp-title { font-size: var(--kit-type-h3) !important; line-height: 1.25 !important; margin: 0; } .aw-opp-title a { color: var(--kit-color-ink); text-decoration: none; } .aw-opp-title a:hover { text-decoration: underline; text-underline-offset: 3px; } .aw-opp-org { margin: 0; font-weight: var(--kit-weight-strong); } .aw-opp-sum { margin: 0; color: var(--kit-color-muted); font-size: var(--kit-type-sm); } .aw-opp-trust { display: flex; align-items: center; gap: var(--kit-space-2); margin: var(--kit-space-2) 0 0; font-size: var(--kit-type-xs); font-weight: var(--kit-weight-medium); color: var(--kit-color-success); } .aw-opp-trust .kit-ico { --kit-ico-size: 1em; } .aw-opp-actions { display: flex; flex-wrap: wrap; gap: var(--kit-space-2); margin-top: auto; padding-top: var(--kit-space-3); } /* ARCHIVE — Campaigns */ .aw-system .kit-ed-story { border-radius: var(--kit-radius-hero); padding-inline: var(--kit-space-6); } .aw-camp-more { margin-top: var(--kit-space-8); } .aw-camp-more h2, .aw-camp-next h2 { font-size: var(--kit-type-h2); padding-top: var(--kit-space-4); border-top: 1px solid var(--kit-color-line); } .aw-camp-next { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--kit-space-5); margin-top: var(--kit-space-8); } .aw-camp-next p { color: var(--kit-color-muted); font-size: var(--kit-type-lead); max-width: 52ch; margin: var(--kit-space-2) 0 0; } /* News attribution (Google News pattern): favicon + publisher above the headline, relative time below */ .aw-src { display: flex; align-items: center; gap: var(--kit-space-2); margin: var(--kit-space-3) 0 var(--kit-space-1); font-size: var(--kit-type-xs); font-weight: var(--kit-weight-strong); color: var(--kit-color-ink); max-width: none; } .aw-src-icon { width: 16px; height: 16px; flex: none; border-radius: 3px; object-fit: contain; background: var(--kit-color-raised); } .aw-src-icon--letter { display: inline-flex; align-items: center; justify-content: center; background: var(--kit-color-ink); color: var(--kit-color-on-ink); font-size: var(--fluid-caption); font-weight: var(--kit-weight-bold); line-height: 1; } .aw-src-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aw-src--link a { display: inline-flex; align-items: center; gap: var(--kit-space-2); min-height: var(--kit-size-target); color: var(--kit-color-ink); text-decoration: none; } .aw-src--link a:hover .aw-src-name { text-decoration: underline; text-underline-offset: 3px; } .aw-src--link a::after { content: none !important; } .aw-src--link { font-size: var(--kit-type-sm); margin-bottom: 0; } .aw-rel-time { font-size: var(--kit-type-xs); font-weight: var(--kit-weight-medium); color: var(--kit-color-muted); } .aw-item-time { margin: 0 0 var(--kit-space-4); } .aw-card-time { margin-top: auto; padding-right: 48px; min-height: 36px; display: flex; align-items: center; } .aw-story-body > .aw-src:first-child { margin-top: var(--kit-space-4); } .aw-story--row .aw-story-body > .aw-src:first-child { margin-top: 0; } .kit-ed-list .aw-src { grid-area: terms; margin: 0; } .kit-ed-lead .aw-src { margin-top: var(--kit-space-2); } :is(.kit-ed-list, .kit-ed-lead) .aw-card-time { padding-right: 0; min-height: 0; } .is-layout-constrained > .aw-src { max-width: var(--wp--style--global--content-size, 720px); margin-left: auto !important; margin-right: auto !important; } /* Report an error (listing pages): same disclosure treatment as the claim panel, quieter */ .aw-report { margin-block: var(--kit-space-4) var(--kit-space-7); } .aw-report summary { cursor: pointer; display: inline-flex; align-items: center; min-height: var(--kit-size-target); font-size: var(--kit-type-sm); font-weight: var(--kit-weight-strong); color: var(--kit-color-muted); text-decoration: underline; text-underline-offset: 3px; } .aw-report summary::-webkit-details-marker { display: none; } .aw-report details[open] { padding: var(--kit-space-5); border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card); background: var(--kit-color-raised); } .aw-report summary:focus-visible { outline: 3px solid var(--kit-color-focus); outline-offset: 3px; border-radius: var(--kit-radius-control); } /* Title links in directory rows and the document library: at least 24px tall to tap (WCAG 2.5.8). */ .aw-org-name a, .aw-doc-title a { display: inline-block; padding-block: 2px; } /* Topics index (/topics/). */ .aw-topics-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--kit-space-4, 1rem); list-style: none; padding: 0; margin: 0; } .aw-topics-index a { display: grid; gap: var(--kit-space-2, .5rem); padding: var(--kit-space-3, .75rem); border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card); color: var(--kit-color-ink); text-decoration: none; min-height: var(--kit-size-target, 44px); } .aw-topics-index a:hover { border-color: var(--kit-color-ink); } .aw-topics-index a:focus-visible { outline: 2px solid var(--kit-color-focus); outline-offset: 2px; } .aw-topics-index img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--kit-radius-control); } .aw-topics-name { font-weight: var(--kit-weight-strong); } .aw-topics-n { color: var(--kit-color-muted); font-size: var(--kit-type-sm); } /* Organisation profile: what links to this organisation, and the claim link. */ .aw-org-links { display: grid; gap: var(--kit-space-5, 1.25rem); margin-block: var(--kit-space-6, 1.5rem); } .aw-org-links-group h2 { font-size: var(--kit-type-h, 1.25rem); margin: 0 0 var(--kit-space-2, .5rem); } .aw-org-links-group ul { margin: 0; padding-inline-start: 1.1em; } .aw-org-links-group li { margin-block: var(--kit-space-1, .25rem); } .aw-org-claim { margin: 0; font-size: var(--kit-type-sm); color: var(--kit-color-muted); } .aw-org-claim a { display: inline-flex; align-items: center; min-height: var(--kit-size-target, 44px); } /* Topic hub and site search */ .aw-hub { display: grid; gap: var(--kit-space-6, 1.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin-block: var(--kit-space-6, 1.5rem); } .aw-hub-group h2 { font-size: var(--kit-type-h, 1.25rem); margin: 0 0 var(--kit-space-2, .5rem); } .aw-hub-group ul { margin: 0 0 var(--kit-space-2, .5rem); padding-inline-start: 1.1em; } .aw-hub-group li { margin-block: var(--kit-space-1, .25rem); } .aw-search-form { display: flex; flex-wrap: wrap; gap: var(--kit-space-2, .5rem); align-items: end; margin-block: var(--kit-space-4, 1rem); } .aw-search-form label { flex-basis: 100%; font-weight: var(--kit-weight-regular); } .aw-search-form input[type="search"] { flex: 1 1 16rem; min-height: var(--kit-size-target, 44px); } .aw-search-count { color: var(--kit-color-muted); } .aw-search-results { padding-inline-start: 1.2em; } .aw-search-results li { margin-block: var(--kit-space-3, .75rem); } .aw-search-results p { margin: var(--kit-space-1, .25rem) 0 0; color: var(--kit-color-muted); font-size: var(--kit-type-sm); } .aw-byline { color: var(--kit-color-muted); font-size: var(--kit-type-sm); margin-top: var(--kit-space-2, .5rem); } /* Banner slot: fixed proportions so nothing shifts while it loads (16:5 wide, 4:3 on phones). */ .aw-banner { position: relative; margin-block: 0 var(--kit-space-5, 1.25rem); } .aw-banner picture, .aw-banner img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 5; object-fit: cover; border-radius: var(--kit-radius-card); } @media (max-width: 767px) { .aw-banner picture, .aw-banner img { aspect-ratio: 4 / 3; } } .aw-banner-text { position: absolute; inset: auto var(--kit-space-4, 1rem) var(--kit-space-6, 1.5rem); color: var(--kit-color-on-ink); text-shadow: 0 1px 3px color-mix(in srgb, var(--neutral-10) 60%, transparent); font-size: var(--kit-type-h, 1.25rem); font-weight: var(--kit-weight-strong); max-width: 40ch; } .aw-banner-credit { margin: var(--kit-space-1, .25rem) 0 0; font-size: var(--kit-type-xs, .75rem); color: var(--kit-color-muted); } .aw-banner-credit a { color: inherit; } /* Story cards that link out (Media & PR): the shared News card; a missing or broken image shows the publisher logo. */ .aw-story--external { position: relative; } .aw-story--external .kit-story-media { position: relative; } .aw-story-fallback { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; background: var(--kit-color-surface-soft); } .kit-story-media.is-failed .aw-story-fallback { display: flex; } .aw-story--external .kit-story-media.is-failed > img:not(.aw-story-logo) { display: none; } .aw-story-logo { width: var(--s-12); height: var(--s-12); object-fit: contain; } .aw-story-play { position: absolute; left: var(--s-3); bottom: var(--s-3); display: inline-flex; align-items: center; justify-content: center; width: var(--s-10); height: var(--s-10); border-radius: var(--radius-full); background: var(--kit-color-ink); color: var(--kit-color-on-ink); } .aw-story--external .aw-story-title a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the one link */ .aw-story--external .aw-story-title .kit-ico { --kit-ico-size: 0.8em; vertical-align: baseline; } /* Announcement bar: one line on phones (just the link) */ @media (max-width: 767px) { .aw-announce-lead { display: none; } .kit-announce p { white-space: nowrap; } } .kit-announce .kit-ico--megaphone { margin-right: .35em; } /* Library: template cards (no date, no source line) */ .kit-case--template .aw-case-icon { display: flex; align-items: center; justify-content: center; --kit-ico-size: 28px; color: var(--kit-color-ink); } /* Search: grouped by section, matches highlighted */ .aw-search-group { margin-block: var(--kit-space-6, 1.5rem); } .aw-search-group .aw-search-head { display: flex; align-items: baseline; gap: var(--s-2); } .aw-search-results mark { background: color-mix(in srgb, var(--kit-color-accent) 45%, transparent); color: inherit; padding: 0 .1em; border-radius: 2px; } .aw-search-more { font-size: var(--kit-type-sm); color: var(--kit-color-muted); } /* Data-source labels on organisations (kit-tag): mark on cards; mark + list name and date on the profile. */ .aw-datasrcs { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); vertical-align: middle; } /* "Details from": one row per source — a same-size type mark (AWBI, GOV, ORG…) and the source, aligned in two columns */ .aw-datasrcs.is-full { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-2) var(--s-3); align-items: center; margin-top: var(--s-2); } .aw-datasrcs.is-full .aw-datasrc-row { display: contents; } .aw-datasrcs.is-full .kit-tag { justify-content: center; min-width: 3.5rem; background: color-mix(in srgb, var(--kit-color-ink) 6%, transparent); color: var(--kit-color-text); } .aw-datasrc-mark { font-weight: var(--kit-weight-medium); letter-spacing: 0.02em; } .aw-datasrc-row { display: inline-flex; align-items: center; gap: var(--s-2); } /* Contact (Phase 11 H2): wide screens = text left (about 55%), form right and sticky; phones = intro, form, rows. Rows are information only: hairline dividers, no cards. */ .aw-contact { display: grid; gap: var(--s-8); } .aw-contact > * { margin: 0 !important; min-width: 0; } .aw-contact-intro, .aw-contact-org, .aw-contact-report { max-width: 70ch; } .aw-contact-row { padding-block: var(--s-4); border-top: 1px solid var(--neutral-2); } .aw-contact-row:last-child { border-bottom: 1px solid var(--neutral-2); } .aw-contact-row h3 { margin: 0 0 var(--s-1); font-size: var(--fluid-h5); } .aw-contact-row p { margin: 0; } .aw-contact-form-col .kit-form { max-width: none; } .aw-elsewhere ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); } .aw-elsewhere a { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--kit-size-target); } @media (min-width: 1200px) { .aw-contact { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); column-gap: var(--s-12); align-items: start; } .aw-contact-intro { grid-column: 1; grid-row: 1; } .aw-contact-org { grid-column: 1; grid-row: 2; } .aw-contact-report { grid-column: 1; grid-row: 3; } .aw-contact-form-col { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: var(--s-6); } } /* Card title links are at least 24px tall to tap (WCAG 2.5.8), also when the title is one line (Phase 11 D). */ :is(.aw-case-title, .aw-opp-title, .aw-org-name, .aw-story-title) a { display: inline-block; min-height: var(--s-6); } /* =========================================================================== Hub Pages (Phase 12 Part D): band in the Page content, lists on core blocks. The Post Template items carry the old card classes; the generic query-loop card (kit.css) is undone here. =========================================================================== */ .aw-hub-page > .wp-block-post-content { margin-block: 0; } .wp-block-post-content > .kit-section-band:first-child { margin-top: 0 !important; } .aw-hub-list .wp-block-post-template { list-style: none; margin: 0; padding: 0; } .aw-hub-list .wp-block-post-template > li { position: static; display: block; margin: 0; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0; box-shadow: none !important; overflow: visible; transform: none !important; } .aw-hub-list .wp-block-post-template > li::after { display: none; } .aw-hub-list .wp-block-post-template > li > * { margin: 0 !important; } .aw-hub-list .wp-block-post-template > li:has(.wp-block-post-title a:focus-visible) { outline: 0; } .aw-hub-list :is(.aw-story, .aw-story-body, .kit-case, .aw-case-body, .kit-task, .aw-task-body, .aw-opp, .aw-opp-body, .aw-org, .aw-org-body) > * { margin-block-start: 0; } .aw-hub-list .wp-block-post-title a:focus-visible { outline: 3px solid var(--kit-color-focus); outline-offset: 3px; } .aw-hub-list .wp-block-post-excerpt__excerpt { margin: 0; } .aw-hub-list .wp-block-post-terms { font-size: var(--kit-type-xs); } .aw-hub-list > .kit-pager { margin-top: var(--kit-space-7); } .kit-pager > a, .kit-pager .wp-block-query-pagination-numbers { display: inline-flex; gap: var(--kit-space-2); } .kit-pager > a { align-items: center; justify-content: center; 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); } /* News: on page 1 the first story leads, with three rows beside it; then the grid */ .aw-news-list { display: grid; gap: var(--kit-space-7) var(--kit-space-grid); grid-template-columns: 1fr; } @media (min-width: 768px) { .aw-news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .aw-news-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .aw-hub-list .kit-story-media { margin: 0; } .aw-hub-list .aw-src { margin: var(--kit-space-3) 0 var(--kit-space-1); } .aw-hub-list .aw-story-sum { display: none; } .aw-hub-list .wp-block-post-template .wp-block-post-date { margin: 0; min-height: 0; padding-right: 0; display: block; font-size: var(--kit-type-xs); font-weight: var(--kit-weight-medium); color: var(--kit-color-muted); } .aw-hub-list .wp-block-post-template .wp-block-post-date::before { display: none; } .aw-hub-list .aw-story-title { margin: 0 0 var(--kit-space-2); } .is-first-page .aw-news-list > li:first-child { grid-column: 1 / -1; padding-bottom: var(--kit-space-7) !important; border-bottom: 1px solid var(--kit-color-line) !important; } .is-first-page .aw-news-list > li:first-child .kit-story-media { aspect-ratio: 16/9; } .is-first-page .aw-news-list > li:first-child .aw-story-title { font-size: var(--kit-type-headline, var(--kit-type-h1)) !important; line-height: 1.1 !important; letter-spacing: var(--kit-tracking-display) !important; } .is-first-page .aw-news-list > li:first-child .wp-block-post-excerpt__excerpt { display: block; -webkit-line-clamp: unset; font-size: inherit; line-height: inherit; } .is-first-page .aw-news-list > li:first-child .aw-story-sum { display: block; color: var(--kit-color-muted); font-size: var(--kit-type-lead); margin: 0 0 var(--kit-space-3); } .is-first-page .aw-news-list > li:nth-child(n+2):nth-child(-n+4) { grid-column: 1 / -1; } .is-first-page .aw-news-list > li:nth-child(n+2):nth-child(-n+4) .aw-story { display: grid; grid-template-columns: 1fr 112px; gap: var(--kit-space-4); } .is-first-page .aw-news-list > li:nth-child(n+2):nth-child(-n+4) .kit-story-media { order: 2; aspect-ratio: 1; } .is-first-page .aw-news-list > li:nth-child(n+2):nth-child(-n+4) .aw-src { margin-top: 0; } @media (max-width: 1199px) { .is-first-page .aw-news-list > li:first-child { border-bottom: 0 !important; padding-bottom: 0 !important; } .is-first-page .aw-news-list > li:nth-child(3), .is-first-page .aw-news-list > li:nth-child(4) { border-top: 1px solid var(--kit-color-line) !important; padding-top: var(--kit-space-4) !important; margin-top: calc(var(--kit-space-4) - var(--kit-space-7)) !important; } .is-first-page .aw-news-list > li:nth-child(4) { border-bottom: 1px solid var(--kit-color-line) !important; padding-bottom: var(--kit-space-7) !important; } } @media (min-width: 1200px) { /* Rows 1–3: the lead (7 of 12 columns) beside three rows; row 4 takes the lead's extra height; a rule; then the grid. */ .is-first-page .aw-news-list { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; row-gap: 0; } .is-first-page .aw-news-list::before { content: ""; grid-row: 5; grid-column: 1 / -1; border-top: 1px solid var(--kit-color-line); margin: var(--kit-space-7) 0; } .is-first-page .aw-news-list > li { grid-column: span 6; } .is-first-page .aw-news-list > li:first-child { grid-column: 1 / span 7; grid-row: 1 / span 4; border-bottom: 0 !important; padding-bottom: 0 !important; } .is-first-page .aw-news-list > li:nth-child(n+2):nth-child(-n+4) { grid-column: 8 / span 5; padding: var(--kit-space-4) 0 !important; } .is-first-page .aw-news-list > li:nth-child(2) { grid-row: 1; padding-top: 0 !important; } .is-first-page .aw-news-list > li:nth-child(3) { grid-row: 2; border-top: 1px solid var(--kit-color-line) !important; } .is-first-page .aw-news-list > li:nth-child(4) { grid-row: 3 / span 2; align-self: start; border-top: 1px solid var(--kit-color-line) !important; } /* also covers row 4, so later stories start below */ .is-first-page .aw-news-list > li:nth-child(5) { grid-row-start: 6; } .is-first-page .aw-news-list > li:nth-child(n+5) { margin-bottom: var(--kit-space-7) !important; } } @media (min-width: 1200px) { .is-first-page .aw-news-list > li:nth-child(n+5) { grid-column: span 4; } } /* Library rows */ .aw-hub-list .aw-case-tags { position: relative; z-index: 1; } .aw-hub-list .aw-case-sum p { margin: 0; } .aw-hub-list .aw-case-title { margin: 0 0 var(--kit-space-2); } /* Resources cards (the title link covers the card) */ .aw-hub-list .kit-task { position: relative; } .aw-hub-list .aw-task-media { margin: 0; border-radius: 0; } .aw-task-title { font-size: var(--kit-type-h3) !important; font-weight: var(--kit-weight-bold); letter-spacing: -0.02em; line-height: 1.2 !important; margin: 0 !important; } .aw-task-title a { color: var(--kit-color-ink); text-decoration: none; } .aw-task-title a::after { content: ""; position: absolute; inset: 0; } .aw-hub-list .aw-task-sum { color: var(--kit-color-muted); font-size: inherit; } .aw-hub-list .aw-task-meta { margin: auto 0 0; } /* Opportunities cards */ .aw-hub-list .aw-opp { position: relative; } .aw-hub-list .aw-opp-media { margin: 0; border-radius: 0; } .aw-hub-list .aw-opp-tags .wp-block-post-terms { margin: 0; } .aw-place { display: inline-flex; align-items: center; gap: var(--kit-space-1); } .aw-hub-list .aw-opp-title { margin: 0; } .aw-hub-list .aw-opp-trust { margin: var(--kit-space-2) 0 0; } .aw-hub-list .aw-opp-actions { position: relative; z-index: 1; margin-top: auto; } /* Directory rows */ .aw-orgs > li.is-featured > .aw-org { background: linear-gradient(90deg, color-mix(in srgb, var(--color-yellow) 14%, transparent), transparent 60%); } .aw-hub-list .aw-org-name { margin: 0; } .aw-hub-list .aw-org-meta { margin: var(--kit-space-1) 0; } .aw-org-meta.kit-ico--directory::before { content: ""; flex: none; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .aw-hub-list .aw-org-tags, .aw-hub-list .aw-org-actions { position: relative; z-index: 1; } /* Campaigns */ .aw-camp-more h2.wp-block-heading { font-size: var(--kit-type-h2); padding-top: var(--kit-space-4); border-top: 1px solid var(--kit-color-line); } /* Band on hub Pages: no block gaps from the editor's flow layout; the band's own spacing as before */ .kit-section-band :where(.kit-section-inner, .kit-section-head, .kit-section-head > .wp-block-group) > * { margin-block-start: 0; } .kit-section-band .kit-section-desc { margin-top: var(--kit-space-3); } .kit-section-band .kit-section-count { margin-top: var(--kit-space-2); } .kit-section-band .kit-section-filters { margin-top: var(--kit-space-5); } .kit-section-band .kit-crumbs li > a:not([class]) { color: inherit; } /* not the content-link blue */ .aw-hub-list .wp-block-post-template > li { max-width: none; } /* not a prose list */ .aw-hub-list .wp-block-post-template .wp-block-post-excerpt__excerpt { display: block; -webkit-line-clamp: unset; overflow: visible; } .aw-hub-list .wp-block-post-template :is(.aw-case-sum, .aw-task-sum) { font-size: inherit; line-height: inherit; } /* Organisation row: name, place, then the labels and the contact icons on one line (the icons never sit alone) */ .aw-hub-list .aw-org-body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-1) var(--kit-space-3); } .aw-hub-list .aw-org-body > :not(.aw-org-tags):not(.aw-org-contact) { flex-basis: 100%; } .aw-hub-list .aw-org-contact { margin: 0; } .aw-hub-list .aw-org-contact .kit-ico { --kit-ico-size: 1.125rem; } /* Volunteer banner (S6.2): photo left (~45%) with text and the form on the right; on phones a 120px photo strip on top. */ .aw-vol-banner { display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: var(--r-4); background: var(--kit-color-surface); margin-block: var(--s-12); } .aw-vol-banner-photo { margin: 0 !important; } .aw-vol-banner-photo img { display: block; width: 100%; height: 120px; object-fit: cover; } .aw-vol-banner-body { padding: var(--s-6); } .aw-vol-banner-body > * { margin-block: 0 var(--s-4); } .aw-vol-banner-title { font-size: var(--kit-type-h2); margin-top: 0; } @media (min-width: 768px) { .aw-vol-banner { grid-template-columns: 45fr 55fr; align-items: stretch; } .aw-vol-banner-photo img { height: 100%; min-height: 320px; } .aw-vol-banner-body { padding: var(--s-8); } } .aw-vol-banner .kit-disclosure[open] > summary { margin-bottom: 0; } /* Directory profile: "Is this your organisation?" (S7.1) */ .aw-listing-help { margin-block: var(--s-10); padding: var(--s-6); border: 1px solid var(--kit-color-line); border-radius: var(--r-4); background: var(--kit-color-raised); } .aw-listing-help > h2 { font-size: var(--kit-type-h3); margin: 0 0 var(--s-2); } .aw-listing-help > p { margin: 0 0 var(--s-4); color: var(--kit-color-muted); } .aw-listing-help-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); } /* Claim, Report and Thank-you pages (owner, 10 Oct 2026): the listing they are about, and the links back */ .aw-form-for { display: flex; flex-direction: column; gap: var(--s-1); margin: 0 0 var(--s-6); padding: var(--s-4) var(--s-5); border: 1px solid var(--kit-color-line); border-radius: var(--r-4); } .aw-form-for a { font-weight: var(--kit-weight-strong); } .aw-form-for span { color: var(--kit-color-muted); } .aw-thanks-links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); } .aw-listing-help-actions > .kit-disclosure { order: 1; } .aw-listing-help-actions > .kit-disclosure[open] { order: 2; flex-basis: 100%; } /* buttons stay in one row; the open form below */ .aw-listing-help-actions > .kit-disclosure[open] > summary { order: -1; } @media (max-width: 767px) { .kit-case:has(.aw-case-date.has-cover) { grid-template-columns: 4rem 1fr; } .aw-case-date.has-cover { flex-direction: column; } } /* Resources: a card shows a photo (its own or its category's) or none; never a box repeating the title */ .aw-tasks .aw-task-media:has(.kit-placard) { display: none; } /* Library rows: "Issued by" and the category labels on one line, same height */ .aw-case-tags { align-items: center; } .aw-case-tags > *, .aw-case-tags .wp-block-post-terms { margin: 0 !important; } /* Organisation page: logo and name, then type and place on one line, then the ways to reach them (icon + label). */ .aw-profile-head { display: grid; grid-template-columns: 4rem minmax(0, 1fr); grid-template-areas: "crumbs crumbs" "mark title" "mark meta"; column-gap: var(--kit-space-4); align-items: center; margin-block: 0 var(--kit-space-4); } .aw-profile-head .aw-org-mark { grid-area: mark; width: 4rem; height: 4rem; } .aw-profile-id { display: contents; } /* breadcrumb above, name and labels beside the logo */ .aw-profile-head .kit-crumbs { grid-area: crumbs; margin: 0 0 var(--kit-space-4); } .aw-profile-head h1 { grid-area: title; margin: 0; align-self: end; } .aw-profile-meta { grid-area: meta; align-self: start; display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-2); margin-top: var(--kit-space-2) !important; } .aw-profile-meta > *, .aw-profile-meta .wp-block-post-terms { margin: 0 !important; } .aw-profile-actions { gap: var(--kit-space-2); margin-block: var(--kit-space-5); } .aw-profile-actions .wp-block-button__link { display: inline-flex; align-items: center; gap: var(--kit-space-2); } .aw-profile-actions .wp-block-button__link::before { content: ""; flex: none; width: 1.125em; height: 1.125em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .aw-profile-actions a[href^="tel:"] { --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"); } .aw-profile-actions a[href^="mailto:"] { --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"); } .aw-profile-actions a[href*="wa.me"] { --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"); } .aw-profile-actions a[href^="http"]:not([href*="wa.me"]) { --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"); } /* Directory search: on phones the name field and a "Filters" button (state, district, type fold away); wider, all in one row */ .aw-dir-more > summary { list-style: none; cursor: pointer; } .aw-dir-more > summary::-webkit-details-marker { display: none; } .aw-dir-more-body { display: grid; gap: var(--kit-space-3); } @media (max-width: 767px) { .aw-dir-more[open] > summary { margin-bottom: var(--kit-space-3); } } @media (min-width: 768px) { .aw-dir-more { grid-column: 1 / -1; } .aw-dir-more > summary { display: none; } .aw-dir-more-body { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .aw-dir-more { grid-column: span 3; } } /* Library rows on phones: labels on one line */ @media (max-width: 767px) { .aw-case-tags { flex-wrap: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } .aw-case-tags .wp-block-post-terms { display: contents; } .aw-case-tags > .kit-tag { flex: none; max-width: 60%; } .aw-case-tags .wp-block-post-terms a { flex: none; } } /* phones: every label in one line */ .aw-profile-badge { 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-success) 12%, transparent); color: var(--kit-color-success); font-size: var(--fluid-label); margin: 0 !important; } .aw-profile-badge:empty { display: none; } .aw-profile-badge::before { content: ""; flex: none; width: 1em; height: 1em; margin-right: var(--s-1); background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .aw-profile-badge--featured { --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"); background: color-mix(in srgb, var(--color-yellow) 22%, transparent); color: var(--kit-color-warning); } .aw-profile-badge--verified { --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"); } /* Organisation details: links, up to four photos, facts */ .aw-profile-bio { margin: 0 0 var(--kit-space-4); max-width: 60ch; font-size: var(--kit-type-lead); color: var(--kit-color-muted); } .aw-profile-bio p { margin: 0; } .aw-org-details { display: grid; gap: var(--kit-space-5); margin-block: var(--kit-space-5); } .aw-org-details-links { display: flex; flex-wrap: wrap; gap: var(--kit-space-2); } .aw-org-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kit-space-2); } @media (min-width: 768px) { .aw-org-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .aw-org-gallery figure { margin: 0; } .aw-org-photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--kit-radius-media); background: var(--kit-color-surface); } .aw-org-gallery figcaption { margin-top: var(--s-1); font-size: var(--kit-type-xs); color: var(--kit-color-muted); line-height: 1.4; } .aw-org-gallery img { display: block; width: 100%; height: 100% !important; object-fit: cover; } .aw-org-facts { display: grid; grid-template-columns: 1fr; gap: var(--kit-space-3) var(--kit-space-5); margin: 0; padding: var(--kit-space-4); border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card); background: var(--kit-color-raised); } @media (min-width: 768px) { .aw-org-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .aw-org-facts dt { font-size: var(--kit-type-xs); color: var(--kit-color-muted); } .aw-org-facts dd { margin: 0; font-size: var(--kit-type-sm); color: var(--kit-color-ink); } /* Organisation page type levels: H1 name · H2 section (Details, About) · fact label (small, grey) · fact value (body) */ .aw-profile-h { font-size: var(--kit-type-h4) !important; font-weight: var(--kit-weight-strong); line-height: 1.3; margin: var(--kit-space-6) 0 var(--kit-space-3) !important; } .aw-org-details .aw-profile-h { margin-bottom: 0 !important; } .aw-org-facts dd { font-size: var(--kit-type-base) !important; } .aw-org-fact-note { display: block; margin-top: 2px; font-size: var(--kit-type-xs); color: var(--kit-color-muted); } .aw-datasrc-logo { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--kit-color-raised); border: 1px solid var(--kit-color-line); } .aw-datasrc-logo img { width: 1.25rem; height: 1.25rem; object-fit: contain; border-radius: 3px; } /* Facts: an icon tile (tinted with the info colour) beside each label and value */ .aw-org-fact { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--kit-space-3); align-items: start; } .aw-org-fact-ico { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: var(--kit-color-info-soft); color: var(--kit-color-info); } .aw-org-fact-ico .kit-ico { --kit-ico-size: 1.125rem; } .aw-org-fact dt, .aw-org-fact dd { grid-column: 2; } /* "Is this your organisation?": a section heading, not a page title */ .aw-listing-help h2 { font-size: var(--kit-type-h4) !important; font-weight: var(--kit-weight-strong); margin: 0 0 var(--kit-space-3); } /* Library rows on phones: date (and a small first-page thumbnail) on one line above the title, no side column; "Issued by" on one line; labels on one line */ @media (max-width: 767px) { .kit-case, .kit-case:has(.aw-case-date.has-cover) { grid-template-columns: minmax(0, 1fr); } .aw-case-date, .aw-case-date.has-cover { flex-direction: row; align-items: center; gap: var(--kit-space-2); } .aw-case-date.has-cover .aw-case-cover { width: 2rem; aspect-ratio: 3 / 4; } .aw-case-tags .kit-tag { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 1.75rem; } } /* Home hero: the section owns the gutter — the copy box (max 1200, centred) only pads where the window is narrower than 1200 + 2 gutters */ .aw-ed-hero-copy { padding-inline: max(0px, calc(var(--kit-space-gutter) - max(0px, (100vw - var(--kit-width-wide)) / 2))) !important; } /* Animal Writes buttons: icon by function */ .aw-newsletter-form [type=submit] { --kit-btn-ico: var(--kit-ico-mail); } .aw-dir-search [type=submit] { --kit-btn-ico: var(--kit-ico-search); } #claim > summary, .aw-claim-link, .aw-claim-form [type=submit] { --kit-btn-ico: var(--kit-ico-check); } #report > summary, .aw-report-link, .aw-report-form [type=submit] { --kit-btn-ico: var(--kit-ico-alert); } #volunteer > summary, .aw-volunteer-form [type=submit] { --kit-btn-ico: var(--kit-ico-person); } #claim > summary::before, #report > summary::before, #volunteer > summary::before, .aw-claim-link::before, .aw-report-link::before { content: ""; flex: none; width: 1.125em; height: 1.125em; background: currentColor; -webkit-mask: var(--kit-btn-ico) center / contain no-repeat; mask: var(--kit-btn-ico) center / contain no-repeat; } /* Animal Writes parts of the Kits components (tags by noun, logo tiles, meta icons) */ .aw-profile-badge, .taxonomy-aw_place 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; } .taxonomy-aw_topic a { 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)); } .taxonomy-aw_listing_type a, .taxonomy-aw_legal_kind a, .taxonomy-aw_resource_type a, .taxonomy-aw_opportunity_type a, .aw-org-tags > .kit-tag:not([class*="--"]) { background: color-mix(in srgb, var(--kit-color-ink) 7%, transparent); color: var(--kit-color-text); } .kit-tag--info.aw-issuer, .aw-case-tags > .kit-tag--info, .aw-case-tags > .kit-tag--ink { background: color-mix(in srgb, var(--kit-color-success) 11%, transparent); color: var(--kit-color-success); } .taxonomy-aw_place a { background: color-mix(in srgb, #6d4bc4 10%, transparent); color: #5a3aa8; } :is(.kit-chip, .wp-block-post-terms a, .taxonomy-aw_place a):hover { filter: brightness(.92); text-decoration: none !important; } .taxonomy-aw_place a::before { content: ""; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--kit-ico-pin) center / contain no-repeat; mask: var(--kit-ico-pin) center / contain no-repeat; } .aw-src-icon, .aw-datasrc-logo img { width: 16px !important; height: 16px !important; object-fit: contain; border-radius: 3px; background: transparent; border: 0; padding: 0; } .aw-src-icon:not(.aw-src-icon--letter), .aw-datasrc-logo { box-sizing: content-box; padding: 3px !important; background: var(--kit-color-raised) !important; border: 1px solid var(--kit-color-line) !important; border-radius: var(--radius-sm) !important; } .aw-datasrc-logo { display: inline-flex; width: 16px !important; height: 16px !important; align-items: center; justify-content: center; } .aw-datasrcs.is-full { grid-template-columns: max-content minmax(0, 1fr); } .aw-law-date, .aw-posted-by, .aw-press-handle { display: inline-flex !important; align-items: center; gap: var(--s-1); } .aw-law-date::before, .aw-posted-by::before, .aw-press-handle::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; } .aw-posted-by::before, .aw-press-handle::before { -webkit-mask-image: var(--kit-ico-user); mask-image: var(--kit-ico-user); } .kit-ed-rows :is(.wp-block-post-date, .aw-law-date) { flex-direction: row !important; align-items: center !important; } /* Mobile menu: the wordmark on the same left edge as the links, where it sits in the header */ .kit-site-header .wp-block-navigation__responsive-container.is-menu-open::before { content: ""; position: fixed; top: calc(var(--kit-toggle-top, 28px) + 22px - 24px); left: var(--kit-space-gutter); width: 150px; height: 48px; background: url("../wordmark-light.svg") left center / contain no-repeat; } /* News card meta: publisher and date on one row (every news card) */ .aw-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kit-space-1) var(--kit-space-4); margin: var(--kit-space-3) 0 var(--kit-space-1); min-width: 0; } .aw-card-meta > .aw-src { margin: 0 !important; min-width: 0; } .aw-card-meta > .aw-card-time { margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .aw-story-body > .aw-card-meta:first-child { margin-top: var(--kit-space-4); } .aw-story--row .aw-story-body > .aw-card-meta:first-child { margin-top: 0; } .kit-ed-list .aw-card-meta { grid-area: terms; margin: 0; } .aw-hub-group li > .aw-card-meta { margin: 0 0 var(--kit-space-1); } /* Library card (owner, 9 Oct): "{Type} · {Year}" above the title, title full width, summary, labels below, PDF link, arrow. The first card starts at the top of the list (no empty band above it). */ .aw-case-title { max-width: none; } .aw-case-body > .aw-case-tags { margin: var(--kit-space-1) 0 var(--kit-space-2); } .aw-hub-list .wp-block-post-template > li:first-child > .kit-case { padding-top: 0; } .aw-ed-law-list .kit-case { padding-block: var(--kit-space-5); } /* Icon + text meta labels: one text style and a tight gap everywhere (publisher, date, year, posted by). */ :is(.aw-src, .aw-card-time, .wp-block-post-date, .kit-meta, .aw-law-date, .aw-posted-by, .aw-case-date .d) { gap: 6px !important; font-size: var(--kit-type-xs) !important; font-weight: var(--kit-weight-medium) !important; color: var(--kit-color-muted) !important; line-height: 1.3; } .aw-src .aw-src-name, .aw-card-time .aw-rel-time { font: inherit; color: inherit; } /* Local cards: Organisations in {State} (News items), Few listings in {District} (Directory) */ .aw-local-card { margin: var(--kit-space-6) 0 0; padding: var(--kit-space-5); background: var(--kit-surface-card, var(--kit-color-raised)); border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card, 12px); } .aw-local-card-head { font-size: var(--kit-type-h4) !important; margin: 0 0 var(--kit-space-2); } .aw-local-card p { margin: 0 0 var(--kit-space-4); color: var(--kit-color-muted); } .aw-local-card-actions { display: flex; flex-wrap: wrap; gap: var(--kit-space-3); } /* ====================================================================================================== Text styles (owner, 9 Oct 2026): every piece of text is one of these levels, everywhere. H1 page title · H2 section heading · H3 card / sub-section title · H4 compact list title · H5 small heading · Lead · Body · Secondary body (muted) · Meta (small, muted). Sizes come from the type tokens (375 / 768 / 1440). ====================================================================================================== */ :is(main h2, .aw-hub-group > h2, .aw-also h2, .kit-ed-head h2, .aw-ed-law-title, .kit-ed-act-copy > h2, .kit-ed-help-title, .kit-ed-story-head h2, .aw-vol-banner-title):not(.aw-story-title, .aw-case-title, .kit-eyebrow, .screen-reader-text, .wp-block-post-title, .aw-local-card-head) { font-size: var(--kit-type-h2) !important; font-weight: var(--kit-weight-bold) !important; line-height: 1.2 !important; letter-spacing: var(--kit-tracking-heading, -0.01em); } :is(.aw-case-title, .aw-story-title, .aw-org-name, .aw-ed-col-title, .aw-ed-steps strong, .kit-ed-lead .wp-block-post-title, main .entry-content h3, main h3.wp-block-heading, .aw-local-card-head, .aw-contact-row h3, .aw-task-title) { font-size: var(--kit-type-h3) !important; font-weight: var(--kit-weight-strong) !important; line-height: 1.25 !important; } :is(.kit-ed-list .wp-block-post-title, .kit-ed-titles .wp-block-post-title, main .entry-content h4, main h4.wp-block-heading, main .wp-block-post-template h4) { font-size: var(--kit-type-h4) !important; font-weight: var(--kit-weight-strong) !important; line-height: 1.3 !important; } :is(main .entry-content h5, main h5) { font-size: var(--kit-type-h5) !important; font-weight: var(--kit-weight-strong) !important; line-height: 1.35 !important; } /* Headings that are links read as headings: ink, underline on hover only. */ :is(main h2, main h3, main h4, main h5) a, .aw-ed-steps a, .aw-ed-steps a strong { color: var(--kit-color-ink) !important; text-decoration: none; } :is(main h2, main h3, main h4, main h5) a:hover, .aw-ed-steps a:hover strong { text-decoration: underline; text-underline-offset: 4px; } /* Dividers in lists are the faint line, never ink. */ .aw-ed-steps li, .aw-ed-steps li:last-child { border-color: var(--kit-color-line) !important; } /* Card titles fill the row (no balanced early wrap). */ :is(.aw-case-title, .aw-story-title, .aw-org-name, .aw-task-title, .wp-block-post-template .wp-block-post-title) { text-wrap: pretty; } /* Guides and research (owner, 9 Oct — option B): the three newest guides as the shared card ("Guide · date", title, one-line summary, arrow; the whole card is the link). Three across from 768; a sideways row on phones. */ .kit-case--text { grid-template-columns: minmax(0, 1fr) auto; } .aw-case-meta { margin: 0 0 var(--kit-space-1); font-size: var(--kit-type-xs); font-weight: var(--kit-weight-medium); color: var(--kit-color-muted); } .aw-case-sum--one .wp-block-post-excerpt__excerpt, .aw-case-sum--one p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .aw-ed-guides { margin-top: var(--kit-space-5); } .aw-ed-guides .wp-block-post-template > li > .kit-case { height: 100%; padding: var(--kit-space-5) 0; border-top: 1px solid var(--kit-color-line); border-bottom: 0; } @media (min-width: 768px) { .aw-ed-guides .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kit-space-6); } .aw-ed-guides .aw-case-sum--one .wp-block-post-excerpt__excerpt { -webkit-line-clamp: 2; } } @media (max-width: 767px) { .aw-ed-guides .wp-block-post-template > li > .kit-case { border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card, 12px); padding: var(--kit-space-4); background: var(--kit-surface-card, var(--kit-color-raised)); } } .aw-ed-learn > .kit-ed-more { margin-top: var(--kit-space-4); } /* Box headings: a faint rule, not yellow. */ .aw-ed-col-title { border-bottom-color: var(--kit-color-line) !important; } .aw-ed-act-copy .aw-ed-templates, .kit-ed-act-copy .aw-ed-templates { margin: 0 0 var(--kit-space-5); } /* ====================================================================================================== Home (owner, 9 Oct 2026): every section fits one screen at 375×812, 768×1024 and 1440×900. Fewer items per breakpoint, card lists scroll sideways on phones and tablets, and each section's "All …" link leads to the rest. ====================================================================================================== */ /* Need help now: three cards across on phones too (a sideways row) */ @media (max-width: 767px) { .kit-ed-acts { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--kit-space-3); margin-inline: calc(-1 * var(--kit-space-gutter)); padding: 0 var(--kit-space-gutter) var(--kit-space-2); scrollbar-width: none; } .kit-ed-acts::-webkit-scrollbar { display: none; } .kit-ed-acts > .kit-ed-act { flex: 0 0 78%; min-height: 9rem; scroll-snap-align: start; } } /* What's happening: phones and tablets = one sideways row of five stories; desktop = lead + three */ @media (max-width: 1199px) { .kit-ed-news-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--kit-space-4); margin-inline: calc(-1 * var(--kit-space-gutter)); padding: 0 var(--kit-space-gutter) var(--kit-space-3); scrollbar-width: none; } .kit-ed-news-grid::-webkit-scrollbar { display: none; } .kit-ed-news-grid > .wp-block-query, .kit-ed-news-grid .wp-block-post-template { display: contents !important; } .kit-ed-news-grid .wp-block-post-template > li { display: block !important; flex: 0 0 min(78%, 20rem); scroll-snap-align: start; margin: 0 !important; padding: 0 !important; border: 0 !important; } .kit-ed-news-grid .wp-block-post-featured-image { aspect-ratio: 16 / 9 !important; margin: 0 0 var(--kit-space-3) !important; width: 100%; } .kit-ed-news-grid .wp-block-post-featured-image img { height: 100%; } .kit-ed-news-grid .wp-block-post-excerpt { display: none; } .kit-ed-news-grid .wp-block-post-title { font-size: var(--kit-type-h4) !important; margin: var(--kit-space-2) 0 0 !important; } } @media (min-width: 1200px) { .kit-ed-list .wp-block-post-template > li:nth-child(n+4) { display: none !important; } .kit-ed-lead .wp-block-post-featured-image { aspect-ratio: 16 / 9 !important; } } /* From the Library: phones and tablets = side text, then a sideways row of compact cards (Type · Date, title, issuer); desktop = three cards beside the side text */ @media (max-width: 1199px) { .aw-ed-law-list .wp-block-post-template { display: flex !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; } .aw-ed-law-list .wp-block-post-template::-webkit-scrollbar { display: none; } .aw-ed-law-list .wp-block-post-template > li { flex: 0 0 min(78%, 20rem); scroll-snap-align: start; margin: 0 !important; } .aw-ed-law-list .kit-case { display: block; height: 100%; padding: var(--kit-space-4) !important; border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card, 12px); background: var(--kit-surface-card, var(--kit-color-raised)); } .aw-ed-law-list :is(.aw-case-cover, .aw-case-sum, .aw-case-tags .wp-block-post-terms, .aw-case-src, .aw-doc, .kit-case > .kit-ico) { display: none !important; } .aw-ed-law-list .aw-case-date { margin-bottom: var(--kit-space-2); } .aw-ed-law-side .aw-ed-links { margin-top: var(--kit-space-3); } .aw-ed-law-title { margin-bottom: var(--kit-space-5) !important; } } @media (min-width: 1200px) { .aw-ed-law-list .wp-block-post-template > li:nth-child(n+4) { display: none !important; } .aw-ed-law-list :is(.aw-case-src, .aw-case-tags .wp-block-post-terms) { display: none !important; } .aw-ed-law-list .kit-case { padding-block: var(--kit-space-4) !important; } .aw-ed-law-title { margin-bottom: var(--kit-space-5) !important; } } /* Find help near you: states scroll sideways in two rows on phones and tablets; six columns on desktop */ @media (max-width: 1199px) { .aw-ed-find .aw-browse-states ul { grid-auto-flow: column; grid-template-columns: none !important; grid-template-rows: repeat(2, auto); grid-auto-columns: minmax(11rem, max-content); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--kit-space-gutter)); padding: 0 var(--kit-space-gutter); } .aw-ed-find .aw-browse-states ul::-webkit-scrollbar { display: none; } .aw-ed-find .aw-browse-states { margin-top: var(--kit-space-7); } } @media (min-width: 1200px) { .aw-ed-find .aw-browse-states ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } .aw-ed-find .aw-browse-states { margin-top: var(--kit-space-7); } } /* Take action: two opportunities; the photo only on desktop, as tall as the text beside it */ .aw-ed-opps .wp-block-post-template > li:nth-child(n+3) { display: none !important; } @media (max-width: 1199px) { .aw-ed-act-media { display: none; } } @media (min-width: 1200px) { .aw-ed-act-media img { min-height: 0; max-height: 100%; } .aw-ed-act-media { position: relative; } .aw-ed-act-media img { position: absolute; inset: 0; } } .aw-ed-steps { margin: var(--kit-space-5) 0; } .aw-ed-steps a { padding-block: var(--kit-space-4); } /* Animal Writes 1.0: photos in one row (sideways on phones and tablets), numbers and timeline compact */ @media (max-width: 1199px) { .aw-ed-mosaic { display: flex !important; overflow-x: auto; gap: var(--kit-space-2); height: 9rem; margin: 0 calc(-1 * var(--kit-space-gutter)) var(--kit-space-6) !important; padding: 0 var(--kit-space-gutter); scrollbar-width: none; } .aw-ed-mosaic::-webkit-scrollbar { display: none; } .aw-ed-mosaic img { flex: 0 0 auto; width: auto !important; height: 100% !important; aspect-ratio: auto; } .aw-ed-mosaic .m1 { aspect-ratio: 16 / 9; } .aw-ed-mosaic :is(.m2, .m3, .m4, .m5) { aspect-ratio: 3 / 4; } .aw-ed-timeline { display: flex !important; overflow-x: auto; gap: var(--kit-space-4); margin-inline: calc(-1 * var(--kit-space-gutter)); padding: var(--kit-space-2) var(--kit-space-gutter) 0; scrollbar-width: none; } .aw-ed-timeline::-webkit-scrollbar { display: none; } .aw-ed-timeline li { flex: 0 0 min(70%, 16rem); } .aw-ed-numbers { gap: var(--kit-space-4); margin-bottom: var(--kit-space-6); } .kit-ed-story-head p { margin-bottom: var(--kit-space-5); } } @media (min-width: 768px) and (max-width: 1199px) { .aw-ed-mosaic { height: 12rem; } .aw-ed-numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1200px) { .aw-ed-mosaic { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); grid-auto-rows: 10rem; margin-bottom: var(--kit-space-6); } .aw-ed-mosaic :is(.m1, .m2, .m3, .m4, .m5) { grid-column: auto !important; grid-row: auto !important; } .kit-ed-story-head { display: grid; grid-template-columns: 1fr 2fr; gap: var(--kit-space-7); align-items: start; } .kit-ed-story-head p { margin: 0 0 var(--kit-space-6); } .aw-ed-numbers, .aw-ed-timeline { margin-bottom: var(--kit-space-6); } } /* Home, second pass: the last three sections over one screen */ @media (max-width: 767px) { .aw-ed-numbers { display: flex !important; overflow-x: auto; gap: var(--kit-space-5); margin-inline: calc(-1 * var(--kit-space-gutter)); padding: 0 var(--kit-space-gutter); scrollbar-width: none; } .aw-ed-numbers::-webkit-scrollbar { display: none; } .aw-ed-numbers li { flex: 0 0 9.5rem; } .aw-ed-steps { margin: var(--kit-space-4) 0; } .aw-ed-steps a { padding-block: var(--kit-space-3); } .aw-ed-opps .wp-block-post-template > li { padding-block: var(--kit-space-2) !important; } .kit-ed-act-copy .kit-ed-desc { margin-bottom: 0; } } @media (min-width: 1200px) { .aw-ed-law-list .aw-case-sum { display: none !important; } } @media (max-width: 767px) { .aw-ed-mosaic { height: 7.5rem; margin-bottom: var(--kit-space-5) !important; } .kit-ed-story-head p { margin: var(--kit-space-3) 0 var(--kit-space-4); } .kit-ed-story h2, .kit-ed-act-copy h2 { padding-top: var(--kit-space-3); } .aw-ed-numbers { margin-bottom: var(--kit-space-5); } .kit-ed-act-copy .aw-ed-templates { margin-bottom: var(--kit-space-3); } .kit-ed-act-copy .aw-ed-col-title { margin-bottom: var(--kit-space-2); } } @media (max-width: 767px) { .aw-ed-steps a { padding-block: var(--kit-space-2) var(--kit-space-3); } } /* Footer column titles are paragraphs (not headings, SEO audit 10 Oct 2026): they keep the look they had as h2. */ .kit-footer :is(p.kit-footer-head, p.kit-footer-nl-head) { max-width: none; text-wrap: balance; } .kit-footer p.kit-footer-nl-head { letter-spacing: var(--kit-tracking-heading); } /* /claim/ without a listing: find your organisation (12 Oct 2026). */ .aw-claim-find { max-width: 36rem; } .aw-claim-results { list-style: none; margin: var(--s-4) 0 var(--s-6); padding: 0; display: grid; gap: var(--s-2); } .aw-claim-results a { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) var(--s-4); border: 1px solid var(--kit-color-line); border-radius: var(--r-4); text-decoration: none; } .aw-claim-results span { color: var(--kit-color-muted); } /* ---------- Volunteer page (redesign, 12 Oct 2026) ---------- * One job: a sign-up on a phone. The five ways to help come first and read as choices; a chosen one lifts with the * brand's yellow offset (the only yellow besides the button). The photo runs across the top, the form below. */ .aw-vol-page { background: none; border-radius: 0; overflow: visible; margin-block: var(--s-6) var(--s-12); gap: var(--s-6); } .aw-vol-page .aw-vol-banner-photo img { height: 180px; border-radius: var(--r-4); } .aw-vol-page .aw-vol-banner-body { padding: 0; max-width: 40rem; } .aw-vol-page .aw-vol-banner-title { font-size: var(--kit-type-h3); } .aw-vol-page .aw-vol-banner-body > p { color: var(--kit-color-muted); max-width: 34rem; } .aw-vol-roles { border: 0; padding: 0; margin: var(--s-6) 0 var(--s-8); display: grid; gap: var(--s-3); } .aw-vol-roles > legend { font-size: var(--kit-type-h4); font-weight: var(--kit-weight-strong); margin-bottom: var(--s-4); padding: 0; } .aw-vol-role.kit-checkbox { display: flex; align-items: center; gap: var(--s-4); margin: 0; cursor: pointer; min-height: 52px; padding: var(--s-2) var(--s-4); border: 1px solid var(--kit-color-line); border-radius: var(--r-3, 10px); background: var(--kit-color-bg); font-size: var(--kit-type-lead); font-weight: var(--kit-weight-strong); line-height: 1.3; transition: transform var(--kit-motion-fast, 150ms) var(--kit-ease-spring, ease), box-shadow var(--kit-motion-fast, 150ms) var(--kit-ease-spring, ease), border-color var(--kit-motion-fast, 150ms) ease; } .aw-vol-role.kit-checkbox input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--kit-color-ink); } .aw-vol-role.kit-checkbox:hover { border-color: var(--kit-color-ink); } .aw-vol-role.kit-checkbox:has(input:checked) { border-color: var(--kit-color-ink); box-shadow: 6px 6px 0 var(--kit-color-accent); transform: translate(-2px, -2px); } .aw-vol-role.kit-checkbox:has(input:focus-visible) { outline: 3px solid var(--kit-color-focus); outline-offset: 2px; } .aw-vol-roles.is-invalid .aw-vol-role.kit-checkbox { border-color: var(--kit-color-danger); } .aw-vol-details { margin-bottom: var(--s-6); } .aw-vol-page .aw-volunteer-form .kit-form-actions .kit-btn { width: 100%; justify-content: center; min-height: 52px; } @media (min-width: 640px) { .aw-vol-page .aw-vol-banner-photo img { height: 240px; } .aw-vol-page .aw-volunteer-form .kit-form-actions .kit-btn { width: auto; } } @media (min-width: 1024px) { /* Photo across the top on desktop too (owner, 12 Oct 2026); the form below it. */ .aw-vol-page { grid-template-columns: 1fr; } .aw-vol-page .aw-vol-banner-photo img { height: 360px; } } @media (prefers-reduced-motion: reduce) { .aw-vol-role.kit-checkbox { transition: none; } .aw-vol-role.kit-checkbox:has(input:checked) { transform: none; } } /* Claim page (12 Oct 2026): the listing as a card, services as tap rows like the Volunteer page. */ #claim .aw-form-for { background: var(--kit-color-surface); border-color: transparent; font-size: var(--kit-type-lead); } .aw-claim-services { border: 0; padding: 0; display: grid; gap: var(--s-2); } .aw-claim-services > legend { font-weight: var(--kit-weight-strong); margin-bottom: var(--s-3); } .aw-claim-services .kit-checkbox { display: flex; align-items: center; gap: var(--s-3); margin: 0; min-height: 48px; padding: var(--s-2) var(--s-3); border: 1px solid var(--kit-color-line); border-radius: var(--r-3, 12px); background: var(--kit-color-bg); cursor: pointer; transition: border-color var(--kit-motion-fast, 150ms) ease, box-shadow var(--kit-motion-fast, 150ms) ease; } .aw-claim-services .kit-checkbox input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--kit-color-ink); } .aw-claim-services .kit-checkbox:has(input:checked) { border-color: var(--kit-color-ink); box-shadow: 4px 4px 0 var(--kit-color-accent); } .aw-claim-services .kit-checkbox:has(input:focus-visible) { outline: 3px solid var(--kit-color-focus); outline-offset: 2px; } @media (min-width: 640px) { .aw-claim-services { grid-template-columns: 1fr 1fr; } .aw-claim-services > legend { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .aw-claim-services .kit-checkbox { transition: none; } } /* Directory search, wide screens (fix 12 Oct 2026): the name field, the three selects and Search sit on one line, * top-aligned; "Verified only" goes on its own line under the selects instead of pushing the row out of line. */ @media (min-width: 768px) { .aw-dir-more-body .aw-dir-check { grid-column: 1 / -1; } } @media (min-width: 1200px) { .aw-dir-search { align-items: start; } .aw-dir-submit { margin-top: 30px; } /* the height of a field label (22px) plus its gap (8px) */ } /* Source marks as icons: Google Maps pin, organisation building (12 Oct 2026). */ .aw-datasrc-img { display: block; width: 16px; height: 16px; } .aw-datasrc .aw-datasrc-mark:has(.aw-datasrc-img) { display: inline-flex; align-items: center; } .aw-verified-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.1em; height: 1.1em; margin-left: .2em; border-radius: 50%; background: var(--kit-color-success); color: var(--kit-color-on-ink, #fff); vertical-align: -0.12em; } .aw-verified-mark .kit-ico { width: .7em; height: .7em; } /* Sponsored blocks (sponsored-blocks.php): a card or a banner, always labelled "Sponsored". Phone: one column; from 768px the banner puts its picture beside the text. */ .aw-sponsored-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kit-space-2); margin: 0 0 var(--kit-space-3); font-size: var(--kit-type-xs); color: var(--kit-color-muted); } .aw-sponsored-item { border: 1px solid var(--kit-color-line); border-radius: var(--kit-radius-card, 12px); padding: var(--kit-space-4); margin-block: var(--kit-space-7); max-width: var(--kit-width-content); background: var(--kit-surface-card, var(--kit-color-raised)); } .aw-sponsored-item-media { display: block; aspect-ratio: 16/9; margin-bottom: var(--kit-space-3); border-radius: var(--kit-radius-card, 12px); overflow: hidden; } .aw-sponsored-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .aw-sponsored-item-title { margin: 0 0 var(--kit-space-2); font-size: var(--kit-type-h4, 1.125rem); } .aw-sponsored-item p:last-child { margin-bottom: 0; } .aw-sponsored-banner { display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: var(--r-4); background: var(--kit-color-surface); margin-block: var(--s-12); } .aw-sponsored-banner-media img { display: block; width: 100%; height: 180px; object-fit: cover; } .aw-sponsored-banner-body { padding: var(--s-6); } .aw-sponsored-banner-body > * { margin-block: 0 var(--s-4); } .aw-sponsored-banner-body > :last-child { margin-bottom: 0; } .aw-sponsored-banner-title { font-size: var(--kit-type-h2); } @media (min-width: 768px) { .aw-sponsored-banner:has(.aw-sponsored-banner-media) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; } .aw-sponsored-banner-media img { height: 100%; min-height: 220px; } } /* Directory results: at most 720px wide (owner, 12 Oct 2026). */ .aw-orgs { max-width: 720px; } /* Listing type icons (owner, 12 Oct 2026). Lucide (ISC licence); cow from Phosphor Icons (MIT licence). */ .aw-type-ico { display: inline-block; width: 1em; height: 1em; margin-right: .35em; vertical-align: -0.14em; background: currentColor; -webkit-mask: var(--t) center / contain no-repeat; mask: var(--t) center / contain no-repeat; flex: none; } .aw-type-ico--animal-welfare-organisation { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='11' cy='4' r='2' /%3E %3Ccircle cx='18' cy='8' r='2' /%3E %3Ccircle cx='20' cy='16' r='2' /%3E %3Cpath d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z' /%3E %3C/svg%3E"); } .aw-type-ico--gaushala { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='black'%3E%3Cpath d='M104,192a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16H96A8,8,0,0,1,104,192Zm72-8H160a8,8,0,0,0,0,16h16a8,8,0,0,0,0-16Zm-76-48a12,12,0,1,0-12-12A12,12,0,0,0,100,136Zm56,0a12,12,0,1,0-12-12A12,12,0,0,0,156,136Zm88.39-13.88A16,16,0,0,1,232,128H200v32a40,40,0,0,1-24,72H80a40,40,0,0,1-24-72V128H24A16,16,0,0,1,8.31,109,56.13,56.13,0,0,1,63.22,64h1.64A55.83,55.83,0,0,1,48,24a8,8,0,0,1,16,0,40,40,0,0,0,40,40h48a40,40,0,0,0,40-40,8,8,0,0,1,16,0,55.83,55.83,0,0,1-16.86,40h1.64a56.13,56.13,0,0,1,54.91,45A15.82,15.82,0,0,1,244.39,122.12ZM72,152.8a40.57,40.57,0,0,1,8-.8h96a40.57,40.57,0,0,1,8,.8V104a24,24,0,0,0-24-24H96a24,24,0,0,0-24,24ZM56,112v-8a39.81,39.81,0,0,1,8-24h-.8A40.09,40.09,0,0,0,24,112Zm144,80a24,24,0,0,0-24-24H80a24,24,0,0,0,0,48h96A24,24,0,0,0,200,192Zm32-80a40.08,40.08,0,0,0-39.2-32H192a39.81,39.81,0,0,1,8,24v8Z'/%3E%3C/svg%3E"); } .aw-type-ico--veterinary-dispensary { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m10.5 20.5 10-10a4.95 4.95 0 1 0-7-7l-10 10a4.95 4.95 0 1 0 7 7Z' /%3E %3Cpath d='m8.5 8.5 7 7' /%3E %3C/svg%3E"); } .aw-type-ico--veterinary-office { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cline x1='3' x2='21' y1='22' y2='22' /%3E %3Cline x1='6' x2='6' y1='18' y2='11' /%3E %3Cline x1='10' x2='10' y1='18' y2='11' /%3E %3Cline x1='14' x2='14' y1='18' y2='11' /%3E %3Cline x1='18' x2='18' y1='18' y2='11' /%3E %3Cpolygon points='12 2 20 7 4 7' /%3E %3C/svg%3E"); } .aw-type-ico--veterinary-hospital { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 6v4' /%3E %3Cpath d='M14 14h-4' /%3E %3Cpath d='M14 18h-4' /%3E %3Cpath d='M14 8h-4' /%3E %3Cpath d='M18 12h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h2' /%3E %3Cpath d='M18 22V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v18' /%3E %3C/svg%3E"); } .aw-type-ico--abc-centre { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Ccircle cx='6' cy='6' r='3' /%3E %3Cpath d='M8.12 8.12 12 12' /%3E %3Cpath d='M20 4 8.12 15.88' /%3E %3Ccircle cx='6' cy='18' r='3' /%3E %3Cpath d='M14.8 14.8 20 20' /%3E %3C/svg%3E"); } .aw-type-ico--wildlife-rescue { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M16 7h.01' /%3E %3Cpath d='M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20' /%3E %3Cpath d='m20 7 2 .5-2 .5' /%3E %3Cpath d='M10 18v3' /%3E %3Cpath d='M14 17.75V21' /%3E %3Cpath d='M7 18a6 6 0 0 0 3.84-10.61' /%3E %3C/svg%3E"); } .aw-type-ico--mobile-veterinary-unit { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10 10H6' /%3E %3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2' /%3E %3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.28a1 1 0 0 0-.684-.948l-1.923-.641a1 1 0 0 1-.578-.502l-1.539-3.076A1 1 0 0 0 16.382 8H14' /%3E %3Cpath d='M8 8v4' /%3E %3Cpath d='M9 18h6' /%3E %3Ccircle cx='17' cy='18' r='2' /%3E %3Ccircle cx='7' cy='18' r='2' /%3E %3C/svg%3E"); } .aw-type-ico--animal-shelter { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8' /%3E %3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' /%3E %3C/svg%3E"); } .aw-type-ico--rescue-group { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16' /%3E %3Cpath d='m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9' /%3E %3Cpath d='m2 15 6 6' /%3E %3Cpath d='M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z' /%3E %3C/svg%3E"); } .aw-type-ico--veterinary-clinic { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M11 2v2' /%3E %3Cpath d='M5 2v2' /%3E %3Cpath d='M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1' /%3E %3Cpath d='M8 15a6 6 0 0 0 12 0v-3' /%3E %3Ccircle cx='20' cy='10' r='2' /%3E %3C/svg%3E"); } .aw-type-ico--animal-ambulance { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M7 18v-6a5 5 0 1 1 10 0v6' /%3E %3Cpath d='M5 21a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2z' /%3E %3Cpath d='M21 12h1' /%3E %3Cpath d='M18.5 4.5 18 5' /%3E %3Cpath d='M2 12h1' /%3E %3Cpath d='M12 2v1' /%3E %3Cpath d='m4.929 4.929.707.707' /%3E %3Cpath d='M12 12v6' /%3E %3C/svg%3E"); } .aw-type-ico--sanctuary { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z' /%3E %3Cpath d='M7 16v6' /%3E %3Cpath d='M13 19v3' /%3E %3Cpath d='M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5' /%3E %3C/svg%3E"); } .aw-type-ico--bird-hospital { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12.67 19a2 2 0 0 0 1.416-.588l6.154-6.172a6 6 0 0 0-8.49-8.49L5.586 9.914A2 2 0 0 0 5 11.328V18a1 1 0 0 0 1 1z' /%3E %3Cpath d='M16 8 2 22' /%3E %3Cpath d='M17.5 15H9' /%3E %3C/svg%3E"); } .aw-type-ico--boarding-and-foster { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M2 4v16' /%3E %3Cpath d='M2 8h18a2 2 0 0 1 2 2v10' /%3E %3Cpath d='M2 17h20' /%3E %3Cpath d='M6 8v9' /%3E %3C/svg%3E"); } .aw-type-ico--adoption-network { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z' /%3E %3Cpath d='M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66' /%3E %3Cpath d='m18 15-2-2' /%3E %3Cpath d='m15 18-2-2' /%3E %3C/svg%3E"); } .aw-type-ico--feeder-network { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M12 21a9 9 0 0 0 9-9H3a9 9 0 0 0 9 9Z' /%3E %3Cpath d='M7 21h10' /%3E %3Cpath d='M19.5 12 22 6' /%3E %3Cpath d='M16.25 3c.27.1.8.53.75 1.36-.06.83-.93 1.2-1 2.02-.05.78.34 1.24.73 1.62' /%3E %3Cpath d='M11.25 3c.27.1.8.53.74 1.36-.05.83-.93 1.2-.98 2.02-.06.78.33 1.24.72 1.62' /%3E %3Cpath d='M6.25 3c.27.1.8.53.75 1.36-.06.83-.93 1.2-1 2.02-.05.78.34 1.24.74 1.62' /%3E %3C/svg%3E"); } .aw-type-ico--emergency-rescue { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' /%3E %3Cpath d='M12 9v4' /%3E %3Cpath d='M12 17h.01' /%3E %3C/svg%3E"); } .aw-type-ico--legal-aid { --t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z' /%3E %3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z' /%3E %3Cpath d='M7 21h10' /%3E %3Cpath d='M12 3v18' /%3E %3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2' /%3E %3C/svg%3E"); } /* The logo lines up with the top of the name (owner, 12 Oct 2026). */ .aw-org-mark { align-self: start; }