/** * FAQs — the /faqs/ post type archive (and faqs-category terms, which normally 301 to it) * * Loaded only on that archive, from add-ons/faqs/faqs.php. Standalone on purpose: * style.css is hand-maintained and is NOT compiled from style.scss, so nothing here goes * near Sass. * * Everything is scoped under .cdc-faq (the wrapper in content-archive-faqs.php) rather * than a body class, so it cannot leak and does not care which template routed here. * * PALETTE is deliberately the same ramp as css/checkout.css. Not for tidiness — FAQ and * checkout are the same funnel step. This page is the last doubt before the deposit and * checkout is the deposit, so a visitor bouncing /finish-adoption/ -> /faqs/ -> back * never feels they left the transaction. What is NOT shared is elevation: checkout uses * a shadow because a step card is a task container, but an FAQ list is a document, and * documents are ruled, not floated. Hairlines only below. The page's single shadow is * spent on the three answer cards. * * TYPE is Poppins only. Abril Fatface (.display-1 … .display-6) is the theme's hero voice * and is deliberately absent — this page reads as a document. .cdc-faq__title exists so * no .display-* selector can reach the h1. Please do not "fix" this. * * BRAND: no literal green anywhere; everything derives from var(--bs-primary). * Note rgba(var(--bs-primary-rgb), a) is NOT used. style.css:41 hardcodes * --bs-primary-rgb as a separate token, so a child theme that overrides only * --bs-primary would leave every alpha tint the parent's green while solid fills turned * its own colour — a failure invisible in review that only shows up on the child site. * Tints are white/black veils over the accent instead, which follow it exactly. * * Verified by overriding --bs-primary in devtools: the eyebrow tint and dot, the accent * headline, the phone icon, the answer-card underlines, the rail indicator, the open * question and its +/- glyph, and the closing band all follow. Note for whoever sets up * a sibling brand: style.css declares --bs-primary on ":root, [data-bs-theme=light]" and * header.php puts data-bs-theme="light" on , so body re-declares it closer to the * content than :root. A child theme override must therefore target body or * [data-bs-theme=light] — a plain :root rule is shadowed and silently does nothing. * * Markup: template-parts/content-archive-faqs.php * .cdc-faq > .cdc-faq__hero ( .cdc-answers > .cdc-answer ) * > .cdc-faq__body ( .cdc-rail + .cdc-faq__list-col > .cdc-cat > .cdc-qa ) * > .cdc-faq__cta */ .cdc-faq { /* Paper and ink — the css/checkout.css ramp */ --cdc-faq-paper: #f6f5f2; --cdc-faq-card: #fff; --cdc-faq-line: #e6e3dd; --cdc-faq-line-soft: #efece7; --cdc-faq-ink: #2f3b38; /* Diverges from checkout's --cdc-ink-soft (#6d7975), which is 4.15:1 on this paper and under AA. #5f6b67 is 5.04:1. This is reading copy, so it has to pass. */ --cdc-faq-ink-soft: #5f6b67; --cdc-faq-ink-faint: #7d8783; /* Brand, derived */ --cdc-faq-accent: var(--bs-primary, #018c6e); --cdc-faq-radius: 14px; --cdc-faq-radius-sm: 10px; --cdc-faq-radius-lg: 20px; /* The only elevation on the page. */ --cdc-faq-shadow: 0 1px 2px rgba(14, 50, 41, .04), 0 8px 24px rgba(14, 50, 41, .05); /* Clearance for header.sticky-top (style.css:15452, top 0 / z-index 1000). Every sticky offset and scroll-margin on this page reads from this one token; js/faqs.js measures the header and overwrites it at runtime. */ --cdc-faq-header: 92px; /* Extra clearance for the pinned category heading; only non-zero where it sticks. */ --cdc-faq-cat-offset: 0px; background: var(--cdc-faq-paper); color: var(--cdc-faq-ink); } /* This theme sets --bs-gutter-x: 1rem on .container while Bootstrap rows assume 1.5rem, so a stock .row overhangs by 4px each side. Same trap noted in css/checkout.css. */ .cdc-faq .row { --bs-gutter-x: 1rem; } .cdc-faq .section { margin: 0; } @media (max-width: 991.98px) { .cdc-faq { --cdc-faq-header: 72px; --cdc-faq-cat-offset: 4.5rem; --cdc-faq-radius-lg: 16px; } } /* ========================================================================== 1. Hero ========================================================================== */ .cdc-faq__hero { padding: 3.25rem 0 3rem; } .cdc-faq__eyebrow { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .45rem 1rem; border-radius: 50rem; /* Ink, not accent: var(--bs-primary) on a light tint is 4.22:1 and fails AA here. */ color: var(--cdc-faq-ink); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } /* Brand tint with no --bs-primary-rgb dependency. */ .cdc-faq__eyebrow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--cdc-faq-accent); opacity: .12; } .cdc-faq__eyebrow::after { content: ""; order: -1; width: .45rem; height: .45rem; border-radius: 50%; background: var(--cdc-faq-accent); } .cdc-faq__title { margin: 1.1rem 0 0; /* Explicit: never let a .display-* rule pull Abril Fatface in here. */ font-family: var(--bs-body-font-family); font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.25rem); font-weight: 700; /* 1.08, not 1.05 — Poppins has generous ascenders and they collide across two lines. */ line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; color: var(--cdc-faq-ink); } .cdc-faq__title-lead, .cdc-faq__title-accent { display: block; } .cdc-faq__title-accent { color: var(--cdc-faq-accent); } .cdc-faq__lede { margin: 1.15rem 0 0; max-width: 46ch; color: var(--cdc-faq-ink-soft); font-size: 1.125rem; line-height: 1.6; } /* --- 1.1 Search ---------------------------------------------------------- */ .cdc-faq__search { position: relative; display: flex; align-items: center; max-width: 30rem; margin-top: 1.75rem; } .cdc-faq__search-icon { position: absolute; left: 1.15rem; width: .95rem; height: .95rem; color: var(--cdc-faq-ink-faint); pointer-events: none; } .cdc-faq__search-input { width: 100%; min-height: 3rem; padding: .75rem 1.15rem .75rem 2.9rem; border: 1px solid var(--cdc-faq-line); border-radius: 50rem; background: var(--cdc-faq-card); color: var(--cdc-faq-ink); font-family: inherit; font-size: 1rem; /* iOS zooms the page when a focused field is under 16px. */ line-height: 1.4; transition: border-color .15s ease; } .cdc-faq__search-input::placeholder { color: var(--cdc-faq-ink-faint); } .cdc-faq__search-input:focus { border-color: var(--cdc-faq-accent); outline: none; } .cdc-faq__search-input:focus-visible { outline: 2px solid var(--cdc-faq-accent); outline-offset: 2px; } .cdc-faq__count { margin: .6rem 0 0; min-height: 1.25rem; color: var(--cdc-faq-ink-soft); font-size: .875rem; } /* --- 1.2 Phone — the only pill-shaped element on the page ----------------- */ .cdc-faq__phone { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; margin-top: 1.25rem; padding: .6rem 1.35rem; border: 1px solid var(--cdc-faq-line); border-radius: 50rem; background: var(--cdc-faq-card); color: var(--cdc-faq-ink); font-size: .9375rem; font-weight: 600; text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .cdc-faq__phone:hover, .cdc-faq__phone:focus { color: var(--cdc-faq-ink); border-color: var(--cdc-faq-accent); transform: translateY(-1px); } .cdc-faq__phone svg { flex: none; color: var(--cdc-faq-accent); } /* --- 1.3 Hero image ------------------------------------------------------ */ .cdc-faq__hero-media { display: flex; } .cdc-faq__media { width: 100%; height: auto; max-height: 26rem; object-fit: cover; border-radius: var(--cdc-faq-radius-lg); } /* ========================================================================== 2. Answer cards The page's signature, and its one loud element: the ANSWER is the headline and the question is a kicker above it. That is what a breeder actually says on the phone — a sentence, then an offer to show the paperwork. ========================================================================== */ .cdc-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.75rem; } .cdc-answer { display: flex; flex-direction: column; padding: 1.4rem 1.4rem 1.15rem; border: 1px solid var(--cdc-faq-line); border-radius: var(--cdc-faq-radius); background: var(--cdc-faq-card); box-shadow: var(--cdc-faq-shadow); } .cdc-answer__q { margin: 0 0 .6rem; color: var(--cdc-faq-ink-faint); font-size: .75rem; font-weight: 600; letter-spacing: .07em; line-height: 1.4; text-transform: uppercase; } .cdc-answer__a { margin: 0; color: var(--cdc-faq-ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.45; text-wrap: pretty; } .cdc-answer__link { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; min-height: 2.75rem; margin-top: auto; padding-top: 1rem; color: var(--cdc-faq-ink); font-size: .9375rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--cdc-faq-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; } .cdc-answer__link:hover, .cdc-answer__link:focus { color: var(--cdc-faq-accent); } .cdc-answer__link::after { content: "\2192"; transition: transform .15s ease; } .cdc-answer__link:hover::after { transform: translateX(3px); } /* ========================================================================== 3. Body shell ========================================================================== */ .cdc-faq__body { padding: 1rem 0 4rem; } @media (min-width: 992px) { .cdc-faq__rail-col { padding-right: 2rem; } .cdc-faq__list-col { padding-left: 1rem; } } /* ========================================================================== 4. Category rail A position indicator, not a menu: no box, no border, no shadow. Six items fit without internal scroll. If categories ever exceed eight, delete the rail rather than making it scroll. ========================================================================== */ .cdc-rail { display: none; } @media (min-width: 992px) { .cdc-rail { display: block; position: sticky; top: calc(var(--cdc-faq-header) + 1.5rem); /* Comfortably below header.sticky-top's z-index: 1000. */ z-index: 1; } } .cdc-rail__label { margin: 0 0 .9rem; padding-left: 1rem; color: var(--cdc-faq-ink-faint); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .cdc-rail__list { margin: 0; padding: 0; list-style: none; } .cdc-rail__link { display: flex; align-items: center; min-height: 2.75rem; padding: .5rem 0 .5rem 1rem; border-left: 2px solid var(--cdc-faq-line); color: var(--cdc-faq-ink-soft); font-size: .9375rem; font-weight: 600; line-height: 1.35; text-decoration: none; transition: color .15s ease, border-color .15s ease; } .cdc-rail__link:hover, .cdc-rail__link:focus { color: var(--cdc-faq-ink); border-left-color: var(--cdc-faq-ink-faint); } /* Set by js/faqs.js. aria-current is the correct semantics for "current item within a set" and is announced, so it doubles as the styling hook — no invented state class. */ .cdc-rail__link[aria-current="true"] { color: var(--cdc-faq-ink); border-left-color: var(--cdc-faq-accent); } /* ========================================================================== 5. Category sections ========================================================================== */ .cdc-cat { /* html { scroll-padding-top } is unreachable from a page-scoped stylesheet, so the header clearance lives on the anchor targets instead. */ scroll-margin-top: calc(var(--cdc-faq-header) + 1rem); } .cdc-cat + .cdc-cat { margin-top: 3rem; } .cdc-cat__head { margin-bottom: 1.25rem; padding: .75rem 0 1rem; /* Opaque: the sticky mode below scrolls content underneath it. */ background: var(--cdc-faq-paper); border-bottom: 1px solid var(--cdc-faq-line); } /* Below 992px the rail is gone and each heading pins inside its own section instead, pushed off by the next one. Same "where am I" feedback, full width, no tap, no JS — and none of the hidden-overflow and small-target problems of a chip row. */ @media (max-width: 991.98px) { .cdc-cat__head { position: sticky; top: var(--cdc-faq-header); z-index: 2; } } .cdc-cat__title { margin: 0; font-family: var(--bs-body-font-family); font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--cdc-faq-ink); } .cdc-cat__intro { margin: .5rem 0 0; max-width: 62ch; color: var(--cdc-faq-ink-soft); font-size: .9375rem; line-height: 1.6; } /* Hidden by js/faqs.js when a search filters every question out of a category. */ .cdc-cat[hidden] { display: none; } /* ========================================================================== 6. Questions Bootstrap Collapse only; the bundle is already loaded site-wide. Ruled, not floated: no shadow, no per-item card, no radius. ========================================================================== */ .cdc-qa { --bs-accordion-bg: transparent; --bs-accordion-border-width: 0; --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; --bs-accordion-btn-bg: transparent; --bs-accordion-active-bg: transparent; --bs-accordion-btn-padding-x: 0; --bs-accordion-btn-padding-y: 1.05rem; --bs-accordion-body-padding-x: 0; --bs-accordion-body-padding-y: 0; --bs-accordion-btn-focus-box-shadow: none; /* style.css:14204-14205 points these at data-URIs that hardcode %23018c6e, so they would stay the parent's green on a child brand. Zeroed here and repainted in 6.1 from currentColor instead. */ --bs-accordion-btn-icon: none; --bs-accordion-btn-active-icon: none; } .cdc-qa__item { border: 0; border-bottom: 1px solid var(--cdc-faq-line-soft); background: transparent; /* Below 992px the category heading is pinned under the site header too, so a question scrolled to header height alone would land behind it. */ scroll-margin-top: calc(var(--cdc-faq-header) + var(--cdc-faq-cat-offset) + 1rem); } .cdc-qa__item:first-child { border-top: 1px solid var(--cdc-faq-line-soft); } .cdc-qa__item[hidden] { display: none; } .cdc-qa__q { margin: 0; } .cdc-qa__btn { display: flex; align-items: flex-start; gap: 1rem; width: 100%; /* 52px, comfortably over the 44px target minimum. */ min-height: 3.25rem; padding: 1.05rem 0; border: 0; border-radius: 0; background: transparent; /* Bootstrap declares both the focus ring and the open-state inset shadow !important. */ box-shadow: none !important; color: var(--cdc-faq-ink); font-family: inherit; font-size: 1.0625rem; font-weight: 600; line-height: 1.45; text-align: left; transition: color .15s ease; } .cdc-qa__btn:hover, .cdc-qa__btn:not(.collapsed) { background: transparent; color: var(--cdc-faq-accent); } /* --- 6.1 The +/- glyph, brand-following --------------------------------- Painted with background-color: currentColor and cut out by a mask, so it inherits the button's colour (including the accent open state) with no fill attribute and no colour literal. The source SVGs carry no fill: the default black is fully opaque, which is what an alpha mask needs. -webkit- prefixes for older Safari. */ .cdc-qa__btn::after { flex: none; width: .9rem; height: .9rem; margin-top: .3rem; margin-left: auto; background-image: none; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; /* Bootstrap rotates the icon; we swap the glyph instead. */ transform: none; transition: background-color .15s ease; } .cdc-qa__btn:not(.collapsed)::after { background-image: none; transform: none; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E"); } /* --- 6.2 Answer body ----------------------------------------------------- */ .cdc-qa__body { max-width: 62ch; padding: 0 2rem 1.4rem 0; color: var(--cdc-faq-ink-soft); font-size: 1rem; /* Reading copy, looser than checkout's UI copy. */ line-height: 1.7; } .cdc-qa__body > *:last-child { margin-bottom: 0; } .cdc-qa__body ul, .cdc-qa__body ol { margin-bottom: .85rem; padding-left: 1.15rem; } .cdc-qa__body li + li { margin-top: .35rem; } /* var(--bs-primary) as small text is 4.22:1 on white and under AA, so links get ink text with an accent underline — passes, and still reads as brand. */ .cdc-qa__body a, .cdc-cat__intro a { color: var(--cdc-faq-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cdc-faq-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } .cdc-qa__body a:hover { text-decoration-thickness: 3px; } /* --- 6.3 Empty search state ---------------------------------------------- */ .cdc-faq__empty { margin: 2rem 0 0; padding: 1.5rem; border: 1px dashed var(--cdc-faq-line); border-radius: var(--cdc-faq-radius); color: var(--cdc-faq-ink-soft); font-size: 1rem; text-align: center; } .cdc-faq__empty[hidden] { display: none; } .cdc-faq__empty a { color: var(--cdc-faq-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--cdc-faq-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; } /* ========================================================================== 7. Focus outline rather than box-shadow: it needs no alpha, so it carries no --bs-primary-rgb dependency, and it stays visible on any background. ========================================================================== */ .cdc-faq a:focus-visible, .cdc-faq button:focus-visible { outline: 2px solid var(--cdc-faq-accent); outline-offset: 3px; border-radius: 2px; } .cdc-faq__cta a:focus-visible, .cdc-faq__cta button:focus-visible { outline-color: var(--bs-warning, #ffc40c); } /* ========================================================================== 8. Closing band ========================================================================== */ .cdc-faq__cta { padding: 3.5rem 0; background: var(--cdc-faq-accent); } .cdc-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); align-items: center; gap: 2.5rem; padding: 2.25rem; border-radius: var(--cdc-faq-radius-lg); /* A plain white veil, so the inner card lifts off the band on any brand colour without another custom property to keep in sync. */ background: rgba(255, 255, 255, .08); } .cdc-cta__title { margin: 0; font-family: var(--bs-body-font-family); font-size: clamp(1.6rem, 1rem + 2vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; color: #fff; text-wrap: balance; } .cdc-cta__copy { margin: .9rem 0 0; max-width: 48ch; color: rgba(255, 255, 255, .82); font-size: 1.0625rem; line-height: 1.6; } .cdc-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } /* Buttons are the house idiom verbatim (btn btn-warning rounded-pill px-4 …); only the target size needs stating. */ .cdc-cta__actions .btn { display: inline-flex; align-items: center; min-height: 3rem; } .cdc-cta__media { width: 100%; /* height:auto is load-bearing — the img's width/height attributes are presentational hints that otherwise beat aspect-ratio and render this 320x480. */ height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--cdc-faq-radius); box-shadow: var(--cdc-faq-shadow); } /* ========================================================================== 9. Responsive ========================================================================== */ @media (max-width: 991.98px) { .cdc-faq__hero { padding: 2.25rem 0 2.5rem; } .cdc-faq__hero-media { order: -1; margin-bottom: 1.75rem; } .cdc-faq__media { max-height: 15rem; } .cdc-faq__lede { max-width: none; } .cdc-answers { grid-template-columns: 1fr; gap: .75rem; margin-top: 2rem; } .cdc-answer { padding: 1.15rem; } .cdc-faq__body { padding-bottom: 2.75rem; } .cdc-cta__inner { grid-template-columns: 1fr; gap: 1.75rem; padding: 1.5rem; } .cdc-cta__media-col { order: -1; } .cdc-cta__media { max-width: 20rem; } } @media (max-width: 767.98px) { .cdc-faq { --cdc-faq-radius: 12px; } .cdc-cat + .cdc-cat { margin-top: 2.25rem; } .cdc-cat__title { font-size: 1.3125rem; } .cdc-qa__btn { padding: 1rem 0; font-size: 1rem; } .cdc-qa__body { padding-right: 0; font-size: .9688rem; } .cdc-faq__search { max-width: none; } .cdc-faq__cta { padding: 2.5rem 0; } .cdc-cta__actions .btn { flex: 1 1 100%; justify-content: center; } } /* ========================================================================== 10. Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .cdc-faq *, .cdc-faq *::before, .cdc-faq *::after { transition: none !important; animation: none !important; } /* Bootstrap Collapse animates height on .collapsing. */ .cdc-qa .accordion-collapse.collapsing { transition: none !important; } .cdc-faq__phone:hover, .cdc-answer__link:hover::after { transform: none; } }