/* ======================================================================================== * accordion.css - details.accordion > summary.accordion__q + .accordion__a (L2 layer). * Ported from .cd-item/.cd-item summary/.cd-item-body (docs/design-source/homepage-template.html, * search ".cd-item"). Native
/ semantics carry the no-JS/reduced-motion * case for free; site.js's initAccordions() only adds the smooth height animation and the * data-single "close the other one" behavior on top. * ======================================================================================== */ .accordion{ border:1px solid var(--cd-line);border-radius:var(--cd-r-sm); background:var(--cd-ground-raised);overflow:hidden; } .accordion__q{ display:flex;align-items:center;justify-content:space-between;gap:var(--cd-4); padding:var(--cd-4) var(--cd-5);min-height:56px;cursor:pointer; font-weight:700;color:var(--cd-ink-strong);list-style:none; } .accordion__q::-webkit-details-marker{display:none} .accordion__q:hover{background:var(--cd-ground-tint)} .accordion__q::after{ content:"";flex:none;width:12px;height:12px; border-right:2px solid var(--cd-teal-500);border-bottom:2px solid var(--cd-teal-500); transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease; } .accordion[open] .accordion__q::after{transform:rotate(225deg) translate(-2px,-2px)} .accordion__a{padding:0 var(--cd-5) var(--cd-5);font-size:var(--cd-small);line-height:1.6;max-width:64ch;overflow:hidden} .accordion-group{display:grid;gap:var(--cd-3)} @media (min-width:768px){ .accordion-group{grid-template-columns:repeat(auto-fit,minmax(min(384px,100%),1fr));align-content:start} } /* --- numbered: the FAQ rows ([tmj_faq], inc/faq.php; owner feedback 31-faq-design-target.png) -- * A straight port of docs/design-source/homepage-template.html's FAQ (search "FAQ + CTA", * the rows and vals.faqs): every value below is the design's. * row padding 24px 0, min-height 64px, gap 24px, items centered, divider below * each row plus one above the list * number mono, --cd-small, --cd-ink-muted (CSS counter, never hardcoded) * question --cd-h4, weight 800, line-height 1.3, --cd-ink-strong, text-wrap:pretty * toggle 32px circle; closed: --cd-wash ground, --cd-ink-brand plus; open: --cd-accent * ground, --cd-accent-ink glyph, the whole circle turned 45deg so the plus * reads as an x (transform .35s, background/color .25s) * answer --cd-body, line-height 1.7, --cd-ink, max 68ch, inset 0 64px 24px 44px * (44px = the number column + the 24px gap, so it lines up with the question) * The glyph is Font Awesome 6 Free Solid's plus (U+002B), drawn by ::after with the font * the parent theme already loads (anchor-framework/assets/css/all.css, handle * ac-fontawesome, which defines --fa-font-solid). A real font glyph in a grid-centered * box sits on the circle's true center; the old "+"/"x" text glyphs sat on the text * baseline and read off-center. * * Open state is [open] (native
, so no-JS works) minus .is-closing: site.js's * initAccordions() adds .is-closing the moment a close starts, so the toggle turns back * while the answer collapses instead of after it. The smooth height/opacity itself is in * site.js: max-height to the measured scrollHeight in .45s, opacity in .35s, as the design. * ----------------------------------------------------------------------------------------- */ .accordion-group--numbered{ --faq-num-w:20px; --faq-ease:cubic-bezier(.22,.61,.36,1); counter-reset:accordion-num;border-top:1px solid var(--cd-line); } .accordion-group--numbered .accordion--numbered{ border:0;border-radius:0;background:transparent;border-bottom:1px solid var(--cd-line); } .accordion--numbered .accordion__q{ justify-content:flex-start;gap:var(--cd-5);padding:var(--cd-5) 0;min-height:64px; } .accordion--numbered .accordion__q:hover{background:transparent;color:var(--cd-ink-accent)} .accordion__num{ flex:none;min-width:var(--faq-num-w,2ch);font-family:var(--cd-mono);font-size:var(--cd-small); font-weight:400;color:var(--cd-ink-muted); } .accordion__num::before{counter-increment:accordion-num;content:counter(accordion-num,decimal-leading-zero)} .accordion__label{flex:1;min-width:0} .accordion--numbered .accordion__label{ font-size:var(--cd-h4);font-weight:800;line-height:1.3;color:var(--cd-ink-strong);text-wrap:pretty; } /* .accordion.accordion--numbered (0,3,1): beats the default chevron's (0,3,1) open rule by * source order, so a row that is still [open] while it closes (.is-closing) shows this. */ .accordion.accordion--numbered .accordion__q::after{ content:"\2b";flex:none;width:32px;height:32px;border:0;border-radius:var(--cd-r-pill); display:grid;place-items:center; font:var(--fa-font-solid, normal 900 1em/1 "Font Awesome 6 Free");font-size:16px; -webkit-font-smoothing:antialiased; background:var(--cd-wash);color:var(--cd-ink-brand);transform:rotate(0deg); transition:transform .35s var(--faq-ease),background .25s ease,color .25s ease; } .accordion--numbered[open]:not(.is-closing) .accordion__q::after{ background:var(--cd-accent);color:var(--cd-accent-ink);transform:rotate(45deg); } /* Keyboard focus: the ring goes on the toggle circle, not a bar across the whole row * (base.css's :focus-visible ring on a full-width summary drew the stray underline). */ .accordion--numbered .accordion__q:focus-visible{box-shadow:none;outline:none} .accordion--numbered .accordion__q:focus-visible::after{box-shadow:var(--cd-ring)} /* The answer is the clipped box site.js animates (max-height + opacity), so it carries NO * vertical padding: the design's 24px bottom space is a spacer block INSIDE the clip * (::after), counted in scrollHeight, so the row never jumps at either end of the * animation. Only the horizontal indent (never animated) sits on the box itself. */ .accordion--numbered .accordion__a{ padding:0 64px 0 calc(var(--faq-num-w,2ch) + var(--cd-5));max-width:68ch; font-size:var(--cd-body);line-height:1.7;color:var(--cd-ink);text-wrap:pretty; } .accordion--numbered .accordion__a::after{content:"";display:block;height:var(--cd-5)} @media (prefers-reduced-motion:reduce){ .accordion.accordion--numbered .accordion__q::after{transition:none} } /* --- panel: two-card faculty accordion (owner screenshot, feedback-2026-09-25/2.png) ---- * Closed: a white rounded row (.accordion__q) with the question text on the left and an * avatar stack ([anchor_speakers layout="avatars"], .accordion__avatars) plus the chevron * on the right. Open: a SEPARATE white rounded card below (.accordion__a), not the same * card's padded continuation the default .accordion uses above - achieved by stripping the * outer
's own chrome (border/background/radius) so .accordion__q and .accordion__a * each carry their own card surface with a gap between them. * * margin-inline-start:auto on .accordion__avatars pulls it (and the chevron right after it, * via the row's own gap) to the row's end, without fighting the base .accordion__q's * justify-content:space-between now that there are three flex children (label, avatars, * the ::after chevron) instead of the default's two. * ----------------------------------------------------------------------------------------- */ .accordion--panel{border:0;border-radius:0;background:transparent;overflow:visible} .accordion--panel .accordion__q{ justify-content:flex-start;background:var(--cd-ground-raised); border-radius:var(--cd-r-lg);box-shadow:var(--cd-shadow-1); padding:var(--cd-5) var(--cd-6); } .accordion--panel .accordion__label{font-size:var(--cd-h4);font-weight:700} .accordion--panel .accordion__avatars{margin-inline-start:auto;display:flex;align-items:center} .accordion--panel .accordion__q::after{border-color:var(--cd-ink-accent)} .accordion--panel .accordion__a{ padding:var(--cd-4);margin-top:var(--cd-3);max-width:none; background:var(--cd-ground-raised);border-radius:var(--cd-r-lg);box-shadow:var(--cd-shadow-1); } /* --- .faq: the shared FAQ block ([tmj_faq], inc/faq.php): prompt + CTAs on the left, ONE * column of numbered questions on the right at every width (the generic group's auto-fit * would split a wide right column into two). */ .faq .accordion-group{grid-template-columns:minmax(0,1fr);gap:0}