/* ========================================================================== About page FAQ — "The Ledger" (page-about-texas-united.php) An editorial numbered index: a centred heading, then twelve hairline-ruled rows across the full container, each led by an Inter numeral in a fixed tabular column (the same Inter-for-numerals rule the .reason cards use). The open row's numeral is lit gold; closed rows step back to muted navy. Opening a row drops the answer in behind a thin gold rule. Only theme colours: navy, gold, body grey, and translucent tints of them. Fonts: Raleway (text) and Inter (numerals) — the faces main.css loads. State model - html.about-faq-js stamped synchronously by about-faq.js in , so collapsed rows render collapsed on the first paint. Without it (no JS) the rows are plain headings and every answer is simply readable; the toggle buttons only exist once the script has built them. - li.is-open the open rows (row 1 ships open in the markup). - .about-faq--ready added two frames after init; transitions exist only under it, so nothing animates during setup. Loaded only on this page — see txccc_about_faq_assets() in functions.php. ========================================================================== */ .about-faq { --faq-navy: #040f25; --faq-gold: #bd8b3d; --faq-gold-dark: #b1823a; --faq-text: #373737; --faq-hairline: rgba(4, 15, 37, 0.14); /* navy at 14%: reads as a pencil line */ --faq-num-idle: rgba(4, 15, 37, 0.55); /* closed-row numeral: navy stepped back; 4.25:1 on white, fine for 22px/800 (large text, 3:1) */ --faq-num-col: 3.25rem; /* fixed numeral column; answers indent to it */ --faq-ring-bleed: 0.5rem; /* how far the focus ring sits outside the text edge */ --faq-ease: cubic-bezier(0.4, 0, 0.2, 1); --faq-duration: 320ms; position: relative; isolation: isolate; /* the fade's negative z-index stays inside this section */ padding-top: 4rem; padding-bottom: 5em; /* same breathing room as .about before the footer band */ color: var(--faq-text); } /* The theme's gold bottom fade, exactly as .about draws it. The section is its own stacking context (isolation) and has no background, so z-index:-1 puts the wash behind every in-flow child: rows over it stay readable and clickable, and the gradient hands off into the footer's navy band. */ .about-faq::after { content: ""; pointer-events: none; position: absolute; bottom: 0; left: 0; width: 100%; height: 415px; background: linear-gradient(180deg, rgba(177, 130, 58, 0) 0%, rgba(177, 130, 58, 0.15) 100%); z-index: -1; } /* --- Heading above, index across the full container ---------------------- The heading is centred over the rows, the way "Why We Exist" is centred over its four cards; the questions then have the whole container, which is what a ledger wants. The eyebrow is the theme's own .subheading and the title is the theme's h2.h1 (44/48 Raleway 800 navy), so neither can drift from the section above. Only layout is added here. --------------------- */ .about-faq__intro { margin: 0 0 2.75rem; text-align: center; } .about-faq__eyebrow { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 1rem; } .about-faq .about-faq__title { /* beats h2.h1 (0,1,1) for margin only */ margin: 0 0 1.5rem; /* the .about section's mb-4 */ text-wrap: balance; } /* short-gold-rect.svg is 79x4; pin it so it never scales up. */ .about-faq__rule { display: block; width: 79px; height: 4px; margin: 0 auto; } /* --- The index ----------------------------------------------------------- */ .about-faq__list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--faq-navy); /* a heavier head rule, then hairlines */ } .about-faq__item { margin: 0; padding: 0; border-bottom: 1px solid var(--faq-hairline); } /* The heading carries the type. Without JS it is the whole row: numeral | question, on the same grid the button uses. Once the script has moved its contents into a button, the heading steps back to a plain block and the button takes the grid over, so nothing moves between the two states. */ .about-faq__q { display: grid; grid-template-columns: var(--faq-num-col) minmax(0, 1fr); column-gap: 1rem; align-items: baseline; margin: 0; padding: 1.2rem 0; color: var(--faq-navy); font-family: "Raleway", sans-serif; font-weight: 700; font-size: 18px; line-height: 26px; } .about-faq-js .about-faq__q { display: block; padding: 0; } /* Each question is one full-width button: numeral | question | glyph. Every Bootstrap reboot value that matters is reset explicitly here. The button bleeds --faq-ring-bleed past the text edge on both sides so the inset focus ring clears the numeral and the row still aligns with the head rule. */ .about-faq__trigger { display: grid; grid-template-columns: var(--faq-num-col) minmax(0, 1fr) 1.5rem; column-gap: 1rem; align-items: baseline; width: calc(100% + 2 * var(--faq-ring-bleed)); min-height: 44px; margin: 0 calc(-1 * var(--faq-ring-bleed)); padding: 1.2rem var(--faq-ring-bleed); background: transparent; border: 0; border-radius: 0; text-align: left; text-transform: none; color: inherit; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; } /* Hover keeps the question navy (the gold-dark tint is 3.4:1 on white, under AA for 18px text) and marks the row with a gold rule under the words. */ .about-faq__trigger:hover .about-faq__label { text-decoration: underline; text-decoration-color: var(--faq-gold); text-decoration-thickness: 2px; text-underline-offset: 0.3em; } /* Focus ring: 2px navy (about 17:1 on white), drawn 2px INSIDE the button. The button's top and bottom edges sit on the row's hairlines, so an inset ring never crosses them; horizontally the bleed keeps it clear of the numeral. Never removed — Bootstrap only hides it for mouse focus. */ .about-faq__trigger:focus-visible { outline: 2px solid var(--faq-navy); outline-offset: -2px; } /* Browsers without :focus-visible get the same ring on any focus. */ @supports not selector(:focus-visible) { .about-faq__trigger:focus { outline: 2px solid var(--faq-navy); outline-offset: -2px; } } /* Numeral: Inter, tabular so 01–12 share one width. Gold by default (the .reason convention, and what no-JS readers see on every open row); with JS the closed rows step back to muted navy and the open row lights gold. */ .about-faq__num { font-family: "Inter", sans-serif; font-weight: 800; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--faq-gold); } .about-faq-js .about-faq__item:not(.is-open) .about-faq__num { color: var(--faq-num-idle); } .about-faq__trigger:hover .about-faq__num { color: var(--faq-gold); } .about-faq__label { min-width: 0; } /* Plus/minus drawn from two gold bars; the vertical bar folds into the horizontal one when the row opens. No icon font, no SVG. Only exists once the script has built the button. Locked to the first line of the question (26px line, 14px glyph) so a wrapped question keeps numeral, first line and glyph on one visual line. */ .about-faq__icon { position: relative; display: block; width: 14px; height: 14px; align-self: start; justify-self: end; margin-top: 6px; } .about-faq__icon::before, .about-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: var(--faq-gold); transform: translate(-50%, -50%); } .about-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); } .about-faq__item.is-open .about-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); } /* --- Answer panel --------------------------------------------------------- Height is animated with the grid-template-rows 0fr -> 1fr technique: the browser interpolates the track, so there is no max-height guess, no JS measuring, and no layout thrash from scrollHeight reads. The inner wrapper needs min-height:0 + overflow:hidden so the track can shrink to zero. Open is the default; the collapse only exists under html.about-faq-js. */ .about-faq__panel { display: grid; grid-template-rows: 1fr; } .about-faq__panel-inner { min-height: 0; overflow: hidden; visibility: visible; } .about-faq-js .about-faq__item:not(.is-open) .about-faq__panel { grid-template-rows: 0fr; } /* Out of the tab order and accessibility tree once collapsed. */ .about-faq-js .about-faq__item:not(.is-open) .about-faq__panel-inner { visibility: hidden; } /* Capped measure. The row is as wide as the container now, and a 1200px line of 17px text is about 140 characters — unreadable. The answer keeps its indent to the numeral column and stops at a comfortable measure. */ .about-faq__answer { max-width: 74ch; margin: 0 0 1.6rem var(--faq-num-col); /* indent to the numeral column */ padding: 0.15rem 0 0.15rem 1.25rem; border-left: 2px solid var(--faq-gold); font-family: "Raleway", sans-serif; font-weight: 400; font-size: 17px; line-height: 32px; /* .p-internal, the page's own body measure */ color: var(--faq-text); } /* --- Motion --------------------------------------------------------------- Transitions exist only once the script has added .about-faq--ready (two animation frames after the initial state is painted). Before that, and without JS, every state change is instant. The visibility swap on a closing panel waits for the track to finish; on an opening panel the destination state's 0s delay applies, so text is visible immediately. */ .about-faq--ready .about-faq__num { transition: color 160ms var(--faq-ease); } .about-faq--ready .about-faq__icon::before, .about-faq--ready .about-faq__icon::after { transition: transform var(--faq-duration) var(--faq-ease); } .about-faq--ready .about-faq__panel { transition: grid-template-rows var(--faq-duration) var(--faq-ease); } .about-faq--ready .about-faq__panel-inner { transition: visibility 0s linear 0s; } .about-faq--ready .about-faq__item:not(.is-open) .about-faq__panel-inner { transition-delay: var(--faq-duration); } @media (prefers-reduced-motion: reduce) { .about-faq--ready .about-faq__num, .about-faq--ready .about-faq__icon::before, .about-faq--ready .about-faq__icon::after, .about-faq--ready .about-faq__panel, .about-faq--ready .about-faq__panel-inner { transition: none; } /* The delay rule above is more specific than the reset, so clear it too: a collapsed panel must leave the accessibility tree at once. */ .about-faq--ready .about-faq__item:not(.is-open) .about-faq__panel-inner { transition-delay: 0s; } } /* --- Small screens --------------------------------------------------------- */ @media (max-width: 767.98px) { .about-faq { --faq-num-col: 2.5rem; --faq-ring-bleed: 0.375rem; /* stays inside .container's 12px gutter */ padding-top: 3rem; } .about-faq__q { column-gap: 0.75rem; padding-top: 1rem; padding-bottom: 1rem; font-size: 17px; line-height: 25px; } .about-faq-js .about-faq__q { padding: 0; } .about-faq__trigger { column-gap: 0.75rem; padding-top: 1rem; padding-bottom: 1rem; } .about-faq__num { font-size: 20px; } /* Below 768px the answer drops the indent so the measure stays generous at 375px; the gold rule still marks it as the answer. */ .about-faq__answer { margin-left: 0; padding-left: 1rem; font-size: 16px; line-height: 27px; } /* The theme keeps h2.h1 at 44/48 at every width; 36/40 stops "Frequently Asked Questions" wrapping to three lines on a phone. */ .about-faq .about-faq__title { font-size: 36px; line-height: 40px; } .about-faq__intro { margin-bottom: 2rem; } } /* --- Print ------------------------------------------------------------------ Every answer open, numerals gold, no toggles, no wash, nothing sticky. */ @media print { .about-faq-js .about-faq__item:not(.is-open) .about-faq__panel { grid-template-rows: 1fr; } .about-faq-js .about-faq__item:not(.is-open) .about-faq__panel-inner { visibility: visible; } .about-faq-js .about-faq__item:not(.is-open) .about-faq__num { color: var(--faq-gold); } .about-faq__icon, .about-faq::after { display: none; } .about-faq__intro { position: static; } .about-faq__item { break-inside: avoid; } }