/* ========================================================================== KF Elements — FAQ -------------------------------------------------------------------------- Native
/: the browser does the accordion, we draw the plus/minus with two gradients so no icon font or JS is needed. RELEASED on `main` 0.11.0. Every rule below that carries no new class is today's rule with its literal moved into a token's FALLBACK, so an unset token resolves to exactly the value that shipped (ADR-0004 decision 2). The `style-boxed`, `icon-left`, `kfe-faq-title`, `kfe-faq-intro` and `kfe-faq-question` rules lead with a class this widget has never printed, so no existing page can match them. ========================================================================== */ .kfe .kfe-faq .head { margin-bottom: 48px; max-width: var(--kfe-title-measure, 30ch); text-align: var(--kfe-head-align, inherit); } /* The head title's level is a control (header_size). At h2 — the released default — the widget still prints a BARE

with no class, so this rule pairs the tag with the class the other levels carry, and the two must stay IN STEP (ADR-0002 decision 7; testimonials.css has the same pairing). The class-only rule below restates what base.css's `.kfe h2` gives the bare tag, and is listed separately so it cannot outrank `.kfe .kfe-dark h2`. */ .kfe .kfe-faq .head h2, .kfe .kfe-faq .head .kfe-faq-title { font-size: var(--kfe-title-size, var(--kfe-h2-size, clamp(1.8rem, 3.4vw, 2.7rem))); line-height: 1.22; } .kfe .kfe-faq .head .kfe-faq-title { font-family: var(--kfe-font-heading); font-weight: var(--kfe-heading-weight); letter-spacing: -0.01em; color: var(--kfe-heading, var(--kfe-primary)); margin: 0; } .kfe .kfe-faq.kfe-dark .head .kfe-faq-title { color: #fff; } /* The intro sits between the head and the list, at the list's width — the head's 30ch measure is the TITLE's, and a paragraph set to it would run at half the list's width. */ .kfe .kfe-faq .kfe-faq-intro { max-width: var(--kfe-faq-list, 880px); margin: -24px 0 34px; color: var(--kfe-body, var(--kfe-muted)); font-size: var(--kfe-body-size, 16px); line-height: 1.7; text-align: var(--kfe-head-align, inherit); } .kfe .kfe-faq .kfe-faq-intro p + p { margin-top: 1em; } .kfe .kfe-faq.kfe-dark .kfe-faq-intro { color: var(--kfe-on-dark); } .kfe .kfe-faq .list { max-width: var(--kfe-faq-list, 880px); border-top: 1px solid var(--kfe-line); } .kfe .kfe-faq details { border-bottom: 1px solid var(--kfe-line); } .kfe .kfe-faq summary { list-style: none; cursor: pointer; padding: 26px 44px 26px 0; position: relative; font-family: var(--kfe-font-heading); font-size: clamp(1.02rem, 1.7vw, 1.2rem); font-weight: 400; color: var(--kfe-primary); line-height: 1.45; transition: color 0.3s; } .kfe .kfe-faq summary::-webkit-details-marker { display: none; } .kfe .kfe-faq summary:hover { color: var(--kfe-accent); } /* question_tag = h3: a heading is valid content, and the heading must change the SEMANTICS and nothing else — so it inherits the summary's own font, colour and box and stays on the line. */ .kfe .kfe-faq summary > .kfe-faq-question { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; display: inline; } /* plus/minus indicator. The marker is ONE 12x12 box carrying TWO background layers — layer 1 the horizontal stroke, layer 2 the vertical one — so `+` closed and `—` open is nothing more than "stop painting layer 2". #116: the open rule used to do BOTH of the two things that each turn a plus into a minus. It dropped the vertical layer (by restating `background` with one layer) AND it rotated the survivor 90deg. Dropping the vertical stroke leaves a horizontal one; rotating a horizontal stroke by 90deg stands it back up. Together they drew a VERTICAL BAR for the open row where the reference draws a minus — on every page carrying a `kfe_faq` with an open question, in both `rule` and `style-boxed`, at every width, since 0.11.0. Measured on the 2026-09-20 `ref | build` strips of wp-eedk's preview pack. THE ROTATE IS WHAT GOES, not the layer drop, and the two are not interchangeable: rotating a plus by 90deg is a no-op, so the rotate can only change the drawn shape once the vertical layer is already gone — which is to say it can only ever be the defect. Which layers are painted is the only thing that decides what is drawn. And that layer is sized to zero rather than dropped from the shorthand, because `background-size` is an animatable property and the `background` shorthand is not. The 0.35s that used to animate the rotate now animates the vertical stroke closing, which is the motion the transition was written for; an engine that will not interpolate it swaps the shape instantly and still draws the right one. */ .kfe .kfe-faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: linear-gradient(var(--kfe-highlight), var(--kfe-highlight)) center / 12px 1px no-repeat, linear-gradient(var(--kfe-highlight), var(--kfe-highlight)) center / 1px 12px no-repeat; transition: background-size 0.35s; } /* `> summary`, a CHILD, since w2.homepack.1. It was a descendant, which for every FAQ ever printed is the same thing — a question's
holds one and no other
— and so it matches exactly the elements it matched. The fold puts the whole list inside ONE MORE
, and with a descendant here an open fold would draw every closed question inside it as open. The boxed colour rule below is narrowed the same way for the same reason. The computed-style A/B of every existing fixture page is the proof that nothing it reached before moved. */ .kfe .kfe-faq details[open] > summary::after { background-size: 12px 1px, 1px 0; } .kfe .kfe-faq .answer { padding: 0 60px 28px 0; } .kfe .kfe-faq .answer p { color: var(--kfe-body, var(--kfe-muted)); font-size: var(--kfe-body-size, 15.5px); line-height: 1.75; margin: 0 0 14px; } .kfe .kfe-faq .answer p:last-child { margin-bottom: 0; } /* Rich answer (ADR-0003 decision 3): the colour and size sit on `p`, so an allow-listed list needs them too, and base.css has no list reset. */ .kfe .kfe-faq .answer ul, .kfe .kfe-faq .answer ol { color: var(--kfe-body, var(--kfe-muted)); font-size: var(--kfe-body-size, 15.5px); line-height: 1.75; margin: 0 0 14px; padding-inline-start: var(--kfe-list-indent); } .kfe .kfe-faq .answer ul:last-child, .kfe .kfe-faq .answer ol:last-child { margin-bottom: 0; } .kfe .kfe-faq .answer li + li { margin-top: 6px; } /* No rule on `.answer a`: today there is none, a rich answer's links take the theme's own anchor colour, and adding one here would repaint every released FAQ that carries a link. It is a finding for the lane that owns base.css, not an edit this one may make (ADR-0004 decision 7). */ /* ========================================================================== faq_style = boxed — the reference's native accordion -------------------------------------------------------------------------- Each question in its own bordered box, stacked so two adjacent borders draw ONE rule; the list loses the upper rule the `rule` style hangs its first question from, and the head and the list are centred, as the reference's 80% column is. `rule` keeps today's left placement and today's borders. ========================================================================== */ .kfe .kfe-faq.style-boxed .head, .kfe .kfe-faq.style-boxed .kfe-faq-intro, .kfe .kfe-faq.style-boxed .list { margin-inline: auto; } .kfe .kfe-faq.style-boxed .list { border-top: 0; } .kfe .kfe-faq.style-boxed details { border: 1px solid var(--kfe-line); } .kfe .kfe-faq.style-boxed details + details { margin-block-start: -1px; } .kfe .kfe-faq.style-boxed summary { padding: 15px 44px 15px 20px; font-weight: var(--kfe-h3-weight, 400); color: var(--kfe-primary); } .kfe .kfe-faq.style-boxed details[open] > summary { color: var(--kfe-accent); } .kfe .kfe-faq.style-boxed .answer { padding: 15px 20px; border-block-start: 1px solid var(--kfe-line); } /* ========================================================================== icon_side = left -------------------------------------------------------------------------- The indicator moves to the inline START and the summary's padding mirrors it. The rules it has to beat — `summary { padding: 26px 44px 26px 0 }`, `summary::after { right: 6px }` and their hand-written RTL mirror below — are PHYSICAL and released, so this variant states each direction once, as the rest of this file does, and writes logical properties inside each. ========================================================================== */ .kfe .kfe-faq.icon-left summary { padding-inline: 44px 0; } .kfe .kfe-faq.icon-left summary::after { right: auto; left: auto; inset-inline-start: 6px; } .kfe .kfe-faq.icon-left .answer { padding-inline: 60px 0; } .kfe .kfe-faq.style-boxed.icon-left summary { padding-inline: 44px 20px; } .kfe .kfe-faq.style-boxed.icon-left .answer { padding-inline: 20px; } /* dark-ground flips */ .kfe .kfe-faq.kfe-dark .list { border-color: rgba(255, 255, 255, 0.14); } .kfe .kfe-faq.kfe-dark details { border-color: rgba(255, 255, 255, 0.14); } .kfe .kfe-faq.kfe-dark summary { color: #fff; } .kfe .kfe-faq.kfe-dark summary:hover { color: var(--kfe-on-dark-soft); } .kfe .kfe-faq.kfe-dark .answer p { color: rgba(255, 255, 255, 0.68); } .kfe .kfe-faq.kfe-dark .answer ul, .kfe .kfe-faq.kfe-dark .answer ol { color: rgba(255, 255, 255, 0.68); } /* RTL: indicator and padding swap sides */ html[dir="rtl"] body .kfe .kfe-faq summary { padding: 26px 0 26px 44px; } html[dir="rtl"] body .kfe .kfe-faq summary::after { right: auto; left: 6px; } html[dir="rtl"] body .kfe .kfe-faq .answer { padding: 0 0 28px 60px; } html[dir="rtl"] body .kfe .kfe-faq.icon-left summary { padding-inline: 44px 0; } html[dir="rtl"] body .kfe .kfe-faq.icon-left summary::after { right: auto; left: auto; inset-inline-start: 6px; } html[dir="rtl"] body .kfe .kfe-faq.icon-left .answer { padding-inline: 60px 0; } html[dir="rtl"] body .kfe .kfe-faq.style-boxed summary { padding: 15px 20px 15px 44px; } html[dir="rtl"] body .kfe .kfe-faq.style-boxed .answer { padding: 15px 20px; } html[dir="rtl"] body .kfe .kfe-faq.style-boxed.icon-left summary { padding-inline: 44px 20px; } html[dir="rtl"] body .kfe .kfe-faq.style-boxed.icon-left .answer { padding-inline: 20px; } @media (max-width: 560px) { .kfe .kfe-faq summary { padding-right: 36px; font-size: 1rem; } .kfe .kfe-faq .answer { padding-right: 20px; } .kfe .kfe-faq.icon-left summary { padding-inline: 36px 0; } .kfe .kfe-faq.icon-left .answer { padding-inline: 20px 0; } /* `.kfe .kfe-faq summary` above is (0,2,1); the boxed rule at :125 is (0,3,1) and a media query adds no specificity, so without this line a boxed FAQ with the indicator on the RIGHT keeps its 44px side while every other style narrows to 36. `.style-boxed.icon-left` already has its own line, so only the right-hand case was missing. */ .kfe .kfe-faq.style-boxed summary { padding-inline: 20px 36px; } .kfe .kfe-faq.style-boxed.icon-left summary { padding-inline: 36px 16px; } html[dir="rtl"] body .kfe .kfe-faq summary { padding-left: 36px; padding-right: 0; } /* The RTL boxed rule at :163 is physical, so it takes its own phone line. */ html[dir="rtl"] body .kfe .kfe-faq.style-boxed summary { padding-inline: 20px 36px; } html[dir="rtl"] body .kfe .kfe-faq .answer { padding-left: 20px; padding-right: 0; } html[dir="rtl"] body .kfe .kfe-faq.icon-left summary { padding-inline: 36px 0; } html[dir="rtl"] body .kfe .kfe-faq.icon-left .answer { padding-inline: 20px 0; } } /* ========================================================================== faq_style = card, and faq_fold (w2.homepack.1) -------------------------------------------------------------------------- Every rule leads with `.style-card`, `.is-folded` or a class only the fold prints, so no released FAQ can match one. `card`: the heading, the intro and the list inside ONE card, centred on the section's ground. The card is the widget's own `.kfe-wrap`, which holds exactly those three things. The fold: a native
around the list, whose is a label over a circled plus that turns to a cross when it is open. It has to BEAT the question rules above that name `details` and `summary` bare — this
is one too — so its selectors carry `.is-folded` and the `.kfe-faq-fold >` step: (0,5,0), over the highest of those, the RTL boxed summary at (0,4,3). ========================================================================== */ .kfe .kfe-faq.style-card > .kfe-wrap { width: min(var(--kfe-faq-card, 780px), calc(100% - 2 * var(--kfe-gutter))); max-width: none; margin-inline: auto; padding: 54px 48px; background: var(--kfe-faq-card-ground, var(--kfe-white)); border: 1px solid var(--kfe-line); border-radius: var(--kfe-faq-card-radius, var(--kfe-radius-card, 4px)); box-shadow: var(--kfe-shadow-card, 0 30px 80px -40px rgba(10, 14, 28, 0.35)); text-align: var(--kfe-head-align, center); } .kfe .kfe-faq.style-card .head { max-width: none; margin-bottom: 16px; } .kfe .kfe-faq.style-card .head h2, .kfe .kfe-faq.style-card .head .kfe-faq-title { line-height: 1.12; } .kfe .kfe-faq.style-card .kfe-faq-intro { margin: 0 auto 32px; max-width: var(--kfe-body-measure, 54ch); } .kfe .kfe-faq.style-card .list { max-width: none; margin-inline: auto; text-align: start; } .kfe .kfe-faq.style-card.kfe-dark > .kfe-wrap { background: var(--kfe-faq-card-ground-on-dark, rgba(255, 255, 255, 0.04)); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; } @media (max-width: 680px) { .kfe .kfe-faq.style-card > .kfe-wrap { padding: 40px 26px; } } .kfe .kfe-faq.is-folded .kfe-faq-fold { border: 0; margin: 0; } .kfe .kfe-faq.is-folded .kfe-faq-fold > .kfe-faq-fold-toggle { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; padding: 0; position: static; list-style: none; cursor: pointer; font-family: inherit; font-size: var(--kfe-faq-fold-size, 12px); font-weight: 700; line-height: 1.4; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kfe-faq-fold-color, var(--kfe-accent)); } .kfe .kfe-faq.is-folded .kfe-faq-fold > .kfe-faq-fold-toggle::-webkit-details-marker { display: none; } .kfe .kfe-faq.is-folded .kfe-faq-fold > .kfe-faq-fold-toggle::after { content: "+"; position: static; width: 46px; height: 46px; margin: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--kfe-faq-fold-ring, var(--kfe-accent)); border-radius: 50%; background: none; font-size: var(--kfe-faq-fold-mark-size, 26px); font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--kfe-faq-fold-color, var(--kfe-accent)); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.3s, color 0.3s; } .kfe .kfe-faq.is-folded .kfe-faq-fold > .kfe-faq-fold-toggle:hover { color: var(--kfe-heading, var(--kfe-primary)); } .kfe .kfe-faq.is-folded .kfe-faq-fold > .kfe-faq-fold-toggle:hover::after { background-color: var(--kfe-faq-fold-ring, var(--kfe-accent)); color: var(--kfe-faq-fold-hover-ink, var(--kfe-white)); } .kfe .kfe-faq.is-folded .kfe-faq-fold[open] > .kfe-faq-fold-toggle::after { transform: rotate(135deg); } .kfe .kfe-faq.is-folded .kfe-faq-fold > .kfe-faq-fold-toggle:focus-visible { outline: 2px solid var(--kfe-accent); outline-offset: 4px; } .kfe .kfe-faq.is-folded .kfe-faq-fold > .list { margin-top: 38px; padding-top: 8px; } .kfe .kfe-faq.is-folded.kfe-dark .kfe-faq-fold > .kfe-faq-fold-toggle { color: var(--kfe-on-dark-soft); } @media (prefers-reduced-motion: reduce) { .kfe .kfe-faq.is-folded .kfe-faq-fold > .kfe-faq-fold-toggle::after { transition: none; } }