/* * Help-centre reading surface — the .faq-* taxonomy. * * A public docs-site surface (sibling of .blog-* / .kb-*). Consumes the brand * design tokens from content/design-tokens.css; loaded on /faq/ pages via the * headStaticFiles block in content/base.html. No new CDN dependency — the * accordion is native

; the mobile rail toggle is Alpine (already * loaded site-wide). */ /* Reserve the scrollbar gutter so opening/closing answers (which changes page height) never shifts the layout horizontally. Scoped to help-centre pages because this stylesheet only loads there. */ html { scrollbar-gutter: stable; } /* ---- Hero search (inside the circle masthead) ---- */ .faq-hero-search { margin-top: 1.5rem; width: 100%; display: flex; justify-content: center; } .faq-search { display: flex; align-items: stretch; width: 100%; max-width: 34rem; background: #fff; border-radius: 999px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); overflow: hidden; } .faq-search__input { flex: 1 1 auto; border: 0; background: transparent; padding: 0.85rem 1.25rem; font-family: var(--font-body); font-size: 1rem; color: var(--brand-ink-900); } .faq-search__input:focus { outline: none; } .faq-search__btn { flex: 0 0 auto; border: 0; background: var(--color-primary); color: #fff; padding: 0 1.35rem; cursor: pointer; font-size: 1rem; } .faq-search__btn:hover { background: var(--brand-green-500); } /* ---- Landing: sections + category cards ---- */ .faq-shell { /* width:100% is required because is a flex column: a flex item with `margin:0 auto` on the cross axis shrinks to its content instead of filling, which cramped the layout. width:100% makes it fill up to max-width, then the auto margins centre it. */ width: 100%; max-width: var(--container-wide, 1240px); margin: 0 auto; padding: 3rem 1.25rem 1rem; } .faq-section { margin-bottom: 3rem; } .faq-section__title { font-family: var(--font-display); font-size: 1.6rem; color: var(--brand-ink-900); margin-bottom: 1.25rem; } /* Category cards render inside the shared .svc-carousel shell (one per section) so a section never orphans a single card on a line. Stretch each card to fill its slide so a row shares one bottom edge (mirrors the .svc-carousel__slide > .bpr-feature rule). */ .faq-cat-carousel .svc-carousel__slide > .faq-cat-card { height: 100%; } .faq-cat-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem; background: var(--card-surface, #fff); border: 1px solid var(--brand-paper-200); border-radius: var(--radius-lg, 14px); text-decoration: none; color: var(--brand-ink-900); transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } .faq-cat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31, 82, 54, 0.10); border-color: var(--color-primary); text-decoration: none; color: var(--brand-ink-900); } .faq-cat-card__icon { font-size: 1.9rem; line-height: 1; /* keep emoji glyphs on their colour font, unaffected by the ink text colour */ } .faq-cat-card__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; } .faq-cat-card__blurb { font-size: 0.92rem; color: var(--brand-ink-700, #4a4a44); } .faq-cat-card__count { margin-top: 0.35rem; font-size: 0.8rem; color: var(--color-primary); font-weight: 600; } /* ---- Search results ---- */ .faq-results { max-width: 48rem; } .faq-results__status { color: var(--brand-ink-700, #4a4a44); margin-bottom: 1rem; } .faq-results__list { list-style: none; padding: 0; margin: 0; } .faq-result { padding: 1rem 0; border-bottom: 1px solid var(--brand-paper-200); } .faq-result__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; text-decoration: none; } .faq-result__q { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--color-primary); } .faq-result__cat { font-size: 0.78rem; color: var(--brand-ink-700, #4a4a44); background: var(--brand-paper-100, #f4f2ec); border-radius: 999px; padding: 0.15rem 0.6rem; } .faq-result__excerpt { margin: 0.35rem 0 0; color: var(--brand-ink-900); } /* ---- Docs layout (category + article pages) ---- */ .faq-docs { width: 100%; /* see .faq-shell note — fill the flex-column cross axis */ max-width: var(--container-wide, 1240px); margin: 0 auto; padding: 2rem 1.25rem 3rem; display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; align-items: start; } .faq-docs__toggle { display: none; } .faq-sidebar { position: sticky; top: calc(var(--nav-height, 72px) + 1rem); } .faq-sidebar__group { margin-bottom: 1.5rem; } .faq-sidebar__section { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-ink-700, #4a4a44); margin-bottom: 0.5rem; } .faq-sidebar__list { list-style: none; padding: 0; margin: 0; } .faq-sidebar__link { display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.6rem; border-radius: 8px; text-decoration: none; color: var(--brand-ink-900); font-size: 0.95rem; } .faq-sidebar__icon { font-size: 1rem; line-height: 1; flex: 0 0 auto; } .faq-sidebar__label { min-width: 0; } .faq-sidebar__link:hover { background: var(--brand-paper-100, #f4f2ec); text-decoration: none; } .faq-sidebar__link.is-active { background: var(--color-primary); color: #fff; font-weight: 600; } .faq-docs__main { min-width: 0; } .faq-crumbs { font-size: 0.85rem; color: var(--brand-ink-700, #4a4a44); margin-bottom: 0.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .faq-crumbs a { color: var(--color-primary); } .faq-docs__title { font-family: var(--font-display); font-size: 2rem; margin-bottom: 0.5rem; } .faq-docs__blurb { color: var(--brand-ink-700, #4a4a44); margin-bottom: 1.75rem; max-width: 44rem; } /* ---- Accordion (category page) ---- */ .faq-accordion { border-top: 1px solid var(--brand-paper-200); max-width: 48rem; } .faq-accordion__item { border-bottom: 1px solid var(--brand-paper-200); } .faq-accordion__q { cursor: pointer; list-style: none; padding: 1rem 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--brand-ink-900); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .faq-accordion__q::-webkit-details-marker { display: none; } .faq-accordion__q::after { content: "\f078"; /* fa chevron-down */ font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 0.8rem; color: var(--color-primary); transition: transform 0.15s ease; margin-left: auto; } .faq-accordion__item[open] .faq-accordion__q::after { transform: rotate(180deg); } .faq-accordion__permalink { color: var(--brand-paper-200); font-size: 0.8rem; opacity: 0; transition: opacity 0.12s ease, color 0.12s ease; } .faq-accordion__q:hover .faq-accordion__permalink { opacity: 1; color: var(--color-primary); } .faq-accordion__a { padding: 0 0 1.25rem; } /* ---- Prose (shared by accordion answer + article body) ---- */ .faq-prose { color: var(--brand-ink-900); line-height: 1.7; max-width: 44rem; } .faq-prose p { margin-bottom: var(--prose-gap, 1rem); } .faq-prose p:last-child { margin-bottom: 0; } .faq-prose ul, .faq-prose ol { margin: 0 0 var(--prose-gap, 1rem) 1.25rem; } .faq-prose li { margin-bottom: 0.35rem; } .faq-prose a { color: var(--color-primary); text-decoration: underline; } .faq-prose h2, .faq-prose h3 { font-family: var(--font-display); margin: 1.5rem 0 0.5rem; } /* ---- Article page ---- */ .faq-article__q { font-family: var(--font-display); font-size: 2rem; margin-bottom: 1rem; } .faq-related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--brand-paper-200); } .faq-related__title { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 0.75rem; } .faq-related__list { list-style: none; padding: 0; margin: 0; } .faq-related__list li { margin-bottom: 0.5rem; } .faq-related__list a { color: var(--color-primary); } /* ---- Contact band ---- */ .faq-contact-band { width: 100%; /* see .faq-shell note */ max-width: var(--container-wide, 1240px); margin: 2.5rem auto 0; padding: 1.5rem 1.25rem; text-align: center; color: var(--brand-ink-700, #4a4a44); } .faq-contact-band a { color: var(--color-primary); font-weight: 600; } .faq-empty { color: var(--brand-ink-700, #4a4a44); padding: 2rem 0; } /* ---- Responsive ---- */ @media (max-width: 900px) { .faq-docs { grid-template-columns: 1fr; gap: 1rem; } .faq-docs__toggle { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--brand-paper-100, #f4f2ec); border: 1px solid var(--brand-paper-200); border-radius: 8px; padding: 0.5rem 0.9rem; font-family: var(--font-body); cursor: pointer; color: var(--brand-ink-900); } .faq-docs__rail-inner { display: none; padding-top: 1rem; } .faq-docs__rail-inner.is-open { display: block; } .faq-sidebar { position: static; } }