/* ============================================================ Canines 4 Hope - shared design system (demo rebuild) One stylesheet for every page. Page builders write markup only. Art direction ------------- Their brand carries one usable signal: the pale green paw in the logo. That green is pushed to a deep pine as the primary, laid on a warm cream/bone canvas with deep ink text, and one warm amber accent that is reserved for calls to action and emphasis. Their old red/blue chrome is not carried over. Real photography gets room: the client photos are 800x600 (4:3) and every photo frame here respects that ratio. Motion contract (important) --------------------------- Everything is VISIBLE BY DEFAULT (opacity 1). Animation is opt-in: - the inline head script adds .anim to when motion is allowed - app.js adds .reveal-ready to , which is the ONLY thing that hides a .rv element before it is revealed - app.js also runs a 4s failsafe that strips .reveal-ready and marks everything revealed, so a broken observer can never hide content - the print block and the reduced-motion block force full visibility ============================================================ */ /* ---------- tokens ---------- */ :root { /* greens, grown from the brand paw mark */ --pine-900: #12291F; --pine-800: #173427; --pine-700: #1E4433; /* primary */ --pine-600: #2A5A44; --pine-500: #3A6E56; --pine-300: #7FA38F; --pine-100: #DCE7DF; --pine-050: #EEF4EE; --paw: #A7BE83; /* the paw green itself */ --paw-deep: #7E9A5C; /* warm canvas */ --cream: #FBF7EF; --cream-2: #F5EEE1; --cream-3: #EFE6D6; --bone: #FFFDF9; /* ink */ --ink: #20201C; --ink-2: #3A3831; --muted: #5F5A50; /* AA on cream at body size */ --on-dark: #F4EFE4; --on-dark-soft: rgba(244, 239, 228, 0.78); /* one warm accent, used sparingly */ --amber: #C4762A; /* decoration and non-text marks only, 3.52:1 on white */ --amber-deep: #A45F19; /* AA for white text on amber, 4.97:1 */ --amber-ink: #8A4E12; /* AA for small amber text on cream */ --line: rgba(30, 68, 51, 0.14); --line-2: rgba(30, 68, 51, 0.24); --line-dark: rgba(244, 239, 228, 0.18); --shadow-soft: 0 12px 30px rgba(18, 41, 31, 0.08); --shadow-lift: 0 24px 54px rgba(18, 41, 31, 0.16); --shadow-card: 0 2px 4px rgba(18, 41, 31, 0.04), 0 14px 34px rgba(18, 41, 31, 0.07); --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; --pill: 999px; --ease: cubic-bezier(0.22, 0.75, 0.25, 1); --ease-out: cubic-bezier(0.16, 0.84, 0.28, 1); --wrap: 1180px; --wrap-narrow: 760px; --wrap-wide: 1360px; --gutter: clamp(1.15rem, 4vw, 2.5rem); --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "Source Serif 4", Georgia, "Times New Roman", serif; --header-h: 74px; /* min-height of the header row */ --header-real: 112px; /* topbar + header row, corrected by app.js */ --subnav-h: 47px; /* the sticky in-page jump bar on subpages */ /* paw glyph used for list bullets and small marks */ --paw-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5.6' cy='9.4' rx='2.5' ry='3.2'/%3E%3Cellipse cx='10.9' cy='6.4' rx='2.6' ry='3.4'/%3E%3Cellipse cx='16.6' cy='7.1' rx='2.5' ry='3.2'/%3E%3Cellipse cx='20.6' cy='11.6' rx='2.2' ry='2.8'/%3E%3Cpath d='M12.6 12.1c3.4 0 6.6 2.5 6.6 5.5 0 2.3-2 3.5-4.2 3.5-1.3 0-2.4-.4-3.4-.4s-2.1.4-3.4.4C6 21.1 4 19.9 4 17.6c0-3 3.2-5.5 6.6-5.5z'/%3E%3C/svg%3E"); } /* ---------- reset + base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-real) + 20px); /* clip, not hidden: the parked mobile drawer and the decorative paw marks must not create a horizontal scroll, and clip keeps position: sticky working because it does not make a scroll container */ overflow-x: clip; } body { margin: 0; background: var(--cream); color: var(--ink-2); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.75; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: var(--pine-700); text-decoration: none; } a:hover { color: var(--amber-ink); } button { font: inherit; color: inherit; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } p { margin: 0 0 1.05em; } p:last-child { margin-bottom: 0; } [hidden] { display: none !important; } hr { border: 0; border-top: 1px solid var(--line); margin: clamp(2rem, 4vw, 3rem) 0; } ::selection { background: var(--paw); color: var(--pine-900); } /* one visible focus treatment everywhere */ :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; display: inline-flex; align-items: center; min-height: 44px; padding: 0.6rem 1.2rem; border-radius: var(--pill); background: var(--pine-700); color: #fff; font-weight: 600; transition: top 0.2s var(--ease); } .skip-link:focus { top: 1rem; color: #fff; } /* ---------- typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--pine-800); font-weight: 600; line-height: 1.12; letter-spacing: -0.012em; margin: 0 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2.3rem, 5.1vw, 3.9rem); line-height: 1.06; } h2 { font-size: clamp(1.8rem, 3.5vw, 2.75rem); } h3 { font-size: clamp(1.24rem, 1.9vw, 1.6rem); line-height: 1.24; } h4 { font-size: 1.08rem; line-height: 1.3; } /* small-caps label above a heading */ .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 0.85rem; font-family: var(--font-body); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pine-600); } .eyebrow::before { content: ""; width: 1.15em; height: 1.15em; flex: none; background-color: var(--paw-deep); -webkit-mask: var(--paw-mask) center / contain no-repeat; mask: var(--paw-mask) center / contain no-repeat; } .eyebrow-bare::before { display: none; } .eyebrow-light { color: var(--paw); } .eyebrow-light::before { background-color: var(--paw); } /* opening paragraph, one notch up from body */ .lede { font-size: clamp(1.1rem, 1.5vw, 1.28rem); line-height: 1.68; color: var(--ink-2); max-width: 40ch; } /* comfortable measure helpers: body copy sits at 65-75 characters */ .measure { max-width: 68ch; } .measure-tight { max-width: 56ch; } .measure-wide { max-width: 78ch; } .prose { max-width: 68ch; } .prose > * + * { margin-top: 1.05em; } .prose h3 { margin-top: 1.9em; margin-bottom: 0.5em; } .prose h3:first-child { margin-top: 0; } .prose a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } /* section heading block */ .sec-head { max-width: 60ch; margin-bottom: clamp(2rem, 3.6vw, 3rem); } .sec-head h2 { margin-bottom: 0.5em; } .sec-head-center { margin-inline: auto; text-align: center; } .sec-head-center .eyebrow { justify-content: center; } .sec-sub { font-size: 1.09rem; color: var(--muted); max-width: 68ch; margin: 0; } .sec-head-center .sec-sub { margin-inline: auto; } .serif { font-family: var(--font-display); } .ital { font-style: italic; } /* pine italic for a phrase inside a heading */ .accent { color: var(--pine-500); font-style: italic; } /* the sparing amber emphasis */ .accent-warm { color: var(--amber-ink); } .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; } .on-dark { color: var(--on-dark); } .on-dark a { color: var(--paw); } .on-dark a:hover { color: #fff; } .small { font-size: 0.9rem; } .fine { font-size: 0.8rem; color: var(--muted); line-height: 1.6; } .strong-pine { color: var(--pine-700); font-weight: 700; } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: var(--wrap-narrow); } .wrap-wide { max-width: var(--wrap-wide); } .section { padding: clamp(3.4rem, 7vw, 6.4rem) 0; } .section-sm { padding: clamp(2.4rem, 4.5vw, 4rem) 0; } .section-lg { padding: clamp(4.4rem, 9vw, 8rem) 0; } .section-tight-top { padding-top: 0; } /* section grounds, used to build the page rhythm */ .bg-cream { background: var(--cream); } .bg-paper { background: var(--bone); } .bg-cream2 { background: var(--cream-2); } .bg-pine { background: var(--pine-800); color: var(--on-dark); } .bg-pine-deep { background: var(--pine-900); color: var(--on-dark); } .bg-wash { background: var(--pine-050); } /* hairline dividers between same-colour sections */ .edge-top { border-top: 1px solid var(--line); } .edge-bottom { border-bottom: 1px solid var(--line); } /* generic two-column split: copy beside media */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split-copy-wide { grid-template-columns: 1.15fr 0.85fr; } .split-media-wide { grid-template-columns: 0.85fr 1.15fr; } .split-top { align-items: start; } /* flip which side the media sits on, at desktop only */ .split-flip > :first-child { order: 2; } /* When one column is much shorter than the other, a fixed 1fr 1fr split leaves a tall empty half. .split-flow lets the columns size to content so the short block does not reserve a dead column beside it. */ @media (min-width: 900px) { .split-flow { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: start; } .split-tight { gap: clamp(1.6rem, 3vw, 2.6rem); } } .stack-sm > * + * { margin-top: 0.7rem; } .stack > * + * { margin-top: 1.2rem; } .stack-lg > * + * { margin-top: 2rem; } .center { text-align: center; } .center-x { margin-inline: auto; } .row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; } .row-center { justify-content: center; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(251, 247, 239, 0.93); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow 0.3s var(--ease); } .site-header.scrolled { box-shadow: 0 8px 26px rgba(18, 41, 31, 0.09); } /* thin pine strip: where they are, and the phone, on every page */ .topbar { background: var(--pine-800); color: var(--on-dark-soft); font-size: 0.8rem; } .topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 38px; } .topbar-where { margin: 0; letter-spacing: 0.01em; } .topbar-tel { display: inline-flex; align-items: center; gap: 0.45rem; color: #fff; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .topbar-tel:hover { color: var(--paw); } .topbar-tel svg { width: 15px; height: 15px; } .header-in { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; color: var(--pine-800); } .brand:hover { color: var(--pine-800); } .brand-paw { display: inline-flex; width: 38px; height: 38px; flex: none; color: var(--paw-deep); transition: transform 0.35s var(--ease); } .brand:hover .brand-paw { transform: rotate(-8deg) scale(1.06); } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-name { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -0.01em; } .brand-4 { color: var(--paw-deep); } .brand-tag { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-top: 0.24em; } /* desktop nav */ .nav { display: flex; align-items: center; gap: clamp(0.35rem, 1.1vw, 1.05rem); } .nav > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0.3rem 0.15rem; font-size: 0.93rem; font-weight: 600; color: var(--ink-2); position: relative; /* a nav label must never wrap to two lines and grow the header */ white-space: nowrap; } .nav > a:not(.btn)::after { content: ""; position: absolute; left: 0.15rem; right: 0.15rem; bottom: 0.55rem; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease); } .nav > a:not(.btn):hover { color: var(--pine-700); } .nav > a:not(.btn):hover::after { transform: scaleX(1); } /* .is-here = this page (set in markup, or by app.js from the path) */ /* .is-current = scroll spy, cleared when nothing matches */ .nav > a.is-here, .nav > a.is-current { color: var(--pine-700); } .nav > a.is-here::after, .nav > a.is-current::after { transform: scaleX(1); } .nav-cta { flex: none; } /* phone link lives in the mobile drawer only. The selector has to match `.nav > a` specificity or the display: inline-flex above wins. */ .nav > a.nav-tel { display: none; } .nav-close { display: none; } .nav-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: transparent; color: var(--pine-700); cursor: pointer; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease); } .nav-toggle:hover { background: var(--pine-050); border-color: var(--pine-300); } .nav-toggle svg { width: 24px; height: 24px; } .nav-backdrop { position: fixed; inset: 0; z-index: 98; background: rgba(18, 41, 31, 0.45); opacity: 0; transition: opacity 0.3s var(--ease); } .nav-backdrop.show { opacity: 1; } body.nav-open { overflow: hidden; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0.75rem 1.65rem; border: 1.5px solid transparent; border-radius: var(--pill); background: var(--pine-700); color: #fff; font-family: var(--font-body); font-size: 0.98rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2; text-align: center; cursor: pointer; appearance: none; -webkit-appearance: none; box-shadow: 0 8px 20px rgba(30, 68, 51, 0.18); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .btn:hover { color: #fff; background: var(--pine-600); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(30, 68, 51, 0.24); } .btn svg { width: 18px; height: 18px; flex: none; } /* White label on the accent pill is normal-size text (0.98rem bold, and 0.88rem in .btn-sm), so it needs 4.5:1, not the 3:1 large-text ratio. --amber (#C4762A) is only 3.52:1 on white, so the button sits on --amber-deep (#A45F19, 4.97:1) and darkens further on hover. --amber stays for decoration and non-text marks only. */ .btn-accent { background: var(--amber-deep); box-shadow: 0 8px 20px rgba(138, 78, 18, 0.26); } .btn-accent:hover { background: var(--amber-ink); box-shadow: 0 14px 30px rgba(138, 78, 18, 0.32); } .btn-ghost { background: transparent; color: var(--pine-700); border-color: var(--line-2); box-shadow: none; } .btn-ghost:hover { background: var(--pine-050); color: var(--pine-800); border-color: var(--pine-300); box-shadow: none; } .btn-light { background: #fff; color: var(--pine-800); box-shadow: var(--shadow-soft); } .btn-light:hover { background: #fff; color: var(--pine-700); } /* .on-dark a wins on specificity over .btn-light, which would put paw green on a white pill (2.03:1). Restate the dark ink inside a dark section. */ .on-dark .btn-light, .on-dark .btn-light:hover, .on-dark a.btn-light, .on-dark a.btn-light:hover { color: var(--pine-800); } .btn-outline-light { background: transparent; color: var(--on-dark); border-color: rgba(244, 239, 228, 0.42); box-shadow: none; } .btn-outline-light:hover { background: rgba(244, 239, 228, 0.12); color: #fff; border-color: var(--paw); box-shadow: none; } .btn-sm { min-height: 44px; padding: 0.5rem 1.15rem; font-size: 0.88rem; } .btn-lg { min-height: 56px; padding: 0.95rem 2.15rem; font-size: 1.06rem; } .btn-block { width: 100%; } .btn[disabled] { opacity: 0.72; cursor: default; transform: none; } /* the phone button: the primary action on this site */ .btn-tel { letter-spacing: 0.015em; } .btn-tel svg { width: 17px; height: 17px; } /* inline forward link */ .cta-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; color: var(--pine-700); font-weight: 700; font-size: 0.95rem; } .cta-link span { transition: transform 0.25s var(--ease); } .cta-link:hover { color: var(--amber-ink); } .cta-link:hover span { transform: translateX(4px); } .on-dark .cta-link { color: var(--paw); } .on-dark .cta-link:hover { color: #fff; } /* ---------- hero (home) ---------- */ .hero { position: relative; overflow: hidden; padding: clamp(2.6rem, 6vw, 5.2rem) 0 clamp(3rem, 6vw, 5rem); background: radial-gradient(120% 100% at 88% 0%, var(--cream-2) 0%, rgba(245, 238, 225, 0) 58%), var(--cream); } /* oversized paw watermark, purely decorative */ .hero-paw { position: absolute; right: -6%; top: -12%; width: min(560px, 52vw); aspect-ratio: 1; background-color: rgba(167, 190, 131, 0.16); -webkit-mask: var(--paw-mask) center / contain no-repeat; mask: var(--paw-mask) center / contain no-repeat; transform: rotate(-14deg); pointer-events: none; } .hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .hero-copy h1 { margin-bottom: 0.5em; } .hero-title { font-size: clamp(2.4rem, 5.4vw, 4.1rem); letter-spacing: -0.02em; } .hero-sub { font-size: clamp(1.08rem, 1.45vw, 1.26rem); line-height: 1.66; color: var(--ink-2); max-width: 46ch; margin-bottom: 1.6rem; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.5rem; } /* the tagline + phone line under the hero buttons */ .hero-tel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; font-size: 0.98rem; color: var(--muted); margin: 0; } .hero-tel .serif { color: var(--pine-700); font-size: 1.12rem; font-style: italic; } .hero-tel a { font-weight: 700; color: var(--pine-700); } .hero-tel a:hover { color: var(--amber-ink); } /* hero photo cluster: one 4:3 hero photo, one offset support photo */ .hero-art { position: relative; } .hero-photo { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lift); background: var(--pine-100); } .hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* soft pine mask so type stays legible if a caption sits over it */ .hero-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 54%; background: linear-gradient(180deg, rgba(18, 41, 31, 0) 0%, rgba(18, 41, 31, 0.55) 45%, rgba(18, 41, 31, 0.82) 100%); pointer-events: none; } .hero-photo-cap { position: absolute; left: clamp(0.9rem, 2vw, 1.4rem); right: clamp(0.9rem, 2vw, 1.4rem); bottom: clamp(0.9rem, 2vw, 1.25rem); z-index: 1; margin: 0; color: #fff; font-size: 0.85rem; line-height: 1.45; text-shadow: 0 1px 12px rgba(18, 41, 31, 0.5); } .hero-photo-sm { position: absolute; left: -2.2rem; bottom: -2.4rem; width: 42%; max-width: 230px; margin: 0; border: 6px solid var(--bone); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); } .hero-photo-sm img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* if a page uses the caption and the offset photo together, keep the caption text clear of the small photo instead of hiding behind it */ .hero-art:has(.hero-photo-sm) .hero-photo-cap { padding-left: 46%; } /* ---------- page hero (subpages) ---------- */ .page-hero { position: relative; overflow: hidden; padding: clamp(2.6rem, 5.5vw, 4.4rem) 0 clamp(2.2rem, 4.5vw, 3.4rem); background: radial-gradient(110% 120% at 92% 0%, rgba(167, 190, 131, 0.2) 0%, rgba(167, 190, 131, 0) 60%), var(--cream-2); border-bottom: 1px solid var(--line); } .page-hero h1 { margin-bottom: 0.45em; } .page-hero-sub { font-size: clamp(1.06rem, 1.4vw, 1.22rem); line-height: 1.66; color: var(--ink-2); max-width: 66ch; margin-bottom: 1.4rem; } .page-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* variant with a photo beside the title */ .page-hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center; } .page-hero-art { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); } .page-hero-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* breadcrumb, one level */ .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1rem; font-size: 0.82rem; color: var(--muted); } .crumb a { font-weight: 600; } .crumb-sep { opacity: 0.55; } /* in-page section jumps on long subpages; the spy lives here too */ .subnav { position: sticky; top: var(--header-real); z-index: 60; background: rgba(255, 253, 249, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .subnav-in { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .subnav a { display: inline-flex; align-items: center; min-height: 46px; padding: 0.3rem 0.85rem; white-space: nowrap; font-size: 0.88rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; } .subnav a:hover { color: var(--pine-700); } .subnav a.is-current { color: var(--pine-700); border-bottom-color: var(--amber); } /* ---------- proof / credential strip ---------- */ .proof { padding: clamp(1.6rem, 3vw, 2.4rem) 0; background: var(--bone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .proof-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2.6rem); } .proof-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0; } /* Three equal chips, not three content-sized ones: this is the first trust element under the hero and nothing lines up when each card is its own width. */ .proof-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(0.8rem, 2.4vw, 2rem); max-width: 100%; } /* one credential: real badge art on a white chip + its name */ .proof-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.9rem 0.5rem 0.55rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 3px 10px rgba(18, 41, 31, 0.05); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .proof-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); } .proof-item img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; } .proof-item-body { display: flex; flex-direction: column; line-height: 1.25; } .proof-item-name { font-size: 0.86rem; font-weight: 700; color: var(--pine-800); } .proof-item-note { font-size: 0.73rem; color: var(--muted); } /* the sentence under the chips, held to a readable measure with its own action */ .proof-note { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; /* width first: .proof-in is a flex container that centres rather than stretches, so without it the block would size to its max-content and push past the viewport on a phone. */ width: 100%; max-width: 78ch; margin-inline: auto; text-align: center; } /* text-only credential row */ .proof-text { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1.15rem; font-size: 0.88rem; color: var(--muted); } .proof-text .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--paw-deep); } /* partners / supporters row: bigger logos, plain */ .partner-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.2rem, 4vw, 3rem); } .partner { display: flex; align-items: center; justify-content: center; padding: 0.6rem 0.9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); } .partner img { max-height: 54px; width: auto; object-fit: contain; } .partner-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); } .partner-card img { width: 56px; height: 56px; object-fit: contain; flex: none; } .partner-card h3 { font-size: 1.02rem; margin-bottom: 0.3em; } .partner-card p { font-size: 0.9rem; color: var(--muted); margin: 0; } /* ---------- cards ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1.1rem, 2.4vw, 1.8rem); } .card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { display: flex; flex-direction: column; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease), border-color 0.32s var(--ease); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--pine-300); } .card-media { position: relative; background: var(--pine-100); } .card-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s var(--ease); } .card:hover .card-media img { transform: scale(1.04); } .card-media-tall img { aspect-ratio: 3 / 4; } .card-media-wide img { aspect-ratio: 16 / 9; } .card-body { display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.15rem, 2vw, 1.6rem); flex: 1; } .card-body h3 { margin: 0; } .card-body p { color: var(--muted); font-size: 0.96rem; margin: 0; } .card-body .cta-link { margin-top: auto; } /* a card that is itself a link */ .card-link { color: inherit; } .card-link:hover { color: inherit; } /* pine card for a dark band */ .card-pine { background: rgba(244, 239, 228, 0.06); border-color: var(--line-dark); box-shadow: none; color: var(--on-dark); } .card-pine h3 { color: #fff; } .card-pine p { color: var(--on-dark-soft); } .card-pine:hover { border-color: var(--paw); box-shadow: none; } /* the one card in a grid that carries the primary action */ .card-feature { border-color: rgba(196, 118, 42, 0.42); box-shadow: var(--shadow-soft); } /* icon card: paw or line glyph instead of a photo */ .icon-card { display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1.2rem, 2.2vw, 1.7rem); background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease); } .icon-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } .icon-card h3 { font-size: 1.14rem; margin: 0; } .icon-card p { font-size: 0.95rem; color: var(--muted); margin: 0; } /* cards in a row stretch to equal height, so their links share one baseline */ .icon-card .cta-link { margin-top: auto; padding-top: 0.2rem; } .icon-glyph { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--pine-050); color: var(--pine-600); margin-bottom: 0.2rem; } .icon-glyph svg { width: 24px; height: 24px; } .icon-glyph-paw::before { content: ""; width: 26px; height: 26px; background-color: var(--paw-deep); -webkit-mask: var(--paw-mask) center / contain no-repeat; mask: var(--paw-mask) center / contain no-repeat; } .icon-glyph-warm { background: rgba(196, 118, 42, 0.12); color: var(--amber-ink); } /* compact link list card, for hub pages */ .link-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-2); min-height: 60px; transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), background-color 0.28s var(--ease); } .link-card:hover { transform: translateX(3px); border-color: var(--pine-300); background: #fff; color: var(--pine-800); } .link-card strong { font-weight: 700; } .link-card span { color: var(--muted); font-size: 0.88rem; display: block; } .link-card-arrow { color: var(--amber); flex: none; } /* ---------- program blocks ---------- */ /* A program is one offering told properly: photo on one side, copy and its task list on the other. Stack several and alternate .program-flip. */ .program { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(1.8rem, 4.5vw, 4rem); align-items: start; padding: clamp(2.2rem, 4.5vw, 3.6rem) 0; } .program + .program { border-top: 1px solid var(--line); } .program-flip .program-media { order: 2; } .program-media { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); background: var(--pine-100); } .program-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .program-media-tall img { aspect-ratio: 3 / 4; } /* Small source files must not be forced into a 4:3 crop: they upscale badly and the crop cuts subjects out of frame. Let them keep their own shape, and cap them at their natural width so a 240px file is never blown up to 557px. */ .program-media-native img { display: block; aspect-ratio: auto; object-fit: contain; width: auto; max-width: 100%; height: auto; margin-inline: auto; } .program-media-native { background: var(--pine-050); } /* therapy-dogs #visits mixes one small native photo with two 800x600 ones, so every frame in that section gets the same mat instead of one matted photo sitting above two full-bleed ones. */ .program-mat .program-media { padding: clamp(0.6rem, 1.4vw, 1rem); background: var(--pine-050); border: 1px solid var(--line); } .program-mat .program-media img { border-radius: var(--radius-sm); } @media (min-width: 900px) { /* The photo tracks the reading position instead of floating in dead space next to a body column two or three times its height. */ .program-media { position: sticky; top: calc(var(--header-real) + var(--subnav-h) + 1.5rem); } } .program-body h2, .program-body h3 { margin-bottom: 0.5em; } .program-body > p { color: var(--ink-2); max-width: 62ch; } .program-body > p.muted { color: var(--muted); } .program-cta { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.7rem; } /* narrow variant used inside a section that already has a heading */ .program-tight { padding: clamp(1.4rem, 3vw, 2.4rem) 0; } /* a compact strip of related offerings under a program */ .program-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 0.9rem; margin-top: 1.6rem; } /* nine chips in a four-up grid leaves a lone chip and three empty cells; a fixed three-up grid gives 3 + 3 + 3 */ @media (min-width: 760px) { .program-strip-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .program-chip { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 1rem; background: var(--pine-050); border-left: 3px solid var(--paw-deep); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2); transition: background-color 0.28s var(--ease), transform 0.28s var(--ease); } .program-chip:hover { background: var(--pine-100); transform: translateX(3px); color: var(--pine-800); } .program-chip strong { font-size: 0.97rem; font-weight: 700; color: var(--pine-800); } .program-chip span { font-size: 0.83rem; color: var(--muted); } /* ---------- task lists ---------- */ /* Their task lists are the substance of the offering, so they get real treatment: paw bullets, multi-column at width, and their own caveat preserved underneath in .task-note. */ .task-list { display: grid; gap: 0.5rem 2rem; } .task-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .task-list-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .task-list li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.99rem; line-height: 1.5; color: var(--ink-2); } .task-list li::before { content: ""; width: 1.05em; height: 1.05em; flex: none; margin-top: 0.22em; background-color: var(--paw-deep); -webkit-mask: var(--paw-mask) center / contain no-repeat; mask: var(--paw-mask) center / contain no-repeat; } .on-dark .task-list li { color: var(--on-dark); } .on-dark .task-list li::before { background-color: var(--paw); } /* boxed variant: each task in its own tile, good for a long list */ .task-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 0.7rem; } .task-tiles li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.8rem 1rem; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.95rem; line-height: 1.45; color: var(--ink-2); transition: border-color 0.28s var(--ease), background-color 0.28s var(--ease); } .task-tiles li:hover { border-color: var(--pine-300); background: #fff; } .task-tiles li::before { content: ""; width: 1.05em; height: 1.05em; flex: none; margin-top: 0.2em; background-color: var(--paw-deep); -webkit-mask: var(--paw-mask) center / contain no-repeat; mask: var(--paw-mask) center / contain no-repeat; } /* task list with a lead-in phrase per item: "Impulsive running - the dog..." The row is a block with a hanging indent, not a flex row: a flex row turns a bare lead-in into its own flex item, which columnises the term and starts every description at a different x. */ .task-defs { display: grid; gap: 0.85rem; } .task-defs li { position: relative; padding-left: 1.7em; font-size: 0.98rem; line-height: 1.6; color: var(--muted); } .task-defs li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.05em; height: 1.05em; background-color: var(--paw-deep); -webkit-mask: var(--paw-mask) center / contain no-repeat; mask: var(--paw-mask) center / contain no-repeat; } .task-defs strong { color: var(--pine-800); font-weight: 700; } /* their caveat, always kept with any task list. It carries a bottom margin so a paragraph that follows it outside a .stack is not glued to the rule; `p:last-child` still zeroes the tail when the caveat closes a block. */ .task-note { margin: 1.2rem 0; padding-left: 1rem; border-left: 2px solid var(--line-2); font-size: 0.86rem; line-height: 1.6; color: var(--muted); max-width: 66ch; } .on-dark .task-note { color: var(--on-dark-soft); border-left-color: var(--line-dark); } /* short label chips, e.g. conditions a program covers */ .chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .chips li, .chip { display: inline-flex; align-items: center; padding: 0.4rem 0.85rem; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--bone); font-size: 0.85rem; font-weight: 600; color: var(--pine-800); } .chips-warm li, .chip-warm { border-color: rgba(196, 118, 42, 0.35); background: rgba(196, 118, 42, 0.08); color: var(--amber-ink); } .on-dark .chips li { background: rgba(244, 239, 228, 0.08); border-color: var(--line-dark); color: var(--on-dark); } /* ---------- photo treatments ---------- */ /* Every source photo is 4:3 or smaller. Frames declare the ratio so nothing shifts while images load. */ .figure { margin: 0; } .figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); } .figure-round img { border-radius: var(--radius-lg); } /* a short figure beside a long copy column should track the reading position rather than leave a tall empty half-column under itself */ @media (min-width: 900px) { .figure-sticky { position: sticky; top: calc(var(--header-real) + var(--subnav-h) + 1.5rem); } } /* small source files keep their own aspect ratio */ .figure-native img { aspect-ratio: auto; height: auto; object-fit: contain; } .figure-shadow img { box-shadow: var(--shadow-soft); } .figure-frame { padding: 8px; background: var(--bone); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow-card); } .figure-cap { margin: 0.6rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--muted); } .on-dark .figure-cap { color: var(--on-dark-soft); } /* photo grid: the gallery treatment, 4:3 throughout */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(0.6rem, 1.4vw, 1rem); } .photo-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .photo-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .photo-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .photo-grid figure, .photo-grid .photo { margin: 0; } .photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); background: var(--pine-100); } /* subtle hover craft: lift and a hair of warmth */ .photo-grid figure, .photo-grid .photo { position: relative; overflow: hidden; border-radius: var(--radius-sm); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .photo-grid figure:hover, .photo-grid .photo:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); z-index: 1; } .photo-grid img { transition: transform 0.6s var(--ease); } .photo-grid figure:hover img, .photo-grid .photo:hover img { transform: scale(1.045); } /* small source photos keep their own aspect instead of being cropped and upscaled into a landscape tile */ .photo-grid-native img { aspect-ratio: auto; object-fit: contain; height: auto; background: var(--pine-050); } .photo-grid-native figure { align-self: start; } /* mosaic: first photo takes a 2x2 block on wide screens */ .photo-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); } .photo-mosaic > :first-child { grid-column: span 2; grid-row: span 2; } .photo-mosaic > :first-child img { aspect-ratio: 1 / 1; height: 100%; } /* horizontal rail for a long run of photos without a giant grid */ .photo-rail { display: flex; gap: 0.8rem; overflow-x: auto; padding-bottom: 0.7rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .photo-rail > * { flex: 0 0 clamp(220px, 32vw, 320px); scroll-snap-align: start; margin: 0; } .photo-rail img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); } /* two photos side by side, offset for rhythm */ .photo-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.7rem, 1.6vw, 1.1rem); align-items: start; } .photo-duo > :last-child { margin-top: clamp(1rem, 3vw, 2.4rem); } .photo-duo figure { margin: 0; } .photo-duo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-card); } /* warm overlay: for photos that sit under type or on a pine band */ .photo-tint { position: relative; overflow: hidden; border-radius: var(--radius); } .photo-tint::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 41, 31, 0.05) 0%, rgba(18, 41, 31, 0.55) 100%); pointer-events: none; } .photo-tint-warm::after { background: linear-gradient(150deg, rgba(196, 118, 42, 0.22) 0%, rgba(18, 41, 31, 0.5) 100%); } /* pine duotone, for older low-resolution source photos that read poorly at size; keeps them intentional rather than apologetic */ .photo-duo-tone { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--pine-800); } .photo-duo-tone img { filter: grayscale(1) contrast(1.06) brightness(1.03); mix-blend-mode: luminosity; } .photo-duo-tone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(30, 68, 51, 0.55), rgba(167, 190, 131, 0.3)); mix-blend-mode: multiply; pointer-events: none; } /* caption laid over a photo */ .photo-over-cap { position: absolute; left: 1rem; right: 1rem; bottom: 0.9rem; z-index: 1; margin: 0; color: #fff; font-size: 0.85rem; line-height: 1.45; text-shadow: 0 1px 10px rgba(18, 41, 31, 0.55); } /* full-bleed photo band with copy over it */ .photo-band { position: relative; overflow: hidden; background: var(--pine-900); color: var(--on-dark); } .photo-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; } /* push the subject clear of the left-aligned headline */ .photo-band-right > img { object-position: 74% 50%; } .photo-band-in { position: relative; padding: clamp(3.4rem, 7vw, 6rem) 0; } .photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18, 41, 31, 0.88) 0%, rgba(18, 41, 31, 0.55) 70%); } .photo-band-in { z-index: 1; } /* ---------- pull quote / tagline ---------- */ /* Their taglines are short and good. Give them air and a serif voice. */ .pull { margin: 0; padding-left: clamp(1rem, 2.5vw, 1.8rem); border-left: 3px solid var(--paw-deep); max-width: 44ch; } .pull p { font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 2.05rem); line-height: 1.28; font-style: italic; color: var(--pine-800); margin: 0; } .pull-cite { display: block; margin-top: 0.8rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-style: normal; } .on-dark .pull { border-left-color: var(--paw); } .on-dark .pull p { color: #fff; } .on-dark .pull-cite { color: var(--on-dark-soft); } /* the centred tagline band: one line, all the air it deserves */ .tagline-band { padding: clamp(2.8rem, 6vw, 5rem) 0; background: var(--pine-800); color: #fff; text-align: center; position: relative; overflow: hidden; } .tagline-band .paw-mark { position: absolute; left: 50%; top: 50%; width: min(420px, 60vw); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-10deg); background-color: rgba(167, 190, 131, 0.12); -webkit-mask: var(--paw-mask) center / contain no-repeat; mask: var(--paw-mask) center / contain no-repeat; pointer-events: none; } .tagline { position: relative; margin: 0; font-family: var(--font-display); font-size: clamp(1.65rem, 4.2vw, 3rem); font-style: italic; line-height: 1.2; color: #fff; text-wrap: balance; } .tagline-sub { position: relative; margin: 1.1rem 0 0; font-size: 1.02rem; color: var(--on-dark-soft); max-width: 60ch; margin-inline: auto; } .tagline-cta { position: relative; margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; } /* inline tagline, cream ground */ .tagline-quiet { margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.85rem); font-style: italic; color: var(--pine-700); line-height: 1.25; } /* ---------- media list ---------- */ /* Real press coverage: outlet, headline, date, real thumbnail (200x125). */ .media-list { display: grid; gap: 0.75rem; } .media-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media-item { display: flex; } .media-link { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 0.85rem 1.1rem; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .media-link:hover { transform: translateY(-2px); border-color: var(--pine-300); box-shadow: var(--shadow-soft); color: var(--pine-800); } .media-thumb { width: 104px; flex: none; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 8px; background: var(--pine-100); } .media-body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; } .media-outlet { font-size: 0.71rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--pine-600); } .media-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.3; color: var(--pine-800); } .media-date { font-size: 0.8rem; color: var(--muted); } .media-ext { flex: none; color: var(--amber); } .media-ext svg { width: 16px; height: 16px; } /* video subjects, no embeds: a card per real video the source names */ .vid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(0.8rem, 1.8vw, 1.2rem); } .vid-card { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.05rem 1.2rem; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); } .vid-glyph { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--pine-700); color: #fff; } .vid-glyph svg { width: 16px; height: 16px; margin-left: 2px; } .vid-card p { margin: 0; font-size: 0.96rem; line-height: 1.55; color: var(--ink-2); } /* A captioned list of the videos their site publishes. No thumbnails are invented for them, and every row is the same height by construction. */ .vid-list { display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 78ch; } .vid-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0.5rem 1rem; align-items: start; padding: 1.1rem 0.2rem; border-bottom: 1px solid var(--line); } .vid-list .vid-glyph { grid-row: span 2; } .vid-list h3 { margin: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--pine-800); align-self: center; } .vid-list p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--muted); } @media (max-width: 560px) { .vid-list li { grid-template-columns: 32px minmax(0, 1fr); } .vid-list .vid-glyph { width: 32px; height: 32px; } } /* postal address block on the contact page */ .contact-address { font-style: normal; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.7; color: var(--pine-800); margin: 0 0 0.9rem; } /* partner cards: a logo and their own description of the organization */ .partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(0.9rem, 2vw, 1.4rem); } .partner { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.4rem; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); } .partner-mark { display: flex; align-items: center; justify-content: flex-start; min-height: 64px; } .partner-mark img { max-height: 64px; width: auto; } .partner h3 { margin: 0; font-size: 1.05rem; } .partner p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--muted); } /* a published client story, in the family's own words */ .story { padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--pine-050); border-left: 4px solid var(--paw-deep); border-radius: 0 var(--radius) var(--radius) 0; } .story h3, .story h4 { margin: 0 0 0.15em; font-size: 1.15rem; } .story-kicker { margin: 0 0 1em; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pine-600); } .story p { font-size: 0.98rem; line-height: 1.75; color: var(--ink-2); } .story-attrib { margin: 0; font-size: 0.85rem; color: var(--muted); font-style: italic; } /* ---------- FAQ accordion ---------- */ .faq { display: grid; gap: 0.6rem; max-width: 70ch; } .faq-item { background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .faq-item:hover { border-color: var(--pine-300); } .faq-item.is-open { border-color: var(--pine-300); box-shadow: var(--shadow-card); } .faq-h { margin: 0; font-family: var(--font-body); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 56px; padding: 0.95rem 1.15rem; border: 0; background: transparent; text-align: left; cursor: pointer; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--pine-800); transition: color 0.25s var(--ease); } .faq-q:hover { color: var(--pine-600); } .faq-ico { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--pine-050); transition: background-color 0.25s var(--ease), transform 0.3s var(--ease); } .faq-ico::before, .faq-ico::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--pine-700); border-radius: 2px; transform: translate(-50%, -50%); transition: opacity 0.25s var(--ease), transform 0.3s var(--ease); } .faq-ico::before { width: 10px; height: 2px; } .faq-ico::after { width: 2px; height: 10px; } .faq-q[aria-expanded="true"] .faq-ico { background: var(--amber); } .faq-q[aria-expanded="true"] .faq-ico::before, .faq-q[aria-expanded="true"] .faq-ico::after { background: #fff; } .faq-q[aria-expanded="true"] .faq-ico::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); } .faq-a { padding: 0 1.15rem 1.15rem; } .faq-a p { margin: 0; color: var(--muted); max-width: 66ch; } .faq-a p + p { margin-top: 0.8em; } .anim .faq-a:not([hidden]) { animation: faqOpen 0.32s var(--ease-out); } @keyframes faqOpen { from { opacity: 0; transform: translateY(-5px); } } /* definition list variant, when a plain Q/A read is better than a toggle */ .deflist { display: grid; gap: 1.4rem; max-width: 70ch; margin: 0; } .deflist dt { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; line-height: 1.35; color: var(--pine-800); margin-bottom: 0.35rem; } .deflist dd { margin: 0; color: var(--muted); } .deflist-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.6rem; max-width: none; } /* ---------- steps ---------- */ /* Ordered guidance (their fundraising steps). Semantically an
    ; the marker is a paw, never a decorative numeral. */ .steps { display: grid; gap: 1.1rem; counter-reset: none; } .steps li { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.1rem 1.25rem; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); } .steps li::before { content: ""; width: 26px; height: 26px; flex: none; margin-top: 0.15rem; background-color: var(--paw-deep); -webkit-mask: var(--paw-mask) center / contain no-repeat; mask: var(--paw-mask) center / contain no-repeat; } .steps h3 { font-size: 1.1rem; margin: 0 0 0.35em; } .steps p { margin: 0; color: var(--muted); font-size: 0.96rem; } .steps-body { min-width: 0; } .steps-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0.9rem; } /* ---------- callouts ---------- */ /* the differentiator flag: "No Long Waiting Lists!" */ .flag { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; padding: clamp(1.3rem, 2.6vw, 2rem); background: linear-gradient(140deg, rgba(196, 118, 42, 0.1), rgba(167, 190, 131, 0.14)); border: 1px solid rgba(196, 118, 42, 0.32); border-radius: var(--radius); } .flag-body { flex: 1 1 22rem; min-width: 0; } .flag h3 { margin: 0 0 0.4em; } .flag p { margin: 0; color: var(--ink-2); max-width: 62ch; } .callout { padding: clamp(1.2rem, 2.4vw, 1.8rem); background: var(--pine-050); border-left: 3px solid var(--pine-600); border-radius: 0 var(--radius) var(--radius) 0; } .callout h3 { font-size: 1.15rem; margin: 0 0 0.4em; } .callout p { margin: 0; color: var(--muted); } .callout-warm { background: rgba(196, 118, 42, 0.08); border-left-color: var(--amber); } /* No margin reset here: this rule sits after `p` and after `.stack > * + *`, so `margin: 0` would win on later-wins and glue every p.note to whatever precedes it. `p:last-child` already zeroes the trailing margin. */ .note { font-size: 0.86rem; line-height: 1.6; color: var(--muted); max-width: 68ch; } /* ---------- service area ---------- */ .area-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); } .area-col h3 { font-size: 0.78rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pine-600); margin-bottom: 0.8em; } .area-list { display: grid; gap: 0.28rem; } .area-list li { font-size: 0.95rem; color: var(--muted); } .on-dark .area-list li { color: var(--on-dark-soft); } .on-dark .area-col h3 { color: var(--paw); } /* city chips, when the list should read as coverage rather than a column */ .area-chips { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; } .area-chips li { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; color: var(--muted); } .area-chips li:not(:last-child)::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--paw-deep); margin-left: 0.15rem; } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; padding: clamp(3rem, 6.5vw, 5.4rem) 0; background: var(--pine-800); color: var(--on-dark); } .cta-band .paw-mark { position: absolute; right: -4%; bottom: -30%; width: min(420px, 55vw); aspect-ratio: 1; transform: rotate(12deg); background-color: rgba(167, 190, 131, 0.1); -webkit-mask: var(--paw-mask) center / contain no-repeat; mask: var(--paw-mask) center / contain no-repeat; pointer-events: none; } .cta-band-in { position: relative; text-align: center; } .cta-band h2 { color: #fff; margin-bottom: 0.5em; } .cta-band p { color: var(--on-dark-soft); max-width: 58ch; margin-inline: auto; } .cta-band-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 1.8rem; } .cta-band-tel { margin-top: 1.3rem; font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--paw); } /* cream version for a lighter page ending */ .cta-band-cream { background: var(--cream-2); color: var(--ink-2); } .cta-band-cream h2 { color: var(--pine-800); } .cta-band-cream p { color: var(--muted); } .cta-band-cream .paw-mark { background-color: rgba(126, 154, 92, 0.12); } .cta-band-cream .cta-band-tel { color: var(--pine-700); } /* the standing phone reassurance line, reusable anywhere */ .tel-line { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--pine-700); } .tel-line svg { width: 17px; height: 17px; } .on-dark .tel-line { color: var(--paw); } /* both published numbers, stacked, inside a callout that zeroes p margins */ .tel-stack { display: grid; justify-items: start; gap: 0.45rem; } .tel-line-2 { font-size: 0.95rem; color: var(--pine-600); } .callout .tel-stack + .fine { margin-top: 0.75rem; } /* ---------- form ---------- */ .form-card { background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.2vw, 2.4rem); box-shadow: var(--shadow-card); } .form-card-head { margin-bottom: 1.4rem; } .form-card-head h2, .form-card-head h3 { margin-bottom: 0.35em; } .form-card-head p { margin: 0; color: var(--muted); font-size: 0.96rem; } .field { margin-bottom: 1.05rem; } .field label { display: block; margin-bottom: 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pine-700); } .field .opt { font-weight: 600; letter-spacing: 0.05em; text-transform: none; color: var(--muted); } .field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 0.75rem 1rem; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; color: var(--ink-2); font-family: var(--font-body); font-size: 1rem; line-height: 1.45; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .field textarea { min-height: 132px; resize: vertical; } .field select { appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4433' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 18px 18px; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--pine-300); } /* a file picker needs room for the browser's own button */ .field input[type="file"] { padding: 0.6rem 0.7rem; line-height: 1.9; cursor: pointer; } .field input[type="file"]::file-selector-button { margin-right: 0.8rem; padding: 0.45rem 0.9rem; border: 1px solid var(--line-2); border-radius: var(--pill); background: var(--pine-050); color: var(--pine-800); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pine-600); box-shadow: 0 0 0 4px rgba(42, 90, 68, 0.14); } .field input::placeholder, .field textarea::placeholder { color: #9A948A; } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; } .field-check { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 1.05rem; } .field-check input { width: 20px; height: 20px; min-height: 0; margin-top: 0.2rem; flex: none; accent-color: var(--pine-700); } .field-check label { margin: 0; font-size: 0.92rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); line-height: 1.55; } .form-fine { margin: 0.9rem 0 0; font-size: 0.79rem; color: var(--muted); } .form-alt { margin: 0.9rem 0 0; font-size: 0.92rem; } .form-alt a { font-weight: 700; } /* mock success panel, injected by app.js; always carries the phone */ .form-success { padding: clamp(1.7rem, 3.6vw, 2.6rem); background: linear-gradient(165deg, var(--bone), rgba(167, 190, 131, 0.16)); border: 1px solid rgba(126, 154, 92, 0.45); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); text-align: center; } .form-success:focus { outline: none; } .form-success-glyph { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 1rem; border-radius: 50%; background: var(--pine-700); color: #fff; box-shadow: 0 10px 22px rgba(30, 68, 51, 0.24); } .form-success h3 { margin-bottom: 0.4em; } .form-success p { color: var(--ink-2); max-width: 42ch; margin-inline: auto; } .form-success-tel { margin-top: 1.4rem; } .form-success-tel .fine { margin-top: 0.6rem; } .form-demo-note { margin: 1.4rem auto 0; padding-top: 1.1rem; border-top: 1px dashed var(--line-2); font-size: 0.76rem; color: var(--muted); max-width: 46ch; } /* ---------- footer ---------- */ .site-footer { background: var(--pine-900); color: var(--on-dark-soft); padding: clamp(2.8rem, 6vw, 4.4rem) 0 1.6rem; font-size: 0.95rem; } /* the footer is a dark surface, so links must not fall through to the global pine-700 (1.42:1 on pine-900) */ .site-footer p a { color: var(--paw); text-decoration: underline; text-underline-offset: 3px; } .site-footer p a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: clamp(1.6rem, 3.5vw, 3rem); padding-bottom: clamp(1.8rem, 3.5vw, 2.6rem); border-bottom: 1px solid var(--line-dark); } .footer-brand .brand { color: #fff; } .footer-brand .brand-paw { color: var(--paw); } .footer-brand .brand-4 { color: var(--paw); } .footer-brand .brand-tag { color: var(--on-dark-soft); } .footer-mission { margin: 1rem 0 1.2rem; font-size: 0.92rem; line-height: 1.65; color: var(--on-dark-soft); max-width: 40ch; } .footer-tel { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-family: var(--font-display); font-size: 1.24rem; font-weight: 600; color: #fff; } .footer-tel:hover { color: var(--paw); } .footer-tel svg { width: 18px; height: 18px; } .footer-tagline { margin: 0.3rem 0 0; font-family: var(--font-display); font-style: italic; color: var(--paw); } .footer-col h3 { font-family: var(--font-body); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paw); margin-bottom: 0.9em; } .footer-nav { display: grid; gap: 0.1rem; } .footer-nav a { display: inline-flex; align-items: center; min-height: 34px; color: var(--on-dark-soft); font-size: 0.92rem; } .footer-nav a:hover { color: #fff; } .footer-areas { padding: 1.4rem 0; border-bottom: 1px solid var(--line-dark); } .footer-areas h3 { font-family: var(--font-body); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paw); margin-bottom: 0.7em; } .footer-areas p { margin: 0; font-size: 0.86rem; line-height: 1.75; color: var(--on-dark-soft); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; } .footer-legal { margin: 0; font-size: 0.8rem; color: rgba(244, 239, 228, 0.78); } .footer-social { display: flex; gap: 0.5rem; } .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: 50%; color: var(--on-dark-soft); transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); } .footer-social a:hover { background: var(--paw); color: var(--pine-900); border-color: var(--paw); } .footer-social svg { width: 18px; height: 18px; } .footer-demo { margin: 1rem 0 0; font-size: 0.78rem; color: rgba(244, 239, 228, 0.82); } /* ---------- mask fallback ---------- */ /* If mask-image is unsupported the paw pseudo-elements would render as solid blocks, so degrade them to a small round dot instead. */ @supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) { .eyebrow::before, .task-list li::before, .task-tiles li::before, .task-defs li::before, .steps li::before, .icon-glyph-paw::before { width: 0.5em; height: 0.5em; border-radius: 50%; margin-top: 0.55em; } .steps li::before { width: 10px; height: 10px; margin-top: 0.6rem; } .hero-paw, .paw-mark { display: none; } } /* ============================================================ MOTION Visible by default. .anim is added by the inline head script when motion is allowed; .reveal-ready is added by app.js and is the only thing that hides a pending .rv. app.js also strips both after 4s as a failsafe, so content can never be stranded invisible. ============================================================ */ /* hero entrance choreography: opt-in through .anim, self-completing */ .hi { opacity: 1; } .anim .hi { opacity: 0; animation: hiIn 0.9s var(--ease-out) var(--d, 0s) both; } .hi-right { --hi-from: translateX(26px); } .hi-left { --hi-from: translateX(-26px); } .hi-scale { --hi-from: scale(0.965); } .hi-fade { --hi-from: none; } @keyframes hiIn { from { opacity: 0; transform: var(--hi-from, translateY(20px)); } to { opacity: 1; transform: none; } } /* scroll reveals */ .rv { opacity: 1; } .anim.reveal-ready .rv:not(.rv-in) { opacity: 0; } .rv-up { --rv-from: translateY(26px); } .rv-scale { --rv-from: scale(0.965); } .rv-left { --rv-from: translateX(-24px); } .rv-right { --rv-from: translateX(24px); } .rv-fade { --rv-from: none; } /* animation only, never a transition, so hover transforms stay free */ .anim .rv.rv-in { animation: rvIn 0.8s var(--ease-out) var(--rvd, 0s) backwards; } @keyframes rvIn { from { opacity: 0; transform: var(--rv-from, translateY(26px)); } } /* auto-stagger children of a grid without per-item attributes. The wrapper itself does not fade; only its children animate. */ .anim .rv.rv-stagger.rv-in { animation: none; opacity: 1; } .anim .rv-stagger.rv-in > *:nth-child(1) { animation: rvIn 0.8s var(--ease-out) 0.02s backwards; } .anim .rv-stagger.rv-in > *:nth-child(2) { animation: rvIn 0.8s var(--ease-out) 0.09s backwards; } .anim .rv-stagger.rv-in > *:nth-child(3) { animation: rvIn 0.8s var(--ease-out) 0.16s backwards; } .anim .rv-stagger.rv-in > *:nth-child(4) { animation: rvIn 0.8s var(--ease-out) 0.23s backwards; } .anim .rv-stagger.rv-in > *:nth-child(5) { animation: rvIn 0.8s var(--ease-out) 0.3s backwards; } .anim .rv-stagger.rv-in > *:nth-child(6) { animation: rvIn 0.8s var(--ease-out) 0.37s backwards; } .anim .rv-stagger.rv-in > *:nth-child(n+7) { animation: rvIn 0.8s var(--ease-out) 0.44s backwards; } /* ---------- responsive ---------- */ /* The horizontal nav's min-content width runs past the page gutter well before the drawer used to take over, so it is tightened from 1240 down and the drawer now starts at 1120 (app.js watches min-width: 1121px to match). */ @media (max-width: 1240px) { .nav { gap: 0.2rem; } .nav > a { font-size: 0.88rem; } .nav .btn-sm { padding-inline: 0.95rem; } } @media (max-width: 1080px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* mobile drawer: the nav becomes an escapable panel, no focus trap */ @media (max-width: 1120px) { .nav-toggle { display: inline-flex; } .nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 99; width: min(360px, 88vw); flex-direction: column; align-items: stretch; gap: 0; padding: 1.1rem 1.3rem 2rem; background: var(--bone); border-left: 1px solid var(--line); box-shadow: -18px 0 44px rgba(18, 41, 31, 0.18); overflow-y: auto; overscroll-behavior: contain; transform: translateX(102%); visibility: hidden; transition: transform 0.34s var(--ease), visibility 0.34s var(--ease); } .nav.open { transform: translateX(0); visibility: visible; } .nav > a:not(.btn) { min-height: 54px; padding: 0.55rem 0.25rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); } .nav > a:not(.btn)::after { display: none; } .nav > a.is-here, .nav > a.is-current { color: var(--pine-700); border-left: 3px solid var(--amber); padding-left: 0.7rem; } .nav-cta { margin-top: 1.1rem; border-bottom: 0 !important; justify-content: center; } .nav > a.nav-tel { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; margin-top: 0.6rem; font-family: var(--font-display); font-size: 1.16rem; font-weight: 600; color: var(--pine-800); border-bottom: 0 !important; } .nav-close { display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; width: 46px; height: 46px; margin-bottom: 0.6rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: transparent; color: var(--pine-700); cursor: pointer; } .nav-close svg { width: 22px; height: 22px; } .hero-grid { grid-template-columns: 1fr; } .hero-art { order: -1; max-width: 560px; } .hero-photo-sm { display: none; } .split, .program, .page-hero-grid { grid-template-columns: 1fr; } .split-flip > :first-child, .program-flip .program-media { order: 0; } .program-media { max-width: 560px; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .subnav { top: 0; } } /* the credential chips go full width rather than three centred, ragged cards */ @media (max-width: 700px) { .proof-list { grid-template-columns: minmax(0, 1fr); width: 100%; } .proof-item { width: 100%; } } @media (max-width: 860px) { .card-grid-3, .photo-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .task-list-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .deflist-cols { grid-template-columns: 1fr; } .media-list-2 { grid-template-columns: 1fr; } .photo-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } .photo-mosaic > :first-child { grid-column: span 2; grid-row: auto; } .photo-mosaic > :first-child img { aspect-ratio: 4 / 3; } } @media (max-width: 640px) { body { font-size: 1.02rem; } .topbar-where { display: none; } .topbar-in { justify-content: flex-end; } .card-grid-2, .card-grid-3, .card-grid-4, .photo-grid-3, .photo-grid-4, .task-list-2, .task-list-3 { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .photo-duo > :last-child { margin-top: 0; } .footer-grid { grid-template-columns: 1fr; } .brand-tag { display: none; } .media-thumb { width: 84px; } .proof-in { flex-direction: column; } } /* A thumb | text | icon row leaves a phone about 210px for the headline, which breaks real story titles into four or five two-word lines. Below 480 the thumbnail sits above the text and the external mark moves to the corner. */ @media (max-width: 480px) { .media-link { display: block; position: relative; padding-right: 2.4rem; } .media-thumb { width: 140px; margin-bottom: 0.65rem; } .media-ext { position: absolute; top: 0.9rem; right: 1rem; } } @media (max-width: 420px) { .brand-name { font-size: 1.18rem; } .brand-paw { width: 32px; height: 32px; } .btn { padding-inline: 1.3rem; } .hero-ctas .btn, .page-hero-ctas .btn, .cta-band-actions .btn { width: 100%; } .photo-grid-2 { grid-template-columns: 1fr; } } /* ---------- print ---------- */ @media print { /* nothing may be hidden by the motion system on paper */ .rv, .rv-in, .hi, .anim .hi, .anim.reveal-ready .rv:not(.rv-in) { opacity: 1 !important; transform: none !important; animation: none !important; visibility: visible !important; } /* FAQ answers must print even when collapsed on screen */ .faq-a[hidden] { display: block !important; } .faq-ico, .nav, .nav-toggle, .nav-backdrop, .subnav, .topbar, .skip-link, .footer-social { display: none !important; } html { scroll-behavior: auto; } body { background: #fff; color: #000; font-size: 11pt; } .site-header { position: static; box-shadow: none; border-bottom: 1px solid #999; } .site-footer, .bg-pine, .bg-pine-deep, .cta-band, .tagline-band, .photo-band { background: #fff !important; color: #000 !important; } .site-footer a, .cta-band a, .tagline-band a { color: #000 !important; } .on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark p, .tagline, .cta-band h2, .cta-band p { color: #000 !important; } .photo-band > img, .paw-mark, .hero-paw { display: none !important; } .card, .icon-card, .faq-item, .form-card, .task-tiles li, .steps li { box-shadow: none !important; border-color: #ccc !important; break-inside: avoid; } .section, .section-lg { padding: 1.2rem 0 !important; } a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: 9pt; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } /* belt and braces: .anim is never added under reduced motion, but if it were, nothing may end up hidden or displaced */ .hi, .anim .hi, .rv, .rv-in, .anim.reveal-ready .rv:not(.rv-in) { opacity: 1 !important; transform: none !important; animation: none !important; } .card:hover, .icon-card:hover, .link-card:hover, .media-link:hover, .photo-grid figure:hover, .photo-grid .photo:hover, .proof-item:hover, .program-chip:hover, .btn:hover { transform: none !important; } .card:hover .card-media img, .photo-grid figure:hover img, .photo-grid .photo:hover img { transform: none !important; } .brand:hover .brand-paw { transform: none !important; } .nav { transition: none !important; } .photo-rail { scroll-snap-type: none; } } /* ============================================================ HOME PAGE (/index.html) Two rhythm utilities and one intro block, because the home page stacks several sub-blocks inside a single section (task tiles under the programme grid, the resources grid under the press list). Same tokens and the same clamp scale as .section and .sec-head. ============================================================ */ /* a second block inside a section that already carries a .sec-head */ .home-block { margin-top: clamp(2.4rem, 5vw, 3.6rem); } /* a small follow-on element: a cta row, a note, copy after a pull quote */ .home-after { margin-top: clamp(1.3rem, 2.6vw, 2.1rem); } /* the copy column beside the contact form: one even rhythm, no double gaps */ .home-contact-intro > * + * { margin-top: 1.2rem; } .home-contact-intro .eyebrow, .home-contact-intro h2, .home-contact-intro p { margin-bottom: 0; } /* .sec-sub keeps its cream-ground muted ink inside .on-dark, which fails contrast on pine. General fix, first needed by the home photo band. */ .on-dark .sec-sub { color: var(--on-dark-soft); } /* ============================================================ /fundraising/ - Service Dog Fundraising guide The only page where a single .steps item carries several paragraphs of their own copy (and, in the online-campaign step, a .chips run of the crowdfunding sites they name). Base `.steps p { margin: 0 }` collapses those together, so restore the rhythm at the same 0.85rem scale the stacks use. No new colours, no new components. ============================================================ */ .steps p + p, .steps p + .chips, .steps .chips + p { margin-top: 0.85rem; }