<details class="acc-uline" name="acc-uline" open>
  <summary>What is CodeFronts?</summary>
  <p>
    A library of hand-crafted CSS components, generators and tools for developers who care about
    craft.
  </p>
</details>
<details class="acc-uline" name="acc-uline">
  <summary>Is everything free?</summary>
  <p>Yes — MIT licensed for personal and commercial projects, no attribution required.</p>
</details>
<details class="acc-uline" name="acc-uline">
  <summary>Does it use any frameworks?</summary>
  <p>No frameworks, no dependencies. Vanilla HTML, CSS and a tiny bit of JS where needed.</p>
</details>

.acc-uline { border-bottom: 1px solid rgba(156,123,214,0.18); }
.acc-uline summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 14px 0; font: 600 13px/1.4 system-ui, sans-serif;
  color: rgba(240,238,255,0.62); transition: color .25s;
}
.acc-uline summary::-webkit-details-marker { display: none; }
.acc-uline summary::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 0;
  background: linear-gradient(90deg, #9c7bd6, #d49a5c);
  transition: width .4s cubic-bezier(.2,.9,.3,1);
}
.acc-uline[open] summary { color: #f0eeff; }
.acc-uline[open] summary::after { width: 100%; }
.acc-uline p {
  margin: 0; padding: 10px 0 16px;
  font: 12px/1.6 system-ui, sans-serif; color: rgba(240,238,255,0.55);
}