Open demo

CSS code

HTML 
<footer class="facc" data-footer-accordion>
  <div class="cols">
    <div class="brand">
      <p class="logo">Northwind</p>
      <p>Boards, reviews and release notes for teams that ship every week.</p>
      <ul class="social">
        <li><a href="#" aria-label="Northwind on X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
        <li><a href="#" aria-label="Northwind on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 19c-4 1.3-4-2.2-6-2.7m12 5.4v-3.4c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0C6.7 3.6 5.7 3.9 5.7 3.9a4.3 4.3 0 00-.1 3.2A4.6 4.6 0 004.3 10.3c0 4.6 2.7 5.7 5.5 6-.4.4-.5.9-.5 1.5V21"/></svg></a></li>
        <li><a href="#" aria-label="Northwind on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 11v6M8 8v.01M12 17v-3.5a2 2 0 014 0V17"/></svg></a></li>
      </ul>
    </div>
    <nav aria-labelledby="facc-product"><details open><summary id="facc-product">Product <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
      <ul><li><a href="#">Overview</a></li><li><a href="#">Automations</a></li><li><a href="#">Integrations</a></li><li><a href="#">Changelog</a></li></ul></details></nav>
    <nav aria-labelledby="facc-company"><details open><summary id="facc-company">Company <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
      <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Contact</a></li></ul></details></nav>
    <nav aria-labelledby="facc-resources"><details open><summary id="facc-resources">Resources <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
      <ul><li><a href="#">Docs</a></li><li><a href="#">API</a></li><li><a href="#">Guides</a></li><li><a href="#">Status</a></li></ul></details></nav>
    <nav aria-labelledby="facc-legal"><details open><summary id="facc-legal">Legal <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
      <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Security</a></li><li><a href="#">DPA</a></li></ul></details></nav>
  </div>
  <div class="base">
    <p>© Northwind Ltd.</p>
    <nav aria-label="Legal"><ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Cookies</a></li></ul></nav>
  </div>
</footer>
CSS 
/* Dark footer whose link columns are <details> elements: open columns from 768px up, collapsed accordions below. */
.facc{--facc-bg:#101828;--facc-text:#98a0b3;--facc-line:rgba(255,255,255,.1);--facc-focus:#a5b4fc;
  background:var(--facc-bg);color:var(--facc-text);padding:46px 34px 28px;line-height:normal}
.facc,.facc *{box-sizing:border-box}
.facc p,.facc ul{margin:0;padding:0}
.facc ul{list-style:none}
.facc a{color:inherit;text-decoration:none;border-radius:4px}
.facc a:focus-visible,.facc summary:focus-visible{outline:2px solid var(--facc-focus);outline-offset:2px}
.facc svg{display:block}
.facc .cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:34px;max-width:1080px;margin:0 auto}
.facc .logo{color:#fff;font-size:1.06rem;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.facc .logo~p{font-size:.85rem;line-height:1.65;max-width:32ch}
.facc .social{display:flex;gap:9px;margin-top:16px}
.facc .social a{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.07);transition:background .15s,color .15s}
.facc .social a:hover{background:rgba(255,255,255,.16);color:#fff}
.facc .social svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.facc summary{list-style:none;display:flex;align-items:center;margin-bottom:13px;color:#fff;font-size:.79rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:default;border-radius:4px}
.facc summary::-webkit-details-marker{display:none}
.facc summary svg{display:none;margin-left:auto;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s}
.facc details ul{display:flex;flex-direction:column;gap:10px;font-size:.86rem}
.facc details a{transition:color .15s}
.facc details a:hover,.facc .base a:hover{color:#fff}
.facc .base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:1080px;margin:38px auto 0;padding-top:22px;border-top:1px solid var(--facc-line);font-size:.82rem}
.facc .base ul{display:flex;flex-wrap:wrap;gap:8px 20px}
@media (max-width:767.98px){
  .facc{padding:40px 20px 26px}
  .facc .cols{grid-template-columns:1fr;gap:0}
  .facc .brand{margin-bottom:24px}
  .facc details{border-bottom:1px solid var(--facc-line)}
  .facc summary{cursor:pointer;padding:15px 0;margin:0}
  .facc summary svg{display:block}
  .facc details[open] summary svg{transform:rotate(180deg)}
  .facc details ul{padding-bottom:16px}
}
@media (prefers-reduced-motion:reduce){.facc *{transition:none!important}}
JavaScript 
// Below 768px the link groups are collapsed accordions; from 768px up they are open columns that cannot be closed.
// Without JavaScript every group simply stays open.
(function () {
  var mq = window.matchMedia("(max-width: 767.98px)");
  var groups = document.querySelectorAll("[data-footer-accordion] details");
  function sync() {
    groups.forEach(function (d) {
      d.open = !mq.matches;
      d.querySelector("summary").tabIndex = mq.matches ? 0 : -1; // a heading on desktop, a button on mobile
    });
  }
  groups.forEach(function (d) {
    d.querySelector("summary").addEventListener("click", function (e) { if (!mq.matches) e.preventDefault(); });
  });
  sync();
  mq.addEventListener("change", sync);
})();

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="facc" data-footer-accordion>
  <div class="cols">
    <div class="row">
      <div class="brand col-12 col-md-4">
        <p class="logo">Northwind</p>
        <p>Boards, reviews and release notes for teams that ship every week.</p>
        <ul class="social list-unstyled d-flex mb-0">
          <li><a class="btn" href="#" aria-label="Northwind on X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
          <li><a class="btn" href="#" aria-label="Northwind on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 19c-4 1.3-4-2.2-6-2.7m12 5.4v-3.4c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0C6.7 3.6 5.7 3.9 5.7 3.9a4.3 4.3 0 00-.1 3.2A4.6 4.6 0 004.3 10.3c0 4.6 2.7 5.7 5.5 6-.4.4-.5.9-.5 1.5V21"/></svg></a></li>
          <li><a class="btn" href="#" aria-label="Northwind on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 11v6M8 8v.01M12 17v-3.5a2 2 0 014 0V17"/></svg></a></li>
        </ul>
      </div>
      <nav class="col-12 col-md-2" aria-labelledby="facc-product"><details open><summary id="facc-product">Product <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
        <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Overview</a></li><li class="nav-item"><a class="nav-link" href="#">Automations</a></li><li class="nav-item"><a class="nav-link" href="#">Integrations</a></li><li class="nav-item"><a class="nav-link" href="#">Changelog</a></li></ul></details></nav>
      <nav class="col-12 col-md-2" aria-labelledby="facc-company"><details open><summary id="facc-company">Company <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
        <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">About</a></li><li class="nav-item"><a class="nav-link" href="#">Careers</a></li><li class="nav-item"><a class="nav-link" href="#">Press</a></li><li class="nav-item"><a class="nav-link" href="#">Contact</a></li></ul></details></nav>
      <nav class="col-12 col-md-2" aria-labelledby="facc-resources"><details open><summary id="facc-resources">Resources <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
        <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Docs</a></li><li class="nav-item"><a class="nav-link" href="#">API</a></li><li class="nav-item"><a class="nav-link" href="#">Guides</a></li><li class="nav-item"><a class="nav-link" href="#">Status</a></li></ul></details></nav>
      <nav class="col-12 col-md-2" aria-labelledby="facc-legal"><details open><summary id="facc-legal">Legal <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
        <ul class="nav flex-column"><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li><li class="nav-item"><a class="nav-link" href="#">Terms</a></li><li class="nav-item"><a class="nav-link" href="#">Security</a></li><li class="nav-item"><a class="nav-link" href="#">DPA</a></li></ul></details></nav>
    </div>
  </div>
  <div class="base d-flex flex-wrap justify-content-between">
    <p class="mb-0">© Northwind Ltd.</p>
    <nav aria-label="Legal"><ul class="nav"><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li><li class="nav-item"><a class="nav-link" href="#">Terms</a></li><li class="nav-item"><a class="nav-link" href="#">Cookies</a></li></ul></nav>
  </div>
</footer>
CSS 
/* Bootstrap .row / .col-md-* columns whose link groups are native <details>, so the accordion needs no Bootstrap JavaScript. */
.facc{--facc-bg:#101828;--facc-text:#98a0b3;--facc-line:rgba(255,255,255,.1);--facc-focus:#a5b4fc;
  background:var(--facc-bg);color:var(--facc-text);padding:46px 34px 28px;line-height:normal}
.facc .cols{max-width:1080px;margin:0 auto}
.facc .cols>.row{--bs-gutter-x:34px;--bs-gutter-y:0}
.facc .logo{color:#fff;font-size:1.06rem;font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.facc .logo~p{font-size:.85rem;line-height:1.65;max-width:32ch;margin:0}
.facc .social{gap:9px;margin-top:16px}
.facc .social .btn{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-color:var(--facc-text);--bs-btn-bg:rgba(255,255,255,.07);--bs-btn-border-width:0;--bs-btn-border-radius:9px;
  --bs-btn-hover-color:#fff;--bs-btn-hover-bg:rgba(255,255,255,.16);--bs-btn-active-color:#fff;--bs-btn-active-bg:rgba(255,255,255,.16);
  width:34px;height:34px;display:grid;place-items:center;transition:background-color .15s,color .15s}
.facc .social svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.facc summary{list-style:none;display:flex;align-items:center;margin-bottom:13px;color:#fff;font-size:.79rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:default;border-radius:4px}
.facc summary::-webkit-details-marker{display:none}
.facc summary svg{display:none;margin-left:auto;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;transition:transform .2s}
.facc details .nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;--bs-nav-link-font-size:.86rem;--bs-nav-link-font-weight:400;--bs-nav-link-color:var(--facc-text);--bs-nav-link-hover-color:#fff;gap:10px}
.facc .nav-link{align-self:flex-start;border-radius:4px}
.facc .base{gap:16px;max-width:1080px;margin:38px auto 0;padding-top:22px;border-top:1px solid var(--facc-line);font-size:.82rem}
.facc .base .nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;--bs-nav-link-font-size:.82rem;--bs-nav-link-color:var(--facc-text);--bs-nav-link-hover-color:#fff;gap:8px 20px}
.facc a:focus-visible,.facc summary:focus-visible{outline:2px solid var(--facc-focus);outline-offset:2px;box-shadow:none}
@media (max-width:767.98px){
  .facc{padding:40px 20px 26px}
  .facc .brand{margin-bottom:24px}
  .facc details{border-bottom:1px solid var(--facc-line)}
  .facc summary{cursor:pointer;padding:15px 0;margin:0}
  .facc summary svg{display:block}
  .facc details[open] summary svg{transform:rotate(180deg)}
  .facc details .nav{padding-bottom:16px}
}
@media (prefers-reduced-motion:reduce){.facc *{transition:none!important}}
JavaScript 
// Below 768px the link groups are collapsed accordions; from 768px up they are open columns that cannot be closed.
// Without JavaScript every group simply stays open.
(function () {
  var mq = window.matchMedia("(max-width: 767.98px)");
  var groups = document.querySelectorAll("[data-footer-accordion] details");
  function sync() {
    groups.forEach(function (d) {
      d.open = !mq.matches;
      d.querySelector("summary").tabIndex = mq.matches ? 0 : -1; // a heading on desktop, a button on mobile
    });
  }
  groups.forEach(function (d) {
    d.querySelector("summary").addEventListener("click", function (e) { if (!mq.matches) e.preventDefault(); });
  });
  sync();
  mq.addEventListener("change", sync);
})();

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="bg-[#101828] px-5 pt-10 pb-[26px] leading-[normal] text-[#98a0b3] md:px-[34px] md:pt-[46px] md:pb-7 [&_a]:rounded [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-2 [&_a:focus-visible]:outline-[#a5b4fc] [&_summary:focus-visible]:outline-2 [&_summary:focus-visible]:outline-offset-2 [&_summary:focus-visible]:outline-[#a5b4fc]" data-footer-accordion>
  <div class="mx-auto grid max-w-[1080px] grid-cols-1 md:grid-cols-[1.5fr_repeat(4,1fr)] md:gap-[34px]">
    <div class="max-md:mb-6">
      <p class="mb-2.5 text-[1.06rem] font-extrabold tracking-[-.02em] text-white">Northwind</p>
      <p class="max-w-[32ch] text-[.85rem] leading-[1.65]">Boards, reviews and release notes for teams that ship every week.</p>
      <ul class="mt-4 flex gap-[9px] [&_a]:grid [&_a]:size-[34px] [&_a]:place-items-center [&_a]:rounded-[9px]! [&_a]:bg-white/7 [&_a]:transition-colors [&_a]:duration-150 [&_a:hover]:bg-white/16 [&_a:hover]:text-white motion-reduce:[&_a]:transition-none [&_svg]:size-[15px] [&_svg]:fill-none [&_svg]:stroke-current [&_svg]:stroke-2 [&_svg]:[stroke-linecap:round] [&_svg]:[stroke-linejoin:round]">
        <li><a href="#" aria-label="Northwind on X"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4l16 16M20 4L4 20"/></svg></a></li>
        <li><a href="#" aria-label="Northwind on GitHub"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 19c-4 1.3-4-2.2-6-2.7m12 5.4v-3.4c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 00-1.3-3.2 4.3 4.3 0 00-.1-3.2s-1-.3-3.4 1.3a11.7 11.7 0 00-6 0C6.7 3.6 5.7 3.9 5.7 3.9a4.3 4.3 0 00-.1 3.2A4.6 4.6 0 004.3 10.3c0 4.6 2.7 5.7 5.5 6-.4.4-.5.9-.5 1.5V21"/></svg></a></li>
        <li><a href="#" aria-label="Northwind on LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 11v6M8 8v.01M12 17v-3.5a2 2 0 014 0V17"/></svg></a></li>
      </ul>
    </div>
    <nav aria-labelledby="facc-product"><details open class="group max-md:border-b max-md:border-white/10"><summary class="flex cursor-default list-none items-center rounded text-[.79rem] font-extrabold tracking-[.08em] text-white uppercase md:mb-[13px] max-md:cursor-pointer max-md:py-[15px] [&::-webkit-details-marker]:hidden" id="facc-product">Product <svg class="ml-auto hidden size-[15px] fill-none stroke-current stroke-[2.4] transition-transform duration-200 group-open:rotate-180 max-md:block motion-reduce:transition-none" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
      <ul class="flex flex-col gap-2.5 text-[.86rem] max-md:pb-4 [&_a]:transition-colors [&_a]:duration-150 [&_a:hover]:text-white motion-reduce:[&_a]:transition-none"><li><a href="#">Overview</a></li><li><a href="#">Automations</a></li><li><a href="#">Integrations</a></li><li><a href="#">Changelog</a></li></ul></details></nav>
    <nav aria-labelledby="facc-company"><details open class="group max-md:border-b max-md:border-white/10"><summary class="flex cursor-default list-none items-center rounded text-[.79rem] font-extrabold tracking-[.08em] text-white uppercase md:mb-[13px] max-md:cursor-pointer max-md:py-[15px] [&::-webkit-details-marker]:hidden" id="facc-company">Company <svg class="ml-auto hidden size-[15px] fill-none stroke-current stroke-[2.4] transition-transform duration-200 group-open:rotate-180 max-md:block motion-reduce:transition-none" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
      <ul class="flex flex-col gap-2.5 text-[.86rem] max-md:pb-4 [&_a]:transition-colors [&_a]:duration-150 [&_a:hover]:text-white motion-reduce:[&_a]:transition-none"><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Press</a></li><li><a href="#">Contact</a></li></ul></details></nav>
    <nav aria-labelledby="facc-resources"><details open class="group max-md:border-b max-md:border-white/10"><summary class="flex cursor-default list-none items-center rounded text-[.79rem] font-extrabold tracking-[.08em] text-white uppercase md:mb-[13px] max-md:cursor-pointer max-md:py-[15px] [&::-webkit-details-marker]:hidden" id="facc-resources">Resources <svg class="ml-auto hidden size-[15px] fill-none stroke-current stroke-[2.4] transition-transform duration-200 group-open:rotate-180 max-md:block motion-reduce:transition-none" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
      <ul class="flex flex-col gap-2.5 text-[.86rem] max-md:pb-4 [&_a]:transition-colors [&_a]:duration-150 [&_a:hover]:text-white motion-reduce:[&_a]:transition-none"><li><a href="#">Docs</a></li><li><a href="#">API</a></li><li><a href="#">Guides</a></li><li><a href="#">Status</a></li></ul></details></nav>
    <nav aria-labelledby="facc-legal"><details open class="group max-md:border-b max-md:border-white/10"><summary class="flex cursor-default list-none items-center rounded text-[.79rem] font-extrabold tracking-[.08em] text-white uppercase md:mb-[13px] max-md:cursor-pointer max-md:py-[15px] [&::-webkit-details-marker]:hidden" id="facc-legal">Legal <svg class="ml-auto hidden size-[15px] fill-none stroke-current stroke-[2.4] transition-transform duration-200 group-open:rotate-180 max-md:block motion-reduce:transition-none" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg></summary>
      <ul class="flex flex-col gap-2.5 text-[.86rem] max-md:pb-4 [&_a]:transition-colors [&_a]:duration-150 [&_a:hover]:text-white motion-reduce:[&_a]:transition-none"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Security</a></li><li><a href="#">DPA</a></li></ul></details></nav>
  </div>
  <div class="mx-auto mt-[38px] flex max-w-[1080px] flex-wrap justify-between gap-4 border-t border-white/10 pt-[22px] text-[.82rem]">
    <p>© Northwind Ltd.</p>
    <nav aria-label="Legal"><ul class="flex flex-wrap gap-x-5 gap-y-2 [&_a:hover]:text-white"><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li><li><a href="#">Cookies</a></li></ul></nav>
  </div>
</footer>
JavaScript 
// Below 768px the link groups are collapsed accordions; from 768px up they are open columns that cannot be closed.
// Without JavaScript every group simply stays open.
(function () {
  var mq = window.matchMedia("(max-width: 767.98px)");
  var groups = document.querySelectorAll("[data-footer-accordion] details");
  function sync() {
    groups.forEach(function (d) {
      d.open = !mq.matches;
      d.querySelector("summary").tabIndex = mq.matches ? 0 : -1; // a heading on desktop, a button on mobile
    });
  }
  groups.forEach(function (d) {
    d.querySelector("summary").addEventListener("click", function (e) { if (!mq.matches) e.preventDefault(); });
  });
  sync();
  mq.addEventListener("change", sync);
})();

About this set

A dark footer whose link columns turn into accordions on phones. From 768px up it is a normal five-column footer: the brand with a blurb and three social buttons, then Product, Company, Resources and Legal columns, all open. Below 768px each column becomes a collapsed row with a chevron, separated by hairlines, so four long lists shrink to four tappable headings and the footer stops being the longest part of the page. Each group is a native details and summary pair, so opening and closing works without any script. A short script only syncs the open state with the breakpoint: groups start closed on mobile and are always open on desktop, where their summaries are taken out of the tab order and cannot be collapsed by accident. Without JavaScript every group simply stays open. Use it for SaaS, product and documentation sites with more footer links than a phone screen can comfortably show. The Bootstrap version uses .row and .col-md columns, .nav.flex-column lists and .btn social icons around the same details elements, so it needs no Bootstrap JavaScript.

What’s included

  • Five columns on desktop, accordions below 768px
  • Native details and summary, works without JavaScript
  • Groups start closed on mobile and cannot collapse on desktop
  • Rotating chevron, disabled for reduced motion
  • Social buttons and a legal nav in the base row

Accessibility

Each group is a nav labelled by its summary, so the landmark keeps its name whether open or closed, and summaries announce their expanded state natively. On desktop the summaries leave the tab order because they are plain headings there. Links and summaries show a 2px light indigo focus outline that is visible on the dark background, and the chevron rotation is off under prefers-reduced-motion.

Customise it

Change --facc-bg, --facc-text, --facc-line and --facc-focus on .facc in the plain CSS and Bootstrap versions, and the 767.98px breakpoint in both the CSS and the script. In Tailwind edit bg-[#101828] and text-[#98a0b3]; the md: and max-md: prefixes set the breakpoint.